/* ==========================
   CompanionReviewHub DESIGN SYSTEM
========================== */

:root{

    --primary:#d97706;
    --primary-dark:#b45309;
    --secondary:#111827;

    --success:#16a34a;
    --danger:#dc2626;

    --white:#ffffff;
    --light:#f8fafc;
    --gray:#64748b;
    --border:#e5e7eb;

    --shadow:
    0 10px 25px rgba(0,0,0,.08);

    --radius:16px;

    --transition:.3s ease;
}


/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--white);
    color:var(--secondary);
    overflow-x:hidden;
    line-height:1.7;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

button{
    cursor:pointer;
    border:none;
}


/* ==========================
   CONTAINER
========================== */

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}


/* ==========================
   SECTION SPACING
========================== */

section{
    padding:100px 0;
}


/* ==========================
   SECTION TITLES
========================== */

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:var(--primary);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
}

.section-title h2{
    font-size:3rem;
    margin-top:15px;
}

.section-title p{
    max-width:700px;
    margin:20px auto 0;
    color:var(--gray);
}


/* ==========================
   BUTTONS
========================== */


.wishlist-add-btn{
    padding: 10px;
    background-color: #cbd5e1;
    border-radius: 40px;
}

.primary-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 30px;
    margin: 10px;

    background:var(--primary);
    color:white;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);
}

.primary-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);
}

.secondary-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 30px;
    margin: 10px;

    border:2px solid white;

    color:rgb(0, 0, 0);

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);
}

.secondary-btn:hover{

    background:rgb(146, 146, 146);

    color:var(--secondary);
}


/* ==========================
   HEADER
========================== */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:white;

    box-shadow:var(--shadow);
}

.header .container{

    height:85px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.logo h2{

    color:var(--primary);

    font-size:1.5rem;

    font-weight:700;
}

.nav-links{

    display:flex;

    gap:35px;
}

.nav-links a{

    font-weight:500;

    transition:var(--transition);
}

.nav-links a:hover{

    color:var(--primary);
}

.header-actions{

    display:flex;

    align-items:center;

    gap:15px;
}

.cart-btn,
.wishlist-btn{

    width:50px;
    height:50px;

    border-radius:50%;

    background:var(--light);

    display:flex;

    align-items:center;
    justify-content:center;

    position:relative;
}

.cart-btn span,
.wishlist-btn span{

    position:absolute;

    top:-5px;
    right:-5px;

    width:22px;
    height:22px;

    border-radius:50%;

    background:var(--primary);

    color:rgb(255, 255, 255);

    font-size:.75rem;

    display:flex;
    align-items:center;
    justify-content:center;
}

.menu-btn{
    display:none;
}


/* ==========================
   HERO
========================== */

.hero{

    min-height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    background-image:
    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.55)
    ),
    url("../images/hero/hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    min-height:100vh;

    padding-top:85px;

}

.hero-content{

    color: #fff;

    text-align: center;

    max-width: 800px;

    margin: auto;

}

.hero h1{

    font-size: 4rem;

    color: #fff;

}

.hero p{

    color: rgba(255,255,255,.9);

}

.hero-tag{

    background:rgba(255,255,255,.15);

    padding:10px 20px;

    border-radius:50px;

    display:inline-block;

    margin-bottom:20px;
}


.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}


/* ==========================
   SEARCH SECTION
========================== */

.search-section{

    margin-top:-80px;

    position:relative;

    z-index:100;
}

.search-card{

    background:white;

    border-radius:20px;

    padding:40px;

    box-shadow:var(--shadow);
}

.search-card h2{

    margin-bottom:30px;
}

.search-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;
}

.field label{

    display:block;

    margin-bottom:10px;

    font-weight:600;
}

.field input,
.field select{

    width:100%;

    padding:14px;

    border:1px solid var(--border);

    border-radius:12px;
}

.search-btn{

    width:100%;

    margin-top:25px;

    padding:16px;

    background:var(--primary);

    color:white;

    border-radius:12px;

    font-size:1rem;

    font-weight:600;
}


/* ==========================
   CATEGORY SECTION
========================== */

.category-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;
}

.category-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);
}

.category-card:hover{

    transform:translateY(-10px);
}

.category-card img{

    height:250px;

    object-fit:cover;
}

.category-card h3{

    padding:20px 25px 10px;
}

.category-card p{

    padding:0 25px;

    color:var(--gray);
}

.category-card a{

    display:inline-block;

    padding:20px 25px 30px;

    color:var(--primary);

    font-weight:600;
}


/* ==========================
   FEATURED PETS PLACEHOLDER
========================== */

.pet-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.pet-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow);
    padding: 20px;
    display: grid;
    gap: 25px;
    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));
}


/* ==========================
   FOOTER PLACEHOLDER
========================== */

.footer{

    background:#0f172a;

    color:white;

    padding:80px 0 30px;
}

/* ==========================
ABOUT CompanionReviewHub
========================== */

.about-wrapper{
    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image img{

    width:100%;

    height:600px;

    object-fit:cover;

    border-radius:25px;

    box-shadow:var(--shadow);

}

.about-content h3{

    font-size:2.5rem;

    margin-bottom:20px;

}

.about-content p{

    margin-bottom:20px;

    color:var(--gray);


}

.about-features{

    margin:40px 0;

}

.feature-item{

    display:flex;

    gap:20px;

    margin-bottom:25px;


}

.feature-icon{

    width:50px;
    height:50px;

    min-width:50px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    align-items:center;
    justify-content:center;

    font-weight:700;


}

/* ==========================
STATS SECTION
========================== */

.stats-section{

background:#f8fafc;

}

.stats-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

}

.stat-card{

background:white;

padding:40px 30px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-icon{

font-size:2.5rem;

margin-bottom:15px;

}

.stat-card h3{

font-size:2.5rem;

color:var(--primary);

margin-bottom:10px;

}

.stat-card p{

color:var(--gray);

}


/* ==========================
TESTIMONIALS
========================== */

.testimonials{

background:white;

}

.testimonials-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.testimonial-card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-top{

display:flex;

align-items:center;

gap:15px;

margin-bottom:20px;

}

.testimonial-top img{

width:70px;
height:70px;

border-radius:50%;

object-fit:cover;

}

.testimonial-top h4{

margin-bottom:5px;

}

.testimonial-top span{

color:var(--gray);
font-size:.9rem;

}

.testimonial-card p{

color:var(--gray);

margin-bottom:20px;

}

.stars{

color:#fbbf24;

font-size:1.2rem;

}

/* ==========================
GALLERY
========================== */

.gallery-section{

background:#f8fafc;

}

.gallery-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:20px;

}

.gallery-item{

overflow:hidden;

border-radius:20px;

box-shadow:var(--shadow);

}

.gallery-item.large{

grid-column:span 2;

grid-row:span 2;

}

.gallery-item img{

width:100%;
height:100%;

object-fit:cover;

transition:.5s ease;

}

.gallery-item:hover img{

transform:scale(1.08);

}

/* ==========================
CONTACT SECTION
========================== */

.contact-wrapper{

display:grid;

grid-template-columns:
1fr 1fr;

gap:60px;

align-items:start;

}

.contact-info h3{

font-size:2rem;

margin-bottom:20px;

}

.contact-info p{

color:var(--gray);

margin-bottom:20px;

}

.contact-item{

margin-top:25px;

}

.contact-item h4{

margin-bottom:5px;

}

.contact-form-container{

background:white;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

.form-group{

margin-bottom:20px;

}

.form-group input,
.form-group textarea{

width:100%;

padding:16px;

border:1px solid var(--border);

border-radius:12px;

outline:none;

}

.form-group textarea{

resize:none;

}

/* ==========================
NEWSLETTER
========================== */

.newsletter-section{

 background:#f8fafc;
 
}

.newsletter-box{

 background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
);

color:white;

border-radius:30px;

padding:70px;

text-align:center;
 
}

.newsletter-content{

 max-width:700px;

margin:auto;
 
}

.newsletter-content span{

 text-transform:uppercase;

letter-spacing:2px;

font-weight:600;
 
}

.newsletter-content h2{

 font-size:3rem;

margin:20px 0;
 
}

.newsletter-content p{

margin-bottom:40px;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter-form input{

width:450px;

max-width:100%;

padding:18px;

border:none;

border-radius:50px;

outline:none;

}

.newsletter-form .primary-btn{

border:none;

background:white;

color:var(--secondary);

}

/* ==========================
FOOTER
========================== */

.footer{

background:#0f172a;

color:white;

padding:100px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:50px;

margin-bottom:60px;

}

.footer-logo{

color:var(--primary);

margin-bottom:20px;

}

.footer-column p{

color:#cbd5e1;

}

.footer-column h3{

margin-bottom:20px;

}

.footer-column ul li{

margin-bottom:15px;

}

.footer-column ul li a{

color:#cbd5e1;

}

.footer-column ul li a:hover{

color:var(--primary);

}

.footer-socials{

margin-top:20px;

display:flex;

flex-wrap:wrap;

gap:15px;

}

.footer-socials a{

color:#cbd5e1;

}

.footer-socials a:hover{

color:var(--primary);

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,.1);

padding-top:25px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.footer-bottom a{

margin-left:15px;

color:#cbd5e1;
 
}

.footer-bottom a:hover{

 color:var(--primary);
 
}

/* ==========================
BACK TO TOP
========================== */

.back-to-top{

position:fixed;

right:30px;
bottom:100px;

width:55px;
height:55px;

border-radius:50%;

background:var(--primary);

color:white;

display:flex;

align-items:center;
justify-content:center;

font-size:1.3rem;

box-shadow:var(--shadow);

z-index:999;
 
}

.back-to-top:hover{

 transform:translateY(-5px);
 
}

/* ==========================
CART SIDEBAR
========================== */

.cart-sidebar{

 position:fixed;

top:0;
right:-450px;

width:420px;

max-width:100%;

height:100vh;

background:white;

z-index:2000;

display:flex;

flex-direction:column;

transition:.4s ease;

box-shadow:
-10px 0 30px rgba(0,0,0,.1);
 
}

.cart-sidebar.active{

 right:0;
 
}

.cart-header{

 padding:25px;

border-bottom:1px solid var(--border);

display:flex;

justify-content:space-between;

align-items:center;
 
}

.cart-header button{

 background:none;

font-size:1.5rem;
 
}

.cart-items{

 flex:1;

overflow-y:auto;

padding:20px;
 
}

.cart-footer{

 padding:20px;

border-top:1px solid var(--border);
 
}

.cart-total{

 display:flex;

justify-content:space-between;

margin-bottom:20px;

font-size:1.2rem;
 
}

.cart-overlay{

 position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.5);

opacity:0;

visibility:hidden;

transition:.3s ease;

z-index:1999;
 
}

.cart-overlay.active{

 opacity:1;

visibility:visible;
 
}

/* ==========================
MODAL
========================== */

.modal{

 position:fixed;

inset:0;

background:
rgba(0,0,0,.7);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.3s ease;

z-index:3000;
 
}

.modal.active{

 opacity:1;

visibility:visible;
 
}

.modal-content{

 width:1000px;

max-width:95%;

background:white;

border-radius:25px;

overflow:hidden;

position:relative;
 
}

.modal-close{

 position:absolute;

top:20px;
right:20px;

width:40px;
height:40px;

border-radius:50%;

background:white;

box-shadow:var(--shadow);
 
}

.modal-grid{

 display:grid;

grid-template-columns:
1fr 1fr;
 
}

.modal-image img{

 height:100%;

object-fit:cover;
 
}

.modal-details{

 padding:40px;
 
}

.modal-details h2{

 margin:10px 0;
 
}

.modal-details h3{

 color:var(--primary);

margin-bottom:20px;
 
}

.modal-details ul{

 margin:25px 0;
 
}

.modal-details ul li{

 margin-bottom:10px;
 
}

.hero-animal-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(140px,1fr));

    gap:15px;

    margin-top:25px;

    max-width:750px;

}

.animal-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:15px 20px;

    border-radius:15px;

    text-decoration:none;

    font-weight:600;

    color:#fff;

    background:
    rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,.25);

    transition:.3s ease;

}

.animal-btn:hover{

    transform:
    translateY(-4px);

    background:
    rgba(255,255,255,.25);

}

.hero-main-btn{

    margin-bottom:20px;

}

@media(max-width:768px){

    .hero-animal-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}

@media(max-width:450px){

    .hero-animal-grid{

        grid-template-columns:
        1fr 1fr;

        gap:10px;

    }

    .animal-btn{

        padding:12px;

        font-size:.9rem;

    }

}

/* ==========================
   SEARCH RESULT MESSAGE
========================== */

.search-results-info{
    width:90%;
    max-width:900px;
    margin:35px auto;
    padding:28px;
    border-radius:22px;
    text-align:center;
    box-shadow:var(--shadow);
}

.search-results-info.has-results{
    background:#ecfdf5;
    color:#047857;
    font-weight:700;
}

.search-results-info.no-results{
    background:#fff7ed;
    color:var(--secondary);
}

.search-results-info h3{
    font-size:1.6rem;
    margin-bottom:10px;
    color:var(--secondary);
}

.search-results-info p{
    color:var(--gray);
    max-width:650px;
    margin:0 auto 25px;
}

.search-category-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
}

.search-category-buttons a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 22px;
    border-radius:50px;
    background:var(--primary);
    color:white;
    font-weight:700;
    transition:var(--transition);
}

.search-category-buttons a:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
}

@media(max-width:600px){

    .search-category-buttons{
        flex-direction:column;
    }

    .search-category-buttons a{
        width:100%;
    }

}


/* ==========================
   PREMIUM BROWSE PETS SECTION
========================== */

.premium-browse-section{
    background:
    linear-gradient(
        180deg,
        #fff7ed 0%,
        #ffffff 45%,
        #f8fafc 100%
    );
}

.premium-category-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.premium-category-card{
    position:relative;
    overflow:hidden;
    min-height:430px;
    border-radius:28px;
    background:white;
    box-shadow:var(--shadow);
    transition:var(--transition);
    isolation:isolate;
}

.premium-category-card:hover{
    transform:translateY(-12px);
    box-shadow:
    0 25px 60px rgba(0,0,0,.14);
}

.premium-category-image{
    width:100%;
    height:260px;
    overflow:hidden;
}

.premium-category-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}

.premium-category-card:hover .premium-category-image img{
    transform:scale(1.1);
}

.premium-category-content{
    position:relative;
    padding:28px;
    background:white;
    margin-top:-30px;
    border-radius:28px 28px 0 0;
    z-index:2;
}

.premium-category-content span{
    display:inline-flex;
    align-items:center;
    padding:7px 14px;
    margin-bottom:14px;
    border-radius:50px;
    background:#fff7ed;
    color:var(--primary);
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.premium-category-content h3{
    font-size:1.7rem;
    margin-bottom:12px;
    color:var(--secondary);
}

.premium-category-content p{
    color:var(--gray);
    font-size:.95rem;
    line-height:1.7;
    margin-bottom:24px;
}

.premium-category-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding-top:18px;
    border-top:1px solid var(--border);
}

.premium-category-footer strong{
    color:var(--secondary);
    font-weight:700;
}

.premium-category-footer small{
    color:var(--primary);
    font-weight:700;
}

.premium-featured-card{
    background:#111827;
}

.premium-featured-card .premium-category-content{
    background:#111827;
}

.premium-featured-card .premium-category-content h3,
.premium-featured-card .premium-category-footer strong{
    color:white;
}

.premium-featured-card .premium-category-content p{
    color:#cbd5e1;
}

.premium-featured-card .premium-category-footer{
    border-top:1px solid rgba(255,255,255,.15);
}

@media(max-width:768px){

    .premium-category-grid{
        grid-template-columns:1fr;
    }

    .premium-category-card{
        min-height:auto;
    }

    .premium-category-image{
        height:230px;
    }

    .premium-category-content{
        padding:24px;
    }

    .premium-category-content h3{
        font-size:1.5rem;
    }

}

/* ==========================
   DARK MODE
========================== */

.dark-mode{
    background:#020617;
    color:#f8fafc;
}

.dark-mode .header,
.dark-mode .search-card,
.dark-mode .category-card,
.dark-mode .pet-card,
.dark-mode .testimonial-card,
.dark-mode .contact-form-container,
.dark-mode .cart-sidebar,
.dark-mode .modal-content,
.dark-mode .premium-category-card,
.dark-mode .premium-category-content{
    background:#0f172a;
    color:#f8fafc;
}

.dark-mode .section-title h2,
.dark-mode .category-card h3,
.dark-mode .pet-card h3,
.dark-mode .about-content h3,
.dark-mode .contact-info h3,
.dark-mode .modal-details h2,
.dark-mode .premium-category-content h3,
.dark-mode .premium-category-footer strong{
    color:#f8fafc;
}

.dark-mode p,
.dark-mode .section-title p,
.dark-mode .category-card p,
.dark-mode .about-content p,
.dark-mode .contact-info p,
.dark-mode .testimonial-card p,
.dark-mode .premium-category-content p{
    color:#cbd5e1;
}

.dark-mode .search-section,
.dark-mode .stats-section,
.dark-mode .gallery-section,
.dark-mode .newsletter-section,
.dark-mode .premium-browse-section{
    background:#020617;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea{
    background:#111827;
    color:#f8fafc;
    border-color:#334155;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder{
    color:#94a3b8;
}

.dark-mode .cart-btn,
.dark-mode .wishlist-btn,
.dark-mode .dark-mode-btn{
    background:#1e293b;
    color:#f8fafc;
}

.dark-mode .footer{
    background:#020617;
}

.dark-mode .premium-featured-card,
.dark-mode .premium-featured-card .premium-category-content{
    background:#111827;
}

.dark-mode-btn{
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    transition:var(--transition);
}

.dark-mode-btn:hover{
    transform:translateY(-3px);
}

/* ==========================
   GLOBAL DARK MODE MENU FIX
========================== */

.dark-mode .header{
    background:#0f172a;
}

.dark-mode .logo h2{
    color:var(--primary);
}

.dark-mode .hamburger,
.dark-mode .menu-btn{
    color:#f8fafc;
    background:#1e293b;
    border-radius:12px;
    padding:8px 12px;
}

.dark-mode .nav{
    background:#0f172a;
}

.dark-mode .nav-links{
    background:#0f172a;
}

.dark-mode .nav-links a{
    color:#f8fafc;
}

.dark-mode .nav-links a:hover{
    color:var(--primary);
}


/* ==========================
   MOBILE DROPDOWN DARK MODE
========================== */

@media(max-width:768px){

    .dark-mode .nav{
        background:#0f172a !important;
        box-shadow:0 15px 35px rgba(0,0,0,.45);
    }

    .dark-mode .nav.active{
        background:#0f172a !important;
    }

    .dark-mode .nav-links{
        background:#0f172a !important;
        border-top:1px solid #334155;
    }

    .dark-mode .nav-links li{
        border-bottom:1px solid #1e293b;
    }

    .dark-mode .nav-links a{
        color:#f8fafc !important;
    }

}

/* ==========================
   SIDE CART DARK MODE FIX
========================== */

.dark-mode .cart-sidebar{
    background:#0f172a;
    color:#f8fafc;
}

.dark-mode .cart-header{
    background:#0f172a;
    border-bottom:1px solid #334155;
}

.dark-mode .cart-header h2,
.dark-mode .cart-header h3{
    color:#f8fafc;
}

.dark-mode .cart-header button,
.dark-mode .cart-close,
.dark-mode #closeCart{
    background:#1e293b !important;
    color:#f8fafc !important;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    font-weight:700;
}

.dark-mode .cart-header button:hover,
.dark-mode .cart-close:hover,
.dark-mode #closeCart:hover{
    background:var(--primary) !important;
    color:white !important;
}

.dark-mode .cart-items{
    background:#0f172a;
}

.dark-mode .cart-footer{
    background:#0f172a;
    border-top:1px solid #334155;
}

.dark-mode .cart-total{
    color:#f8fafc;
}

.dark-mode .cart-overlay{
    background:rgba(0,0,0,.75);
}


/* ==========================
   STATS + TESTIMONIALS DARK MODE FIX
========================== */

.dark-mode .stats-section,
.dark-mode .testimonials{
    background:#020617 !important;
    color:#f8fafc;
}

.dark-mode .stats-section .section-title h2,
.dark-mode .testimonials .section-title h2{
    color:#f8fafc;
}

.dark-mode .stats-section .section-title p,
.dark-mode .testimonials .section-title p{
    color:#cbd5e1;
}

.dark-mode .stat-card,
.dark-mode .testimonial-card{
    background:#0f172a !important;
    color:#f8fafc !important;
    box-shadow:
    0 15px 40px rgba(0,0,0,.35);
    border:1px solid #1e293b;
}

.dark-mode .stat-card h3,
.dark-mode .testimonial-card h4{
    color:#f8fafc;
}

.dark-mode .stat-card p,
.dark-mode .testimonial-card p,
.dark-mode .testimonial-top span{
    color:#cbd5e1 !important;
}

.dark-mode .stat-icon{
    background:#1e293b;
    color:#fbbf24;
    width:65px;
    height:65px;
    margin:0 auto 15px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.dark-mode .testimonial-top img{
    border:3px solid #334155;
}

.dark-mode .stars{
    color:#fbbf24;
}


/* ==========================
   NO ANIMAL FOUND DARK MODE
========================== */

.dark-mode .search-results-info{
    background:#0f172a !important;
    color:#f8fafc !important;
    border:1px solid #334155;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.dark-mode .search-results-info.no-results{
    background:#111827 !important;
    color:#f8fafc !important;
}

.dark-mode .search-results-info.no-results h3{
    color:#f8fafc !important;
}

.dark-mode .search-results-info.no-results p{
    color:#cbd5e1 !important;
}

.dark-mode .search-category-buttons a{
    background:#d97706 !important;
    color:#ffffff !important;
}

.dark-mode .search-category-buttons a:hover{
    background:#b45309 !important;
    color:#ffffff !important;
}

.dark-mode .search-results-info.has-results{
    background:#064e3b !important;
    color:#d1fae5 !important;
}
/* =====================================================
   PROFESSIONAL HOMEPAGE POLISH
   Scoped to .home-professional so animal profile pages
   and other site sections remain unaffected.
===================================================== */

.home-professional{
    --home-ink:#0f172a;
    --home-muted:#475569;
    --home-border:rgba(148,163,184,.28);
    --home-shadow:
        0 18px 50px rgba(15,23,42,.10);
}


/* BRAND */

.home-professional .n-logo h2{
    display:flex;
    align-items:baseline;
    color:var(--home-ink);
    font-family:"Poppins",sans-serif;
    font-size:1.22rem;
    font-weight:700;
    letter-spacing:-.035em;
    white-space:nowrap;
}

.home-professional .n-logo .logo-full{
    display:inline-flex;
    align-items:baseline;
}

.home-professional .n-logo .logo-hub{
    color:var(--primary);
}

.home-professional .n-logo .logo-short{
    display:none;
    color:var(--primary);
    font-size:1.28rem;
    font-weight:800;
    letter-spacing:.04em;
}


/* HERO */

.home-professional .hero{
    min-height:min(820px,88vh);
    padding:150px 0 125px;
    align-items:center;
    justify-content:flex-start;
    background-image:
        linear-gradient(
            90deg,
            rgba(7,12,22,.91) 0%,
            rgba(7,12,22,.78) 43%,
            rgba(7,12,22,.48) 72%,
            rgba(7,12,22,.32) 100%
        ),
        url("../images/hero/hero.png");
    background-position:center;
}

.home-professional .hero .container{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:flex-start;
}

.home-professional .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.08),
            rgba(15,23,42,.18)
        );
}

.home-professional .hero-content{
    max-width:760px;
    margin:0;
    color:#ffffff;
    text-align:left;
}

.home-professional .hero-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin:0 0 22px;
    padding:0;
    color:#fde68a;
    background:transparent;
    border:0;
    border-radius:0;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.17em;
    line-height:1.5;
    text-transform:uppercase;
}

.home-professional .hero-tag::before{
    content:"";
    width:38px;
    height:1px;
    flex:0 0 38px;
    background:#f59e0b;
}

.home-professional .hero h1{
    max-width:14ch;
    margin:0 0 24px;
    color:#ffffff;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2.65rem,4.7vw,4.15rem);
    font-weight:600;
    letter-spacing:-.05em;
    line-height:1.07;
    text-wrap:balance;
}

.home-professional .hero p{
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,.84);
    font-size:clamp(1rem,1.3vw,1.12rem);
    line-height:1.75;
}

.home-professional .hero-buttons{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    margin-top:32px;
}

.home-professional .hero .primary-btn,
.home-professional .hero .secondary-btn{
    min-height:50px;
    margin:0;
    padding:13px 22px;
    border-radius:11px;
    font-size:.94rem;
    font-weight:700;
    box-shadow:none;
}

.home-professional .hero .primary-btn{
    background:#d97706;
    border:1px solid #d97706;
}

.home-professional .hero .primary-btn:hover{
    background:#b45309;
    border-color:#b45309;
    transform:translateY(-2px);
}

.home-professional .hero .secondary-btn{
    color:#ffffff;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.38);
    backdrop-filter:blur(8px);
}

.home-professional .hero .secondary-btn:hover{
    color:#ffffff;
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.65);
    transform:translateY(-2px);
}

.home-professional .hero-assurance{
    display:flex;
    flex-wrap:wrap;
    gap:12px 26px;
    margin:34px 0 0;
    padding:22px 0 0;
    border-top:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.76);
    font-size:.82rem;
    font-weight:600;
}

.home-professional .hero-assurance li{
    position:relative;
    padding-left:17px;
}

.home-professional .hero-assurance li::before{
    content:"";
    position:absolute;
    top:.67em;
    left:0;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#f59e0b;
}


/* SEARCH CARD */

.home-professional .search-section{
    margin-top:-58px;
}

.home-professional .search-card{
    padding:34px;
    border:1px solid var(--home-border);
    border-radius:18px;
    box-shadow:var(--home-shadow);
}

.home-professional .search-card h2{
    margin-bottom:24px;
    color:var(--home-ink);
    font-family:"Poppins",sans-serif;
    font-size:clamp(1.5rem,2.2vw,2rem);
    font-weight:600;
    letter-spacing:-.025em;
}

.home-professional .field label{
    margin-bottom:8px;
    color:#334155;
    font-size:.85rem;
    font-weight:700;
}

.home-professional .field input,
.home-professional .field select{
    min-height:50px;
    padding:13px 14px;
    border-radius:10px;
    background:#ffffff;
}

.home-professional .search-btn{
    min-height:50px;
    border-radius:10px;
}


/* TYPOGRAPHY AND SPACING */

.home-professional section{
    padding-top:88px;
    padding-bottom:88px;
}

.home-professional .section-title{
    margin-bottom:50px;
}

.home-professional .section-title span{
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.16em;
}

.home-professional .section-title h2{
    max-width:820px;
    margin:12px auto 0;
    font-family:"Poppins",sans-serif;
    font-size:clamp(2rem,3.4vw,2.8rem);
    font-weight:600;
    letter-spacing:-.04em;
    line-height:1.18;
    text-wrap:balance;
}

.home-professional .section-title p{
    margin-top:16px;
    font-size:1rem;
    line-height:1.75;
}


/* RESTRAINED CARDS */

.home-professional .category-card,
.home-professional .premium-category-card,
.home-professional .stat-card,
.home-professional .testimonial-card,
.home-professional .gallery-item,
.home-professional .contact-form-container{
    border:1px solid rgba(148,163,184,.20);
    border-radius:18px;
    box-shadow:
        0 12px 34px rgba(15,23,42,.075);
}

.home-professional .category-card:hover,
.home-professional .premium-category-card:hover,
.home-professional .stat-card:hover,
.home-professional .testimonial-card:hover{
    transform:translateY(-5px);
    box-shadow:
        0 18px 42px rgba(15,23,42,.11);
}

.home-professional .premium-category-card{
    min-height:410px;
}

.home-professional .premium-category-content{
    padding:25px;
    margin-top:-22px;
    border-radius:18px 18px 0 0;
}

.home-professional .premium-category-content h3{
    font-family:"Poppins",sans-serif;
    font-size:1.48rem;
    font-weight:600;
    letter-spacing:-.025em;
}

.home-professional .premium-category-content span{
    border-radius:8px;
}


/* TRUST NOTICE */

.home-professional .trust-notice-box{
    border-radius:18px;
    box-shadow:
        0 12px 34px rgba(15,23,42,.08);
}

.home-professional .trust-notice-box span{
    border-radius:8px;
    font-size:.78rem;
}


/* DARK MODE */

.home-professional.dark-mode .n-logo h2{
    color:#f8fafc;
}

.home-professional.dark-mode .search-card{
    background:#0f172a;
    border-color:#334155;
}

.home-professional.dark-mode .search-card h2{
    color:#f8fafc;
}

.home-professional.dark-mode .field label{
    color:#cbd5e1;
}

.home-professional.dark-mode .field input,
.home-professional.dark-mode .field select{
    background:#111827;
    color:#f8fafc;
    border-color:#475569;
    color-scheme:dark;
}

.home-professional.dark-mode .field input::placeholder{
    color:#cbd5e1;
    opacity:1;
}

.home-professional.dark-mode .field select option{
    background:#111827;
    color:#f8fafc;
}

.home-professional.dark-mode .field input:hover,
.home-professional.dark-mode .field select:hover{
    border-color:#64748b;
}

.home-professional.dark-mode .field input:focus,
.home-professional.dark-mode .field select:focus{
    border-color:#f59e0b;
    outline:none;
    box-shadow:0 0 0 3px rgba(245,158,11,.18);
}

.home-professional.dark-mode .field input:-webkit-autofill,
.home-professional.dark-mode .field input:-webkit-autofill:hover,
.home-professional.dark-mode .field input:-webkit-autofill:focus{
    -webkit-text-fill-color:#f8fafc;
    -webkit-box-shadow:0 0 0 1000px #111827 inset;
    caret-color:#f8fafc;
}


/* RESPONSIVE */

@media(max-width:900px){

    .home-professional .hero{
        min-height:760px;
        padding:135px 0 115px;
        background-position:62% center;
    }

    .home-professional .hero-content{
        max-width:680px;
    }

    .home-professional .hero h1{
        max-width:15ch;
    }

    .home-professional .search-section{
        margin-top:-42px;
    }

}

@media(max-width:680px){

    .home-professional .hero{
        min-height:auto;
        padding:125px 0 92px;
        background-image:
            linear-gradient(
                90deg,
                rgba(7,12,22,.93),
                rgba(7,12,22,.72)
            ),
            url("../images/hero/hero.png");
        background-position:center;
    }

    .home-professional .hero h1{
        max-width:100%;
        font-size:clamp(2.25rem,10vw,3.1rem);
    }

    .home-professional .hero p{
        font-size:1rem;
        line-height:1.7;
    }

    .home-professional .hero-buttons{
        align-items:stretch;
        flex-direction:column;
    }

    .home-professional .hero .primary-btn,
    .home-professional .hero .secondary-btn{
        width:100%;
    }

    .home-professional .hero-assurance{
        display:grid;
        grid-template-columns:1fr;
        gap:11px;
    }

    .home-professional .search-card{
        padding:24px 20px;
    }

    .home-professional section{
        padding-top:72px;
        padding-bottom:72px;
    }

}

@media(max-width:640px){

    .home-professional .n-logo h2{
        font-size:1rem;
        letter-spacing:0;
    }

    .home-professional .n-logo .logo-full{
        display:none;
    }

    .home-professional .n-logo .logo-short{
        display:inline-block;
    }

}

@media(max-width:560px){

    .home-professional .hero-tag{
        font-size:.69rem;
        letter-spacing:.13em;
    }

    .home-professional .hero-tag::before{
        width:28px;
        flex-basis:28px;
    }

    .home-professional .search-section{
        margin-top:-28px;
    }

}