/* ==========================================================================
   PawParlor — Pet Grooming Salon Template
   Light-default template: 8 light themes, 2 dark themes
   ========================================================================== */

:root {
    --primary-color: #E8734A;
    --primary-hover: #D4603D;
    --text-on-primary: #FFFFFF;
    --bg-light: #FFF8F0;
    --font-display: 'Quicksand', sans-serif;
    --font-body: 'Mulish', sans-serif;
}

/* === Color Schemes === */

[data-theme="coral-cream"] { --primary-color: #E8734A; --primary-hover: #D4603D; --bg-light: #FFF8F0; }
[data-theme="coral-white"] { --primary-color: #FF6F61; --primary-hover: #E55A4F; --bg-light: #FFF5F3; }
[data-theme="clay-sage"] { --primary-color: #A1887F; --primary-hover: #8D6E63; --bg-light: #F5F5DC; }
[data-theme="earth-sand"] { --primary-color: #795548; --primary-hover: #5D4037; --bg-light: #FAFAD2; }
[data-theme="peach-white"] { --primary-color: #FFAB91; --primary-hover: #FF8A65; --text-on-primary: #1A1A1A; --bg-light: #FFF8F5; }
[data-theme="sienna-beige"] { --primary-color: #A0522D; --primary-hover: #804020; --bg-light: #F5F0EB; }
[data-theme="teal-mint"] { --primary-color: #2A9D8F; --primary-hover: #264653; --bg-light: #E8F5F0; }
[data-theme="sage-cream"] { --primary-color: #87AE73; --primary-hover: #6B8F5B; --bg-light: #F5FAF0; }

/* Dark themes */
[data-theme="charcoal-warm"] { --primary-color: #E8734A; --primary-hover: #D4603D; --text-on-primary: #FFFFFF; --bg-light: #1E1410; }
[data-theme="navy-teal"] { --primary-color: #4DD0B8; --primary-hover: #38B59E; --text-on-primary: #1A1A1A; --bg-light: #0D1B2A; }

/* === Global Styles === */

body {
    font-family: var(--font-body);
    color: #333;
    background-color: var(--bg-light);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .font-display { font-family: var(--font-display); }

.bg-light { background-color: var(--bg-light) !important; }

/* === Dark Theme Overrides (themes 9-10) === */

[data-theme="charcoal-warm"] body,
[data-theme="navy-teal"] body {
    color: #f8f9fa;
    --bs-body-color: #f0f0f0;
    --bs-body-bg: var(--bg-light);
}

[data-theme="charcoal-warm"] h1, [data-theme="charcoal-warm"] h2, [data-theme="charcoal-warm"] h3,
[data-theme="charcoal-warm"] h4, [data-theme="charcoal-warm"] h5, [data-theme="charcoal-warm"] h6,
[data-theme="navy-teal"] h1, [data-theme="navy-teal"] h2, [data-theme="navy-teal"] h3,
[data-theme="navy-teal"] h4, [data-theme="navy-teal"] h5, [data-theme="navy-teal"] h6 {
    color: inherit;
}

[data-theme="charcoal-warm"] .text-muted,
[data-theme="navy-teal"] .text-muted {
    color: #adb5bd !important;
}

[data-theme="charcoal-warm"] .card,
[data-theme="navy-teal"] .card {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: #f0f0f0;
}

[data-theme="charcoal-warm"] .card-title a,
[data-theme="navy-teal"] .card-title a {
    color: #f0f0f0 !important;
}

[data-theme="charcoal-warm"] .form-control,
[data-theme="navy-teal"] .form-control {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #f0f0f0;
}

[data-theme="charcoal-warm"] .form-label,
[data-theme="charcoal-warm"] .form-check-label,
[data-theme="navy-teal"] .form-label,
[data-theme="navy-teal"] .form-check-label {
    color: #f0f0f0;
}

[data-theme="charcoal-warm"] .accordion-button,
[data-theme="navy-teal"] .accordion-button {
    background-color: rgba(255,255,255,0.08);
    color: #f0f0f0;
}

[data-theme="charcoal-warm"] .page-header,
[data-theme="navy-teal"] .page-header {
    background-color: rgba(0,0,0,0.3);
}

/* === Bootstrap Overrides === */

.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }

.btn { border-radius: 50px; }

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary);
}

/* === Hero Section === */

.hero-section {
    background: url('https://images.unsplash.com/photo-1516734212186-a967f81ad0d7?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
    height: 80vh;
    min-height: 500px;
    position: relative;
}

.hero-section .overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* === Page Header === */

.page-header {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    padding: 3rem 0;
    margin-top: 56px;
}

/* === Section Titles === */

.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
}

/* === Cards === */

.card {
    border: 0;
    border-radius: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* === Product Cards === */

.product-card { overflow: hidden; }

.product-card .card-img-top {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .card-img-top { transform: scale(1.05); }

/* === Navbar === */

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color) !important;
}

.nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 600;
}

/* === Theme Switcher === */

.theme-switcher {
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 1050;
}

#theme-toggle-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 10px 15px;
    font-size: 1.2rem;
    cursor: pointer;
}

.theme-panel {
    position: absolute;
    right: 100%;
    top: 0;
    width: 200px;
    background: white;
    padding: 15px;
    border-radius: 14px 0 0 14px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    display: none;
}

.theme-panel.active { display: block; }

.color-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s;
}

.color-btn:hover { transform: scale(1.1); }

/* === Pagination === */

.pagination .page-link { color: var(--primary-color); }

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary);
}

.pagination .page-link:hover { color: var(--primary-hover); }

/* === Footer === */

footer.bg-dark { background-color: #3E2723 !important; }

footer a:hover { color: white !important; text-decoration: underline !important; }

.social-links { display: flex; align-items: center; }

.social-links a {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
    text-decoration: none;
}

.social-links a:hover { background: var(--primary-color); }

/* === Team Cards === */

.team-card img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

.paw-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--primary-color);
    color: var(--text-on-primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* === Gallery === */

.gallery-item {
    overflow: hidden;
    border-radius: 14px;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img { transform: scale(1.05); }

/* === Cart === */

.cart-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

/* === Testimonials === */

.testimonial-card {
    border-left: 4px solid var(--primary-color) !important;
}

.testimonial-card .fa-quote-left {
    color: var(--primary-color);
    opacity: 0.3;
    font-size: 2rem;
}

.speech-bubble {
    position: relative;
    background: white;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 30px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: white transparent transparent;
}

/* === Services Size Tabs === */

.size-tab {
    cursor: pointer;
    transition: all 0.3s ease;
}

.size-tab.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* === Before/After Cards === */

.before-after-card { overflow: hidden; border-radius: 14px; }
.before-after-card img { height: 200px; object-fit: cover; width: 100%; }

/* === Loyalty Cards === */

.loyalty-card {
    border: 2px dashed var(--primary-color);
    border-radius: 14px;
    transition: transform 0.3s ease;
}

.loyalty-card:hover { transform: translateY(-5px); }

/* === Booking Pet Type Icons === */

.pet-type-btn {
    border: 2px solid #ddd;
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.pet-type-btn:hover,
.pet-type-btn.selected {
    border-color: var(--primary-color);
    background-color: rgba(232,115,74,0.1);
    color: var(--primary-color);
}

/* === Pet of the Month === */

.pet-spotlight {
    border: 3px solid var(--primary-color);
    border-radius: 14px;
    overflow: hidden;
}

/* === Responsive === */

@media (max-width: 768px) {
    .hero-section { height: 60vh; min-height: 400px; }
    .hero-section h1 { font-size: 2rem; }
    .product-card .card-img-top { height: 200px; }
    .page-header { padding: 2rem 0; }
    .gallery-item img { height: 180px; }
}