/* MALAIKA MANDI PREMIUM NAVIGATION CSS */

:root {
    --nav-text-color: #e5dac9;
    --nav-gold: #cda250;
    --nav-gold-gradient: linear-gradient(135deg, #ffe5b3 0%, #cda250 50%, #906c27 100%);
    --nav-bg-dark: rgba(11, 18, 11, 0.95);
    --nav-glass-bg: rgba(15, 13, 11, 0.65);
    --nav-glass-border: rgba(205, 162, 80, 0.15);
    --nav-glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Header Outer Wrapper */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 30px 4%;
    transition: padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none; /* Let clicks pass through outside the inner container */
}
.logo-header{
    height: 45px;
}

/* Inner Navigation Container */
.nav-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 35px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto; /* Re-enable pointer events for contents */
}

/* Scrolled Nav State - Floating Glass Capsule */
.nav-scrolled .main-header {
    padding: 15px 4%;
}

.nav-scrolled .nav-container {
    max-width: 1100px;
    padding: 10px 30px;
    border-radius: 50px;
    background: var(--nav-glass-bg);
    border-color: var(--nav-glass-border);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: var(--nav-glass-shadow);
}

/* Logo Design */
.nav-logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.1;
    z-index: 1001;
    transition: transform 0.3s ease;
}

.nav-logo:hover {
    transform: scale(1.02);
}

.logo-text {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #F4ECE1;
    transition: color 0.3s ease;
}

.logo-subtext {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 5px;
    margin-top: 1px;
    background: var(--nav-gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Desktop Links */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 35px;
}

.nav-link {
    font-family: 'Manrope', sans-serif;
    color: var(--nav-text-color);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    padding: 8px 0;
    opacity: 0.85;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.nav-link:hover, 
.nav-link.active {
    opacity: 1;
    color: var(--nav-gold);
}

/* Link Hover Underline Animation */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: var(--nav-gold-gradient);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
    left: 0;
}

/* Actions Group */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-cta {
    padding: 10px 22px !important;
    font-size: 0.7rem !important;
    white-space: nowrap;
    text-decoration: none;
}

/* Hamburger Toggle Button */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1005;
    outline: none;
}

.hamburger-btn .bar {
    width: 100%;
    height: 1.5px;
    background-color: var(--nav-text-color);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 1px;
}

.hamburger-btn:hover .bar {
    background-color: var(--nav-gold);
}

/* Hamburger active transformation to 'X' */
.hamburger-btn.active .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
    background-color: var(--nav-gold);
}

.hamburger-btn.active .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-btn.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background-color: var(--nav-gold);
}


/* --- MOBILE FULLSCREEN OVERLAY MENU --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--nav-bg-dark);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 100px 30px 50px 30px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    /* Moorish background trellis visual */
    background-image: 
        radial-gradient(circle at center, rgba(26, 43, 26, 0.15) 0%, rgba(5, 8, 5, 0.98) 80%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 0 C75 15, 75 30, 60 45 C45 30, 45 15, 60 0 M60 45 C70 55, 70 65, 60 75 C50 65, 50 55, 60 45 M60 75 C75 90, 75 105, 60 120 C45 105, 45 90, 60 75 M0 60 C15 75, 30 75, 45 60 C30 45, 15 45, 0 60 M75 60 C90 75, 105 75, 120 60 C105 45, 90 45, 75 60' fill='%23cda250' fill-opacity='0.02' stroke='%23cda250' stroke-opacity='0.015' stroke-width='1'/%3E%3C/svg%3E");
    background-size: cover;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: auto 0;
}

.mobile-nav-link {
    font-family: 'Cinzel', serif;
    color: var(--nav-text-color);
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s ease;
}

/* Stagger transition delay for open overlay animation */
.mobile-menu-overlay.active .mobile-nav-link {
    opacity: 0.9;
    transform: translateY(0);
}

.mobile-menu-overlay.active .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(4) { transition-delay: 0.4s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(5) { transition-delay: 0.5s; }

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: var(--nav-gold);
    opacity: 1 !important;
}

/* Mobile Menu Footer metadata */
.mobile-menu-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgba(229, 218, 201, 0.1);
    padding-top: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.mobile-menu-overlay.active .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mobile-menu-contacts .contact-link {
    color: var(--nav-text-color);
    font-size: 0.85rem;
    text-decoration: none;
    letter-spacing: 1.5px;
    opacity: 0.7;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-contacts .contact-link:hover {
    color: var(--nav-gold);
    opacity: 1;
}

.mobile-menu-socials {
    display: flex;
    gap: 25px;
}

.mobile-menu-socials .social-link {
    color: var(--nav-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-socials .social-link:hover {
    opacity: 0.8;
}


/* --- RESPONSIVENESS AND COLLAPSE OVERRIDES --- */
@media (max-width: 991px) {
    .main-header {
        padding: 20px 5%;
    }
    
    .nav-scrolled .main-header {
        padding: 10px 5%;
    }
    
    .desktop-nav {
        display: none; /* Hide desktop links */
    }
    
    .hamburger-btn {
        display: flex; /* Show hamburger toggle */
    }
    
    .logo-text {
        font-size: 1.25rem;
    }
    
    .logo-subtext {
        font-size: 0.7rem;
    }
    
    .nav-container {
        padding: 10px 20px;
    }
    
    .nav-scrolled .nav-container {
        border-radius: 40px;
        padding: 8px 20px;
    }
    
    .nav-cta {
        display: none; /* Hide order CTA in main bar on tablet/mobile (available in overlay/footer) */
    }
}

/* Arabian Premium Scroll to Top Button */
.scroll-to-top-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(13, 6, 3, 0.23); 
    border: 1px solid rgba(205, 162, 80, 0.22); 
    color: var(--nav-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(25px) scale(0.9);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
    z-index: 999;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    outline: none;
    padding: 0;
}

.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-btn-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.scroll-btn-svg .outer-circle {
    fill: none;
    stroke: rgba(205, 162, 80, 0.15);
    stroke-width: 1;
    transition: stroke 0.4s ease;
}

.scroll-btn-svg .inner-circle {
    fill: none;
    stroke: rgba(205, 162, 80, 0.12);
    stroke-width: 0.75;
    transition: stroke 0.4s ease;
}

.scroll-btn-svg .star-square {
    fill: none;
    stroke: rgba(205, 162, 80, 0.12);
    stroke-width: 0.75;
    transform-origin: center;
    transition: stroke 0.4s ease;
}

.scroll-btn-svg .star-pattern-group {
    transform-origin: center;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-btn-svg .chevron-path {
    stroke: var(--nav-gold);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), stroke 0.4s ease;
}

/* Hover States */
.scroll-to-top-btn:hover {
    background-color: rgba(20, 10, 6, 0.96);
    border-color: rgba(205, 162, 80, 0.65);
    box-shadow: 0 15px 35px rgba(205, 162, 80, 0.25), 0 0 15px rgba(205, 162, 80, 0.1);
    transform: translateY(-3px) scale(1.02);
}

.scroll-to-top-btn:hover .outer-circle {
    stroke: rgba(205, 162, 80, 0.35);
}

.scroll-to-top-btn:hover .inner-circle {
    stroke: rgba(205, 162, 80, 0.25);
}

.scroll-to-top-btn:hover .star-square {
    stroke: rgba(205, 162, 80, 0.35);
}

.scroll-to-top-btn:hover .star-pattern-group {
    transform: rotate(45deg);
}

.scroll-to-top-btn:hover .chevron-path {
    transform: translateY(-4px);
    stroke: #ffffff;
}

/* Active Press State */
.scroll-to-top-btn:active {
    transform: translateY(-1px) scale(0.96);
    background-color: rgba(13, 6, 3, 1);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .scroll-to-top-btn {
        bottom: 25px;
        right: 25px;
        width: 48px;
        height: 48px;
    }
}

/* --- PREMIUM FOOTER SECTION --- */
#premium-footer {
    background-color: var(--footer-dark);
    position: relative;
    padding-top: 200px;
    /* margin-top: 140px; */
    z-index: 2;
    background-image: 
        radial-gradient(circle at center, rgba(30, 20, 15, 0.2) 0%, rgba(7, 5, 4, 1) 90%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0 C48 10, 48 20, 40 30 C32 20, 32 10, 40 0 M40 30 C46 36, 46 44, 40 50 C34 44, 34 36, 40 30 M40 50 C48 60, 48 70, 40 80 C32 70, 32 60, 40 50 M0 40 C10 48, 20 48, 30 40 C20 32, 10 32, 0 40 M50 40 C60 48, 70 48, 80 40 C70 32, 60 32, 50 40' fill='%23cda250' fill-opacity='0.012' stroke='%23cda250' stroke-opacity='0.008' stroke-width='0.75'/%3E%3C/svg%3E");
}

/* Floating Overlap CTA Card with Asymmetric Layout */
.footer-cta-container {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 10;
}

.footer-cta-card {
    background: linear-gradient(135deg, rgba(26, 18, 13, 0.82) 0%, rgba(13, 9, 6, 0.96) 100%);
    backdrop-filter: blur(25px) saturate(110%);
    -webkit-backdrop-filter: blur(25px) saturate(110%);
    border: 1px solid rgba(205, 162, 80, 0.22);
    border-radius: 24px;
    padding: 60px 50px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
}

@media (min-width: 992px) {
    .footer-cta-card {
        grid-template-columns: 1.8fr 1fr;
        text-align: left;
        align-items: center;
        gap: 60px;
        padding: 60px 80px;
    }
}

.footer-cta-content {
    max-width: 720px;
}

.footer-cta-card h2 {
    font-size: 2.4rem;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.footer-cta-card p {
    color: #F4ECE1;
    font-size: 1.05rem;
    opacity: 0.85;
    line-height: 1.6;
    margin: 0;
}

.footer-cta-action {
    display: flex;
    justify-content: center;
}

@media (min-width: 992px) {
    .footer-cta-action {
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .footer-cta-card h2{
        font-size: 1.7rem;
    }
    .footer-cta-card p{
        font-size: 0.87rem;
    }
}
/* Premium WhatsApp CTA Button */
.order-btn-premium {
    background: var(--gold-gradient);
    color: #100a06;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 16px 36px;
    border-radius: 50px;
    border: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px rgba(205, 162, 80, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.order-btn-premium::before {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: all 0.75s ease;
}

.order-btn-premium:hover::before {
    left: 150%;
}

.order-btn-premium:hover {
    color: #100a06;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(205, 162, 80, 0.35);
}

.order-btn-premium:active {
    transform: scale(0.98) translateY(0);
}

/* Asymmetric Main Footer Grid Layout */
.footer-main-content {
    padding-top: 80px;
    padding-bottom: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 50px;
    }
}

@media (min-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 2.2fr 1.8fr;
        gap: 40px;
    }
}

/* Quick Navigation Links */
.footer-links-col {
    display: flex;
    flex-direction: column;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-nav-link {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: #b5a79e;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
}

.footer-nav-link:hover {
    color: var(--gold-primary);
    transform: translateX(4px);
}

/* Brand & Narrative Column */
.footer-brand-col {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    max-width: 160px;
    height: auto;
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(205, 162, 80, 0.2));
}

.footer-brand-text {
    color: #b5a79e;
    font-size: 0.9rem;
    line-height: 1.75;
    margin-top: 20px;
    margin-bottom: 25px;
    max-width: 40ch;
}

/* Social links under brand */
.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.social-link-item {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #8c7e75;
    text-decoration: none;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-link-item svg {
    color: var(--gold-primary);
    opacity: 0.65;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.social-link-item:hover {
    color: var(--gold-light);
}

.social-link-item:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

.social-link-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 1.5px;
    background: var(--gold-gradient);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-link-item:hover::after {
    width: 100%;
    left: 0;
}

/* Locations Column (Sub-grid side-by-side) */
.footer-heading {
    font-size: 1.3rem;
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 40px; height: 1.5px;
    background: var(--gold-primary);
}

.locations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 576px) {
    .locations-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (min-width: 1200px) {
    .locations-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.location-card {
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 10px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.location-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(205, 162, 80, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.location-badge-premium {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gold-primary);
    border: 1px solid rgba(205, 162, 80, 0.25);
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(205, 162, 80, 0.05);
    display: inline-block;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.location-title {
    color: #F4ECE1;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.location-text {
    color: #9e9188;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 5px;
}

.direction-link-premium {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--brand-orange);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.direction-link-premium svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.direction-link-premium:hover {
    color: var(--gold-primary);
}

.direction-link-premium:hover svg {
    transform: translateX(6px);
}

/* Hours & Contact Column */
.hours-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.hours-item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    padding: 12px 0;
    font-size: 0.85rem;
}

.hours-day {
    color: #e5dac9;
    font-weight: 500;
}

.hours-time {
    color: #b5a79e;
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-item-link {
    color: #b5a79e;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.contact-item-link svg {
    color: var(--gold-primary);
    opacity: 0.8;
}

.contact-item-link:hover {
    color: var(--gold-primary);
    transform: translateX(3px);
}

/* Sub Footer Styling */
.sub-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.footer-copyright {
    color: #615650;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
}

.footer-credits {
    font-family: 'Cinzel', serif;
    color: var(--gold-primary);
    opacity: 0.65;
    font-size: 0.75rem;
    letter-spacing: 2px;
}

/* Mobile Adjustments Override */
@media (max-width: 992px) {
    #premium-footer {
        padding-top: 180px;
        margin-top: 120px;
    }
    .footer-cta-container {
        top: -120px;
    }
    .footer-cta-card {
        padding: 40px 30px;
    }
}

/* ============================================================
   PREMIUM CUSTOM SCROLLBAR
   The native viewport scrollbar is hidden and replaced by a
   JS-driven overlay thumb (.premium-scrollbar in components.js)
   that FLOATS over the content with a fully transparent track —
   so no opaque gutter shows on any browser. Inner scroll areas
   keep a slim gold scrollbar with a transparent track.
   ============================================================ */

/* Hide the native viewport scrollbar (replaced by the overlay below) */
html {
    scrollbar-width: none;            /* Firefox */
}
html::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Inner scrollable elements: slim gold scrollbar over a transparent track */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f6e6cd 0%, #cda250 52%, #96702d 100%);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 8px;
}

/* Floating overlay scrollbar for the main page */
.premium-scrollbar {
    position: fixed;
    top: 0;
    right: 2px;
    bottom: 0;
    width: 10px;
    z-index: 99990;
    background: transparent;          /* fully transparent track */
    pointer-events: none;             /* only the thumb is interactive */
    opacity: 1;
    transition: opacity 0.35s ease;
}
.premium-scrollbar.is-hidden {
    opacity: 0;
}
.premium-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 50%;
    width: 5px;
    margin-left: -2.5px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f6e6cd 0%, #cda250 52%, #96702d 100%);
    box-shadow: 0 0 6px rgba(205, 162, 80, 0.35);
    pointer-events: auto;
    cursor: grab;
    will-change: transform;
    transition: width 0.18s ease, margin-left 0.18s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.premium-scrollbar-thumb:hover,
.premium-scrollbar.dragging .premium-scrollbar-thumb {
    width: 8px;
    margin-left: -4px;
    box-shadow: 0 0 12px rgba(205, 162, 80, 0.6);
}
.premium-scrollbar.dragging .premium-scrollbar-thumb {
    cursor: grabbing;
}

/* Touch devices use their own overlay scrollbars — hide the custom one */
@media (hover: none) and (pointer: coarse) {
    .premium-scrollbar { display: none; }
}