/* ============================================
   Chef Rumbie - Custom Styles
   Premium Chef Booking Platform
   ============================================ */

/* ============================================
   CSS Variables / Design Tokens
   ============================================ */
:root {
    /* Primary Colors - Warm, Culinary Theme */
    --primary: #c8a97e;
    --primary-dark: #a68b5b;
    --primary-light: #e8d5b9;

    /* Secondary Colors */
    --secondary: #2c3e50;
    --secondary-light: #34495e;

    /* Accent Colors */
    --accent: #e74c3c;
    --accent-golden: #f39c12;
    --accent-green: #27ae60;

    /* Neutrals */
    --dark: #1a1a2e;
    --dark-lighter: #16213e;
    --light: #f8f9fa;
    /* The dark theme's grey (the light theme sets its own): #6c757d was 3.5:1
       on the dark cards, under the 4.5:1 small text needs. */
    --gray: #a3a3b3;
    --gray-light: #e9ecef;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 30px rgba(200, 169, 126, 0.3);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
}

/* ============================================
   Base Styles
   ============================================ */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--secondary);
    background-color: var(--light);
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--dark);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

/* ============================================
   Navbar Styles
   ============================================ */
#mainNav {
    background: transparent;
    padding: 1rem 0;
    transition: var(--transition-normal);
}

#mainNav.navbar-scrolled {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 0;
}

#mainNav .navbar-brand {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
}

#mainNav .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

#mainNav .nav-link:hover {
    color: var(--primary);
    background: rgba(200, 169, 126, 0.1);
}

/* The full menu (1200px and up): every item centred on one line. "Book Now"
   wrapped to two lines, which made the bar taller and left the theme button
   sitting at its top. */
@media (min-width: 1200px) {
    #mainNav .navbar-nav { align-items: center; }
    #mainNav .navbar-nav .btn { white-space: nowrap; }
}

/* Up to 1399px the container is only 1140px wide: tighter spacing so the
   logo, eight links, "Book Now" and the theme button fit side by side. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #mainNav .nav-link {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        margin: 0 0.1rem;
    }
    #mainNav .navbar-nav .btn {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

.brand-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-golden) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-lighter) 100%);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("/static/images/hero-pattern.433a84fdb36a.svg") repeat;
    opacity: 0.05;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-title .highlight {
    color: var(--primary);
    position: relative;
}

.hero-title .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent-golden) 100%);
    border-radius: 2px;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-lg);
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.875rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-outline-primary {
    color: var(--primary);
    border: 2px solid var(--primary);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1rem;
}

/* Small buttons got the full padding above (2rem a side), so in a card
   "View Details" had about 90px for its text and broke onto two lines. */
.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* A photo field's "Clear" box (Django's clearable file input, on the team's
   forms) was 16px, under the 24px a target needs (WCAG 2.2): 24px, beside
   its label. */
.form-check:has(> input[type="checkbox"][name$="-clear"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    margin-bottom: 0;
    margin-left: 0.75rem;  /* the widget's "ml-2" is Bootstrap 4's, unknown to 5: it sat against the file name */
}
.form-check > input[type="checkbox"][name$="-clear"] {
    float: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
}

/* A button stretched to its column needs no wide side padding (its label is
   centred): with 2rem a side, "Browse Classes" broke in a tablet's third. */
.btn.w-100 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   Cards
   ============================================ */
.card {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-img-top {
    height: 220px;
    object-fit: cover;
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/* Service/Package Cards */
.package-card {
    position: relative;
    background: #fff;
}

.package-card.featured {
    border: 2px solid var(--primary);
}

.package-card .featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-golden) 100%);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.package-card .price {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--primary);
    font-weight: 700;
    /* A narrow card puts "/2 guests" under the price: two lines of the body's 1.7 made it 109px tall. */
    line-height: 1.2;
}

.package-card .price small {
    font-size: 1rem;
    color: var(--gray);
    font-weight: 400;
    white-space: nowrap;
}

/* Class Cards */
.class-card {
    background: #fff;
}

.class-card .class-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.class-card .class-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--gray);
}

.class-card .skill-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.class-card .skill-badge.beginner {
    background: #d4edda;
    color: #155724;
}

.class-card .skill-badge.intermediate {
    background: #fff3cd;
    color: #856404;
}

.class-card .skill-badge.advanced {
    background: #f8d7da;
    color: #721c24;
}

/* ============================================
   Section Styles
   ============================================ */
section {
    padding: 5rem 0;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent-golden) 100%);
    border-radius: 2px;
}

.section-subtitle {
    color: var(--gray);
    font-size: 1.125rem;
    margin-bottom: 3rem;
}

/* Dark Section */
.section-dark {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-lighter) 100%);
    color: #fff;
}

.section-dark .section-title {
    color: #fff;
}

.section-dark .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   Testimonials
   ============================================ */
.testimonial-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 4rem;
    font-family: var(--font-heading);
    color: var(--primary);
    opacity: 0.2;
    line-height: 1;
}

.testimonial-card .content {
    position: relative;
    z-index: 1;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

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

.testimonial-card .author-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.testimonial-card .rating {
    color: var(--accent-golden);
}

/* ============================================
   Gallery
   ============================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 4/3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

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

.gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    opacity: 0;
    transition: var(--transition-normal);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
}

.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item .overlay h3,
.gallery-item .overlay h5 {
    color: #fff;
    margin: 0;
}

/* ============================================
   Forms
   ============================================ */
.form-control,
.form-select {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--gray-light);
    transition: var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.1);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Floating Labels */
.form-floating>.form-control,
.form-floating>.form-select {
    height: calc(3.5rem + 4px);
    padding: 1rem;
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background: var(--dark);
}

.footer a {
    color: var(--gray);
    transition: var(--transition-fast);
}

.footer a:hover {
    color: var(--primary);
}

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

.footer .social-links a:hover {
    color: var(--accent-golden);
}

/* ============================================
   WhatsApp Float Button
   ============================================ */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: var(--transition-normal);
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    color: #fff;
    transform: scale(1.1);
    animation: none;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* ============================================
   Booking Form Steps
   ============================================ */
.booking-steps {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.booking-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gray);
}

.booking-step.active {
    color: var(--primary);
}

.booking-step.completed {
    color: var(--accent-green);
}

.booking-step .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.booking-step.active .step-number {
    background: var(--primary);
    color: #fff;
}

.booking-step.completed .step-number {
    background: var(--accent-green);
    color: #fff;
}

/* ============================================
   Dashboard
   ============================================ */
.dashboard-sidebar {
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

.dashboard-sidebar .nav-link {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--secondary);
    margin-bottom: 0.25rem;
}

.dashboard-sidebar .nav-link:hover,
.dashboard-sidebar .nav-link.active {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.dashboard-sidebar .nav-link i {
    margin-right: 0.75rem;
}

.stat-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.stat-card .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.stat-card .stat-label {
    color: var(--gray);
    font-size: 0.875rem;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .booking-steps {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    .hero-title {
        font-size: 2rem;
    }

    section {
        padding: 3rem 0;
    }

    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}

/* ============================================
   Utilities
   ============================================ */
.text-primary {
    color: var(--primary) !important;
}

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

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-golden) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.bg-gradient-dark {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-lighter) 100%);
}

.divider {
    height: 4px;
    width: 60px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent-golden) 100%);
    border-radius: 2px;
}

.overlay-dark {
    position: relative;
}

.overlay-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* ============================================
   Light Mode (manual toggle)
   ============================================ */
[data-theme="light"] {
    --light: #f8f9fa;
    --dark: #1a1a2e;
    --gray: #5c636a;  /* #6c757d was 4.45:1 on the light page (#f8f9fa) */
    --gray-light: #e9ecef;
    --secondary: #2c3e50;
}

[data-theme="light"] body {
    background-color: #f8f9fa;
    color: #2c3e50;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    color: #1a1a2e;
}

[data-theme="light"] .card {
    background-color: #fff;
    border: 1px solid #e9ecef;
}

[data-theme="light"] .card-body {
    background-color: #fff;
}

[data-theme="light"] .package-card,
[data-theme="light"] .class-card,
[data-theme="light"] .testimonial-card {
    background: #fff;
}

[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    background-color: #fff;
    border-color: #dee2e6;
    color: #2c3e50;
}

/* The dark theme's :focus rule comes later in this file and set the text
   #e0e0e0: a box clicked into in light mode went pale grey on white, and an
   open dropdown's choices with it. */
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
    background-color: #fff;
    color: #2c3e50;
}

/* A dropdown's list of choices, in the colours of the box it opens from. */
.form-select option {
    background-color: #2d2d44;
    color: #e0e0e0;
}
[data-theme="light"] .form-select option {
    background-color: #fff;
    color: #2c3e50;
}

[data-theme="light"] .dashboard-sidebar {
    background: #fff;
}

[data-theme="light"] .stat-card {
    background: #fff;
}

[data-theme="light"] .bg-light {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .bg-white {
    background-color: #fff !important;
}

[data-theme="light"] .dropdown-menu {
    background-color: #fff;
    border-color: #dee2e6;
}

[data-theme="light"] .dropdown-item {
    color: #2c3e50;
}

[data-theme="light"] .dropdown-item:hover {
    background-color: #f8f9fa;
}

[data-theme="light"] .list-group-item {
    background-color: #fff;
    border-color: #dee2e6;
    color: #2c3e50;
}

[data-theme="light"] .modal-content {
    background-color: #fff;
}

[data-theme="light"] .table {
    color: #2c3e50;
}

[data-theme="light"] .accordion-button {
    background-color: #fff;
    color: #2c3e50;
}

[data-theme="light"] .accordion-body {
    background-color: #fff;
}

[data-theme="light"] section {
    background-color: #f8f9fa;
}

[data-theme="light"] .page-link {
    background-color: #fff;
    border-color: #dee2e6;
    color: #2c3e50;
}

/* ============================================
   Dark Mode (default)
   ============================================ */
body {
    background-color: #121212;
    color: #e0e0e0;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}

/* Cards */
.card {
    background-color: #1e1e2e;
    border: 1px solid #2d2d44;
}

.card-body {
    background-color: #1e1e2e;
}

.card-title {
    color: #ffffff;
}

.card-text {
    color: #b0b0b0;
}

/* Package and Class Cards */
.package-card,
.class-card,
.testimonial-card {
    background: #1e1e2e;
}

.package-card .price small {
    color: #888;
}

/* Form Controls */
.form-control,
.form-select {
    background-color: #2d2d44;
    border-color: #3d3d55;
    color: #e0e0e0;
}

.form-control:focus,
.form-select:focus {
    background-color: #2d2d44;
    border-color: var(--primary);
    color: #e0e0e0;
}

.form-control::placeholder {
    color: #a3a3b3;             /* 5.4:1 on the #2d2d44 dark inputs; #888 was 3.8 */
}

.form-label {
    color: #e0e0e0;
}

/* Dropdowns */
.dropdown-menu {
    background-color: #1e1e2e;
    border-color: #2d2d44;
}

.dropdown-item {
    color: #e0e0e0;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #2d2d44;
    color: var(--primary);
}

.dropdown-divider {
    border-color: #2d2d44;
}

/* Buttons */
.btn-outline-dark {
    color: #e0e0e0;
    border-color: #e0e0e0;
}

.btn-outline-dark:hover {
    background-color: #e0e0e0;
    color: #121212;
}

.btn-outline-secondary {
    color: #b0b0b0;
    border-color: #3d3d55;
}

/* Backgrounds */
.bg-light {
    background-color: #1a1a2e !important;
}

.bg-white {
    background-color: #1e1e2e !important;
}

/* Tables */
.table {
    color: #e0e0e0;
}

.table-hover tbody tr:hover {
    background-color: rgba(200, 169, 126, 0.1);
}

.table thead th {
    border-color: #2d2d44;
}

.table td,
.table th {
    border-color: #2d2d44;
}

.table-light {
    background-color: #2d2d44 !important;
}

/* List Groups */
.list-group-item {
    background-color: #1e1e2e;
    border-color: #2d2d44;
    color: #e0e0e0;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: #2d2d44;
    color: var(--primary);
}

/* Modals */
.modal-content {
    background-color: #1e1e2e;
    border-color: #2d2d44;
}

.modal-header,
.modal-footer {
    border-color: #2d2d44;
}

/* Alerts */
.alert {
    border: none;
}

/* Text & Muted */
.text-dark {
    color: #e0e0e0 !important;
}

.text-muted {
    color: #888 !important;
}

/* Breadcrumbs */
.breadcrumb-item+.breadcrumb-item::before {
    color: #888;
}

.breadcrumb-item.active {
    color: #b0b0b0;
}

/* Progress Bars */
.progress {
    background-color: #2d2d44;
}

/* Pagination */
.page-link {
    background-color: #1e1e2e;
    border-color: #2d2d44;
    color: #e0e0e0;
}

.page-link:hover {
    background-color: #2d2d44;
    color: var(--primary);
}

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

/* Dashboard */
.dashboard-sidebar {
    background: #1e1e2e;
}

.dashboard-sidebar .nav-link {
    color: #e0e0e0;
}

.stat-card {
    background: #1e1e2e;
}

/* Navbar when scrolled */
#mainNav.navbar-scrolled {
    background: rgba(18, 18, 18, 0.95);
}

/* Section backgrounds */
section {
    background-color: #121212;
}

/* Page hero backgrounds */
.page-hero {
    background-color: #1a1a2e;
}

/* Card header/footer */
.card-header {
    background-color: #2d2d44;
    border-color: #3d3d55;
}

.card-footer {
    background-color: #1e1e2e;
    border-color: #2d2d44;
}

/* Toasts */
.toast {
    background-color: #1e1e2e;
}

/* HR */
hr {
    border-color: #2d2d44;
}

/* Accordion */
.accordion-button {
    background-color: #1e1e2e;
    color: #e0e0e0;
}

.accordion-button:not(.collapsed) {
    background-color: rgba(200, 169, 126, 0.1);
    color: var(--primary);
}

.accordion-body {
    background-color: #1e1e2e;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #3d3d55;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Section titles */
.section-title {
    color: #ffffff;
}

/* Gold buttons */
.btn-gold {
    background: linear-gradient(135deg, var(--primary) 0%, #a68b5b 100%);
    color: #1a1a2e;
    border: none;
}

.btn-gold:hover {
    background: linear-gradient(135deg, #a68b5b 0%, var(--primary) 100%);
    color: #1a1a2e;
}

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

.btn-outline-gold:hover {
    background-color: var(--primary);
    color: #1a1a2e;
}

.text-gold {
    color: var(--primary) !important;
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle {
    background: none;
    border: 1.5px solid rgba(200, 169, 126, 0.4);
    color: var(--primary);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 1.1rem;
}

.theme-toggle:hover {
    background: rgba(200, 169, 126, 0.15);
    border-color: var(--primary);
}

/* Input autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d44 inset;
    -webkit-text-fill-color: #e0e0e0;
    transition: background-color 5000s ease-in-out 0s;
}

[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    -webkit-text-fill-color: #2c3e50;
}

/* ============================================================
   UI/UX pass — fixed-navbar spacing + text contrast (both themes)
   ============================================================ */

/* Offset content below the fixed navbar; full-bleed heroes stay under it */
main { padding-top: 74px; }
.hero { margin-top: -74px; }
.page-hero {
    margin-top: -74px;
    padding-top: calc(74px + 2.5rem) !important;
}

/* ---- Dark mode (default): readable text inside light-named containers ---- */
.bg-light,
.bg-light p,
.bg-light li,
.bg-light td,
.bg-light small {
    color: #e0e0e0;
}
.bg-light strong,
.bg-light h5,
.bg-light h6 {
    color: #ffffff;
}
.form-check-label {
    color: #e0e0e0;
}
.text-muted {
    color: #a3a3b3 !important;
}

/* ---- Light mode overrides ---- */

/* Navbar: opaque light bar + dark links, readable over any page */
[data-theme="light"] #mainNav {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-sm);
}
[data-theme="light"] #mainNav.navbar-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
}
/* The toggle's gold icon was 2.1:1 on this bar; UI icons need 3:1. */
[data-theme="light"] .theme-toggle {
    color: #8a6a3b;
    border-color: rgba(138, 106, 59, 0.45);
}
/* navbar-dark draws the menu button in white, which vanished on this bar. */
[data-theme="light"] #mainNav {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(33, 37, 41, 0.15);
}
[data-theme="light"] #mainNav .nav-link {
    color: var(--secondary) !important;
}
[data-theme="light"] #mainNav .nav-link:hover {
    color: var(--primary) !important;
}

/* Light containers get dark text back */
[data-theme="light"] .bg-light,
[data-theme="light"] .bg-light p,
[data-theme="light"] .bg-light li,
[data-theme="light"] .bg-light td,
[data-theme="light"] .bg-light small {
    color: #2c3e50;
}
[data-theme="light"] .bg-light strong,
[data-theme="light"] .bg-light h5,
[data-theme="light"] .bg-light h6 {
    color: #1a1a2e;
}
[data-theme="light"] .form-check-label {
    color: #2c3e50;
}
[data-theme="light"] .text-muted {
    color: #5c636a !important;      /* 5.8:1 on #f8f9fa; #6c757d was 4.45 */
}

/* Card body inherits its card's colour instead of forcing white */
[data-theme="light"] .card-body {
    background-color: transparent;
}

/* Intentionally-coloured stat cards keep their colour + readable text */
[data-theme="light"] .card.bg-dark,
[data-theme="light"] .card.bg-dark > .card-body {
    background-color: #1a1a2e !important;
}
[data-theme="light"] .card.bg-success,
[data-theme="light"] .card.bg-success > .card-body {
    background-color: #198754 !important;
}
[data-theme="light"] .card.bg-gold,
[data-theme="light"] .card.bg-gold > .card-body {
    background: linear-gradient(135deg, var(--primary) 0%, #a68b5b 100%) !important;
}
[data-theme="light"] .card.bg-dark, [data-theme="light"] .card.bg-dark *,
[data-theme="light"] .card.bg-success, [data-theme="light"] .card.bg-success * {
    color: #fff !important;
}
[data-theme="light"] .card.bg-gold, [data-theme="light"] .card.bg-gold * {
    color: #1a1a2e !important;
}

/* Card header/footer light (leave intentionally-coloured headers alone) */
[data-theme="light"] .card-header:not(.bg-gold):not(.bg-dark):not(.bg-success) {
    background-color: #f8f9fa;
    border-color: #e9ecef;
    color: #1a1a2e;
}
[data-theme="light"] .card-footer {
    background-color: #f8f9fa;
    border-color: #e9ecef;
}

/* Highlighted table rows readable in light mode */
[data-theme="light"] .table-light,
[data-theme="light"] .table-light td,
[data-theme="light"] .table-light th {
    background-color: #e9ecef !important;
    color: #1a1a2e;
}

/* Outline buttons readable on light backgrounds */
[data-theme="light"] .btn-outline-dark {
    color: var(--secondary);
    border-color: var(--secondary);
}
[data-theme="light"] .btn-outline-dark:hover {
    background-color: var(--secondary);
    color: #fff;
}
[data-theme="light"] .btn-outline-secondary {
    color: #495057;
    border-color: #ced4da;
}
[data-theme="light"] .btn-outline-secondary:hover {
    background-color: #495057;
    color: #fff;
}

/* ---- .bg-gold was used in templates but never defined ---- */
.bg-gold {
    background: linear-gradient(135deg, var(--primary) 0%, #a68b5b 100%) !important;
}
.bg-gold,
.bg-gold * {
    color: #1a1a2e !important;
}

/* Coloured cards: let the card colour show through its body (both themes) */
.card.bg-gold > .card-body,
.card.bg-dark > .card-body,
.card.bg-success > .card-body {
    background-color: transparent !important;
}

/* ---- .text-dark leaked the dark-mode light grey into light mode ---- */
[data-theme="light"] .text-dark {
    color: #1a1a2e !important;
}

/* ---- Gold needs to be darker on white to stay legible ---- */
[data-theme="light"] .text-gold {
    color: #8a6a3b !important;
}
[data-theme="light"] .btn-outline-gold {
    color: #8a6a3b;
    border-color: #8a6a3b;
}
[data-theme="light"] .btn-outline-gold:hover {
    background-color: #8a6a3b;
    color: #fff;
}
[data-theme="light"] .brand-text {
    background: linear-gradient(135deg, #8a6a3b 0%, #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---- Headings/text sitting on dark panels stay light in light mode ---- */
[data-theme="light"] .page-hero h1, [data-theme="light"] .page-hero h2,
[data-theme="light"] .page-hero h3, [data-theme="light"] .page-hero h4,
[data-theme="light"] .page-hero h5, [data-theme="light"] .page-hero h6,
[data-theme="light"] .bg-dark h1, [data-theme="light"] .bg-dark h2,
[data-theme="light"] .bg-dark h3, [data-theme="light"] .bg-dark h4,
[data-theme="light"] .bg-dark h5, [data-theme="light"] .bg-dark h6,
[data-theme="light"] .text-white:not(.bg-gradient-primary):not(.bg-info):not(.bg-warning) h1,
[data-theme="light"] .text-white:not(.bg-gradient-primary):not(.bg-info):not(.bg-warning) h2,
[data-theme="light"] .text-white:not(.bg-gradient-primary):not(.bg-info):not(.bg-warning) h3,
[data-theme="light"] .text-white:not(.bg-gradient-primary):not(.bg-info):not(.bg-warning) h4,
[data-theme="light"] .text-white:not(.bg-gradient-primary):not(.bg-info):not(.bg-warning) h5,
[data-theme="light"] .text-white:not(.bg-gradient-primary):not(.bg-info):not(.bg-warning) h6 {
    color: #ffffff !important;
}
[data-theme="light"] .page-hero p,
[data-theme="light"] .page-hero li,
[data-theme="light"] .page-hero .lead {
    color: rgba(255, 255, 255, 0.9);
}

/* ---- Outline buttons: override Bootstrap's --bs-btn-color in both themes ---- */
.btn-outline-dark {
    color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}
.btn-outline-dark:hover {
    background-color: #e0e0e0 !important;
    color: #121212 !important;
}
.btn-outline-secondary {
    color: #b0b0b0 !important;
    border-color: #3d3d55 !important;
}
.btn-outline-secondary:hover {
    background-color: #b0b0b0 !important;
    color: #121212 !important;
}
[data-theme="light"] .btn-outline-dark {
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}
[data-theme="light"] .btn-outline-dark:hover {
    background-color: var(--secondary) !important;
    color: #fff !important;
}
[data-theme="light"] .btn-outline-secondary {
    color: #495057 !important;
    border-color: #ced4da !important;
}
[data-theme="light"] .btn-outline-secondary:hover {
    background-color: #495057 !important;
    color: #fff !important;
}

/* ---- Links: darker gold on light surfaces, bright gold on dark panels ---- */
[data-theme="light"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
    color: #8a6a3b;
}
[data-theme="light"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover {
    color: #6d5430;
}
[data-theme="light"] footer a:not(.btn),
[data-theme="light"] .bg-dark a:not(.btn),
[data-theme="light"] .page-hero a:not(.btn),
[data-theme="light"] .offcanvas a:not(.btn) {
    color: var(--primary);
}

/* ---- Bootstrap sets .card { color: var(--bs-body-color) } (near-black), which
   made unclassed text inside cards invisible in dark mode. Set it per theme. ---- */
.card,
.modal-content,
.accordion-body {
    color: #e0e0e0;
}
[data-theme="light"] .card,
[data-theme="light"] .modal-content,
[data-theme="light"] .accordion-body {
    color: #2c3e50;
}

/* ---- Remaining dark-theme rules that leaked into light mode ---- */
[data-theme="light"] .form-label {
    color: #2c3e50;
}
[data-theme="light"] .card-title {
    color: #1a1a2e;
}
[data-theme="light"] .card-text {
    color: #55606b;
}
[data-theme="light"] .breadcrumb-item.active {
    color: #5c636a;             /* 5.7:1 on the light page; #6c757d was 4.45 */
}
[data-theme="light"] .dashboard-sidebar .nav-link {
    color: #2c3e50;
}
[data-theme="light"] .package-card .price small {
    color: #6c757d;
}
[data-theme="light"] .form-control::placeholder {
    color: #6c757d;             /* 4.7:1 on white; #8a94a0 was 3.1 */
}

/* ---- Gold accents need darkening on light surfaces ---- */
[data-theme="light"] .btn-outline-primary {
    color: #8a6a3b;
    border-color: #8a6a3b;
}
[data-theme="light"] .btn-outline-primary:hover {
    background: #8a6a3b;
    color: #fff;
}
[data-theme="light"] .price,
[data-theme="light"] .package-card .price {
    color: #8a6a3b;
}
/* ============================================
   UI/UX audit — round 5
   ============================================ */

/* ---- Badges: Bootstrap's light badge backgrounds need dark labels, and the
   dark-mode .text-dark override must not leak onto them. ---- */
.badge.bg-warning,
.badge.bg-info,
.badge.bg-light,
.badge.bg-primary,
.badge.text-dark,
.badge.bg-warning .bi,
.badge.bg-info .bi {
    color: #1a1a2e !important;
}

/* ---- Pagination: the active page sits on the gold brand colour, so its
   label has to be dark in both themes. ---- */
.page-item.active .page-link,
.page-link.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #1a1a2e !important;
}
[data-theme="light"] .page-link {
    color: #8a6a3b;
}

/* ---- Dashboard sidebar: Bootstrap's blue .active swallowed the gold link. ---- */
.list-group-item.active {
    background-color: var(--primary);
    border-color: var(--primary);
}
.list-group-item.active,
.list-group-item.active a,
.list-group-item.active .bi {
    color: #1a1a2e !important;
}

/* ---- Gold text stays bright on dark surfaces, even in light mode ---- */
[data-theme="light"] .bg-dark .text-gold,
[data-theme="light"] .page-hero .text-gold,
[data-theme="light"] footer .text-gold {
    color: var(--primary) !important;
}

/* ---- Outline-gold buttons on light surfaces ---- */
[data-theme="light"] .btn-outline-gold {
    color: #8a6a3b;
    border-color: #8a6a3b;
}
[data-theme="light"] .btn-outline-gold:hover,
[data-theme="light"] .btn-outline-gold.active {
    background: #8a6a3b;
    border-color: #8a6a3b;
    color: #fff;
}

/* ---- AOS slides elements 100px sideways before they animate in, which gave
   phones a horizontal scrollbar. Clip it below lg, where the sticky sidebars
   have already stacked and nothing depends on the body scrolling sideways. ---- */
@media (max-width: 991.98px) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* ============================================
   UI/UX audit — round 6 (gradient surfaces)
   ============================================ */

/* ---- The home hero keeps its dark backdrop in both themes, so its heading
   must stay light even though light mode darkens headings. ---- */
[data-theme="light"] .hero .hero-title,
[data-theme="light"] .hero h1,
[data-theme="light"] .hero h2,
[data-theme="light"] .hero .hero-subtitle {
    color: #ffffff;
}
[data-theme="light"] .hero .hero-title .highlight {
    color: var(--primary);
}

/* ---- White on the gold gradient is 2.2:1. Anything sitting on gold uses the
   dark ink instead, the same way .btn-gold and .bg-gold already do. ---- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary .bi,
.package-card .featured-badge {
    color: #1a1a2e;
}
.bg-gradient-primary,
.bg-gradient-primary * {
    color: #1a1a2e !important;
}
.bg-gradient-primary .btn-light {
    color: #1a1a2e !important;
}
.bg-gradient-primary .btn-outline-light {
    color: #1a1a2e !important;
    border-color: #1a1a2e !important;
}
.bg-gradient-primary .btn-outline-light:hover {
    background-color: #1a1a2e !important;
    color: #ffffff !important;
}

/* ---- Status badges are written as bg-{{ object.status }}, which yields class
   names Bootstrap has never heard of (bg-deposit_paid, bg-confirmed, …). With
   no background they rendered white-on-white, so give each status a colour. ---- */
.badge.bg-pending,
.badge.bg-awaiting_delivery,
.badge.bg-waitlisted {
    background-color: #f39c12 !important;
    color: #1a1a2e !important;
}
.badge.bg-deposit_paid,
.badge.bg-scheduled {
    background-color: #0dcaf0 !important;
    color: #1a1a2e !important;
}
.badge.bg-confirmed,
.badge.bg-paid,
.badge.bg-attended {
    background-color: #198754 !important;
    color: #ffffff !important;
}
.badge.bg-in_progress {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}
.badge.bg-completed {
    background-color: #20c997 !important;
    color: #1a1a2e !important;
}
.badge.bg-cancelled,
.badge.bg-failed {
    background-color: #b02a37 !important;
    color: #ffffff !important;
}
.badge.bg-refunded,
.badge.bg-no_show {
    background-color: #5c636a !important;
    color: #ffffff !important;
}

/* ---- Tables: Bootstrap paints every cell with --bs-table-bg (#fff), so
   dark-mode tables came out white-on-white. Let cells inherit the card. ---- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #e0e0e0;
    color: #e0e0e0;
}
.table thead.table-light th,
.table .table-light > * {
    background-color: #2d2d44;
    color: #ffffff;
}
[data-theme="light"] .table {
    --bs-table-color: #2c3e50;
    color: #2c3e50;
}
[data-theme="light"] .table thead.table-light th,
[data-theme="light"] .table .table-light > * {
    background-color: #f1f3f5;
    color: #1a1a2e;
}

/* ---- Bootstrap's info and warning surfaces are pale, so their contents need
   the dark ink no matter which .text-* class the markup asks for. ---- */
.bg-info,
.bg-info *,
.bg-warning,
.bg-warning * {
    color: #1a1a2e !important;
}

/* ---- Stat cards: the dark-mode `.card` background was painting over the
   Bootstrap colour utilities, so bg-warning/info/success cards turned grey
   and their labels vanished. Keep the utility colour in both themes. ---- */
.card.bg-warning,
.card.bg-warning > .card-body {
    background-color: #ffc107 !important;
}
.card.bg-info,
.card.bg-info > .card-body {
    background-color: #0dcaf0 !important;
}
.card.bg-success,
.card.bg-success > .card-body {
    background-color: #198754 !important;
}
.card.bg-primary,
.card.bg-primary > .card-body {
    background-color: #0d6efd !important;
}
.card.bg-danger,
.card.bg-danger > .card-body {
    background-color: #b02a37 !important;
}
.card.bg-success *,
.card.bg-primary *,
.card.bg-danger * {
    color: #ffffff !important;
}

/* ---- Round icon badges: a padded block takes its width from the glyph and
   its height from the line-height, so it rendered as an oval. Give it a
   square box and centre the glyph instead. ---- */
.icon-circle {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
}

/* ---- Current section in the navbar ---- */
#mainNav .nav-link.active,
#mainNav .nav-link.active:hover {
    color: var(--primary);
    background: rgba(200, 169, 126, 0.14);
    font-weight: 600;
}
[data-theme="light"] #mainNav .nav-link.active,
[data-theme="light"] #mainNav .nav-link.active:hover {
    color: #7a5d33 !important;
    background: rgba(200, 169, 126, 0.18);
}
.offcanvas .nav-link.active {
    color: var(--primary) !important;
    background: rgba(200, 169, 126, 0.14);
    font-weight: 600;
}

/* ---- Current page in the footer: the links are muted grey, so the active
   one goes gold. Beats the .text-muted !important on the same element. ---- */
footer a.active,
footer a.active:hover,
[data-theme="light"] footer a.active,
[data-theme="light"] footer a.active:hover {
    color: var(--primary) !important;
    font-weight: 600;
}

/* ---- Auth pages (login, signup, logout, password reset). Their templates hold
   the white-card design as the base and scope the dark variant to
   [data-theme="dark"]; the navy backdrop was a plain rule, so it stayed dark in
   light mode. The template's <style> loads after this file, hence the extra
   specificity rather than !important. ---- */
[data-theme="light"] .auth-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #e2e6ec 100%);
}
[data-theme="light"] .auth-card {
    box-shadow: 0 25px 50px rgba(26, 26, 46, 0.12);
}

/* ---- Surfaces that stay dark in light mode (footer, heroes, .section-dark,
   .bg-dark) need the light muted shade; the page's muted grey is ~3.4:1 on
   them. Same for success green, which is picked for the page background. ---- */
[data-theme="light"] footer .text-muted,
[data-theme="light"] .hero .text-muted,
[data-theme="light"] .page-hero .text-muted,
[data-theme="light"] .section-dark .text-muted,
[data-theme="light"] .bg-dark .text-muted,
[data-theme="light"] .bg-gradient-dark .text-muted {
    color: #adb5bd !important;
}
[data-theme="light"] footer .text-success,
[data-theme="light"] .hero .text-success,
[data-theme="light"] .page-hero .text-success,
[data-theme="light"] .section-dark .text-success,
[data-theme="light"] .bg-dark .text-success {
    color: #75b798 !important;
}

/* ---- Links on the auth cards. These were inline style="color: var(--primary)",
   which no stylesheet can override, so they stayed pale gold (2.2:1) on the
   white light-mode card. ---- */
.auth-link {
    color: var(--primary);
}
[data-theme="light"] .auth-link,
[data-theme="light"] .auth-link:hover {
    color: #7a5d33;
}

/* ---- .section-subtitle used var(--gray) in both themes: 4.0:1 on the dark
   page. .section-dark keeps its own white-ish subtitle. ---- */
.section-subtitle {
    color: #a3a3b3;
}
[data-theme="light"] .section-subtitle {
    color: #5c636a;
}
[data-theme="light"] .section-dark .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Bootstrap's success green (#198754) is 4.1:1 on the dark page and 4.3:1
   on the light one — just short of AA for text either way. ---- */
.text-success {
    color: #75b798 !important;
}
[data-theme="light"] .text-success {
    color: #146c43 !important;
}

/* ---- The other eight account pages (email, confirmations, password-reset
   follow-ups, inactive, verification sent) set their navy backdrop as an inline
   style, which the light theme cannot reach. They use this class instead,
   matching .auth-page on login/signup. ---- */
.auth-backdrop {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
[data-theme="light"] .auth-backdrop {
    background: linear-gradient(135deg, #f8f9fa 0%, #e2e6ec 100%);
}

/* ---- Tabs (My Bookings) had no styling of their own, so they were
   Bootstrap's default blue: off-brand, and 4.3:1 in light mode. ---- */
.nav-tabs {
    border-bottom-color: #2d2d44;
}
.nav-tabs .nav-link {
    color: #a3a3b3;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--primary);
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--primary);
    background-color: transparent;
    border-color: #2d2d44 #2d2d44 transparent;
}
[data-theme="light"] .nav-tabs {
    border-bottom-color: #dee2e6;
}
[data-theme="light"] .nav-tabs .nav-link {
    color: #5c636a;
}
[data-theme="light"] .nav-tabs .nav-link:hover,
[data-theme="light"] .nav-tabs .nav-link:focus,
[data-theme="light"] .nav-tabs .nav-link.active {
    color: #7a5d33;
}
[data-theme="light"] .nav-tabs .nav-link.active {
    background-color: #ffffff;
    border-color: #dee2e6 #dee2e6 #ffffff;
}

/* ---- Bootstrap's danger red (#dc3545) is 3.6:1 on the dark cards (the
   dashboard sidebar's Logout) and 4.3:1 on the light page. Surfaces that stay
   dark in light mode - including the mobile menu - keep the light red. ---- */
.text-danger {
    color: #ea868f !important;
}
[data-theme="light"] .text-danger {
    color: #b02a37 !important;
}
[data-theme="light"] .bg-dark .text-danger,
[data-theme="light"] .offcanvas .text-danger,
[data-theme="light"] footer .text-danger,
[data-theme="light"] .section-dark .text-danger {
    color: #ea868f !important;
}

/* ---- Gold wordmark on the light auth backdrop: #8a6a3b is 4.0:1 against the
   gradient's darker end. ---- */
[data-theme="light"] .auth-backdrop .text-gold,
[data-theme="light"] .auth-page .text-gold {
    color: #7a5d33 !important;
}

/* ============================================
   UI/UX audit — round 7 (widths between phone and desktop)
   ============================================ */

/* ---- AOS fade-left elements sit 100px to the right until they animate in,
   which scrolled the page sideways at every width from 992px up. clip trims
   that without turning <body> into a scroll container, so the sticky-top
   sidebars on the detail pages keep working - the reason the overflow-x:
   hidden rule above only applies below lg. That rule stays as the fallback
   for browsers without clip (Safari before 16). ---- */
html,
body {
    overflow-x: clip;
}

/* ---- The account menu shows the first name, or the whole email address when
   there is none, which is enough to push the menu past the container. The
   full value is in the title. ---- */
#mainNav .nav-user-name {
    display: inline-block;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ---- Server-side form errors now show under the booking fields. Bootstrap
   colours them #dc3545 in both themes, 3.6:1 on the dark cards; use the same
   reds as .text-danger. ---- */
.invalid-feedback {
    color: #ea868f;
}
[data-theme="light"] .invalid-feedback {
    color: #b02a37;
}

/* ---- text-warning is only used on icons (review stars, the payment
   hourglass and phone). Bootstrap's #ffc107 is 1.6:1 on the light pages;
   icons need 3:1. Surfaces that stay dark in light mode keep the yellow. ---- */
[data-theme="light"] .text-warning {
    color: #a07400 !important;
}
[data-theme="light"] .bg-dark .text-warning,
[data-theme="light"] .offcanvas .text-warning,
[data-theme="light"] footer .text-warning,
[data-theme="light"] .section-dark .text-warning {
    color: #ffc107 !important;
}

/* ---- Account pages (sign in, sign up, password reset): 3rem of padding on
   each side left the form about 250px wide on a phone, so its labels and
   links wrapped. The page's own <style> comes later, hence .auth-card. ---- */
@media (max-width: 575.98px) {
    .auth-card .auth-right {
        padding: 2rem 1.25rem;
    }
}

/* ---- The team's admin screens (dashboard/admin/manage): headings between the
   sidebar's groups, long lists of ticks kept to a scrolling box, and small
   previews of uploaded pictures. ---- */
.admin-nav .admin-nav-heading {
    padding-top: 0.9rem;
    padding-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a8a8b8;
}
[data-theme="light"] .admin-nav .admin-nav-heading {
    color: #5c6770;
}
.manage-choices .form-check {
    margin-bottom: 0.2rem;
}
.manage-choices fieldset > div {
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 0.375rem;
}
.manage-thumb {
    max-width: 160px;
    max-height: 120px;
    border-radius: 0.375rem;
    object-fit: cover;
}
.manage-form .form-control img,
.manage-form a > img {
    max-width: 160px;
}
.manage-value p:last-child {
    margin-bottom: 0;
}
/* The sidebar's heading sits on a dark bar inside a .bg-light section, whose
   light-mode rule for paragraphs made it dark on dark. */
[data-theme="light"] .admin-nav .card-header p {
    color: #fff;
}

/* ---- The browser draws the date and time boxes' calendar and clock icons,
   their pickers and dropdown lists, for the page's colour scheme. Without
   one they were drawn for a light page: dark icons on the dark boxes. ---- */
.form-control,
.form-select {
    color-scheme: dark;
}
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
    color-scheme: light;
}

/* ---- A dropdown's arrow is Bootstrap's drawing in dark grey (#343a40): 1.1:1
   on the dark theme's boxes, so a dropdown looked like a text box. There it
   is drawn in the boxes' text colour. ---- */
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-theme="light"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---- .text-primary is the site's gold, and on white in light mode it was
   2.2:1 (the class prices on the home page). Darker there, as .text-gold is;
   still bright on the surfaces that stay dark. ---- */
[data-theme="light"] .text-primary {
    color: #8a6a3b !important;
}
[data-theme="light"] .hero .text-primary,
[data-theme="light"] .section-dark .text-primary,
[data-theme="light"] .bg-dark .text-primary,
[data-theme="light"] .page-hero .text-primary,
[data-theme="light"] footer .text-primary {
    color: var(--primary) !important;
}

/* ---- "All Levels" had no badge colours of its own, so it was grey on the
   dark card (3.5:1); it gets a pale pill like the other levels. ---- */
.class-card .skill-badge.all {
    background: #e2e3e5;
    color: #383d41;
}

/* ---- FAQ: an open question's faint gold header sat on Bootstrap's white
   .accordion-item in both themes, gold on near-white (2.2:1). The item has
   the theme's own surface now, and in light mode the open question the
   darker gold used for text on light surfaces. ---- */
.accordion-item {
    background-color: #1e1e2e;
}
[data-theme="light"] .accordion-item {
    background-color: #fff;
}
[data-theme="light"] .accordion-button:not(.collapsed) {
    color: #8a6a3b;
}

/* ---- Help text under a field kept Bootstrap's dark grey in dark mode, 1.1:1
   on the dark cards: every hint on the team's forms was unreadable. ---- */
.form-text {
    color: #a3a3b3;
}
[data-theme="light"] .form-text {
    color: #5c636a;
}

/* ---- Delete buttons: Bootstrap's #dc3545 is 3.6:1 on the dark cards; the
   same reds as .text-danger. ---- */
.btn-outline-danger {
    --bs-btn-color: #ea868f;
    --bs-btn-border-color: #ea868f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
}
[data-theme="light"] .btn-outline-danger {
    --bs-btn-color: #b02a37;
    --bs-btn-border-color: #b02a37;
}

/* ---- Text in an alert takes the alert's own colour. The dark theme's white
   headings and the .bg-light text rules left the cancel page's refund policy
   white on its pale yellow (1.1:1), and links went gold. ---- */
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
.alert p, .alert li, .alert small, .alert strong, .alert td {
    color: inherit;
}
.alert .alert-link {
    color: var(--bs-alert-link-color) !important;
}

/* ---- Booking and payment references: Bootstrap's pink was 3.6:1 on the
   dark cards; its own dark-mode pink. ---- */
code {
    color: #e685b5;
}
[data-theme="light"] code {
    color: #c2185b;
}

/* ---- "Skip to main content": hidden until a keyboard reaches it, then on
   top of the fixed menu bar, which would otherwise cover it. ---- */
.skip-link:focus {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #1a1a2e !important;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}
main:focus {
    outline: none;  /* the page it skips to is not a control */
}

/* ---- A form on its way: its button waits, with a spinner, until the next
   page comes (validation.js). ---- */
.btn.is-sending::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    vertical-align: -0.125em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .btn.is-sending::after {
        animation-duration: 1.5s;
    }
}

/* ---- The icon box beside a field (the payment pages' phone number, the
   password and email pages): Bootstrap's light grey, a white square beside
   the dark fields. Now in the fields' own colours and border. ---- */
.input-group-text {
    background-color: #3d3d55;
    border: 2px solid #3d3d55;
    color: #e0e0e0;
}
[data-theme="light"] .input-group-text {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #2c3e50;
}

/* ---- Headings made paragraphs to keep each page's heading order (the home
   page's figures, dashboard counts, prices, names, the payment amount) lost
   the headings' typeface with it: .h1-.h6 only set the size. ---- */
p.h1,
p.h2,
p.h3,
p.h4,
p.h5,
p.h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

/* ---- Headings in the team's text, moved into the page's outline
   (apps/core/templatetags/rich_text.py), keep the size they were written at:
   an h3 under the page's title became an h2 with this class. Only the size
   (Bootstrap's), so the site's heading rules above still apply. ---- */
.rich-text .as-h1 { font-size: calc(1.375rem + 1.5vw); }
.rich-text .as-h2 { font-size: calc(1.325rem + 0.9vw); }
.rich-text .as-h3 { font-size: calc(1.3rem + 0.6vw); }
.rich-text .as-h4 { font-size: calc(1.275rem + 0.3vw); }
.rich-text .as-h5 { font-size: 1.25rem; }
.rich-text .as-h6 { font-size: 1rem; }
@media (min-width: 1200px) {
    .rich-text .as-h1 { font-size: 2.5rem; }
    .rich-text .as-h2 { font-size: 2rem; }
    .rich-text .as-h3 { font-size: 1.75rem; }
    .rich-text .as-h4 { font-size: 1.5rem; }
}

/* ---- The WhatsApp button floats over the bottom right of every page, and
   the end of the page could never scroll out from under it: on a phone it
   sat on the footer's last links. Room below the footer while it is there. ---- */
.footer:has(~ .whatsapp-float) {
    padding-bottom: calc(60px + 30px + 1rem) !important;
}
@media (max-width: 767.98px) {
    .footer:has(~ .whatsapp-float) {
        padding-bottom: calc(50px + 20px + 1rem) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;    /* it pulsed for as long as the page was open */
    }
}
@media print {
    .whatsapp-float {
        display: none;
    }
}

/* ---- Text written in the editor (blog posts, recipes, classes, packages,
   policies, About): a picture, table or video wider than a phone was cut
   off at the screen's edge, its right-hand part out of reach. Pictures and
   videos now fit the width, and a wide table scrolls sideways in its box. ---- */
.rich-text {
    overflow-wrap: break-word;
}
.rich-text img,
.rich-text video {
    max-width: 100%;
    height: auto !important;    /* the editor writes the picture's height in */
}
.rich-text iframe {
    max-width: 100%;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;       /* the editor's embeds are videos */
}
.rich-text table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ---- The text editor on the team's screens (django-prose-editor), in the
   colours of the site's own fields. Out of the box it was a white box in
   the dark theme, where the site's light headings and bold text vanished. ---- */
.prose-editor {
    --prose-editor-background: #2d2d44;
    --prose-editor-foreground: #e0e0e0;
    --prose-editor-border-color: #3d3d55;
    --prose-editor-active-color: var(--primary);
    --prose-editor-disabled-color: #6c6c84;
}
[data-theme="light"] .prose-editor {
    --prose-editor-background: #fff;
    --prose-editor-foreground: #2c3e50;
    --prose-editor-border-color: #dee2e6;
    --prose-editor-active-color: #8a6a3b;
    --prose-editor-disabled-color: #adb5bd;
}
.prose-editor .ProseMirror :is(h1, h2, h3, h4, h5, h6, p, li, strong, em, blockquote, a) {
    color: inherit;
}
.prose-editor .ProseMirror {
    min-height: 10rem;
}
/* Inside the editor each list item is <li><p>…</p></li>; without this its
   lists were spaced like paragraphs. (Saved, they are <li>…</li>: editor.py.) */
.prose-editor .ProseMirror li > p:only-child {
    margin-bottom: 0;
}

/* ---- The logo: Chef Rumbie's lettering (images/logo/wordmark.svg), in place of
   her name typed in the heading font. One file, cached once, coloured here:
   the logo's light aqua on dark, its deeper teal on light. ---- */
.brand-logo {
    --logo-colour: #7fcfca;
    display: inline-block;
    height: 2.4rem;
    aspect-ratio: 448 / 88.6;
    vertical-align: middle;
    background-color: var(--logo-colour);
    -webkit-mask: url("../images/logo/wordmark.e0a57bef713c.svg") no-repeat center / contain;
    mask: url("../images/logo/wordmark.e0a57bef713c.svg") no-repeat center / contain;
}
.brand-logo-lg { height: 3rem; }
.brand-logo-xl { height: 3.6rem; max-width: 100%; }
[data-theme="light"] .brand-logo { --logo-colour: #1f8c96; }
/* Panels that stay dark in the light theme (the footer, the phone menu) keep the aqua. */
[data-theme="light"] .footer .brand-logo,
[data-theme="light"] .bg-dark .brand-logo { --logo-colour: #7fcfca; }
/* On the teal band under her photo: cream, as on her flyer. */
.signature-band .brand-logo { --logo-colour: #fdf6ec; }
@media (max-width: 359.98px) {
    #mainNav .brand-logo { height: 2rem; }
}
/* Windows' high-contrast mode replaces background colours: draw it in its text colour. */
@media (forced-colors: active) {
    .brand-logo { forced-color-adjust: none; background-color: CanvasText; }
}

/* The About page: her signature on a teal band under her photo, as on her flyer. */
.signature-photo { margin: 0; }
.signature-photo img { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.signature-band {
    background: #2e6e6f;
    border-radius: 0 0 1rem 1rem;
    padding: 0.85rem 1rem 0.65rem;
    text-align: center;
}