/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

:root {
    /* Color Palette - Light grays with black/white contrast */
    --bg-primary: #f8f9fa;
    --bg-secondary: #e9ecef;
    --surface-primary: #ffffff;
    --surface-secondary: #f1f3f4;
    --surface-glass: rgba(255, 255, 255, 0.8);
    --surface-glass-hover: rgba(255, 255, 255, 0.9);
    --text-primary: #232323;
    --text-secondary: #6c757d;
    --text-tertiary: #adb5bd;
    --accent: #495057;
    --accent-light: #868e96;
    --accent-color: #495057;
    --accent-color-dark: #343a40;
    
    /* Glass morphism variables */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-bg-hover: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: blur(20px) saturate(180%);
    
    /* Border and background variables */
    --background-primary: #f8f9fa;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-light: rgba(0, 0, 0, 0.05);
    --border-radius-base: 12px;
    --border-radius-lg: 16px;
    --transition-base: 0.3s ease;
    --success-color: #34c759;
    
    /* Success colors for Apple Pay style animation */
    --success-primary: #34c759;
    --success-dark: #28a745;
    --success-light: #52d174;
    --success-shadow: rgba(52, 199, 89, 0.3);
    --success-glow: rgba(52, 199, 89, 0.6);
    
    --border-light: rgba(0, 0, 0, 0.1);
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.15);
    
    /* Neo-skeuomorphism shadows */
    --neo-shadow-outer: 8px 8px 16px var(--shadow-medium), -8px -8px 16px rgba(255, 255, 255, 0.8);
    --neo-shadow-inner: inset 4px 4px 8px var(--shadow-light), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    --neo-shadow-pressed: inset 8px 8px 16px var(--shadow-medium), inset -8px -8px 16px rgba(255, 255, 255, 0.8);
    
    /* Compact shadow variants for category pills */
    --neo-shadow-compact: 2px 2px 4px var(--shadow-light), -2px -2px 4px rgba(255, 255, 255, 0.8);
    --neo-shadow-compact-hover: 3px 3px 6px var(--shadow-medium), -3px -3px 6px rgba(255, 255, 255, 0.9);
    --neo-shadow-compact-pressed: inset 2px 2px 4px var(--shadow-light), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Layout constants */
    --header-height: 80px;
    --header-height-mobile: 64px;
    --sidebar-width: 280px;
    
    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1400px; /* Increased to utilize more screen space */
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* App Layout Structure */
.app {
    display: flex;
    min-height: 100vh;
    position: relative;
}

/* Main Content - Account for fixed mobile header */
@media (max-width: 1199px) {
    .main-content {
        /* Add top padding to account for fixed mobile header */
        padding-top: 80px;
        position: relative;
        z-index: 10;
    }
}

@media (max-width: 767px) {
    .main-content {
        /* Adjust for potentially smaller mobile header */
        padding-top: 64px;
    }
    
    /* Update mobile burger dropdown position for smaller screens */
    .mobile-burger-dropdown {
        top: 64px; /* CONSISTENT: Already matches universal mobile header height */
    }
}

/* Desktop Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid var(--border-light);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transition: var(--transition-normal);
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.05);
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-lg);
    gap: var(--spacing-xl);
}

.sidebar-header {
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
}

.sidebar-logo {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    margin: 0;
}

/* Sidebar Navigation */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    background: transparent;
}

.sidebar-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface-secondary);
    opacity: 0;
    transition: var(--transition-fast);
    border-radius: var(--radius-lg);
}

.sidebar-nav-link:hover::before,
.sidebar-nav-link.active::before {
    opacity: 1;
}

.sidebar-nav-link:hover,
.sidebar-nav-link.active {
    color: var(--text-primary);
    transform: translateX(4px);
}

.nav-icon {
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
}

.nav-text {
    position: relative;
    z-index: 1;
}

/* Sidebar Restaurant Contact - Enhanced Contact Section */
.sidebar-restaurant-contact {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.sidebar-restaurant-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}


.contact-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-restaurant-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    opacity: 0.9;
}

.contact-info-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-radius: var(--radius-sm);
}


.contact-icon {
    font-size: 16px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.contact-link {
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-sm));
}


.contact-value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.4;
}

/* Sidebar User Section */
.sidebar-user-section {
    margin-top: auto;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.sidebar-profile-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--surface-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    position: relative;
    overflow: hidden;
}

.sidebar-profile-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.sidebar-profile-btn:hover {
    background: var(--surface-glass-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

.sidebar-profile-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: var(--font-size-base);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar-avatar-initial {
    font-family: var(--font-family);
    text-transform: uppercase;
}

.sidebar-status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #28a745;
    border: 2px solid white;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sidebar-profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-profile-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-profile-phone {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    color: var(--text-primary);
    font-weight: 500;
}

.sidebar-login-btn:hover {
    background: var(--surface-glass-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

.sidebar-login-icon {
    font-size: var(--font-size-lg);
}

/* Main Content Layout */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Responsive Layout Classes */
.mobile-tablet-only {
    display: none;
}

.desktop-only {
    display: flex;
}

/* Mobile/Tablet Responsive Breakpoint */
@media (max-width: 1199px) {
    /* Show mobile layout, hide desktop */
    .desktop-checkout-layout {
        display: none !important;
    }
    
    .mobile-checkout-layout {
        display: block;
    }
    :root {
        --sidebar-width: 0px;
    }
    
    .sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .mobile-tablet-only {
        display: block;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    /* Restore fullscreen modal behavior on mobile */
    .fullscreen-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--surface-primary);
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }
    
    .fullscreen-modal-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    
    .fullscreen-modal-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--spacing-lg);
    }
    
    /* Show mobile header nav on tablet */
    .nav.mobile-hidden {
        display: flex;
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px !important;
    }
    
    .nav.mobile-hidden {
        display: none;
    }
    
    /* Extra strong sidebar hiding for mobile */
    .sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        z-index: -1 !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Header */
.header {
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: var(--transition-normal);
}

/* Mobile Header - Fixed positioning above all content */
@media (max-width: 1199px) {
    .header.mobile-tablet-only {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 150; /* Higher than categories to stay on top */
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        /* Ensure proper glassmorphism on mobile */
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.logo {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.nav {
    display: flex;
    gap: var(--spacing-xl);
}

.nav-link {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition-fast);
    position: relative;
    padding: var(--spacing-sm) 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: var(--radius-sm);
}


/* Cart Button - Neo-skeuomorphism */
.cart-btn {
    position: relative;
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-full);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
}


/* Enhanced cart button feedback */
.cart-btn {
    cursor: pointer;
    user-select: none;
}

.cart-btn:hover .cart-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.cart-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.cart-icon {
    font-size: 20px;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #dc3545; /* Red accent for visibility */
    color: white;
    border-radius: var(--radius-full);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    border: 2px solid var(--surface-primary);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    transition: all var(--transition-fast);
    z-index: 10;
}

/* Hide original fixed cart on desktop, show categories cart */
@media (min-width: 1024px) {
    
    .categories-cart-btn.desktop-only {
        display: flex !important;
        margin-right: 15px; /* Отступ справа 15px */
    }
    
    .cart-btn.desktop-only {
        display: none !important;
    }
}

/* Hide categories cart button on mobile/tablet */
@media (max-width: 1023px) {
    .categories-cart-btn {
        display: none;
    }
}

.cart-count.show {
    opacity: 1;
    transform: scale(1);
}

.cart-count.urgent {
    background: #c82333;
    animation: cartUrgentPulse 1.5s ease-in-out infinite;
    font-size: 10px;
    box-shadow: 0 2px 12px rgba(200, 35, 51, 0.4);
}

/* Cart counter animations */
@keyframes cartCountPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes cartBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes cartUrgentPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 2px 8px rgba(200, 35, 51, 0.4);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 4px 16px rgba(200, 35, 51, 0.6);
    }
}

/* Login Button - Neo-skeuomorphism */
.login-btn {
    position: relative;
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    min-width: 100px;
    height: 56px;
    overflow: hidden;
}

.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.login-btn:hover::before {
    left: 100%;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.login-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.login-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.login-btn.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-tertiary);
    border-top: 2px solid var(--text-primary);
    border-radius: 50%;
    display: inline-block;
    margin-left: var(--spacing-sm);
    animation: loginSpin 1s linear infinite;
}

.login-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.login-text {
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

/* Profile Button - Neo-skeuomorphic Design */
.profile-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-normal) ease;
    box-shadow: var(--neo-shadow-outer);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 56px;
    overflow: hidden;
}

.profile-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.profile-btn:hover::before {
    left: 100%;
}

.profile-btn:hover {
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.profile-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.profile-btn-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), #ff6b87);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--neo-shadow-inner);
    flex-shrink: 0;
}

.profile-avatar-initial {
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.profile-status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #28a745;
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.profile-btn-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.profile-btn-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-btn-phone {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes loginSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Authentication Animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes successPulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(40, 167, 69, 0.3);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

@keyframes errorPulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.3);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

@keyframes loadingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes successBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes focusSlide {
    0% { 
        border-color: var(--border-light);
        box-shadow: none;
    }
    100% { 
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.1);
    }
}

@keyframes completionPulse {
    0% { 
        background-color: var(--surface-primary);
        border-color: var(--border-light);
    }
    50% { 
        background-color: rgba(40, 167, 69, 0.1);
        border-color: #28a745;
    }
    100% { 
        background-color: var(--surface-primary);
        border-color: var(--border-light);
    }
}

@keyframes typingActive {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes pasteSuccess {
    0% { 
        background-color: var(--surface-primary);
        border-color: var(--border-light);
    }
    50% { 
        background-color: rgba(40, 167, 69, 0.1);
        border-color: #28a745;
        transform: scale(1.02);
    }
    100% { 
        background-color: var(--surface-primary);
        border-color: var(--border-light);
        transform: scale(1);
    }
}

@keyframes pasteError {
    0% { 
        background-color: var(--surface-primary);
        border-color: var(--border-light);
    }
    50% { 
        background-color: rgba(220, 53, 69, 0.1);
        border-color: #dc3545;
    }
    100% { 
        background-color: var(--surface-primary);
        border-color: var(--border-light);
    }
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideInMessage {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOutMessage {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}









/* Section Title */
.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 300;
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

/* Categories Strip - Fixed Mobile Horizontal Scroll + Sticky Positioning */
.categories-strip {
    position: sticky;
    top: 0; /* Desktop: No header offset needed for sidebar layout */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content container */
    gap: var(--spacing-lg);
    
    /* Main strip styling */
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    
    /* Desktop: Full width strip */
    padding: var(--spacing-lg) 0;
    height: 80px;
    width: 100%; /* Full width */
    
    /* Smooth transitions */
    transition: all var(--transition-fast);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    
    /* Performance optimizations */
    contain: layout style;
    transform: translateZ(0);
    will-change: transform;
}

/* Categories Scroll Container - Enhanced horizontal scrolling */
.categories-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 8px var(--spacing-xl); /* Add horizontal padding to maintain content alignment */
    margin: -8px 0; /* Negative margins to maintain container height */
    max-width: 1400px; /* Match main content max-width */
    width: 100%;
    
    /* Enhanced scrollbar hiding and touch scrolling */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    
    /* CRITICAL: Ensure proper scrolling on all devices */
    touch-action: pan-x; /* Allow horizontal pan only */
    scroll-snap-type: x proximity;
    
    /* Performance optimizations for smooth scrolling */
    transform: translateZ(0);
    will-change: scroll-position;
}

.categories-scroll::-webkit-scrollbar {
    display: none;
}

/* Category Container - Full height with shadow space */
.category-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 6px 0; /* Vertical padding for shadow space */
}

/* Desktop (≥1200px): Full width with centered content */
@media (min-width: 1200px) {
    .categories-strip {
        padding: var(--spacing-xl) 0; /* Remove horizontal padding - handled by scroll container */
        height: 96px;
        width: 100%; /* Ensure full width */
        justify-content: center; /* Center the scroll container */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); /* Enhanced shadow for depth */
    }
    
    .categories-scroll {
        padding: 8px var(--spacing-2xl); /* Large desktop padding */
        max-width: 1400px; /* Content max width */
    }
    
    .category-container {
        padding: 8px 0;
    }
}

/* Extra large screens (≥1600px): Wider content area */
@media (min-width: 1600px) {
    .categories-scroll {
        max-width: 1600px; /* Wider max width for large screens */
        padding: 8px var(--spacing-3xl); /* Extra padding on sides */
    }
}

/* Tablet/Mobile (<1200px): Positioned below header with edge-to-edge scroll */
@media (max-width: 1199px) {
    .categories-strip {
        top: 64px; /* FIXED: Match exact universal mobile header height - no gaps */
        padding: var(--spacing-lg) 0; /* CRITICAL: Remove horizontal padding for full-width scroll */
        height: 72px;
        z-index: 85; /* Lower than mobile burger menu (140) to avoid conflicts */
        
        /* Enhanced glassmorphism for mobile */
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        
        /* Enable full-width layout for categories */
        max-width: none;
        margin: 0;
    }
    
    .categories-scroll {
        /* Add horizontal padding to scroll container instead */
        padding: 8px var(--spacing-lg); /* Move horizontal padding here */
        margin: -8px 0;
    }
}

/* Mobile (<768px): Compact design with proper horizontal scrolling */
@media (max-width: 767px) {
    .categories-strip {
        top: 64px; /* FIXED: Match exact universal mobile header height - no gaps */
        padding: var(--spacing-md) 0; /* CRITICAL: No horizontal padding for edge-to-edge scroll */
        height: 64px;
        z-index: 85; /* Lower than mobile burger menu (140) to avoid conflicts */
        
        /* Mobile-optimized glassmorphism */
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        
        /* Performance optimizations */
        transform: translateZ(0);
        will-change: transform;
        
        /* Full-width layout */
        max-width: none;
        margin: 0;
    }
    
    .categories-scroll {
        gap: 6px;
        /* Move horizontal padding to scroll container for proper edge-to-edge scroll */
        padding: 6px var(--spacing-md); 
        margin: -6px 0;
        
        /* Enhanced touch scrolling for mobile */
        overscroll-behavior-x: auto;
        scroll-snap-type: x proximity;
    }
}

/* Small Mobile (<480px): Ultra compact design with edge-to-edge scrolling */
@media (max-width: 480px) {
    .categories-strip {
        padding: var(--spacing-sm) 0; /* CRITICAL: No horizontal padding */
        height: 56px;
        
        /* Full-width layout */
        max-width: none;
        margin: 0;
    }
    
    .categories-scroll {
        gap: 4px;
        /* Move horizontal padding to scroll container */
        padding: 4px var(--spacing-sm);
        margin: -4px 0;
        
        /* Enhanced touch scrolling for small devices */
        overscroll-behavior-x: auto;
        scroll-snap-type: x proximity;
    }
    
    .category-container {
        padding: 4px 0;
    }
}

/* Dynamic z-index reduction when dropdown is active */
.categories-strip.dropdown-lowered {
    z-index: 50;
    transition: z-index 0.1s ease;
}

/* BULLETPROOF APPROACH 2: Aggressively lower ALL competing elements when dropdown is active */
body.dropdown-active .categories-strip,
body.dropdown-active .header,
body.dropdown-active .modal,
body.dropdown-active .cart-sidebar,
body.dropdown-active .mobile-cart-bottom-bar,
body.dropdown-active .mobile-burger-dropdown {
    z-index: 1 !important;
    position: relative !important; /* Force restack */
}

/* BULLETPROOF APPROACH 3: Emergency fallback - hide problematic elements entirely when dropdown is open */
@media (max-width: 768px) {
    body.dropdown-active .categories-strip {
        visibility: hidden !important;
        opacity: 0 !important;
        transition: visibility 0s, opacity 0.1s ease !important;
    }
}

/* Desktop fallback: Force competing elements behind dropdown */
@media (min-width: 769px) {
    body.dropdown-active .categories-strip {
        z-index: -1 !important;
        transform: translateZ(-1px) !important;
    }
}

/* BULLETPROOF APPROACH 4: Create a dedicated dropdown root container */
.dropdown-portal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
    contain: none !important;
}

.dropdown-portal .user-dropdown {
    pointer-events: auto !important;
}

/* TARGETED BULLETPROOF MEASURE: Only affect problematic sticky elements */
body.dropdown-active .categories-strip {
    /* Break out of any transform-induced stacking context */
    transform: none !important;
    contain: none !important;
    /* Force re-positioning in stacking order */
    position: relative !important;
}



.categories-cart-btn {
    flex-shrink: 0;
    background: rgba(248, 249, 250, 0.9);
    border: none;
    border-radius: var(--radius-full);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    z-index: 20;
    /* Enhanced glassmorphism */
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.categories-cart-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.95);
    /* Enhanced glassmorphism on hover */
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.categories-cart-btn:active {
    transform: translateY(0) scale(0.95);
    box-shadow: var(--neo-shadow-pressed);
}

.categories-cart-btn .cart-icon {
    font-size: 20px;
    transition: transform var(--transition-fast);
}

.categories-cart-btn:hover .cart-icon {
    transform: scale(1.1);
}

.categories-cart-btn .cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #dc3545;
    color: white;
    border-radius: var(--radius-full);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    border: 2px solid var(--surface-primary);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    transition: all var(--transition-fast);
    z-index: 10;
}





.categories-scroll::-webkit-scrollbar {
    display: none;
}


/* Category Pills - Modern Text-Based Design with Enhanced Mobile UX */
.category-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Small gap between icon and text when both are shown */
    /* Desktop: Prominent sizing for better visual hierarchy */
    padding: 12px 20px 12px 14px; /* Reduced left padding by 30% (20px -> 14px) */
    height: 48px; /* Balanced height for desktop */
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    /* Enhanced glassmorphism background */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xl);
    /* Enhanced typography for text prominence */
    font-size: 0.875rem; /* 14px for optimal readability */
    font-weight: 600; /* Strong weight for text prominence */
    line-height: 1.3; /* Optimized line height */
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    /* CRITICAL FIX: Modern neo-skeuomorphic shadows with proper spacing */
    box-shadow: var(--neo-shadow-compact);
    margin: 8px 10px 8px 8px; /* Enhanced shadow clearance: 8px top/bottom, 10px right, 8px left */
    min-width: 90px; /* Adequate width for Russian text */
    flex-shrink: 0;
    /* Stacking context optimization for proper shadow rendering */
    isolation: isolate;
    /* CRITICAL FIX: Ensure buttons are fully interactive */
    z-index: 10; /* Ensure clickability over other elements */
    pointer-events: auto; /* Ensure buttons respond to clicks */
    /* Touch optimization for mobile */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* CRITICAL FIX: Prevent accidental touch triggers */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Letter spacing for enhanced readability */
    letter-spacing: 0.02em;
}

.category-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Match neo-skeuomorphic design */
}

.category-pill:hover {
    transform: translateY(-2px); /* Enhanced hover lift */
    box-shadow: var(--neo-shadow-compact-hover);
    border-color: var(--accent-light);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    /* Enhanced text contrast on hover */
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.category-pill:active {
    transform: translateY(0) scale(0.98); /* Subtle scale feedback */
    box-shadow: var(--neo-shadow-compact-pressed);
    /* Visual feedback for touch interaction */
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--accent);
}

/* Active category pill - flat design without shadows */
.category-pill.active {
    background: #232323;
    color: white;
    border-color: #232323;
    font-weight: 700; /* Strong weight for active state */
    transform: none; /* No lift effect */
    box-shadow: none; /* Remove all shadows */
    backdrop-filter: none; /* Remove glassmorphism for active state */
    /* Enhanced active state styling */
    letter-spacing: 0.025em;
}

.category-pill.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
}

.category-pill.active:hover {
    transform: none; /* No hover effects for active state */
    box-shadow: none; /* No shadows on hover */
}

/* Enhanced "Все блюда" category */
.category-pill-all {
    background: rgba(255, 255, 255, 0.98); /* Slightly more opaque */
    border: 1px solid rgba(0, 0, 0, 0.15); /* Slightly darker border */
    font-weight: 700; /* Bolder to distinguish */
}

.category-pill-all.active {
    background: #232323;
    border-color: #232323;
}

/* Category icons and text */
.category-pill .category-icon {
    display: none !important; /* Hide emoji icons completely on all devices */
}

.category-pill .category-name {
    font-family: var(--font-family);
    font-weight: 600; /* Strong presence for text-first design */
    letter-spacing: 0.01em; /* Optimized spacing for readability */
    line-height: 1.3; /* Enhanced readability */
    text-transform: none; /* Preserve original Russian capitalization */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    /* Enhanced text rendering */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Text is primary content */
    color: inherit;
}

/* Desktop: Hide icon-specific hover effects since icons are hidden */
@media (max-width: 1023px) {
    .category-pill:hover .category-icon {
        transform: scale(1.1);
    }

    .category-pill.active .category-icon {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    }
}

/* Category animations */
@keyframes categorySelectPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes categorySelect {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Desktop optimization for category pills - text-first design */
@media (min-width: 1024px) {
    .category-pill {
        /* Desktop full height optimization */
        padding: 14px 24px 14px 17px; /* Reduced left padding by 30% (24px -> 17px) */
        height: 100%; /* Use full height available from category-container */
        font-size: 1rem; /* 16px for optimal desktop readability */
        font-weight: 600; /* Strong weight for text prominence */
        line-height: 1.4; /* Optimal line height for text centering */
        gap: 10px; /* Adequate space between icon and text when both shown */
        min-width: 110px; /* Adequate width for Russian category names */
    }
    
    
    .category-pill .category-icon {
        display: none; /* Hide emoji icons on all devices */
    }
    
    .category-pill .category-name {
        font-size: 16px; /* Match parent font size for consistency */
        font-weight: 600; /* Strong weight for text prominence */
        line-height: 1.4; /* Optimal readability */
    }
    
    .categories-container {
        padding: 0; /* No horizontal padding on desktop */
    }
}

/* Tablet optimization - intermediate sizing between mobile and desktop */
@media (min-width: 769px) and (max-width: 1023px) {
    .category-pill {
        height: 100%; /* Use full height available from category-container */
        padding: 12px 12px 12px 8px; /* Reduced left padding by 30% (12px -> 8px) */
        font-size: 14px; /* 14px intermediate font size as specified */
        font-weight: 600;
        line-height: 1.4;
    }
    
    
    .category-pill .category-name {
        font-size: 14px; /* Match parent font size for consistency */
        font-weight: 600; /* Stronger weight for prominence */
        line-height: 1.4;
    }
    
    .category-pill .category-icon {
        display: none; /* Hide emoji icons on tablets for text-focused design */
    }
}

/* Responsive design for category pills - text-focused mobile design */
@media (max-width: 768px) {
    .categories-container {
        padding: 0; /* No horizontal padding on mobile */
    }
    
    
    .category-pill {
        /* Mobile (≤768px): Full height optimization */
        height: 100%; /* Use full height available from category-container */
        padding: 12px 16px 12px 11px; /* Reduced left padding by 30% (16px -> 11px) */
        min-width: 90px; /* Adequate width for Russian text */
        font-size: 14px; /* Legible font size */
        font-weight: 600; /* Enhanced weight for mobile readability */
        line-height: 1.2;
        
        /* Enhanced mobile visual design with neo-skeuomorphism */
        background: var(--surface-elevated);
        border-radius: var(--radius-lg);
        box-shadow: var(--neo-shadow-outer);
        border: 1px solid rgba(255, 255, 255, 0.3);
        
        /* Advanced touch and scroll optimization */
        transition: all var(--transition-fast);
        scroll-snap-align: center; /* Center snap for better UX */
        scroll-margin: 0 10px; /* Margin for scroll snapping */
        
        /* Touch interaction optimization */
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation; /* Prevent zoom on double-tap */
        
        /* Ensure interactivity and positioning */
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        
        /* Prevent layout shifts */
        contain: layout style;
        /* Mobile touch optimization */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        -webkit-touch-callout: none;
        user-select: none;
        /* Improved touch feedback */
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .category-pill .category-icon {
        display: none; /* Hide emoji icons on mobile */
    }
    
    
}

@media (max-width: 480px) {
    .categories-container {
        padding: 0; /* No horizontal padding on small mobile */
        min-height: auto; /* No forced height */
    }
    
    
    
    /* Keep text visible on very small screens, prioritize readability over icons */
    .category-pill .category-name {
        display: block; /* Always show text names for better UX */
        font-size: 0.75rem; /* 12px for small screens */
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
    }
    
    .category-pill {
        /* Small mobile full height optimization */
        height: 100%; /* Use full height available from category-container */
        padding: 6px 12px 6px 8px; /* Reduced left padding by 30% (12px -> 8px) */
        justify-content: center;
        min-width: 70px; /* Adequate width for short Russian text */
        border-radius: var(--radius-lg);
        font-size: 0.75rem;
        /* Compact shadows using new variables */
        box-shadow: var(--neo-shadow-compact);
    }
    
    .category-pill .category-icon {
        display: none; /* Hide icons completely on small screens */
    }
    
    .category-pill:hover,
    .category-pill:focus {
        transform: translateY(-2px); /* Enhanced hover/focus for mobile */
        box-shadow: var(--neo-shadow-compact-hover);
        background: rgba(255, 255, 255, 0.95);
        border-color: var(--accent-light);
    }
    
    .category-pill:active {
        transform: translateY(0) scale(0.96); /* Touch feedback */
        box-shadow: var(--neo-shadow-compact-pressed);
        background: rgba(255, 255, 255, 0.85);
        transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Enhanced Authentication Input States */
.form-group input.error-highlight {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25) !important;
    animation: errorPulse 0.6s ease;
}

.form-group input.success-highlight,
.code-input.success-highlight,
.form-group textarea.success-highlight,
.payment-option.success-highlight {
    /* Enhanced success styling with glassmorphism */
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.05) !important;
    box-shadow: 
        0 0 0 3px rgba(34, 197, 94, 0.3),
        0 4px 12px rgba(34, 197, 94, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    
    /* Success animation with refined timing */
    animation: 
        successInputPulse 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        successInputGlow 1.2s ease-in-out;
    
    /* Enhanced text styling */
    color: #059669 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

@keyframes successInputPulse {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    25% {
        transform: scale(1.02);
        opacity: 0.95;
    }
    50% { 
        transform: scale(1.04);
        opacity: 0.9;
    }
    75% {
        transform: scale(1.01);
        opacity: 0.98;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes successInputGlow {
    0% {
        box-shadow: 
            0 0 0 3px rgba(34, 197, 94, 0.3),
            0 4px 12px rgba(34, 197, 94, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    50% {
        box-shadow: 
            0 0 0 4px rgba(34, 197, 94, 0.4),
            0 6px 18px rgba(34, 197, 94, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    100% {
        box-shadow: 
            0 0 0 3px rgba(34, 197, 94, 0.3),
            0 4px 12px rgba(34, 197, 94, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
}

.form-group input.shake-animation {
    animation: shake 0.5s ease;
}

.form-group input.typing-active {
    animation: typingActive 0.2s ease;
}

.form-group input.focus-slide {
    animation: focusSlide 0.3s ease;
}

.form-group input.completion-pulse {
    animation: completionPulse 0.4s ease;
}

.form-group input.paste-success {
    animation: pasteSuccess 0.5s ease;
}

.form-group input.paste-error {
    animation: pasteError 0.5s ease;
}

.form-group input.partial {
    border-color: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.15);
}

.form-group input.valid {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}

.form-group input.invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

/* Enhanced form group states */

.form-group.has-warning {
    position: relative;
}

.form-group.has-error {
    position: relative;
}

.form-group.input-focused {
    position: relative;
}

.form-group.input-focused::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(45deg, transparent, rgba(73, 80, 87, 0.05), transparent);
    pointer-events: none;
    z-index: 1;
    animation: inputGlow 2s ease-in-out infinite alternate;
}

/* Code inputs container animations */
.code-inputs-container.error-shake {
    animation: errorShake 0.6s ease;
}

/* Enhanced button states */
.login-btn.loading-pulse {
    animation: loadingPulse 1.5s ease-in-out infinite;
}

.login-btn.success-bounce,
.submit-order-btn.success-bounce,
#verifyCodeBtn.success-bounce {
    /* Enhanced success state with glassmorphism */
    background: #28a745 !important;
    color: white !important;
    border: 1px solid rgba(40, 167, 69, 0.4) !important;
    
    /* Success animation with refined timing */
    animation: 
        successButtonBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        successButtonGlow 1s ease-in-out;
    
    /* Enhanced success shadow */
    box-shadow: 
        0 8px 25px rgba(40, 167, 69, 0.3),
        0 4px 12px rgba(40, 167, 69, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    
    /* Success icon enhancement */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: perspective(1000px);
}

@keyframes successButtonBounce {
    0% { 
        transform: scale(1) perspective(1000px);
    }
    25% {
        transform: scale(1.05) perspective(1000px) translateY(-2px);
    }
    50% { 
        transform: scale(1.08) perspective(1000px) translateY(-4px);
    }
    75% {
        transform: scale(1.02) perspective(1000px) translateY(-1px);
    }
    100% { 
        transform: scale(1) perspective(1000px) translateY(0);
    }
}

@keyframes successButtonGlow {
    0% {
        box-shadow: 
            0 8px 25px rgba(40, 167, 69, 0.3),
            0 4px 12px rgba(40, 167, 69, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 12px 35px rgba(40, 167, 69, 0.4),
            0 6px 18px rgba(40, 167, 69, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    100% {
        box-shadow: 
            0 8px 25px rgba(40, 167, 69, 0.3),
            0 4px 12px rgba(40, 167, 69, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* Order Success Animation States (SMS-style) */
.submit-order-btn.loading,
.mobile-checkout-btn.loading,
.continue-checkout-btn.loading {
    background: var(--primary-color) !important;
    color: white !important;
    pointer-events: none;
    animation: loadingPulse 1.5s ease-in-out infinite;
}

.submit-order-btn.success,
.mobile-checkout-btn.success,
.continue-checkout-btn.success {
    background: var(--success-primary) !important;
    color: white !important;
    border: 1px solid var(--success-dark) !important;
    pointer-events: none;
    
    /* Success animation like SMS verification */
    animation: 
        successButtonBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        successButtonGlow 1s ease-in-out;
    
    box-shadow: 
        0 8px 25px var(--success-shadow),
        0 4px 12px rgba(52, 199, 89, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Modal success state - removed to prevent conflicts */

/* Enhanced Single Notification Container System */
.validation-notification-container {
    position: relative;
    min-height: 44px;
    margin-top: var(--spacing-sm);
    overflow: hidden;
    /* Prevent layout shifts during animation */
    contain: layout style;
}

.validation-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    
    /* Enhanced glassmorphism design with 12px backdrop blur */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 3px 12px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    
    /* Enhanced transitions with organic easing */
    transition: 
        opacity 200ms cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 200ms cubic-bezier(0.25, 0.8, 0.25, 1),
        background-color 250ms cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 250ms cubic-bezier(0.25, 0.8, 0.25, 1),
        color 250ms cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Fixed positioning to prevent stacking */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
    
    /* Content replacement instead of stacking */
    will-change: opacity, transform;
    contain: layout style paint;
}

/* Progressive Visual Hierarchy - State-specific styling with enhanced neo-skeuomorphism */
.validation-hint.neutral {
    background: rgba(134, 142, 150, 0.08);
    border-color: rgba(134, 142, 150, 0.18);
    color: var(--text-secondary);
    box-shadow: 
        0 2px 8px rgba(134, 142, 150, 0.06),
        0 1px 3px rgba(134, 142, 150, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(134, 142, 150, 0.08);
}

.validation-hint.warning {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.28);
    color: #856404;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 193, 7, 0.1);
    /* Removed pulse animation */
}

.validation-hint.success {
    background: rgba(40, 167, 69, 0.12);
    border-color: rgba(40, 167, 69, 0.28);
    color: #155724;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(40, 167, 69, 0.12);
    /* Removed celebration animation */
}

.validation-hint.error {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.28);
    color: #721c24;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(220, 53, 69, 0.1);
    /* Subtle shake for errors */
    animation: errorShake 0.4s ease-out;
}

/* Enhanced icon styling with micro-interactions */
.hint-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Icon backgrounds for enhanced visual hierarchy */
.validation-hint.warning .hint-icon {
    background: rgba(255, 193, 7, 0.18);
    box-shadow: 
        0 2px 6px rgba(255, 193, 7, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.validation-hint.success .hint-icon {
    background: rgba(40, 167, 69, 0.18);
    box-shadow: 
        0 3px 8px rgba(40, 167, 69, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: successIconCelebration 0.8s ease-out;
}

.validation-hint.error .hint-icon {
    background: rgba(220, 53, 69, 0.18);
    box-shadow: 
        0 2px 6px rgba(220, 53, 69, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.validation-hint.neutral .hint-icon {
    background: rgba(134, 142, 150, 0.12);
    box-shadow: 
        0 1px 4px rgba(134, 142, 150, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Text content styling */
.hint-text {
    flex: 1;
    line-height: 1.4;
    font-weight: 500;
}

/* Enhanced responsiveness for notifications */
@media (max-width: 480px) {
    .validation-notification-container {
        min-height: 40px;
    }
    
    .validation-hint {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
        gap: var(--spacing-xs);
    }
    
    .hint-icon {
        width: 18px;
        height: 18px;
        font-size: 14px;
    }
    
    /* Mobile responsive for enhanced form elements */
    .optional-badge {
        font-size: 10px;
        padding: 1px 6px;
    }
    
    .field-hint {
        font-size: 11px;
        margin-top: 4px;
    }
    
    .field-error {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .delivery-details-hint {
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-md);
    }
    
    .delivery-details-title {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-sm);
    }
    
    .delivery-details-title .delivery-icon {
        font-size: var(--font-size-sm);
    }
}

/* Enhanced form group styling for validation states */
.form-group.has-neutral input {
    border-color: rgba(134, 142, 150, 0.3);
}

.form-group.has-warning input {
    border-color: rgba(255, 193, 7, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

.form-group.has-success input {
    border-color: rgba(40, 167, 69, 0.4);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.form-group.has-error input {
    border-color: rgba(220, 53, 69, 0.4);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Smooth focus transitions */
.form-group input {
    transition: 
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

/* Phone input focus enhancements */
.form-group input.phone-focused {
    position: relative;
    background: rgba(255, 255, 255, 0.98);
}

.form-group input.focus-glow {
    box-shadow: 
        0 0 0 3px rgba(73, 80, 87, 0.1),
        0 0 20px rgba(73, 80, 87, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border-color: var(--accent);
}

.category-card-all::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
}

.category-card-all::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
        opacity: 0.8;
    }
}

.category-card-all .category-icon {
    font-size: 52px;
    background: linear-gradient(135deg, #495057 0%, #868e96 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.category-card-all .category-name {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--spacing-sm);
}

.category-card-all .category-count {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
    color: var(--surface-primary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border: 2px solid var(--text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: var(--spacing-sm) var(--spacing-md);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    z-index: 5;
}

.category-card-all .category-count::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}

.category-card-all:hover {
    transform: translateY(-5px);
    box-shadow: 20px 20px 40px var(--shadow-strong), -20px -20px 40px rgba(255, 255, 255, 0.95);
    border-color: var(--accent-light);
}

.category-card-all:hover .category-count {
    background: linear-gradient(135deg, var(--accent) 0%, var(--text-primary) 100%);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.category-card-all:hover .category-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Active state */
.category-card:active,
.category-card.active {
    box-shadow: var(--neo-shadow-pressed);
    transform: translateY(1px);
}

.category-card.active {
    background: var(--surface-secondary);
    border: 2px solid var(--accent-light);
}

.category-card.active .category-count {
    background: var(--accent);
    color: var(--surface-primary);
    font-weight: 600;
}

.category-card.active .category-name {
    font-weight: 700;
    color: var(--accent);
}

.category-icon {
    font-size: 44px;
    margin-bottom: var(--spacing-md);
    display: block;
    transition: var(--transition-normal);
    position: relative;
    z-index: 2;
}

.category-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    position: relative;
    z-index: 2;
}

.category-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    text-align: center;
    line-height: 1.2;
    margin-bottom: var(--spacing-xs);
}

.category-count {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 600;
    background: var(--surface-glass);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    white-space: nowrap;
    opacity: 0.9;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.category-count::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.category-card:hover .category-count {
    opacity: 1;
    background: var(--surface-glass-hover);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Enhanced count badges based on volume */
.category-count.high-volume {
    background: linear-gradient(135deg, rgba(73, 80, 87, 0.15) 0%, var(--surface-glass) 100%);
    color: var(--accent);
    font-weight: 700;
    border: 2px solid rgba(73, 80, 87, 0.2);
    box-shadow: 0 4px 12px rgba(73, 80, 87, 0.15);
}

.category-count.medium-volume {
    background: linear-gradient(135deg, rgba(134, 142, 150, 0.1) 0%, var(--surface-glass) 100%);
    color: var(--accent-light);
    font-weight: 600;
    border: 1.5px solid rgba(134, 142, 150, 0.2);
}

.category-count.low-volume {
    background: var(--surface-glass);
    color: var(--text-tertiary);
    font-weight: 500;
    opacity: 0.8;
}

.category-card:hover .category-count.high-volume {
    background: linear-gradient(135deg, rgba(73, 80, 87, 0.2) 0%, var(--surface-glass-hover) 100%);
    box-shadow: 0 6px 20px rgba(73, 80, 87, 0.2);
    transform: translateY(-3px) scale(1.1);
}

.category-card:hover .category-count.medium-volume {
    background: linear-gradient(135deg, rgba(134, 142, 150, 0.15) 0%, var(--surface-glass-hover) 100%);
    transform: translateY(-2px) scale(1.08);
}

.category-card:hover .category-count.low-volume {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
}

/* Menu Section */
.menu {
    padding-bottom: var(--spacing-2xl);
}

/* Menu Sections Layout */
.menu-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

.menu-category-section {
    position: relative;
}

.menu-category-section:first-child .category-section-header {
    margin-top: var(--spacing-lg);
}

/* Category Section Headers */
.category-section-header {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-md) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
    width: auto;
    max-width: 70%;
}

.category-section-header::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid rgba(255, 255, 255, 0.95);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    z-index: -1;
}

.category-section-icon {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(var(--accent-primary-rgb), 0.2);
}

.category-section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

/* First category section has reduced top margin */
.menu-category-section:first-child .category-section-header,
.menu-sections > div:first-child .category-section-header {
    margin-top: var(--spacing-lg);
}

.category-section-count {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px var(--spacing-xs);
    border-radius: var(--radius-sm);
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

/* 
 * EQUAL HEIGHT PRODUCT CARDS IMPLEMENTATION
 * 
 * This implementation ensures all product cards in the same row have equal heights
 * using CSS Grid with flexbox inside each card.
 * 
 * Key components:
 * 1. Grid container: grid-auto-rows: 1fr + align-items: stretch
 * 2. Card structure: display: flex + flex-direction: column + height: 100%
 * 3. Content area: flex: 1 (grows to fill space)
 * 4. Footer: margin-top: auto (sticks to bottom)
 * 5. Description: -webkit-line-clamp for text truncation
 */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Base responsive grid - will be overridden by media queries */
    gap: var(--spacing-xl);
    max-width: none; /* Remove max-width constraint to use full container width */
    margin: 0 auto;
    width: 100%; /* Ensure grid utilizes full container width */
    align-items: stretch; /* Make all grid items same height */
    grid-auto-rows: 1fr; /* Equal row heights - key for equal card heights */
}

/* Enhanced card layout for food delivery - flexible heights */
@media (min-width: 900px) {
    .menu-item {
        /* Remove fixed height constraints - let content determine height */
        display: flex;
        flex-direction: column;
        min-height: 420px; /* Increased height to ensure prices and weights fit properly */
        height: 100%; /* Essential for equal heights in grid layout */
    }
}

/* Advanced grid features for enhanced UX and Equal Heights */
.menu-grid {
    /* Smooth transitions for dynamic content */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Enhanced grid configuration for equal heights */
    grid-auto-flow: row;
    
    /* Ensure proper height distribution for equal card heights */
    align-items: stretch; /* All grid items stretch to fill row height */
    
    /* Container queries support for future-proofing */
    container-type: inline-size;
}

/* Equal Height Cards Implementation
 * This solution uses CSS Grid with align-items: stretch and grid-auto-rows: 1fr
 * to ensure all cards in the same row have equal heights.
 * Combined with Flexbox inside cards for proper content distribution.
 */

/* Grid loading state optimization */
.menu-grid.loading .menu-item {
    opacity: 0;
    transform: translateY(20px);
}

.menu-grid:not(.loading) .menu-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Staggered animation for better perceived performance */
.menu-item:nth-child(1) { animation-delay: 0ms; }
.menu-item:nth-child(2) { animation-delay: 100ms; }
.menu-item:nth-child(3) { animation-delay: 200ms; }
.menu-item:nth-child(4) { animation-delay: 300ms; }
.menu-item:nth-child(n+5) { animation-delay: 400ms; }

/* Menu Item Card - Liquid Glass */
.menu-item {
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-normal);
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    width: 100%; /* Ensure cards use full available width */
    box-sizing: border-box; /* Include padding and border in width calculation */
    animation: fadeInUp 0.6s ease forwards;
    /* Enhanced equal height structure */
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill grid cell completely for equal heights */
}

.menu-item:nth-child(even) {
    animation-delay: 0.1s;
}

.menu-item:nth-child(3n) {
    animation-delay: 0.2s;
}

.menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.menu-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px var(--shadow-medium);
    background: var(--surface-glass-hover);
}

.menu-item-image {
    height: 200px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Prevent image container from shrinking for equal heights */
}

.menu-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    /* Enhanced image presentation for food delivery */
    object-position: center center; /* Ensure food is centered */
    transition: transform 0.3s ease; /* Smooth zoom on hover */
}

/* Subtle hover effect for food images */
.menu-item:hover .menu-item-image img {
    transform: scale(1.05); /* Gentle zoom to highlight food */
}

/* Performance optimization for images */
.menu-item-image {
    /* Optimize for food photography */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    /* Prevent layout shift during image loading */
    contain: layout style paint;
}

/* Loading placeholder for better perceived performance */
.menu-item-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid var(--border-light);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-item-image:not(:has(img)) .emoji-image,
.menu-item-image:not(:has(img)) .emoji-fallback {
    position: relative;
    z-index: 2;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.menu-item-image .emoji-image,
.menu-item-image .emoji-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 64px;
    position: relative;
    z-index: 1;
}

.menu-item-price-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.menu-item-weight {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: var(--spacing-xs);
}

.menu-item-meta {
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0; /* Prevent meta from shrinking */
}

.menu-item-content {
    padding: var(--spacing-lg);
    position: relative;
    z-index: 2;
    flex: 1; /* Grow to fill remaining card space - critical for equal heights */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow flexbox shrinking if needed */
    height: 100%; /* Ensure content area takes full available space */
}

.menu-item-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    flex-shrink: 0; /* Prevent title from shrinking */
    line-height: 1.3; /* Consistent line height for better alignment */
    min-height: calc(var(--font-size-xl) * 1.3); /* Reserve space for single line */
}

.menu-item-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
    flex: 1; /* Grow to push footer to bottom - essential for equal heights */
    overflow-wrap: break-word;
    /* Text truncation for consistent card heights */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Reduced to 3 lines for better consistency */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Ensure minimum height for consistency */
    min-height: calc(1.5em * 3); /* Reserve space for 3 lines */
}

.menu-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Push to bottom for consistent layout - key for equal heights */
    gap: var(--spacing-md); /* Ensure proper spacing between price and button */
    width: 100%; /* Ensure footer takes full width */
    flex-shrink: 0; /* Prevent footer from shrinking */
    padding-top: var(--spacing-md); /* Increased breathing room above footer */
    /* Ensure footer sticks to bottom consistently */
    align-self: flex-end;
    /* Price always on the left, button always on the right */
    flex-direction: row;
}

/* Desktop-specific pricing layout - price stays on left */
@media (min-width: 900px) {
    .menu-item-footer {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .menu-item-price {
        order: 1; /* Price on left side */
        align-self: flex-start;
    }
    
    .add-to-cart-btn,
    .cart-control {
        order: 2; /* Button/control on right side */
        align-self: flex-end;
    }
}

/* Enhanced accessibility for food delivery cards */
.menu-item {
    /* Focus management for keyboard navigation */
    position: relative;
    scroll-margin-top: 120px; /* Account for sticky header when jumping to items */
}

.menu-item:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Improved price visibility - crucial for food delivery */
.menu-item-price {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0; /* Prevent price from shrinking for better alignment */
    align-self: flex-start; /* Ensure price stays on left side */
    order: -1; /* Ensure price always comes first in layout */
    /* Enhanced contrast for price readability */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Touch-optimized add to cart button */
.add-to-cart-btn {
    min-height: 44px; /* WCAG AA minimum touch target */
    min-width: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
    /* Improved tap response */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Ensure button is always on the right */
    order: 2;
    align-self: flex-end;
}


/* Add to Cart Button - Enhanced Design */
.add-to-cart-btn {
    background: #232323;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-sm);
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: 44px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.add-to-cart-btn .add-icon {
    font-size: 16px;
    font-weight: 900;
    transition: var(--transition-fast);
}

.add-to-cart-btn .add-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.add-to-cart-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.add-to-cart-btn:hover::before {
    left: 100%;
}

.add-to-cart-btn:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.add-to-cart-btn:hover .add-icon {
    transform: rotate(90deg) scale(1.1);
}

.add-to-cart-btn:active {
    transform: translateY(0);
    background: #232323;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Quantity Control - Simplified Design */
.quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
    min-height: 44px;
    gap: var(--spacing-sm);
    /* Ensure quantity control is always on the right */
    order: 2;
    align-self: flex-end;
}

.quantity-btn {
    background: var(--surface-primary);
    border: none;
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
    box-shadow: var(--neo-shadow-outer);
}

.quantity-btn:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 12px var(--shadow-medium), -6px -6px 12px rgba(255, 255, 255, 0.9);
}

.quantity-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.quantity-btn.minus {
    color: #dc3545;
}

.quantity-btn.plus {
    color: #28a745;
}

.quantity-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-md);
    min-width: 50px;
}

.quantity-number {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    user-select: none;
    margin-top: 2px;
}

/* Button state change animation */
@keyframes buttonStateChange {
    0% { opacity: 0; transform: scale(0.9); }
    50% { opacity: 0.5; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* Cart Dropdown - Modern Design */
.cart-dropdown {
    position: fixed;
    top: 84px; /* Position below the 64px cart button + 20px top margin */
    right: 20px; /* Align with cart button right edge */
    width: 400px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 120px);
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--neo-shadow-outer), 0 16px 48px var(--shadow-medium);
    z-index: 1001;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
    transform-origin: top right; /* Animate from cart button position */
}

.cart-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Cart Dropdown Backdrop - Subtle */
.cart-dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cart-dropdown-backdrop.show {
    opacity: 1;
    pointer-events: all;
}

/* Cart Dropdown Content Styles */
.cart-dropdown .cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-primary);
}

.cart-dropdown .cart-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* Cart Header Actions Container */
.cart-dropdown .cart-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Redesigned Clear Cart Button - Header Position */
.cart-dropdown .cart-clear-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: all var(--transition-normal);
    position: relative;
    font-size: 14px;
    
    /* Subtle glass effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Subtle shadow for depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cart-dropdown .cart-clear-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.cart-dropdown .cart-clear-btn:active {
    transform: translateY(0);
    background: rgba(239, 68, 68, 0.12);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

/* Clear button icon */
.cart-dropdown .cart-clear-icon {
    font-size: 16px;
    line-height: 1;
}

/* Enhanced close button to match new clear button style */
.cart-dropdown .cart-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-tertiary);
    transition: all var(--transition-normal);
    
    /* Subtle glass effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Subtle shadow for depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cart-dropdown .cart-close:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cart-dropdown .cart-items {
    max-height: 320px;
    padding: var(--spacing-md);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}

.cart-dropdown .cart-items::-webkit-scrollbar {
    width: 6px;
}

.cart-dropdown .cart-items::-webkit-scrollbar-track {
    background: transparent;
}

.cart-dropdown .cart-items::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.cart-dropdown .cart-items::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.cart-dropdown .cart-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-light);
    background: var(--surface-primary);
}

.cart-dropdown .cart-total {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.cart-dropdown .cart-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Simplified cart actions - checkout button only */
.cart-dropdown .checkout-btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    height: 48px;
    font-weight: 600;
}

/* Responsive behavior for cart dropdown */
@media (min-width: 769px) {
    /* Hide sidebar cart on desktop, show dropdown */
    .cart-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Hide dropdown on mobile, use sidebar */
    .cart-dropdown,
    .cart-dropdown-backdrop {
        display: none !important;
    }
}

/* Legacy Cart Sidebar - Liquid Glass (kept for mobile fallback) */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    height: 100vh;
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-left: 1px solid var(--border-light);
    transition: var(--transition-normal);
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.open {
    right: 0;
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-normal);
    z-index: 199;
}

.cart-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.cart-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.cart-clear-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: var(--neo-shadow-small);
}

.cart-clear-btn:hover {
    background: rgba(255, 59, 48, 0.2);
    transform: scale(1.05);
}

.cart-clear-btn:active {
    transform: scale(0.95);
}

.cart-clear-btn svg {
    width: 18px;
    height: 18px;
}

.cart-header h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.cart-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.cart-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.cart-items {
    flex: 1;
    padding: var(--spacing-lg);
    overflow-y: auto;
}

.cart-empty {
    text-align: center;
    color: var(--text-tertiary);
    margin-top: var(--spacing-2xl);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-lg);
    opacity: 0.5;
}

.cart-item {
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border-light);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-info {
    width: 100%;
}

.cart-item-name {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-lg);
}

.cart-item-price {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: space-between;
}

.quantity-btn {
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    transition: var(--transition-fast);
    box-shadow: var(--neo-shadow-outer);
}

.quantity-btn:hover {
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.quantity-btn:active {
    box-shadow: inset 2px 2px 4px var(--shadow-light), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    transform: translateY(0);
}

.quantity {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-lg);
}

.item-total {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

.cart-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
    background: var(--surface-primary);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-light);
}

.checkout-btn {
    width: 100%;
    background: var(--text-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
}

.checkout-btn:hover:not(:disabled) {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.checkout-btn:disabled {
    background: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Modal - Stable Flexbox Positioning System */
.modal {
    /* Stable container positioning - no transform conflicts */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0; /* Ensure full-viewport coverage on all browsers */
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Mobile viewport units */

    /* Initially hidden - display will be set to flex by JavaScript */
    display: none;

    /* Flexbox centering - works consistently across all browsers */
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 32px);
    /* Critical z-index - above overlay for proper modal display */
    z-index: 10000 !important;
    
    /* Ensure proper overflow handling */
    overflow-y: auto;
    
    /* Modal state controls */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    
    /* Smooth transitions without transform conflicts */
    transition: 
        opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Enhanced backdrop - unified transparency */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    
    /* Mobile viewport stability */
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
    
    /* Performance containment - prevents layout shifts */
    contain: layout style paint size;
}

/* Modal visible state - ensure flexbox centering is active */
.modal.show {
    /* Keep flexbox display that was set by JavaScript */
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

/* Desktop modal centering improvements - Fixed and optimized */
@media (min-width: 768px) {
    .modal {
        /* Enhanced desktop padding for better spacing */
        padding: 2rem;
        box-sizing: border-box;
    }
    
    .modal-overlay {
        /* Simplified overlay positioning */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 300;
    }
    
    .modal-content {
        /* Optimal desktop modal sizing */
        width: auto;
        min-width: 450px;
        max-width: 650px;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        margin: 0;
        position: relative;
        flex-shrink: 0;
        transform: none;
    }
    
    /* Specific modal type sizing optimizations */
    #phoneModal .modal-content,
    #codeModal .modal-content,
    #passwordLoginModal .modal-content {
        min-width: 420px;
        max-width: 480px;
    }
    
    #orderModal .modal-content {
        min-width: 520px;
        max-width: 680px;
    }
    
    #ordersModal .modal-content {
        min-width: 600px;
        max-width: 800px;
        max-height: calc(100vh - 3rem);
    }
}

.modal-content {
    /* Mobile-first responsive sizing */
    width: 100%;
    max-width: min(500px, calc(100vw - 2rem));
    min-width: 320px;

    /* Enhanced glassmorphism styling */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);

    /* Sophisticated shadow system */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    /* Stable scrolling constraints */
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    overflow-x: hidden;

    /* Simplified entrance animation - no positioning conflicts */
    transition: opacity 0.3s ease-out;
    opacity: 1;

    /* Content organization */
    display: flex;
    flex-direction: column;
    position: relative;

    /* Performance optimizations */
    will-change: transform, opacity;
    backface-visibility: hidden;
}


.modal.show .modal-content {
    /* Stable final state - no transform conflicts */
    opacity: 1;

    /* Enhanced glass effect when active */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* Optimized depth shadow */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Enhanced success state for authentication feedback - removed to prevent conflicts */

@keyframes successModalPulse {
    0% { 
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    25% {
        transform: scale(1.02) translateY(-3px);
        opacity: 1;
    }
    50% { 
        transform: scale(1.04) translateY(-6px);
        opacity: 0.98;
        box-shadow: 
            0 65px 130px rgba(34, 197, 94, 0.2),
            0 35px 70px rgba(34, 197, 94, 0.15),
            0 18px 36px rgba(34, 197, 94, 0.1),
            inset 0 2px 0 rgba(255, 255, 255, 0.85),
            inset 0 -1px 0 rgba(34, 197, 94, 0.08);
    }
    75% {
        transform: scale(1.01) translateY(-2px);
        opacity: 1;
    }
    100% { 
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes successGlow {
    0% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.08) saturate(1.15);
    }
    100% {
        filter: brightness(1) saturate(1);
    }
}

/* Enhanced Loading States with Glassmorphism - Authentication Flow */
.auth-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Enhanced glassmorphism overlay */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px) saturate(160%) brightness(1.02);
    -webkit-backdrop-filter: blur(16px) saturate(160%) brightness(1.02);
    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    
    /* Smooth state transitions */
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    transition: 
        opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Border radius matching modal content */
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.auth-loading-overlay.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.auth-loading-content {
    text-align: center;
    color: var(--text-primary);
    padding: var(--spacing-lg);
    
    /* Subtle content animation */
    animation: fadeInUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.auth-loading-spinner {
    width: 44px;
    height: 44px;
    
    /* Enhanced glassmorphism spinner */
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(74, 144, 226, 0.15);
    border-top: 2px solid var(--accent);
    border-radius: 50%;
    
    /* Smooth spinning animation */
    animation: 
        spinGlass 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite,
        pulseGlow 2s ease-in-out infinite alternate;
    
    margin: 0 auto var(--spacing-md);
    position: relative;
    
    /* Enhanced shadow for depth */
    box-shadow: 
        0 8px 16px rgba(74, 144, 226, 0.15),
        0 4px 8px rgba(74, 144, 226, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.auth-loading-spinner::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(74, 144, 226, 0.1) 90deg,
        var(--accent) 180deg,
        rgba(74, 144, 226, 0.1) 270deg,
        transparent 360deg
    );
    border-radius: 50%;
    z-index: -1;
    animation: spinGlass 1.2s linear infinite reverse;
}

@keyframes spinGlass {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulseGlow {
    0% { 
        box-shadow: 
            0 8px 16px rgba(74, 144, 226, 0.15),
            0 4px 8px rgba(74, 144, 226, 0.1),
            inset 0 2px 0 rgba(255, 255, 255, 0.4);
    }
    100% { 
        box-shadow: 
            0 12px 24px rgba(74, 144, 226, 0.25),
            0 6px 12px rgba(74, 144, 226, 0.15),
            inset 0 2px 0 rgba(255, 255, 255, 0.5);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-loading-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    opacity: 0.85;
    
    /* Subtle text animation */
    animation: fadeInText 0.8s ease-out 0.2s both;
}

@keyframes fadeInText {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 0.85;
        transform: translateY(0);
    }
}

/* Success State Animation */
.auth-success-state {
    animation: successSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0; /* Ensure full-viewport coverage for overlay */
    width: 100%;
    height: 100%;
    height: 100dvh; /* Dynamic viewport height for mobile */
    height: 100vh; /* Fallback for browsers without dvh support */
    /* Initially hidden - will be shown by JavaScript */
    display: none;
    /* Enhanced authentication backdrop with proper opacity layers */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Critical z-index - above all UI elements including sidebar */
    z-index: 9999 !important;
    
    /* Enhanced overlay effects */
    -webkit-perspective: 1000px;
    perspective: 1000px;
    will-change: opacity, backdrop-filter;
    /* Ensure proper stacking context */
    isolation: isolate;
    
    /* Prevent body scroll on mobile */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    
    /* Cross-browser backdrop-filter fallbacks */
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=12)"; /* IE fallback */
    /* Fallback pattern for browsers without backdrop-filter */
    background-attachment: fixed;
}

.modal-overlay.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Ensure proper stacking context */
    isolation: isolate;
}

/* Mobile optimization for modal overlay */
@media (max-width: 768px) {
    .modal-overlay {
        background: rgba(0, 0, 0, 0.75);
    }
}

/* Enhanced modal overlay for different states with improved effects */
.modal-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
    /* Enhance glassmorphism effect */
    mix-blend-mode: overlay;
}

.modal-overlay.show::before {
    opacity: 1;
}

/* Additional enhancement for modal animation */
.modal.show {
    /* Smooth modal entrance animation */
    animation: modalAppear 0.3s ease-out forwards;
}

/* Disable animation for cart review modal - instant appearance */
#cartReviewModal.show {
    animation: none !important;
    transition: none !important;
}

#cartReviewModal {
    transition: none !important;
}

#cartReviewModal .modal-content {
    transition: none !important;
    animation: none !important;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-content {
    position: relative;
}

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    box-shadow: var(--neo-shadow-outer);
}

.modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 6px 6px 12px var(--shadow-medium), -6px -6px 12px rgba(255, 255, 255, 0.9);
}

.order-form {
    padding: var(--spacing-lg);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
    box-shadow: var(--neo-shadow-inner);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--neo-shadow-inner), 0 0 0 3px rgba(73, 80, 87, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
}

/* Enhanced Order History Display */
.order-address {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.address-main {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.delivery-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.delivery-detail {
    background: rgba(134, 142, 150, 0.1);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(134, 142, 150, 0.15);
}

/* Mobile responsive for order details */
@media (max-width: 480px) {
    .order-address {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
    
    .address-main {
        font-size: var(--font-size-sm);
    }
    
    .delivery-detail {
        font-size: 10px;
        padding: 1px 4px;
    }
}

/* Enhanced form label with optional badge */
.form-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.label-text {
    font-weight: 600;
    color: var(--text-primary);
}

.optional-badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-tertiary);
    background: rgba(134, 142, 150, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* Field hints for better UX */
.field-hint {
    display: block;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    line-height: 1.4;
    opacity: 0.9;
    transition: var(--transition-fast);
}

.field-hint:hover {
    opacity: 1;
}

/* Field error messages */
.field-error {
    display: block;
    color: #dc3545;
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(220, 53, 69, 0.1);
    border-left: 3px solid #dc3545;
    border-radius: var(--radius-sm);
    font-weight: 500;
    animation: slideInError 0.3s ease;
}

@keyframes slideInError {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced validation states for all inputs */
.form-group input.valid,
.form-group textarea.valid {
    border-color: var(--success-primary);
    background: rgba(52, 199, 89, 0.02);
    box-shadow: 
        var(--neo-shadow-inner),
        0 0 0 2px rgba(52, 199, 89, 0.15);
}

.form-group input.invalid,
.form-group textarea.invalid {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.02);
    box-shadow: 
        var(--neo-shadow-inner),
        0 0 0 2px rgba(220, 53, 69, 0.15);
}

/* Address Autocomplete Styles */
.address-autocomplete-container {
    position: relative;
}

/* Address selected state styling */
.address-autocomplete-input.address-selected {
    border-color: var(--success-primary) !important;
    background: rgba(52, 199, 89, 0.02);
    color: var(--text-primary);
}

.address-autocomplete-input.address-selected:focus {
    border-color: var(--success-primary) !important;
    box-shadow: 
        var(--neo-shadow-inner),
        0 0 0 2px rgba(52, 199, 89, 0.15) !important;
}

/* Success bounce animation for checkmark */
@keyframes successBounce {
    0% { 
        transform: scale(0);
        opacity: 0;
    }
    50% { 
        transform: scale(1.2);
        opacity: 1;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

/* Desktop Checkout Layout */
@media (min-width: 1200px) {
    .fullscreen-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    
    .fullscreen-modal-content {
        background: var(--surface-primary);
        border-radius: var(--radius-xl);
        width: 90%;
        max-width: 1200px;
        max-height: 90vh;
        overflow: hidden;
        box-shadow: var(--neo-shadow-outer), 0 24px 64px rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(20px);
    }
    
    .fullscreen-modal-header {
        padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
        border-bottom: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        background: var(--surface-glass);
        backdrop-filter: blur(20px);
    }
    
    .fullscreen-modal-title {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
        flex: 1;
        text-align: center;
    }
    
    .back-btn {
        background: var(--surface-secondary);
        border: none;
        width: 48px;
        height: 48px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition-normal);
        box-shadow: var(--neo-shadow-compact);
        color: var(--text-primary);
        font-size: var(--font-size-lg);
    }
    
    .back-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--neo-shadow-compact-hover);
    }
    
    .header-spacer {
        width: 48px;
    }
    
    .fullscreen-modal-body {
        padding: var(--spacing-xl);
        overflow-y: auto;
        max-height: calc(90vh - 120px);
    }
    
    .desktop-checkout-layout {
        display: grid !important;
        grid-template-columns: 1fr 1.2fr; /* Slightly more space for form */
        gap: var(--spacing-2xl);
        align-items: start;
        width: 100%;
    }
    
    .checkout-left-panel {
        background: var(--surface-glass);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        box-shadow: var(--neo-shadow-inner);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-light);
        position: sticky;
        top: var(--spacing-lg);
        max-height: calc(100vh - var(--spacing-2xl));
        overflow-y: auto;
    }
    
    .checkout-right-panel {
        background: var(--surface-primary);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        box-shadow: var(--neo-shadow-outer);
        border: 1px solid var(--border-light);
    }
    
    .panel-title {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--spacing-lg) 0;
        padding-bottom: var(--spacing-md);
        border-bottom: 2px solid var(--border-light);
    }
    
    .order-items-list {
        margin-bottom: var(--spacing-xl);
    }
    
    .desktop-order-item {
        display: flex;
        align-items: center;
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
        background: rgba(255, 255, 255, 0.5);
        border-radius: var(--radius-md);
        transition: var(--transition-fast);
    }
    
    .desktop-order-item:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-1px);
    }
    
    .desktop-item-image {
        width: 60px;
        height: 60px;
        border-radius: var(--radius-md);
        object-fit: cover;
        margin-right: var(--spacing-md);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .desktop-item-details {
        flex: 1;
        min-width: 0;
    }
    
    .desktop-item-name {
        font-weight: 600;
        color: var(--text-primary);
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-xs);
        word-wrap: break-word;
    }
    
    .desktop-item-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }
    
    .desktop-item-quantity {
        background: var(--accent);
        color: white;
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        font-weight: 600;
        font-size: var(--font-size-xs);
    }
    
    .desktop-item-price {
        font-weight: 700;
        color: var(--text-primary);
    }
    
    .order-summary-desktop {
        padding-top: var(--spacing-lg);
        border-top: 2px solid var(--border-light);
    }
    
    .order-total-desktop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--text-primary);
        background: var(--surface-secondary);
        padding: var(--spacing-lg);
        border-radius: var(--radius-md);
        box-shadow: var(--neo-shadow-inner);
    }
    
    .total-label {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    .total-label::before {
        content: '💰';
        font-size: var(--font-size-lg);
    }
    
    .total-amount {
        color: var(--success-primary);
        font-weight: 800;
    }
    
    .desktop-form {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .desktop-form-submit {
        margin-top: var(--spacing-xl);
        height: 64px;
        font-size: var(--font-size-lg);
        font-weight: 700;
        background: var(--text-primary);
        color: white;
        border: none;
        border-radius: var(--radius-xl);
        cursor: pointer;
        transition: var(--transition-normal);
        box-shadow: var(--neo-shadow-outer);
        position: relative;
        overflow: hidden;
    }
    
    .desktop-form-submit::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.6s ease;
    }
    
    .desktop-form-submit:hover::before {
        left: 100%;
    }
    
    .desktop-form-submit:hover {
        background: var(--accent);
        transform: translateY(-2px);
        box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
    }
    
    .desktop-form-submit:active {
        transform: translateY(0);
        box-shadow: var(--neo-shadow-pressed);
    }
    
    /* Hide mobile layout on desktop */
    .mobile-checkout-layout {
        display: none;
    }
}\n\n/* Medium desktop breakpoint */\n@media (min-width: 1200px) and (max-width: 1400px) {\n    .desktop-checkout-layout {\n        gap: var(--spacing-xl);\n    }\n    \n    .fullscreen-modal-content {\n        width: 95%;\n        max-width: 1100px;\n    }\n    \n    .checkout-left-panel,\n    .checkout-right-panel {\n        padding: var(--spacing-lg);\n    }\n}\n\n/* Large desktop optimization */\n@media (min-width: 1400px) {\n    .fullscreen-modal-content {\n        max-width: 1300px;\n    }\n    \n    .desktop-checkout-layout {\n        gap: calc(var(--spacing-2xl) * 1.5);\n    }\n}\n\n/* Empty cart message styling */\n.empty-cart-message {\n    text-align: center;\n    color: var(--text-secondary);\n    font-style: italic;\n    padding: var(--spacing-xl);\n    background: var(--surface-secondary);\n    border-radius: var(--radius-md);\n    margin: var(--spacing-lg) 0;\n}

.address-autocomplete-input {
    position: relative;
    z-index: 2;
}

/* Enhanced Address Input System */
/* Address input wrapper with validation indicator */
.address-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    transition: var(--transition-fast);
    z-index: 100; /* Create stacking context for dropdown positioning */
}

.address-input-wrapper:focus-within {
    transform: translateY(-1px);
}

/* Address selected state styling */
.address-input-wrapper input.address-selected {
    background: rgba(52, 199, 89, 0.05) !important;
    border-color: rgba(52, 199, 89, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Hide dropdown when address is selected */
input.address-selected + .address-autocomplete-dropdown {
    display: none !important;
}

.address-input-wrapper input {
    flex: 1;
    padding-right: 48px; /* Space for validation indicator */
}

/* Validation Indicator Styles */
.address-validation-indicator {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.validation-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--transition-fast);
    font-size: var(--font-size-base);
    font-weight: 600;
}

.validation-icon.active {
    opacity: 1;
    transform: scale(1);
}

.validation-icon.success-icon {
    color: var(--success-primary);
    background: rgba(52, 199, 89, 0.1);
    border-radius: var(--radius-full);
    border: 2px solid rgba(52, 199, 89, 0.2);
    animation: successBounce 0.4s ease-out;
}

.validation-icon.error-icon {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border-radius: var(--radius-full);
    border: 2px solid rgba(220, 53, 69, 0.2);
}

.validation-icon.loading-icon {
    background: none;
    border: none;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-light);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius-full);
    animation: validationSpinner 1s linear infinite;
}

@keyframes validationSpinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Address validation states */
.address-input-wrapper input[data-validation-state="valid"] {
    border-color: var(--success-primary);
    background: rgba(52, 199, 89, 0.02);
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.1);
}

.address-input-wrapper input[data-validation-state="invalid"] {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.02);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.address-input-wrapper input[data-validation-state="loading"] {
    border-color: var(--accent-light);
    background: rgba(73, 80, 87, 0.02);
}

/* Enhanced form hints */
.form-hint {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
    transition: var(--transition-fast);
    position: relative;
    z-index: 10; /* Lower than dropdown (1200) to stay behind it */
}

.form-hint.success {
    color: var(--success-primary);
    font-weight: 500;
}

.form-hint.error {
    color: #dc3545;
    font-weight: 500;
}

/* Delivery Details Section */
.delivery-details-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    box-shadow: 
        var(--neo-shadow-outer),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.delivery-details-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.delivery-details-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.delivery-details-title .delivery-icon {
    font-size: var(--font-size-base);
    opacity: 0.8;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.delivery-details-hint {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.delivery-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.delivery-details-grid .form-group {
    margin-bottom: 0;
}

.delivery-details-grid .form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.delivery-details-grid .form-group input {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
}

.delivery-details-grid .form-group input:focus {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--accent);
    box-shadow: 
        0 0 0 3px rgba(73, 80, 87, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.delivery-details-grid .form-group input::placeholder {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.address-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1200; /* Increased from 1100 to be above all form elements */
    background: var(--surface-primary);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--neo-shadow-outer);
    max-height: 300px;
    overflow-y: auto;
    margin-top: var(--spacing-xs);
    opacity: 0;
    transform: translateY(-8px);
    transition: var(--transition-fast);
    pointer-events: none;
    /* Force light theme colors */
    color: var(--text-primary) !important;
}

.address-autocomplete-dropdown.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.address-autocomplete-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition-fast);
    position: relative;
    color: var(--text-primary) !important;
    background: transparent !important;
}

.address-autocomplete-item:last-child {
    border-bottom: none;
}

.address-autocomplete-item:hover,
.address-autocomplete-item.highlighted {
    background: var(--surface-glass-hover);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.address-autocomplete-item.highlighted {
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--surface-secondary);
}

.address-icon {
    font-size: var(--font-size-lg);
    margin-right: var(--spacing-md);
    flex-shrink: 0;
    opacity: 0.7;
}

.address-details {
    flex: 1;
    min-width: 0;
}

.address-main {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    word-break: break-word;
}

.address-full {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    opacity: 0.8;
    word-break: break-word;
}

/* Special states */
.address-autocomplete-item.loading {
    justify-content: center;
    padding: var(--spacing-lg);
    cursor: default;
}

.address-autocomplete-item.no-results,
.address-autocomplete-item.error {
    justify-content: center;
    padding: var(--spacing-lg);
    cursor: default;
    color: var(--text-secondary);
    flex-direction: column;
}

.no-results-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xs);
}

.no-results-title {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.no-results-hint {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Delivery zone warning styles */
.delivery-zone-warning {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1001;
    background: linear-gradient(135deg, 
        rgba(255, 193, 7, 0.95) 0%, 
        rgba(255, 152, 0, 0.95) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    margin-top: var(--spacing-xs);
    
    /* Neo-skeuomorphism warning styling */
    box-shadow: 
        var(--neo-shadow-outer),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(255, 193, 7, 0.2);
        
    color: #8B4513;
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: center;
    animation: slideDown 0.3s ease-out;
    display: none;
}

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

/* Make sure the input container has relative positioning */
.form-group {
    position: relative;
}

.address-autocomplete-item.error {
    color: #dc3545;
}

/* Loading spinner */
.address-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-light);
    border-top: 2px solid var(--accent);
    border-radius: 50%;
    animation: addressSpinner 1s linear infinite;
    margin-right: var(--spacing-sm);
}

@keyframes addressSpinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .address-autocomplete-dropdown {
        margin-top: var(--spacing-sm);
        border-radius: var(--radius-lg);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.12),
            0 4px 16px rgba(0, 0, 0, 0.08);
    }
    
    .address-autocomplete-item {
        padding: var(--spacing-lg);
        min-height: 56px;
    }
    
    .address-icon {
        font-size: var(--font-size-xl);
        margin-right: var(--spacing-lg);
    }
    
    .address-main {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-sm);
    }
    
    .address-full {
        font-size: var(--font-size-sm);
        line-height: 1.4;
    }
    
    /* Mobile responsive delivery details */
    .delivery-details-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .delivery-details-section {
        padding: var(--spacing-lg);
        margin: var(--spacing-lg) 0;
    }
    
    .delivery-details-title {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-md);
    }
    
    .address-validation-indicator {
        right: var(--spacing-sm);
        width: 20px;
        height: 20px;
    }
    
    .address-input-wrapper input {
        padding-right: 36px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .address-autocomplete-dropdown {
        border-width: 0.5px;
    }
}

/* Accessibility improvements */
.address-autocomplete-item:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Dark theme support removed - app uses light theme only */

.order-summary {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.order-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xl);
    font-weight: 700;
}

/* Checkout Order Items Styles */
.checkout-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-ultra-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--neo-shadow-inner);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-fast);
}

.checkout-order-item:hover {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--neo-shadow-outer);
}

.checkout-order-item:last-child {
    margin-bottom: 0;
}

.checkout-item-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

.checkout-item-image {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--neo-shadow-outer);
    flex-shrink: 0;
}

.checkout-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.checkout-item-details {
    flex: 1;
}

.checkout-item-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
    line-height: 1.3;
}

.checkout-item-price {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

.checkout-item-quantity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
}

.quantity-display {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-sm);
    min-width: 40px;
    text-align: center;
}

.item-total-price {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.empty-order {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: var(--spacing-xl);
}

.submit-order-btn {
    width: 100%;
    background: var(--text-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    position: relative;
    overflow: hidden;
}

.submit-order-btn:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

/* Apple Pay style success animation */
.submit-order-btn.success-animation {
    background: var(--success-primary) !important;
    color: white !important;
    border: 2px solid var(--success-dark) !important;
    transform: scale(1.02) !important;
    box-shadow: 
        0 0 0 4px var(--success-glow),
        8px 8px 16px var(--success-shadow), 
        -8px -8px 16px rgba(255, 255, 255, 0.9) !important;
    animation: successPulse 0.6s ease-out;
    pointer-events: none;
}

.submit-order-btn.success-animation .btn-content {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease-out;
}

.submit-order-btn.success-animation .success-icon {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease-out 0.1s;
}

.submit-order-btn .success-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    font-size: var(--font-size-xl);
    color: white;
    transition: all 0.3s ease-out;
}

/* Mobile checkout button success animation */
.mobile-checkout-btn.success-animation {
    background: var(--success-primary) !important;
    color: white !important;
    border: 2px solid var(--success-dark) !important;
    transform: scale(1.02) !important;
    box-shadow: 
        0 0 0 4px var(--success-glow),
        8px 8px 16px var(--success-shadow), 
        -8px -8px 16px rgba(255, 255, 255, 0.9) !important;
    animation: successPulse 0.6s ease-out;
    pointer-events: none;
}

.mobile-checkout-btn.success-animation .checkout-btn-content {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease-out;
}

.mobile-checkout-btn.success-animation .success-icon {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease-out 0.1s;
}

.mobile-checkout-btn .success-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    font-size: var(--font-size-xl);
    color: white;
    transition: all 0.3s ease-out;
}

/* Continue checkout button success animation */
.continue-checkout-btn.success-animation {
    background: var(--success-primary) !important;
    color: white !important;
    border: 2px solid var(--success-dark) !important;
    transform: scale(1.02) !important;
    box-shadow: 
        0 0 0 4px var(--success-glow),
        8px 8px 16px var(--success-shadow), 
        -8px -8px 16px rgba(255, 255, 255, 0.9) !important;
    animation: successPulse 0.6s ease-out;
    pointer-events: none;
}

.continue-checkout-btn.success-animation .btn-content {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease-out;
}

.continue-checkout-btn.success-animation .success-icon {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease-out 0.1s;
}

.continue-checkout-btn .success-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    font-size: var(--font-size-xl);
    color: white;
    transition: all 0.3s ease-out;
}

@keyframes successPulse {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 0 0 var(--success-glow),
            8px 8px 16px var(--shadow-medium), 
            -8px -8px 16px rgba(255, 255, 255, 0.9);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 0 0 8px var(--success-glow),
            12px 12px 24px var(--success-shadow), 
            -12px -12px 24px rgba(255, 255, 255, 0.9);
    }
    100% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 4px var(--success-glow),
            8px 8px 16px var(--success-shadow), 
            -8px -8px 16px rgba(255, 255, 255, 0.9);
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes categorySelect {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes categorySelectPulse {
    0% {
        transform: scale(1);
        box-shadow: var(--neo-shadow-outer);
    }
    25% {
        transform: scale(0.95);
        box-shadow: var(--neo-shadow-pressed);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 16px 16px 32px var(--shadow-medium), -16px -16px 32px rgba(255, 255, 255, 0.9);
    }
    100% {
        transform: scale(1);
        box-shadow: var(--neo-shadow-outer);
    }
}

.category-card:active {
    animation: categorySelect 0.2s ease;
}

.pulse {
    animation: pulse 0.3s ease;
}

/* Ultra-wide Desktop - 4 items per row (capped for readability) */
@media (min-width: 1600px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        max-width: none; /* Use full container width */
        gap: var(--spacing-2xl);
    }
    
    .menu-item {
        width: 100%; /* Allow cards to use full grid area width */
        max-width: none; /* Remove width constraint to utilize full space */
    }
}

/* Very large screens - maintain 4 columns but center better */
@media (min-width: 2000px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        max-width: none; /* Use full container width */
        gap: var(--spacing-2xl);
        margin: 0 auto;
    }
    
    .menu-item {
        width: 100%; /* Allow cards to use full grid area width */
        max-width: none; /* Remove width constraint to utilize full space */
    }
}

/* Large Desktop - 4 items per row */
@media (min-width: 1200px) and (max-width: 1599px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        max-width: none; /* Use full container width */
        gap: var(--spacing-xl);
    }
    
    .menu-item {
        width: 100%; /* Allow cards to use full grid area width */
    }
}

/* Desktop - 3 items per row (optimal for food delivery) */
@media (min-width: 900px) and (max-width: 1199px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-width: none; /* Use full container width */
        gap: var(--spacing-xl);
    }
    
    .menu-item {
        width: 100%; /* Allow cards to use full grid area width */
    }
}

/* Tablet Responsive Design - 2 items per row (optimal for touch) */
@media (min-width: 600px) and (max-width: 899px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: var(--spacing-lg);
        max-width: 900px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-xl); /* Increased for better food image viewing */
        max-width: none; /* Use full container width */
        margin: 0 auto;
    }
    
    /* Larger touch targets for tablets with equal heights */
    .menu-item {
        min-height: 400px; /* Increased for tablets to fit all content */
        width: 100%; /* Allow cards to use full grid area width */
        height: 100%; /* Maintain equal height structure on tablets */
        display: flex; /* Ensure flexbox layout is maintained */
        flex-direction: column; /* Maintain vertical stacking */
    }
    
    .add-to-cart-btn {
        min-height: 48px; /* WCAG AA compliant touch target */
        min-width: 48px;
    }
}
    
    .category-card {
        min-height: 110px;
        padding: var(--spacing-md);
    }
    
    .category-icon {
        font-size: 38px;
    }
    
    .category-name {
        font-size: var(--font-size-sm);
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .header-content {
        height: 64px;
    }
    
    .nav {
        display: none;
    }
    
    /* Login button mobile adaptation */
    .login-btn {
        border-radius: var(--radius-full);
        width: 56px;
        height: 56px;
        min-width: 56px;
        padding: 0;
        gap: 0;
    }
    
    .login-text {
        display: none;
    }
    
    .login-icon {
        font-size: 20px;
    }
    
    /* Profile button mobile adaptation - hide completely on mobile */
    .profile-btn {
        display: none !important;
    }
    }
    
    
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: var(--spacing-md);
        max-width: none;
    }
    
    .category-card {
        padding: var(--spacing-md);
        min-height: 100px;
    }
    
    .category-icon {
        font-size: 32px;
        margin-bottom: var(--spacing-sm);
    }
    
    .category-name {
        font-size: var(--font-size-sm);
    }
    
    .category-count {
        font-size: var(--font-size-xs);
        padding: 2px var(--spacing-xs);
    }
    
    .category-card-all .category-icon {
        font-size: 36px;
    }
    
    /* Small tablet/Large mobile - flexible 1-2 items per row */
    .menu-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-lg);
        max-width: none; /* Use full container width */
        margin: 0 auto;
    }
    
    /* Tablet pricing layout - ensure price stays left */
    .menu-item-footer {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
    
    .menu-item-price {
        order: 1 !important; /* Price always on left for tablet */
        align-self: flex-start !important;
    }
    
    .add-to-cart-btn,
    .cart-control {
        order: 2 !important; /* Button/control always on right for tablet */
        align-self: flex-end !important;
    }
    
    /* Ensure cards don't become too wide on larger phones */
    @media (min-width: 480px) and (max-width: 599px) {
        .menu-grid {
            max-width: none; /* Use full container width for better space utilization */
        }
    }

    /* Mobile category headers */
    .category-section-header {
        padding: var(--spacing-sm) var(--spacing-lg);
        gap: var(--spacing-xs);
        border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0;
        margin-bottom: var(--spacing-lg);
        margin-top: var(--spacing-xl);
        max-width: 80%;
    }
    
    .category-section-header::after {
        right: -15px;
        border-left-width: 15px;
        border-top-width: 15px;
        border-bottom-width: 15px;
    }
    
    .menu-category-section:first-child .category-section-header,
    .menu-sections > div:first-child .category-section-header {
        margin-top: var(--spacing-md);
    }
    
    .category-section-icon {
        width: 24px;
        height: 24px;
        font-size: 1rem;
        border-radius: var(--radius-xs);
    }
    
    .category-section-title {
        font-size: var(--font-size-base);
        font-weight: 600;
    }
    
    .category-section-count {
        padding: 1px var(--spacing-xs);
        font-size: var(--font-size-xs);
        min-width: 16px;
    }
    
    .menu-sections {
        gap: var(--spacing-2xl);
    }
    
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
    
    
    .food-emoji {
        font-size: 80px;
    }
    
    
    .modal {
        /* Mobile-optimized padding for keyboard compatibility */
        padding: var(--spacing-sm);
        
        /* Enhanced viewport stability for mobile */
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .modal .modal-content {
        /* Mobile modal sizing */
        width: calc(100vw - 2rem);
        max-width: 500px;
        
        /* Better mobile glass effects */
        backdrop-filter: blur(35px) saturate(180%) brightness(1.05);
        -webkit-backdrop-filter: blur(35px) saturate(180%) brightness(1.05);
        
        /* Enhanced mobile constraints */
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
    }
    
    .modal.show .modal-content {
        backdrop-filter: blur(40px) saturate(200%) brightness(1.08);
        -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.08);
    }
    
    .modal-overlay {
        /* Enhanced mobile backdrop with fallbacks */
        background: rgba(0, 0, 0, 0.6); /* Darker on mobile for better readability */
        backdrop-filter: blur(10px) saturate(150%);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        /* Fallback for browsers without backdrop-filter support */
        background-color: rgba(0, 0, 0, 0.6);
    }
    
    .modal-overlay.show {
        backdrop-filter: blur(10px) saturate(150%);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
    }
    
    /* Mobile-specific authentication modal improvements */
    #phoneModal .modal-content,
    #codeModal .modal-content,
    #passwordLoginModal .modal-content {
        /* Better mobile glassmorphism */
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(25px) saturate(200%) brightness(105%);
        -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(105%);
        border: 1px solid rgba(255, 255, 255, 0.9);
        /* Mobile shadow optimizations */
        box-shadow: 
            0 20px 40px rgba(0, 0, 0, 0.15),
            0 4px 16px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }

    /* Extra small mobile category headers */
    .category-section-header {
        padding: var(--spacing-xs) var(--spacing-md);
        gap: var(--spacing-xs);
        border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0;
        flex-direction: row;
        text-align: left;
        margin-bottom: var(--spacing-md);
        margin-top: var(--spacing-lg);
        max-width: 85%;
    }
    
    .category-section-header::after {
        right: -12px;
        border-left-width: 12px;
        border-top-width: 12px;
        border-bottom-width: 12px;
    }
    
    .menu-category-section:first-child .category-section-header {
        margin-top: var(--spacing-sm);
    }
    
    .category-section-icon {
        width: 22px;
        height: 22px;
        font-size: 0.9rem;
        border-radius: var(--radius-xs);
    }
    
    .category-section-title {
        font-size: var(--font-size-sm);
        font-weight: 600;
        order: 0;
    }
    
    .category-section-count {
        margin-top: 0;
        padding: 1px 4px;
        min-width: 14px;
    }
    
    .menu-sections {
        gap: var(--spacing-xl);
    }

    /* Enhanced User Dropdown - Mobile responsive */
    .user-dropdown {
        position: fixed;
        top: calc(var(--header-height, 64px) + var(--spacing-sm));
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        min-width: auto;
        max-width: none;
        width: auto;
        transform: translateY(-20px) scale(0.95);
        border-radius: var(--radius-lg);
        /* Reduce shadow intensity for mobile */
        box-shadow: 
            0 15px 30px rgba(0, 0, 0, 0.1),
            0 8px 16px rgba(0, 0, 0, 0.08),
            inset 1px 1px 4px rgba(255, 255, 255, 0.3),
            inset -1px -1px 4px rgba(0, 0, 0, 0.02);
    }
    
    .dropdown-header {
        padding: var(--spacing-md);
    }
    
    .user-dropdown-item {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .item-icon {
        font-size: var(--font-size-base);
        width: 20px;
    }
    
    .item-title {
        font-size: var(--font-size-sm);
    }
    
    .item-subtitle {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    
    .food-emoji {
        font-size: 60px;
    }
    
    .dish-info h3 {
        font-size: var(--font-size-lg);
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: var(--spacing-sm);
    }
    
    /* Mobile - 1 item per row for maximum food image impact */
    .menu-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg); /* Increased spacing for better visual separation */
        max-width: 500px; /* Reasonable limit for single column on mobile */
        margin: 0 auto;
    }
    
    /* Enhanced mobile card presentation with equal heights */
    .menu-item {
        min-height: 400px; /* Increased for mobile to fit all content */
        transform: none; /* Disable hover animations on mobile for performance */
        height: 100%; /* Maintain equal height structure on mobile */
        display: flex; /* Ensure flexbox layout is maintained */
        flex-direction: column; /* Maintain vertical stacking */
    }
    
    /* Mobile pricing layout - ensure price stays left */
    .menu-item-footer {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
    
    .menu-item-price {
        order: 1 !important; /* Price always on left for mobile */
        align-self: flex-start !important;
    }
    
    .add-to-cart-btn,
    .cart-control {
        order: 2 !important; /* Button/control always on right for mobile */
        align-self: flex-end !important;
    }
    
    .menu-item-image {
        height: 180px; /* Slightly reduced to optimize for mobile viewing */
    }
    
    .category-card-all {
        grid-column: span 2;
    }
    
    .category-card {
        min-height: 90px;
        padding: var(--spacing-sm);
    }
    
    .category-icon {
        font-size: 28px;
        margin-bottom: var(--spacing-xs);
    }
    
    .category-name {
        font-size: var(--font-size-xs);
        line-height: 1.1;
    }
    
    .category-count {
        display: none; /* Hide counts on very small screens */
    }
    
    .category-card-all .category-count {
        display: block;
        font-size: var(--font-size-xs);
    }
    
    
    .cart-item-controls {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .item-total {
        width: 100%;
        text-align: right;
        margin-top: var(--spacing-sm);
    }
}

/* Hover states for touch devices */
@media (hover: none) {
    .menu-item:hover,
    .category-card:hover,
    
    /* Отключаем анимации на touch устройствах для экономии батареи */
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible for keyboard navigation */
.nav-link:focus-visible,
.cart-btn:focus-visible,
.login-btn:focus-visible,
.category-card:focus-visible,
.add-to-cart-btn:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

/* Category Loading States */
.category-card.loading .category-count {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    animation: pulse 1.5s infinite;
}

/* Enhanced Category Interactions */
.category-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.category-card:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Smooth transitions for category counts */
.category-count {
    transition: all var(--transition-normal);
    will-change: transform, opacity;
}

/* Enhanced active states */
.category-card.active .category-icon {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(73, 80, 87, 0.3);
}

.category-card.active::before {
    background: linear-gradient(135deg, rgba(73, 80, 87, 0.1) 0%, transparent 70%);
}

/* About Section */
.about {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-secondary);
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.about-text {
    display: grid;
    gap: var(--spacing-lg);
}

.about-card {
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition-normal);
    position: relative;
}

.about-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.about-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow-medium);
}

.about-card h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.about-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.stat-card {
    background: var(--surface-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: var(--neo-shadow-outer);
    transition: var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Contacts Section */
.contacts {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-primary);
}

.contacts-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.contact-card {
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow-medium);
}

.contact-icon {
    font-size: 22px;
    opacity: 0.8;
}

.contact-card h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.contact-card p {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: var(--font-size-sm);
}

.contact-form-section {
    display: flex;
    align-items: stretch;
}

.contact-form-card {
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    width: 100%;
    position: relative;
}

.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.contact-form-card h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
    text-align: center;
}

.contact-form .form-group {
    margin-bottom: var(--spacing-md);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
    box-shadow: var(--neo-shadow-inner);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--neo-shadow-inner), 0 0 0 3px rgba(73, 80, 87, 0.1);
}

.contact-form textarea {
    resize: vertical;
    font-family: var(--font-family);
}

.contact-submit-btn {
    width: 100%;
    background: #232323;
    color: #ffffff;
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
}

.contact-submit-btn:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.contact-submit-btn:active {
    transform: translateY(0);
    background: #232323;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Responsive adjustments for new sections */
@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .about-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
    
    .contacts-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .contact-info {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .stat-card {
        padding: var(--spacing-lg);
    }
    
    .stat-number {
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 480px) {
    .about-stats {
        grid-template-columns: 1fr;
    }
    
    .contact-info {
        grid-template-columns: 1fr;
    }
    
    .contact-icon {
        font-size: 36px;
    }
    
    .about-card,
    .contact-card,
    .contact-form-card {
        padding: var(--spacing-lg);
    }
    
    /* Authentication forms mobile adaptation */
    .auth-form {
        padding: var(--spacing-lg);
    }
    
    .auth-form input[type="tel"], 
    .auth-form input[type="text"] {
        padding: var(--spacing-md);
        font-size: var(--font-size-base);
    }
    
    .code-inputs {
        gap: var(--spacing-xs);
        margin: var(--spacing-md) 0;
    }
    
    .code-digit {
        width: 45px;
        height: 45px;
        font-size: var(--font-size-lg);
    }
    
    .code-input {
        font-size: var(--font-size-2xl) !important;
        letter-spacing: 0.5em !important;
        padding: var(--spacing-lg) var(--spacing-sm) !important;
    }
    
    .code-input:focus {
        letter-spacing: 0.3em !important;
    }
    
    .auth-btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
    }
    
    .form-hint {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    #phoneModal .modal-header h3,
    #codeModal .modal-header h3,
    #passwordLoginModal .modal-header h3 {
        font-size: var(--font-size-xl);
    }
    
    /* Mobile modal adjustments */
    .modal .modal-content {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Authentication Forms - Enhanced Design System Integration */
.auth-form {
    padding: var(--spacing-xl);
    position: relative;
}

.auth-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.auth-form .form-group {
    margin-bottom: var(--spacing-xl);
    position: relative;
    display: flex;
    flex-direction: column;
}

.auth-form label {
    display: block;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-base);
    letter-spacing: -0.025em;
}

.auth-form input[type="tel"], 
.auth-form input[type="text"] {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: 500;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-inner);
    position: relative;
}

.auth-form input[type="tel"]:focus, 
.auth-form input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 
        inset 6px 6px 12px var(--shadow-light), 
        inset -6px -6px 12px rgba(255, 255, 255, 0.9),
        0 0 0 3px rgba(73, 80, 87, 0.1);
    transform: translateY(-1px);
}

.auth-form input[type="tel"]:hover:not(:focus), 
.auth-form input[type="text"]:hover:not(:focus) {
    box-shadow: 
        inset 4px 4px 8px var(--shadow-light), 
        inset -4px -4px 8px rgba(255, 255, 255, 0.95),
        0 2px 8px rgba(0, 0, 0, 0.05);
}

.code-inputs {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: var(--spacing-lg) 0;
}

.code-digit {
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-inner);
}

.code-digit:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 
        inset 6px 6px 12px var(--shadow-light), 
        inset -6px -6px 12px rgba(255, 255, 255, 0.9),
        0 0 0 3px rgba(73, 80, 87, 0.1);
    transform: translateY(-1px);
}

.code-input {
    text-align: center !important;
    font-size: var(--font-size-3xl) !important;
    font-weight: 700 !important;
    letter-spacing: 0.75em !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    padding: var(--spacing-xl) var(--spacing-md) !important;
    background: linear-gradient(135deg, var(--surface-primary) 0%, var(--bg-secondary) 100%) !important;
}

.code-input:focus {
    letter-spacing: 0.5em !important;
    box-shadow: 
        inset 8px 8px 16px var(--shadow-medium), 
        inset -8px -8px 16px rgba(255, 255, 255, 0.8),
        0 0 0 4px rgba(73, 80, 87, 0.15) !important;
}

.form-hint {
    display: block;
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    text-align: center;
    order: 3;
    padding: var(--spacing-sm) var(--spacing-md);
    position: relative;
    z-index: 10; /* Lower than dropdown (1200) to stay behind it */
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-light);
}

.auth-btn {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    position: relative;
    overflow: hidden;
    letter-spacing: -0.025em;
}

.auth-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.auth-btn:hover::before {
    left: 100%;
}

.auth-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.auth-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.auth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: inset 4px 4px 8px var(--shadow-light), inset -4px -4px 8px rgba(255, 255, 255, 0.8);
}

.code-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    align-items: stretch;
}

.resend-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: var(--neo-shadow-outer);
}

.resend-btn:hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-color: var(--accent-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.resend-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: inset 2px 2px 4px var(--shadow-light);
}

.resend-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Phone input enhanced formatting */
#phoneInput {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Enhanced loading state for buttons */
.auth-btn.loading {
    pointer-events: none;
    position: relative;
}

.auth-btn.loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 3px solid var(--text-tertiary);
    border-top: 3px solid var(--text-primary);
    border-radius: 50%;
    display: inline-block;
    margin-left: var(--spacing-md);
    animation: authSpin 1s linear infinite;
    vertical-align: middle;
}

@keyframes authSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success state animation */
.auth-btn.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.3);
}

/* Enhanced Phone Input Validation */
.validation-hint {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.validation-hint::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}

.validation-hint.neutral {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-left: 3px solid var(--accent-light);
}

.validation-hint.neutral::before {
    background: var(--accent-light);
}

.validation-hint.warning {
    background: #fff3cd;
    color: #856404;
    border-left: 3px solid #ffc107;
}

.validation-hint.warning::before {
    background: #ffc107;
}

.validation-hint.success {
    background: #d4edda;
    color: #155724;
    border-left: 3px solid #28a745;
}

.validation-hint.success::before {
    background: #28a745;
}

.validation-hint.error {
    background: #f8d7da;
    color: #721c24;
    border-left: 3px solid #dc3545;
}

.validation-hint.error::before {
    background: #dc3545;
}

/* Enhanced input states */
.auth-form input.valid {
    border-color: #28a745;
    box-shadow: 
        inset 4px 4px 8px var(--shadow-light), 
        inset -4px -4px 8px rgba(255, 255, 255, 0.9),
        0 0 0 3px rgba(40, 167, 69, 0.1);
}

.auth-form input.invalid {
    border-color: #dc3545;
    box-shadow: 
        inset 4px 4px 8px var(--shadow-light), 
        inset -4px -4px 8px rgba(255, 255, 255, 0.9),
        0 0 0 3px rgba(220, 53, 69, 0.1);
}

.auth-form input.error-highlight {
    animation: errorShake 0.6s ease;
}

.auth-form input.phone-focused {
    border-color: var(--accent);
    box-shadow: 
        inset 6px 6px 12px var(--shadow-light), 
        inset -6px -6px 12px rgba(255, 255, 255, 0.9),
        0 0 0 3px rgba(73, 80, 87, 0.1);
}

.code-digit.error-highlight {
    animation: errorShake 0.6s ease;
    border-color: #dc3545;
}

/* Enhanced notification animations */
@keyframes successIconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); box-shadow: 0 0 12px rgba(40, 167, 69, 0.3); }
    100% { transform: scale(1); }
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notificationSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-2px) scale(0.98);
    }
}
@keyframes slideInMessage {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOutMessage {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Enhanced body scroll lock when modal is open */
body.modal-open {
    overflow: hidden;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    
    /* Prevent bounce effects on iOS */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    
    /* Ensure no content shifts */
    padding-right: var(--scrollbar-width, 0px);
}

/* Authentication modal enhancements */
#phoneModal,
#codeModal,
#passwordLoginModal {
    /* Critical z-index to appear above cart review modal */
    z-index: 15000 !important;
}

#phoneModal .modal-content,
#codeModal .modal-content,
#passwordLoginModal .modal-content {
    position: relative;
    overflow: hidden;
    /* Enhanced glassmorphism for authentication modals */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        var(--neo-shadow-outer),
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* Ensure proper stacking */
    isolation: isolate;
}

#phoneModal .modal-content::before,
#codeModal .modal-content::before,
#passwordLoginModal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 1;
}

/* Modal header enhancements for auth */
#phoneModal .modal-header h3,
#codeModal .modal-header h3,
#passwordLoginModal .modal-header h3 {
    font-weight: 300;
    font-size: var(--font-size-2xl);
    letter-spacing: -0.025em;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Enhanced modal content with better glass effects */
.modal-content {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 20%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0.6) 80%, 
        transparent 100%);
    z-index: 2;
}

.modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.1) 20%, 
        rgba(0, 0, 0, 0.05) 50%, 
        rgba(0, 0, 0, 0.1) 80%, 
        transparent 100%);
    z-index: 2;
}

/* Enhanced modal header with glass styling */
.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Enhanced modal close button */
.modal-close {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

.modal-close::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-close:active {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Error message styling for authentication modals */
.error-message {
    display: none;
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-md);
    color: #dc2626;
    font-size: var(--font-size-sm);
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.error-message:empty {
    display: none !important;
}

/* Form help text styling */
.form-help {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-style: italic;
}

/* Fullscreen Modal Styles */
.fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal) ease;
}

.fullscreen-modal.show {
    opacity: 1;
    visibility: visible;
}

.fullscreen-modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
}

.fullscreen-modal-header {
    /* Old styles - will be overridden by universal-mobile-header */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 2px 8px var(--shadow-light);
    position: relative;
    z-index: 10;
}

/* Override for universal header system in fullscreen modal */
.universal-mobile-header.fullscreen-modal-header {
    display: block !important;
    padding: 0 !important;
}

.universal-mobile-header.fullscreen-modal-header .universal-header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.back-btn {
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-full);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
}

.back-btn:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 12px var(--shadow-medium), -6px -6px 12px rgba(255, 255, 255, 0.9);
}

.back-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.back-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fullscreen-modal-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    flex: 1;
    margin: 0;
    letter-spacing: -0.025em;
}

.header-spacer {
    width: 44px;
}

.clear-cart-btn {
    background: var(--bg-primary);
    border: none;
    border-radius: var(--radius-full);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    color: var(--text-primary);
    font-size: 20px;
    opacity: 0.8;
}

.clear-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 12px var(--shadow-medium), -6px -6px 12px rgba(255, 255, 255, 0.9);
    opacity: 1;
    background: var(--bg-accent-light);
}

.clear-cart-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.clear-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fullscreen-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 var(--spacing-lg) 0;
    background: var(--bg-primary);
}

/* Desktop specific adjustments */
@media (min-width: 1200px) {
    .fullscreen-modal-content {
        max-width: 600px;
        margin: 0 auto;
        height: 100vh;
        background: var(--bg-primary);
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    }
    
    .fullscreen-modal-body {
        padding: 0 0 var(--spacing-2xl) 0;
    }
    
    .desktop-only {
        display: block;
    }
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .fullscreen-modal-header {
        padding: var(--spacing-lg) var(--spacing-lg);
    }
    
    .fullscreen-modal-body {
        padding: 0 0 120px 0;
    }
    
    .fullscreen-modal-header .checkout-back-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-lg);
        min-width: 44px;
        min-height: 44px;
    }
    
    .fullscreen-modal-header .checkout-back-btn .back-text {
        display: none;
    }
    
    .fullscreen-modal-header .checkout-back-btn .back-icon,
    .fullscreen-modal-header .checkout-back-btn .clear-cart-icon {
        font-size: var(--font-size-lg);
    }
    
    .desktop-only {
        display: none;
    }
}

/* Cart Review Modal Styles */
.cart-review-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    height: 100%;
}

.cart-review-items {
    flex: 1;
    padding-bottom: var(--spacing-lg);
    padding-top: calc(64px + var(--spacing-sm)); /* Add top padding to clear universal header (64px) on mobile */
}

.cart-review-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--surface-glass);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-normal);
}

.cart-review-item:hover {
    box-shadow: var(--neo-shadow-outer), 0 8px 25px var(--shadow-medium);
    border-color: var(--border-accent);
}

.cart-item-image {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-secondary);
    box-shadow: var(--neo-shadow-inner);
    flex-shrink: 0;
}

.cart-item-emoji {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    box-shadow: var(--neo-shadow-inner);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.cart-item-details {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

.cart-item-price {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs);
    box-shadow: var(--neo-shadow-inner);
    border: 1px solid var(--border-light);
}

.quantity-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--surface-glass);
    color: var(--text-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--neo-shadow-outer);
}

.quantity-btn:hover {
    background: var(--bg-secondary);
    box-shadow: var(--neo-shadow-pressed);
    transform: translateY(1px);
}

.quantity-btn:active {
    transform: translateY(2px);
}

.quantity-display {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.remove-item-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #dc3545;
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--neo-shadow-outer);
}

.remove-item-btn:hover {
    background: var(--accent-danger);
    box-shadow: var(--neo-shadow-pressed);
    transform: translateY(1px);
}

.cart-totals-section {
    margin-top: auto;
    padding-top: var(--spacing-lg);
}

.cart-totals-card {
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--neo-shadow-outer);
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.subtotal-row, .delivery-row {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.final-total-row {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.total-label {
    font-weight: 500;
}

.total-value {
    font-weight: 600;
}

.delivery-free {
    color: var(--accent-success);
    font-weight: 600;
}

.total-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--spacing-sm) 0;
}

.continue-checkout-btn {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--text-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    margin-top: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.continue-checkout-btn:hover {
    background: var(--accent);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.continue-checkout-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.continue-checkout-btn:disabled {
    background: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

.continue-checkout-btn:not(:disabled) {
    opacity: 1;
}

/* Ensure continue button is always fully active in cart review */
#cartReviewModal .continue-checkout-btn {
    opacity: 1 !important;
    background: var(--text-primary) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Fix mobile checkout button appearance - ensure bright active state */
.mobile-checkout-btn {
    opacity: 1 !important;
    background: var(--text-primary) !important;
    color: var(--surface-primary) !important;
    filter: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure mobile checkout button is fully active in cart review mode */
body .mobile-cart-bottom-bar.show .mobile-checkout-btn {
    opacity: 1 !important;
    background: #232323 !important;
    color: #ffffff !important;
    filter: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    box-shadow: var(--neo-shadow-outer) !important;
}

/* Add a subtle animation to indicate the button is active */
.mobile-checkout-btn:not(:active) {
    transform: translateY(0) !important;
    transition: all var(--transition-normal) !important;
}

.mobile-checkout-btn:hover:not(:active) {
    background: var(--accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9) !important;
}

/* Payment Method Selector Styles */
.payment-method-selector {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.payment-option {
    flex: 1;
    position: relative;
}

.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    text-align: center;
}

.payment-label:hover {
    background: var(--surface-glass-hover);
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.payment-option input[type="radio"]:checked + .payment-label {
    background: var(--text-primary);
    color: white;
    border-color: var(--text-primary);
    box-shadow: var(--neo-shadow-outer);
}

.payment-option input[type="radio"]:checked + .payment-label:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.payment-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-xs);
}

.payment-text {
    font-size: var(--font-size-base);
    font-weight: 600;
}

/* Mobile adjustments for cart review */
@media (max-width: 768px) {
    /* Payment method mobile styles */
    .payment-method-selector {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .payment-label {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: var(--spacing-md);
    }
    
    .payment-icon {
        font-size: var(--font-size-xl);
        margin-bottom: 0;
        margin-right: var(--spacing-sm);
    }
    .clear-cart-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .cart-review-item {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .cart-item-image {
        width: 50px;
        height: 50px;
    }
    
    .cart-item-emoji {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .cart-item-name {
        font-size: var(--font-size-sm);
    }
    
    .cart-item-price {
        font-size: var(--font-size-xs);
    }
    
    .quantity-btn {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-base);
    }
    
    .quantity-display {
        min-width: 32px;
        font-size: var(--font-size-sm);
    }
    
    .remove-item-btn {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-base);
    }
    
    .cart-totals-card {
        padding: var(--spacing-md);
    }
    
    .final-total-row {
        font-size: var(--font-size-base);
    }
}

/* Input focus enhancement with glow effect */
.auth-form input:focus {
    position: relative;
}

.auth-form input:focus::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(73, 80, 87, 0.1), transparent);
    border-radius: var(--radius-lg);
    z-index: -1;
    animation: inputGlow 2s ease-in-out infinite alternate;
}

@keyframes inputGlow {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Header Actions & User Menu */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-menu {
    position: relative;
}

/* Authentication state visibility classes */
/* Authentication visibility classes - Global */
.auth-hidden {
    display: none !important;
}

.auth-visible {
    display: flex !important;
}

/* Specific auth classes for backwards compatibility */
.desktop-only.auth-hidden,
.sidebar-profile-btn.auth-hidden {
    display: none !important;
}

/* Authentication visibility classes - desktop only */
@media (min-width: 1200px) {
    .desktop-only.auth-visible,
    .sidebar-login-btn.auth-visible {
        display: flex !important;
    }

    .sidebar-profile-btn.auth-visible {
        display: flex !important;
    }
}

.sidebar-login-btn.auth-hidden {
    display: none !important;
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    min-width: 200px;
    position: relative;
    overflow: hidden;
}

.user-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.user-info:hover {
    background: var(--surface-glass-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

/* User Avatar */
.user-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: var(--font-size-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-initial {
    font-family: var(--font-family);
    text-transform: uppercase;
}

.user-status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #28a745;
    border: 2px solid white;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* User Details */
.user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.user-name {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.2;
}

.user-phone {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 400;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    opacity: 0.8;
}

.dropdown-arrow {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: transform var(--transition-normal) ease;
    margin-left: var(--spacing-xs);
}

.user-menu.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* USER DROPDOWN - BULLETPROOF LAYERING SOLUTION */
.user-dropdown {
    /* SOLUTION 1: Portal-style positioning at document root level */
    position: fixed !important;
    top: calc(var(--header-height, 80px) + var(--spacing-lg)) !important;
    right: var(--spacing-lg) !important;
    
    /* SOLUTION 2: Force maximum stacking context with multiple techniques */
    z-index: 2147483647 !important; /* Maximum 32-bit integer for z-index */
    isolation: isolate !important;
    contain: none !important; /* Prevent container isolation */
    
    /* SOLUTION 3: Break out of any parent stacking context */
    transform: translateZ(0) !important; /* Force GPU layer and new stacking context */
    will-change: transform, opacity !important;
    
    /* Neo-skeuomorphic glassmorphism styling */
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.85) 50%, 
        rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(35px) saturate(220%) contrast(110%);
    -webkit-backdrop-filter: blur(35px) saturate(220%) contrast(110%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    
    /* Enhanced neo-skeuomorphic shadows */
    box-shadow: 
        20px 20px 60px var(--shadow-strong),
        -20px -20px 60px rgba(255, 255, 255, 0.95),
        inset 2px 2px 8px rgba(255, 255, 255, 0.4),
        inset -2px -2px 8px rgba(0, 0, 0, 0.04),
        0 25px 50px rgba(0, 0, 0, 0.08);
    
    /* Animation properties */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-25px) scale(0.92) translateZ(0);
    transform-origin: top right;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Layout properties */
    min-width: 320px;
    overflow: hidden;
}

.user-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1) translateZ(0) !important;
    
    /* Enhanced opening animation shadows */
    box-shadow: 
        25px 25px 75px var(--shadow-strong),
        -25px -25px 75px rgba(255, 255, 255, 0.98),
        inset 3px 3px 12px rgba(255, 255, 255, 0.5),
        inset -3px -3px 12px rgba(0, 0, 0, 0.06),
        0 30px 60px rgba(0, 0, 0, 0.12);
    
    /* BULLETPROOF: Force absolute maximum z-index when open */
    z-index: 2147483647 !important;
}

/* Dropdown Header */
.dropdown-header {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    border-bottom: 1px solid var(--border-light);
}

.user-greeting {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.user-stats {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-icon {
    opacity: 0.7;
}

/* Dropdown Divider */
.dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--spacing-xs) 0;
}

/* Enhanced Dropdown Items - Solution 1 */
.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin: var(--spacing-xs);
    border-radius: var(--radius-md);
    /* Subtle neo-skeuomorphic inset */
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 2px 2px 6px rgba(255, 255, 255, 0.3), 
                inset -2px -2px 6px rgba(0, 0, 0, 0.03);
}

.user-dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transition: transform var(--transition-fast);
}

.user-dropdown-item:hover::before {
    transform: scaleY(1);
}

.user-dropdown-item:hover {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.6) 0%, 
        rgba(255, 255, 255, 0.3) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        6px 6px 20px var(--shadow-medium), 
        -6px -6px 20px rgba(255, 255, 255, 0.8),
        inset 3px 3px 8px rgba(255, 255, 255, 0.4),
        inset -3px -3px 8px rgba(0, 0, 0, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

/* 
==============================================
SOLUTION 2: CONTEXTUAL OVERLAY WITH DYNAMIC Z-INDEX
==============================================

/* CONFLICTING DROPDOWN IMPLEMENTATION REMOVED */
/* This section has been cleaned up to prevent z-index conflicts */

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateX(8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        8px 8px 24px var(--shadow-light),
        -4px -4px 16px rgba(255, 255, 255, 0.6);
}

.categories-strip.dropdown-open {
    z-index: 50;
}

/* ============================================== 
   Z-INDEX LAYERING ISSUE - FINAL SOLUTION APPLIED
   ==============================================
   
   The dropdown now uses:
   - isolation: isolate for new stacking context
   - z-index: 9999 for guaranteed top positioning
   - Dynamic JavaScript z-index management
   - Clean CSS architecture without conflicts
   ============================================== */

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: all 0.2s ease-out;
    position: relative;
    margin: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-dropdown-item:last-child {
    border-bottom: none;
}

.user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(6px);
}

.user-dropdown-item:active {
    transform: translateX(2px) scale(0.98);
}

// JavaScript for Solution 2 (Dynamic Z-Index):
// Add this to your script.js to handle dynamic z-index switching

function handleDropdownToggle() {
    const stickyWrapper = document.querySelector('.categories-strip');
    const userDropdown = document.querySelector('.user-dropdown');
    const userMenu = document.querySelector('.user-menu');
    
    if (userMenu.classList.contains('open')) {
        // Lower sticky elements when dropdown is open
        stickyWrapper.classList.add('dropdown-open');
    } else {
        // Restore sticky elements z-index when dropdown closes
        stickyWrapper.classList.remove('dropdown-open');
    }
}

*/

.user-dropdown-item.logout-item:hover {
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.1) 0%, transparent 100%);
}

.user-dropdown-item.logout-item:hover::before {
    background: #dc3545;
}

.item-icon {
    font-size: var(--font-size-lg);
    opacity: 0.8;
    transition: transform var(--transition-fast);
    width: 24px;
    text-align: center;
}

.user-dropdown-item:hover .item-icon {
    transform: scale(1.1);
}

.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.item-title {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.2;
}

.item-subtitle {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    opacity: 0.8;
    line-height: 1.2;
}

.logout-item .item-title {
    color: #dc3545;
}

.logout-item .item-subtitle {
    color: #dc3545;
    opacity: 0.7;
}

/* Enhanced Orders Modal */
.orders-modal {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
}

.modal-header-content {
    flex: 1;
}

.modal-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    font-weight: 400;
}

.orders-content {
    max-height: 75vh;
    overflow-y: auto;
}

/* Enhanced Orders Header */
.orders-header {
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--surface-secondary) 0%, var(--bg-secondary) 100%);
    border-bottom: 1px solid var(--border-light);
}

.orders-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-lg);
}

.stat-card {
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow-medium), var(--neo-shadow-outer);
}

.stat-icon {
    font-size: var(--font-size-3xl);
    opacity: 0.8;
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.1;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.2;
}

/* Orders Filters */
.orders-filters {
    padding: var(--spacing-lg) var(--spacing-xl) 0;
    border-bottom: 1px solid var(--border-light);
}

.filter-tabs {
    display: flex;
    gap: var(--spacing-xs);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xs);
    box-shadow: var(--neo-shadow-inner);
}

.filter-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
}

.filter-tab.active {
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.filter-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
}

/* Orders List */
.orders-list {
    padding: var(--spacing-xl);
}

.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-2xl);
    text-align: center;
}

.orders-empty .empty-icon {
    font-size: 4rem;
    opacity: 0.4;
    margin-bottom: var(--spacing-md);
}

.orders-empty h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.orders-empty p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    max-width: 300px;
}

/* Enhanced Order Items */
.order-item {
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    transition: var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    position: relative;
}

.order-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.order-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

.order-item-content {
    padding: var(--spacing-xl);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
}

.order-meta {
    flex: 1;
}

.order-id {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.order-date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.order-date::before {
    content: '📅';
    opacity: 0.7;
}

/* Enhanced Status */
.order-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
}

.order-status::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: var(--spacing-sm);
}

.order-status.pending {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #f57c00;
}

.order-status.pending::before {
    background: #f57c00;
}

.order-status.completed {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
    color: #27ae60;
}

.order-status.completed::before {
    background: #27ae60;
}

.order-status.cancelled {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: #e74c3c;
}

.order-status.cancelled::before {
    background: #e74c3c;
}

/* Order Items Section */
.order-items {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.order-items-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.order-item-tag {
    background: var(--surface-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Order Footer */
.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.order-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.order-action-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.order-action-btn:hover {
    background: var(--surface-glass-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.order-total {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.order-total::before {
    content: '💰';
    opacity: 0.7;
}

/* Date Group Headers */
.date-group {
    margin-bottom: var(--spacing-xl);
}

.date-group-header {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-light);
    position: sticky;
    top: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    z-index: 10;
}

/* Mobile Responsiveness for Enhanced Design */
@media (max-width: 768px) {
    .header-actions {
        gap: var(--spacing-sm);
    }
    
    .user-info {
        padding: var(--spacing-sm);
        min-width: 160px;
        gap: var(--spacing-sm);
    }
    
    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-base);
    }
    
    .user-phone {
        font-size: var(--font-size-xs);
    }
    
    .user-dropdown {
        min-width: 260px;
        right: -20px;
    }
    
    .dropdown-header {
        padding: var(--spacing-md);
    }
    
    .user-greeting {
        font-size: var(--font-size-base);
    }
    
    .user-stats {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    /* Orders Modal Mobile */
    .orders-modal {
        width: 98%;
        max-height: 95vh;
    }
    
    .orders-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .stat-card {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    
    .stat-icon {
        font-size: var(--font-size-xl);
    }
    
    .stat-value {
        font-size: var(--font-size-lg);
    }
    
    .orders-filters {
        padding: var(--spacing-md);
    }
    
    .filter-tab {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
    
    .orders-list {
        padding: var(--spacing-md);
    }
    
    .order-item-content {
        padding: var(--spacing-md);
    }
    
    .order-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .order-status {
        align-self: flex-start;
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .order-items {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .order-footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .order-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .order-action-btn {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }
    
    .order-total {
        font-size: var(--font-size-xl);
        justify-content: center;
    }
    
    .date-group-header {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) 0;
    }
}

@media (max-width: 480px) {
    .user-info {
        min-width: 140px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .user-name {
        font-size: var(--font-size-sm);
    }
    
    .user-phone {
        display: none; /* Hide phone on small mobile */
    }
    
    .user-dropdown {
        min-width: 240px;
        right: -30px;
    }
    
    .dropdown-header {
        text-align: center;
    }
    
    .user-dropdown-item {
        padding: var(--spacing-md);
    }
    
    .item-title {
        font-size: var(--font-size-sm);
    }
    
    .item-subtitle {
        font-size: var(--font-size-xs);
    }
    
    /* Orders Modal Small Mobile */
    .orders-modal {
        width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
    
    .modal-header {
        padding: var(--spacing-md);
    }
    
    .modal-subtitle {
        display: none;
    }
    
    .orders-header {
        padding: var(--spacing-md);
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-sm);
    }
    
    .stat-icon {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-xs);
    }
    
    .order-items-title {
        font-size: var(--font-size-xs);
    }
    
    .order-item-tag {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }
    
    .order-action-btn {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Enhanced Notification Animations with Organic Easing */
/* Removed warningPulse animation with scaling */

/* Removed successCelebration animation with scaling */

@keyframes errorShake {
    0%, 100% { 
        transform: translateX(0) scale(1); 
    }
    10%, 30%, 50%, 70%, 90% { 
        transform: translateX(-2px) scale(1.01); 
    }
    20%, 40%, 60%, 80% { 
        transform: translateX(2px) scale(1.01); 
    }
}

@keyframes successIconCelebration {
    0% {
        transform: scale(1) rotate(0deg);
        box-shadow: 
            0 3px 8px rgba(40, 167, 69, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    25% {
        transform: scale(1.2) rotate(5deg);
        box-shadow: 
            0 4px 12px rgba(40, 167, 69, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.1) rotate(-3deg);
    }
    75% {
        transform: scale(1.05) rotate(2deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 
            0 3px 8px rgba(40, 167, 69, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

/* Enhanced notification transition effects */
@keyframes notificationFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-3px) scale(0.96);
    }
}

@keyframes notificationFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============== НОВЫЕ СТИЛИ ДЛЯ СИСТЕМЫ АВТОЗАПОЛНЕНИЯ ДОСТАВКИ ============== */

/* Индикатор автозаполненного поля */
.auto-filled {
    position: relative;
    border-color: var(--accent) !important;
    background: rgba(72, 187, 120, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(72, 187, 120, 0.2) !important;
    animation: autoFillGlow 0.5s ease-out;
}

.auto-filled::after {
    content: '✨';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.8;
    animation: autoFillSparkle 2s ease-out;
    pointer-events: none;
}

/* Уведомление о автозаполнении */
.auto-fill-feedback {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    max-width: 400px;
}

.auto-fill-feedback.show {
    opacity: 1;
    transform: translateY(0);
}

.auto-fill-content {
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--neo-shadow-outer);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.auto-fill-icon {
    font-size: 18px;
    animation: autoFillIconPulse 2s ease-out;
}

.auto-fill-text {
    flex: 1;
}

/* Кнопка "Использовать данные с последнего заказа" */
.use-last-delivery-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    box-shadow: var(--neo-shadow-outer);
    margin-bottom: var(--spacing-md);
}

.use-last-delivery-btn:hover {
    background: rgba(72, 187, 120, 0.1);
    border-color: rgba(72, 187, 120, 0.3);
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.2);
    transform: translateY(-1px);
}

.use-last-delivery-btn:active {
    transform: translateY(0);
}

.use-last-delivery-btn .btn-icon {
    font-size: 16px;
}

/* Анимации */
@keyframes autoFillGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(72, 187, 120, 0.2);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(72, 187, 120, 0.2);
    }
}

@keyframes autoFillSparkle {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
}

@keyframes autoFillIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    .auto-fill-feedback {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .auto-fill-content {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
    
    .use-last-delivery-btn {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* Print styles */
@media print {
    .header,
    .cart-sidebar,
    .modal,
    .cart-overlay,
    .modal-overlay {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .categories,
    .menu,
    .about,
    .contacts {
        background: white !important;
    }
}

/* Enhanced Authentication Error Animations */
.error-shake {
    animation: authErrorShake 0.6s ease-out;
}

.error-pulse {
    animation: authErrorPulse 0.8s ease-in-out;
}

@keyframes authErrorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

@keyframes authErrorPulse {
    0%, 100% { 
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
        transform: scale(1);
    }
    50% { 
        border-color: #dc3545;
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.4);
        transform: scale(1.02);
    }
}

/* Mobile Cart Bottom Bar */
.mobile-cart-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: var(--spacing-md);
    z-index: 2100;
    border-top: 1px solid var(--border-light);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
}

.mobile-cart-bottom-bar.show {
    transform: translateY(0);
}

.delivery-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.delivery-icon {
    font-size: var(--font-size-base);
    filter: grayscale(0.3);
}

.mobile-checkout-btn {
    width: 100%;
    background: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg) var(--spacing-xl);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    position: relative;
    overflow: hidden;
}

.mobile-checkout-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.mobile-checkout-btn:hover::before {
    left: 100%;
}

.mobile-checkout-btn:hover:not(:active) {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9);
}

.mobile-checkout-btn:active {
    transform: translateY(2px);
    box-shadow: var(--neo-shadow-outer);
}

.checkout-btn-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--surface-primary);
    font-weight: 600;
}


.checkout-text {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.checkout-price {
    font-size: var(--font-size-base);
    font-weight: 700;
    text-align: right;
}

/* Mobile Cart Review Modal */
.mobile-cart-review-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 3000;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mobile-cart-review-modal.show {
    display: flex;
    opacity: 1;
}

.mobile-cart-review-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 100px; /* Account for bottom bar */
}

.mobile-cart-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    background: var(--surface-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.mobile-cart-review-back,
.mobile-cart-clear {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    background: var(--surface-primary);
    box-shadow: var(--neo-shadow-outer);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-lg);
}

.mobile-cart-review-back:hover,
.mobile-cart-clear:hover {
    transform: translateY(-2px);
    box-shadow: 8px 8px 16px var(--shadow-medium), -8px -8px 16px rgba(255, 255, 255, 0.9);
}

.mobile-cart-review-back:active,
.mobile-cart-clear:active {
    transform: translateY(1px);
    box-shadow: var(--neo-shadow-pressed);
}

.mobile-cart-review-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    flex: 1;
}

.mobile-cart-review-items {
    flex: 1;
    padding: var(--spacing-md);
    padding-top: calc(64px + var(--spacing-md)); /* Add top padding to clear universal header (64px) */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.mobile-cart-review-item {
    background: var(--surface-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--neo-shadow-outer);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all var(--transition-normal);
}

.mobile-cart-review-item:hover {
    transform: translateY(-2px);
    box-shadow: 8px 8px 16px var(--shadow-medium), -8px -8px 16px rgba(255, 255, 255, 0.9);
}

.mobile-cart-item-image-container {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--surface-glass);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-cart-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.mobile-cart-item-emoji {
    font-size: 28px;
    line-height: 1;
}

.mobile-cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mobile-cart-item-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.mobile-cart-item-price {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.mobile-cart-item-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.mobile-quantity-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--surface-glass);
    box-shadow: var(--neo-shadow-outer);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-quantity-btn:hover {
    transform: translateY(-1px);
    box-shadow: 4px 4px 8px var(--shadow-light), -4px -4px 8px rgba(255, 255, 255, 0.9);
}

.mobile-quantity-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.mobile-quantity-display {
    min-width: 40px;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-cart-review-summary {
    background: var(--surface-primary);
    border-top: 1px solid var(--border-light);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: auto;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-row.total {
    border-top: 1px solid var(--border-light);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.summary-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-row.total .summary-label {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: 700;
}

.summary-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 600;
}

.summary-row.total .summary-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.mobile-cart-delivery-info {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface-glass);
    border-top: 1px solid var(--border-light);
}

.delivery-info-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Empty cart state for mobile review */
.mobile-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--text-secondary);
    flex: 1;
}

.mobile-cart-empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

.mobile-cart-empty-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.mobile-cart-empty-text {
    font-size: var(--font-size-base);
    line-height: 1.5;
}

/* Mobile-only styles */
@media (min-width: 768px) {
    .mobile-cart-review-modal {
        display: none !important;
    }
}

/* Mobile Burger Menu Styles */
.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.mobile-burger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.burger-line {
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    margin: 2px 0;
    transition: all 0.3s ease;
    border-radius: var(--radius-sm);
}

.mobile-burger-menu.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
}

.mobile-burger-menu.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-burger-dropdown {
    display: none;
    position: fixed;
    top: 64px; /* FIXED: Match exact universal mobile header height - no gaps */
    left: 0;
    right: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--neo-shadow-outer);
    z-index: 140; /* Below fixed mobile header but above other content */
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none; /* Prevent clicks when closed */
}

.mobile-burger-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Enable clicks when open */
}

.burger-dropdown-content {
    padding: var(--spacing-md);
}

/* Mobile Restaurant Contact - Enhanced Mobile Contact Section */
.mobile-restaurant-contact {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.mobile-restaurant-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    pointer-events: none;
}


.mobile-contact-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.mobile-restaurant-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    opacity: 0.95;
}

.mobile-contact-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.mobile-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
}


.mobile-contact-icon {
    font-size: 16px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.mobile-contact-link {
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-sm));
    flex: 1;
}


.mobile-contact-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.4;
}

.mobile-user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.mobile-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: var(--font-size-base);
}

.mobile-user-details {
    flex: 1;
}

.mobile-user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.mobile-user-phone {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.burger-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--spacing-md) 0;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    font-size: var(--font-size-base);
}

.mobile-menu-item:hover {
    background: var(--surface-secondary);
}

.mobile-menu-item.logout-item {
    color: #dc3545;
}

.mobile-menu-icon {
    font-size: var(--font-size-lg);
}

.mobile-menu-text {
    font-weight: 500;
}

/* Hide mobile cart bar on desktop */
@media (min-width: 1200px) {
    .mobile-cart-bottom-bar {
        display: none !important;
    }
    
    /* Show desktop elements, hide mobile elements */
    .desktop-only {
        display: flex !important;
    }
    
    .mobile-burger-menu,
    .mobile-burger-dropdown {
        display: none !important;
    }
}

/* Show only on mobile when cart has items */
@media (max-width: 768px) {
    .mobile-cart-bottom-bar {
        display: block;
    }
    
    /* Show continue-checkout-btn on mobile in cart review for proper authentication flow */
    #cartReviewModal .continue-checkout-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: var(--spacing-lg);
    }
    
    /* Hide desktop elements, show mobile elements */
    .desktop-only,
    .user-menu,
    .login-btn,
    .cart-btn,
    .sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .mobile-burger-menu {
        display: flex !important;
    }
    
    .mobile-burger-dropdown {
        display: block !important;
    }
    
    /* Add bottom padding to body when mobile cart bar is visible */
    body.mobile-cart-active {
        padding-bottom: 140px;
    }
    
    /* Adjust modal positioning when mobile cart is active */
    body.mobile-cart-active .modal {
        bottom: 140px;
    }
    
    /* Adjust fullscreen modal positioning when mobile cart is active */
    body.mobile-cart-active .fullscreen-modal {
        padding-bottom: 140px;
    }
    
    /* Hide regular cart sidebar on mobile when cart bar is active */
    body.mobile-cart-active .cart-sidebar {
        display: none;
    }

}

/* Duplicate desktop section removed - styles are now consolidated above */
}

/* ============================================
   PROFILE PAGE STYLES
   Neo-skeuomorphic + Glassmorphism Design
   ============================================ */

/* ============================================
   PROFILE PAGE LAYOUT - NEW ARCHITECTURE
   - Profile is now inside .main-content (not fixed)
   - Proper responsive behavior with sidebar
   - Modern CSS Grid/Flexbox implementation
   ============================================ */

/* Legacy profile-page styles removed - using separate profile.html now */

/* Profile Header - Sticky header with proper spacing */
.profile-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--neo-shadow-outer), 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: var(--spacing-lg) var(--spacing-xl);
}

/* Desktop layout adjustments */
@media (min-width: 1200px) {
    .profile-header {
        padding: var(--spacing-lg) var(--spacing-2xl);
    }
}

.profile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    max-width: 1400px;
    margin: 0 auto;
}

/* Header buttons */
.back-to-home-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--surface-glass);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.back-to-home-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), var(--neo-shadow-outer);
}

.back-to-home-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.back-icon {
    font-size: 18px;
    font-weight: 700;
}

.profile-title {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

.logout-btn-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    color: white;
    font-weight: 600;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    cursor: pointer;
}

.logout-btn-profile:hover {
    background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4), var(--neo-shadow-outer);
}

.logout-btn-profile:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

/* ========================================
   Enhanced Desktop Navigation Buttons
   ======================================== */

/* Profile Navigation Left - Back to Home */
.profile-nav-left {
    position: fixed;
    top: var(--spacing-xl);
    left: calc(var(--sidebar-width) + var(--spacing-lg));
    z-index: 200;
    transition: all var(--transition-normal);
}

/* Profile Navigation Right - Logout */
.profile-nav-right {
    position: fixed;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 200;
    transition: all var(--transition-normal);
}

/* Enhanced Back to Home Button */
.profile-back-to-home-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--surface-glass);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    
    /* Enhanced glassmorphism */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Modern neo-skeuomorphism shadow */
    box-shadow: 
        var(--neo-shadow-outer),
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    /* Larger touch target */
    min-height: 50px;
    min-width: 160px;
}

.profile-back-to-home-btn .back-icon {
    font-size: 20px;
    font-weight: 700;
    transition: transform var(--transition-normal);
}

.profile-back-to-home-btn .back-text {
    font-size: var(--font-size-base);
    white-space: nowrap;
}

.profile-back-to-home-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.18),
        0 8px 25px rgba(0, 0, 0, 0.12),
        var(--neo-shadow-outer),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.profile-back-to-home-btn:hover .back-icon {
    transform: translateX(-2px);
}

.profile-back-to-home-btn:active {
    transform: translateY(-1px);
    box-shadow: var(--neo-shadow-pressed);
}

/* Enhanced Logout Button */
.profile-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--spacing-md) var(--spacing-lg);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    
    /* Enhanced shadows for prominence */
    box-shadow: 
        0 8px 32px rgba(220, 53, 69, 0.25),
        0 4px 16px rgba(220, 53, 69, 0.15),
        var(--neo-shadow-outer),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    /* Larger touch target */
    min-height: 50px;
    min-width: 120px;
}

.profile-logout-btn .logout-icon {
    font-size: 18px;
    transition: transform var(--transition-normal);
}

.profile-logout-btn .logout-text {
    font-size: var(--font-size-base);
    white-space: nowrap;
    text-align: center;
}

.profile-logout-btn:hover {
    background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
    transform: translateY(-3px);
    
    box-shadow: 
        0 12px 40px rgba(220, 53, 69, 0.35),
        0 8px 25px rgba(220, 53, 69, 0.25),
        var(--neo-shadow-outer),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.profile-logout-btn:hover .logout-icon {
    transform: scale(1.1) rotate(5deg);
}

.profile-logout-btn:active {
    transform: translateY(-1px);
    box-shadow: var(--neo-shadow-pressed);
}

/* Profile Header Content - Simplified for centered title */
.profile-header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    max-width: 1400px;
    margin: 0 auto;
}

/* Responsive adjustments for navigation buttons */
@media (min-width: 1200px) {
    .profile-nav-left {
        left: calc(var(--sidebar-width) + var(--spacing-xl));
    }
    
    .profile-nav-right {
        right: var(--spacing-2xl);
    }
}

/* Hide desktop navigation buttons on mobile/tablet */
@media (max-width: 1199px) {
    .profile-nav-left,
    .profile-nav-right {
        display: none;
    }
}

/* Profile Content Container */
.profile-content {
    flex: 1;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
}

/* Desktop layout adjustments */
@media (min-width: 1200px) {
    .profile-content {
        padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-2xl);
    }
}

/* Profile Grid Layout - Responsive Grid */
.profile-grid {
    display: grid;
    gap: var(--spacing-2xl);
    max-width: 1400px;
    margin: 0 auto;
    min-height: 0;
}

/* Desktop: Two-column layout */
@media (min-width: 1024px) {
    .profile-grid {
        grid-template-columns: 400px 1fr;
    }
}

/* Tablet and below: Single column */
@media (max-width: 1023px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

/* Profile Cards - Modern glassmorphism design */
.profile-card {
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    box-shadow: var(--neo-shadow-outer);
    overflow: hidden;
    transition: all var(--transition-normal);
    position: relative;
    display: flex;
    flex-direction: column;
}

.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.5) 50%, 
        transparent 100%);
}

.profile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), var(--neo-shadow-outer);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Card Headers */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card-icon {
    font-size: var(--font-size-xl);
    margin-right: var(--spacing-md);
}

.card-title {
    flex: 1;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.card-content {
    padding: var(--spacing-xl);
    flex: 1;
    overflow: hidden;
}

/* User Info Card Specific Styles */
.user-info-card .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xl);
}

.user-avatar-large {
    position: relative;
    width: 120px;
    height: 120px;
    background: var(--surface-glass);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--neo-shadow-outer);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.avatar-initial-large {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
}

.user-status-large {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: var(--neo-shadow-outer);
}

.user-status-large.active {
    background: #28a745;
}

.user-details-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.user-phone-display label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.phone-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--neo-shadow-inner);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.user-stats-display {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.user-stats-display .stat-item {
    background: rgba(255, 255, 255, 0.4);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-fast);
}

.user-stats-display .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

.user-stats-display .stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.user-stats-display .stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

/* Orders History Card */
.orders-history-card {
    min-height: 400px;
}

.orders-filter {
    display: flex;
    gap: var(--spacing-xs);
    background: rgba(255, 255, 255, 0.3);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    box-shadow: var(--neo-shadow-inner);
}

.filter-btn {
    background: transparent;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
}

.filter-btn.active {
    background: var(--accent);
    color: white;
}

.profile-orders-list {
    max-height: 400px;
    overflow-y: auto;
    min-height: 200px;
}

.orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    gap: var(--spacing-lg);
}

.orders-empty .empty-icon {
    font-size: 64px;
    opacity: 0.6;
}

.orders-empty h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.orders-empty p {
    color: var(--text-secondary);
    margin: 0;
}

.start-shopping-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
}

.start-shopping-btn:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), var(--neo-shadow-outer);
}

.start-shopping-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

/* Profile Order Items */
.profile-order-item {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
}

.profile-order-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
    border-color: rgba(255, 255, 255, 0.6);
}

.profile-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.order-id {
    font-weight: 700;
    color: var(--text-primary);
}

.order-date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.order-status {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-status.completed {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.order-status.pending {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.profile-order-content {
    padding: var(--spacing-lg);
}

.order-items-summary {
    margin-bottom: var(--spacing-md);
}

.order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: var(--text-primary);
    padding-top: var(--spacing-md);
}

/* Responsive Design - Mobile Adjustments */
@media (max-width: 768px) {
    .profile-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .profile-content {
        padding: var(--spacing-lg);
    }
    
    .profile-grid {
        gap: var(--spacing-lg);
    }
    
    .user-avatar-large {
        width: 100px;
        height: 100px;
    }
    
    .avatar-initial-large {
        font-size: 40px;
    }
    
    .profile-title {
        font-size: var(--font-size-xl);
    }
    
    .back-to-home-btn,
    .logout-btn-profile {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
    
    .card-content {
        padding: var(--spacing-lg);
    }
    
    .orders-history-card {
        min-height: 300px;
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {
    .profile-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .profile-content {
        padding: var(--spacing-md);
    }
    
    .profile-header-content {
        gap: var(--spacing-sm);
    }
    
    .profile-title {
        font-size: var(--font-size-lg);
    }
    
    .card-content {
        padding: var(--spacing-md);
    }
}

/* ==========================================
   PROFILE PAGE (Separate page styles)
   ========================================== */

/* Profile app layout for separate page */
.profile-app {
    background: var(--bg-primary);
}

/* Profile main content (for separate page) */
.profile-main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background: var(--bg-primary);
}

@media (max-width: 1199px) {
    .profile-main-content {
        margin-left: 0;
        padding-top: var(--header-height-mobile);
    }
}

/* Back to main button for mobile header */
.back-to-main-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--neo-shadow-compact);
    cursor: pointer;
    transition: var(--transition-fast);
    backdrop-filter: blur(12px);
}

.back-to-main-btn:hover {
    background: var(--surface-glass-hover);
    box-shadow: var(--neo-shadow-compact-hover);
    transform: translateY(-1px);
}

.back-to-main-btn:active {
    background: var(--surface-secondary);
    box-shadow: var(--neo-shadow-compact-pressed);
    transform: translateY(0);
}

.back-to-main-btn .back-icon {
    font-size: 18px;
    color: var(--text-primary);
}

/* Logout button for mobile */
.logout-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--neo-shadow-compact);
    cursor: pointer;
    transition: var(--transition-fast);
    backdrop-filter: blur(12px);
}

.logout-btn-mobile:hover {
    background: rgba(255, 59, 48, 0.1);
    border-color: rgba(255, 59, 48, 0.3);
    box-shadow: var(--neo-shadow-compact-hover);
    transform: translateY(-1px);
}

.logout-btn-mobile:active {
    background: rgba(255, 59, 48, 0.2);
    box-shadow: var(--neo-shadow-compact-pressed);
    transform: translateY(0);
}

.logout-btn-mobile .logout-icon {
    font-size: 18px;
    color: #ff3b30;
}

/* Sidebar profile button active state for profile page */
.sidebar-profile-btn.active {
    background: var(--surface-glass-hover);
    border-color: var(--accent);
    box-shadow: var(--neo-shadow-inner), 0 0 0 2px rgba(73, 80, 87, 0.1);
}

/* ============================================
   DESKTOP CHECKOUT PAGE LAYOUT
   Modern Neo-skeuomorphism + Glassmorphism Design
   ============================================ */

/* Checkout Page Container */
.checkout-page {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    background: var(--bg-primary);
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

.checkout-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Checkout Header */
.checkout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 0;
}

/* Hide checkout header in PC version (≥1200px) */
@media (min-width: 1200px) {
    .desktop-only .checkout-header {
        display: none;
    }
}

/* Section header with back button */
.section-header-with-back {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.section-header-with-back .section-title {
    margin: 0;
    flex: 1;
}

/* Add extra spacing for back button in PC checkout */
.section-header-with-back .checkout-back-btn {
    margin-right: var(--spacing-lg);
}

.checkout-back-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    backdrop-filter: blur(12px);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.checkout-back-btn:hover {
    background: var(--surface-glass-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

.back-icon {
    font-size: var(--font-size-lg);
    font-weight: bold;
}

.back-text {
    font-size: var(--font-size-base);
}

.checkout-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    flex: 1;
}

.checkout-header-spacer {
    width: 160px; /* Same width as back button to center title */
}

/* Checkout Content - Single column layout */
.checkout-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    flex: 1;
    align-items: center;
    min-height: calc(100vh - 160px);
    overflow: visible;
}

/* Single column checkout layout */
.checkout-form-section {
    width: 100%;
    max-width: 900px;
    overflow-y: auto;
    padding: 0;
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.form-section {
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--neo-shadow-outer);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: var(--transition-normal);
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-ultra-light);
    position: relative;
}

.form-section-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: var(--radius-sm);
}

.section-icon {
    font-size: var(--font-size-xl);
    opacity: 0.8;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.form-group {
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group input:focus,
.form-group textarea:focus {
    transform: translateY(-1px);
    box-shadow: 
        var(--neo-shadow-outer),
        0 0 0 3px rgba(73, 80, 87, 0.1);
}

.form-group label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.form-group:has(input:focus) label,
.form-group:has(textarea:focus) label {
    color: var(--accent);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-inner);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--neo-shadow-inner);
}

.form-group input:readonly {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
}

/* Delivery Details Grid */
.delivery-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Label with optional badge */
.form-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.label-text {
    font-weight: 500;
    color: var(--text-primary);
}

.optional-badge {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 400;
}

/* Payment Method Selector */
.payment-method-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.payment-option {
    position: relative;
}

.payment-option input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.payment-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--surface-primary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
}

.payment-label:hover {
    background: var(--surface-glass);
    border-color: var(--accent-light);
    transform: translateY(-1px);
}

.payment-option input[type="radio"]:checked + .payment-label {
    background: var(--surface-glass);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--neo-shadow-outer);
}

.payment-icon {
    font-size: var(--font-size-lg);
}

.payment-text {
    font-weight: 500;
    color: var(--text-primary);
}

/* Checkout Submit Section */
.checkout-submit-section {
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--neo-shadow-outer);
    backdrop-filter: blur(20px);
    margin-top: var(--spacing-xl);
    position: relative;
}

.submit-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
}

.submit-total {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.submit-total-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
}

.submit-total-amount {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--accent);
}

.submit-delivery-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.delivery-icon {
    font-size: var(--font-size-base);
}

/* Checkout Submit Button - Updated to match design system */
.checkout-submit-btn {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer), 0 8px 24px rgba(73, 80, 87, 0.2);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 56px;
}

.checkout-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.checkout-submit-btn:hover {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    transform: translateY(-2px);
    box-shadow: var(--neo-shadow-outer), 0 12px 32px rgba(73, 80, 87, 0.3);
}

.checkout-submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.checkout-submit-btn .btn-content {
    position: relative;
    z-index: 1;
    transition: all var(--transition-normal);
}

.checkout-submit-btn .success-icon {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-base);
    opacity: 0.8;
    transition: all var(--transition-normal);
}

/* Success animation states */
.checkout-submit-btn.success {
    background: linear-gradient(135deg, var(--success-primary) 0%, var(--success-light) 100%);
    box-shadow: var(--neo-shadow-outer), 0 8px 24px var(--success-shadow);
}

.checkout-submit-btn.success .btn-content {
    opacity: 0;
    transform: translateX(-10px);
}

.checkout-submit-btn.success .success-icon {
    opacity: 1;
    transform: scale(1.2);
    color: white;
}

/* Form validation and hints */
.form-hint {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    position: relative;
    z-index: 10; /* Lower than dropdown (1200) to stay behind it */
}

/* Responsive adjustments for medium screens */
@media (max-width: 1400px) {
    .checkout-content {
        gap: var(--spacing-lg);
        max-width: 760px;
    }
    
    .checkout-container {
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

/* Responsive adjustments for smaller desktop screens */
@media (max-width: 1300px) {
    .checkout-content {
        gap: var(--spacing-md);
        max-width: 720px;
    }
    
    .delivery-details-grid {
        grid-template-columns: 1fr;
    }
    
    .payment-method-selector {
        grid-template-columns: 1fr;
    }
}

/* Hide checkout page on mobile/tablet - use existing modal system */
@media (max-width: 1199px) {
    .checkout-page {
        display: none !important;
    }
}

/* Order item styles for profile page */
.order-item {
    background: var(--surface-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--neo-shadow-compact);
    transition: var(--transition-fast);
}

.order-item:hover {
    box-shadow: var(--neo-shadow-compact-hover);
    transform: translateY(-1px);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.order-info {
    flex: 1;
}

.order-id {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.order-date {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

.order-status {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-status.completed {
    background: rgba(52, 199, 89, 0.1);
    color: var(--success-primary);
    border: 1px solid rgba(52, 199, 89, 0.2);
}

.order-status.pending {
    background: rgba(255, 149, 0, 0.1);
    color: #ff9500;
    border: 1px solid rgba(255, 149, 0, 0.2);
}

.order-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-items-preview {
    flex: 1;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.item-name {
    color: var(--text-primary);
}

.items-more {
    color: var(--text-tertiary);
    font-style: italic;
}

.order-total-price {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

/* Filter buttons for profile orders */
.orders-filter {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--neo-shadow-compact);
}

.filter-btn:hover {
    background: var(--surface-glass);
    box-shadow: var(--neo-shadow-compact-hover);
    transform: translateY(-1px);
}

.filter-btn.active {
    background: var(--accent);
    color: var(--surface-primary);
    border-color: var(--accent);
}

/* Start shopping button */
.start-shopping-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--accent);
    color: var(--surface-primary);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--neo-shadow-outer);
    margin-top: var(--spacing-md);
}

.start-shopping-btn:hover {
    background: var(--accent-light);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15), var(--neo-shadow-outer);
    transform: translateY(-2px);
}

.start-shopping-btn:active {
    background: var(--accent);
    box-shadow: var(--neo-shadow-pressed);
    transform: translateY(0);
}

.start-shopping-btn .btn-icon {
    font-size: 16px;
}

/* Mobile adjustments for profile page */
@media (max-width: 768px) {
    .order-header {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }
    
    .order-status {
        align-self: flex-start;
    }
    
    .order-details {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }
    
    .order-total-price {
        align-self: flex-end;
        font-size: var(--font-size-base);
    }
    
    .filter-btn {
        font-size: var(--font-size-xs);
        padding: 4px 8px;
    }
}

/* ============== ENHANCED CHECKOUT PAGE STYLES ============== */

/* Enhanced Checkout Form Container */
.checkout-form-container {
    width: 100%;
    max-width: 900px;
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.checkout-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    pointer-events: none;
}

.checkout-form-container:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Enhanced Form Structure */
.enhanced-checkout-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

/* Unified Form Structure */
.unified-checkout-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Unified Form Container */
.unified-form-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.unified-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Removed hover animation for more compact feel */

/* Unified Delivery Details Grid */
.unified-delivery-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

/* Unified Payment Selector */
.unified-payment-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

/* Mobile Unified Form Structure */
.enhanced-mobile-checkout-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Mobile Unified Form Container */
.unified-mobile-form-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.unified-mobile-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Removed mobile hover animation for more compact feel */

/* Mobile Unified Delivery Details Grid */
.unified-mobile-delivery-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
    margin-top: calc(var(--spacing-xs) / 2);
}

/* Mobile Unified Payment Selector */
.unified-mobile-payment-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* Section Styling */
.form-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.form-section:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* Section Headers */
.section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 1;
}

.section-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--surface-glass-hover) 0%, var(--surface-glass) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    box-shadow: var(--neo-shadow-compact);
    transition: all var(--transition-fast);
}

/* Section Icon Color Variants */
.section-icon-wrapper.customer-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.section-icon-wrapper.delivery-icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.section-icon-wrapper.payment-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%);
    border-color: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.section-icon-wrapper:hover {
    transform: translateY(-1px);
    box-shadow: var(--neo-shadow-compact-hover);
}

.section-icon-wrapper .section-icon {
    font-size: var(--font-size-lg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.section-title-wrapper {
    flex: 1;
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.9;
}

/* Form Fields Container */
.form-fields {
    position: relative;
    z-index: 1;
}

/* Enhanced Form Groups */
.enhanced-form-group {
    margin-bottom: var(--spacing-sm);
}

.enhanced-form-group:last-child {
    margin-bottom: 0;
}

/* Enhanced Labels */
.enhanced-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    position: relative;
}


/* Input Wrapper */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Enhanced Inputs */
.enhanced-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    padding-right: 50px; /* Space for icon */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--text-primary);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    transition: all var(--transition-normal);
    box-shadow: 
        inset 2px 2px 4px rgba(0, 0, 0, 0.06),
        inset -2px -2px 4px rgba(255, 255, 255, 0.9),
        0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.enhanced-input:focus {
    outline: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%);
    border-color: var(--accent);
    box-shadow: 
        inset 1px 1px 2px rgba(0, 0, 0, 0.08),
        inset -1px -1px 2px rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(73, 80, 87, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.enhanced-input:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 249, 250, 0.85) 100%);
    box-shadow: 
        inset 2px 2px 4px rgba(0, 0, 0, 0.04),
        inset -2px -2px 4px rgba(255, 255, 255, 0.92),
        0 2px 6px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.enhanced-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Input Icons */
.input-icon {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    pointer-events: none;
    opacity: 0.7;
    transition: all var(--transition-fast);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.input-icon svg {
    width: 100%;
    height: 100%;
}

.input-wrapper:hover .input-icon,
.enhanced-input:focus + .input-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Enhanced Textarea */
.textarea-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.enhanced-textarea {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    padding-right: 50px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--text-primary);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    transition: all var(--transition-normal);
    box-shadow: 
        inset 2px 2px 4px rgba(0, 0, 0, 0.06),
        inset -2px -2px 4px rgba(255, 255, 255, 0.9),
        0 1px 3px rgba(0, 0, 0, 0.1);
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-family);
}

.enhanced-textarea:focus {
    outline: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%);
    border-color: var(--accent);
    box-shadow: 
        inset 1px 1px 2px rgba(0, 0, 0, 0.08),
        inset -1px -1px 2px rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(73, 80, 87, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.enhanced-textarea::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.textarea-icon {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    pointer-events: none;
    opacity: 0.7;
    transition: all var(--transition-fast);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.textarea-icon svg {
    width: 100%;
    height: 100%;
}

/* Delivery Details Container */
.delivery-details-container {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.details-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    opacity: 0.9;
}

.delivery-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

/* Form Hints */
.form-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    opacity: 0.8;
    position: relative;
    z-index: 10; /* Lower than dropdown (1200) to stay behind it */
}

.hint-icon {
    font-size: var(--font-size-xs);
}

/* Enhanced Payment Selector */
.enhanced-payment-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.payment-option {
    position: relative;
}

.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.enhanced-payment-label {
    display: block;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.payment-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.payment-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.payment-option input[type="radio"]:checked + .enhanced-payment-label .payment-content {
    background: rgba(73, 80, 87, 0.1);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.1);
}

.enhanced-payment-label:hover .payment-content {
    background: rgba(255, 255, 255, 0.75);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.payment-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--surface-glass-hover) 0%, var(--surface-glass) 100%);
    border-radius: var(--radius-sm);
    box-shadow: var(--neo-shadow-compact);
    transition: all var(--transition-fast);
}

.payment-icon {
    font-size: var(--font-size-lg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.payment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.payment-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.payment-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    opacity: 0.8;
}

.radio-indicator {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-tertiary);
    border-radius: 50%;
    position: relative;
    transition: all var(--transition-fast);
}

.payment-option input[type="radio"]:checked + .enhanced-payment-label .radio-indicator {
    border-color: var(--accent);
}

.payment-option input[type="radio"]:checked + .enhanced-payment-label .radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    animation: radioCheck 0.2s ease-out;
}

@keyframes radioCheck {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Enhanced Submit Section */
.enhanced-submit-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.delivery-time-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.1) 0%, rgba(52, 199, 89, 0.05) 100%);
    border: 1px solid rgba(52, 199, 89, 0.2);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.delivery-time-icon {
    font-size: var(--font-size-lg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.delivery-time-content {
    display: flex;
    flex-direction: column;
}

.delivery-time-title {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.delivery-time-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 700;
}

/* Enhanced Submit Button */
.enhanced-submit-btn {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    min-height: 64px;
}

.btn-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    transition: all var(--transition-normal);
}

.btn-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.enhanced-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--neo-shadow-outer), 0 12px 32px rgba(73, 80, 87, 0.3);
}

.enhanced-submit-btn:hover .btn-background {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
}

.enhanced-submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.btn-content-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
    transition: all var(--transition-normal);
}

.btn-icon {
    font-size: var(--font-size-base);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.btn-text {
    font-weight: 700;
}

.btn-arrow {
    font-size: var(--font-size-lg);
    transition: all var(--transition-fast);
}

.enhanced-submit-btn:hover .btn-arrow {
    transform: translateX(2px);
}

.btn-success-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-normal);
}

.enhanced-submit-btn.success .btn-content-wrapper {
    opacity: 0;
    transform: translateX(-20px);
}

.enhanced-submit-btn.success .btn-success-content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.enhanced-submit-btn.success .btn-background {
    background: linear-gradient(135deg, var(--success-primary) 0%, var(--success-light) 100%);
}

/* ============== ENHANCED MOBILE CHECKOUT STYLES ============== */

/* Mobile Enhanced Form */
.enhanced-mobile-checkout-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Mobile Form Sections */
.mobile-form-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.mobile-form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Mobile Section Headers */
.mobile-section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.mobile-section-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--surface-glass-hover) 0%, var(--surface-glass) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    box-shadow: var(--neo-shadow-compact);
    transition: all var(--transition-fast);
}

/* Mobile Section Icon Color Variants */
.mobile-section-icon-wrapper.customer-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.mobile-section-icon-wrapper.delivery-icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.mobile-section-icon-wrapper.payment-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%);
    border-color: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.mobile-section-icon-wrapper .section-icon {
    font-size: var(--font-size-base);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mobile-section-title-wrapper {
    flex: 1;
}

.mobile-section-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.mobile-section-subtitle {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.9;
}

/* Mobile Form Fields */
.mobile-form-fields {
    position: relative;
    z-index: 1;
}

/* Mobile Enhanced Form Groups */
.mobile-enhanced-form-group {
    margin-bottom: var(--spacing-sm);
}

.mobile-enhanced-form-group:last-child {
    margin-bottom: 0;
}

/* Mobile Enhanced Labels */
.mobile-enhanced-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: calc(var(--spacing-xs) / 2);
    position: relative;
}


/* Mobile Input Wrapper */
.mobile-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Mobile Enhanced Inputs */
.mobile-enhanced-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: 40px; /* Space for icon */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 249, 250, 0.78) 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--text-primary);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    transition: all var(--transition-normal);
    box-shadow: 
        inset 1px 1px 2px rgba(0, 0, 0, 0.05),
        inset -1px -1px 2px rgba(255, 255, 255, 0.85),
        0 1px 2px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.mobile-enhanced-input:focus {
    outline: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.93) 0%, rgba(248, 249, 250, 0.88) 100%);
    border-color: var(--accent);
    box-shadow: 
        inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.06),
        inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.9),
        0 0 0 2px rgba(73, 80, 87, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.mobile-enhanced-input:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.82) 100%);
    box-shadow: 
        inset 1px 1px 2px rgba(0, 0, 0, 0.03),
        inset -1px -1px 2px rgba(255, 255, 255, 0.88),
        0 1px 4px rgba(0, 0, 0, 0.1);
}

.mobile-enhanced-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Mobile Input Icons */
.mobile-input-icon {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    pointer-events: none;
    opacity: 0.7;
    transition: all var(--transition-fast);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mobile-input-icon svg {
    width: 100%;
    height: 100%;
}

.mobile-input-wrapper:hover .mobile-input-icon,
.mobile-enhanced-input:focus + .mobile-input-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Mobile Enhanced Textarea */
.mobile-textarea-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.mobile-enhanced-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: 40px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--text-primary);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    resize: vertical;
    min-height: 60px;
    font-family: var(--font-family);
}

.mobile-enhanced-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--accent);
    box-shadow: 
        0 0 0 2px rgba(73, 80, 87, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.mobile-enhanced-textarea::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.mobile-textarea-icon {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    pointer-events: none;
    opacity: 0.7;
    transition: all var(--transition-fast);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mobile-textarea-icon svg {
    width: 100%;
    height: 100%;
}

/* Form Hints */
.hint-icon {
    width: 12px;
    height: 12px;
    margin-right: var(--spacing-xs);
    color: var(--text-secondary);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    display: inline-block;
}

.hint-icon svg {
    width: 100%;
    height: 100%;
}

/* Mobile Delivery Details */
.mobile-delivery-details-container {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-details-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    opacity: 0.9;
}

.mobile-delivery-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

/* Mobile Form Hints */
.mobile-form-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    position: relative;
    z-index: 10; /* Lower than dropdown (1200) to stay behind it */
    margin-top: var(--spacing-xs);
    opacity: 0.8;
}

/* Mobile Enhanced Payment Selector */
.mobile-enhanced-payment-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mobile-payment-option {
    position: relative;
}

.mobile-payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mobile-enhanced-payment-label {
    display: block;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mobile-payment-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.mobile-payment-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.mobile-payment-option input[type="radio"]:checked + .mobile-enhanced-payment-label .mobile-payment-content {
    background: rgba(73, 80, 87, 0.1);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(73, 80, 87, 0.1);
}

.mobile-enhanced-payment-label:hover .mobile-payment-content {
    background: rgba(255, 255, 255, 0.75);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.mobile-payment-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--surface-glass-hover) 0%, var(--surface-glass) 100%);
    border-radius: var(--radius-xs);
    box-shadow: var(--neo-shadow-compact);
    transition: all var(--transition-fast);
}

.mobile-payment-icon-wrapper .payment-icon {
    font-size: var(--font-size-sm);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mobile-payment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mobile-payment-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.mobile-payment-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    opacity: 0.8;
}

.mobile-radio-indicator {
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-tertiary);
    border-radius: 50%;
    position: relative;
    transition: all var(--transition-fast);
}

.mobile-payment-option input[type="radio"]:checked + .mobile-enhanced-payment-label .mobile-radio-indicator {
    border-color: var(--accent);
}

.mobile-payment-option input[type="radio"]:checked + .mobile-enhanced-payment-label .mobile-radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    animation: radioCheck 0.2s ease-out;
}

/* Mobile Enhanced Submit Section (Default - Non-Checkout) */
.mobile-enhanced-submit-section {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.mobile-delivery-time-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.1) 0%, rgba(52, 199, 89, 0.05) 100%);
    border: 1px solid rgba(52, 199, 89, 0.2);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mobile-delivery-time-icon {
    font-size: var(--font-size-base);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mobile-delivery-time-content {
    display: flex;
    flex-direction: column;
}

.mobile-delivery-time-title {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.mobile-delivery-time-value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 700;
}

/* Mobile Enhanced Submit Button */
.mobile-enhanced-submit-btn {
    position: relative;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    min-height: 56px;
}

.mobile-btn-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    transition: all var(--transition-normal);
}

.mobile-btn-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.mobile-enhanced-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--neo-shadow-outer), 0 8px 24px rgba(73, 80, 87, 0.3);
}

.mobile-enhanced-submit-btn:hover .mobile-btn-background {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
}

.mobile-enhanced-submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.mobile-btn-content-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    color: white;
    font-weight: 700;
    font-size: var(--font-size-base);
    transition: all var(--transition-normal);
}

.mobile-btn-icon {
    font-size: var(--font-size-sm);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.mobile-btn-text {
    font-weight: 700;
}

.mobile-btn-arrow {
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
}

.mobile-enhanced-submit-btn:hover .mobile-btn-arrow {
    transform: translateX(2px);
}

.mobile-btn-success-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: white;
    font-weight: 700;
    font-size: var(--font-size-base);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-normal);
}

.mobile-enhanced-submit-btn.success .mobile-btn-content-wrapper {
    opacity: 0;
    transform: translateX(-20px);
}

.mobile-enhanced-submit-btn.success .mobile-btn-success-content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.mobile-enhanced-submit-btn.success .mobile-btn-background {
    background: linear-gradient(135deg, var(--success-primary) 0%, var(--success-light) 100%);
}

/* Responsive adjustments for enhanced checkout */
@media (max-width: 768px) {
    .delivery-details-grid {
        grid-template-columns: 1fr;
    }
    
    .enhanced-payment-selector {
        grid-template-columns: 1fr;
    }
    
    .enhanced-submit-section {
        padding: var(--spacing-md);
    }
    
    .enhanced-submit-btn {
        max-width: none;
        min-height: 56px;
    }
    
    .delivery-time-info {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* ===== COMPACT DELIVERY INFO BLOCKS FOR MOBILE ===== */
    .mobile-cart-delivery-info {
        padding: var(--spacing-xs) var(--spacing-md) !important; /* 4px vertical, maintain horizontal */
    }
    
    .mobile-delivery-time-info {
        padding: var(--spacing-xs) var(--spacing-sm) !important; /* 4px vertical, 8px horizontal */
    }
    
    .delivery-info {
        padding: var(--spacing-md) var(--spacing-lg) !important; /* Компактный padding для планшетов */
        border-radius: var(--radius-lg) !important;
    }
    
    /* Адаптивная типографика для мобильных */
    .delivery-title {
        font-size: var(--font-size-base) !important;
        gap: var(--spacing-xs) !important;
    }
    
    /* Уменьшенная анимация для touch устройств */
    .delivery-title::before {
        font-size: var(--font-size-lg) !important;
        animation: deliveryPulseMobile 2.5s ease-in-out infinite !important;
    }
    
    .delivery-time {
        padding: var(--spacing-xs) var(--spacing-md) !important; /* 4px vertical, maintain readability */
    }
    
    .section-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .section-title {
        font-size: var(--font-size-lg);
    }
    
    .section-subtitle {
        font-size: var(--font-size-xs);
    }
}

/* ===== EXTRA COMPACT DELIVERY INFO FOR SMALL MOBILE ===== */
@media (max-width: 480px) {
    .mobile-cart-delivery-info {
        padding: var(--spacing-xs) var(--spacing-sm) !important; /* 4px vertical, 8px horizontal - more compact */
    }
    
    .mobile-delivery-time-info {
        padding: var(--spacing-xs) var(--spacing-xs) !important; /* 4px all around - maximum compactness */
    }
    
    .delivery-info {
        padding: var(--spacing-sm) var(--spacing-md) !important; /* Более компактный для маленьких экранов */
        border-radius: var(--radius-md) !important;
        margin-bottom: var(--spacing-xs) !important;
    }
    
    /* Адаптивная типографика для маленьких экранов */
    .delivery-title {
        font-size: var(--font-size-sm) !important;
        gap: 4px !important;
        letter-spacing: 0 !important;
    }
    
    /* Минимальная анимация для экономии ресурсов */
    .delivery-title::before {
        font-size: var(--font-size-base) !important;
        animation: deliveryPulseMobile 3s ease-in-out infinite !important;
    }
    
    .delivery-time {
        padding: var(--spacing-xs) var(--spacing-sm) !important; /* 4px vertical, 8px horizontal */
    }
    
    /* Also compact delivery info content */
    .delivery-info-content {
        gap: var(--spacing-xs) !important; /* Reduce gap between elements */
        font-size: var(--font-size-xs) !important; /* Smaller text for mobile */
    }
    
    .mobile-delivery-time-title,
    .mobile-delivery-time-value {
        font-size: var(--font-size-xs) !important; /* Smaller text */
    }
}

/* ============== CHECKOUT PAGE STYLES ============== */

/* Checkout page body styling */
.checkout-body {
    background: var(--background-primary);
}

/* Back to menu button styling */
.back-to-menu-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-base);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-base);
    cursor: pointer;
}

.back-to-menu-btn:hover {
    background: var(--glass-bg-hover);
    box-shadow: var(--neo-shadow-pressed);
    transform: translateY(1px);
}

.back-to-menu-btn .back-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
}

/* Checkout main content */
.checkout-main-content {
    margin-left: var(--sidebar-width); /* Account for sidebar */
    width: calc(100% - var(--sidebar-width)); /* Explicit width calculation */
    min-height: 100vh;
    background: var(--bg-primary);
    position: relative;
}

/* Desktop checkout layout */
.checkout-desktop-layout {
    display: block;
    padding: var(--spacing-lg);
    min-height: 100vh;
}

/* GLOBAL: Prevent any scrolling when checkout page is active on PC */
html.checkout-page-active {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

/* PC Full Screen Checkout (≥1200px) - COMPLETE SCROLL PREVENTION */
@media (min-width: 1200px) {
    /* CRITICAL: Complete scroll prevention on checkout page */
    body.checkout-body {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    /* App container must be constrained */
    body.checkout-body .app {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Sidebar positioning within fixed body */
    body.checkout-body .sidebar.desktop-only {
        height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
        overflow-y: auto !important;
    }
    
    /* Main content area - positioned to account for sidebar */
    body.checkout-body .checkout-main-content {
        position: fixed !important;
        top: 0 !important;
        left: var(--sidebar-width) !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: calc(100vw - var(--sidebar-width)) !important;
        overflow: hidden !important;
        margin-left: 0 !important;
    }
    
    /* Desktop layout container */
    body.checkout-body .checkout-desktop-layout {
        height: 100% !important;
        overflow: hidden !important;
        padding: var(--spacing-lg) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Checkout container */
    body.checkout-body .checkout-container {
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Content area with internal scrolling only */
    body.checkout-body .checkout-content {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: var(--spacing-sm) !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0,0,0,0.3) transparent !important;
    }
    
    /* Webkit scrollbar styling */
    body.checkout-body .checkout-content::-webkit-scrollbar {
        width: 6px !important;
    }
    
    body.checkout-body .checkout-content::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    body.checkout-body .checkout-content::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.3) !important;
        border-radius: 3px !important;
    }
    
    body.checkout-body .checkout-content::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.5) !important;
    }
    
    /* Ensure checkout header is not scrollable */
    /* Ensure checkout header is not scrollable */
    body.checkout-body .checkout-header {
        flex-shrink: 0 !important;
        margin-bottom: var(--spacing-lg) !important;
    }
    
    /* Disable any scrolling on html element (fallback for browsers without :has support) */
    html:has(body.checkout-body),
    html.checkout-page-active {
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* Ensure mobile elements are hidden on desktop */
    body.checkout-body .mobile-tablet-only,
    body.checkout-body .checkout-mobile-layout {
        display: none !important;
    }
    
    /* Force desktop layout to be visible */
    body.checkout-body .desktop-only,
    body.checkout-body .checkout-desktop-layout {
        display: block !important;
    }
    
    body.checkout-body .sidebar.desktop-only {
        display: flex !important;
    }
}

.checkout-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.checkout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 10px var(--spacing-md);
}


.checkout-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    flex: 1;
}

.checkout-header-spacer {
    width: 150px; /* Balance the layout */
}

/* Checkout content - Single column layout */
.checkout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

/* Order summary section - removed for cleaner checkout flow */

/* Order-related styles removed for cleaner checkout flow */

/* Form section - optimized for single column layout */
.checkout-form-section {
    width: 100%;
    max-width: 900px;
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-normal);
}

.checkout-form-section:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.form-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.form-section:last-child {
    margin-bottom: 0;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.section-icon {
    font-size: var(--font-size-xl);
}

/* Enhanced form field styling */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 0.02em;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    transition: all var(--transition-fast);
    box-shadow: var(--neo-shadow-inner);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-glass);
    box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.1), var(--neo-shadow-inner);
    transform: translateY(-1px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.delivery-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-hint {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    font-style: italic;
    position: relative;
    z-index: 10; /* Lower than dropdown (1200) to stay behind it */
}

/* Enhanced payment method styling */
.payment-method-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.payment-option {
    position: relative;
}

.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.payment-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--surface-primary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
    box-shadow: var(--neo-shadow-outer);
    position: relative;
    overflow: hidden;
}

.payment-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--surface-glass), var(--surface-secondary));
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: -1;
}

.payment-label:hover::before {
    opacity: 0.5;
}

.payment-option input[type="radio"]:checked + .payment-label {
    border-color: var(--accent);
    background: var(--surface-glass);
    box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.1), var(--neo-shadow-outer);
    transform: translateY(-1px);
}

.payment-option input[type="radio"]:checked + .payment-label::before {
    opacity: 1;
}

.payment-icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.payment-text {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

/* Checkout submit section */
.checkout-submit-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.submit-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.submit-total {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.submit-total-label {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.submit-total-amount {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--accent-color);
}

.submit-delivery-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.checkout-submit-btn {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    box-shadow: var(--neo-shadow-outer), 0 8px 24px rgba(73, 80, 87, 0.2);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    min-height: 56px;
    margin-top: var(--spacing-lg);
}

.checkout-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.checkout-submit-btn:hover {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
    box-shadow: var(--neo-shadow-outer), 0 12px 32px rgba(73, 80, 87, 0.3);
    transform: translateY(-2px);
}

.checkout-submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.checkout-submit-btn .btn-content {
    position: relative;
    z-index: 1;
    transition: all var(--transition-normal);
}

.checkout-submit-btn .success-icon {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-base);
    opacity: 0.8;
    transition: all var(--transition-normal);
}

/* Success animation states */
.checkout-submit-btn.success {
    background: linear-gradient(135deg, var(--success-primary) 0%, var(--success-light) 100%);
    box-shadow: var(--neo-shadow-outer), 0 8px 24px var(--success-shadow);
}

.checkout-submit-btn.success .btn-content {
    opacity: 0;
    transform: translateX(-10px);
}

.checkout-submit-btn.success .success-icon {
    opacity: 1;
    transform: scale(1.2);
    color: white;
}

/* Mobile checkout layout */
.checkout-mobile-layout {
    display: none;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    background: var(--bg-primary);
}

.mobile-checkout-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Add top padding to account for fixed mobile header */
    padding-top: 64px;
}

.mobile-checkout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-lg);
    background: var(--surface-glass);
    border-bottom: 1px solid var(--border-light);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 2px 8px var(--shadow-light);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 64px;
}

.mobile-back-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mobile-back-btn:hover {
    background: var(--surface-glass-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

.mobile-back-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), var(--neo-shadow-outer);
}

.mobile-checkout-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    flex: 1;
    margin: 0;
    letter-spacing: -0.025em;
}

.mobile-header-spacer {
    width: 40px;
}

.mobile-checkout-content {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-md);
    padding-bottom: var(--spacing-md); /* Natural bottom padding */
    overflow-y: auto;
    /* Ensure content doesn't hide under fixed header */
    margin-top: 0;
}

/* Mobile order summary - removed for cleaner checkout flow */

/* Mobile form */
.mobile-checkout-form {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-md);
    backdrop-filter: var(--glass-blur);
}

.mobile-form-section {
    margin-bottom: var(--spacing-md);
}

.mobile-form-section:last-child {
    margin-bottom: 0;
}

.mobile-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

/* Mobile submit section - Inline positioning */
.mobile-checkout-submit-section {
    position: relative;
    margin-top: var(--spacing-lg);
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--neo-shadow-outer);
}

.mobile-submit-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.mobile-submit-total {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.mobile-submit-total-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-submit-total-amount {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--accent-color);
}

.mobile-submit-delivery-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.mobile-checkout-submit-btn {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    min-height: 56px;
    margin-top: var(--spacing-md);
    touch-action: manipulation;
}

.mobile-checkout-submit-btn:hover {
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    box-shadow: 0 8px 24px rgba(73, 80, 87, 0.3);
    transform: translateY(-2px);
}

.mobile-checkout-submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

/* Enhanced single-column checkout layout */
@media (min-width: 1200px) {
    .checkout-form-section {
        padding: var(--spacing-lg) var(--spacing-xl);
    }
    
    .form-section {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    .delivery-details-grid {
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }
    
    /* Unified delivery details grid responsive */
    .unified-delivery-details-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .checkout-submit-section {
        padding: var(--spacing-3xl);
        margin-top: var(--spacing-2xl);
    }
    
    .submit-summary {
        margin-bottom: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    
    .submit-total-label {
        font-size: var(--font-size-xl);
    }
    
    .submit-total-amount {
        font-size: var(--font-size-2xl);
    }
}

/* Responsive breakpoints */
@media (max-width: 1199px) {
    .checkout-main-content {
        margin-left: 0; /* Remove sidebar margin on mobile/tablet */
        padding-top: 64px; /* Fixed header height for universal header (64px) */
    }
    
    .checkout-content {
        gap: var(--spacing-lg);
    }
    
    .checkout-desktop-layout {
        display: none !important; /* Hide desktop layout on mobile/tablet */
    }
    
    .checkout-mobile-layout {
        display: flex !important; /* Show mobile layout on mobile/tablet */
        flex-direction: column !important;
        min-height: 100vh !important;
        width: 100% !important;
    }
    
    .mobile-checkout-container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        width: 100% !important;
        /* Ensure proper spacing under fixed mobile header */
        padding-top: 64px !important;
    }
    
    /* Hide legacy mobile-checkout-header in favor of universal-mobile-header */
    .mobile-checkout-header {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* ===== MOBILE CHECKOUT HEADER HIDING ===== */
    /* Hide old header on mobile checkout page, but keep universal header visible */
    .checkout-body .header:not(.universal-mobile-header) {
        display: none !important;
    }
    
    /* Ensure universal mobile header remains visible */
    .checkout-body .universal-mobile-header.mobile-tablet-only {
        display: block !important;
        height: 80px !important;
        min-height: 80px !important;
    }
    
    /* Ensure mobile checkout layout is visible */
    .checkout-body .checkout-mobile-layout {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .checkout-body .mobile-checkout-container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        /* Critical fix: account for fixed mobile header height */
        padding-top: 64px !important;
    }
    
    .checkout-body .mobile-checkout-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide burger menu on mobile checkout page */
    .checkout-body .mobile-burger-menu,
    .checkout-body .mobile-burger-dropdown {
        display: none !important;
    }
    
    /* Hide all restaurant branding elements on mobile checkout */
    .checkout-body .sidebar {
        display: none !important;
    }
    
    .checkout-body .header {
        display: none !important;
    }
    
    .checkout-body .mobile-burger-menu,
    .checkout-body .mobile-burger-dropdown,
    .checkout-body .burger-dropdown-content {
        display: none !important;
    }
    
    /* Adjust checkout content padding since header is hidden on mobile */
    .checkout-body .checkout-main-content {
        padding-top: 0; /* No header on small mobile checkout pages */
    }
    
    .checkout-desktop-layout {
        padding: var(--spacing-md);
    }
    
    .checkout-container {
        padding: 0;
    }
    
    .checkout-header {
        margin-bottom: 0;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .checkout-title {
        font-size: var(--font-size-xl);
    }
    
    .checkout-back-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
    
    .checkout-content {
        gap: var(--spacing-lg);
        max-width: none;
    }
    
    .checkout-form-section {
        border-radius: var(--radius-md);
        padding: var(--spacing-lg);
        box-shadow: var(--neo-shadow-outer);
    }
    
    .form-section {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
        border-radius: var(--radius-md);
    }
    
    .form-section-title {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    .delivery-details-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .payment-method-selector {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .form-group input,
    .form-group textarea {
        padding: var(--spacing-lg);
        font-size: var(--font-size-base);
        min-height: 48px; /* Better touch target */
    }
    
    .checkout-submit-section {
        margin-top: var(--spacing-lg);
    }
    
    .checkout-submit-btn {
        font-size: var(--font-size-base);
        padding: var(--spacing-md) var(--spacing-lg);
        min-height: 52px;
    }
    
    .checkout-order-item {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .order-item-image {
        width: 50px;
        height: 50px;
    }
    
    .order-summary-title {
        font-size: var(--font-size-lg);
    }
    
    .pricing-row {
        font-size: var(--font-size-xs);
    }
    
    .pricing-row.total-row {
        font-size: var(--font-size-sm);
    }
}

/* Enhanced Checkout Form Styles */
.enhanced-form-group,
.mobile-enhanced-form-group {
    transition: all var(--transition-base);
}

/* Field Validation States */
.enhanced-form-group.field-error .input-wrapper,
.enhanced-form-group.field-error .mobile-input-wrapper,
.enhanced-form-group.field-error .address-input-wrapper,
.mobile-enhanced-form-group.field-error .input-wrapper,
.mobile-enhanced-form-group.field-error .mobile-input-wrapper,
.mobile-enhanced-form-group.field-error .address-input-wrapper {
    border-color: #ff3b30;
    box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.1);
}

.enhanced-form-group.field-success .input-wrapper,
.enhanced-form-group.field-success .mobile-input-wrapper,
.enhanced-form-group.field-success .address-input-wrapper,
.mobile-enhanced-form-group.field-success .input-wrapper,
.mobile-enhanced-form-group.field-success .mobile-input-wrapper,
.mobile-enhanced-form-group.field-success .address-input-wrapper {
    border-color: var(--success-color);
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.1);
}

/* Field Error Messages */
.field-error-message {
    display: none;
    color: #ff3b30;
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    font-weight: 500;
    animation: slideDown 0.3s ease;
}

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

/* Shake Animation for Errors */
.shake-animation {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 20%, 40%, 60%, 80%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    15%, 35%, 55%, 75%, 95% { transform: translateX(8px); }
}

/* Payment Method Animation */
.payment-selected-animation {
    animation: paymentSelect 0.3s ease;
}

@keyframes paymentSelect {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.enhanced-payment-label.selected,
.mobile-enhanced-payment-label.selected {
    background: linear-gradient(135deg, var(--glass-bg-hover) 0%, var(--surface-glass-hover) 100%);
    border-color: var(--accent-color);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(73, 80, 87, 0.1);
}

/* Address Validation Indicators */
.address-validation-indicator {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-validation-indicator .validation-icon {
    display: none;
    font-size: 14px;
    line-height: 1;
}

.address-validation-indicator.success .success-icon {
    display: block;
    color: var(--success-color);
}

.address-validation-indicator.error .error-icon {
    display: block;
    color: #ff3b30;
}

.address-validation-indicator.loading .loading-icon {
    display: block;
}

.loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Enhanced Submit Button States */
.enhanced-submit-btn,
.mobile-enhanced-submit-btn {
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.enhanced-submit-btn.loading,
.mobile-enhanced-submit-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.enhanced-submit-btn.loading .btn-content-wrapper,
.enhanced-submit-btn.loading .mobile-btn-content-wrapper,
.mobile-enhanced-submit-btn.loading .btn-content-wrapper,
.mobile-enhanced-submit-btn.loading .mobile-btn-content-wrapper {
    opacity: 0.6;
}

.enhanced-submit-btn.success,
.mobile-enhanced-submit-btn.success {
    background: var(--success-color);
    color: white;
    transform: scale(1.02);
}

.enhanced-submit-btn.success .btn-success-content,
.enhanced-submit-btn.success .mobile-btn-success-content,
.mobile-enhanced-submit-btn.success .btn-success-content,
.mobile-enhanced-submit-btn.success .mobile-btn-success-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.btn-success-content,
.mobile-btn-success-content {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
}

.enhanced-submit-btn.error,
.mobile-enhanced-submit-btn.error {
    background: #ff3b30;
    color: white;
    animation: shake 0.5s ease-in-out;
}

/* Checkout Error Message */
.checkout-error-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ff3b30;
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-base);
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(255, 59, 48, 0.3);

/* ========== MOBILE CHECKOUT BUTTON ENHANCEMENT - MATCH MAIN PAGE "ДАЛЕЕ" BUTTON ========== */

/* Enhanced submit buttons to match main page mobile-checkout-btn styling exactly */
.enhanced-submit-btn,
.mobile-enhanced-submit-btn,
.compact-submit-btn {
    /* Base styling matching mobile-cart-bottom-bar .mobile-checkout-btn */
    width: 100%;
    background: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg) var(--spacing-xl);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    position: relative;
    overflow: hidden;
    
    /* Content styling to match checkout-btn-content */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--surface-primary);
    font-weight: 600;
    font-size: var(--font-size-lg);
    min-height: 56px;
}

/* Shimmer effect matching main page mobile-checkout-btn */
.enhanced-submit-btn::before,
.mobile-enhanced-submit-btn::before,
.compact-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

/* Active state - when all required fields are filled (matches main page active button) */
.enhanced-submit-btn:not(:disabled),
.mobile-enhanced-submit-btn:not(:disabled),
.compact-submit-btn:not(:disabled) {
    opacity: 1 !important;
    background: var(--text-primary) !important;
    color: var(--surface-primary) !important;
    filter: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    box-shadow: var(--neo-shadow-outer) !important;
}

/* Inactive/disabled state - when required fields are missing (grayed out) */
.enhanced-submit-btn:disabled,
.mobile-enhanced-submit-btn:disabled,
.compact-submit-btn:disabled {
    background: var(--text-tertiary) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: inset 4px 4px 8px var(--shadow-light), inset -4px -4px 8px rgba(255, 255, 255, 0.8) !important;
    pointer-events: none !important;
}

/* Hover effect for active buttons (matches main page exactly) */
.enhanced-submit-btn:hover:not(:disabled):not(:active)::before,
.mobile-enhanced-submit-btn:hover:not(:disabled):not(:active)::before,
.compact-submit-btn:hover:not(:disabled):not(:active)::before {
    left: 100%;
}

.enhanced-submit-btn:hover:not(:disabled):not(:active),
.mobile-enhanced-submit-btn:hover:not(:disabled):not(:active),
.compact-submit-btn:hover:not(:disabled):not(:active) {
    background: var(--accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9) !important;
}

/* Active/pressed state (matches main page) */
.enhanced-submit-btn:active:not(:disabled),
.mobile-enhanced-submit-btn:active:not(:disabled),
.compact-submit-btn:active:not(:disabled) {
    transform: translateY(2px) !important;
    box-shadow: var(--neo-shadow-outer) !important;
}

/* Mobile-specific enhancements to perfectly match main page "Далее" button */
@media (max-width: 768px) {
    .enhanced-submit-btn,
    .mobile-enhanced-submit-btn {
        /* Exact match for mobile-cart-bottom-bar styling */
        background: var(--text-primary) !important;
        border: 1px solid var(--border-light) !important;
        border-radius: var(--radius-xl) !important;
        padding: var(--spacing-lg) var(--spacing-xl) !important;
        box-shadow: var(--neo-shadow-outer) !important;
        min-height: 56px !important;
        font-size: var(--font-size-lg) !important;
        font-weight: 700 !important; /* Match .checkout-text font-weight */
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
        transition: all var(--transition-normal) !important;
        cursor: pointer !important;
    }
    
    /* Ensure button text styling matches .checkout-text exactly */
    .enhanced-submit-btn .btn-text,
    .mobile-enhanced-submit-btn .mobile-btn-text,
    .enhanced-submit-btn .btn-content-wrapper,
    .mobile-enhanced-submit-btn .mobile-btn-content-wrapper {
        font-size: var(--font-size-lg) !important;
        font-weight: 700 !important;
        color: var(--surface-primary) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--spacing-sm) !important;
    }
    
    /* Mobile button icon styling */
    .mobile-enhanced-submit-btn .mobile-btn-icon {
        display: none !important;
    }
    
    .mobile-enhanced-submit-btn .mobile-btn-arrow {
        color: var(--surface-primary) !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Active state reinforcement for mobile */
    .enhanced-submit-btn:not(:disabled),
    .mobile-enhanced-submit-btn:not(:disabled) {
        opacity: 1 !important;
        background: var(--text-primary) !important;
        color: var(--surface-primary) !important;
        filter: none !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        box-shadow: var(--neo-shadow-outer) !important;
    }
    
    /* Disabled state for mobile - exactly like main page disabled "Далее" button */
    .enhanced-submit-btn:disabled,
    .mobile-enhanced-submit-btn:disabled {
        background: var(--text-tertiary) !important;
        color: rgba(255, 255, 255, 0.6) !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
        transform: none !important;
        box-shadow: inset 4px 4px 8px var(--shadow-light), inset -4px -4px 8px rgba(255, 255, 255, 0.8) !important;
        pointer-events: none !important;
    }
    
    .mobile-enhanced-submit-btn:disabled .mobile-btn-text,
    .mobile-enhanced-submit-btn:disabled .mobile-btn-arrow {
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    /* Hover effect for active buttons (matches main page exactly) */
    .enhanced-submit-btn:hover:not(:disabled):not(:active),
    .mobile-enhanced-submit-btn:hover:not(:disabled):not(:active) {
        background: var(--accent) !important;
        transform: translateY(-2px) !important;
        box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Active/pressed state (matches main page) */
    .enhanced-submit-btn:active:not(:disabled),
    .mobile-enhanced-submit-btn:active:not(:disabled) {
        transform: translateY(2px) !important;
        box-shadow: var(--neo-shadow-outer) !important;
    }
    
    /* Shimmer effect for active buttons */
    .enhanced-submit-btn:not(:disabled):hover::before,
    .mobile-enhanced-submit-btn:not(:disabled):hover::before {
        left: 100% !important;
    }
}
    z-index: 10000;
    transform: translateX(400px);
    opacity: 0;
    transition: all var(--transition-base);
}

.checkout-error-message.show {
    transform: translateX(0);
    opacity: 1;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .checkout-error-message {
        top: 10px;
        right: 10px;
        left: 10px;
        transform: translateY(-100px);
        text-align: center;
    }
    
    .checkout-error-message.show {
        transform: translateY(0);
    }
    
    .field-error-message {
        font-size: var(--font-size-xxs);
    }
    
    .address-validation-indicator {
        right: 10px;
        width: 18px;
        height: 18px;
    }
    
    .loading-spinner {
        width: 12px;
        height: 12px;
    }
}

/* ================================
   CUSTOM POPUP SYSTEM
   ================================ */

/* Popup Container */
.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
}

/* Toast Notifications (Top Right) */
.toast-notifications {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 400px;
    width: calc(100vw - 2 * var(--spacing-lg));
}

.toast {
    pointer-events: auto;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--neo-shadow-outer);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.hide {
    transform: translateX(100%);
    opacity: 0;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.toast-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--transition-base);
}

.toast-close:hover {
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.05);
}

/* Toast Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width linear;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

/* Toast Type Variations */
.toast.success {
    border-left: 4px solid var(--success-color);
}

.toast.success .toast-icon {
    color: var(--success-color);
}

.toast.success .toast-progress {
    background: var(--success-color);
}

.toast.error {
    border-left: 4px solid #ff4757;
}

.toast.error .toast-icon {
    color: #ff4757;
}

.toast.error .toast-progress {
    background: #ff4757;
}

.toast.warning {
    border-left: 4px solid #ffa502;
}

.toast.warning .toast-icon {
    color: #ffa502;
}

.toast.warning .toast-progress {
    background: #ffa502;
}

.toast.info {
    border-left: 4px solid #3742fa;
}

.toast.info .toast-icon {
    color: #3742fa;
}

.toast.info .toast-progress {
    background: #3742fa;
}

/* Confirmation Dialog Overlay */
.confirmation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.confirmation-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Confirmation Dialog */
.confirmation-dialog {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    max-width: 400px;
    width: calc(100vw - 2 * var(--spacing-lg));
    text-align: center;
    transform: scale(0.8) translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirmation-overlay.show .confirmation-dialog {
    transform: scale(1) translateY(0);
}

.confirmation-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    display: block;
}

.confirmation-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.confirmation-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-xl);
}

.confirmation-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.confirmation-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-base);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    min-width: 100px;
    position: relative;
    overflow: hidden;
}

.confirmation-btn.cancel {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    box-shadow: var(--neo-shadow-outer);
}

.confirmation-btn.cancel:hover {
    background: var(--surface-glass-hover);
    color: var(--text-primary);
    box-shadow: var(--neo-shadow-compact-hover);
}

.confirmation-btn.cancel:active {
    box-shadow: var(--neo-shadow-compact-pressed);
}

.confirmation-btn.confirm {
    background: var(--accent-color);
    color: white;
    box-shadow: var(--neo-shadow-outer);
}

.confirmation-btn.confirm:hover {
    background: var(--accent-color-dark);
    box-shadow: var(--neo-shadow-compact-hover);
}

.confirmation-btn.confirm:active {
    box-shadow: var(--neo-shadow-compact-pressed);
}

.confirmation-btn.confirm.danger {
    background: #ff4757;
}

.confirmation-btn.confirm.danger:hover {
    background: #ff3838;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .toast-notifications {
        top: var(--spacing-md);
        right: var(--spacing-md);
        left: var(--spacing-md);
        width: auto;
        max-width: none;
    }
    
    .toast {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .toast-title {
        font-size: 13px;
    }
    
    .toast-message {
        font-size: 12px;
    }
    
    .confirmation-dialog {
        padding: var(--spacing-lg);
        margin: var(--spacing-md);
        width: calc(100vw - 2 * var(--spacing-md));
    }
    
    .confirmation-icon {
        font-size: 36px;
    }
    
    .confirmation-title {
        font-size: 16px;
    }
    
    .confirmation-message {
        font-size: 13px;
    }
    
    .confirmation-buttons {
        flex-direction: column;
    }
    
    .confirmation-btn {
        min-width: auto;
        width: 100%;
    }
}

/* Animation Keyframes */
@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes confirmationFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes confirmationFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
}

/* ===== ENHANCED MOBILE CHECKOUT OPTIMIZATIONS ===== */

/* Mobile-first checkout improvements for better touch experience */
@media (max-width: 768px) {
    
    /* ===== ENHANCED INPUT FIELDS ===== */
    .checkout-body .mobile-enhanced-input {
        padding: 16px 14px !important;
        font-size: 16px !important; /* 16px prevents zoom on iOS */
        min-height: 50px !important; /* Enhanced touch target 48-50px */
        border-radius: var(--radius-md) !important;
        line-height: 1.4 !important;
        border: 1px solid var(--border-light) !important;
        background: var(--surface-primary) !important;
        transition: all var(--transition-fast) !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .checkout-body .mobile-enhanced-input:focus {
        border-width: 2px !important;
        border-color: var(--accent) !important;
        outline: none !important;
        transform: scale(1.01) !important;
        box-shadow: 
            inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.06),
            inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.9),
            0 0 0 3px rgba(73, 80, 87, 0.1) !important;
    }
    
    .checkout-body .mobile-enhanced-input:hover:not(:focus) {
        border-color: var(--accent-light) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* ===== ENHANCED LABELS ===== */
    .checkout-body .mobile-enhanced-label {
        font-size: 16px !important; /* 16px for better readability */
        margin-bottom: 8px !important;
        font-weight: 600 !important;
        letter-spacing: 0.025em !important;
        color: var(--text-primary) !important;
        display: block !important;
    }
    
    /* ===== ENHANCED TEXTAREA ===== */
    .checkout-body .mobile-enhanced-textarea {
        padding: 16px 14px !important;
        font-size: 16px !important; /* 16px prevents zoom on iOS */
        min-height: 90px !important; /* Enhanced minimum height for comfort */
        border-radius: var(--radius-md) !important;
        line-height: 1.5 !important;
        resize: vertical !important;
        border: 1px solid var(--border-light) !important;
        background: var(--surface-primary) !important;
        transition: all var(--transition-fast) !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-family: var(--font-family) !important;
    }
    
    .checkout-body .mobile-enhanced-textarea:focus {
        border-width: 2px !important;
        border-color: var(--accent) !important;
        outline: none !important;
        transform: scale(1.01) !important;
        box-shadow: 
            inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.06),
            inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.9),
            0 0 0 3px rgba(73, 80, 87, 0.1) !important;
    }
    
    .checkout-body .mobile-enhanced-textarea:hover:not(:focus) {
        border-color: var(--accent-light) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* ===== OPTIMIZED FORM GROUPS - More Compact ===== */
    .checkout-body .mobile-enhanced-form-group {
        margin-bottom: var(--spacing-md) !important; /* More compact spacing between form fields */
    }
    
    .checkout-body .mobile-enhanced-form-group:last-child {
        margin-bottom: var(--spacing-md) !important; /* Normal spacing for inline form */
    }
    
    /* ===== COMPACT SUBMIT BUTTON - Horizontal Layout ===== */
    .checkout-body .mobile-enhanced-submit-btn {
        /* Match main page mobile-checkout-btn exactly */
        width: 100% !important;
        background: var(--text-primary) !important;
        border: 1px solid var(--border-light) !important;
        border-radius: var(--radius-xl) !important;
        padding: var(--spacing-lg) var(--spacing-xl) !important;
        cursor: pointer !important;
        transition: all var(--transition-normal) !important;
        box-shadow: var(--neo-shadow-outer) !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: var(--spacing-md) !important;
        color: var(--surface-primary) !important;
        font-weight: 600 !important;
        font-size: var(--font-size-lg) !important;
        min-height: 56px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .checkout-body .mobile-enhanced-submit-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.6s ease;
    }
    
    .checkout-body .mobile-enhanced-submit-btn:hover::before {
        left: 100%;
    }
    
    .checkout-body .mobile-enhanced-submit-btn:hover:not(:active) {
        background: var(--accent) !important;
        transform: translateY(-2px) !important;
        box-shadow: 12px 12px 24px var(--shadow-medium), -12px -12px 24px rgba(255, 255, 255, 0.9) !important;
    }
    
    .checkout-body .mobile-enhanced-submit-btn:active {
        transform: translateY(2px) !important;
        box-shadow: var(--neo-shadow-outer) !important;
    }
    
    .checkout-body .mobile-enhanced-submit-btn:disabled {
        background: var(--text-tertiary) !important;
        color: rgba(255, 255, 255, 0.6) !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
        transform: none !important;
        box-shadow: inset 4px 4px 8px var(--shadow-light), inset -4px -4px 8px rgba(255, 255, 255, 0.8) !important;
        pointer-events: none !important;
    }
    
    .checkout-body .mobile-btn-text {
        font-size: var(--font-size-lg) !important;
        font-weight: 700 !important;
        letter-spacing: 0.025em !important;
        color: var(--surface-primary) !important;
    }
    
    .checkout-body .mobile-enhanced-submit-btn .mobile-btn-content-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--spacing-sm) !important;
        color: var(--surface-primary) !important;
        font-weight: 700 !important;
        font-size: var(--font-size-lg) !important;
    }
    
    .checkout-body .mobile-enhanced-submit-btn .mobile-btn-icon {
        display: none !important;
    }
    
    .checkout-body .mobile-enhanced-submit-btn .mobile-btn-arrow {
        color: var(--surface-primary) !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .checkout-body .mobile-enhanced-submit-btn:disabled .mobile-btn-text,
    .checkout-body .mobile-enhanced-submit-btn:disabled .mobile-btn-arrow,
    .checkout-body .mobile-enhanced-submit-btn:disabled .mobile-btn-content-wrapper {
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    /* ===== ENHANCED PAYMENT OPTIONS ===== */
    .checkout-body .mobile-payment-content {
        padding: 16px !important; /* Enhanced touch padding */
        min-height: 56px !important; /* Optimal touch target height */
        border-radius: var(--radius-md) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border: 1px solid var(--border-light) !important;
        background: var(--surface-primary) !important;
        transition: all var(--transition-fast) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    
    .checkout-body .mobile-enhanced-payment-label {
        cursor: pointer !important;
        display: block !important;
        width: 100% !important;
        min-height: 44px !important; /* Enhanced touch target */
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .checkout-body .mobile-payment-content:hover {
        background: var(--surface-secondary) !important;
        border-color: var(--accent) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    .checkout-body .mobile-payment-title {
        font-size: 16px !important; /* Enhanced readability */
        font-weight: 600 !important;
        color: var(--text-primary) !important;
    }
    
    .checkout-body .mobile-payment-description {
        font-size: 14px !important; /* Enhanced description text */
        color: var(--text-secondary) !important;
        margin-top: 2px !important;
    }
    
    .checkout-body .mobile-payment-icon-wrapper {
        width: 44px !important; /* Enhanced touch target size */
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        border-radius: var(--radius-sm) !important;
        background: var(--surface-secondary) !important;
    }
    
    .checkout-body .mobile-payment-icon-wrapper svg {
        width: 20px !important;
        height: 20px !important;
        color: var(--text-primary) !important;
    }
    
    /* ===== ENHANCED DELIVERY DETAILS GRID ===== */
    .checkout-body .unified-mobile-delivery-details-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Two columns for apartment/floor */
        gap: 12px !important; /* Enhanced spacing */
        margin-top: 16px !important;
    }
    
    .checkout-body .unified-mobile-delivery-details-grid .mobile-enhanced-form-group:nth-child(3) {
        grid-column: 1 / -1 !important; /* Intercom field spans full width */
    }
    
    /* ===== ENHANCED FORM CONTAINER ===== */
    .checkout-body .unified-mobile-form-container {
        padding: 20px !important; /* Enhanced padding */
        margin-bottom: 24px !important;
        border-radius: var(--radius-lg) !important;
        background: var(--surface-glass) !important;
        backdrop-filter: var(--glass-blur) !important;
        border: 1px solid var(--glass-border) !important;
    }
    
    /* ===== ENHANCED CHECKOUT HEADER ===== */
    .checkout-body .mobile-checkout-header {
        padding: var(--spacing-lg) var(--spacing-lg) !important;
        min-height: 64px !important; /* Enhanced header height */
        background: var(--surface-glass) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-bottom: 1px solid var(--border-light) !important;
        box-shadow: 0 2px 8px var(--shadow-light) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    
    .checkout-body .mobile-checkout-title {
        font-size: var(--font-size-xl) !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        text-align: center !important;
        flex: 1 !important;
        margin: 0 !important;
        letter-spacing: -0.025em !important;
    }
    
    .checkout-body .mobile-back-btn {
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        min-width: 44px !important; /* Enhanced touch target */
        min-height: 44px !important;
        border-radius: var(--radius-lg) !important;
        font-size: var(--font-size-lg) !important;
        background: var(--surface-glass) !important;
        border: 1px solid var(--border-light) !important;
        color: var(--text-secondary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all var(--transition-normal) !important;
        box-shadow: var(--neo-shadow-outer) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .checkout-body .mobile-back-btn:hover {
        background: var(--surface-glass-hover) !important;
        color: var(--text-primary) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer) !important;
    }
    
    .checkout-body .mobile-back-btn:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), var(--neo-shadow-outer) !important;
    }
    
    /* ===== ENHANCED CONTENT SPACING ===== */
    .checkout-body .mobile-checkout-content {
        padding: 20px 16px !important;
        padding-bottom: var(--spacing-lg) !important; /* Natural padding since submit is no longer fixed */
        overflow-y: auto !important;
        flex: 1 !important;
        /* Remove conflicting max-height since container now has proper top padding */
        max-height: none !important;
        margin-top: 0 !important;
    }
    
    /* ===== COMPACT DELIVERY TIME INFO ===== */
    .checkout-body .mobile-delivery-time-info {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        margin-bottom: 0 !important;
        border-radius: var(--radius-sm) !important;
        min-height: 40px !important; /* More compact */
        background: rgba(52, 199, 89, 0.08) !important;
        border: 1px solid rgba(52, 199, 89, 0.15) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--spacing-sm) !important;
        flex: 0 0 auto !important; /* Don't grow, stay compact */
    }
    
    .checkout-body .mobile-delivery-time-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 14px !important;
        opacity: 0.8 !important;
    }
    
    .checkout-body .mobile-delivery-time-title {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
    }
    
    .checkout-body .mobile-delivery-time-value {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        margin: 0 !important;
    }
    
    /* ===== INLINE MOBILE SUBMIT SECTION - Natural Form Flow ===== */
    .checkout-body .mobile-enhanced-submit-section {
        position: relative !important;
        margin-top: var(--spacing-md) !important;
        margin-left: var(--spacing-md) !important;
        margin-right: var(--spacing-md) !important;
        margin-bottom: var(--spacing-lg) !important;
        background: transparent !important;
        border: none !important;
        border-radius: var(--radius-lg) !important;
        padding: var(--spacing-lg) !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--spacing-md) !important;
    }
    
    /* ===== ENHANCED FORM HINTS ===== */
    .checkout-body .mobile-form-hint {
        font-size: 13px !important; /* Enhanced hint text size */
        margin-top: 6px !important;
        line-height: 1.4 !important;
        color: var(--text-tertiary) !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .checkout-body .mobile-form-hint .hint-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }
    
    .checkout-body .mobile-form-hint .hint-icon svg {
        width: 100% !important;
        height: 100% !important;
        color: var(--accent) !important;
    }
    
    /* ===== PC FORM HINTS (ПК версия уведомлений) ===== */
    .checkout-body .pc-form-hint {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-sm);
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        font-style: italic;
        line-height: 1.4;
        padding: var(--spacing-xs) 0;
    }
    
    .checkout-body .pc-form-hint .hint-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: var(--accent);
        opacity: 0.8;
    }
    
    .checkout-body .pc-form-hint .hint-icon svg {
        width: 100%;
        height: 100%;
        color: var(--accent);
    }
    
    /* ===== ENHANCED INPUT VALIDATION INDICATORS ===== */
    .checkout-body .address-validation-indicator {
        width: 32px !important; /* Larger validation icons */
        height: 32px !important;
        right: var(--spacing-sm) !important;
    }
    
    .checkout-body .validation-icon {
        font-size: var(--font-size-base) !important;
    }
    
    /* ===== ENHANCED PLACEHOLDER TEXT ===== */
    .checkout-body .mobile-enhanced-input::placeholder,
    .checkout-body .mobile-enhanced-textarea::placeholder {
        font-size: var(--font-size-base) !important;
        color: var(--text-tertiary) !important;
        opacity: 0.8 !important;
    }
    
    /* ===== IMPROVED FOCUS STATES ===== */
    .checkout-body .mobile-enhanced-input:focus,
    .checkout-body .mobile-enhanced-textarea:focus {
        border-width: 2px !important;
        border-color: var(--accent) !important;
        box-shadow: 
            inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.06),
            inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.9),
            0 0 0 3px rgba(73, 80, 87, 0.1) !important; /* Better focus ring */
        transform: scale(1.02) !important; /* Slight scale on focus */
        transition: all 0.2s ease-out !important;
    }
    
    /* ===== BETTER HOVER STATES ===== */
    .checkout-body .mobile-enhanced-input:hover,
    .checkout-body .mobile-enhanced-textarea:hover {
        transform: translateY(-1px) !important;
        box-shadow: 
            inset 1px 1px 2px rgba(0, 0, 0, 0.03),
            inset -1px -1px 2px rgba(255, 255, 255, 0.88),
            0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* ===== RESPONSIVE TYPOGRAPHY ===== */
    .checkout-body {
        font-size: var(--font-size-base) !important;
        line-height: 1.6 !important;
    }
    
    /* ===== BETTER SPACING SYSTEM ===== */
    .checkout-body .mobile-checkout-container {
        gap: var(--spacing-lg) !important;
    }
}

/* ===== EXTRA SMALL MOBILE DEVICES - iOS ZOOM PREVENTION ===== */
@media (max-width: 480px) {
    .checkout-body .mobile-enhanced-input {
        padding: 16px 12px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        min-height: 50px !important;
    }
    
    .checkout-body .mobile-enhanced-textarea {
        padding: 16px 12px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        min-height: 90px !important;
    }
    
    .checkout-body .mobile-enhanced-submit-btn {
        padding: 20px 16px !important;
        min-height: 60px !important; /* Even larger on small screens */
    }
    
    .checkout-body .unified-mobile-form-container {
        padding: var(--spacing-md) !important;
        margin: 0 var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) !important;
    }
    
    .checkout-body .mobile-checkout-content {
        padding: var(--spacing-md) var(--spacing-xs) !important;
        padding-bottom: var(--spacing-lg) !important; /* Natural padding since submit is no longer fixed */
        overflow-y: auto !important;
        /* Remove conflicting max-height for small screens too */
        max-height: none !important;
        margin-top: 0 !important;
    }
}

/* ===== CHECKOUT CART REVIEW MODAL ===== */
/* Enhanced mobile UX modal for checkout page cart review */
.checkout-cart-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000; /* Above all other elements */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.checkout-cart-modal.show {
    opacity: 1;
    visibility: visible;
}

.checkout-cart-modal .fullscreen-modal-content {
    width: 100%;
    height: 100%;
    background: var(--background);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Enhanced Header for Checkout Cart Modal */
.checkout-cart-modal .fullscreen-modal-header {
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--neo-shadow-outer);
}

.checkout-cart-modal .back-btn {
    background: var(--surface-glass);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    color: var(--text-primary);
    font-weight: 500;
}

.checkout-cart-modal .back-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.checkout-cart-modal .back-btn .back-icon {
    font-size: 18px;
    font-weight: 600;
}

/* Enhanced Body for Checkout Cart Modal */
.checkout-cart-modal .fullscreen-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, var(--background) 0%, var(--surface-light) 100%);
}

/* Enhanced Footer for Checkout Cart Modal */
.checkout-cart-modal .fullscreen-modal-footer {
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.checkout-modal-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.back-to-menu-btn {
    flex: 1;
    background: var(--surface-glass);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--font-size-base);
}

.back-to-menu-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.continue-checkout-btn {
    flex: 2;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--neo-shadow-outer);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-base);
}

.continue-checkout-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.continue-checkout-btn .btn-arrow {
    font-size: 16px;
    font-weight: 600;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .checkout-cart-modal .fullscreen-modal-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .checkout-cart-modal .fullscreen-modal-body {
        padding: var(--spacing-lg);
    }
    
    .checkout-cart-modal .fullscreen-modal-footer {
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .checkout-modal-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .back-to-menu-btn,
    .continue-checkout-btn {
        flex: 1;
        width: 100%;
        min-height: 48px; /* Touch-friendly height */
    }
    
    .continue-checkout-btn {
        order: -1; /* Show continue button first on mobile */
    }
}

/* Touch Target Enhancement */
@media (max-width: 480px) {
    .checkout-cart-modal .back-btn {
        min-width: 48px;
        min-height: 48px;
        padding: var(--spacing-md);
    }
    
    .back-to-menu-btn,
    .continue-checkout-btn {
        min-height: 52px;
        font-size: 16px; /* Prevent iOS zoom */
    }
}

/* Screen Reader Only Class for Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Management for Accessibility */
.checkout-cart-modal button:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.checkout-cart-modal .quantity-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: rgba(255, 255, 255, 0.8);
}

/* ============== UNIFIED MOBILE HEADER BUTTON SYSTEM ============== */

/* Base class for all mobile header buttons */
.mobile-header-btn {
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: var(--neo-shadow-outer);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    min-width: 44px;
    min-height: 44px;
    font-size: var(--font-size-base);
    font-weight: 500;
    transition: all var(--transition-normal);
    text-decoration: none;
    outline: none;
}

.mobile-header-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.4);
}

.mobile-header-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.2);
}

.mobile-header-btn:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Button icon styling */
.mobile-header-btn .btn-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Button text styling */
.mobile-header-btn .btn-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* Specific button variants */
.mobile-menu-btn {
    /* Inherits from .mobile-header-btn */
}

.mobile-cart-btn {
    position: relative;
}

.mobile-cart-btn .cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive text visibility */
@media (max-width: 480px) {
    .mobile-header-btn .btn-text {
        display: none;
    }
    
    .mobile-header-btn {
        gap: 0;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Desktop hidden class */
@media (min-width: 1200px) {
    .desktop-hidden {
        display: none;
    }
}

/* ============== UNIVERSAL MOBILE HEADER SYSTEM ============== */

/* 
 * UNIFIED MOBILE HEADER SYSTEM - Single source of truth
 * 
 * This system eliminates inconsistent header behavior across the application.
 * Replaces and unifies: header-content, mobile-checkout-header, fullscreen-modal-header
 * 
 * PROBLEM SOLVED: Headers had different heights, z-indexes, and styles causing
 * "jumping" effects when transitioning between pages/modals.
 * 
 * SOLUTION: Fixed 64px height, consistent styling, unified z-index hierarchy
 * 
 * Usage:
 * 1. Apply .universal-mobile-header to ANY header container
 * 2. Use .universal-header-content for the inner content wrapper  
 * 3. Use .universal-header-left, .universal-header-title, .universal-header-right for layout
 * 
 * Benefits:
 * - NO MORE header jumping between contexts
 * - Consistent glassmorphism styling everywhere
 * - Unified z-index prevents overlay conflicts
 * - Touch-optimized 44px interaction targets
 * - Seamless page transitions
 */

.universal-mobile-header {
    /* Unified glassmorphism styling - identical across ALL contexts */
    background: var(--surface-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-light);
    
    /* FIXED positioning and layout - prevents jumping */
    position: sticky;
    top: 0;
    z-index: 150; /* UNIFIED z-index higher than legacy headers */
    width: 100%;
    
    /* FIXED height eliminates jumping between contexts */
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    
    /* Consistent visual effects */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition: var(--transition-normal);
}

/* Mobile-specific enhancements */
@media (max-width: 1199px) {
    .universal-mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 150; /* Higher priority on mobile */
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }
}

/* Universal header content wrapper - UNIFIED across all contexts */
.universal-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* FIXED 64px height for ALL contexts - no more jumping */
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    
    /* Consistent padding */
    padding: 0 var(--spacing-lg);
    
    /* Ensure proper flex behavior */
    flex-shrink: 0;
}

/* Mobile-specific padding adjustments only */
@media (max-width: 768px) {
    .universal-header-content {
        padding: 0 var(--spacing-md);
        /* Height remains 64px - no changes */
    }
}

/* Universal header title/logo styling */
.universal-header-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    text-align: center;
    flex: 1;
    margin: 0;
}

@media (max-width: 768px) {
    .universal-header-title {
        font-size: var(--font-size-lg);
    }
}

/* Universal header sections for layout */
.universal-header-left,
.universal-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 60px; /* Ensure minimum width for proper alignment */
}

.universal-header-left {
    justify-content: flex-start;
}

.universal-header-right {
    justify-content: flex-end;
}

/* Ensure proper alignment in fullscreen modal */
.fullscreen-modal-header .universal-header-left {
    flex: 0 0 auto;
}

.fullscreen-modal-header .universal-header-right {
    flex: 0 0 auto;
}

.fullscreen-modal-header .universal-header-title {
    flex: 1;
    text-align: center;
}

/* ============== UNIFIED HEADER BUTTONS ============== */

/* Universal header button - replaces all header button variants */
.universal-header-btn {
    /* Neo-skeuomorphic button styling */
    background: var(--surface-glass);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--neo-shadow-outer);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Touch-optimized sizing */
    min-width: 44px;
    min-height: 44px;
    padding: var(--spacing-xs) var(--spacing-sm);
    
    /* Typography and layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    
    /* Interaction */
    cursor: pointer;
    transition: all var(--transition-normal);
    user-select: none;
}

.universal-header-btn:hover {
    background: var(--surface-glass-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

.universal-header-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-inner);
}

/* Icon-only variant */
.universal-header-btn.icon-only {
    width: 44px;
    height: 44px;
    padding: 0;
}

/* Text variants */
.universal-header-btn .btn-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.universal-header-btn .btn-text {
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* Responsive text hiding on small screens */
@media (max-width: 480px) {
    .universal-header-btn .btn-text {
        display: none;
    }
    
    .universal-header-btn {
        min-width: 44px;
        width: 44px;
    }
}

/* ============== LEGACY HEADER OVERRIDES ============== */

/* Force legacy headers to use unified system */
.header-content,
.mobile-checkout-header,
.fullscreen-modal-header:not(.universal-mobile-header) {
    /* Override to use unified dimensions */
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    z-index: 150 !important;
    
    /* Ensure consistent glassmorphism */
    background: var(--surface-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    
    /* Consistent layout */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 var(--spacing-lg) !important;
}

@media (max-width: 768px) {
    .header-content,
    .mobile-checkout-header,
    .fullscreen-modal-header:not(.universal-mobile-header) {
        padding: 0 var(--spacing-md) !important;
    }
}

/* Legacy button overrides - force to use unified styling */
.mobile-back-btn,
.checkout-back-btn,
.back-btn,
.mobile-header-btn {
    /* Override with universal button styles */
    background: var(--surface-glass) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--neo-shadow-outer) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    min-width: 44px !important;
    min-height: 44px !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-xs) !important;
    
    font-size: var(--font-size-base) !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    
    cursor: pointer !important;
    transition: all var(--transition-normal) !important;
    user-select: none !important;
}

.mobile-back-btn:hover,
.checkout-back-btn:hover,
.back-btn:hover,
.mobile-header-btn:hover {
    background: var(--surface-glass-hover) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer) !important;
}

/* ============== BODY PADDING FOR FIXED HEADERS ============== */

/* Ensure content doesn't hide under fixed mobile headers */
@media (max-width: 1199px) {
    body.has-fixed-header:not(.checkout-body) {
        padding-top: 64px;
    }
    
    /* Specific adjustments for pages */
    .main-content,
    .profile-container {
        margin-top: 0;
    }
    
    /* Checkout pages handle their own padding via .mobile-checkout-container */
    .checkout-body .mobile-checkout-content {
        margin-top: 0;
    }
    
    /* Categories positioning adjustment */
    .categories-scroll-wrapper {
        top: 64px; /* Position below unified header */
    }
}


/* ==================================================================
   COMPACT PC CHECKOUT FORM STYLES (≥1200px)
   ================================================================== */

/* Display control for PC vs tablet/mobile checkout forms */
.pc-only-1200 {
    display: none;
}

.tablet-mobile-only {
    display: block;
}

@media (min-width: 1200px) {
    .pc-only-1200 {
        display: block !important;
    }
    
    .tablet-mobile-only {
        display: none !important;
    }
}

/* Compact PC Checkout Container */
.compact-pc-checkout-container {
    width: 100%;
    max-width: 1400px; /* Match checkout-header container width */
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md); /* Match checkout-container padding */
}

.compact-pc-checkout-form {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-normal);
    position: relative;
    overflow: visible;
    min-height: auto;
}

.compact-pc-checkout-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    pointer-events: none;
}

/* Compact Form Layout - Two Column */
.compact-form-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--spacing-3xl);
    align-items: start;
    min-height: 500px;
}

/* Section Titles */
.section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Delivery Information Section */
.delivery-info-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Compact Form Groups */
.compact-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.compact-form-group.address-group {
    margin-bottom: var(--spacing-sm);
}

.compact-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.compact-input {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.compact-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.compact-input::placeholder {
    color: var(--text-tertiary);
}

/* Compact Delivery Details Grid */
.compact-delivery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

/* Compact Textarea */
.compact-textarea {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: all var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    resize: vertical;
    min-height: 100px;
}

.compact-textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.compact-textarea::placeholder {
    color: var(--text-tertiary);
}

/* Payment & Submit Section */
.payment-submit-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    justify-content: flex-start;
    height: 100%;
}

/* Compact Payment Options */
.compact-payment-selector {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.compact-payment-option {
    position: relative;
}

.compact-payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.compact-payment-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.compact-payment-label:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.compact-payment-option input:checked + .compact-payment-label {
    background: rgba(255, 255, 255, 1);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(73, 80, 87, 0.2), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.payment-icon {
    font-size: var(--font-size-xl);
    min-width: 32px;
}

.payment-text {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

/* Delivery Info Block */
.delivery-info {
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, 
        rgba(76, 175, 80, 0.12) 0%, 
        rgba(56, 142, 60, 0.08) 50%, 
        rgba(46, 125, 50, 0.12) 100%);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(76, 175, 80, 0.25);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 8px 32px rgba(76, 175, 80, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08),
        var(--neo-shadow-outer);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

/* Hover effect for delivery-info */
.delivery-info:hover {
    transform: translateY(-2px);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow: 
        0 12px 40px rgba(76, 175, 80, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.12),
        var(--neo-shadow-outer);
}

/* Glassmorphism highlight effect */
.delivery-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 30%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0.6) 70%, 
        transparent 100%);
    opacity: 0.8;
}

.delivery-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    position: relative;
    z-index: 2;
}

/* Стиль для delivery-title с иконкой */
.delivery-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: rgba(46, 125, 50, 0.95);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    letter-spacing: -0.025em;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Иконка для delivery-title с улучшенной производительностью */
.delivery-title::before {
    content: '🚀';
    font-size: var(--font-size-xl);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    animation: deliveryPulse 2s ease-in-out infinite;
    will-change: transform; /* Улучшает производительность анимации */
    backface-visibility: hidden; /* Предотвращает мерцание */
}

/* Альтернативная иконка для accessibility */
.delivery-title[data-icon="clock"]::before {
    content: '⏰';
}

.delivery-title[data-icon="truck"]::before {
    content: '🚚';
}

.delivery-title[data-icon="timer"]::before {
    content: '⏳';
}

/* Анимация иконки */
@keyframes deliveryPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Мобильная версия анимации - более плавная */
@keyframes deliveryPulseMobile {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .delivery-title::before {
        animation: none !important;
    }
}

/* Performance optimization for low-end devices */
@media (max-width: 480px) and (max-height: 800px) {
    .delivery-info:hover {
        transform: none; /* Убираем hover effects на слабых устройствах */
    }
}

.delivery-icon {
    font-size: var(--font-size-xl);
    opacity: 0.8;
}

.delivery-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.delivery-title {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 500;
    text-align: center;
}

.delivery-duration {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 600;
}

/* Compact Submit Button */
.compact-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 56px;
    margin-top: var(--spacing-lg);
}

.compact-submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.compact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
}

.compact-submit-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

.btn-icon {
    font-size: var(--font-size-lg);
}

.btn-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.btn-arrow {
    font-size: var(--font-size-lg);
    margin-left: var(--spacing-sm);
    transition: transform var(--transition-fast);
}

.compact-submit-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* ============== ORDER TOTAL SECTION STYLES ============== */

.order-total-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: var(--neo-shadow-outer), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
    transition: all var(--transition-normal);
}

.order-total-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        transparent 100%);
    pointer-events: none;
}

.order-total-section:hover {
    transform: translateY(-2px);
    box-shadow: var(--neo-shadow-outer), 
                0 12px 40px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

.total-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.subtotal-row,
.delivery-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.final-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.total-divider {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0, 0, 0, 0.1) 20%, 
        rgba(0, 0, 0, 0.2) 50%, 
        rgba(0, 0, 0, 0.1) 80%, 
        transparent 100%);
    margin: var(--spacing-xs) 0;
}

.subtotal-label,
.delivery-label,
.total-label {
    font-weight: 500;
}

.subtotal-value,
.delivery-value,
.total-value {
    font-weight: 600;
}

.delivery-value {
    color: var(--success-primary);
    font-weight: 600;
}

.total-value {
    color: var(--accent);
    font-size: var(--font-size-xl);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Mobile specific styles */
.order-total-section.mobile {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.order-total-section.mobile .subtotal-row,
.order-total-section.mobile .delivery-row {
    font-size: var(--font-size-xs);
}

.order-total-section.mobile .final-total-row {
    font-size: var(--font-size-base);
}

.order-total-section.mobile .total-value {
    font-size: var(--font-size-lg);
}

/* Tablet specific styles */
.order-total-section.tablet-mobile {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .order-total-section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        border-radius: var(--radius-md);
    }
    
    .order-total-section:hover {
        transform: none; /* Disable hover effects on touch devices */
    }
    
    .subtotal-row,
    .delivery-row {
        font-size: var(--font-size-xs);
    }
    
    .final-total-row {
        font-size: var(--font-size-base);
    }
    
    .total-value {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    .order-total-section {
        padding: var(--spacing-sm) var(--spacing-md);
        margin-bottom: var(--spacing-sm);
    }
    
    .total-breakdown {
        gap: var(--spacing-xs);
    }
    
    .subtotal-row,
    .delivery-row {
        font-size: 12px;
    }
    
    .final-total-row {
        font-size: 14px;
    }
    
    .total-value {
        font-size: 16px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .order-total-section {
        border: 2px solid var(--text-primary);
        background: var(--surface);
    }
    
    .total-divider {
        background: var(--text-secondary);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .order-total-section,
    .order-total-section:hover {
        transition: none;
        transform: none;
    }
}

/* Address validation integration for PC form */
.compact-pc-checkout-container .address-validation-indicator {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.compact-pc-checkout-container .address-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.compact-pc-checkout-container .address-input-wrapper .compact-input {
    padding-right: 48px;
}

/* Address autocomplete dropdown styles for PC form */
.compact-pc-checkout-container .address-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1200;
    background: var(--surface-primary);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08),
        var(--neo-shadow-outer);
    max-height: 280px;
    overflow-y: auto;
    margin-top: var(--spacing-sm);
    opacity: 0;
    transform: translateY(-8px);
    transition: var(--transition-fast);
    pointer-events: none;
    color: var(--text-primary) !important;
}

.compact-pc-checkout-container .address-autocomplete-dropdown.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.compact-pc-checkout-container .address-autocomplete-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition-fast);
    position: relative;
    color: var(--text-primary) !important;
    background: transparent !important;
    min-height: 52px;
}

.compact-pc-checkout-container .address-autocomplete-item:last-child {
    border-bottom: none;
}

.compact-pc-checkout-container .address-autocomplete-item:hover {
    background: rgba(var(--accent-rgb), 0.08) !important;
    color: var(--text-primary) !important;
}

.compact-pc-checkout-container .address-autocomplete-item.selected {
    background: rgba(var(--accent-rgb), 0.12) !important;
    color: var(--text-primary) !important;
}

.compact-pc-checkout-container .address-icon {
    font-size: var(--font-size-lg);
    margin-right: var(--spacing-md);
    color: var(--accent);
    opacity: 0.8;
}

.compact-pc-checkout-container .address-main {
    font-weight: 500;
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--text-primary) !important;
    margin-bottom: var(--spacing-xs);
}

.compact-pc-checkout-container .address-details {
    font-size: var(--font-size-sm);
    color: var(--text-secondary) !important;
    opacity: 0.8;
    line-height: 1.3;
}

/* Responsive adjustments for compact form */
@media (min-width: 1200px) and (max-width: 1400px) {
    .compact-form-layout {
        gap: var(--spacing-xl);
    }
    
    .compact-delivery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .delivery-info-section {
        gap: var(--spacing-sm);
    }
}

/* Large desktop optimization */
@media (min-width: 1400px) {
    .compact-pc-checkout-container {
        max-width: 1400px;
        padding: var(--spacing-2xl) var(--spacing-md); /* Keep horizontal padding consistent */
    }
    
    .compact-form-layout {
        gap: calc(var(--spacing-2xl) * 1.5);
    }
    
    .compact-delivery-grid {
        gap: var(--spacing-lg);
    }
}


/* ================================
   ORDER SUCCESS MODAL
   ================================ */

/* Success Modal Base */
.success-modal {
    z-index: 2000; /* Above all other modals */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.4);
}

.success-modal-content {
    max-width: 600px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    margin: 5vh auto;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(248, 250, 252, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-2xl);
    box-shadow: 
        var(--neo-shadow-outer),
        0 20px 60px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: var(--spacing-2xl);
    position: relative;
    animation: successModalSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Success Animation */
.success-animation {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
}

.success-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.9) 0%, 
        rgba(22, 163, 74, 0.9) 100%);
    border-radius: 50%;
    margin: 0 auto var(--spacing-lg);
    box-shadow: 
        0 8px 32px rgba(34, 197, 94, 0.3),
        var(--neo-shadow-outer),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    animation: successPulse 2s ease-in-out infinite;
    position: relative;
}

.success-checkmark::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.2) 0%, 
        rgba(22, 163, 74, 0.1) 100%);
    z-index: -1;
    animation: successRipple 2s ease-in-out infinite;
}

.check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.success-emoji {
    font-size: 3rem;
    animation: successBounce 1s ease-in-out 0.3s both;
}

/* Success Header */
.success-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.success-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.success-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}

/* Order Details Success */
.order-details-success {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--neo-shadow-inner);
}

.order-number-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.order-label {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    font-weight: 500;
}

.order-number {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--accent);
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.1) 0%, 
        rgba(139, 92, 246, 0.1) 100%);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-20);
}

/* Order Summary Grid */
.order-summary-grid {
    display: grid;
    gap: var(--spacing-md);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
}

.summary-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.summary-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.total-amount {
    font-size: var(--font-size-lg);
    color: var(--accent);
    font-weight: 700;
}

.delivery-time {
    color: var(--success);
    font-weight: 600;
}

/* Success Actions */
.success-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.success-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    transition: all var(--transition-normal);
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.success-btn.primary-btn {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: white;
    box-shadow: 
        var(--neo-shadow-outer),
        0 4px 16px rgba(99, 102, 241, 0.3);
}

.success-btn.primary-btn:hover {
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
    transform: translateY(-2px);
    box-shadow: 
        var(--neo-shadow-outer),
        0 8px 24px rgba(99, 102, 241, 0.4);
}

.success-btn.secondary-btn {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--neo-shadow-outer);
}

.success-btn.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 
        var(--neo-shadow-outer),
        0 8px 24px rgba(0, 0, 0, 0.1);
}

.success-btn .btn-icon {
    font-size: 1.1em;
}

/* Success Footer */
.success-footer {
    text-align: center;
}

.success-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: rgba(99, 102, 241, 0.05);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.note-icon {
    font-size: 1.1em;
    color: var(--accent);
}

/* Animations */
@keyframes successModalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes successPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 8px 32px rgba(34, 197, 94, 0.3),
            var(--neo-shadow-outer),
            inset 0 2px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 12px 40px rgba(34, 197, 94, 0.4),
            var(--neo-shadow-outer),
            inset 0 2px 0 rgba(255, 255, 255, 0.4);
    }
}

@keyframes successRipple {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.1;
        transform: scale(1.1);
    }
}

@keyframes successBounce {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .success-modal-content {
        margin: 2vh auto;
        width: 98%;
        padding: var(--spacing-xl);
        max-height: 96vh;
    }
    
    .success-checkmark {
        width: 100px;
        height: 100px;
    }
    
    .success-emoji {
        font-size: 2.5rem;
    }
    
    .success-title {
        font-size: 1.5rem;
    }
    
    .success-subtitle {
        font-size: var(--font-size-base);
    }
    
    .success-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .order-number-section {
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: center;
    }
    
    .summary-item {
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: center;
        padding: var(--spacing-sm) 0;
    }
    
    .summary-value {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .success-modal-content {
        padding: var(--spacing-lg);
    }
    
    .success-checkmark {
        width: 80px;
        height: 80px;
    }
    
    .success-emoji {
        font-size: 2rem;
    }
    
    .success-title {
        font-size: 1.25rem;
    }
    
    .order-details-success {
        padding: var(--spacing-lg);
    }
}

/* ================================
   SUCCESS PAGE STYLES
   ================================ */

/* Success Page Body */
.success-body {
    font-family: var(--font-family);
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Success Main Content */
.success-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    background: transparent;
}

.success-desktop-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.success-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-2xl);
    flex: 1;
}

.success-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    animation: successPageFadeIn 0.8s ease-out;
}

@keyframes successPageFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success Hero Section */
.success-hero {
    text-align: center;
    padding: var(--spacing-2xl) 0;
    margin-bottom: var(--spacing-xl);
}

.success-animation-container {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.success-checkmark-animation {
    display: inline-block;
    position: relative;
    margin-bottom: var(--spacing-lg);
}

.checkmark-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--success-primary);
    border: 3px solid var(--success-dark);
    position: relative;
    margin: 0 auto;
    animation: successCircleScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 32px var(--success-shadow), 0 0 0 0 var(--success-glow);
}

@keyframes successCircleScale {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.checkmark-stem,
.checkmark-kick {
    position: absolute;
    background: white;
    border-radius: 2px;
}

.checkmark-stem {
    width: 3px;
    height: 18px;
    top: 32px;
    left: 38px;
    transform: rotate(45deg);
    animation: checkmarkStem 0.3s ease-in-out 0.6s both;
}

.checkmark-kick {
    width: 3px;
    height: 10px;
    top: 40px;
    left: 30px;
    transform: rotate(-45deg);
    animation: checkmarkKick 0.2s ease-in-out 0.8s both;
}

@keyframes checkmarkStem {
    0% {
        height: 0;
    }
    100% {
        height: 18px;
    }
}

@keyframes checkmarkKick {
    0% {
        height: 0;
    }
    100% {
        height: 10px;
    }
}

.success-celebration {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    font-size: 2rem;
    animation: celebrationFloat 2s ease-in-out infinite alternate;
}

@keyframes celebrationFloat {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    100% {
        transform: translateX(-50%) translateY(-10px);
    }
}

.celebration-emoji {
    animation: celebrationSpin 3s linear infinite;
}

.celebration-emoji:nth-child(2) {
    animation-delay: 0.5s;
}

.celebration-emoji:nth-child(3) {
    animation-delay: 1s;
}

@keyframes celebrationSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.success-hero-text {
    max-width: 600px;
    margin: 0 auto;
}

.success-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.success-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* Success Details Grid */
.success-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.success-card {
    background: var(--surface-glass);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.success-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
}

.success-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), var(--neo-shadow-outer);
    border-color: rgba(255, 255, 255, 0.4);
}

.card-header {
    margin-bottom: var(--spacing-lg);
}

.card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.card-icon {
    font-size: var(--font-size-2xl);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Order Details */
.order-detail-row,
.delivery-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.order-detail-row:last-child,
.delivery-detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 40%;
}

.detail-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.order-number {
    color: var(--success-primary);
    font-weight: 700;
}

.delivery-time {
    color: var(--accent);
}

/* Order Items */
.order-items-list {
    margin-bottom: var(--spacing-lg);
}

.order-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.order-item-row:last-child {
    border-bottom: none;
    margin-bottom: var(--spacing-md);
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.item-name {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
}

.item-quantity {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.item-total {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

/* Order Totals */
.order-totals {
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.total-row:last-child {
    margin-bottom: 0;
}

.total-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: var(--spacing-md) 0;
}

.total-row.final-total {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.total-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.total-value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

/* Payment Method */
.payment-method {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.payment-icon {
    font-size: var(--font-size-3xl);
}

.payment-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.payment-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.payment-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Action Buttons */
.success-actions {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    margin-bottom: var(--spacing-2xl);
}

.success-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    border: none;
    min-width: 200px;
    justify-content: center;
}

.success-btn.primary-action {
    background: var(--accent);
    color: white;
    box-shadow: var(--neo-shadow-outer);
}

.success-btn.primary-action:hover {
    background: var(--accent-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), var(--neo-shadow-outer);
}

.success-btn.secondary-action {
    background: var(--surface-glass);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--neo-shadow-outer);
}

.success-btn.secondary-action:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), var(--neo-shadow-outer);
}

.btn-icon {
    font-size: var(--font-size-xl);
}

.btn-text {
    font-size: var(--font-size-base);
}

/* Support Information */
.success-support-info {
    text-align: center;
}

.support-card {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--surface-glass);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-normal);
}

.support-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), var(--neo-shadow-outer);
}

.support-icon {
    font-size: var(--font-size-3xl);
}

.support-content {
    text-align: left;
}

.support-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.support-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.support-phone {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.support-phone:hover {
    color: var(--accent-color-dark);
}

/* ================================
   MOBILE SUCCESS PAGE STYLES
   ================================ */

.success-mobile-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mobile-success-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mobile-success-content {
    flex: 1;
    padding: var(--spacing-lg);
    padding-top: calc(var(--header-height-mobile) + var(--spacing-lg));
}

/* Mobile Success Hero */
.mobile-success-hero {
    text-align: center;
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-xl);
}

.mobile-success-animation {
    margin-bottom: var(--spacing-lg);
}

.mobile-checkmark-animation {
    display: inline-block;
    margin-bottom: var(--spacing-lg);
}

.mobile-checkmark-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--success-primary);
    border: 2px solid var(--success-dark);
    position: relative;
    margin: 0 auto;
    animation: successCircleScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 20px var(--success-shadow);
}

.mobile-checkmark-stem,
.mobile-checkmark-kick {
    position: absolute;
    background: white;
    border-radius: 1px;
}

.mobile-checkmark-stem {
    width: 2px;
    height: 14px;
    top: 24px;
    left: 29px;
    transform: rotate(45deg);
    animation: checkmarkStem 0.3s ease-in-out 0.6s both;
}

.mobile-checkmark-kick {
    width: 2px;
    height: 8px;
    top: 30px;
    left: 23px;
    transform: rotate(-45deg);
    animation: checkmarkKick 0.2s ease-in-out 0.8s both;
}

.mobile-celebration {
    display: flex;
    gap: 15px;
    justify-content: center;
    font-size: 1.5rem;
    animation: celebrationFloat 2s ease-in-out infinite alternate;
}

.mobile-success-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.mobile-success-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 0 var(--spacing-md);
}

/* Mobile Success Cards */
.mobile-success-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.mobile-success-card {
    background: var(--surface-glass);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-normal);
}

.mobile-success-card:active {
    transform: scale(0.98);
    box-shadow: var(--neo-shadow-pressed);
}

.mobile-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.mobile-card-icon {
    font-size: var(--font-size-xl);
}

.mobile-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.mobile-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Mobile Order Number */
.mobile-order-number {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--success-primary);
}

.mobile-order-date {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Mobile Order Items */
.mobile-order-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.mobile-order-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-order-item:last-child {
    border-bottom: none;
}

.mobile-item-name {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    margin-right: var(--spacing-sm);
}

.mobile-item-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.mobile-item-quantity {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.mobile-item-total {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 60px;
    text-align: right;
}

/* Mobile Order Totals */
.mobile-order-totals {
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.mobile-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.mobile-total-row:last-child {
    margin-bottom: 0;
}

.mobile-total-row.final {
    font-size: var(--font-size-base);
    font-weight: 700;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: var(--spacing-sm);
}

.mobile-total-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.mobile-total-value {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-total-row.final .mobile-total-label,
.mobile-total-row.final .mobile-total-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

/* Mobile Delivery Info */
.mobile-delivery-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mobile-delivery-address {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}

.mobile-delivery-time {
    font-size: var(--font-size-sm);
    color: var(--accent);
    font-weight: 600;
}

/* Mobile Payment Method */
.mobile-payment-method {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.mobile-payment-icon {
    font-size: var(--font-size-2xl);
}

.mobile-payment-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

/* Mobile Actions */
.mobile-success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.mobile-success-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    border: none;
    min-height: 56px;
}

.mobile-success-btn.primary {
    background: var(--accent);
    color: white;
    box-shadow: var(--neo-shadow-outer);
}

.mobile-success-btn.primary:active {
    transform: scale(0.98);
    box-shadow: var(--neo-shadow-pressed);
}

.mobile-success-btn.secondary {
    background: var(--surface-glass);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--neo-shadow-outer);
}

.mobile-success-btn.secondary:active {
    transform: scale(0.98);
    box-shadow: var(--neo-shadow-pressed);
}

.mobile-btn-icon {
    font-size: var(--font-size-xl);
}

.mobile-btn-text {
    font-size: var(--font-size-base);
}

/* Mobile Support */
.mobile-success-support {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.mobile-support-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface-glass);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: var(--neo-shadow-outer);
    transition: all var(--transition-normal);
}

.mobile-support-link:active {
    transform: scale(0.98);
    box-shadow: var(--neo-shadow-pressed);
}

.mobile-support-icon {
    font-size: var(--font-size-lg);
}

/* ================================
   RESPONSIVE SUCCESS PAGE
   ================================ */

@media (max-width: 1199px) {
    .success-main-content {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .success-container {
        padding: var(--spacing-lg);
    }
    
    .success-details-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .success-title {
        font-size: var(--font-size-3xl);
    }
    
    .success-subtitle {
        font-size: var(--font-size-base);
    }
    
    .success-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .success-btn {
        min-width: auto;
        width: 100%;
    }
    
    .success-card {
        padding: var(--spacing-lg);
    }
    
    .card-title {
        font-size: var(--font-size-lg);
    }
    
    .card-title-text {
        display: none;
    }
    
    .card-icon {
        font-size: var(--font-size-xl);
    }
    
    .checkmark-circle {
        width: 60px;
        height: 60px;
    }
    
    .checkmark-stem {
        height: 14px;
        top: 24px;
        left: 29px;
    }
    
    .checkmark-kick {
        height: 8px;
        top: 30px;
        left: 23px;
    }
}

@media (max-width: 480px) {
    .success-container {
        padding: var(--spacing-md);
    }
    
    .success-hero {
        padding: var(--spacing-lg) 0;
    }
    
    .success-title {
        font-size: var(--font-size-2xl);
    }
    
    .success-subtitle {
        font-size: var(--font-size-sm);
    }
    
    .success-card {
        padding: var(--spacing-md);
    }
    
    .card-title-text {
        display: none;
    }
    
    .card-icon {
        font-size: var(--font-size-lg);
    }
    
    .checkmark-circle {
        width: 50px;
        height: 50px;
    }
    
    .checkmark-stem {
        height: 12px;
        width: 2px;
        top: 20px;
        left: 24px;
    }
    
    .checkmark-kick {
        height: 7px;
        width: 2px;
        top: 25px;
        left: 19px;
    }
    
    .success-celebration {
        font-size: 1.5rem;
        gap: 15px;
    }
}

/* ================================================
   CLEAR CART CONFIRMATION MODAL
   Beautiful glassmorphism confirmation popup
   ================================================ */

/* Clear Cart Modal Specific Styling */
.clear-cart-modal {
    max-width: 500px;
    width: 90%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(25px) saturate(180%) brightness(105%);
    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(105%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 12px 24px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Modal Header with Warning Icon */
.clear-cart-modal .modal-header {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 149, 0, 0.05) 100%);
}

.clear-cart-modal .modal-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.clear-cart-modal .warning-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(255, 59, 48, 0.3));
}

.clear-cart-modal .header-text h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

/* Modal Body */
.clear-cart-modal .modal-body {
    padding: var(--spacing-xl);
}

.confirmation-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.confirmation-message .main-message {
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-align: center;
}

.confirmation-message .sub-message {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    text-align: center;
    opacity: 0.8;
}

/* Cart Preview */
.cart-preview {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.preview-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.preview-item .item-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.preview-item .item-quantity {
    margin: 0 var(--spacing-md);
    color: var(--text-secondary);
    min-width: 40px;
    text-align: center;
}

.preview-item .item-price {
    font-weight: 600;
    color: var(--accent);
    min-width: 60px;
    text-align: right;
}

.preview-total {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

/* Modal Actions */
.clear-cart-modal .modal-actions {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
    justify-content: center;
}

/* Buttons */
.clear-cart-modal .btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    min-width: 120px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Secondary Button (Cancel) */
.clear-cart-modal .btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: var(--neo-shadow-outer);
}

.clear-cart-modal .btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.clear-cart-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

.clear-cart-modal .btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

/* Danger Button (Clear) */
.clear-cart-modal .btn-danger {
    background: linear-gradient(135deg, #ff3b30 0%, #ff6b47 100%);
    color: white;
    border: 1px solid rgba(255, 59, 48, 0.3);
    box-shadow: 
        0 8px 24px rgba(255, 59, 48, 0.25),
        var(--neo-shadow-outer);
}

.clear-cart-modal .btn-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.clear-cart-modal .btn-danger:hover {
    background: linear-gradient(135deg, #ff6b47 0%, #ff3b30 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 32px rgba(255, 59, 48, 0.35),
        var(--neo-shadow-outer);
}

.clear-cart-modal .btn-danger:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
}

/* Button Icons */
.clear-cart-modal .btn-icon {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    transition: all var(--transition-fast);
}

.clear-cart-modal .btn:hover .btn-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Animation States */
.clear-cart-modal.show {
    animation: clearCartModalEnter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes clearCartModalEnter {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .clear-cart-modal {
        max-width: calc(100vw - 2rem);
        margin: 0 1rem;
    }
    
    .clear-cart-modal .modal-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .clear-cart-modal .btn {
        width: 100%;
        min-width: auto;
    }
    
    .clear-cart-modal .modal-header {
        padding: var(--spacing-lg);
    }
    
    .clear-cart-modal .modal-body {
        padding: var(--spacing-lg);
    }
    
    .clear-cart-modal .warning-icon {
        font-size: 24px;
    }
    
    .confirmation-message .main-message {
        font-size: var(--font-size-base);
    }
    
    .cart-preview {
        max-height: 150px;
    }
}


/* Enhanced Address Hint Styles */
.address-hint {
    position: relative;
    display: block !important;
    visibility: visible !important;
    opacity: 0;
    margin: 12px 0;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.15) 0%, rgba(80, 200, 120, 0.15) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid rgba(74, 144, 226, 0.3);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(74, 144, 226, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 1050 !important;
    transform: translateY(10px);
    animation: slideInUp 0.4s ease forwards;
}

.address-hint.enhanced-hint {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.2) 0%, rgba(80, 200, 120, 0.2) 100%);
    border: 2px solid rgba(74, 144, 226, 0.4);
    box-shadow: 
        0 12px 40px rgba(74, 144, 226, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.address-hint.show-hint {
    opacity: 1;
    transform: translateY(0);
}

.address-hint:hover {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.25) 0%, rgba(80, 200, 120, 0.25) 100%);
    border-color: rgba(74, 144, 226, 0.5);
    transform: translateY(-2px);
    box-shadow: 
        0 16px 48px rgba(74, 144, 226, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.address-hint.hint-used {
    background: linear-gradient(135deg, rgba(80, 200, 120, 0.3) 0%, rgba(46, 160, 67, 0.3) 100%);
    border-color: rgba(80, 200, 120, 0.6);
    animation: successPulse 0.6s ease forwards;
}

.hint-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hint-icon {
    font-size: 20px;
    flex-shrink: 0;
    animation: bounce 2s ease infinite;
}

.hint-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hint-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(74, 144, 226, 0.9);
    margin: 0;
}

.hint-address {
    font-size: 16px;
    font-weight: 600;
    color: #1a365d;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.hint-delivery-details {
    font-size: 12px;
    color: rgba(74, 144, 226, 0.7);
    font-weight: 500;
    margin-top: 2px;
}

.hint-action {
    font-size: 18px;
    opacity: 0.7;
    animation: pulse 2s ease infinite;
}

.hint-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #2ea043;
    text-align: center;
}

/* Address Hint Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes pulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

@keyframes successPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

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

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

/* Mobile responsive adjustments for address hints */
@media (max-width: 768px) {
    .address-hint {
        margin: 8px 0;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .hint-content {
        gap: 10px;
    }
    
    .hint-icon {
        font-size: 18px;
    }
    
    .hint-text {
        font-size: 13px;
    }
    
    .hint-address {
        font-size: 14px;
        max-width: 200px;
    }
    
    .hint-action {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .address-hint {
        margin: 6px 0;
        padding: 10px 12px;
    }
    
    .hint-address {
        max-width: 150px;
        font-size: 13px;
    }
    
    .hint-delivery-details {
        font-size: 11px;
    }
}

/* ================================
   AUTO-FILL FEEDBACK STYLES
   ================================ */

/* Auto-filled field styling */
.auto-filled {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.15) 100%) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1), 
                0 2px 4px rgba(34, 197, 94, 0.1) !important;
    position: relative;
    animation: autoFillGlow 0.6s ease-out;
}

.auto-filled::before {
    content: "✨";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}

/* Auto-fill animation */
@keyframes autoFillGlow {
    0% {
        background: rgba(34, 197, 94, 0.2);
        transform: scale(1);
    }
    50% {
        background: rgba(34, 197, 94, 0.3);
        transform: scale(1.02);
    }
    100% {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.15) 100%);
        transform: scale(1);
    }
}

/* Auto-fill feedback toast */
.auto-fill-feedback {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(34, 197, 94, 0.1);
    transform: translateX(100%) scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-width: 300px;
    min-width: 200px;
}

.auto-fill-feedback.show {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.auto-fill-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.auto-fill-icon {
    font-size: 18px;
    animation: sparkle 1.5s ease-in-out infinite;
}

.auto-fill-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(5deg); }
    50% { transform: scale(1.05) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(3deg); }
}

/* Mobile responsive auto-fill feedback */
@media (max-width: 768px) {
    .auto-fill-feedback {
        right: 10px;
        left: 10px;
        max-width: none;
        min-width: auto;
    }
    
    .auto-fill-text {
        font-size: var(--font-size-xs);
    }
}

/* Auto-filled field focus states */
.auto-filled:focus {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.18) 100%) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 
                0 4px 8px rgba(34, 197, 94, 0.15) !important;
}

/* Remove auto-fill styling after user interaction */
.auto-filled:not(:focus):user-invalid,
.auto-filled:not(:focus):user-valid:not([value=""]) {
    background: var(--surface-glass) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--neo-shadow-inner) !important;
}

.auto-filled:not(:focus):user-invalid::before,
.auto-filled:not(:focus):user-valid:not([value=""])::before {
    display: none;
}

/* Enhanced auto-fill for address fields */
input[name="address"].auto-filled,
#orderAddress.auto-filled,
#checkoutAddress.auto-filled,
#pcCheckoutAddress.auto-filled,
#mobileCheckoutAddress.auto-filled {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.15) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1), 
                0 2px 4px rgba(59, 130, 246, 0.1) !important;
}

input[name="address"].auto-filled::before,
#orderAddress.auto-filled::before,
#checkoutAddress.auto-filled::before,
#pcCheckoutAddress.auto-filled::before,
#mobileCheckoutAddress.auto-filled::before {
    content: "📍";
}

/* Pre-validated address fields (from previous orders) */
.address-selected.auto-filled,
input[data-selected="true"].auto-filled {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.18) 100%) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2), 
                0 2px 4px rgba(34, 197, 94, 0.15) !important;
}

.address-selected.auto-filled::after {
    content: "✓";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(34, 197, 94, 0.8);
    font-weight: bold;
    font-size: 14px;
    pointer-events: none;
}

/* Address validation hint for pre-validated addresses */
.address-validation-hint.success {
    color: rgba(34, 197, 94, 0.9);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

/* Auto-fill removal on user edit */
.auto-filled.user-edited {
    animation: autoFillRemove 0.3s ease-out forwards;
}

@keyframes autoFillRemove {
    from {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.15) 100%);
        border-color: rgba(34, 197, 94, 0.3);
    }
    to {
        background: var(--surface-glass);
        border-color: var(--border-color);
        box-shadow: var(--neo-shadow-inner);
    }
}

/* ============== СТИЛИ ДЛЯ ОПТИМАЛЬНОГО UX АВТОЗАПОЛНЕНИЯ ============== */

/* Проверенные поля */
.verified-field {
    border: 1px solid #22c55e !important;
    background: rgba(34, 197, 94, 0.05) !important;
    position: relative;
    padding-right: 45px !important; /* Место для галочки */
}

.verified-field::after {
    content: "✓";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #22c55e;
    font-weight: bold;
    font-size: 16px;
    pointer-events: none;
}

/* Индикатор проверенного поля */
.verified-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: #22c55e;
    font-size: 12px;
    font-weight: 500;
}

.verified-indicator .check-icon {
    width: 14px;
    height: 14px;
}

/* Кнопка "Изменить" для адреса */
.edit-address-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #6b7280;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-address-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.edit-address-btn .edit-icon {
    width: 12px;
    height: 12px;
}

/* Кнопка быстрого заказа */
.quick-order-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    margin-bottom: 16px;
}

.quick-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.quick-order-btn .btn-icon {
    font-size: 20px;
}

.quick-order-btn .btn-subtitle {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.9;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Анимация для автозаполнения */
@keyframes autoFillGlow {
    0% { 
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.verified-field.just-filled {
    animation: autoFillGlow 1s ease-out;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .edit-address-btn {
        margin-top: 8px;
        margin-left: 0;
        display: block;
        width: fit-content;
    }
    
    .quick-order-btn .btn-subtitle {
        max-width: 150px;
    }
    
    .verified-indicator {
        font-size: 11px;
    }
}

/* Интеграция с существующими стилями форм */
.enhanced-form-group .verified-field,
.compact-form-group .verified-field,
.mobile-enhanced-form-group .verified-field {
    border-color: #22c55e !important;
    background-color: rgba(34, 197, 94, 0.05) !important;
}

/* ============================================================================
 * Белая кнопка для модального окна авторизации
 * ============================================================================
 * Используется в модальном окне авторизации для кнопки "Получить код"
 * Стиль основан на .sidebar-login-btn с адаптацией под модальное окно
 * ---------------------------------------------------------------------------- */

.auth-white-btn {
    /* Сброс браузерных стилей кнопки */
    border: none;
    margin: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Белый фон с легким градиентом для объема */
    background: var(--surface-primary);

    /* Neo-skeuomorphic тени для глубины */
    box-shadow: var(--neo-shadow-outer);

    /* Границы и округление */
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);

    /* Текст */
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-base);
    font-family: var(--font-family);

    /* Размеры */
    padding: var(--spacing-md) var(--spacing-xl);
    width: 100%;

    /* Flexbox для центрирования содержимого */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);

    /* Эффекты перехода */
    transition: all var(--transition-normal);
    cursor: pointer;

    /* Убираем стандартные стили кнопки */
    outline: none;
}

/* Hover эффект - подъем кнопки */
.auth-white-btn:hover {
    background: var(--surface-glass-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), var(--neo-shadow-outer);
}

/* Active состояние - нажатие */
.auth-white-btn:active {
    transform: translateY(0);
    box-shadow: var(--neo-shadow-pressed);
}

/* Disabled состояние */
.auth-white-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-white-btn:disabled:hover {
    transform: none;
    box-shadow: var(--neo-shadow-outer);
}

/* Контент кнопки (текст внутри span) */
.auth-white-btn .btn-content {
    display: inline-block;
}