/* Global Reset & Typography */
:root {
    --bg-color: #ffffff;
    /* Changed to White */
    --text-primary: #111111;
    /* Changed to Black */
    --text-secondary: #555555;
    --brand-color: #fe2c55;
    --accent-cyan: #25f4ee;
    --dark-overlay: rgba(0, 0, 0, 0.05);
    --bottom-nav-height: 60px;
    --sidebar-width: 340px;
    --border-color: rgba(0, 0, 0, 0.1);
    /* Light border */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Red Hat Display', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    /* Dynamic Viewport Height for mobile */
    width: 100vw;
}

input, select, textarea, button {
    font-family: 'Red Hat Display', sans-serif;
}

strong {
    color: #000000;
}

div[style*="linear-gradient(135deg, #FE2C55 0%, #FF0055 100%)"] {
    background: #ffffff !important;
}

/* App Container */
.app-layout {
    display: flex;
    height: 100%;
    width: 100%;
}

/* Sidebar (Hidden on Mobile, Visible on Desktop) */
.sidebar {
    display: none;
    width: var(--sidebar-width);
    height: 100%;
    border-right: 1px solid var(--border-color);
    padding: 20px 10px;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: #ffffff !important;
    /* Force White */
    z-index: 100;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-logo {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 30px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sidebar-logo span {
    color: var(--brand-color);
}

.menu-item,
.menu-link-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    border-radius: 4px;
}

.menu-item:hover,
.menu-item.active,
.menu-link-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    /* Lighter hover */
    color: var(--brand-color);
}

.menu-item i,
.menu-link-item i {
    font-size: 1.5rem;
}

/* Main Feed Area */
/* Main Feed Area */
.feed-container {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    background: #ffffff;
    /* White */
}

.video-feed {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background: #ffffff;
    /* Updated to White */
}

.video-feed::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar Chrome */

.feed-item {
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    position: relative;
    background-color: #ffffff;
    /* Updated to White */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Video simulation */
.video-content {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    opacity: 1;
    display: block;
    will-change: transform, opacity;
    transform: translateZ(0);
    background: #ffffff;
    /* White background for video */
}

.video-placeholder {
    will-change: opacity;
    background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
    background-size: 200% 100%;
    animation: placeholder-shimmer 2s infinite linear;
}

@keyframes placeholder-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* On Desktop, constrain video and center it */
/* =========================================
   DESKTOP LAYOUT (Refined)
========================================= */
@media (min-width: 768px) {

    /* 1. Layout Structure */
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #ffffff;
    }

    body {
        overflow: hidden;
        background: #ffffff;
        display: flex !important;
        flex-direction: row !important;
    }

    .app-layout {
        display: flex;
        flex-direction: row;
        /* Force row layout */
        width: 100%;
        height: 100%;
        background: #ffffff;
        box-sizing: border-box;
    }

    /* 2. Sidebar (Left Panel) */
    .sidebar {
        display: flex !important;
        flex-direction: column;
        width: 280px;
        /* Standard desktop sidebar width */
        height: 100vh;
        background: #ffffff !important;
        /* Force White */
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        z-index: 100;
        flex-shrink: 0;
        padding-top: 20px;
    }

    /* Fix text visibility in Sidebar */
    .sidebar,
    .sidebar .menu-item,
    .sidebar .menu-link-item,
    .sidebar .menu-text,
    .sidebar span,
    .sidebar a,
    .sidebar i {
        color: #111111 !important;
        /* Force Dark Text Everywhere */
    }

    /* Exceptions for brand colors if needed */
    .sidebar .menu-item.active i,
    .sidebar .menu-item.active span {
        color: var(--brand-color) !important;
    }

    .sidebar .menu-item:hover,
    .sidebar .menu-link-item:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }

    .sidebar-logo {
        padding: 0 20px 20px 20px;
        margin-bottom: 0;
    }
    
    .sidebar-logo span {
        color: #111 !important;
    }
    
    .sidebar-logo span span {
        color: var(--brand-color) !important;
    }

    .sidebar-footer {
        padding: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-top: auto;
    }

    /* 3. Main Feed Container */
    .feed-container {
        flex: 1;
        /* Take remaining space */
        height: 100vh;
        position: relative;
        background: #ffffff;
        display: flex;
        justify-content: center;
        /* Center the feed column */
        align-items: center; /* Vertically center */
        gap: 40px; /* Space between feed and extras */
        overflow: hidden;
        margin: 0 !important;
        /* Reset margins */
        width: auto !important;
        /* Reset widths */
        top: 0 !important;
    }

    .feed-wrapper {
        width: 480px;
        max-width: 480px;
        flex: 0 0 480px;
        /* Standard desktop feed width */
        height: 100vh; /* Full height for desktop */
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        background: #ffffff;
        border: 1px solid #eee;
        border-radius: 16px; /* Rounded corners */
        overflow: hidden;
        position: relative;
        z-index: 5;
    }

    /* Desktop Extras (Customer Trust) */
    .desktop-extras {
        display: none;
    }

    @media (min-width: 1200px) {
        .desktop-extras {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 0 0 380px;
            width: 380px;
            height: 100vh;
            margin-left: 20px;
            margin-right: 20px;
            position: relative;
            z-index: 10;
        }
    }

    /* 4. Video Feed */
    .video-feed {
        width: 100%;
        max-width: 480px;
        /* Match wrapper width */
        height: 100vh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scrollbar-width: thin;
        background: #ffffff;
    }

    /* 5. Feed Item */
    .feed-item {
        width: 100%;
        height: 100vh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        position: relative;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        margin: 0;
    }

    /* 6. Video Content */
    .video-content,
    .video-placeholder {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Fill the container */
        background: #ffffff;
    }

    /* Responsive adjustments for different desktop screen sizes */
    @media (min-width: 1440px) {
        .sidebar {
            width: 280px;
        }
        .feed-wrapper {
            width: 540px;
            max-width: 540px;
            flex: 0 0 540px;
        }
        .video-feed {
            max-width: 540px;
        }
    }
    
    @media (min-width: 1600px) {
        .sidebar {
            width: 300px;
        }
        .feed-wrapper {
            width: 560px;
            max-width: 560px;
            flex: 0 0 560px;
        }
        .video-feed {
            max-width: 560px;
        }
    }
    
    @media (min-width: 1920px) {
        .sidebar {
            width: 320px;
        }
        .feed-wrapper {
            width: 580px;
            max-width: 580px;
            flex: 0 0 580px;
        }
        .video-feed {
            max-width: 580px;
        }
    }
    
    /* Extra wide screen support */
    @media (min-width: 2560px) {
        .sidebar {
            width: 350px;
        }
        .feed-wrapper {
            width: 600px;
            max-width: 600px;
            flex: 0 0 600px;
        }
        .video-feed {
            max-width: 600px;
        }
    }
}

/* Additional responsive adjustments for optimal desktop viewing */
@media (min-width: 1200px) and (max-width: 1399px) {
    .sidebar {
        width: 270px;
    }
    .feed-wrapper {
        width: 520px;
        max-width: 520px;
        flex: 0 0 520px;
    }
    .video-feed {
        max-width: 520px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .sidebar {
        width: 260px;
    }
    .feed-wrapper {
        width: 500px;
        max-width: 500px;
        flex: 0 0 500px;
    }
    .video-feed {
        max-width: 500px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar {
        width: 250px;
    }
    .feed-wrapper {
        width: 480px;
        max-width: 480px;
        flex: 0 0 480px;
    }
    .video-feed {
        max-width: 480px;
    }
    
    /* Adjust for smaller desktop screens */
    .app-layout {
        flex-direction: row;
    }
    
    .feed-container {
        justify-content: center;
    }
}

/* Flexible scaling for various desktop screen sizes */
@media (min-width: 768px) {
    /* Proportional scaling for intermediate screen sizes */
    .sidebar {
        width: clamp(240px, 8vw, 350px);
    }
    
    .feed-wrapper {
        width: clamp(450px, 22vw, 650px);
        max-width: 100%;
        flex: 0 0 clamp(450px, 22vw, 650px);
    }
    
    .video-feed {
        max-width: clamp(450px, 22vw, 650px);
    }
}

/* High DPI/Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    .icon-wrapper {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Mobile device-specific optimizations for popular brands */
/* Samsung Galaxy devices */
@supports (-webkit-appearance: none) and (not (grid-area: auto)) {
    .feed-item {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }
}

/* Vivo and other Chinese brand devices */
@media screen and (device-width: 360px) and (device-height: 640px) {
    .action-sidebar {
        bottom: 130px !important;
    }
}

@media screen and (device-width: 412px) and (device-height: 846px) {
    .action-sidebar {
        bottom: 130px !important;
    }
}

/* Universal mobile optimization */
@media (hover: none) and (pointer: coarse) {
    /* Touch device specific */
    .action-btn {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    .icon-wrapper {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
}

/* Overlay Elements */
.overlay-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: calc(var(--bottom-nav-height) + 20px);
}

/* Right Actions Sidebar */
.action-sidebar {
    position: absolute;
    right: 10px;
    bottom: 85px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    pointer-events: auto;
    z-index: 10;
}


.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9); /* Opaque white */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Light border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    overflow: visible;
    position: relative;
    will-change: transform;
}

.icon-wrapper i {
    color: #111111 !important; /* Dark Icon */
    filter: none;
}

/* Enhanced hover effect */
.action-btn:hover .icon-wrapper {
    background: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.action-btn:hover .icon-wrapper i {
    color: var(--brand-color) !important;
}

.icon-wrapper:active {
    transform: scale(0.95);
}


.action-btn span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #333333; /* Dark text */
    text-shadow: none;
    text-align: center;
}

/* Avatar specific */
.avatar-wrapper {
    position: relative;
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
}

.avatar-wrapper img, .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #fff;
    object-fit: cover;
    background: #fff;
    padding: 2px;
    display: block;
}

@media (max-width: 768px) {
    .avatar-wrapper {
        width: 40px;
        height: 40px;
    }
}

.follow-plus {
    display: none;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Product Info & Caption (Bottom Left) */
.post-info {
    padding: 15px 90px 85px 15px;
    /* Default for mobile with bottom nav - Right padding prevents overlap with buttons */
    width: 100%;
    pointer-events: auto;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent); /* White gradient */
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .post-info {
        padding-bottom: 30px;
        /* Move it down on desktop since no bottom nav */
    }
}

.username {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
    display: block;
    color: #111111;
    /* Changed to Black */
    text-shadow: none;
}

.caption {
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 8px;
    color: #333333;
    /* Changed to Dark Gray */
    text-shadow: none;
}

.music-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #111111;
    /* Changed to Black */
    text-shadow: none;
}

.music-note i {
    animation: spin 4s linear infinite;
}

/* Shop Button */
.shop-cta {
    background: var(--brand-color);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    border: 2px solid #5a0000;
    /* Darker accent border from image */
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(254, 44, 85, 0.4);
    animation: bounce-subtle 2s infinite;
}

/* Mobile Device Specific Optimizations */
/* Samsung, Vivo and other Android device fixes */
@supports (-webkit-appearance: none) and (stroke: black) {
    /* Target Webkit browsers specifically for Android devices */
    .video-content,
    .video-placeholder {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    /* Improve performance on Android devices */
    .video-feed {
        -webkit-overflow-scrolling: touch;
    }
}

/* Samsung Internet Browser specific fixes */
@supports (-webkit-appearance: none) {
    .feed-item {
        -webkit-transform: translateZ(0);
        -webkit-perspective: 1000;
    }
}

/* Additional mobile browser compatibility */
@supports not (-webkit-appearance: none) {
    /* For Firefox Mobile and other non-webkit browsers */
    .video-content,
    .video-placeholder {
        will-change: transform;
        contain: layout style paint;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS specific properties */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    .video-feed {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        will-change: scroll-position;
    }
}

/* Android browser fixes */
@supports (-webkit-appearance: none) and (not (color: color(display-p3 1 1 1))) {
    /* Target older Android browsers */
    .action-btn {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

/* Mobile browser compatibility fixes */
@supports (-webkit-touch-callout: inherit) {
    /* For Safari iOS */
    .app-layout {
        -webkit-overflow-scrolling: touch;
    }
}

/* Samsung browser specific fixes */
@supports (-ms-high-contrast: none) or (-ms-high-contrast: active) {
    /* Target IE and legacy browsers */
    .feed-item {
        min-height: 100vh;
    }
}

/* Mobile Specific Fixes for Sidebar Buttons */
@media (max-width: 768px) {
    .action-sidebar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        right: 8px !important;
        bottom: 120px !important;
        /* Clear bottom nav */
        z-index: 2000 !important;
        pointer-events: auto !important;
    }

    .action-btn .icon-wrapper {
        width: 45px;
        height: 45px;
        backdrop-filter: blur(5px);
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        /* Optimize for touch targets */
        min-width: 44px;
        min-height: 44px;
    }

    .action-btn span {
        font-size: 11px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
        font-weight: 700;
    }

    /* Ensure feed item doesn't clip */
    .feed-item {
        overflow: visible !important;
    }

    .video-feed {
        overflow-x: hidden;
    }
    
    /* Prevent overscroll bounce on mobile */
    body {
        overscroll-behavior-y: none;
    }
    
    /* Optimize for mobile touch interactions */
    .action-btn {
        touch-action: manipulation;
    }
}

/* Bottom Navigation (Mobile) */
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--bottom-nav-height);
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 10003;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7rem;
    color: #888;
    gap: 4px;
    cursor: pointer;
}

.nav-item.active {
    color: #fff;
}

.nav-item i {
    font-size: 1.5rem;
    margin-bottom: 2px;
    background: linear-gradient(120deg, #fe2c55 30%, #ffffff 50%, #fe2c55 70%);
    background-size: 400% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ai-shine 5s linear infinite;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item:hover i {
    transform: scale(1.2);
}

@keyframes ai-shine {
    to {
        background-position: -400% center;
    }
}

/* Shop Now Button in Nav */
.nav-shop-btn {
    background: var(--brand-color);
    color: white;
    padding: 8px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(254, 44, 85, 0.5);
    animation: pulse-btn 2s infinite;
    cursor: pointer;
    border: none;
}

@keyframes pulse-btn {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(254, 44, 85, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(254, 44, 85, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(254, 44, 85, 0);
    }
}

/* Order Drawer / Bottom Sheet */
/* Order Drawer / Bottom Sheet */
.order-drawer {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    /* Full Height on Mobile */
    max-height: 100dvh;
    background: #ffffff;
    border-radius: 0;
    /* Square corners on mobile full screen */
    z-index: 10001 !important;
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    display: flex;
    flex-direction: column;
    box-shadow: none;
    will-change: transform;
    transform: translateY(100%);
    bottom: 0;
}

.order-drawer.active {
    transform: translateY(0);
}

/* Responsive desktop centering and width */
@media (min-width: 768px) {
    .order-drawer {
        left: 50%;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -40%) scale(0.95);
        max-width: 600px;
        height: auto;
        max-height: 90vh;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .order-drawer.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Removed redundant active state */

.drawer-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background: #ffffff;
}

.drawer-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #000;
}

.close-drawer {
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #111;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.close-drawer:hover {
    background: var(--brand-color);
    color: #fff;
    border-color: var(--brand-color);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(254, 44, 85, 0.3);
}

.close-drawer:active {
    transform: rotate(90deg) scale(0.95);
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    /* White Theme */
}

.checkout-product-summary {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    background: #f8f8f8;
    /* Light Gray */
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.form-row {
    display: flex;
    gap: 15px;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

.form-group {
    margin-bottom: 20px;
    flex: 1;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    /* Dark Text */
    font-size: 0.9rem;
}

.form-input {
    width: 100%;
    padding: 12px;
    background: #f1f1f2;
    /* Light Input bg */
    border: 1px solid #ddd;
    /* Explicit border for visibility */
    border-radius: 8px;
    color: #000000;
    /* Explicit Black Text */
    font-size: 1rem;
    outline: none;
    transition: all 0.2s;
}

.form-input:focus {
    border-color: var(--brand-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(254, 44, 85, 0.1);
}

.form-input.invalid {
    border-color: #ff0000;
    background: #fff0f0;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: var(--brand-color);
    border: 2px solid #5a0000;
    border-radius: 12px;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 10px;
}

/* Support / Menu Drawer */
.support-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    background: #ffffff;
    z-index: 10002;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
}

.support-drawer.active {
    right: 0;
}

.drawer-header {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    border-bottom: none;
}

/* Specialized style for support drawer if needed, though class above is preferred */

.support-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px;
}

.support-item {
    background: #f5f5f5;
    /* Card style like image but light */
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border-radius: 12px;
    /* Rounded corners like blocks */
    margin-bottom: 12px;
    /* Spacing between blocks */
    border: 1px solid transparent;
}

.support-item:hover {
    background: #eeeeee;
    transform: scale(1.01);
}

.support-icon {
    width: 24px;
    height: 24px;
    background: transparent;
    color: var(--text-primary);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.support-label {
    font-weight: 700;
    color: #161823;
    font-size: 1.1rem;
}

.support-desc {
    display: none;
    /* Hiding description for this clean look */
}

.support-item i:last-child {
    color: #ccc;
    font-size: 1rem;
}

.drawer-footer {
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 0.8rem;
    border-top: 1px solid var(--border-color);
}

/* Overlay Elements */
.overlay-backdrop {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.overlay-backdrop.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Payment Options */
.payment-section {
    margin-bottom: 20px;
}

.payment-label {
    display: block;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-card:hover {
    background: #f1f1f2;
}

.payment-card.selected {
    border-color: var(--brand-color);
    background: rgba(254, 44, 85, 0.05);
    /* very light pink */
}

.radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.payment-card.selected .radio-circle {
    border-color: var(--brand-color);
}

.radio-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--brand-color);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s;
}

.payment-card.selected .radio-circle::after {
    opacity: 1;
    transform: scale(1);
}

.payment-text {
    flex: 1;
}

.payment-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: block;
}

.payment-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Bank Details - Hidden by default */
.bank-details {
    display: none;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    text-align: center;
    animation: slideDown 0.3s ease-out;
    color: var(--text-primary);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bank-info-row {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #444;
    /* Dark Label */
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.bank-info-row span:last-child {
    font-weight: 700;
    color: #000000;
    /* Explicit Black value */
}

.qr-code-placeholder {
    width: 120px;
    height: 120px;
    background: #fff;
    margin: 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: bold;
    border-radius: 8px;
}

/* Price Summary */
/* Price Summary */
.price-summary {
    background: #f8f8f8;
    /* Light Gray */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px dashed var(--border-color);
    /* Lighter border */
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: var(--text-primary);
    /* Dark Text */
}

.summary-row.total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--brand-color);
}

/* Desktop Responsiveness */
@media (min-width: 768px) {
    .sidebar {
        display: flex;
        background: #ffffff !important;
        /* Force White */
        color: #111111 !important;
        /* Force Black Text */
        backdrop-filter: blur(10px);
        border-right: 1px solid var(--border-color);
        position: relative;
        z-index: 1001;
    }

    .sidebar .menu-item,
    .sidebar .menu-link-item,
    .sidebar .menu-text,
    .sidebar span,
    .sidebar a,
    .sidebar i {
        color: #111111 !important;
    }

    .sidebar .menu-item:hover,
    .sidebar .menu-link-item:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }

    .sidebar-logo {
        text-shadow: none;
        /* Removed red shadow */
    }

    .menu-item {
        border-radius: 8px;
        margin: 0 10px;
    }

    .mobile-nav {
        display: none;
    }

    .feed-container {
        align-items: center;
        justify-content: center;
        padding-top: 0;
        /* Modern White Mesh Gradient Background */
        background: radial-gradient(circle at 0% 0%, #fff5f7, #ffffff 40%, #f4f4f4 100%);
    }

    .feed-wrapper {
        width: 100%;
        max-width: 450px;
        /* Standardize width */
        margin: 0 auto;
    }

    .video-feed {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        margin: 0 auto;
        box-shadow: none;
        overflow: hidden;
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        position: relative;
    }

    /* Scrollbar Styling for Desktop Feed */
    .video-feed::-webkit-scrollbar {
        display: none;
        /* Keep clean */
    }

    /* Right Actions Sidebar (Desktop Adjustment) */
    .action-sidebar {
        bottom: 85px;
    }

    .feed-item {
        border-radius: 0;
        /* Let parent clip it */
        margin-bottom: 0;
        height: 100%;
    }

    .feed-item {
        border-radius: 16px;
        margin-bottom: 20px;
        height: 100%;
    }

    /* On desktop, overlay controls might need adjustment if desired outside video, 
       but recreating "phone on desktop" is usually what people mean by "tiktok style" for desktop web 
       OR the actual tiktok web layout which puts info on the side.
       For "Ecommerce", keeping the immersive card is safer for the "Same to same" request initially.
    */
    .action-sidebar {
        right: -60px;
        /* Move icons outside the video on desktop? No, keep inside for now */
        right: 10px;
    }

    /* Scrollbar visible on desktop? No, keeping it clean */
}

/* Animations */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounce-subtle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.anim-heart {
    color: var(--brand-color);
    animation: heartbeat 0.3s;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }

}

/* CTA Buttons Container */
.cta-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
    align-items: flex-start;
}

.shop-cta {
    background: #ff2d55;
    /* TikTok-style pink-red */
    color: white;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255, 45, 85, 0.5);
    border: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: shop-pulse 2s infinite;
}

.shop-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 45, 85, 0.6);
}

.shop-cta:active {
    transform: scale(0.95);
}

.details-link {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    animation: details-pulse 3s infinite;
}

.details-link:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
    transform: scale(1.05);
}

@keyframes shop-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(255, 45, 85, 0.4);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 12px 35px rgba(255, 45, 85, 0.6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(255, 45, 85, 0.4);
    }
}

@keyframes details-pulse {
    0% {
        transform: translateY(0);
        border-color: rgba(255, 255, 255, 0.5);
    }

    50% {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.9);
    }

    100% {
        transform: translateY(0);
        border-color: rgba(255, 255, 255, 0.5);
    }
}

.btn-secondary {
    display: none;
}

/* Success Modal */
.success-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #1a1a1a;
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #333;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

.success-modal.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.success-icon {
    width: 80px;
    height: 80px;
    background: rgba(37, 244, 238, 0.1);
    color: var(--accent-cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 20px;
    animation: success-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s backwards;
}

@keyframes success-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.success-msg {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.track-btn {
    background: #333;
    color: white;
    border: 1px solid #555;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.track-btn:hover {
    background: #444;
    border-color: #666;
}

.close-success {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #666;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Product Details Drawer */
.product-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #ffffff !important;
    z-index: 12000 !important;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: none;
    visibility: hidden; /* Hide by default */
}

.product-drawer.active {
    transform: translateY(0);
    visibility: visible;
}

@media (min-width: 768px) {
    .product-drawer {
        width: 100%;
        max-width: 100%;
        /* Ensure it covers full screen if needed or partial */
        /* But design seems to want full cover on desktop too? */
        /* Let's match the mobile behavior for consistency first, then refine */
    }
}

/* Reviews Sidebar Styles */
.product-reviews-sidebar {
    display: none;
    /* Hidden on mobile */
}

.product-main-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    flex: 1;
    background: #ffffff;
}

@media (min-width: 1024px) {
    .product-drawer {
        flex-direction: row;
        /* Side by side layout */
    }

    .product-reviews-sidebar {
        display: flex;
        flex-direction: column;
        width: 400px;
        background: #fcfcfc;
        border-right: 1px solid #eee;
        height: 100%;
        flex-shrink: 0;
    }

    .reviews-header {
        padding: 24px;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
    }

    .reviews-list {
        flex: 1;
        overflow-y: auto;
        padding: 20px;
    }

    .review-card {
        background: #fff;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .review-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .review-top>div:first-child {
        display: flex;
        align-items: center;
    }

    .review-top .avatar {
        width: 40px;
        height: 40px;
        background: #e0f7fa;
        color: #006064;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1rem;
        margin-right: 12px;
    }

    .review-text {
        font-size: 0.95rem;
        color: #000;
        line-height: 1.5;
    }
}

.product-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    background: #ffffff;
    color: #333;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.product-drawer-buy-btn {
    margin-top: 30px;
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 4px 15px rgba(254, 44, 85, 0.3);
}

.product-gallery {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 25px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.product-gallery::-webkit-scrollbar {
    display: none;
}

.gallery-img {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.details-image-container {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    margin-bottom: 20px;
}

.details-image-container img {
    width: 100%;
    display: block;
    margin-top: 5px;
    border-radius: 0 !important;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

/* Reviews Drawer */
.reviews-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    /* Slightly taller */
    background: #ffffff !important;
    border-radius: 24px 24px 0 0;
    z-index: 13000 !important;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .reviews-drawer {
        left: 50%;
        transform: translateX(-50%);
        max-width: 500px;
        background: #ffffff;
    }
}

.reviews-drawer.active {
    transform: translateY(0) !important;
}

.review-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.review-card {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.review-name {
    font-weight: 700;
    font-size: 1rem;
    color: #111;
    font-family: 'Outfit', sans-serif;
}

.review-date {
    font-size: 0.8rem;
    color: #999;
}

.review-stats-summary {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.avg-rating-pill {
    background: #000;
    color: #fff;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.review-tabs-modern {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: #f1f1f2;
    border-radius: 12px;
    margin-bottom: 20px;
}

.review-tab-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #666;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.review-tab-btn.active {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.write-review-box {
    padding: 20px;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
}

.star-rating-input {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    justify-content: center;
}

.star-rating-input i {
    color: #ccc;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.star-rating-input i.active {
    color: #FFD700;
}

.review-input {
    width: 100%;
    background: #f1f1f2;
    /* Input background */
    border: 1px solid transparent;
    padding: 12px;
    border-radius: 8px;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-family: inherit;
}

.review-input:focus {
    border-color: var(--text-primary);
    outline: none;
}

.send-review-btn {
    width: 100%;
    background: var(--brand-color);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

/* ============================
   Desktop Extras (Right Side) 
   ============================ */

.desktop-extras {
    display: none;
    /* Hidden on mobile */
}

@media (min-width: 1200px) {
    .video-feed {
        margin: 0 !important;
        /* Width is handled by wrapper now, but ensure feed fills it */
        width: 100%;
    }

    .desktop-extras {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 0 0 380px;
        width: 380px;
        height: 85vh;
        margin-left: 20px;
        margin-right: 20px;
        /* Added spacing from right edge */
        position: relative;
    }
}

/* 1. Animated Order Button */
.desktop-order-btn {
    background: var(--brand-color);
    color: white;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    padding: 20px;
    width: 100%;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(254, 44, 85, 0.3);
    animation: pulse-attention 2s infinite ease-in-out;
    transition: transform 0.2s;
}

.desktop-order-btn:hover {
    transform: scale(1.02);
}

.desktop-order-btn i {
    font-size: 2rem;
}

/* 2. Scrolling Reviews Container */
.desktop-reviews-container {
    flex: 1;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Slightly more defined border */
    border-radius: 20px;
    /* Slightly more curved */
    padding: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    /* Softer, deeper shadow */
}

.reviews-header-summary {
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    padding: 24px !important;
}

.reviews-header-summary h3 {
    font-family: 'Outfit', sans-serif;
    color: #111;
    font-size: 1.25rem !important;
}

.reviews-header-summary .trust-stars {
    display: flex;
    gap: 3px;
    color: #00b67a;
    font-size: 1.1rem;
}

/* Fade masks at top and bottom of marquee */
.reviews-marquee::before,
.reviews-marquee::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 2;
    pointer-events: none;
}

.reviews-marquee::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffff, transparent);
}

.reviews-marquee::after {
    bottom: 0;
    background: linear-gradient(to top, #ffffff, transparent);
}

.reviews-marquee {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.marquee-content {
    animation: scroll-up 20s linear infinite;
}

/* Pause on hover */
.desktop-reviews-container:hover .marquee-content {
    animation-play-state: paused;
}

.review-card-mini {
    background: #ffffff;
    padding: 18px;
    border-radius: 16px;
    margin-bottom: 16px;
    border: 1px solid #f2f2f2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.review-card-mini:hover {
    border-color: #e0e0e0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.review-mini-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.review-mini-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #333;
    font-size: 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.review-mini-meta {
    display: flex;
    flex-direction: column;
}

.review-mini-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #161823;
    /* Dark text */
}

.review-mini-stars {
    color: #FFD700;
    /* Standard Gold Star */
    font-size: 0.75rem;
}

.verified-tag {
    margin-left: auto;
    background: rgba(0, 182, 122, 0.1);
    color: #00b67a;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.review-card-mini p {
    font-size: 0.9rem;
    color: #555;
    /* Darker text for white bg */
    line-height: 1.4;
    margin: 0;
}

.review-mini-media {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.review-mini-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

/* Animations */
@keyframes pulse-attention {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(254, 44, 85, 0.7);
    }

    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 15px rgba(254, 44, 85, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(254, 44, 85, 0);
    }
}

@keyframes scroll-up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }

    /* Matches the duplicated content height assumption */
}

/* Desktop Video Navigation */
.desktop-nav-arrows {
    display: none;
}

@media (min-width: 1100px) {
    .desktop-nav-arrows {
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: absolute;
        right: -60px;
        /* Outside video container */
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }

    .nav-arrow {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(40, 40, 40, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        backdrop-filter: blur(5px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .nav-arrow:hover {
        background: var(--brand-color);
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(254, 44, 85, 0.5);
    }

    .nav-arrow:active {
        transform: scale(0.9);
    }
}

/* ============================
   AI Support Button Animation
   ============================ */

.ai-animated-btn i {
    font-size: 1.6rem;
    background: linear-gradient(135deg, #4285F4, #DB4437, #F4B400, #0F9D58);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: google-ai-shimmer 3s ease infinite;
}

.ai-animated-btn span {
    font-weight: 700 !important;
    background: linear-gradient(135deg, #4285F4, #DB4437, #F4B400, #0F9D58);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: google-ai-shimmer 3s ease infinite;
}

@keyframes google-ai-shimmer {
    0% {
        background-position: 0% 50%;
        transform: scale(1);
    }

    50% {
        background-position: 100% 50%;
        transform: scale(1.15);
        /* Pulse effect */
    }

    100% {
        background-position: 0% 50%;
        transform: scale(1);
    }
}

/* Pulse animation for notification dot */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Google AI shimmer background for action buttons */
@keyframes google-ai-shimmer-bg {
    0% {
        background-position: 0% 50%;
    }

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

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

/* --- Professional Full Page Modal Styles --- */
.full-page-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 5000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.full-page-modal.active {
    display: flex;
}

@media (min-width: 768px) {
    .full-page-modal {
        left: 340px;
        width: calc(100% - 340px);
    }
}

@keyframes slideUpModal {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.page-modal-header {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #222;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 10000;
}

.header-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header-side h2 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0;
}

.breadcrumb {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.close-page-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.close-page-btn:hover {
    background: #333;
    transform: rotate(90deg);
}

.page-body-container {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Page Hero Section */
.page-hero {
    height: 350px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
}

.hero-text-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-text-content h1 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 10px;
    color: #fff !important;
}

.hero-text-content p {
    font-size: 1.1rem;
    color: #ccc;
    font-weight: 500;
}

/* Main Content Area */
.page-main-content {
    max-width: 1200px;
    margin: -60px auto 0;
    padding: 0 20px 60px;
    position: relative;
    z-index: 10;
}

.content-wrapper-card {
    background: #0a0a0a;
    border: 1px solid #222;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .content-wrapper-card {
        padding: 25px;
        margin-top: -30px;
    }

    .hero-text-content h1 {
        font-size: 2rem;
    }

    .page-hero {
        height: 250px;
    }
}

/* Rich Text Styles */
.rich-text-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ccc;
}

.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3 {
    color: #fff !important;
    margin: 30px 0 15px;
    font-weight: 800;
}

.rich-text-content h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--brand-color);
    display: inline-block;
    padding-bottom: 5px;
}

.rich-text-content h3 {
    font-size: 1.5rem;
}

.rich-text-content p {
    margin-bottom: 20px;
}

.rich-text-content strong {
    color: #fff;
}

.page-footer {
    padding: 60px 20px;
    text-align: center;
    border-top: 1px solid #1a1a1a;
    margin-top: 40px;
    background: #050505;
}

/* Success Modal & 3D Celebration */
@keyframes iconPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-icon-anim i {
    animation: iconPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#receipt-content {
    background: #ffffff;
    border-radius: 20px;
}

#successQrCode {
    transition: transform 0.3s ease;
}

#successQrCode:hover {
    transform: scale(1.1);
}

/* Media Modal - Slide Up Effect */
.media-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    transform: translateY(100%);
    /* Slide up start position */
}

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

.media-modal-content {
    width: 100%;
    max-width: 800px;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.media-modal-content img,
.media-modal-content video {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.close-media-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 20001;
    backdrop-filter: blur(5px);
    transition: background 0.2s;
}

.close-media-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}




/* Money Back Guarantee Badge Animations */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes pulse {

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

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

/* Ensure all order drawer text is dark on white background */
.order-drawer,
.order-drawer * {
    color: #000 !important;
}

.order-drawer .form-label,
.order-drawer .payment-title,
.order-drawer .summary-row,
.order-drawer .bank-info-row {
    color: #333 !important;
}

.order-drawer .payment-desc,
.order-drawer .form-input::placeholder {
    color: #666 !important;
}

/* Keep brand color for specific elements */
.order-drawer .summary-row.total,
.order-drawer .submit-btn {
    color: #fff !important;
}

/* Hide Product Summary on Desktop (As Requested) */
@media (min-width: 768px) {

    /* Ensure drawer content is visible on desktop only when parent is active */
    .order-drawer .drawer-content {
        display: flex !important;
    }

    .order-drawer .drawer-header {
        display: flex !important;
        background: #ffffff !important;
    }
}

/* Hide floating Order Now button on mobile view */
@media (max-width: 767px) {
    .shop-cta {
        display: none !important;
    }
}

/* Fix missing icons in mobile view - Enhanced */
@media (max-width: 768px) {
    .action-sidebar {
        position: absolute !important;
        z-index: 2000 !important;
        right: 10px !important;
        bottom: 140px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 50px !important;
        align-items: center !important;
        pointer-events: auto !important;
    }

    .icon-wrapper {
        background: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 2px !important;
        backdrop-filter: blur(4px);
    }

    .icon-wrapper i {
        color: #fff !important;
        font-size: 1.6rem !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        display: block !important;
    }

    .action-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        cursor: pointer !important;
    }

    .action-btn span {
        font-size: 0.75rem !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
        font-weight: 700 !important;
        display: block !important;
        text-align: center;
        width: 100%;
        color: #fff !important;
        margin-top: 2px !important;
    }
}

/* Ensure review text is black in review cards */
.review-card .review-text {
    color: #000000 !important;
}