/* ==========================================================================
    1. Base Styles & Variables
    ========================================================================== */
 :root {  
   --bg-color: whitesmoke;
   --text-color: black;
   --container-bg: #FCF6F5;
   --container-shadow: rgba(0, 0, 0, 0.08);
   --container-border: transparent;
   
   --heading-color: #d66d6d;
   --paragraph-color: #050505;
   
   --link-color: #3294cc;
   --link-hover-decoration: underline;
   
   --border-color: #E0E0E0;
   --table-header-bg: #f7f7f7;
   
   --nav-bg: #343a40;
   --nav-text: #fff;
   
   --footer-bg: #f9f9f9;
   --footer-text: #555;
   
   --input-bg: #fff;
   --input-text: #495057;
   --input-border: #ced4da;
   
   --button-bg: #A3D2A1;
   --button-text: #2F4F4F;
   --button-hover-bg: #8FBC8F;
 
   /* Variáveis de Alto Contraste */
   --hc-bg-color: black;
   --hc-text-color: white;
   --hc-container-bg: #1a1a1a;
   --hc-container-shadow: rgba(255, 255, 255, 0.2);
   --hc-container-border: #f7f4f4;
   --hc-heading-color: white;
   --hc-paragraph-color: #ddd;
   --hc-link-color: rgb(69, 216, 216);
   --hc-link-hover-decoration: underline;
   --hc-border-color: #555;
   --hc-table-header-bg: #222;
   --hc-nav-bg: #000;
   --hc-nav-text: white;
   --hc-footer-bg: black;
   --hc-footer-text: #bbb;
   --hc-input-bg: #333;
   --hc-input-text: white;
   --hc-input-border: #888;
   --hc-input-placeholder: rgb(194, 190, 190);
   --hc-button-bg: #0056b3;
   --hc-button-text: rgb(69, 216, 216);
   --hc-button-hover-bg: #004085;
 }
 
 body {
   font-family: sans-serif;
   margin: 0;
   padding: 0;
   background-color: var(--bg-color);
   color: var(--text-color);
   line-height: 1.6;
 }
 
 /* ==========================================================================
    2. High Contrast Mode
    ========================================================================== */
 body.high-contrast {
   /* Redefine CSS variables for high contrast mode */
   --bg-color: var(--hc-bg-color);
   --text-color: var(--hc-text-color);
   --container-bg: var(--hc-container-bg);
   --container-shadow: var(--hc-container-shadow);
   --container-border: var(--hc-container-border);
   --heading-color: var(--hc-heading-color);
   --paragraph-color: var(--hc-paragraph-color);
   --link-color: var(--hc-link-color);
   --link-hover-decoration: var(--hc-link-hover-decoration);
   --border-color: var(--hc-border-color);
   --table-header-bg: var(--hc-table-header-bg);
   --nav-bg: var(--hc-nav-bg);
   --nav-text: var(--hc-nav-text);
   --footer-bg: var(--hc-footer-bg);
   --footer-text: var(--hc-footer-text);
   --input-bg: var(--hc-input-bg);
   --input-text: var(--hc-input-text);
   --input-border: var(--hc-input-border);
   --button-bg: var(--hc-button-bg);
   --button-text: var(--hc-button-text);
   --button-hover-bg: var(--hc-button-hover-bg);
 }
 
 /* Specific component styles for High Contrast */
 body.high-contrast .btn-primary {
   background-color: #0056b3;
   border-color: #0056b3;
   color: white;
 }
 body.high-contrast .btn-primary:hover {
   background-color: #004085;
   border-color: #00376e;
 }
 
 body.high-contrast .btn-secondary {
   background-color: #5a6268;
   border-color: #545b62;
   color: white;
 }
 body.high-contrast .btn-secondary:hover {
   background-color: #4e555b;
   border-color: #484e53;
 }
 
 body.high-contrast .btn-outline-secondary {
     color: #ccc;
     border-color: var(--hc-input-border);
 }
 body.high-contrast .btn-outline-secondary:hover {
     background-color: #444;
     color: white;
 }
 
 body.high-contrast label,
 body.high-contrast .form-label {
     color: var(--hc-heading-color);
 }
 
 body.high-contrast .form-control {
   background-color: var(--hc-input-bg);
   color: var(--hc-input-text);
   border: 1px solid var(--hc-input-border);
 }
 
 body.high-contrast .form-control::placeholder {
   color: var(--hc-input-placeholder);
   opacity: 1;
 }
 
 body.high-contrast fieldset {
     border-color: var(--hc-border-color);
 }
 
 body.high-contrast #image-preview-container {
   background-color: #222;
   border-color: var(--hc-input-border);
 }
 
 body.high-contrast #preview-placeholder {
     color: var(--hc-input-placeholder);
 }
 
 body.high-contrast th {
     color: var(--hc-heading-color);
 }
 body.high-contrast .table td {
   color: var(--hc-text-color);
 }
 
 body.high-contrast .card {
   background-color: var(--hc-container-bg);
   border-color: var(--hc-border-color);
   box-shadow: 0 2px 5px var(--hc-container-shadow);
   color: var(--hc-text-color);
 }
 body.high-contrast .card-header {
     background-color: #222;
     border-bottom-color: var(--hc-border-color);
 }
 body.high-contrast .card-title {
     color: var(--hc-heading-color);
 }
 
 body.high-contrast .alert-primary {
     background-color: #002752;
     color: #e6f2ff;
     border-color: #004085;
 }
 body.high-contrast .alert-success {
     background-color: #0b2e13;
     color: #d4edda;
     border-color: #155724;
 }
 /* Add other .alert- HC styles as needed */
 
 body.high-contrast ul.list-checked li::before {
     color: lightgreen;
 }
 
 body.high-contrast .text-muted {
     color: var(--hc-footer-text) !important; /* Test if !important is truly needed */
 }
 
 
 /* ==========================================================================
    3. Layout Elements (Header, Nav, Footer, Container)
    ========================================================================== */
 header {
   text-align: center;
   margin-bottom: 30px;
 }
 .main-header-controls {
   margin: 0px auto;
   margin-top:30px;
  
   background-color: var(--bg-color);   
   /* Use body background or a specific header bg */
   
   
 }
 .main-header-controls .logo {
   /* Styles for your logo/site title area */
   display: flex;
   align-items: center;
 }
 .main-header-controls .logo img {
   height: 50px; /* Adjust as needed */
   margin-right: 10px;
 }
 .main-header-controls .logo span {
   font-size: 1.5em;
   font-weight: bold;
   color: var(--heading-color); /* Use heading color for site title */
 }
 .main-header-controls .controls {
   /* Container for buttons like High Contrast Toggle */
   display: flex;
   align-items: center;
   gap: 10px; /* Space between controls */
 }
 
 /* Specific styles for the Adotados section cards */
 .adotados-cards-container {
      display: flex;
      flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha */
      
 }
 
 nav.main-nav {
   background-color: var(--nav-bg);
   color: var(--nav-text);
   padding: 10px 0;
 }
 nav.main-nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: center;
 }
 nav.main-nav li {
   display: inline;
   margin: 0 15px;
 }
 nav.main-nav a {
   color: var(--nav-text);
   text-decoration: none;
 }
 nav.main-nav a:hover {
   text-decoration: var(--link-hover-decoration);
 }
 
 .nav-container { /* Specific for header logo/text area */
   display: flex;
   flex-direction: column;
   align-items: center; /* Center items horizontally */
 }
 .nav-container img {  
   height: auto;  
   width: auto; /* Let image size naturally or set a max-width */
   margin-bottom: 0.5rem; /* Space between image and text */
 }
 .nav-container span {
   font-weight: bold;
   font-size: larger;
   text-align: center;
 }
 
 .container {
   max-width: 800px;
   margin: 20px auto;
   background-color: var(--container-bg);
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px var(--container-shadow);
   border: 1px solid var(--container-border);
 }
 
footer {
   text-align: center;
   margin-top: 20px;
   padding: 20px;
   background-color: var(--footer-bg);
   color: var(--footer-text);
   min-height: 30px;
   border-top: 1px solid var(--border-color);
 }
 footer img {
   display: inline;
   vertical-align: middle;
 }
 
 /* ==========================================================================
    4. Typography (Headings, Paragraphs, Links)
    ========================================================================== */
 h1, h2, h3, h4, h5, h6 {
   color: var(--heading-color);
   margin-top: 1.5em;
   margin-bottom: 0.5em;
 }
 h1 { font-size: 2.5em; }
 h2 { font-size: 2em; }
 h3 { font-size: 1.75em; }
 
 p {
   color: var(--paragraph-color);
   margin-bottom: 1em;
 }
 
 a {
   color: var(--link-color);
   text-decoration: none;
 }
 a:hover {
   text-decoration: var(--link-hover-decoration);
 }
 
 hr {
     border: 0;
     border-top: 1px solid var(--border-color);
     margin: 1.5em 0;
 }
 
 /* ==========================================================================
    5. Components (Buttons, Forms, Tables, Cards, Alerts, Lists, etc.)
    ========================================================================== */
 
 /* --- Buttons --- */
 .button { /* Generic .button class */
   display: inline-block;
   padding: 10px 15px;
   background-color: var(--button-bg);
   color: var(--button-text);
   border: none;
   border-radius: 5px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   transition: background-color 0.15s ease-in-out;
 }
 .button:hover {
   background-color: var(--button-hover-bg);
   text-decoration: none;
 }
 
 /* --- Forms --- */
 label,
 .form-label {
   font-weight: bold;
   display: block;
   margin-bottom: 0.5rem;
   color: var(--heading-color);
 }
 
 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="number"],
 input[type="search"],
 input[type="tel"],
 input[type="url"],
 textarea,
 select {
   width: 100%;
   padding: 0.375rem 0.75rem;
   margin-bottom: 1rem;
   border: 1px solid var(--input-border);
   border-radius: 0.25rem;
   box-sizing: border-box; /* Important for width and padding */
   background-color: var(--input-bg);
   color: var(--input-text);
   line-height: 1.5;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 input:focus, textarea:focus, select:focus { /* General focus style */
     outline: none;
     border-color: var(--link-color); /* Or a specific focus color variable */
     box-shadow: 0 0 0 0.2rem rgba(var(--link-color), 0.25); /* Example focus ring */
 }
 
 
 fieldset {
   padding: 1em;
   margin-bottom: 1rem;
   border: 1px solid var(--border-color);
   border-radius: 4px;
 }
 
 /* Image Preview Area */
 #image-preview-container {
   border: 2px dashed var(--border-color);
   padding: 1rem;
   text-align: center;
   margin-bottom: 1rem;
   min-height: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #f8f9fa; /* Light background, consider a variable */
 }
 #preview-placeholder {
     color: var(--paragraph-color);
 }
 
 /* --- Tables --- */
 table { /* Base styles for <table> element */
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 1rem;
   background-color: var(--container-bg);
 }
 th, td {
   padding: 0.75rem;
   border: 1px solid var(--border-color);
   text-align: left;
   vertical-align: top;
 }
 th {
   background-color: var(--table-header-bg);
   font-weight: bold;
   color: var(--heading-color);
 }
 /* Styles for .table class (if used alongside Bootstrap or for specific tables) */
 .table { /* This class might be redundant if you style <table> directly and consistently */
     /* If Bootstrap CSS is linked, these might conflict or be unnecessary */
     /* color: #212529; */
     /* background-color: transparent; */
 }
 .table th,
 .table td {
     white-space: nowrap; /* Use with caution, can break layout */
 }
 
 
 /* --- Cards --- */
 .card {
   border: 1px solid var(--border-color);
   border-radius: 5px;
   margin-bottom: 20px;
   box-shadow: 0 2px 5px var(--container-shadow);
   background-color: var(--container-bg);
   overflow: hidden;
 }
 .card-header {
   background-color: var(--table-header-bg);
   padding: 0.75rem 1.25rem;
   border-bottom: 1px solid var(--border-color);
 }
 .card-body {
   padding: 1.25rem;
 }
 .card-title {
   margin-bottom: 0.75rem;
   font-size: 1.25rem;
   font-weight: 500;
   color: var(--heading-color);
 }
 
 .alert {
   justify-content: space-between;
   padding: 15px;
   margin-bottom: 20px;
   border: 1px solid black;
   animation-name: fadeOutAlert;
   animation-duration: 0.5s; /* Duração do fade out */
   animation-delay: 5s;    /* Espera 5 segundos antes de começar */
   animation-fill-mode: forwards; /* Mantém o estado final da animação */
   animation-timing-function: ease-in-out;
 }
 
 @keyframes fadeOutAlert {
   from {
     opacity: 1;
     transform: translateY(0); /* Opcional: para um leve movimento ao sumir */
   }
   to {
     opacity: 0;
     transform: translateY(-20px); /* Opcional: move para cima ao sumir */
     /* Para realmente esconder e tornar não clicável após a animação */
     visibility: hidden;
     height: 0; /* Colapsa a altura */
     padding-top: 0;
     padding-bottom: 0;
     margin-bottom: 0; /* Remove a margem para não ocupar espaço */
     border: 0; /* Remove a borda */
   }
 }
 
 /* Exemplo de uso no seu HTML (você já tem isso) */
 /*
 <div class="alert alert-success" role="alert">
   Mensagem de sucesso!
 </div>
 
 <div class="alert alert-danger" role="alert">
   Mensagem de erro!
 </div>
 */
 
 
 /* --- Lists --- */
 ul, ol {
     padding-left: 2em;
     margin-bottom: 1rem;
 }
 ul.list-unstyled {
   list-style: none;
   padding-left: 0;
 }
 ul.list-checked {
   list-style: none;
   padding-left: 0;
 }
 ul.list-checked li {
   position: relative;
   padding-left: 1.5em;
   margin-bottom: 5px;
 }
 ul.list-checked li::before {
   content: "✓";
   color: green; /* Consider a variable */
   position: absolute;
   left: 0;
 }
 
 /* --- Adotante Details Specific Styles --- */
 .adotante-details-row td {
   padding: 0 !important; /* Remove padding for full-width inner div */
 }
 .adotante-details-row .p-3 { /* Content inside expanded row */
   background-color: #f8f9fa; /* Consider a variable */
   border-top: 1px solid #dee2e6; /* Consider var(--border-color) */
 }
 .action-buttons button, .action-buttons a {
   min-width: 80px; 
   margin-bottom: 0.25rem; 
   margin-right: 0.25rem;
 }
 .action-buttons form {
   margin-right: 0.25rem; /* Align delete button form */
   display: inline-block; /* Ensure forms are inline if multiple */
 }
 .details-sub-table td {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   vertical-align: top; 
 }
 .details-sub-table strong {
   color: #495057; /* Consider var(--text-color) or a darker shade */
 }
 
 /* --- Historias Adotados Section --- */
 .historia-adotados { /* Container for the "Histórias de Adotados" section */
   margin-bottom: 20px;
   padding: 15px;
   border: 1px solid var(--border-color);
   border-radius: 5px;
   background-color: var(--container-bg); /* Or #f9f9f9 if distinct */
 }
 .historia-adotados h3 {
   color: var(--heading-color); /* Use variable */
   margin-bottom: 10px;
 }
 .historia-adotados p {
   color: var(--paragraph-color); /* Use variable */
   line-height: 1.6;
 }
 .historia-adotados img { /* Specific to images within this section */
   max-width: 100%;
   height: auto;
   border-radius: 5px;
   margin-top: 10px;
 }
 /* Button styles within .historia-adotados are likely covered by .btn or .button.
    If specific overrides are needed, define them here. */
 
 /* --- Horizontal Scroll for Historias --- */
 .historias-scroll-container {
   overflow-x: auto;
   white-space: nowrap;
   padding-bottom: 1rem;
   font-size: 0; /* Fix for inline-block spacing */
 }
 .historias-scroll-container .card-item { /* Assuming .card-item is used for individual story cards */
   display: inline-block;
   width: 300px; /* Or your preferred card width */
   margin-right: 10px;
   white-space: normal;
   vertical-align: top;
   font-size: 1rem; /* Reset font size for card content */
   /* Ensure .card-item has its own card styling (border, padding, etc.)
      or inherits from a global .card style if applicable */
 }
 .historias-scroll-container .card-item:last-child {
   margin-right: 0;
 }
 
 /* --- Login Container --- */
 .login-container {
   background-color: var(--container-bg); /* Use variable */
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 0 10px var(--container-shadow); /* Use variable */
   max-width: 400px; /* Example max-width for login forms */
   margin: 2rem auto; /* Center it */
 }
 .login-container h2 {
   text-align: center;
   margin-bottom: 20px;
   color: var(--heading-color);
 }
 /* Label, input, button styles within .login-container should ideally
    inherit from global styles or .form-label, .form-control, .btn.
    Override only if necessary. */
 
 /* --- Cookie Consent Banner --- */
 .cookie-consent-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.8); /* Dark, semi-transparent */
   color: white;
   padding: 15px;
   text-align: center;
   z-index: 1000;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
 }
 .cookie-consent-banner p {
   margin: 0;
   flex-grow: 1;
   text-align: left;
   color: white; /* Ensure text is white on dark background */
 }
 .cookie-consent-banner button { /* Style for the accept button */
   padding: 8px 15px;
   cursor: pointer;
   background-color: #4CAF50; /* Green, consider a variable */
   color: white;
   border: none;
   border-radius: 4px;
 }
 
 /* ==========================================================================
    6. Images & Fixed Height Image Containers
    ========================================================================== */
 img {
   max-width: 100%;
   height: auto;
   display: block;
 }
 
 .img-fluid-rounded { /* Corrected typo from rouded to rounded */
   width: 200px; /* This makes it not "fluid" in the Bootstrap sense */
   height: 200px;
   border-radius: 50%;
   object-fit: cover;
 }
 
 .noticia-img-fixed-height,
 .historia-img-fixed-height,
 .procura-img-fixed-height {
     height: 200px;
     object-fit: cover;
     width: 100%;
 }
 
 .adocao-img { /* For adoption photobanner */
     height: 300px; /* Or max-height: 400px; as previously */
     object-fit: cover;
     width: 100%;
 }
 
 /* ==========================================================================
    7. Utilities (Text Alignment, Spacing, Responsive Tables)
    ========================================================================== */
 .text-center { text-align: center; }
 .text-left   { text-align: left; }
 .text-right  { text-align: right; }
 
 .text-muted {
     color: #6c757d; /* Bootstrap's default */
     opacity: 1;
 }
 
 /* Spacing Utilities - Add !important only if strictly necessary to override other styles */
 .mt-2 { margin-top: 10px; }
 .mt-3 { margin-top: 15px; }
 .mt-4 { margin-top: 20px; }
 .mb-2 { margin-bottom: 10px; }
 .mb-3 { margin-bottom: 15px; }
 .mb-4 { margin-bottom: 20px; }
 .mb-5 { margin-bottom: 25px; }
 
 .table-responsive {
     width: 100%;
     overflow-x: auto;
 }
 /* .table-responsive:hover { overflow-x: auto; } /* This is redundant */
 
 /* ==========================================================================
    8. Grid System (Placeholder - Use Bootstrap's or complete this)
    ========================================================================== */
 /*
    If you are including the Bootstrap CSS file,
    you DO NOT need to redefine grid classes (.row, .col-*) here.
    Remove them if Bootstrap's CSS is linked.
    If not using Bootstrap's CSS, you'll need to complete these definitions.
 */
 
 /* ==========================================================================
    9. Responsive Design & Mobile Menu
    ========================================================================== */
 .mobile-menu-button {
   display: none;
   background-color: var(--nav-bg);
   color: var(--nav-text);
   border: 1px solid var(--nav-text); /* Or var(--border-color) */
   padding: 8px 12px;
   font-size: 1.5em;
   cursor: pointer;
   position: absolute;
   top: 15px;
   right: 15px;
   z-index: 1001; 
 }
 
 .mobile-menu {
   display: none;
   background-color: #256db9; /* Specific color, consider a variable */
   color: var(--nav-text); 
   /* border: 1px solid var(--nav-text); /* Might be too much with bg color */
   padding: 8px 12px; /* This padding is for the button itself if it were visible */
   /* font-size: small; /* This was on the button, not the menu container */
   /* cursor: pointer; /* Not needed for the menu container */
   /* position: absolute; /* Overridden by .active */
   /* top: 15px; */
   /* right: 15px; */
   z-index: 1000; /* Slightly lower than button if button is to overlap */
 }
 
 .mobile-menu.active {
   display: block;
   padding: 8px 12px;   
   animation: slide-in 0.3s ease-in-out forwards; 
   position: fixed;
   top: 0; /* Start from top after header */
   left: 0;
   width: 100%;
   height: 100vh; /* Full viewport height */
   overflow-y: scroll;
   padding-top: 3px; /* Space for a fixed header or close button area */
   background-color: #256db9; /* Ensure background covers content */
 }
 
 .mobile-menu ul {
   list-style: none;
   padding: 20px;
   margin: 0;
 }
 .mobile-menu li {
   margin-bottom: 10px; /* Spacing between items */
   /* background-color: whitesmoke; /* Removed, let text color provide contrast */
 }
 .mobile-menu li:hover {
   /* font-size: larger; /* Avoid changing font size on hover for layout stability */
   background-color: rgba(255, 255, 255, 0.1); /* Subtle hover for items */
 }
 .mobile-menu a {
   color: var(--nav-text); /* Should be white or light on dark blue */
   text-decoration: none;
   font-size: 1.2em;
   display: block;
   padding: 10px 20px; /* More padding for easier tapping */
 }
 
 
 @keyframes slide-in {
   from { transform: translateX(100%); }
   to { transform: translateX(0); }
 }
 
 .mobile-menu-close {
   position: absolute;
   top: 15px; /* Align with mobile-menu-button's original top */
   right: 20px;
   font-size: 2em;
   color: var(--nav-text); /* Ensure visibility on menu background */
   background: none;
   border: none;
   cursor: pointer;
   z-index: 1001; /* Above menu content */
 }
 
 /* High Contrast Toggle Button */
 #high-contrast-toggle {
     background-color: #eee; /* Consider var(--button-bg) or a specific var */
     color: #333; /* Consider var(--button-text) */
     border: 1px solid #ccc; /* Consider var(--border-color) */
     padding: 5px 10px;
     cursor: pointer;
     /* Add margin if needed for spacing */
 }
 #high-contrast-toggle.active,
 body.high-contrast #high-contrast-toggle {
     background-color: yellow; /* Specific HC active state */
     color: black;
     border: 1px solid black;
 }
 
 
 @media (max-width: 768px) {
   .container {
     margin: 10px;
     padding: 15px;
   }
   h1 { font-size: 2em; }
   h2 { font-size: 1.75em; }
 
   nav.main-nav { /* The desktop navigation */
     display: none;
   }
   .mobile-menu-button { /* The hamburger button */
     display: block;
   }
 }
 
 @media (max-width: 600px) {
   .container {
     margin: 5px;
     padding: 10px;
   }
   h1 { font-size: 1.75em; }
   h2 { font-size: 1.5em; }
 
   /* Styles for navigation links within main-nav (if it were visible) or a .main-navbar class */
   /* Adjust selector if your mobile menu uses different classes for links */
   nav.main-nav a, /* If mobile menu reuses main-nav structure but is shown via JS */
   .main-navbar a.nav-link { /* If you have a .main-navbar class */
     /* color: blue; /* Example, use var(--nav-text) or var(--link-color) */
     /* text-decoration: none; */
     /* padding: 10px; */
   }
   nav.main-nav a:hover,
   .main-navbar a.nav-link:hover,
   .main-navbar a.nav-link.active-nav-item {
     /* background-color: lightblue; /* Example, use variables */
     /* color: darkblue; /* Example, use variables */
   }
 }
 
 /* ==========================================================================
    10. Animations & Specific Carousels
    ========================================================================== */
 
 /* --- CSS Marquee-like Scroll (Photobanner, Historia-item) --- */
 /* Note: This creates a jumpy scroll. For smooth infinite scroll,
    content duplication or JS is usually required. */
 .photobanner,
 .historia-item { /* Assuming .historia-item is for the marquee, not the scroll container cards */
     overflow-x: auto; /* Allows manual scroll as fallback if animation is paused/fails */
     white-space: nowrap;
     padding-bottom: 10px; /* For scrollbar visibility */
 }
 .photobanner::-webkit-scrollbar,
 .historia-item::-webkit-scrollbar { height: 8px; }
 .photobanner::-webkit-scrollbar-track,
 .historia-item::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
 .photobanner::-webkit-scrollbar-thumb,
 .historia-item::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
 .photobanner::-webkit-scrollbar-thumb:hover,
 .historia-item::-webkit-scrollbar-thumb:hover { background: #555; }
 
 .photobanner .scroll-content,
 .historia-item .scroll-content { /* The actual content to be animated */
     display: inline-block; /* Or display: flex; if items are flex children */
     /* animation: scroll-x 30s linear infinite; /* Animation applied here */
 }
 /* @keyframes scroll-x {
     from { transform: translateX(0); }
     to { transform: translateX(-100%); } /* Will cause a jump */
 /* } */
 /*
 .photobanner:hover .scroll-content,
 .historia-item:hover .scroll-content {
     animation-play-state: paused;
 }
 */
 /* Consider removing or rethinking the CSS animation if a smooth loop is needed.
    The overflow-x: auto provides basic horizontal scrolling. */
 
 
 /* --- JS-Driven Photobanner (Adoption Section) --- */
 .photobanner-container { /* Main container for the JS carousel */
      position: relative;
      overflow: hidden;
 }
 .photobanner-slides { /* Container for all slides */
      display: flex;
      transition: transform 0.5s ease-in-out;
 }
 .photobanner-slide { /* Individual slide */
      min-width: 100%;
      box-sizing: border-box;
      position: relative;
      display: none; /* JS will control which is active */
 }
 .photobanner-slide.active {
      display: block;
 }
 .banner-text { /* Text overlay on a slide */
      position: absolute;
      bottom: 10px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
 }
 .photobanner-control { /* Prev/Next buttons */
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
      z-index: 10;
 }
 .photobanner-control.prev { left: 10px; }
 .photobanner-control.next { right: 10px; }
 
 .photobanner-dots { /* Container for dot indicators */
      text-align: center;
      position: absolute;
      bottom: 10px;
      width: 100%;
      z-index: 10;
 }
 .dot { /* Individual dot */
      cursor: pointer;
      height: 12px;
      width: 12px;
      margin: 0 3px;
      background-color: #bbb; /* Consider var(--border-color) or similar */
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.3s ease;
 }
 .dot.active {
      background-color: #717171; /* Consider var(--link-color) or similar */
 }
 
 /* ==========================================================================
    End of File
    ========================================================================== */
       /* justify-content: space-between;  */
      gap: 20px; /* Define um espaçamento de 20px entre os cards (horizontal e vertical) */
      margin-top: 20px;
       overflow-x: auto; 
    }

  .adotado-card {
      width: calc((100% - 2 * 20px) / 3);
      /* flex-basis: calc((100% - 2 * 20px) / 3); */
      /* flex-grow: 1; */ /* Opcional, para preencher espaço se a última linha tiver menos itens */
      
  }

  .adotado-card-img {
      height: 200px; /* Altura fixa para as imagens */
      object-fit: cover; /* Mantém a proporção e cobre a área */
  }

  .adotado-historia-texto {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3; /* Limita a 3 linhas */
      -webkit-box-orient: vertical;
  }

  @media (max-width: 992px) {
      .adotado-card {
          width: calc((100% - 20px) / 2);
          /* flex-basis: calc((100% - 20px) / 2); */
      }
  }

  @media (max-width: 768px) {
      .adotado-card {
          width: 100%; /* 1 card por linha em telas pequenas */
      }
  }
  
  .historias-adotados {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
  }

  /* home cards */
  .home-cards-container,
  .adotados-cards-container { /* Apply flexbox and gap to both containers */
  display: flex;
  flex-direction: row; /* Define a direção principal como horizontal (padrão, mas explícito) */
   flex-wrap: nowrap;     /* Permite que os itens quebrem para a próxima linha se não houver espaço */
   gap: 1rem;           /* Adiciona um espaçamento entre os cards */
   overflow: auto;
    /* justify-content: center; Opcional: centraliza os cards se houver espaço extra na linha */ 
  }
 .home-card {
    /* Ajuste a largura/base dos cards para funcionar bem com o 'gap' */
    /* Para 3 colunas com gap de 20px: */
      /* width: calc((100% - 2 * 20px) / 1);   */
       flex-basis: calc((100% - 2 * 20px) / 2);   
       flex-shrink: 0;
      /* flex-grow: 1;  Opcional, para preencher espaço se a última linha tiver menos itens */
      /* margin-bottom: 20px;  Não é mais necessário se 'gap' cuidar do espaçamento vertical */
}  

.home-card-img {
    height: 200px; /* Altura fixa para as imagens */
    object-fit: cover; /* Mantém a proporção e cobre a área */
}

.home-card-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limita a 3 linhas */
    -webkit-box-orient: vertical;
}

/* Ajustes responsivos com 'gap' */
@media (max-width: 992px) { /* Apply responsive adjustments to both card types */
    .home-card {
        width: calc((100% - 20px) / 2);
         /* flex-basis: calc((100% - 20px) / 2);  */
    }
}

@media (max-width: 768px) {
    .home-card {
        width: 100%; /* 1 card por linha em telas pequenas */
    }
}

  .img-thumbnail {
  cursor: pointer;
}

.img-thumbnail:hover{
  transform: scale(5.1); /* Aumenta o tamanho da imagem em 10% */
  transition: transform 0.3s ease-in-out; /* Adiciona uma transição suave */
  position: absolute;
  
}

@keyframes scale {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
  

}
  


/* Estilos para o Carrossel de Notícias */

.news-carousel-container {
  position: relative; /* Necessário para posicionar os controles */
  overflow: hidden;   /* Essencial: esconde os slides que estão fora da área visível */
  width: 100%;        /* Ocupa toda a largura disponível no container pai */
  border-radius: 8px; /* Opcional: para bordas arredondadas */
}

.news-carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out; /* A mágica da animação de slide! */
  /* O JavaScript irá alterar a propriedade 'transform' para mover os slides */
}

.news-carousel-slide {
  flex: 0 0 100%; /* Cada slide ocupa 100% da largura do container */
  box-sizing: border-box;
  /* O 'w-100' no seu .noticia-item já ajuda aqui, mas isso garante */
  padding: 0 10px; /* Adiciona um pequeno espaçamento se desejar ver um pouco dos slides vizinhos, ou 0 para tela cheia */
}

/* Ajuste para o card dentro do slide, se necessário */
.news-carousel-slide .noticia-item {
  margin-bottom: 0; /* Remove margem inferior se houver, para alinhar melhor no carrossel */
}

.news-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: rgba(192, 66, 192, 0.6);
  border: none;
  padding: 8px 12px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10; /* Para ficar sobre os slides */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.news-carousel-control:hover,
.news-carousel-control:focus {
  background-color:  rgb(208, 209, 208);
  outline: none;
}

.news-carousel-control.prev {
  left: -15px;
  cursor: pointer;
  color: rgb(226, 72, 16);
  font-weight: bolder;
}

.news-carousel-control.next {
  right: -15px;
  cursor: pointer;
  color: rgb(226, 72, 16);
  font-weight: bolder;
}

.news-carousel-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.news-carousel-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(24, 186, 226, 0.6);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.news-carousel-dots .dot.active {
  background-color: rgb(23, 114, 175);
}

/* Para garantir que a imagem dentro do card se ajuste bem */
.noticia-img-fixed-height {
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
    /* A altura já está definida no seu HTML/CSS, o object-fit melhora a apresentação */
}

/* Ajustes para o modo de alto contraste, se você tiver um */
body.high-contrast .news-carousel-control {
  background-color: var(--hc-button-bg, #000); /* Use suas variáveis de alto contraste */
  color: var(--hc-button-text, #fff);
  border: 1px solid var(--hc-button-text, #fff);
}

body.high-contrast .news-carousel-dots .dot {
  background-color: var(--hc-border-color, #fff);
  border: 1px solid var(--hc-text-color, #000);
}

body.high-contrast .news-carousel-dots .dot.active {
  background-color: var(--hc-link-color, #000); /* Ou uma cor de destaque */
}