/* ==========================================================================
   1. Base Styles & Variables (:root, body, Utilities)
   ========================================================================== */

/* Root Variables for FavourBG Theme (Defined ONCE) */
:root {
    --gold: #D4AF37;
    --dark-gold: #B8860B;
    --cream: #FFF8E7;
    --dark: #1A1A1A;
    --white: #FFFFFF;
}

/* General Body Styles (Defined ONCE) */
body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--cream);
    color: var(--dark);
    overflow-x: hidden;
}

/* Base Utilities (Defined ONCE) */
.font-playfair {
    font-family: 'Playfair Display', serif;
}
.font-roboto {
    font-family: 'Roboto', sans-serif;
}
.text-gold {
    color: var(--gold);
}
.text-dark {
    color: var(--dark);
}
.text-cream {
    color: var(--cream);
}
.bg-gold {
    background-color: var(--gold);
}
.bg-cream {
    background-color: var(--cream);
}
.bg-gradient-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--dark-gold) 100%);
}
.border-gold { /* Added utility */
    border: 1px solid var(--gold);
}

/* Base Transitions & Effects (Defined ONCE) */
.transition-hover {
    transition: all 0.3s ease;
}
.transition-hover:hover {
    transform: translateY(-5px); /* Standard hover effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Standard shadow */
}

.transition-hover-text {
    transition: color 0.3s ease;
}
.transition-hover-text:hover {
    color: var(--dark-gold); /* Removed !important */
}

.transition-scale {
    transition: transform 0.5s ease;
}
.transition-scale:hover {
    transform: scale(1.05);
}

/* Added field hover transition */
.transition-hover-field {
    transition: border-color 0.3s ease;
}
.transition-hover-field:hover,
.transition-hover-field:focus-within { /* Target container hover/focus */
    border-color: var(--dark-gold);
}
/* Apply hover effect to the control inside */
.transition-hover-field:hover .form-control,
.transition-hover-field:focus-within .form-control,
.transition-hover-field:hover .form-select,
.transition-hover-field:focus-within .form-select {
    border-color: var(--dark-gold);
}


/* ==========================================================================
   2. Global Component Styles (Default Appearance)
   ========================================================================== */

/* --- Breadcrumb --- */
.breadcrumb {
    border: 1px solid rgba(212, 175, 55, 0.2);
    background-color: white;
    border-radius: 0.25rem;
}

/* --- Alerts --- */
.alert {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 25px; /* Rounded alerts from admin style */
    border: 1px solid transparent;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow from admin style */
}

/* Default Success/Danger (Using non-admin style first) */
.alert-success {
    background-color: #e6f4e6;
    color: #2e7d32;
    border-color: #a5d6a7;
}

.alert-danger {
    background-color: #ffebee;
    color: #c62828;
    border-color: #ef9a9a;
}

/* Cream Alert (From Order History) */
.alert-cream {
    background-color: var(--cream);
    border: 1px solid var(--gold);
    color: var(--dark);
    border-radius: 10px; /* Keep specific radius? Or use default alert radius? */
    padding: 2rem;
    box-shadow: none; /* Override default alert shadow if needed */
}

/* --- Buttons --- */
.btn { /* Add base transition to all buttons */
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--dark);
    border-radius: 25px;
    padding: 10px 25px;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--dark-gold);
    border-color: var(--dark-gold);
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.btn-gold {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--dark);
    border-radius: 30px; /* Default radius */
    padding: 0.75rem 2rem; /* Default padding */
    font-weight: 500; /* Added from admin style */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2); /* Added from admin style */
}
.btn-gold:hover,
.btn-gold:focus {
    background-color: var(--dark-gold);
    border-color: var(--dark-gold);
    color: var(--white);
    transform: translateY(-5px); /* Using preferred hover */
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3); /* Hover shadow from admin style */
}

.btn-outline-gold {
    border: 2px solid var(--gold); /* Border from admin style */
    color: var(--gold);
    background: transparent; /* Background from admin style */
    border-radius: 25px; /* Default radius */
    padding: 0.5rem 1.5rem; /* Default padding */
    font-weight: 500; /* Added from admin style */
}
.btn-outline-gold:hover,
.btn-outline-gold:focus {
    background: var(--gold);
    color: var(--dark);
    transform: translateY(-5px); /* Using preferred hover */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); /* Hover shadow from admin style */
}

/* Custom Danger button (Wishlist) - Circular */
.btn-danger.btn-circle { /* Added .btn-circle for specificity */
    background-color: #dc3545;
    border: none;
    padding: 0.5rem;
    width: 30px;
    height: 30px;
    line-height: 1;
    color: white;
    border-radius: 50%;
    display: inline-flex; /* Helps center icon */
    justify-content: center;
    align-items: center;
}
.btn-danger.btn-circle:hover {
    background-color: #c82333;
}

/* --- Forms --- */
.form-control,
.form-select {
    border-radius: 10px; /* Rounded from admin style */
    border: 1px solid var(--gold);
    background: #fffef7; /* Light cream from first style */
    padding: 0.75rem 1rem;
    transition: all 0.3s ease; /* Shortened transition */
    font-family: 'Roboto', sans-serif;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--dark-gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
    background: var(--white); /* Background change on focus from admin */
    outline: none;
}

.form-label { /* Label style from admin */
    font-family: 'Playfair Display', serif;
    color: var(--dark);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

/* Input group with specific radius */
.input-group .input-group-text {
    border-radius: 30px 0 0 30px; /* Specific radius */
    padding: 0.75rem 1rem;
    border: 1px solid var(--gold);
    border-right: none;
    background-color: #fffef7; /* Match input */
    color: var(--dark); /* Color from admin style */
}
.input-group .form-control.rounded-end-pill {
    border-radius: 0 30px 30px 0; /* Specific radius */
    border-left: none;
}
.input-group .form-control:focus { /* Ensure z-index */
    z-index: 3;
}

/* --- Pagination --- */
.pagination .page-link {
    color: var(--gold);
    border: 1px solid var(--gold);
    transition: all 0.3s ease;
    margin: 0 2px; /* Add slight spacing */
    border-radius: 0.25rem; /* Standard radius */
}
.pagination .page-item.active .page-link {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--dark);
    z-index: 3;
}
.pagination .page-link:hover {
    background-color: var(--dark-gold);
    border-color: var(--dark-gold);
    color: var(--white);
    z-index: 2;
}
.pagination .page-item.disabled .page-link { /* Style disabled */
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* --- Base Card Style --- */
.card {
    border-radius: 15px; /* Rounded from admin */
    border: 1px solid rgba(212, 175, 55, 0.2); /* Border from admin */
    background: var(--white); /* Background from admin */
    transition: all 0.3s ease; /* Transition from admin */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Base shadow */
    overflow: hidden; /* Add overflow hidden */
}
.card.shadow-lg { /* Specific shadow class */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   3. Navbar Section (Frontend User Navbar)
   ========================================================================== */
.sleek-navbar {
    background-color: white;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.sleek-navbar .nav-item {
    margin: 0 1rem;
}
.sleek-nav-links .nav-link {
    color: var(--dark);
    font-size: 1rem;
    font-weight: 400;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
}
.sleek-nav-links .nav-link:hover,
.sleek-nav-links .nav-link:focus {
    color: var(--gold);
}
.sleek-nav-links .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--gold);
    transition: width 0.3s ease, left 0.3s ease;
}
.sleek-nav-links .nav-link:hover::after,
.sleek-nav-links .nav-link:focus::after {
     width: 100%;
     left: 0;
}
.sleek-search {
    max-width: 200px;
    display: flex;
}
.sleek-search-input {
    flex-grow: 1;
    border: 1px solid var(--gold);
    border-right: none;
    border-radius: 20px 0 0 20px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    background-color: var(--cream); /* Override base form background */
}
.sleek-search-input:focus { /* Override base form focus */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
    border-color: var(--dark-gold);
}
.sleek-search-btn {
    border: 1px solid var(--gold);
    border-left: none;
    border-radius: 0 20px 20px 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--gold);
    color: var(--dark);
    transition: background-color 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}
.sleek-search-btn:hover {
    background-color: var(--dark-gold);
    color: white;
}
.sleek-icon-btn {
    padding: 0.5rem;
    color: var(--dark);
    background: none;
    border: none;
    transition: color 0.3s ease;
}
.sleek-icon-btn:hover {
    color: var(--gold);
}
.sleek-icon-btn .badge {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
    background-color: var(--dark);
    color: var(--cream);
}

@media (max-width: 991px) {
    .sleek-nav-links {
        text-align: center;
        padding: 1rem 0;
        width: 100%;
    }
    .sleek-nav-links .nav-item {
        margin: 0.5rem 0;
    }
    .sleek-search {
        max-width: 90%;
        margin: 1rem auto;
    }
}

/* ==========================================================================
   4. Page Specific Sections (Frontend User Pages)
   ========================================================================== */

/* --- Product List Page --- */
.product-list-page {
    padding: 3rem 0; /* Adjusted from py-5 for consistency */
}

.filters-sidebar {
    background: var(--white);
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure all cards stretch to the same height within their row */
    background: var(--white);
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.product-img {
    position: relative;
    overflow: hidden;
    height: 250px; /* Fixed height for all images */
    width: 100%; /* Ensure it takes full width of the card */
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* CHANGE THIS LINE */
    display: block;
}

.product-content {
    padding: 1rem;
    flex-grow: 1; /* Allow content to stretch and fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space evenly */
}

.product-title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem; /* Consistent title size */
    line-height: 1.2; /* Prevent text overflow issues */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Keep title on one line */
}

.product-meta {
    margin-bottom: 1rem;
}

.product-price {
    font-size: 1.1rem;
}

/* Ensure row consistency */
.row.g-4 {
    display: flex;
    flex-wrap: wrap;
}

.row.g-4 > .col-lg-4.col-md-6 {
    display: flex; /* Make each column a flex container */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-img {
        height: 200px; /* Slightly smaller on tablets */
    }
}

@media (max-width: 576px) {
    .product-img {
        height: 180px; /* Smaller on mobile */
    }
    .product-title {
        font-size: 1rem; /* Adjust title size for smaller screens */
    }
}

/* --- Order History & Order Detail --- */
.order-history-card,
.order-detail-card {
    /* Inherits base .card style */
}
.order-item {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    transition: background-color 0.3s ease;
}
.order-item:last-child { border-bottom: none; }
.order-item:hover { background-color: var(--cream); }
.order-details { flex: 1; }
.order-link {
    font-size: 1.1rem;
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s ease;
}
.order-link:hover { color: var(--gold); }
.order-status .badge {
    font-size: 0.85rem;
    padding: 0.4em 0.8em;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.order-detail-page { min-height: 80vh; padding: 3rem 0; }
.order-detail-card .list-group-item {
    border: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.order-detail-card .list-group-item:last-child { border-bottom: none; }
.order-info .badge {
    font-size: 0.9rem;
    padding: 0.5em 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Register & Login --- */
.register-section,
.login-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}
.login-section { position: relative; overflow: hidden; }
.login-card,
.register-card {
    padding: 2rem; /* Override base card padding? */
    /* Inherits base .card style */
    /* Add specific overrides if needed */
}

/* --- About Page --- */
.about-page { min-height: 100vh; padding: 3rem 0; }
.about-image { position: relative; border-radius: 15px; overflow: hidden; }
.about-image img { display: block; width: 100%; }
.image-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease;
    display: flex; justify-content: center; align-items: center;
}
.about-image:hover .image-overlay { opacity: 1; }
.about-image:hover .transition-scale { transform: scale(1.05); }
.about-info { padding: 2rem; /* Inherits base .card style */ }
.team-card {
    animation-delay: calc(var(--review-index) * 0.2s);
    overflow: hidden;
    /* Inherits base .card style */
}

/* --- Contact Page --- */
.contact-page { min-height: 100vh; padding: 3rem 0; }
.contact-info,
.contact-form { padding: 2rem; /* Inherits base .card style */ }
.social-links a { font-size: 1.5rem; color: var(--dark); margin: 0 0.5rem; }
/* Use .transition-hover-text utility class */

/* --- Wishlist Page --- */
.wishlist-page { min-height: 100vh; padding: 3rem 0; }
.wishlist-page .product-card {
    /* Inherits base .card style */
    display: flex; flex-direction: column; height: 100%;
}
.wishlist-page .product-card .product-img { position: relative; overflow: hidden; }
.wishlist-page .product-card .product-img img { display: block; width: 100%; }
.wishlist-page .product-card .product-content {
    padding: 1rem; flex-grow: 1; display: flex;
    flex-direction: column; justify-content: space-between;
}
/* Specific smaller button styles using context + base button classes */
.wishlist-page .btn-gold,
.wishlist-page .btn-outline-gold {
    border-radius: 25px; /* Override base btn-gold radius if needed */
    padding: 0.5rem 1.5rem; /* Override base padding */
}

/* --- Error Pages --- */
.error-page {
    position: relative; overflow: hidden; padding: 3rem 0;
    display: flex; align-items: center; min-height: 70vh;
}
.error-content {
    text-align: center; padding: 2rem;
    /* Inherits base .card style, maybe override radius */
    border-radius: 20px;
}

/* ==========================================================================
   5. Admin Dashboard Section
   ========================================================================== */

.admin-dashboard {
    min-height: calc(100vh - 60px); /* Adjust if top navbar height differs */
    /* No base padding here, applied by .content */
}

/* --- Admin Layout --- */
.sidebar {
    position: fixed; top: 0; left: 0; height: 100%; width: 250px;
    background: var(--dark); color: var(--cream); padding-top: 20px;
    transition: all 0.3s ease; z-index: 1000;
}
.sidebar.collapsed { width: 70px; }
.sidebar .logo {
    text-align: center; /* Updated: Removed font-family, font-size, color, text-shadow since it's now an image */
    margin-bottom: 2rem;
}
.sidebar.collapsed .logo,
.sidebar.collapsed .nav-link span { display: none; }
.sidebar .nav-link {
    color: var(--cream); padding: 15px 20px; transition: all 0.3s ease;
    display: flex; align-items: center; text-decoration: none; /* Add */
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: var(--gold); background: rgba(212, 175, 55, 0.1);
}
.sidebar .nav-link i { margin-right: 10px; width: 20px; text-align: center; } /* Ensure icon alignment */
.sidebar.collapsed .nav-link i { margin-right: 0; } /* Remove margin when collapsed */

/* Logo Image Styling */
.sidebar .logo-img {
    max-width: 200px; /* Adjust based on your image size */
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image */
}

/* Ensure the logo image is hidden when sidebar is collapsed */
.sidebar.collapsed .logo-img {
    display: none;
}

.navbar-top {
    background: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 20px; margin-left: 250px; transition: all 0.3s ease;
    position: sticky; top: 0; z-index: 999; /* Make top navbar sticky */
}
.navbar-top.expanded { margin-left: 70px; }
.sidebar-toggle {
    cursor: pointer; font-size: 1.2rem; color: var(--dark);
    transition: color 0.3s ease; background: none; border: none; /* Make it look like a button */
}
.sidebar-toggle:hover { color: var(--gold); }

.content {
    margin-left: 250px; padding: 20px; transition: all 0.3s ease;
    padding-top: 80px; /* Add padding-top to account for sticky navbar */
}
.content.expanded { margin-left: 70px; }

/* --- Admin Component Overrides --- */
.admin-dashboard .card {
    /* Inherits base .card style, add admin specific overrides if needed */
    margin-bottom: 1.5rem; /* Add spacing between cards */
}

.admin-dashboard .table th {
    font-family: 'Playfair Display', serif;
    color: var(--dark);
    border-bottom: 2px solid var(--gold);
}
.admin-dashboard .table td {
    vertical-align: middle;
}
.admin-dashboard .table-hover tbody tr:hover {
    background-color: rgba(212, 175, 55, 0.1); /* Gold tint hover */
}

/* Use .btn-sm in HTML for smaller admin buttons */
.admin-dashboard .btn-sm {
     padding: 0.5rem 1.5rem;
     /* If specific radius/font-weight needed for admin small buttons */
     /* border-radius: 25px; */
     /* font-weight: 500; */
}

/* Admin Form Overrides if different from base */
.admin-dashboard .form-control,
.admin-dashboard .form-select {
     /* Inherits base form style, uses border-radius: 10px */
     /* background: var(--cream); */ /* Use admin-specific background? */
}
.admin-dashboard .form-label {
     /* Inherits base label style */
}

/* Admin Alert Overrides */
.admin-dashboard .alert-success {
    background-color: rgba(212, 175, 55, 0.1); /* Gold tint */
    border-color: var(--gold);
    color: var(--dark);
}
.admin-dashboard .alert-danger {
    background-color: rgba(255, 0, 0, 0.1); /* Light red */
    border-color: #dc3545;
    color: #721c24;
}
.admin-dashboard .alert {
     /* Inherits base alert style (rounded, shadow) */
}

/* Admin Pagination Overrides if needed */
.admin-dashboard .pagination .page-link {
     /* Inherits base pagination style */
}

/* Chart specific */
.admin-dashboard canvas { /* Target canvas within admin */
    max-width: 100%;
    margin-top: 1rem; /* Add some spacing */
}

/* ==========================================================================
   6. Responsive Adjustments (Consolidated)
   ========================================================================== */

/* Responsive for Sleek Navbar already included in Navbar section */

/* Responsive for Admin Dashboard */
@media (max-width: 768px) {
    .sidebar { width: 70px; }
    .sidebar .logo, .sidebar .nav-link span { display: none; }
    .content, .navbar-top { margin-left: 70px; }

    .admin-dashboard .card { padding: 1.5rem 1rem; }
    .admin-dashboard .table { font-size: 0.9rem; }
    .admin-dashboard .btn-sm { /* Ensure small buttons are adjusted */
        padding: 0.4rem 1rem; font-size: 0.9rem;
    }
    .admin-dashboard .form-control, .admin-dashboard .form-select { font-size: 0.9rem; }

    /* Stack columns in cards on medium screens */
    .admin-dashboard .card .row.g-3 > [class*="col-md-"],
    .admin-dashboard .card .row.g-4 > [class*="col-md-"] {
        width: 100%;
        flex: 0 0 auto; /* Prevent flex-grow issues */
        margin-bottom: 1rem; /* Add spacing when stacked */
    }
     .admin-dashboard .card .row.g-3 > [class*="col-md-"]:last-child,
     .admin-dashboard .card .row.g-4 > [class*="col-md-"]:last-child {
         margin-bottom: 0;
     }
}

@media (max-width: 576px) {
    /* Home Page: Reduce hero heading and caption size */
    .carousel-caption h2.display-3 {
        font-size: 2rem;
        line-height: 1.2;
    }
    .carousel-caption p.lead {
        font-size: 1rem;
        padding-right: 0;
        padding-left: 0;
    }
    .carousel-caption {
        padding: 0.5rem 0.5rem;
    }
    /* Home Page: Reduce section paddings */
    .hero-section, .featured-products, .categories-section, .features-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    /* Product/category card titles */
    .product-title, .category-title {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* About Page: Reduce paddings and font sizes */
    .about-info {
        padding: 1.2rem !important;
    }
    .about-page h1, .about-info h1 {
        font-size: 1.5rem !important;
    }
    .about-info p {
        font-size: 0.98rem !important;
    }
    .btn-gold, .btn-primary {
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    /* Login Page: Card and image scaling */
    .login-card {
        width: 100% !important;
        max-width: 400px;
        margin: 0 auto;
    }
    .login-header-img {
        height: 120px !important;
    }
    /* Admin Dashboard: Stack filter form fields */
    .admin-dashboard .card form.row.g-3 > .col-md-4 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    .admin-dashboard .table {
        font-size: 0.85rem;
    }
    .admin-dashboard .table th:nth-child(5),
    .admin-dashboard .table td:nth-child(5) {
        display: none;
    }
}

/* Accessibility: Improved color contrast for gold on white/cream */
.btn-gold, .btn-primary, .btn-outline-gold, .btn {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.btn-gold, .btn-primary {
    color: #222 !important;
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}
.btn-outline-gold {
    color: var(--gold) !important;
    border-color: var(--gold) !important;
    background: #fff !important;
}
.btn-outline-gold:hover, .btn-outline-gold:focus {
    background: var(--gold) !important;
    color: #222 !important;
}
.text-gold {
    color: #B8860B !important;
}
/* Accessibility: Focus styles */
.btn:focus, .nav-link:focus, .form-control:focus, .form-select:focus, .sleek-icon-btn:focus, .dropdown-item:focus {
    outline: 2px solid #222 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--gold), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 2;
}

/* ==========================================================================
   7. Mobile Responsive Phone Number Display
   ========================================================================== */

/* Announcement bar responsive phone display */
@media (max-width: 767px) {
    .announcement-bar .col-md-4.d-none.d-md-flex {
        display: flex !important;
        justify-content: center;
        font-size: 0.85rem;
    }
    .announcement-bar .col-md-4.text-center {
        font-size: 0.8rem;
        padding: 0.25rem 0;
    }
    .announcement-bar .col-md-4.d-none.d-md-block {
        display: block !important;
        text-align: center;
        font-size: 0.85rem;
    }
}

@media (max-width: 575px) {
    .announcement-bar {
        padding: 0.5rem 0 !important;
    }
    .announcement-bar .row {
        flex-direction: column;
        gap: 0.25rem;
    }
    .announcement-bar .col-md-4 {
        width: 100%;
        text-align: center;
        font-size: 0.8rem;
    }
}

/* Contact page phone number responsive display */
@media (max-width: 767px) {
    .contact-info li {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    .contact-info li i {
        margin-right: 0 !important;
        margin-bottom: 0.25rem;
    }
    .contact-info .text-dark {
        word-break: break-word;
        line-height: 1.4;
    }
}