/*
========================================
DESIGN TOKENS & CSS VARIABLES
========================================
*/
:root {
/* Color Palette */
--bg-dark-blue-start: #0A192F;
--bg-dark-blue-end: #102A4C;
--card-bg: rgba(17, 34, 64, 0.75);
--text-lightest: #FFFFFF;                 /* #E6F1FF */
--text-light: #FFFFFF;                    /* #CCD6F6 */
--text-slate: #8892B0;                    /* #8892B0 */
--border-slate: #233554;
--accent-gold: #FFD700;
--accent-gold-darker: #CCA100;
--accent-cyan: #64FFDA;
--accent-cyan-darker: #1e9676; /* From reference for buttons */
--text-blue-highlight: #88CBFF;
--danger-red: #ff6b6b;
--success-green: #37b24d;

/* Liquid Glass Colors */
--glass-highlight: rgba(255, 255, 255, 0.1);
--glass-refraction: rgba(255, 255, 255, 0.2);
--glass-edge-refraction: rgba(255, 255, 255, 0.2);
--gold-glow: rgba(255, 215, 0, 0.2);
--gold-glow-soft: rgba(255, 215, 0, 0.2);
--gold-glow-hard: rgba(255, 215, 0, 0.5);
--soft-gold-shadow: 0 8px 32px 0 var(--gold-glow);

/* Typography */
--font-sans: 'Inter', sans-serif;
--fz-xxl: 2rem;
--fz-xl: 1.75rem;
--fz-lg: 1.25rem;
--fz-md: 1rem;
--fz-sm: 0.875rem;
--fz-xs: 0.75rem;

/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;

/* Safe Area Insets */
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);

/* Other */
--border-radius: 12px;
--transition-speed: 0.3s;
--transition-speed-fast: 0.2s;
--transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/*
========================================
GLOBAL STYLES & RESETS
========================================
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark-blue-start);
    background-image: radial-gradient(circle at top, var(--bg-dark-blue-end), var(--bg-dark-blue-start));
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    
    font-family: var(--font-sans);
    color: var(--text-slate);
    line-height: 1.6;
    overflow: hidden; /* Prevent body scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    width: 100vw;
}

body.menu-open,
body.selection-panel-open {
    overflow: hidden;
}


#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.9;
}

.app-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.app-container.visible {
    visibility: visible;
    opacity: 1;
}

/* Accessibility Focus Ring */
:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Reduced Motion Fallbacks */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
========================================
SPLASH SCREEN
========================================
*/
#splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image:
        radial-gradient(ellipse at center, rgba(10, 25, 47, 0.8) 0%, rgba(10, 25, 47, 1) 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%23233554' fill-opacity='0.4'%3E%3Ccircle cx='50' cy='50' r='1'/%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='90' cy='90' r='1'/%3E%3Ccircle cx='10' cy='90' r='1'/%3E%3Ccircle cx='90' cy='10' r='1'/%3E%3Ccircle cx='30' cy='70' r='1'/%3E%3Ccircle cx='70' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");
    transition: opacity 0.5s ease, visibility 0.5s ease;
    clip-path: circle(150% at 50% 50%);
}
#splash.revealing {
    transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 1s ease, visibility 1s ease;
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
    visibility: hidden;
}

#logoButton {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--bg-dark-blue-end);
    border: none;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
        inset 0 0 15px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(10, 25, 47, 0.7),
        0 0 8px var(--accent-gold),
        0 0 25px rgba(255, 215, 0, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.1),
        inset 0 -2px 2px rgba(0, 0, 0, 0.5);
    transition: transform 1s var(--transition-easing), filter 0.3s ease;
    transform-style: preserve-3d;
}
#logoButton:hover { filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); }

#logoButton img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

#logoButton .logo-fallback {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
}
.logo-fallback .tick {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px;
    height: 10%;
    background-color: var(--accent-gold);
    transform-origin: top center;
}

#splash.revealing #logoButton {
    animation: spinAndScale 1.2s var(--transition-easing) forwards;
}
@keyframes spinAndScale {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(15) rotate(360deg); }
}

/*
========================================
UNIFIED HEADER BRANDING STYLES
========================================
*/
.page-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}
.branding-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-direction: column;
}
.page-header .logo {
    max-width: 80px;
    flex-shrink: 0;
}
.branding-text-wrapper {
    text-align: center;
}
.page-header h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    position: relative;
    padding-bottom: var(--spacing-sm);
    margin-bottom: 0;
    display: inline-block;
}
.title-gradient {
    background: linear-gradient(90deg, #E0E1E2 20%, var(--text-blue-highlight) 70%, #E0E1E2);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
}
/* Updated Title Underline to Gradient Fade (Golden Accent Line) */
.page-header h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 1px;
    background-image: linear-gradient( to right, transparent, var(--accent-gold), transparent );
    opacity: 0.7;
    background-color: transparent;
}
.shine-text {
    font-size: var(--fz-sm);
    max-width: 750px;
    margin: 0 auto;
    color: var(--text-slate); /* Fallback color */
    background: linear-gradient(90deg, var(--text-slate), var(--text-lightest), var(--text-slate));
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
}
@keyframes shine { to { background-position: -200% center; } }


/*
========================================
MAIN APP LAYOUT
========================================
*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(70px + var(--safe-area-top));
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: calc(var(--spacing-sm) + var(--safe-area-top));
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 50; /* Higher Z-Index to stay above Menu Overlay if needed */
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    /* Liquid Glass Header */
    background-color: transparent;
    border-bottom: 1px solid transparent;
}
#header.scrolled {
    background-color: rgba(10, 25, 47, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-slate);
}
/* Header Title Chip */
#header::before {
    content: attr(data-title);
    position: absolute;
    left: 50%;
    top: 50%;
    padding-top: var(--safe-area-top);
    transform: translate(-50%, -50%);
    font-weight: 600;
    color: var(--text-light);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#header.show-title::before {
    opacity: 1;
    visibility: visible;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* 
   UPDATED BACK BUTTON
   Matched to Menu Button styling exactly as requested
*/
#backButton {
    width: 50px;
    height: 50px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-slate);
    color: var(--text-lightest);
    border-radius: 50%;
    display: flex; /* Default is flex, visibility controlled by transparency or logic if needed, but requirements say Always Visible */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Matched transition to Menu Button */
    transition: all var(--transition-speed) var(--transition-easing);
}
#backButton:hover {
    transform: scale(1.1);
    border-color: var(--accent-gold);
}
#backButton svg {
    width: 20px;
    height: 20px;
}

/* 
========================================
MENU BUTTON & SIDE MENU (TRANSPLANT TARGET)
========================================
*/
/* 
   TRANSPLANTED STYLES: Directly adapted from Source .hamburger-btn 
   This ensures the exact visual and animation match requested.
*/
#menuButton {
    display: flex;
    /* Fixed Positioning removed as it's inside #header flex container, but sizing/style matches */
    width: 50px;
    height: 50px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-slate);
    border-radius: 50%;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: all var(--transition-speed) var(--transition-easing);
    z-index: 60;
}

#menuButton:hover {
    transform: scale(1.1);
    border-color: var(--accent-gold);
}

#menuButton span {
    width: 22px;
    height: 2px;
    background-color: var(--accent-gold);
    border-radius: 2px;
    display: block;
    transition: all var(--transition-speed) var(--transition-easing);
}

/* Animation Logic: Mapped 'body.menu-open' (Target) to the transform logic of Source */
body.menu-open #menuButton span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.menu-open #menuButton span:nth-child(2) {
    opacity: 0;
}
body.menu-open #menuButton span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* OVERLAY */
#sideMenuOverlay {
    position: fixed; inset: 0; z-index: 100;
    background-color: rgba(10, 25, 47, 0.7);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    opacity: 0; transition: opacity var(--transition-speed) ease;
    pointer-events: none;
    visibility: hidden;
}
#sideMenuOverlay.open { opacity: 1; pointer-events: auto; visibility: visible; }

/* 
   TRANSPLANTED STYLES: Side Menu Container (#sideMenu)
   Adapted from Source #mobile-menu
*/
#sideMenu {
    position: fixed; 
    top: 0; 
    right: -100%; /* Source logic uses right property for slide */
    bottom: 0;
    width: 100%; 
    max-width: 320px;
    height: 100%;
    z-index: 102; /* Bumped to match Source feel */
    
    /* Specific Gradient from Source */
    background-image: linear-gradient(160deg, var(--bg-dark-blue-end) 0%, var(--bg-dark-blue-start) 60%, rgba(255, 215, 0, 0.05) 100%);
    
    /* Specific Border/Shadow from Source */
    border-left: 1px solid var(--border-slate);
    box-shadow: -10px 0 30px -15px rgba(2, 12, 27, 0.7);
    
    display: flex; 
    flex-direction: column;
    /* transition: transform replaced with right for match */
    transition: right 0.4s var(--transition-easing);
    
    padding: 0; /* Internal padding handled by children */
}
#sideMenu.open { 
    transform: none; /* Clear old logic */
    right: 0; 
}

/* Menu Header Styling */
#sideMenu-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: var(--spacing-md); 
    border-bottom: 1px solid var(--border-slate);
    flex-shrink: 0;
    margin-top: 0; /* Reset */
    padding-top: calc(var(--safe-area-top) + var(--spacing-md));
}

#sideMenu-close-btn {
    background: none; border: none; cursor: pointer; padding: var(--spacing-sm);
}
#sideMenu-close-btn svg { width: 24px; height: 24px; color: var(--accent-gold); transition: transform var(--transition-speed); }
#sideMenu-close-btn:hover svg { transform: rotate(180deg) scale(1.1); }


#sideMenu-content { 
    flex-grow: 1; 
    overflow-y: auto; 
    padding: var(--spacing-lg) var(--spacing-md); 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-sm);
}

/* 
   TRANSPLANTED STYLES: Menu Items (.sidemenu-item)
   Adapted from Source .mobile-menu-link
*/
.sidemenu-item {
    display: flex; 
    align-items: center; 
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    text-decoration: none; 
    color: var(--text-light); 
    font-size: var(--fz-md); 
    font-weight: 600;
    border: 1px solid transparent; 
    border-radius: var(--border-radius);
    transition: all var(--transition-speed-fast) var(--transition-easing);
    cursor: pointer;
    margin-bottom: 0; /* Reset */
}

/* Specific Hover Logic from Source */
.sidemenu-item:hover, .sidemenu-item.active { 
    background-color: rgba(255, 215, 0, 0.1); 
    border-color: var(--accent-gold); 
    color: var(--accent-gold);
}

.sidemenu-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.sidemenu-divider { height: 1px; background: var(--border-slate); margin: var(--spacing-md) 0; }


#app {
    flex-grow: 1;
    overflow-y: auto;
    /* Dynamic padding */
    padding: calc(70px + var(--safe-area-top)) var(--spacing-md) calc(110px + var(--safe-area-bottom));
     -webkit-overflow-scrolling: touch; /* Inertial scroll for iOS */
}

#screen {
    animation: fadeIn 0.5s var(--transition-easing);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Stagger animation */
.stagger-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--transition-easing), transform 0.6s var(--transition-easing);
}

/*
========================================
GENERIC COMPONENTS (CARDS, BUTTONS, ETC.)
========================================
*/
.section-title {
    color: var(--text-lightest);
    font-size: var(--fz-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    position: relative;
    padding-bottom: var(--spacing-sm);
    text-align: center;
    display: inline-block;
}
/* Updated Section Title Underline (Golden Accent Line) */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background-image: linear-gradient( to right, transparent, var(--accent-gold), transparent );
    opacity: 0.7;
    background-color: transparent;
}
/* Added wrapper for centering titles typically */
.section-title-wrapper {
    text-align: center;
    width: 100%;
}

.content-card {
    background-color: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-slate);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-speed) var(--transition-easing);
    transform-style: preserve-3d;
    margin-bottom: var(--spacing-lg);
    /* REFINEMENT: Global Center Alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5);
    border-color: var(--accent-gold);
}

.content-card .light-sweep {
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 215, 0, 0.1) 50%, transparent 80%);
    transform: skewX(-25deg);
    transition: left var(--transition-speed-fast) var(--transition-easing);
    z-index: 1; pointer-events: none;
}
.content-card:hover .light-sweep {
    left: 150%;
    transition: left 0.8s var(--transition-easing);
}

.content-card::before, .content-card::after {
    content: '';
    position: absolute;
    background: var(--accent-gold);
    transition: transform 0.4s var(--transition-easing);
    z-index: 2;
}
.content-card::before { top: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; }
.content-card::after { top: 0; right: 0; width: 2px; height: 100%; transform: scaleY(0); transform-origin: top; }
.content-card:hover::before, .content-card:hover::after { transform: scale(1); }


.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    font-family: var(--font-sans);
    font-size: var(--fz-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    text-decoration: none;
    border: 1px solid var(--accent-gold);
    background-color: transparent;
    color: var(--accent-gold);
    min-height: 44px; /* Touch Target */
    min-width: 44px; /* Touch Target */
}
.btn-primary {
    background-image: linear-gradient(45deg, var(--accent-gold-darker), var(--accent-gold));
    color: var(--bg-dark-blue-start);
    border-color: var(--accent-gold-darker);
    box-shadow: var(--soft-gold-shadow);
}
.btn-secondary {
    border-color: var(--text-slate);
    color: var(--text-slate);
}
.btn-secondary:hover {
    border-color: var(--text-light);
    color: var(--text-light);
}
.btn:disabled, .btn.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: var(--border-slate);
    border-color: var(--border-slate);
    color: var(--text-slate);
    box-shadow: none;
    background-image: none;
}
.btn-danger {
    background-color: transparent;
    color: var(--danger-red);
    border: 1px solid var(--danger-red);
}
.btn-danger:hover {
    background-color: rgba(255, 107, 107, 0.1);
}
.btn-google {
    background-color: transparent;
    color: var(--text-light);
    border: 1px solid var(--border-slate);
    margin-top: var(--spacing-md);
    width: 100%;
}
.btn-google:hover {
    background-color: rgba(136, 146, 176, 0.1);
    border-color: var(--accent-cyan);
}
.btn-google svg { width: 18px; height: 18px; margin-right: var(--spacing-sm); }

/* TRANSPLANTED QUANTITY CONTROLLER STYLES */
.quantity-controller { 
    display: flex; align-items: center; justify-content: space-between; 
    width: 100%; height: 100%; 
    background-image: linear-gradient(45deg, var(--accent-cyan-darker) 0%, var(--accent-cyan) 100%); 
    color: var(--card-bg); 
    border: 1px solid var(--accent-cyan-darker); 
    box-shadow: 0 4px 15px -5px rgba(100, 255, 218, 0.3); 
    border-radius: var(--border-radius); 
    font-weight: 700; font-size: var(--fz-md); 
    padding: 0 var(--spacing-sm); 
}
.quantity-controller:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px -5px rgba(100, 255, 218, 0.4); 
}
.quantity-btn { 
    background: rgba(10, 25, 47, 0.2); 
    color: var(--card-bg); 
    border: none; border-radius: 50%; 
    width: 28px; height: 28px; font-size: 1.5rem; line-height: 1; 
    cursor: pointer; transition: background 0.2s; 
    display: flex; align-items: center; justify-content: center;
    padding: 0; /* Override generic btn styles */
    min-width: 28px; min-height: 28px; /* Override generic btn styles */
}
.quantity-btn:hover { background: rgba(10, 25, 47, 0.4); }

.card-title {
    color: var(--text-lightest);
    font-size: var(--fz-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    position: relative;
    padding-bottom: var(--spacing-xs);
}
/* Applied Golden Accent Line to Card Titles 
.card-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background-image: linear-gradient( to right, transparent, var(--accent-gold), transparent );
    opacity: 0.7;
    background-color: transparent;
} */
.card-text { font-size: var(--fz-sm); margin-bottom: var(--spacing-lg); }

/* Updated Card Divider to Golden Accent Line 
.card-divider {
    height: 1px; 
    width: 70%; 
    margin: var(--spacing-md) auto;
    background-image: linear-gradient( to right, transparent, var(--accent-gold), transparent );
    background-color: transparent;
    opacity: 0.7; 
    border: 0;
} */
/* REFINEMENT: Centered Footer */
.card-footer {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

/*
========================================
SCREEN-SPECIFIC STYLES
========================================
*/
/* Video Placeholder */
.video-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background-color: #000;
    border-radius: calc(var(--border-radius) / 2);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--border-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    pointer-events: none; /* Let clicks pass through to card */
}
.video-placeholder::after { content: '▶'; font-size: 3rem; text-shadow: 0 0 10px rgba(0,0,0,0.8); }

/* Horizontal Scroller - Updated for Infinite Style Fade */
.horizontal-scroller { 
    display: flex; 
    overflow-x: auto; 
    gap: var(--spacing-md); 
    padding-bottom: var(--spacing-md); 
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    flex-wrap: nowrap;
    /* Edge Fade Effect */
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    width: 100%; /* Ensure full width in flex parent */
}
.horizontal-scroller .content-card { flex: 0 0 70%; max-width: 280px; scroll-snap-align: center; }
.horizontal-scroller::-webkit-scrollbar { display: none; }

/* Infinite Scroll Loader Styles */
.loading-sentinel {
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s;
    scroll-snap-align: center;
}
.loading-sentinel.visible { opacity: 1; }
.spinner {
    width: 30px; height: 30px;
    border: 3px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    border-top-color: var(--accent-gold);
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* Shimmer Placeholder */
.shimmer-placeholder {
    background: var(--border-slate);
    background-image: linear-gradient(to right, var(--border-slate) 0%, #2a3f63 20%, var(--border-slate) 40%, var(--border-slate) 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }

/* Services Grid */
.services-grid { 
    display: grid; 
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}
@media (min-width: 768px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
.service-card {
    display: flex;
    flex-direction: column;
}
.service-card .card-thumbnail {
    width: 100%;
    padding-bottom: 56.25%;
    background: var(--border-slate);
    margin-bottom: var(--spacing-md);
    border-radius: calc(var(--border-radius) / 2);
}
.service-card-chips {
    display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm);
}
.service-card-chip {
    font-size: var(--fz-xs); background: rgba(100,255,218,0.1); color: var(--accent-cyan);
    padding: 2px 8px; border-radius: 99px;
}
.service-card-price {
    font-size: var(--fz-md); color: var(--text-lightest); font-weight: 600;
    margin-bottom: var(--spacing-md);
}
/* REFINEMENT: Centered Service CTA */
.service-card-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: var(--spacing-sm); 
    margin-top: auto;
    height: 44px; /* Ensure consistent height for controller swap */
}
.service-card-cta .btn { flex: 1; }
.service-card-cta .btn-secondary { /* specific override for the Login to Buy button */
    border-color: var(--border-slate);
    color: var(--text-slate);
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--spacing-md); }
.grid .content-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.grid .content-card .card-title { font-size: var(--fz-md); }

/*
========================================
BENEFICIARIES MARQUEE SECTION (CIRCULAR & FADED)
========================================
*/
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.beneficiaries-section {
    position: relative;
    background: none;
    margin-bottom: var(--spacing-lg);
    width: 100%;
}

.marquee-scroll-wrapper {
    overflow-x: hidden;
    padding: var(--spacing-md) 0;
    width: 100%;
    /* Apply fade effect on both sides */
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.marquee-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.marquee-scroll-wrapper:hover .logo-marquee-group {
    animation-play-state: paused;
}

.logo-marquee {
    display: flex;
    width: fit-content;
}

.logo-marquee-group {
    display: flex;
    align-items: center;
    animation: scroll 60s linear infinite;
    padding-right: var(--spacing-xl);
    gap: var(--spacing-xl); /* Use gap instead of margin for consistent spacing */
    will-change: transform;
}

/* Updated Image Styles for Circular Classy Look */
.logo-marquee img {
    height: 120px; 
    width: 120px;
    object-fit: cover; 
    object-position: top center;
    border-radius: 50%; /* Make circular */
    border: 3px solid var(--border-slate); /* Classy border */
    transition: all var(--transition-speed) ease;
    background: var(--card-bg); /* Placeholder background */
}

.logo-marquee img:hover {
    transform: scale(1.1);
    z-index: 5;
    border-color: var(--accent-gold); /* Gold border on hover */
    box-shadow: 0 0 15px var(--gold-glow);
}

@media (min-width: 768px) {
    .logo-marquee img {
        height: 140px; 
        width: 140px;
    }
}

/* 
========================================
AUTH & FORM STYLES (PORTED & ADAPTED)
========================================
*/
.form-group { margin-bottom: var(--spacing-md); text-align: left; width: 100%; }
.form-group label { display: block; margin-bottom: var(--spacing-xs); font-size: var(--fz-sm); color: var(--text-light); }
.form-group input, .form-group select {
    width: 100%;
    padding: var(--spacing-sm);
    background: var(--bg-dark-blue-start);
    border: 1px solid var(--border-slate);
    color: var(--text-lightest);
    border-radius: 8px;
    min-height: 44px;
    font-size: var(--fz-sm);
    transition: border-color var(--transition-speed);
}
.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px var(--gold-glow);
}
.form-group input:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-method-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-slate);
    width: 100%;
}
.auth-tab-btn {
    flex: 1;
    padding: var(--spacing-sm) 0;
    background: none;
    border: none;
    color: var(--text-slate);
    font-size: var(--fz-sm);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: color var(--transition-speed);
}
.auth-tab-btn:hover { color: var(--text-light); }
.auth-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-gold);
    transform: scaleX(0);
    transition: transform var(--transition-speed);
}
.auth-tab-btn.active { color: var(--text-lightest); }
.auth-tab-btn.active::after { transform: scaleX(1); }

.mobile-input-group { display: flex; gap: var(--spacing-sm); }
.mobile-input-group .country-code-select { flex: 0 0 80px; }
.mobile-input-group .mobile-number-input { flex: 1; }

/* Updated Auth Divider to Golden Accent Line */
.auth-divider { display: flex; align-items: center; text-align: center; color: var(--text-slate); margin: var(--spacing-lg) 0; font-size: var(--fz-xs); width: 100%; }
.auth-divider::before, .auth-divider::after { 
    content: ''; 
    flex: 1; 
    border-bottom: 1px solid transparent; /* Replaced default border */
    height: 1px;
    background-image: linear-gradient( to right, transparent, var(--accent-gold), transparent );
    opacity: 0.7;
}
.auth-divider:not(:empty)::before { margin-right: .5em; }
.auth-divider:not(:empty)::after { margin-left: .5em; }

.auth-link { margin-top: var(--spacing-md); text-align: center; font-size: var(--fz-sm); }
.auth-link a { color: var(--accent-cyan); text-decoration: none; font-weight: 600; cursor: pointer; }
.auth-link a:hover { text-decoration: underline; }

.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
.booked-service-card {
    /* Visual Parity with content-card is achieved by adding content-card class in JS, 
       but we keep specific layout styles here */
    display: flex; flex-direction: column; gap: var(--spacing-sm);
}
.booked-service-card h3 { font-size: var(--fz-md); color: var(--text-lightest); margin: 0; }
.booked-service-card .status-tag { 
    display: inline-block; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; border-radius: 99px; 
    margin-top: var(--spacing-xs);
}
.status-form-pending { background-color: var(--danger-red); color: var(--text-lightest); }
.status-report-delivered { background-color: var(--success-green); color: var(--text-lightest); }
.status-form-review-pending { background-color: var(--accent-gold); color: var(--bg-dark-blue-start); }
.status-form-submitted { background-color: var(--accent-cyan); color: var(--bg-dark-blue-start); }
.status-report-in-progress { background-color: var(--text-blue-highlight); color: var(--bg-dark-blue-start); }

.profile-avatar { width: 80px; height: 80px; border-radius: 50%; background-color: var(--border-slate); margin: 0 auto var(--spacing-md); display:flex; align-items:center; justify-content:center; font-size: 2rem; font-weight: bold; color: var(--accent-gold); border: 2px solid var(--accent-gold); }

#change-password-container {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s var(--transition-easing), margin-top 0.4s var(--transition-easing);
}
#change-password-container.open { max-height: 500px; margin-top: var(--spacing-lg); }
.hidden { display: none !important; }

/*
========================================
SELECTIONS (CART) & OVERLAY - TRANSPLANTED
========================================
*/
#selection-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 25, 47, 0.7); backdrop-filter: blur(5px); z-index: 102; opacity: 0; visibility: hidden; transition: all 0.4s var(--transition-easing); }
#selection-backdrop.visible { opacity: 1; visibility: visible; }
.selection-container { position: fixed; top: 0; right: -450px; width: 100%; max-width: 420px; height: 100%; background-color: var(--card-bg); box-shadow: -10px 0 30px -15px rgba(2, 12, 27, 0.7); transition: right 0.4s var(--transition-easing); z-index: 103; display: flex; flex-direction: column; border-left: 1px solid var(--border-slate); }
.selection-container.open { right: 0; }
.selection-header { padding: var(--spacing-lg); border-bottom: 1px solid var(--border-slate); display: flex; justify-content: space-between; align-items: center; }
.selection-header h2 { color: var(--text-lightest); font-size: var(--fz-lg); }
.close-selection-btn { background: none; border: none; color: var(--text-slate); font-size: 1.5rem; cursor: pointer; transition: color var(--transition-speed); }
.close-selection-btn:hover { color: var(--text-lightest); }
.selection-body { padding: var(--spacing-lg); flex-grow: 1; overflow-y: auto; }
.selection-item { display: flex; align-items: center; margin-bottom: var(--spacing-lg); }
.selection-item-details { flex-grow: 1; text-align: left; }
.selection-item-title { color: var(--text-light); font-weight: 600; font-size: var(--fz-sm); }
.selection-item-title span { font-size: var(--fz-xs); font-weight: 400; color: var(--text-slate); }
.selection-item-price { font-size: var(--fz-xs); color: var(--text-slate); }
.remove-item-btn { background: none; border: 1px solid var(--border-slate); color: var(--danger-red); cursor: pointer; margin-left: var(--spacing-md); font-weight: bold; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--transition-speed); flex-shrink: 0; }
.remove-item-btn:hover { background-color: rgba(255, 107, 107, 0.1); border-color: var(--danger-red); }
.selection-empty-msg { text-align: center; padding-top: 4rem; color: var(--text-slate); }
.selection-footer { padding: var(--spacing-lg); border-top: 1px solid var(--border-slate); background: var(--bg-dark-blue-start); }
.selection-summary { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.summary-row { display: flex; justify-content: space-between; font-size: var(--fz-sm); }
.total-label { font-weight: 700; color: var(--text-lightest); font-size: var(--fz-md); }
#selection-total { font-weight: 700; color: var(--accent-gold); font-size: var(--fz-lg); }


/*
========================================
MODALS & OVERLAYS
========================================
*/
/* Toast Notification */
#toast {
    position: fixed;
    bottom: calc(110px + var(--safe-area-bottom));
    left: 50%;
    transform: translate(-50%, 20px);
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-lightest);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-slate);
    box-shadow: var(--soft-gold-shadow);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--transition-easing);
    z-index: 101;
    text-align: center;
    width: 90%;
    max-width: 400px;
}
#toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
#toast.danger { border-color: var(--danger-red); color: #ffcccc; }
#toast.success { border-color: var(--success-green); color: #ccffcc; }

/* ROYAL OVERLAY SYSTEM */
.royal-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.royal-overlay-backdrop.active {
    opacity: 1;
    visibility: visible;
}
.royal-modal {
    width: 90%;
    max-width: 400px;
    background: rgba(17, 34, 64, 0.85);
    border: 1px solid var(--accent-gold);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    box-shadow: 0 0 30px var(--gold-glow-hard), inset 0 0 20px rgba(0,0,0,0.5);
    text-align: center;
    transform: scale(0.9);
    transition: transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.royal-overlay-backdrop.active .royal-modal {
    transform: scale(1);
}
.royal-modal-title {
    color: var(--accent-gold);
    font-size: var(--fz-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.royal-modal-content {
    color: var(--text-blue-highlight);
    font-size: var(--fz-md);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}
.royal-modal-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}
.royal-modal .form-group input {
    background: rgba(10, 25, 47, 0.8);
    border: 1px solid var(--border-slate);
    color: var(--accent-gold);
}
.royal-modal .form-group input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 10px var(--gold-glow);
}

/* Video Player in Modal */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}
.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 0;
}

/* 
========================================
BOTTOM NAVIGATION & TICKER (RE-ENGINEERED)
========================================
*/
#bottom-nav-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    pointer-events: none; /* Container doesn't block clicks */
}
#ticker-container {
    width: 92%;
    max-width: 500px;
    height: 36px;
    background: rgba(17, 34, 64, 0.75);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid var(--glass-refraction);
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    box-shadow: var(--soft-gold-shadow);
    pointer-events: auto;
    transition: transform 0.4s ease, opacity 0.4s ease;
    overflow: hidden;
    position: relative;
}
#ticker-container.hidden {
    transform: translateY(100%);
    opacity: 0;
}
.ticker-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
    animation: pulse-glow 12s linear infinite;
}
@keyframes pulse-glow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.ticker-icon { color: var(--accent-gold); margin-right: var(--spacing-sm); flex-shrink: 0; }
.ticker-content { flex-grow: 1; overflow: hidden; white-space: nowrap; }
/* REFINEMENT: Force white color for visibility */
.ticker-content span { animation: marquee 20s linear infinite; display: inline-block; padding-left: 100%; color: #ffffff; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.ticker-controls button {
    background: none; border: none; color: var(--text-slate); cursor: pointer;
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* 
   LIQUID GLASS TAB BAR OVERHAUL 
*/
#tabbar {
    width: 92%;
    max-width: 500px;
    height: 70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    /* Clearer Glass Material */
    background-color: rgba(10, 20, 35, 0.6); 
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    
    /* Borders & Rim Light */
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    
    padding: 0;
    padding-bottom: var(--safe-area-bottom);
    pointer-events: auto;
    position: relative;
    margin-bottom: var(--spacing-sm);
    
    /* Noise Texture Overlay */
    overflow: visible;
}
/* Tiny tiling noise pattern for grain */
#tabbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyHpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTE0NTE5QkQyRjBBMTFFQTg1OEQ4QTZFQjVGRTgwRjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTE0NTE5QkUyRjBBMTFFQTg1OEQ4QTZFQjVGRTgwRjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MTQ1MTlCQjJGMGExMUVBODU4RDhBNkVCNUZFODBGNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MTQ1MTlCQzJGMGExMUVBODU4RDhBNkVCNUZFODBGNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjt5C8wAAABfSURBVHjaYvz//z8DCDAyMv4PxACBgPfvHzMCsSMQ+/79+x+QEAi/A/FvIGYEYkYg9v379z8gIRD+BuLfQMwIxIxA7Pv3739AQiD8DMS/gZgRiBmB2Pfv3/+AhAABBgC9+1+wP8PDgQAAAABJRU5ErkJggg==");
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

#tabbar.has-ticker {
    border-radius: 0 0 24px 24px;
}
#tabbar:not(.has-ticker) {
    border-radius: 24px;
}

.tab-item {
    background: none;
    border: none;
    color: var(--text-slate);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.4s ease, transform 0.4s ease;
    flex: 1;
    position: relative;
    z-index: 2;
    height: 100%;
}
.tab-item:hover { color: var(--text-lightest); }

/* GOLD ACTIVE STATE - SYNCED WITH DROPLET */
.tab-item.active { 
    color: #FFD700; /* Pure Gold */
    transform: translateY(-2px); 
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.tab-item svg { 
    width: 24px; 
    height: 24px; 
    fill: currentColor; 
    transition: fill 0.4s ease, filter 0.4s ease;
}
.tab-item.active svg {
    fill: #FFD700;
    filter: drop-shadow(0 2px 5px rgba(218, 165, 32, 0.5));
}

.tab-item.mini-tab span { font-size: 10px; }
.tab-item.mini-tab svg { width: 20px; height: 20px; }


/* 
   THE LIQUID DROPLET - REFINED PHYSICS
*/
#liquid-droplet {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px - var(--safe-area-bottom));
    
    /* STATIC STATE: The Glass Slab */
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    filter: none;
    mix-blend-mode: normal;
    z-index: 1;
    
    transform-origin: center center;
    will-change: transform, left, width, border-radius;
    /* REFINED: Explicit, fluid transition */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                border-radius 0.3s ease, 
                background 0.3s ease, 
                box-shadow 0.3s ease;
}

/* REFINED: ACTIVE STATE for Refractive Liquid Look */
#liquid-droplet.is-morphing {
    border-radius: 20px;
    /* REFINED: Clearer, high-contrast gradient */
    background: radial-gradient(circle at center, 
        rgba(255, 255, 255, 0.15) 30%, 
        rgba(255, 215, 0, 0.1) 60%, 
        rgba(255, 215, 0, 0.2) 100%
    );
    /* REFINED: High-contrast shadows for refractive look */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.7), /* Top highlight */
        inset 0 -2px 2px rgba(218, 165, 32, 0.2), /* Bottom color bleed */
        0 4px 15px rgba(255, 215, 0, 0.4); /* Outer glow */
    
    border: none;
    /* REFINED: Blur removed, only brightness */
    backdrop-filter: brightness(1.15); 
    mix-blend-mode: hard-light;
    
    filter: url(#liquid-distortion);
}

/* Reduced Motion Fallbacks */
@media (prefers-reduced-motion: reduce) {
    #liquid-droplet {
        transition: transform 0.2s ease, width 0.2s ease !important;
        filter: none !important;
    }
}

.tab-item .cart-badge {
    position: absolute;
    top: 6px;
    right: 25%;
    background-color: var(--accent-gold);
    color: var(--bg-dark-blue-start);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.tab-item .cart-badge.visible {
    transform: scale(1);
}

/* CART FAB */
#cart-fab {
    position: fixed;
    bottom: calc(90px + var(--safe-area-bottom));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-darker));
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
    z-index: 90;
    display: flex; /* Flex/None toggled by JS */
    align-items: center;
    justify-content: center;
    color: var(--bg-dark-blue-start);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: none; /* Hidden by default */
}
#cart-fab:active { transform: scale(0.9); }
#cart-fab .fab-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: var(--danger-red);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-dark-blue-start);
}