/* ===================================================================
   RYTCHEF INTERNATIONAL DESIGN SYSTEM (v5.9.5 - ULTIMATE)
   Features: #050505 Ambient Base, Internal Glow Physics, Deep Glass
   =================================================================== */

/* --- 1. GLOBAL BASE & ATMOSPHERE --- */
body {
    background-color: #050505 !important;
    /* Deepest Base */
    color: #fff !important;
}

#page {
    position: relative;
    z-index: 1;
    /* Sit above ambient bg */
    background: transparent !important;
}

/* The Ambient Atmosphere (Injected via Header) */
.ambient-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(66, 133, 244, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(220, 38, 38, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

/* --- 2. THE ULTIMATE GLOW ANIMATIONS --- */
@keyframes ultimateGradientMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* --- 3. GLOW BUTTONS & PILLS (With Internal Physics) --- */
.ultimate-glow-btn,
.navbar-cta-btn,
.cta-buttons a,
.cta-btn-primary,
.cta-btn-secondary {
    position: relative;
    z-index: 10;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 36px !important;
    font-size: 16px;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(145deg, #1a1a1a, #000) !important;
    border-radius: 9999px !important;
    cursor: pointer;
    user-select: none;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    margin: 5px;

    /* INTERNAL GLOW (The Missing Piece) */
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        inset 0 -4px 10px rgba(0, 0, 0, 0.8),
        0 10px 20px rgba(0, 0, 0, 0.5) !important;

    transition: transform 0.3s ease;
}

/* Animated Border */
.ultimate-glow-btn::before,
.navbar-cta-btn::before,
.cta-buttons a::before,
.cta-btn-primary::before,
.cta-btn-secondary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    padding: 2px;
    background: linear-gradient(90deg, #FF0080, #FF8C00, #40E0D0, #7B68EE, #FF0080);
    background-size: 300% 100%;
    animation: ultimateGradientMove 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

/* External Blur Glow */
.ultimate-glow-btn::after,
.cta-buttons a::after {
    content: '';
    position: absolute;
    inset: 5px;
    z-index: -2;
    background: linear-gradient(90deg, #FF0080, #FF8C00, #40E0D0, #7B68EE, #FF0080);
    background-size: 300% 100%;
    border-radius: 9999px;
    filter: blur(20px);
    opacity: 0.5;
    animation: ultimateGradientMove 4s linear infinite;
    transition: opacity 0.3s ease;
}

.ultimate-glow-btn:hover,
.cta-buttons a:hover {
    transform: translateY(-3px) scale(1.02);
}

.ultimate-glow-btn:hover::after,
.cta-buttons a:hover::after {
    opacity: 0.8;
    filter: blur(30px);
}

/* --- 4. SECTION TYPOGRAPHY --- */
.section-title,
.category-title,
.cta-title {
    color: #fff !important;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.section-subtitle,
.cta-subtitle {
    color: #aaa !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.highlight {
    color: #FFD100 !important;
}

/* Section Badge Glow */
.section-badge {
    display: inline-block;
    background: rgba(255, 209, 0, 0.1) !important;
    color: #FFD100 !important;
    border: 1px solid rgba(255, 209, 0, 0.3) !important;
    box-shadow: 0 0 20px rgba(255, 209, 0, 0.15) !important;
    border-radius: 50px;
    padding: 8px 20px !important;
}

/* --- 5. MENU CARDS (Deep Glass Physics) --- */
.premium-menu-section,
.menu-section {
    background: transparent !important;
    /* Let ambient bg show through */
}

.menu-card {
    background: #111 !important;
    /* Solid Dark Base for Depth */
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: none !important;
    /* Using mask border instead */

    /* INTERNAL GLOW (The Key to the Look) */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        /* Rim Light */
        0 20px 40px rgba(0, 0, 0, 0.6) !important;
    /* Deep Drop Shadow */
}

/* Default Subtle Border (Mask) */
.menu-card::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Just border */
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(90deg, #333, #444, #333);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    display: block !important;
}

/* Hover: Ultimate Border */
.menu-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(90deg, #FF0080, #FF8C00, #40E0D0, #7B68EE, #FF0080);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
    animation: ultimateGradientMove 4s linear infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-card:hover {
    transform: translateY(-10px) !important;
}

.menu-card:hover::after {
    opacity: 1;
}

/* Hide old elements */
.menu-card .order-btn,
.menu-card .menu-footer a {
    display: none !important;
}

/* Content Styling */
.menu-image {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 70%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-card .menu-name {
    color: #fff !important;
    font-weight: 600;
    font-size: 1.25rem !important;
}

.menu-card .menu-description {
    color: #999 !important;
    font-size: 0.95rem !important;
}

.menu-card .menu-type-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- 6. FOOTER --- */
.site-footer {
    background: #050505 !important;
}

.site-footer::before {
    /* Ultimate Top Line */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px !important;
    background: linear-gradient(90deg, #FF0080, #FF8C00, #40E0D0, #7B68EE, #FF0080) !important;
    background-size: 300% 100% !important;
    animation: ultimateGradientMove 4s linear infinite;
}

/* --- 7. RESPONSIVE --- */
@media (max-width: 991px) {
    .hidden-mobile {
        display: none !important;
    }
}