/**
 * LIFF Telepharmacy Design System
 * Unified CSS with color palette, typography, spacing
 * 
 * Requirements: 1.4, 1.5
 * - Consistent color palette: Medical Green (#11B0A6), Trust Blue (#3B82F6), Clean White (#F8FAFC)
 * - Touch targets minimum 44px height
 * - Safe area support for iOS
 */

/* ==================== CSS Variables ==================== */
:root {
    /* Primary Colors */
    --primary: #11B0A6;
    --primary-dark: #0D8A82;
    --primary-light: #E6F7F6;
    --primary-rgb: 17, 176, 166;

    /* Secondary Colors */
    --secondary: #3B82F6;
    --secondary-dark: #2563EB;
    --secondary-light: #EFF6FF;
    --secondary-rgb: 59, 130, 246;

    /* Accent Colors */
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --success: #10B981;
    --success-light: #D1FAE5;
    --info: #3B82F6;
    --info-light: #DBEAFE;

    /* Neutral Colors */
    --bg-light: #F8FAFC;
    --bg-white: #FFFFFF;
    --bg-gray: #F1F5F9;
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-light: #D1D5DB;
    --border: #E5E7EB;
    --border-light: #F3F4F6;

    /* Tier Colors */
    --tier-silver: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    --tier-gold: linear-gradient(135deg, #FFD700, #FFA500);
    --tier-platinum: linear-gradient(135deg, #334155, #0F172A);
    --tier-bronze: linear-gradient(135deg, #CD7F32, #8B4513);
    --tier-vip: linear-gradient(135deg, #9333EA, #6B21A8);

    /* Drug Interaction Colors */
    --interaction-severe: #EF4444;
    --interaction-moderate: #F59E0B;
    --interaction-mild: #FCD34D;

    /* Spacing System (4px base) */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Touch Target (Requirement 1.5) */
    --touch-target-min: 44px;

    /* Safe Areas */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-loading: 700;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
}

/* ==================== Base Styles ==================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-light);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==================== Typography ==================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

h1 {
    font-size: 24px;
    font-weight: 700;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 12px;
}

.text-xs {
    font-size: 10px;
}

.text-sm {
    font-size: 12px;
}

.text-base {
    font-size: 14px;
}

.text-lg {
    font-size: 16px;
}

.text-xl {
    font-size: 18px;
}

.text-2xl {
    font-size: 20px;
}

.text-3xl {
    font-size: 24px;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

.text-danger {
    color: var(--danger);
}

.text-warning {
    color: var(--warning);
}

.text-success {
    color: var(--success);
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==================== App Shell ==================== */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--bg-white);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.app-content {
    flex: 1;
    padding-bottom: calc(70px + var(--safe-area-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==================== Loading Overlay ==================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loading);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: 14px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== Bottom Navigation ==================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-2) 0;
    padding-bottom: max(var(--space-2), var(--safe-area-bottom));
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
    z-index: var(--z-fixed);
    min-height: calc(56px + var(--safe-area-bottom));
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: var(--space-1) var(--space-2);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: color var(--transition-fast);
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
}

.nav-item.active {
    color: var(--primary);
}

.nav-item:active {
    transform: scale(0.95);
}

.nav-badge {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(12px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== Buttons ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch-target-min);
    padding: var(--space-3) var(--space-6);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98);
}

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

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:active:not(:disabled) {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--secondary);
    color: white;
}

.btn-secondary:active:not(:disabled) {
    background: var(--secondary-dark);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:active:not(:disabled) {
    background: var(--primary-light);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:active:not(:disabled) {
    background: var(--bg-gray);
}

.btn-sm {
    min-height: 36px;
    padding: var(--space-2) var(--space-4);
    font-size: 12px;
}

.btn-lg {
    min-height: 52px;
    padding: var(--space-4) var(--space-8);
    font-size: 16px;
}

.btn-block {
    width: 100%;
}

.btn-icon {
    min-width: var(--touch-target-min);
    padding: var(--space-2);
}

/* ==================== Cards ==================== */
.card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
}

.card-header {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-3);
}

.card-body {
    padding: var(--space-4);
}

.card-footer {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-3);
}

/* ==================== Forms ==================== */
.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input {
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-3) var(--space-4);
    font-size: 16px;
    /* Prevents zoom on iOS */
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input.error {
    border-color: var(--danger);
}

.form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-error {
    margin-top: var(--space-1);
    font-size: 12px;
    color: var(--danger);
}

.form-hint {
    margin-top: var(--space-1);
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================== Skeleton Loading ==================== */
.skeleton {
    background: linear-gradient(90deg,
            var(--bg-gray) 25%,
            var(--border-light) 50%,
            var(--bg-gray) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

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

.skeleton-text {
    height: 14px;
    margin-bottom: var(--space-2);
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-image {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
}

.skeleton-button {
    height: var(--touch-target-min);
    border-radius: var(--radius-lg);
}

/* ==================== Badges ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.badge-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.badge-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.badge-warning {
    background: var(--warning-light);
    color: var(--warning);
}

.badge-success {
    background: var(--success-light);
    color: var(--success);
}

.badge-rx {
    background: var(--danger);
    color: white;
    font-weight: 700;
}

/* ==================== Toast Notifications ==================== */
.toast-container {
    position: fixed;
    top: calc(var(--space-4) + var(--safe-area-top));
    left: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    background: var(--text-primary);
    color: white;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.3s ease;
    pointer-events: auto;
}

.toast.success {
    background: var(--success);
}

.toast.error {
    background: var(--danger);
}

.toast.warning {
    background: var(--warning);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ==================== Modal ==================== */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: block;
    pointer-events: none;
}

.modal-container.hidden {
    display: none !important;
}

/* Global Modal Overlay Styles for #modal-container */
#modal-container .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
    pointer-events: auto;
    opacity: 1 !important;
    /* Override global .modal-overlay { opacity: 0 } */
    animation: fadeIn 0.2s ease;
}

#modal-container .modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background-color: #FFFFFF !important;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    animation: slideUp 0.3s ease;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}

#modal-container .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    background-color: #FFFFFF !important;
    flex-shrink: 0;
    border-radius: 20px 20px 0 0;
}

#modal-container .modal-header h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 17px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}

#modal-container .modal-header h3 i {
    color: var(--primary);
}

#modal-container .modal-close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: 18px;
}

#modal-container .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(90vh - 140px);
    background-color: #FFFFFF !important;
}

#modal-container .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

#modal-container .form-group {
    margin-bottom: var(--space-4);
}

#modal-container .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: var(--space-2);
}

#modal-container .form-group input,
#modal-container .form-group select,
#modal-container .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#modal-container .form-group input:focus,
#modal-container .form-group select:focus,
#modal-container .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Global Select Styling - applies everywhere */
select.form-select,
.modal-overlay select,
.health-section select,
select[name="reaction_type"],
select[name="severity"],
select[name="frequency"],
select[name="gender"],
select[name="blood_type"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    background: #FFFFFF;
    color: #1F2937;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

select.form-select:focus,
.modal-overlay select:focus,
.health-section select:focus,
select[name="reaction_type"]:focus,
select[name="severity"]:focus,
select[name="frequency"]:focus,
select[name="gender"]:focus,
select[name="blood_type"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

select option {
    padding: 12px 16px;
    background: #FFFFFF;
    color: #1F2937;
}

#modal-container .form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    position: sticky;
    bottom: 0;
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    margin-bottom: calc(-1 * var(--space-4));
}

#modal-container .form-actions .btn {
    flex: 1;
    min-height: var(--touch-target-min);
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    padding: 12px 16px;
}

#modal-container .form-actions .btn-secondary,
#modal-container .btn-secondary {
    background: #F3F4F6;
    color: #6B7280;
}

#modal-container .form-actions .btn-primary,
#modal-container .btn-primary {
    background: var(--primary);
    color: white;
}

#modal-container .form-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

#modal-container .checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

#modal-container .checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: #F9FAFB;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

#modal-container .checkbox-item:has(input:checked) {
    background: var(--primary-light);
}

#modal-container .checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

#modal-container .checkbox-label {
    font-size: 13px;
    color: var(--text-primary);
}

#modal-container .autocomplete-wrapper {
    position: relative;
}

#modal-container .autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

#modal-container .autocomplete-results.hidden {
    display: none;
}

#modal-container .autocomplete-item {
    padding: var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s;
}

#modal-container .autocomplete-item:hover {
    background: var(--bg-light);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

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


.modal {
    background: var(--bg-white);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modal-slide-up 0.3s ease;
}

@keyframes modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

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

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

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}

.modal-body {
    padding: var(--space-4);
}

.modal-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--border-light);
}

/* ==================== Page Transitions ==================== */
.page-enter {
    opacity: 0;
    transform: translateX(20px);
}

.page-exit {
    opacity: 0;
    transform: translateX(-20px);
}

.app-content {
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* ==================== Error States ==================== */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
    min-height: 300px;
}

.error-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--bg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.error-icon i {
    font-size: 32px;
    color: var(--text-muted);
}

.error-icon.error {
    background: var(--danger-light);
}

.error-icon.error i {
    color: var(--danger);
}

.error-state h2 {
    margin-bottom: var(--space-2);
}

.error-state p {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* ==================== Empty States ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.empty-state-icon {
    width: 100px;
    height: 100px;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

/* ==================== Utility Classes ==================== */
.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: var(--space-3);
}

.p-4 {
    padding: var(--space-4);
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mt-4 {
    margin-top: var(--space-4);
}

.rounded {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

.bg-white {
    background: var(--bg-white);
}

.bg-light {
    background: var(--bg-light);
}

.bg-primary {
    background: var(--primary);
}

.bg-primary-light {
    background: var(--primary-light);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ==================== Responsive Breakpoints ==================== */
@media (min-width: 640px) {
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==================== Safe Area Support ==================== */
@supports (padding: max(0px)) {
    .app-header {
        padding-top: max(var(--space-4), var(--safe-area-top));
    }

    .bottom-nav {
        padding-bottom: max(var(--space-2), var(--safe-area-bottom));
    }

    .app-content {
        padding-bottom: calc(70px + max(0px, var(--safe-area-bottom)));
    }
}

/* ==================== Print Styles ==================== */
@media print {

    .bottom-nav,
    .loading-overlay,
    .toast-container,
    .modal-container {
        display: none !important;
    }
}


/* ==================== Skeleton Loading Components ==================== */
/* Requirements: 8.1, 8.3 - Skeleton loading placeholders matching content layout */

/* Base Skeleton Animation */
.skeleton {
    background: linear-gradient(90deg,
            var(--bg-gray) 25%,
            var(--border-light) 50%,
            var(--bg-gray) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

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

/* Skeleton Fade Transitions */
.skeleton-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.skeleton-fade-in {
    animation: skeleton-content-in 0.3s ease-out;
}

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

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

/* ==================== Skeleton Product Card ==================== */
.skeleton-product-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.skeleton-product-image-wrapper {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-gray);
}

.skeleton-product-image {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.skeleton-product-image-wrapper .skeleton-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    width: 32px;
    height: 20px;
    border-radius: var(--radius-sm);
}

.skeleton-product-image-wrapper .skeleton-wishlist-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
}

.skeleton-product-info {
    padding: var(--space-3);
}

.skeleton-product-name {
    height: 14px;
    width: 100%;
    margin-bottom: var(--space-2);
}

.skeleton-product-name-short {
    height: 14px;
    width: 70%;
    margin-bottom: var(--space-2);
}

.skeleton-product-price {
    height: 18px;
    width: 50%;
    margin-bottom: var(--space-3);
}

.skeleton-add-to-cart {
    height: 36px;
    width: 100%;
    border-radius: var(--radius-lg);
}

/* Skeleton Product Grid */
.skeleton-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
}

@media (min-width: 640px) {
    .skeleton-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== Skeleton Member Card ==================== */
.skeleton-member-card {
    background: linear-gradient(135deg, var(--bg-gray) 0%, var(--border) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin: var(--space-4);
}

.skeleton-member-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.skeleton-member-card .skeleton-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.skeleton-member-info {
    flex: 1;
}

.skeleton-member-name {
    height: 18px;
    width: 120px;
    margin-bottom: var(--space-2);
}

.skeleton-member-id {
    height: 14px;
    width: 80px;
}

.skeleton-member-points {
    text-align: right;
}

.skeleton-points-value {
    height: 24px;
    width: 60px;
    margin-bottom: var(--space-1);
    margin-left: auto;
}

.skeleton-points-label {
    height: 12px;
    width: 50px;
    margin-left: auto;
}

.skeleton-tier-progress {
    margin-top: var(--space-3);
}

.skeleton-progress-bar {
    height: 8px;
    width: 100%;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-2);
}

.skeleton-tier-text {
    height: 12px;
    width: 150px;
}

.skeleton-qr-section {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.skeleton-qr-code {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-md);
}

/* ==================== Skeleton Order Card ==================== */
.skeleton-order-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.skeleton-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.skeleton-order-id {
    height: 16px;
    width: 100px;
}

.skeleton-order-status {
    height: 24px;
    width: 70px;
    border-radius: var(--radius-full);
}

.skeleton-order-date .skeleton-date {
    height: 12px;
    width: 120px;
    margin-bottom: var(--space-3);
}

.skeleton-order-items {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: var(--space-3) 0;
    margin-bottom: var(--space-3);
}

.skeleton-order-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

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

.skeleton-item-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.skeleton-item-info {
    flex: 1;
}

.skeleton-item-name {
    height: 14px;
    width: 80%;
    margin-bottom: var(--space-1);
}

.skeleton-item-qty {
    height: 12px;
    width: 40%;
}

.skeleton-order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-order-total {
    height: 18px;
    width: 80px;
}

.skeleton-order-action {
    height: 36px;
    width: 100px;
    border-radius: var(--radius-lg);
}

/* ==================== Skeleton Pharmacist Card ==================== */
.skeleton-pharmacist-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.skeleton-pharmacist-photo {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.skeleton-pharmacist-info {
    flex: 1;
}

.skeleton-pharmacist-name {
    height: 16px;
    width: 100px;
    margin-bottom: var(--space-2);
}

.skeleton-pharmacist-specialty {
    height: 12px;
    width: 80px;
    margin-bottom: var(--space-1);
}

.skeleton-pharmacist-rating {
    height: 12px;
    width: 60px;
}

.skeleton-book-btn {
    height: 36px;
    width: 70px;
    border-radius: var(--radius-lg);
}

/* ==================== Skeleton Service Grid ==================== */
.skeleton-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
}

.skeleton-service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.skeleton-service-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-2);
}

.skeleton-service-label {
    height: 12px;
    width: 50px;
}

/* ==================== Skeleton Category Filter ==================== */
.skeleton-category-filter {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.skeleton-category-pill {
    height: 36px;
    width: 80px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* ==================== Skeleton Search Bar ==================== */
.skeleton-search-bar {
    padding: var(--space-4);
}

.skeleton-search-input {
    height: 44px;
    width: 100%;
    border-radius: var(--radius-lg);
}

/* ==================== Skeleton Shop Page ==================== */
.skeleton-shop-page {
    background: var(--bg-light);
}

/* ==================== Skeleton Home Page ==================== */
.skeleton-home-page {
    background: var(--bg-light);
}

.skeleton-ai-section {
    padding: var(--space-4);
}

.skeleton-ai-header {
    height: 60px;
    width: 100%;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3);
}

.skeleton-ai-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.skeleton-ai-button {
    height: 40px;
    border-radius: var(--radius-lg);
}

/* ==================== Skeleton Cart Item ==================== */
.skeleton-cart-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.skeleton-cart-item-image {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.skeleton-cart-item-info {
    flex: 1;
}

.skeleton-cart-item-name {
    height: 14px;
    width: 80%;
    margin-bottom: var(--space-2);
}

.skeleton-cart-item-price {
    height: 16px;
    width: 50%;
}

.skeleton-cart-qty-control {
    width: 100px;
    height: 36px;
    border-radius: var(--radius-md);
}

/* ==================== Skeleton Coupon Card ==================== */
.skeleton-coupon-card {
    display: flex;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.skeleton-coupon-left {
    width: 100px;
    padding: var(--space-4);
    background: var(--bg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skeleton-coupon-discount {
    width: 60px;
    height: 40px;
    border-radius: var(--radius-md);
}

.skeleton-coupon-right {
    flex: 1;
    padding: var(--space-3);
}

.skeleton-coupon-title {
    height: 16px;
    width: 80%;
    margin-bottom: var(--space-2);
}

.skeleton-coupon-desc {
    height: 12px;
    width: 100%;
    margin-bottom: var(--space-2);
}

.skeleton-coupon-expiry {
    height: 10px;
    width: 60%;
}

/* ==================== Skeleton Notification Item ==================== */
.skeleton-notification-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.skeleton-notification-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.skeleton-notification-content {
    flex: 1;
}

.skeleton-notification-title {
    height: 14px;
    width: 70%;
    margin-bottom: var(--space-2);
}

.skeleton-notification-desc {
    height: 12px;
    width: 100%;
    margin-bottom: var(--space-2);
}

.skeleton-notification-time {
    height: 10px;
    width: 40%;
}


/* ==================== Lazy Loading Images ==================== */
/* Requirements: 8.5 - Lazy loading with placeholder until loaded */

/* Lazy Image Base */
img.lazy,
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img.lazy-loaded {
    opacity: 1;
}

img.lazy-placeholder {
    background: var(--bg-gray);
    object-fit: cover;
}

img.lazy-error {
    opacity: 1;
    background: var(--bg-gray);
}

/* Product Image Lazy Loading */
.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg-gray);
}

.product-image.lazy-placeholder {
    animation: image-placeholder-pulse 1.5s ease-in-out infinite;
}

@keyframes image-placeholder-pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.8;
    }
}

/* Avatar Lazy Loading */
.avatar {
    border-radius: var(--radius-full);
    object-fit: cover;
    background: var(--bg-gray);
}

.avatar-sm {
    width: 32px;
    height: 32px;
}

.avatar-md {
    width: 48px;
    height: 48px;
}

.avatar-lg {
    width: 64px;
    height: 64px;
}

.avatar-xl {
    width: 80px;
    height: 80px;
}

/* Image Container with Aspect Ratio */
.image-container {
    position: relative;
    overflow: hidden;
    background: var(--bg-gray);
}

.image-container.aspect-square {
    aspect-ratio: 1;
}

.image-container.aspect-video {
    aspect-ratio: 16/9;
}

.image-container.aspect-portrait {
    aspect-ratio: 3/4;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Loading Shimmer Effect for Images */
.image-shimmer {
    position: relative;
    overflow: hidden;
}

.image-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    animation: shimmer 1.5s infinite;
}

.image-shimmer.lazy-loaded::after {
    display: none;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Blur-up Effect for Progressive Loading */
.blur-up {
    filter: blur(10px);
    transition: filter 0.3s ease-out;
}

.blur-up.lazy-loaded {
    filter: blur(0);
}

/* Fade-in Effect */
.fade-in {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.fade-in.lazy-loaded {
    opacity: 1;
}

/* Image Error State */
.image-error {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gray);
    color: var(--text-muted);
    font-size: 12px;
}

.image-error i {
    font-size: 24px;
    margin-bottom: var(--space-2);
}

/* Native Lazy Loading Support Enhancement */
img[loading="lazy"] {
    /* Ensure smooth transition when native lazy loading kicks in */
    transition: opacity 0.3s ease-in-out;
}

/* Intersection Observer Fallback Styles */
.no-intersection-observer img.lazy {
    opacity: 1;
}


/* ==================== Home Dashboard Styles ==================== */
/* Requirements: 13.1, 13.2, 13.3, 13.4, 13.5, 13.6, 13.7, 13.8, 13.9 */

/* Home Page Container */
.home-page {
    background: var(--bg-light);
    min-height: 100%;
}

/* Home Header (Requirement 13.1) */
.home-header {
    background: var(--bg-white);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}

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

.home-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.home-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.home-logo-fallback {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.home-header-text {
    display: flex;
    flex-direction: column;
}

.home-shop-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.home-shop-tagline {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.home-header-actions {
    display: flex;
    gap: var(--space-2);
}

.home-header-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--bg-light);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

.home-header-btn:active {
    transform: scale(0.95);
    background: var(--border);
}

.notification-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-light);
}

/* Member Card Section */
.home-member-section {
    padding: var(--space-4);
    padding-top: var(--space-4);
}

/* Member Card Component (Requirements 5.1, 5.2, 5.3, 5.4, 13.2, 13.3) */
.member-card {
    position: relative;
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-5);
    color: white;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 200px;
}

.member-card:active {
    transform: scale(0.98);
}

/* Tier-specific gradients */
.member-card-silver {
    background: linear-gradient(135deg, #475569 0%, #64748B 50%, #334155 100%);
}

.member-card-silver .member-card-company,
.member-card-silver .member-card-tier,
.member-card-silver .member-card-points-label,
.member-card-silver .member-card-points-value,
.member-card-silver .member-card-points-unit,
.member-card-silver .member-card-id-label,
.member-card-silver .member-card-id-value,
.member-card-silver .member-card-progress-text {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.member-card-gold {
    background: linear-gradient(135deg, #D97706 0%, #FBBF24 50%, #B45309 100%);
}

.member-card-platinum {
    background: linear-gradient(135deg, #1E293B 0%, #475569 50%, #0F172A 100%);
}

.member-card-bronze {
    background: linear-gradient(135deg, #92400E 0%, #D97706 50%, #78350F 100%);
}

.member-card-guest {
    background: linear-gradient(135deg, #11B0A6 0%, #6EE7B7 50%, #059669 100%);
}

/* Decorative elements */
.member-card-decor {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    filter: blur(40px);
}

.member-card-decor-2 {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-full);
    filter: blur(30px);
}

.member-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-2) var(--space-3);
}

/* Guest card content */
.member-card-guest-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-4) 0;
}

.member-card-guest-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--space-3);
}

.member-card-guest-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
}

.member-card-guest-desc {
    font-size: 12px;
    opacity: 0.9;
    margin: 0 0 var(--space-4) 0;
}

/* Member card header */
.member-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    padding: 0 var(--space-2);
}

.member-card-brand {
    display: flex;
    flex-direction: column;
}

.member-card-company {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 1;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.member-card-tier {
    font-size: 22px;
    font-weight: 700;
    margin: var(--space-1) 0 0 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.member-card-tier-icon {
    font-size: 32px;
    opacity: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.member-card-gold .member-card-tier-icon {
    color: #FEF3C7;
}

/* Member card info */
.member-card-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-3);
    padding: 0 var(--space-2);
}

.member-card-points-label,
.member-card-id-label {
    font-size: 11px;
    opacity: 1;
    margin: 0 0 var(--space-1) 0;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.member-card-points-value {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.member-card-points-unit {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
    margin-left: var(--space-1);
}

.member-card-id {
    text-align: right;
}

.member-card-id-value {
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Progress bar (Requirement 5.4) */
.member-card-progress {
    margin-top: auto;
    padding: 0 var(--space-2);
}

.member-card-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.member-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 1));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.member-card-progress-text {
    font-size: 11px;
    opacity: 1;
    text-align: right;
    margin: 0;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Flip hint */
.member-card-flip-hint {
    position: absolute;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    opacity: 0.9;
    animation: bounce-subtle 2s infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
}

@keyframes bounce-subtle {

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

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

/* White button for guest card */
.btn-white {
    background: white;
    color: var(--primary);
    font-weight: 600;
}

.btn-white:active {
    background: rgba(255, 255, 255, 0.9);
}

/* Service Grid Section (Requirements 13.4, 13.5) */
.home-services-section {
    padding: 0 var(--space-4) var(--space-4);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

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

.service-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.service-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

/* AI Assistant Section (Requirements 13.6, 13.7) */
.home-ai-section {
    padding: 0 var(--space-4) var(--space-4);
}

.ai-assistant-card {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    color: white;
}

.ai-assistant-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.ai-assistant-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ai-assistant-text {
    flex: 1;
}

.ai-assistant-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.ai-assistant-desc {
    font-size: 12px;
    opacity: 0.8;
    margin: 0;
}

.ai-assistant-expand {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ai-symptom-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.ai-symptom-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    color: white;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    transition: background var(--transition-fast);
    min-height: var(--touch-target-min);
}

.ai-symptom-btn:active {
    background: rgba(255, 255, 255, 0.3);
}

.ai-symptom-btn i {
    font-size: 16px;
}

/* Pharmacists Section (Requirements 13.8, 13.9) */
.home-pharmacists-section {
    padding: 0 var(--space-4) var(--space-6);
}

.pharmacists-section {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.section-more {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    margin: calc(-1 * var(--space-2));
}

.pharmacists-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pharmacist-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
}

.pharmacist-photo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-gray);
}

.pharmacist-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pharmacist-info {
    flex: 1;
    min-width: 0;
}

.pharmacist-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pharmacist-specialty {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.pharmacist-rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    color: var(--warning);
    margin-top: var(--space-1);
}

.pharmacist-rating i {
    font-size: 10px;
}

.pharmacist-book-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    min-height: var(--touch-target-min);
    transition: background var(--transition-fast);
}

.pharmacist-book-btn:active {
    background: var(--primary-dark);
}

/* No pharmacists state */
.no-pharmacists {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

.no-pharmacists i {
    font-size: 32px;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.no-pharmacists p {
    font-size: 13px;
    margin: 0 0 var(--space-3) 0;
}


/* ==================== Member Page Styles ==================== */
/* Requirements: 5.1, 5.2, 5.3, 5.4 */

.member-page {
    background: var(--bg-light);
    min-height: 100%;
    padding-bottom: var(--space-8);
}

.member-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    background: var(--bg-white);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}

.back-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--bg-light);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
}

.back-btn:active {
    background: var(--border);
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.header-spacer {
    width: 44px;
}

/* Welcome Message */
.member-welcome {
    padding: var(--space-4);
    padding-bottom: 0;
}

.member-welcome-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* 3D Flip Card Container */
.member-card-container {
    perspective: 1000px;
    padding: var(--space-4);
    cursor: pointer;
    position: relative;
}

.member-card-flip {
    position: relative;
    width: 100%;
    height: 220px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.member-card-flip.flipped {
    transform: rotateY(180deg);
}

.member-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Front Face */
.member-card-front {
    color: white;
}

/* Back Face (QR Code) - Requirement 5.3 */
.member-card-back {
    background: var(--bg-white);
    transform: rotateY(180deg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-card-qr-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4);
}

.member-card-qr-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}

.member-card-qr-wrapper {
    background: white;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-light);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.member-card-qr-image {
    width: 120px;
    height: 120px;
    display: block;
}

.member-card-qr-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin: var(--space-2) 0 0 0;
}

.member-card-qr-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
    margin: var(--space-1) 0 0 0;
}

/* Card Shadow */
.member-card-shadow {
    position: absolute;
    bottom: 0;
    left: var(--space-4);
    right: var(--space-4);
    height: 16px;
    background: rgba(0, 0, 0, 0.1);
    filter: blur(12px);
    border-radius: 50%;
    z-index: -1;
}

/* Action Buttons */
.member-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
}

.member-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--touch-target-min);
    transition: all var(--transition-fast);
    border: none;
}

.member-action-btn:active {
    transform: scale(0.98);
}

.member-action-redeem {
    background: var(--bg-white);
    color: var(--primary);
    border: 1px solid var(--primary-light);
}

.member-action-qr {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(17, 176, 166, 0.3);
}

/* History Link */
.member-history-link {
    padding: 0 var(--space-4) var(--space-4);
}

.member-history-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    background: var(--bg-white);
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.member-history-btn:active {
    background: var(--bg-light);
}

.member-history-icon {
    width: 44px;
    height: 44px;
    background: var(--primary-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 18px;
}

.member-history-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.member-history-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.member-history-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.member-history-arrow {
    color: var(--text-muted);
    font-size: 14px;
}

/* Tier Benefits */
.member-benefits {
    padding: 0 var(--space-4);
}

.member-benefits-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}

.member-benefits-list {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.member-benefit-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
}

.member-benefit-item:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}

.member-benefit-icon {
    width: 36px;
    height: 36px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 14px;
    flex-shrink: 0;
}

.member-benefit-text {
    font-size: 13px;
    color: var(--text-primary);
}


/* ==================== Enhanced Pharmacist Card Styles ==================== */
/* Requirements: 13.8, 13.9 - Display pharmacist cards with photo, name, specialty */

/* Online status badge */
.pharmacist-photo {
    position: relative;
}

.pharmacist-online-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: var(--success);
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-full);
    z-index: 1;
}

.pharmacist-online-badge::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: var(--radius-full);
    animation: pulse-online 2s infinite;
}

@keyframes pulse-online {

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

    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Schedule display */
.pharmacist-schedule {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.pharmacist-schedule i {
    font-size: 10px;
}

/* Review count */
.pharmacist-reviews {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: var(--space-1);
}

/* Enhanced pharmacist card hover/active states */
.pharmacist-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pharmacist-card:active {
    transform: scale(0.98);
}

/* Pharmacist card with online indicator */
.pharmacist-card.is-online .pharmacist-photo::before {
    content: 'ออนไลน์';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--success);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Skeleton for pharmacist schedule */
.skeleton-pharmacist-schedule {
    height: 10px;
    width: 70px;
    margin-top: var(--space-1);
}

/* Empty pharmacist state enhancement */
.no-pharmacists {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    margin: var(--space-2) 0;
}

.no-pharmacists .btn {
    margin-top: var(--space-2);
}

/* Pharmacist card loading state */
.pharmacist-card.loading {
    pointer-events: none;
    opacity: 0.7;
}

.pharmacist-card.loading .pharmacist-book-btn {
    background: var(--bg-gray);
}

/* Horizontal scroll for pharmacist list on smaller screens */
@media (max-width: 380px) {
    .pharmacists-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--space-3);
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .pharmacist-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
}


/* ==================== Shop Page Styles ==================== */
/* Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 11.1 */

/* Shop Page Container */
.shop-page {
    background: var(--bg-light);
    min-height: 100%;
    padding-bottom: calc(80px + var(--safe-area-bottom));
}

/* Shop Header with Sticky Search (Requirement 2.2) */
.shop-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--bg-white);
    padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + var(--safe-area-top));
    box-shadow: var(--shadow-sm);
}

.shop-header-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.shop-back-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-light);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.shop-back-btn:active {
    background: var(--border);
}

/* Search Bar (Requirement 2.2, 2.7) */
.shop-search-container {
    flex: 1;
    position: relative;
}

.shop-search-input {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-4) 0 44px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-light);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.shop-search-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-white);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.shop-search-input::placeholder {
    color: var(--text-muted);
}

.shop-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
}

.shop-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--bg-gray);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.shop-search-clear.visible {
    opacity: 1;
}

.shop-search-clear:active {
    background: var(--border);
}

/* Category Filter (Requirement 2.2) */
.shop-categories {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-1) 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.category-pill {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-white);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.category-pill:active {
    transform: scale(0.98);
}

.category-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.category-pill .category-count {
    font-size: 11px;
    opacity: 0.8;
}

/* ==================== Promo Sections (Flash Sale, Choice) ==================== */
.shop-promo-section {
    background: var(--bg-white);
    margin-bottom: var(--space-2);
    padding: var(--space-4);
}

.shop-promo-section.hidden {
    display: none;
}

.promo-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.promo-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.promo-section-title .flash-icon {
    color: #ff4444;
    animation: flash-pulse 1s ease-in-out infinite;
}

.promo-section-title .choice-icon {
    color: #3b82f6;
}

.flash-timer {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--space-2);
    font-size: 14px;
    font-weight: 600;
    color: #ff4444;
}

.flash-timer .timer-unit {
    background: #ff4444;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.flash-timer .timer-ended {
    color: var(--text-muted);
    font-size: 12px;
}

.promo-see-all {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
}

.promo-see-all:active {
    opacity: 0.7;
}

.promo-products-scroll {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
}

.promo-products-scroll::-webkit-scrollbar {
    display: none;
}

/* Promo Product Card */
.promo-product-card {
    flex: 0 0 140px;
    scroll-snap-align: start;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.promo-product-card:active {
    transform: scale(0.98);
}

.promo-product-card.flash {
    border-color: rgba(255, 68, 68, 0.3);
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.1);
}

.promo-product-card.choice {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.promo-product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-light);
}

.promo-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-discount-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    background: #ff4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.promo-product-info {
    padding: var(--space-2);
}

.promo-product-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.promo-product-price {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.promo-price-sale {
    font-size: 14px;
    font-weight: 700;
    color: #ff4444;
}

.promo-price-original {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.promo-price-current {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.promo-add-btn {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.promo-add-btn:active {
    transform: scale(0.9);
}

.promo-out-of-stock {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.promo-product-info {
    position: relative;
}

/* Sort & Filter Bar */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.shop-result-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.shop-sort-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 36px;
}

.shop-sort-btn:active {
    background: var(--border);
}

/* Product Grid (Requirement 2.1) */
.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
}

@media (min-width: 480px) {
    .shop-product-grid {
        gap: var(--space-4);
    }
}

@media (min-width: 640px) {
    .shop-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .shop-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Product Card (Requirement 2.3, 11.1) */
.product-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.product-card:active {
    transform: scale(0.98);
}

.product-card-image-wrapper {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-gray);
    overflow: hidden;
}

.product-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--transition-normal);
}

.product-card-image.loading {
    opacity: 0;
}

.product-card-image.loaded {
    opacity: 1;
}

/* Product Badges */
.product-badges {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.product-badge {
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.product-badge-rx {
    background: var(--danger);
    color: white;
}

.product-badge-sale {
    background: var(--warning);
    color: white;
}

.product-badge-bestseller {
    background: var(--primary);
    color: white;
}

.product-badge-new {
    background: var(--secondary);
    color: white;
}

/* Flash Sale Badge */
.product-badge-flash {
    background: linear-gradient(135deg, #ff4444 0%, #ff6b6b 100%);
    color: white;
    animation: flash-pulse 1.5s ease-in-out infinite;
}

.product-badge-flash i {
    margin-right: 2px;
}

@keyframes flash-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Choice Badge */
.product-badge-choice {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
}

.product-badge-choice i {
    margin-right: 2px;
}

/* Featured Badge */
.product-badge-featured {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
}

/* Flash Sale Product Card */
.product-card.flash-sale {
    border: 2px solid #ff4444;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.2);
}

.product-card.flash-sale .product-card-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Flash Sale Price */
.product-price-current.flash-price {
    color: #ff4444;
    font-weight: 700;
}

.product-discount-badge {
    display: inline-block;
    background: #ff4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    margin-left: 4px;
}

/* Wishlist Button (Requirement 2.3) */
.product-wishlist-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.product-wishlist-btn:active {
    transform: scale(0.9);
}

.product-wishlist-btn.active {
    color: var(--danger);
}

.product-wishlist-btn.active i {
    animation: heart-pop 0.3s ease;
}

@keyframes heart-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

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

/* Product Info */
.product-card-info {
    padding: var(--space-3);
}

.product-card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}

.product-card-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.product-price-current {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.product-price-sale {
    color: var(--danger);
}

.product-price-original {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Add to Cart Button (Requirement 2.4) */
.product-add-btn {
    width: 100%;
    min-height: 36px;
    padding: var(--space-2);
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all var(--transition-fast);
}

.product-add-btn:active:not(:disabled) {
    background: var(--primary-dark);
    transform: scale(0.98);
}

.product-add-btn:disabled {
    background: var(--bg-gray);
    color: var(--text-muted);
    cursor: not-allowed;
}

.product-add-btn.adding {
    pointer-events: none;
}

.product-add-btn.added {
    background: var(--success);
}

.product-add-btn .btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Out of Stock */
.product-card.out-of-stock .product-card-image-wrapper::after {
    content: 'สินค้าหมด';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

/* Floating Cart Summary Bar (Requirement 2.5) */
.cart-summary-bar {
    position: fixed;
    bottom: calc(60px + var(--safe-area-bottom));
    left: var(--space-3);
    right: var(--space-3);
    background: var(--text-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-xl);
    z-index: 250;
    transform: translateY(calc(100% + 20px));
    opacity: 0;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.cart-summary-bar.visible {
    transform: translateY(0);
    opacity: 1;
}

.cart-summary-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: white;
}

.cart-summary-icon {
    position: relative;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.cart-summary-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: var(--danger);
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-summary-text {
    display: flex;
    flex-direction: column;
}

.cart-summary-count {
    font-size: 11px;
    opacity: 0.8;
}

.cart-summary-total {
    font-size: 14px;
    font-weight: 700;
}

.cart-summary-btn {
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    font-weight: 600;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: background var(--transition-fast);
}

.cart-summary-btn:active {
    background: var(--primary-dark);
}

/* Infinite Scroll Loading (Requirement 2.6) */
.shop-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6);
    color: var(--text-muted);
}

.shop-load-more-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-2);
}

.shop-load-more-text {
    font-size: 13px;
}

/* No Results State */
.shop-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.shop-no-results-icon {
    width: 80px;
    height: 80px;
    background: var(--bg-gray);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.shop-no-results-icon i {
    font-size: 32px;
    color: var(--text-muted);
}

.shop-no-results h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.shop-no-results p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4) 0;
}

/* Sort Modal */
.sort-modal-content {
    padding: var(--space-4);
}

.sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.sort-option:active {
    background: var(--bg-light);
}

.sort-option.active {
    background: var(--primary-light);
    color: var(--primary);
}

.sort-option-text {
    font-size: 14px;
    font-weight: 500;
}

.sort-option-check {
    color: var(--primary);
    opacity: 0;
}

.sort-option.active .sort-option-check {
    opacity: 1;
}

/* Shop Empty State */
.shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
    min-height: 400px;
}

.shop-empty-icon {
    width: 100px;
    height: 100px;
    background: var(--bg-gray);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.shop-empty-icon i {
    font-size: 40px;
    color: var(--text-muted);
}

.shop-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.shop-empty p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}



/* ==================== Cart Page Styles ==================== */
/* Requirements: 3.1 - Display cart items with quantity controls */

.cart-page {
    background: var(--bg-light);
    min-height: 100%;
    padding-bottom: calc(140px + var(--safe-area-bottom));
    /* Space for checkout bar + bottom nav */
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    background: var(--bg-white);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}

.cart-clear-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--danger-light);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cart-clear-btn:active {
    transform: scale(0.95);
    background: var(--danger);
    color: white;
}

/* Cart Items Container */
.cart-items-container {
    padding: var(--space-4);
}

/* Cart Item */
.cart-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-gray);
    position: relative;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-rx-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.cart-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item-price {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.cart-item-unit-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.cart-item-original-price {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.cart-item-subtotal {
    font-size: 12px;
    color: var(--text-secondary);
}

.cart-item-subtotal strong {
    color: var(--text-primary);
}

.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.cart-item-remove {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.cart-item-remove:active {
    color: var(--danger);
    background: var(--danger-light);
}

/* Quantity Control */
.cart-qty-control {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
}

.cart-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.cart-qty-btn:active:not(:disabled) {
    transform: scale(0.95);
    background: var(--primary-light);
    color: var(--primary);
}

.cart-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-qty-value {
    min-width: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Cart Summary Section */
.cart-summary-section {
    padding: 0 var(--space-4) var(--space-4);
}

.cart-summary-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.cart-summary-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
}

.cart-summary-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.cart-summary-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.cart-summary-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-2) 0;
}

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

.cart-summary-total {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

/* Prescription Warning */
.cart-rx-warning {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--warning-light);
    border-radius: var(--radius-lg);
    margin-top: var(--space-3);
    font-size: 12px;
    color: var(--warning);
}

.cart-rx-warning i {
    font-size: 16px;
}

/* Checkout Bar */
.cart-checkout-bar {
    position: fixed;
    bottom: calc(56px + var(--safe-area-bottom));
    /* Above bottom nav */
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    border-top: 2px solid #11B0A6;
}

.cart-checkout-total {
    display: flex;
    flex-direction: column;
}

.cart-checkout-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.cart-checkout-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.cart-checkout-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    min-height: 48px;
}

.cart-checkout-btn i {
    font-size: 14px;
}

/* Inline checkout button (inside summary card) */
.cart-checkout-btn-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
}

.cart-empty-message {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
}


/* ==================== Checkout Page Styles ==================== */
/* Requirements: 3.1, 3.2, 3.3, 3.4 - One Page Checkout */

.checkout-page {
    background: var(--bg-light);
    min-height: 100%;
    padding-bottom: calc(100px + var(--safe-area-bottom));
    /* Space for submit bar */
}

/* Fixed Submit Bar - appended to body for proper fixed positioning */
.checkout-submit-bar-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-area-bottom));
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    border-top: 2px solid #11B0A6;
}

/* Legacy submit bar (kept for backward compatibility) */
.checkout-page .checkout-submit-bar {
    display: none;
}

.checkout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    background: var(--bg-white);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}

/* Checkout Form */
.checkout-form {
    padding: var(--space-4);
}

/* Checkout Sections */
.checkout-section {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.checkout-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.checkout-section-number {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.checkout-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Saved Address Option */
.saved-address-option {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.saved-address-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    margin-bottom: var(--space-3);
}

.saved-address-checkbox input {
    display: none;
}

.checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.saved-address-checkbox input:checked+.checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}

.saved-address-checkbox input:checked+.checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.checkbox-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.saved-address-preview {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    font-size: 13px;
}

.saved-address-name {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.saved-address-detail {
    color: var(--text-secondary);
    margin: 0 0 var(--space-1) 0;
    line-height: 1.4;
}

.saved-address-phone {
    color: var(--text-secondary);
    margin: 0;
}

/* Address Form Fields */
.address-form-fields.hidden {
    display: none;
}

.form-row {
    display: flex;
    gap: var(--space-3);
}

.form-group-half {
    flex: 1;
}

.form-textarea {
    resize: none;
    min-height: 80px;
}

.required {
    color: var(--danger);
}

/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.payment-method-option {
    cursor: pointer;
}

.payment-method-option input {
    display: none;
}

.payment-method-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-light);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.payment-method-option.active .payment-method-content {
    background: var(--primary-light);
    border-color: var(--primary);
}

.payment-method-icon {
    width: 44px;
    height: 44px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--secondary);
    flex-shrink: 0;
}

.payment-method-icon.promptpay-icon {
    color: #1E4598;
}

.payment-method-icon.cod-icon {
    color: var(--success);
}

.payment-method-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.payment-method-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-method-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.payment-method-check {
    font-size: 20px;
    color: var(--border);
    transition: color var(--transition-fast);
}

.payment-method-option.active .payment-method-check {
    color: var(--primary);
}

/* Promo Code */
.promo-code-input {
    display: flex;
    gap: var(--space-2);
}

.promo-input {
    flex: 1;
    text-transform: uppercase;
}

.promo-btn {
    flex-shrink: 0;
    min-width: 80px;
}

.promo-result {
    margin-top: var(--space-2);
    font-size: 13px;
}

.promo-result.success {
    color: var(--success);
}

.promo-result.error {
    color: var(--danger);
}

/* Checkout Items Summary */
.checkout-items-summary {
    margin-bottom: var(--space-4);
}

.checkout-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.checkout-item:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}

.checkout-item-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-gray);
    position: relative;
}

.checkout-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-item-rx {
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--danger);
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
}

.checkout-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.checkout-item-name {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-item-qty {
    font-size: 12px;
    color: var(--text-muted);
}

.checkout-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

/* Checkout Totals */
.checkout-totals {
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-3);
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.checkout-total-row.hidden {
    display: none;
}

.checkout-grand-total {
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    border-top: 1px solid var(--border-light);
    font-weight: 600;
    color: var(--text-primary);
}

.checkout-grand-total span:last-child {
    font-size: 20px;
    color: var(--primary);
}

/* Rx Notice */
.checkout-rx-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--info-light);
    border-radius: var(--radius-lg);
    margin-top: var(--space-3);
    font-size: 12px;
    color: var(--info);
}

.checkout-rx-notice i {
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Submit Bar */
.checkout-submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-area-bottom));
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 350;
    border-top: 2px solid #11B0A6;
}

.checkout-submit-btn {
    min-height: 52px;
    font-size: 16px;
}

.checkout-submit-btn:disabled {
    background: var(--border);
    color: var(--text-muted);
}

/* Button Spinner */
.btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    margin-right: var(--space-2);
}

/* Loading State */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-muted);
}

.loading-state .loading-spinner {
    margin-bottom: var(--space-3);
}


/* ==================== Order Success Modal ==================== */
/* Requirements: 3.8, 3.9 - Order confirmation */

.order-success-modal .modal-body {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}

.order-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: var(--success-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-success-icon i {
    font-size: 40px;
    color: var(--success);
}

.order-success-number {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.order-success-number strong {
    color: var(--text-primary);
}

.order-success-total {
    font-size: 16px;
    color: var(--text-primary);
    margin: 0 0 var(--space-4) 0;
}

.order-success-total strong {
    font-size: 24px;
    color: var(--primary);
}

.order-success-method {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.order-success-note {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Payment Instructions */
.payment-instructions {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
    text-align: left;
}

.payment-instructions h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
}

.bank-info {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.bank-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-1) 0;
}

.bank-info p:last-child {
    margin-bottom: 0;
}

.bank-account {
    font-family: monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.promptpay-info {
    text-align: center;
}

.promptpay-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.promptpay-qr {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: inline-block;
}

.promptpay-qr img {
    width: 150px;
    height: 150px;
}

.payment-note {
    font-size: 12px;
    color: var(--warning);
    margin: var(--space-3) 0 0 0;
    text-align: center;
}


/* ==================== Promo Code Styles ==================== */
/* Requirements: 17.4, 17.5, 17.6, 17.7 */

.btn-spinner-sm {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(17, 176, 166, 0.3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

.promo-btn:disabled {
    opacity: 0.7;
}

.promo-btn:disabled .btn-spinner-sm {
    border-top-color: var(--text-muted);
}


/* ==================== Drug Interaction Modal Styles ==================== */
/* Requirements: 12.2, 12.3, 12.8 - Drug interaction warning display */

.interaction-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.interaction-modal {
    background: var(--bg-white);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.interaction-modal-header {
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-light);
}

.interaction-modal-header.severe {
    background: var(--danger-light);
    border-bottom-color: var(--danger);
}

.interaction-modal-header.moderate {
    background: var(--warning-light);
    border-bottom-color: var(--warning);
}

.interaction-modal-header.mild {
    background: #FEF9C3;
    border-bottom-color: var(--interaction-mild);
}

.interaction-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--space-1) 0;
}

.interaction-modal-subtitle {
    font-size: 13px;
    opacity: 0.8;
    margin: 0;
}

.interaction-modal-product {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

.interaction-modal-body {
    padding: var(--space-4);
    max-height: 50vh;
    overflow-y: auto;
}

/* Interaction Item */
.interaction-item {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    border-left: 4px solid;
}

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

.interaction-item.severe,
.interaction-item.contraindicated {
    background: var(--danger-light);
    border-left-color: var(--danger);
}

.interaction-item.moderate {
    background: var(--warning-light);
    border-left-color: var(--warning);
}

.interaction-item.mild {
    background: #FEF9C3;
    border-left-color: var(--interaction-mild);
}

.interaction-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.interaction-icon {
    font-size: 16px;
}

.interaction-drugs {
    font-weight: 600;
    font-size: 14px;
}

.interaction-severity-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    color: white;
    margin-left: auto;
    font-weight: 600;
}

.interaction-severity-badge.severe,
.interaction-severity-badge.contraindicated {
    background: var(--danger);
}

.interaction-severity-badge.moderate {
    background: var(--warning);
}

.interaction-severity-badge.mild {
    background: var(--interaction-mild);
    color: #854D0E;
}

.interaction-description {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.5;
}

.interaction-recommendation {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.interaction-recommendation i {
    margin-top: 2px;
}

.interaction-source {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Acknowledgment Section */
.acknowledgment-section {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
}

.acknowledgment-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.acknowledge-checkbox {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--warning);
    flex-shrink: 0;
}

.acknowledgment-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Modal Footer */
.interaction-modal-footer {
    padding: var(--space-4);
    padding-bottom: max(var(--space-4), var(--safe-area-bottom));
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: var(--space-3);
}

.interaction-btn {
    flex: 1;
    min-height: var(--touch-target-min);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all var(--transition-fast);
}

.interaction-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.interaction-btn.btn-danger {
    background: var(--danger);
    color: white;
}

.interaction-btn.btn-danger:active {
    background: #DC2626;
}

.interaction-btn.btn-warning {
    background: var(--warning);
    color: white;
}

.interaction-btn.btn-warning:active {
    background: #D97706;
}

.interaction-btn.btn-warning:disabled {
    background: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}

.interaction-btn.btn-primary {
    background: var(--primary);
    color: white;
}

.interaction-btn.btn-primary:active {
    background: var(--primary-dark);
}

.interaction-btn.btn-secondary {
    background: var(--bg-light);
    color: var(--text-primary);
}

.interaction-btn.btn-secondary:active {
    background: var(--border);
}

/* Interaction Summary in Cart/Checkout */
.interaction-summary {
    background: var(--warning-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-top: var(--space-3);
}

.interaction-summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.interaction-summary-icon {
    color: var(--warning);
    font-size: 16px;
}

.interaction-summary-title {
    font-size: 13px;
    font-weight: 600;
    color: #92400E;
}

.interaction-summary-list {
    font-size: 12px;
    color: #92400E;
    margin: 0;
    padding-left: var(--space-4);
}

.interaction-summary-list li {
    margin-bottom: var(--space-1);
}

.interaction-summary-list li:last-child {
    margin-bottom: 0;
}

/* Consult Pharmacist Button */
.btn-consult-pharmacist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-3);
    background: var(--danger);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--space-3);
    transition: all var(--transition-fast);
}

.btn-consult-pharmacist:active {
    background: #DC2626;
    transform: scale(0.98);
}

.btn-consult-pharmacist i {
    font-size: 16px;
}


/* ==================== Prescription Drug Flow Styles ==================== */
/* Requirements: 11.1, 11.2, 11.3, 11.4 - Prescription product handling */

/* Prescription Warning Label */
.prescription-warning-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--danger-light);
    border-radius: var(--radius-md);
    font-size: 11px;
    color: var(--danger);
    margin-top: var(--space-2);
}

.prescription-warning-label i {
    font-size: 12px;
}

/* Rx Badge Styles */
.product-badge-rx {
    background: var(--danger);
    color: white;
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.cart-item-rx-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
}

.checkout-item-rx {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: var(--danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
}

/* Prescription Notice in Checkout */
.checkout-rx-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-radius: var(--radius-lg);
    margin-top: var(--space-4);
    border: 1px solid #F59E0B;
}

.checkout-rx-notice i {
    font-size: 20px;
    color: #D97706;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkout-rx-notice span {
    font-size: 13px;
    color: #92400E;
    line-height: 1.5;
}

/* Prescription Approval Status Badge */
.approval-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.approval-status-badge.pending {
    background: var(--warning-light);
    color: #D97706;
}

.approval-status-badge.approved {
    background: var(--success-light);
    color: #059669;
}

.approval-status-badge.expired {
    background: var(--danger-light);
    color: var(--danger);
}

.approval-status-badge.rejected {
    background: var(--danger-light);
    color: var(--danger);
}

/* Consult Pharmacist Button */
.btn-consult-pharmacist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 52px;
    padding: var(--space-4);
    background: linear-gradient(135deg, #11B0A6, #0D8A82);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 15px rgba(17, 176, 166, 0.3);
}

.btn-consult-pharmacist:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(17, 176, 166, 0.4);
}

.btn-consult-pharmacist:active {
    transform: translateY(0);
}

.btn-consult-pharmacist i {
    font-size: 18px;
}

/* Prescription Blocked Checkout Section */
.checkout-rx-blocked {
    padding: var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    margin: var(--space-4);
    box-shadow: var(--shadow-md);
}

.checkout-rx-blocked-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.checkout-rx-blocked-icon {
    width: 48px;
    height: 48px;
    background: var(--danger-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-rx-blocked-icon i {
    font-size: 24px;
    color: var(--danger);
}

.checkout-rx-blocked-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.checkout-rx-blocked-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.checkout-rx-items {
    margin-bottom: var(--space-4);
}

.checkout-rx-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--danger-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

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

.checkout-rx-item-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.checkout-rx-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-rx-item-info {
    flex: 1;
    min-width: 0;
}

.checkout-rx-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.checkout-rx-item-badge {
    display: inline-block;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Prescription Approval Timer */
.approval-timer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--success-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.approval-timer i {
    font-size: 16px;
    color: #059669;
}

.approval-timer-text {
    font-size: 13px;
    color: #065F46;
}

.approval-timer-time {
    font-weight: 700;
    color: #059669;
}

.approval-timer.expiring-soon {
    background: var(--warning-light);
}

.approval-timer.expiring-soon i,
.approval-timer.expiring-soon .approval-timer-time {
    color: #D97706;
}

.approval-timer.expiring-soon .approval-timer-text {
    color: #92400E;
}

/* Product Detail Prescription Section */
.product-prescription-section {
    padding: var(--space-4);
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    border-radius: var(--radius-xl);
    margin: var(--space-4);
}

.product-prescription-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.product-prescription-icon {
    width: 40px;
    height: 40px;
    background: var(--danger);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-prescription-icon i {
    font-size: 20px;
    color: white;
}

.product-prescription-title {
    font-size: 16px;
    font-weight: 700;
    color: #991B1B;
}

.product-prescription-desc {
    font-size: 13px;
    color: #B91C1C;
    line-height: 1.5;
}

/* Cart Prescription Summary */
.cart-prescription-summary {
    padding: var(--space-4);
    background: var(--warning-light);
    border-radius: var(--radius-xl);
    margin: var(--space-4);
    border: 1px solid #F59E0B;
}

.cart-prescription-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.cart-prescription-icon {
    width: 36px;
    height: 36px;
    background: #F59E0B;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-prescription-icon i {
    font-size: 18px;
    color: white;
}

.cart-prescription-title {
    font-size: 14px;
    font-weight: 700;
    color: #92400E;
}

.cart-prescription-count {
    font-size: 12px;
    color: #B45309;
}

.cart-prescription-items {
    margin-bottom: var(--space-3);
}

.cart-prescription-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    font-size: 13px;
    color: #78350F;
}

.cart-prescription-item:last-child {
    margin-bottom: 0;
}

.cart-prescription-item i {
    color: #D97706;
}

.cart-prescription-action {
    margin-top: var(--space-3);
}

/* Prescription Modal Animations */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Prescription Modal Responsive */
@media (min-width: 640px) {
    .prescription-modal {
        border-radius: var(--radius-2xl);
        margin-bottom: var(--space-4);
    }
}

/* ==================== Orders Page Styles ==================== */
/* Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6, 19.1, 19.2, 19.3, 19.4 */

.orders-page {
    background: var(--bg-light);
    min-height: 100vh;
    padding-bottom: calc(80px + var(--safe-area-bottom));
}

/* Orders Page Header */
.orders-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    background: var(--bg-white);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm);
}

.orders-page-header .back-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.orders-page-header .back-btn:active {
    background: var(--bg-gray);
}

.orders-page-header .page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.orders-page-header .header-spacer {
    width: var(--touch-target-min);
}

/* Orders Filter Tabs */
.orders-filter-tabs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-white);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.orders-filter-tabs::-webkit-scrollbar {
    display: none;
}

.orders-filter-tab {
    flex-shrink: 0;
    min-height: 36px;
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-gray);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.orders-filter-tab.active {
    background: var(--primary);
    color: white;
}

.orders-filter-tab:active {
    transform: scale(0.98);
}

/* Orders List Container */
.orders-list {
    padding: var(--space-4);
}

/* Order Card */
.order-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-4);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.order-card:active {
    box-shadow: var(--shadow-lg);
}

/* Order Card Header */
.order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}

.order-card-info {
    flex: 1;
}

.order-card-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.order-card-date {
    font-size: 12px;
    color: var(--text-muted);
}

/* Order Status Badge - Requirement 4.2, 4.6 */
.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.order-status-badge i {
    font-size: 10px;
}

/* Status Colors - Requirement 4.6 */
.order-status-badge.pending {
    background: #FEF3C7;
    color: #92400E;
}

.order-status-badge.confirmed {
    background: #DBEAFE;
    color: #1E40AF;
}

.order-status-badge.paid {
    background: #D1FAE5;
    color: #065F46;
}

.order-status-badge.packing,
.order-status-badge.processing {
    background: #E0E7FF;
    color: #3730A3;
}

.order-status-badge.shipping,
.order-status-badge.shipped {
    background: #F3E8FF;
    color: #6B21A8;
}

.order-status-badge.delivered,
.order-status-badge.completed {
    background: #D1FAE5;
    color: #065F46;
}

.order-status-badge.cancelled {
    background: #FEE2E2;
    color: #991B1B;
}

/* Status Badge Update Animation - Requirement 4.6 */
.order-status-badge.status-updated {
    animation: statusPulse 0.5s ease-out;
}

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

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 8px rgba(17, 176, 166, 0.4);
    }

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

/* Order Card Preview */
.order-card-preview {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.order-preview-images {
    display: flex;
    gap: var(--space-1);
}

.order-preview-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-gray);
}

.order-preview-more {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--bg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.order-preview-info {
    flex: 1;
}

.order-preview-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.order-preview-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.order-card-expand {
    color: var(--text-muted);
    font-size: 14px;
    transition: transform var(--transition-fast);
}

.order-card.expanded .order-card-expand {
    transform: rotate(180deg);
}

/* Order Card Details - Expandable - Requirement 4.3 */
.order-card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.order-card.expanded .order-card-details {
    max-height: 2000px;
}

.order-details-content {
    padding: var(--space-4);
    border-top: 1px solid var(--border-light);
    background: var(--bg-light);
}

/* Order Items List */
.order-items-section {
    margin-bottom: var(--space-4);
}

.order-items-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
}

.order-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

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

.order-item-image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-gray);
    flex-shrink: 0;
}

.order-item-info {
    flex: 1;
    min-width: 0;
}

.order-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--text-muted);
}

.order-item-qty {
    color: var(--text-secondary);
}

.order-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    flex-shrink: 0;
}

/* Order Summary */
.order-summary-section {
    margin-bottom: var(--space-4);
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: 13px;
}

.order-summary-row.total {
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    font-size: 15px;
    font-weight: 700;
}

.order-summary-label {
    color: var(--text-secondary);
}

.order-summary-value {
    color: var(--text-primary);
    font-weight: 500;
}

.order-summary-row.total .order-summary-value {
    color: var(--primary);
}

/* Delivery Address Section */
.order-address-section {
    margin-bottom: var(--space-4);
}

.order-address-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.order-address-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.order-address-icon {
    width: 32px;
    height: 32px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 14px;
}

.order-address-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.order-address-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Delivery Tracking Section - Requirements 19.1, 19.2, 19.3, 19.4 */
.order-tracking-section {
    margin-bottom: var(--space-4);
}

.order-tracking-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.order-tracking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.order-tracking-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.order-tracking-icon {
    width: 36px;
    height: 36px;
    background: var(--secondary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    font-size: 16px;
}

.order-tracking-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.order-tracking-number {
    font-size: 12px;
    color: var(--text-muted);
}

.order-tracking-link {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary);
    background: var(--secondary-light);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    transition: all var(--transition-fast);
}

.order-tracking-link:active {
    background: var(--secondary);
    color: white;
}

/* Delivery Timeline - Requirement 19.2 */
.delivery-timeline {
    position: relative;
    padding-left: var(--space-6);
}

.delivery-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--space-4);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -25px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--border);
    border: 2px solid var(--bg-white);
    z-index: 1;
}

.timeline-item.completed .timeline-dot {
    background: var(--success);
}

.timeline-item.current .timeline-dot {
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.2);
}

.timeline-content {
    padding-left: var(--space-2);
}

.timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.timeline-item:not(.completed):not(.current) .timeline-title {
    color: var(--text-muted);
}

.timeline-time {
    font-size: 11px;
    color: var(--text-muted);
}

.timeline-item.current .timeline-time {
    color: var(--primary);
    font-weight: 500;
}

/* Order Actions */
.order-actions {
    display: flex;
    gap: var(--space-3);
}

.order-action-btn {
    flex: 1;
    min-height: var(--touch-target-min);
    padding: var(--space-3);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all var(--transition-fast);
}

.order-action-btn:active {
    transform: scale(0.98);
}

/* Re-order Button - Requirement 4.4, 4.5 */
.order-action-btn.reorder {
    background: var(--primary);
    color: white;
}

.order-action-btn.reorder:active {
    background: var(--primary-dark);
}

.order-action-btn.secondary {
    background: var(--bg-gray);
    color: var(--text-secondary);
}

.order-action-btn.secondary:active {
    background: var(--border);
}

/* Empty Orders State - Requirement 4.7 */
.orders-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.orders-empty-icon {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-6);
    opacity: 0.6;
}

.orders-empty-icon svg {
    width: 100%;
    height: 100%;
}

.orders-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.orders-empty-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    max-width: 280px;
}

/* Order Detail Page */
.order-detail-page {
    background: var(--bg-light);
    min-height: 100vh;
    padding-bottom: calc(100px + var(--safe-area-bottom));
}

.order-detail-header {
    background: var(--bg-white);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    text-align: center;
    position: relative;
}

.order-detail-back {
    position: absolute;
    left: var(--space-4);
    top: calc(var(--space-4) + var(--safe-area-top));
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
}

.order-detail-status {
    margin-bottom: var(--space-2);
}

.order-detail-number {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Estimated Delivery - Requirement 19.6 */
.order-estimated-delivery {
    background: var(--primary-light);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.order-estimated-icon {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.order-estimated-info {
    flex: 1;
}

.order-estimated-label {
    font-size: 12px;
    color: var(--primary-dark);
    margin-bottom: var(--space-1);
}

.order-estimated-date {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-dark);
}

/* Order Detail Fixed Bottom */
.order-detail-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    padding: var(--space-4);
    padding-bottom: max(var(--space-4), var(--safe-area-bottom));
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    z-index: var(--z-fixed);
}

/* Loading State for Orders */
.orders-loading {
    padding: var(--space-4);
}

/* Responsive Adjustments */
@media (min-width: 640px) {
    .orders-list {
        max-width: 600px;
        margin: 0 auto;
    }

    .order-preview-images {
        gap: var(--space-2);
    }

    .order-preview-image,
    .order-preview-more {
        width: 56px;
        height: 56px;
    }
}


/* ==================== Order Detail Page - Requirements 19.1, 19.2, 19.3, 19.4 ==================== */

.order-detail-page {
    background: var(--bg-light);
    min-height: 100vh;
    padding-bottom: calc(100px + var(--safe-area-bottom));
}

.order-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.order-detail-content {
    padding: var(--space-4);
}

.order-detail-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.order-detail-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-detail-order-number {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.order-detail-order-date {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.order-detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.order-detail-section-title i {
    color: var(--primary);
}

/* Delivery Tracking Card - Requirements 19.1, 19.2, 19.3, 19.4 */
.delivery-tracking-card {
    background: linear-gradient(135deg, var(--bg-white) 0%, #F0FDF9 100%);
    border: 1px solid rgba(17, 176, 166, 0.1);
}

/* Tracking Info Header - Requirement 19.1, 19.3 */
.tracking-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-light);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.tracking-carrier-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tracking-carrier-icon {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.tracking-carrier-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.tracking-number {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: monospace;
}

/* Requirement 19.4 - Link to carrier tracking page */
.tracking-link-btn {
    min-height: var(--touch-target-min);
    padding: var(--space-2) var(--space-4);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--transition-fast);
}

.tracking-link-btn:active {
    background: var(--primary-dark);
    transform: scale(0.98);
}

.tracking-info-pending {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
    font-size: 13px;
}

.tracking-info-pending i {
    color: var(--warning);
}

.estimated-delivery {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(17, 176, 166, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    font-size: 13px;
    color: var(--primary-dark);
}

.estimated-delivery i {
    color: var(--primary);
}

/* Delivery Timeline Detailed - Requirement 19.2 */
.delivery-timeline-detailed {
    position: relative;
}

.timeline-stage {
    display: flex;
    gap: var(--space-3);
    position: relative;
}

.timeline-stage-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-stage-dot {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg-light);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    z-index: 1;
    transition: all var(--transition-normal);
}

.timeline-stage.completed .timeline-stage-dot {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.timeline-stage.current .timeline-stage-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(17, 176, 166, 0.2);
}

.timeline-stage-line {
    width: 2px;
    flex: 1;
    min-height: 24px;
    background: var(--border);
    margin: var(--space-1) 0;
}

.timeline-stage.completed .timeline-stage-line {
    background: var(--success);
}

.timeline-stage-content {
    flex: 1;
    padding-bottom: var(--space-4);
}

.timeline-stage:last-child .timeline-stage-content {
    padding-bottom: 0;
}

.timeline-stage-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.timeline-stage:not(.completed):not(.current) .timeline-stage-title {
    color: var(--text-muted);
}

.timeline-stage-time {
    font-size: 12px;
    color: var(--text-muted);
}

.timeline-stage.current .timeline-stage-time {
    color: var(--primary);
    font-weight: 500;
}

.timeline-stage-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-1);
    padding: var(--space-2);
    background: rgba(17, 176, 166, 0.05);
    border-radius: var(--radius-md);
}

/* Order Detail Items */
.order-detail-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.order-detail-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
}

.order-detail-item-image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-white);
}

.order-detail-item-info {
    flex: 1;
    min-width: 0;
}

.order-detail-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-detail-item-qty {
    font-size: 12px;
    color: var(--text-muted);
}

.order-detail-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

/* Order Detail Summary */
.order-detail-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.summary-value {
    font-size: 14px;
    color: var(--text-primary);
}

.summary-row.discount .summary-value {
    color: var(--danger);
}

.summary-row.total {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
}

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

.summary-row.total .summary-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

/* Order Detail Address */
.order-detail-address {
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
}

.address-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.address-phone {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.address-phone i {
    color: var(--primary);
    font-size: 12px;
}

.address-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Order Detail Actions */
.order-detail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + var(--safe-area-bottom));
}

.btn-block {
    width: 100%;
}

.btn-secondary {
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-secondary:active {
    background: var(--border);
}

/* Order Detail Error */
.order-detail-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.order-detail-error .error-icon {
    width: 80px;
    height: 80px;
    background: #FEE2E2;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.order-detail-error .error-icon i {
    font-size: 32px;
    color: var(--danger);
}

/* ==================== Slip Upload Section ==================== */
.slip-upload-card {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.payment-info-box {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.payment-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-3);
}

.payment-amount-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.payment-amount-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.bank-transfer-info {
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.bank-info-title {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.bank-info-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.bank-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.bank-label {
    font-size: 13px;
    color: var(--text-muted);
}

.bank-value {
    font-size: 13px;
    color: var(--text-primary);
}

.bank-account-number {
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 1px;
}

.copy-btn {
    width: 28px;
    height: 28px;
    background: var(--primary-light);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-btn:active {
    background: var(--primary);
    color: white;
}

.promptpay-info {
    text-align: center;
}

.promptpay-qr-container {
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    display: inline-block;
    margin-bottom: var(--space-2);
}

.promptpay-qr-image {
    width: 180px;
    height: 180px;
}

.promptpay-hint {
    font-size: 13px;
    color: var(--text-muted);
}

.slip-upload-section {
    margin-top: var(--space-4);
}

.slip-upload-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.slip-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-4);
    background: var(--bg-white);
}

.slip-upload-area:active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.slip-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
}

.slip-upload-placeholder i {
    font-size: 40px;
    color: var(--primary);
}

.slip-upload-placeholder span {
    font-size: 14px;
}

.slip-upload-hint {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

.slip-preview {
    position: relative;
    display: inline-block;
}

.slip-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--radius-md);
    object-fit: contain;
}

.slip-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.slip-submit-btn {
    min-height: 52px;
    font-size: 16px;
}

.slip-submit-btn:disabled {
    background: var(--border);
    color: var(--text-muted);
}

.order-detail-error h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.order-detail-error p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

/* Skeleton for Order Detail */
.skeleton-order-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.skeleton-timeline-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.skeleton-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.skeleton-circle {
    border-radius: var(--radius-full);
}

.skeleton-image {
    border-radius: var(--radius-md);
}

/* Responsive for Order Detail */
@media (min-width: 640px) {
    .order-detail-content {
        max-width: 600px;
        margin: 0 auto;
    }

    .order-detail-actions {
        max-width: 600px;
        margin: 0 auto;
    }
}


/* ==================== Video Call Page ==================== */
/* Requirements: 6.2, 6.3 - WebRTC video call with remote video prominent */

.video-call-page {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: var(--z-modal);
}

/* Loading State */
.video-call-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.video-call-loading-content {
    text-align: center;
    color: #fff;
}

.video-call-loading-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    animation: pulse 2s infinite;
}

.video-call-loading-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.video-call-loading-status {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* Pre-Call Screen */
.video-call-pre-call {
    position: absolute;
    inset: 0;
}

.video-call-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-call-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%, transparent 100%);
    pointer-events: none;
}

/* Context Banner */
.video-call-context-banner {
    position: absolute;
    top: calc(var(--safe-area-top) + var(--space-4));
    left: var(--space-4);
    right: var(--space-4);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    z-index: 10;
}

.video-call-context-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 20px;
    flex-shrink: 0;
}

.video-call-context-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.video-call-context-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Pre-Call Controls */
.video-call-pre-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    padding-bottom: calc(var(--safe-area-bottom) + var(--space-6));
    color: #fff;
    z-index: 10;
}

.video-call-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.video-call-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-6);
}

.video-call-start-btn {
    width: 100%;
    height: 56px;
    background: var(--success);
    border: none;
    border-radius: var(--radius-xl);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: all 0.2s;
}

.video-call-start-btn:active {
    transform: scale(0.98);
    background: #059669;
}

.video-call-audio-btn {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: var(--radius-xl);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    transition: all 0.2s;
}

.video-call-audio-btn:active {
    background: rgba(255, 255, 255, 0.3);
}

/* Camera Switch Button */
.video-call-switch-camera {
    position: absolute;
    top: calc(var(--safe-area-top) + var(--space-4));
    right: var(--space-4);
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.video-call-switch-camera:active {
    transform: scale(0.9);
}

/* In-Call Screen */
.video-call-in-call {
    position: absolute;
    inset: 0;
}

/* Remote Video - Requirement 6.3: Display large video area with remote video prominent */
.video-call-remote {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1a1a2e;
}

/* Local Video PIP */
.video-call-pip {
    position: absolute;
    top: calc(var(--safe-area-top) + var(--space-4));
    right: var(--space-4);
    width: 120px;
    aspect-ratio: 9/16;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: #1f2937;
    z-index: 10;
    box-shadow: var(--shadow-lg);
}

.video-call-local {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Status Bar */
.video-call-status-bar {
    position: absolute;
    top: calc(var(--safe-area-top) + var(--space-4));
    left: var(--space-4);
    display: flex;
    gap: var(--space-2);
    z-index: 10;
}

.video-call-status {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.video-call-status-dot {
    width: 8px;
    height: 8px;
    background: var(--warning);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.video-call-status-dot.active {
    background: var(--success);
}

.video-call-timer {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.video-call-timer-dot {
    color: var(--danger);
    animation: pulse 1s infinite;
}

/* Call Controls */
.video-call-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-6);
    padding-bottom: calc(var(--safe-area-bottom) + var(--space-6));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    z-index: 20;
}

.video-call-ctrl-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.video-call-ctrl-btn:active {
    transform: scale(0.9);
}

.video-call-ctrl-btn.active {
    background: var(--danger);
}

.video-call-end-btn {
    width: 70px;
    height: 70px;
    background: var(--danger);
    font-size: 28px;
}

.video-call-end-btn:active {
    background: #dc2626;
}

/* End Screen */
.video-call-end-screen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-call-end-content {
    text-align: center;
    color: #fff;
    padding: var(--space-6);
    width: 100%;
    max-width: 320px;
}

.video-call-end-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--success);
}

.video-call-end-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.video-call-end-duration-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-1);
}

.video-call-end-duration {
    font-size: 36px;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', monospace;
    margin-bottom: var(--space-8);
}

.video-call-restart-btn {
    width: 100%;
    height: 52px;
    background: var(--success);
    border: none;
    border-radius: var(--radius-xl);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: all 0.2s;
}

.video-call-restart-btn:active {
    transform: scale(0.98);
}

.video-call-close-btn {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-xl);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.video-call-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

/* Pulse Animation */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ========================================
   Permission Checker UI
   Requirements: 6.1, 6.6
   ======================================== */

/* Permission Check UI Container */
.permission-check-ui,
.permission-denied-ui {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    color: #fff;
}

/* Permission Check Header */
.permission-check-header,
.permission-denied-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.permission-check-icon,
.permission-denied-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 32px;
}

.permission-check-icon {
    color: var(--primary);
}

.permission-denied-icon {
    color: var(--warning);
}

.permission-check-title,
.permission-denied-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.permission-check-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 280px;
    margin: 0 auto;
}

/* Permission Items */
.permission-check-items {
    width: 100%;
    max-width: 320px;
    margin-bottom: var(--space-8);
}

.permission-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    transition: all 0.3s ease;
}

.permission-item.granted {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.permission-item.denied {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.permission-item-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.permission-item.granted .permission-item-icon {
    background: rgba(16, 185, 129, 0.3);
    color: var(--success);
}

.permission-item.denied .permission-item-icon {
    background: rgba(239, 68, 68, 0.3);
    color: var(--danger);
}

.permission-item-info {
    flex: 1;
}

.permission-item-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.permission-item-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.permission-item.granted .permission-item-status {
    color: var(--success);
}

.permission-item.denied .permission-item-status {
    color: var(--danger);
}

.permission-item-indicator {
    font-size: 20px;
}

/* Permission Actions */
.permission-check-actions,
.permission-denied-actions {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.permission-request-btn,
.permission-help-btn {
    width: 100%;
    height: 52px;
    border-radius: var(--radius-lg);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all 0.2s ease;
}

.permission-request-btn {
    background: var(--primary);
    color: #fff;
    border: none;
}

.permission-request-btn:active {
    transform: scale(0.98);
    background: var(--primary-dark);
}

.permission-help-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.permission-help-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

/* Permission Instructions */
.permission-instructions {
    width: 100%;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.permission-instructions-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    color: var(--warning);
}

.permission-instructions-header h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.permission-instructions-steps {
    margin: 0;
    padding-left: var(--space-5);
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}

.permission-instructions-steps li {
    margin-bottom: var(--space-1);
}

/* Permission Loading */
.permission-loading {
    text-align: center;
    padding: var(--space-8);
}

.permission-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-4);
}

.permission-loading p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* Permission Modal */
.permission-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.permission-modal {
    background: #fff;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 340px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.permission-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
}

.permission-modal-header i:first-child {
    font-size: 24px;
    color: var(--primary);
}

.permission-modal-header h3 {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.permission-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.permission-modal-close:active {
    background: var(--border);
}

.permission-modal-body {
    padding: var(--space-4);
}

.permission-modal-body .permission-instructions-steps {
    color: var(--text-secondary);
}

.permission-modal-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--border);
}

.permission-modal-footer .btn {
    width: 100%;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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


/* ========================================
   Video Call - iOS Warning & End Confirm
   Requirements: 6.5, 6.8
   ======================================== */

/* iOS Limitation Warning */
.video-call-ios-warning {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    z-index: 100;
}

.video-call-ios-warning-content {
    text-align: center;
    color: #fff;
    max-width: 320px;
}

.video-call-ios-warning-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 40px;
    color: #fff;
}

.video-call-ios-warning-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.video-call-ios-warning-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-2);
}

.video-call-ios-warning-suggestion {
    font-size: 13px;
    color: var(--warning);
    margin-bottom: var(--space-6);
}

.video-call-ios-warning-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.video-call-ios-warning-actions .btn {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.video-call-ios-warning-actions .btn-primary {
    background: var(--primary);
    color: #fff;
    border: none;
}

.video-call-ios-warning-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* End Call Confirmation - Requirement 6.5 */
.video-call-end-confirm {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.8));
    padding: var(--space-6);
    padding-bottom: calc(var(--safe-area-bottom) + var(--space-6));
    z-index: 50;
    animation: slideUp 0.2s ease;
}

.video-call-end-confirm-content {
    text-align: center;
}

.video-call-end-confirm-text {
    font-size: 16px;
    color: #fff;
    margin-bottom: var(--space-4);
}

.video-call-end-confirm-actions {
    display: flex;
    gap: var(--space-3);
}

.video-call-end-confirm-cancel {
    flex: 1;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 600;
}

.video-call-end-confirm-cancel:active {
    background: rgba(255, 255, 255, 0.3);
}

/* Red confirmation button - Requirement 6.5 */
.video-call-end-confirm-btn {
    flex: 1;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--danger);
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.video-call-end-confirm-btn:active {
    background: #dc2626;
    transform: scale(0.98);
}

/* Control Button Labels */
.video-call-ctrl-label {
    display: block;
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.8;
}

/* Active state for control buttons */
.video-call-ctrl-btn.active {
    background: rgba(239, 68, 68, 0.8);
}

.video-call-ctrl-btn.active i {
    color: #fff;
}


/* ========================================
   Video Call - Summary Section
   Requirements: 6.7
   ======================================== */

.video-call-summary-section {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
}

.video-call-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.video-call-summary-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.video-call-summary-item i {
    width: 20px;
    text-align: center;
    color: var(--primary);
}

/* Notes input for pharmacist (admin side) */
.video-call-notes-section {
    margin-top: var(--space-4);
}

.video-call-notes-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-2);
}

.video-call-notes-input {
    width: 100%;
    min-height: 80px;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 14px;
    resize: vertical;
}

.video-call-notes-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.video-call-notes-input:focus {
    outline: none;
    border-color: var(--primary);
}

.video-call-save-notes-btn {
    margin-top: var(--space-3);
    width: 100%;
    height: 40px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.video-call-save-notes-btn:active {
    background: var(--primary-dark);
}

.video-call-save-notes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== LIFF Message Bridge Loading ==================== */
/* Requirements: 20.11 - Show loading state and success feedback */

.liff-bridge-loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.liff-bridge-loading.visible {
    opacity: 1;
    visibility: visible;
}

.liff-bridge-loading-content {
    background: var(--bg-white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-xl);
    min-width: 150px;
}

.liff-bridge-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--space-3);
}

.liff-bridge-loading-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}


/* ==================== Wishlist Page ====================
   Requirements: 16.1, 16.2, 16.3, 16.4, 16.5
   - Display heart icon button to add/remove from wishlist (16.1)
   - Toggle wishlist status with animation (16.2)
   - Display filled heart icon for wishlist items (16.3)
   - Display all saved products in grid layout (16.4)
   - Show product image, name, price, and "Add to Cart" button (16.5)
   ======================================== */

.wishlist-page {
    background: var(--bg-light);
    min-height: 100vh;
    padding-bottom: calc(80px + var(--safe-area-bottom));
}

/* Wishlist Header */
.wishlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.wishlist-header .back-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.wishlist-header .back-btn:active {
    background: var(--bg-gray);
}

.wishlist-header .page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.wishlist-count {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: var(--touch-target-min);
    text-align: right;
}

/* Wishlist Info Banner */
.wishlist-info-banner {
    margin: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: #FDF2F8;
    border: 1px solid #FBCFE8;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
    color: #BE185D;
}

.wishlist-info-banner i {
    font-size: 16px;
}

/* Wishlist Container */
.wishlist-container {
    padding: 0 var(--space-4) var(--space-4);
}

/* Wishlist Items */
.wishlist-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Wishlist Item Card */
.wishlist-item {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.wishlist-item:active {
    transform: scale(0.99);
}

.wishlist-item>div:first-child {
    display: flex;
}

/* Wishlist Item Image */
.wishlist-item-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    background: var(--bg-light);
    cursor: pointer;
}

.wishlist-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-item-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 24px;
}

/* Wishlist Item Info */
.wishlist-item-info {
    flex: 1;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
}

.wishlist-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.wishlist-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
}

.wishlist-remove-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    margin: -8px -8px 0 0;
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.wishlist-remove-btn:hover,
.wishlist-remove-btn:active {
    color: var(--danger);
    background: var(--danger-light);
}

/* Wishlist Item Price */
.wishlist-item-price {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.wishlist-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.wishlist-price.sale {
    color: var(--danger);
}

.wishlist-original-price {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.wishlist-discount-badge {
    padding: 2px 6px;
    background: var(--danger-light);
    color: var(--danger);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

/* Wishlist Add to Cart Button */
.wishlist-add-cart-btn {
    min-height: var(--touch-target-min);
    padding: 0 var(--space-4);
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: auto;
}

.wishlist-add-cart-btn:active {
    transform: scale(0.98);
    background: var(--primary-dark);
}

.wishlist-add-cart-btn.disabled {
    background: var(--bg-gray);
    color: var(--text-muted);
    cursor: not-allowed;
}

.wishlist-add-cart-btn.disabled:active {
    transform: none;
}

/* Wishlist Sale Banner */
.wishlist-sale-banner {
    padding: var(--space-2) var(--space-3);
    background: #FEF2F2;
    border-top: 1px solid #FECACA;
    font-size: 12px;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wishlist-sale-banner i {
    color: #F97316;
}

/* Wishlist Empty State */
.wishlist-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.wishlist-empty-icon {
    width: 100px;
    height: 100px;
    background: #FDF2F8;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.wishlist-empty-icon i {
    font-size: 48px;
    color: #F472B6;
}

.wishlist-empty-icon.error {
    background: var(--danger-light);
}

.wishlist-empty-icon.error i {
    color: var(--danger);
}

.wishlist-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.wishlist-empty-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    max-width: 280px;
}

/* Wishlist Skeleton */
.wishlist-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.wishlist-item-skeleton {
    display: flex;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: var(--space-3);
    gap: var(--space-3);
}

.skeleton-wishlist-image {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-md);
}

.wishlist-item-skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Product Wishlist Button Animation - Requirement 16.2 */
.product-wishlist-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-wishlist-btn i {
    font-size: 16px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.product-wishlist-btn:active {
    transform: scale(0.9);
}

/* Requirement 16.3 - Display filled heart icon in red color */
.product-wishlist-btn.active {
    background: #FDF2F8;
}

.product-wishlist-btn.active i {
    color: #EC4899;
    animation: heartBeat 0.3s ease;
}

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

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.2);
    }

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

/* Responsive */
@media (min-width: 640px) {
    .wishlist-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .wishlist-item-image {
        width: 120px;
        height: 120px;
    }
}


/* ==================== Notification Settings Page ====================
   Requirements: 14.1, 14.2, 14.3
   - Display categorized notification toggles (14.1)
   - Show Order Updates, Promotions, Appointment Reminders, Drug Reminders, Health Tips (14.2)
   - Save preferences immediately via API (14.3)
   ======================================== */

.notification-settings-page {
    background: var(--bg-light);
    min-height: 100vh;
    padding-bottom: calc(80px + var(--safe-area-bottom));
}

/* Notification Settings Header */
.notification-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.notification-settings-header .back-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.notification-settings-header .back-btn:active {
    background: var(--bg-gray);
}

.notification-settings-header .page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.notification-settings-header .header-spacer {
    width: var(--touch-target-min);
}

/* Notification Info Banner */
.notification-info-banner {
    margin: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--info-light);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
    color: #1E40AF;
}

.notification-info-banner i {
    font-size: 16px;
}

/* Notification Settings Container */
.notification-settings-container {
    padding: 0 var(--space-4);
}

/* Notification Settings List */
.notification-settings-list {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Notification Setting Item */
.notification-setting-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s;
}

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

.notification-setting-item:active {
    background: var(--bg-light);
}

/* Notification Setting Icon */
.notification-setting-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Notification Setting Info */
.notification-setting-info {
    flex: 1;
    min-width: 0;
}

.notification-setting-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.notification-setting-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Notification Toggle Switch */
.notification-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 32px;
    flex-shrink: 0;
}

.notification-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    transition: 0.3s;
    border-radius: 32px;
}

.notification-toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.notification-toggle input:checked+.notification-toggle-slider {
    background-color: var(--primary);
}

.notification-toggle input:checked+.notification-toggle-slider:before {
    transform: translateX(20px);
}

.notification-toggle input:focus+.notification-toggle-slider {
    box-shadow: 0 0 0 3px rgba(17, 176, 166, 0.2);
}

/* Notification Disable Warning */
.notification-disable-warning {
    margin: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--warning-light);
    border: 1px solid #FDE68A;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 12px;
    color: #92400E;
}

.notification-disable-warning i {
    font-size: 14px;
    color: var(--warning);
}

/* Notification Settings Empty State */
.notification-settings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.notification-settings-empty-icon {
    width: 100px;
    height: 100px;
    background: var(--info-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.notification-settings-empty-icon i {
    font-size: 48px;
    color: var(--info);
}

.notification-settings-empty-icon.error {
    background: var(--danger-light);
}

.notification-settings-empty-icon.error i {
    color: var(--danger);
}

.notification-settings-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.notification-settings-empty-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    max-width: 280px;
}

/* Notification Settings Skeleton */
.notification-settings-skeleton {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.notification-setting-skeleton {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.notification-setting-skeleton:last-child {
    border-bottom: none;
}

.skeleton-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
}

.notification-setting-skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton-toggle {
    width: 52px;
    height: 32px;
    border-radius: 32px;
}

/* Responsive */
@media (min-width: 640px) {
    .notification-settings-container {
        max-width: 600px;
        margin: 0 auto;
    }
}


/* ==================== Medication Reminders Page ====================
   Requirements: 15.1, 15.2, 15.3, 15.4, 15.5, 15.6, 15.7
   - Display list of active medication schedules (15.1)
   - Allow selection from order history or manual entry (15.2)
   - Capture medication name, dosage, frequency, and reminder times (15.3)
   - Send LINE push notification with medication details (15.4)
   - Include "Mark as Taken" action button (15.5)
   - Record timestamp and update adherence tracking (15.6)
   - Display adherence percentage and missed doses (15.7)
   ======================================== */

.medication-reminders-page {
    background: var(--bg-light);
    min-height: 100vh;
    padding-bottom: calc(80px + var(--safe-area-bottom));
}

/* Medication Reminders Header */
.medication-reminders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.medication-reminders-header .back-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.medication-reminders-header .back-btn:active {
    background: var(--bg-gray);
}

.medication-reminders-header .page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.add-reminder-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.add-reminder-btn:active {
    background: var(--primary-dark);
    transform: scale(0.95);
}

/* Medication Info Banner */
.medication-info-banner {
    margin: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: #FDF4FF;
    border: 1px solid #F5D0FE;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
    color: #86198F;
}

.medication-info-banner i {
    font-size: 16px;
}

/* Medication Reminders Container */
.medication-reminders-container {
    padding: 0 var(--space-4);
}

/* Medication Reminders List */
.medication-reminders-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Medication Reminder Card */
.medication-reminder-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.medication-reminder-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
}

/* Pill Icon */
.medication-pill-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

/* Medication Reminder Info */
.medication-reminder-info {
    flex: 1;
    min-width: 0;
}

.medication-reminder-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.medication-reminder-dosage {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.medication-reminder-times {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
}

.medication-reminder-times i {
    color: var(--primary);
}

.reminder-time {
    padding: 2px 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* Medication Reminder Actions */
.medication-reminder-actions {
    display: flex;
    gap: var(--space-2);
}

.medication-edit-btn,
.medication-delete-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.medication-edit-btn {
    background: var(--bg-light);
    color: var(--text-secondary);
}

.medication-edit-btn:active {
    background: var(--border);
}

.medication-delete-btn {
    background: var(--danger-light);
    color: var(--danger);
}

.medication-delete-btn:active {
    background: #FECACA;
}

/* Medication Adherence */
.medication-adherence {
    padding: 0 var(--space-4) var(--space-3);
}

.adherence-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.adherence-percent {
    font-weight: 600;
}

.adherence-percent.success {
    color: var(--success);
}

.adherence-percent.warning {
    color: var(--warning);
}

.adherence-percent.danger {
    color: var(--danger);
}

.adherence-bar {
    height: 6px;
    background: var(--bg-light);
    border-radius: 3px;
    overflow: hidden;
}

.adherence-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.adherence-fill.success {
    background: var(--success);
}

.adherence-fill.warning {
    background: var(--warning);
}

.adherence-fill.danger {
    background: var(--danger);
}

/* Medication Quick Actions - Requirement 15.5 */
.medication-quick-actions {
    display: flex;
    border-top: 1px solid var(--border-light);
}

.mark-taken-btn,
.skip-btn {
    flex: 1;
    min-height: var(--touch-target-min);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.mark-taken-btn {
    background: var(--success-light);
    color: var(--success);
    border-right: 1px solid var(--border-light);
}

.mark-taken-btn:active {
    background: #A7F3D0;
}

.skip-btn {
    background: var(--bg-light);
    color: var(--text-secondary);
}

.skip-btn:active {
    background: var(--border);
}

/* Medication Adherence Summary - Requirement 15.7 */
.medication-adherence-summary {
    margin-top: var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.adherence-summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.adherence-summary-header i {
    color: var(--primary);
}

.adherence-summary-stats {
    display: flex;
    justify-content: space-around;
}

.adherence-stat {
    text-align: center;
}

.adherence-stat-value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.adherence-stat-value.success {
    color: var(--success);
}

.adherence-stat-value.warning {
    color: var(--warning);
}

.adherence-stat-value.danger {
    color: var(--danger);
}

.adherence-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Medication Modal */
.medication-modal .modal-body {
    padding: var(--space-4);
}

.medication-modal .form-group {
    margin-bottom: var(--space-4);
}

.medication-modal .form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.medication-modal .form-label .required {
    color: var(--danger);
}

.medication-modal .form-input,
.medication-modal .form-select,
.medication-modal .form-textarea {
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-white);
    transition: border-color 0.2s;
}

.medication-modal .form-input:focus,
.medication-modal .form-select:focus,
.medication-modal .form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(17, 176, 166, 0.1);
}

.reminder-times-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.time-input {
    width: auto;
    min-width: 100px;
}

.add-time-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-light);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.add-time-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* Medication Reminders Empty State */
.medication-reminders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.medication-reminders-empty-icon {
    width: 100px;
    height: 100px;
    background: #FDF4FF;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.medication-reminders-empty-icon i {
    font-size: 48px;
    color: #EC4899;
}

.medication-reminders-empty-icon.error {
    background: var(--danger-light);
}

.medication-reminders-empty-icon.error i {
    color: var(--danger);
}

.medication-reminders-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.medication-reminders-empty-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    max-width: 280px;
}

/* Medication Reminders Skeleton */
.medication-reminders-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.medication-reminder-skeleton {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-xl);
}

.skeleton-pill-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
}

.medication-reminder-skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Responsive */
@media (min-width: 640px) {
    .medication-reminders-container {
        max-width: 600px;
        margin: 0 auto;
    }
}


/* ==================== Enhanced Bottom Navigation ==================== */
/* Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6 */

/* Bottom Navigation Container */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-2) 0;
    /* Safe area support for iOS (Requirement 9.6) */
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: var(--z-fixed);
    min-height: calc(56px + env(safe-area-inset-bottom, 0px));
    /* Smooth show/hide transition */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hidden state for bottom nav */
.bottom-nav.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* Navigation Item (Requirement 9.3 - icon and label) */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Touch target minimum 44px (Requirement 1.5) */
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: var(--space-1) var(--space-3);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.15s ease;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Navigation Icon */
.nav-item i {
    font-size: 20px;
    margin-bottom: 3px;
    transition: transform 0.2s ease;
}

/* Navigation Label */
.nav-item .nav-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* Active State (Requirement 9.2 - highlight active item) */
.nav-item.active {
    color: var(--primary);
}

.nav-item.active i {
    transform: scale(1.1);
}

/* Pressed/Click Feedback */
.nav-item:active,
.nav-item.nav-item-pressed {
    transform: scale(0.92);
}

/* Hover state for desktop */
@media (hover: hover) {
    .nav-item:hover:not(.active) {
        color: var(--text-secondary);
    }
}

/* Cart Badge (Requirement 9.4 - badge showing item count) */
.nav-badge {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(14px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-badge.hidden {
    transform: translateX(14px) scale(0);
    opacity: 0;
}

/* Badge bounce animation for new items */
.nav-badge.badge-bounce {
    animation: badge-bounce 0.3s ease;
}

@keyframes badge-bounce {
    0% {
        transform: translateX(14px) scale(1);
    }

    50% {
        transform: translateX(14px) scale(1.3);
    }

    100% {
        transform: translateX(14px) scale(1);
    }
}

/* ==================== Page Transitions ==================== */
/* Requirements: 9.5 - smooth page transitions (slide or fade) */

/* App Content with transitions */
.app-content {
    flex: 1;
    /* Account for bottom nav + safe area */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    /* Enable smooth transitions */
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
}

/* Page Exit Animation (slide left + fade) */
.app-content.page-exit {
    opacity: 0;
    transform: translateX(-15px);
}

/* Page Enter Animation (slide from right + fade) */
.app-content.page-enter {
    animation: page-enter 0.25s ease forwards;
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateX(15px);
    }

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

/* Alternative fade transition */
.app-content.page-fade-exit {
    opacity: 0;
}

.app-content.page-fade-enter {
    animation: page-fade-enter 0.2s ease forwards;
}

@keyframes page-fade-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Slide up transition (for modals/overlays) */
.app-content.page-slide-up-enter {
    animation: page-slide-up 0.3s ease forwards;
}

@keyframes page-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ==================== Safe Area Support ==================== */
/* Requirements: 9.6 - account for iOS safe area insets */

/* Safe area padding utilities */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left, 0px);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right, 0px);
}

.safe-area-x {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.safe-area-y {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Full safe area padding */
.safe-area-all {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* App shell with safe areas */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    /* Account for safe areas */
    padding-top: env(safe-area-inset-top, 0px);
}

/* Header with safe area */
.app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--bg-white);
    padding: var(--space-4);
    /* Safe area already handled by app-shell padding-top */
    box-shadow: var(--shadow-sm);
}

/* ==================== Navigation Visibility States ==================== */

/* Hide nav during checkout or video call */
.app-shell.hide-nav .bottom-nav {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.app-shell.hide-nav .app-content {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Compact nav for landscape mode */
@media (max-height: 500px) and (orientation: landscape) {
    .bottom-nav {
        padding: var(--space-1) 0;
        min-height: 48px;
    }

    .nav-item {
        min-height: 40px;
        padding: var(--space-1) var(--space-2);
    }

    .nav-item i {
        font-size: 18px;
        margin-bottom: 1px;
    }

    .nav-item .nav-label {
        font-size: 9px;
    }

    .app-content {
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==================== Reduced Motion Support ==================== */

@media (prefers-reduced-motion: reduce) {

    .app-content,
    .nav-item,
    .nav-item i,
    .nav-badge,
    .bottom-nav {
        transition: none;
        animation: none;
    }

    .app-content.page-enter,
    .app-content.page-fade-enter,
    .app-content.page-slide-up-enter {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ==================== Print Styles ==================== */

@media print {
    .bottom-nav {
        display: none !important;
    }

    .app-content {
        padding-bottom: 0 !important;
    }
}


/* ==================== AI Chat Interface ==================== */
/* Requirements: 7.1, 7.2 - Chat interface with quick symptom selection */

.ai-chat-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-light);
}

/* AI Chat Header */
.ai-chat-header {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
    color: white;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.ai-chat-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ai-chat-back-btn,
.ai-chat-menu-btn {
    width: 40px;
    height: 40px;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ai-chat-back-btn:active,
.ai-chat-menu-btn:active {
    background: rgba(255, 255, 255, 0.3);
}

.ai-chat-header-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ai-chat-avatar {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ai-chat-header-text {
    flex: 1;
}

.ai-chat-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.ai-chat-status {
    font-size: 12px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
}

.ai-chat-status-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: var(--radius-full);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* AI Chat Messages Container */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    padding-bottom: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* AI Chat Message */
.ai-chat-message {
    display: flex;
    gap: var(--space-2);
    animation: chat-message-in 0.3s ease;
}

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

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

.ai-chat-message-ai {
    align-items: flex-start;
}

.ai-chat-message-user {
    flex-direction: row-reverse;
}

.ai-chat-message-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

/* AI Chat Bubble */
.ai-chat-bubble {
    max-width: 85%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.ai-chat-bubble-ai {
    background: var(--bg-white);
    color: var(--text-primary);
    border-top-left-radius: var(--radius-sm);
}

.ai-chat-bubble-user {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: white;
    border-top-right-radius: var(--radius-sm);
}

.ai-chat-bubble-content {
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

/* AI Chat Typing Indicator */
.ai-chat-typing-indicator {
    display: flex;
    gap: 4px;
    padding: var(--space-1) 0;
}

.ai-chat-typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--text-muted);
    border-radius: var(--radius-full);
    animation: typing-bounce 1.4s infinite;
}

.ai-chat-typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-chat-typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-bounce {

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

    30% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

/* AI Chat Quick Replies */
.ai-chat-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.ai-chat-quick-reply-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--primary-light);
    color: var(--primary);
    border: none;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: var(--touch-target-min);
}

.ai-chat-quick-reply-btn:active {
    background: var(--primary);
    color: white;
}

/* AI Chat Quick Symptoms Section */
.ai-chat-quick-symptoms {
    padding: var(--space-4);
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
}

.ai-chat-quick-symptoms.hidden {
    display: none;
}

.ai-chat-quick-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    text-align: center;
}

.ai-chat-symptom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.ai-chat-symptom-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg-light);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: var(--touch-target-min);
}

.ai-chat-symptom-btn i {
    font-size: 18px;
    color: var(--primary);
}

.ai-chat-symptom-btn:active {
    background: var(--primary-light);
    border-color: var(--primary);
    transform: scale(0.95);
}

.ai-chat-symptom-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.ai-chat-symptom-btn.selected i {
    color: white;
}

/* AI Chat Input Area */
.ai-chat-input-area {
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(var(--space-3), var(--safe-area-bottom));
}

.ai-chat-input-container {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ai-chat-attach-btn {
    width: 44px;
    height: 44px;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    background: var(--bg-gray);
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-chat-attach-btn:active {
    background: var(--border);
}

.ai-chat-input {
    flex: 1;
    height: 44px;
    padding: 0 var(--space-4);
    background: var(--bg-gray);
    border: none;
    border-radius: var(--radius-full);
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
}

.ai-chat-input::placeholder {
    color: var(--text-muted);
}

.ai-chat-input:focus {
    background: var(--bg-light);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.ai-chat-send-btn {
    width: 44px;
    height: 44px;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-chat-send-btn:active {
    transform: scale(0.95);
}

.ai-chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* AI Chat Modal */
.ai-chat-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}

.ai-chat-modal.hidden {
    display: none;
}

.ai-chat-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.ai-chat-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    padding: var(--space-6);
    padding-bottom: max(var(--space-6), var(--safe-area-bottom));
    animation: modal-slide-up 0.3s ease;
}

.ai-chat-modal-handle {
    width: 48px;
    height: 4px;
    background: var(--border);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-6);
}

/* AI Chat Attach Menu */
.ai-chat-attach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.ai-chat-attach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
}

.ai-chat-attach-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ai-chat-attach-item span {
    font-size: 11px;
    color: var(--text-secondary);
}

/* AI Chat Menu Dropdown */
.ai-chat-menu-dropdown {
    position: absolute;
    top: calc(60px + var(--safe-area-top));
    right: var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    min-width: 200px;
    animation: menu-fade-in 0.2s ease;
}

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

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

.ai-chat-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    min-height: var(--touch-target-min);
}

.ai-chat-menu-item:active {
    background: var(--bg-gray);
}

.ai-chat-menu-item i {
    width: 20px;
    color: var(--text-muted);
}

.ai-chat-menu-item-danger {
    color: var(--danger);
}

.ai-chat-menu-item-danger i {
    color: var(--danger);
}

.ai-chat-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-1) 0;
}

/* AI Chat Emergency Alert */
.ai-chat-emergency-alert {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.ai-chat-emergency-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    max-width: 320px;
    width: 100%;
    text-align: center;
    animation: emergency-pop 0.3s ease;
}

@keyframes emergency-pop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ai-chat-emergency-icon {
    width: 64px;
    height: 64px;
    background: var(--danger-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    animation: pulse 2s infinite;
}

.ai-chat-emergency-icon i {
    font-size: 28px;
    color: var(--danger);
}

.ai-chat-emergency-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.ai-chat-emergency-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.ai-chat-emergency-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ai-chat-emergency-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--touch-target-min);
    text-decoration: none;
}

.ai-chat-emergency-btn-danger {
    background: var(--danger);
    color: white;
}

.ai-chat-emergency-btn-secondary {
    background: var(--bg-gray);
    color: var(--text-primary);
}

/* AI Chat Product Recommendations */
.ai-chat-products {
    padding: var(--space-3) 0;
}

.ai-chat-products-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    padding-left: 40px;
}

.ai-chat-products-scroll {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: var(--space-2) 0;
    padding-left: 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ai-chat-products-scroll::-webkit-scrollbar {
    display: none;
}

.ai-chat-product-card {
    flex-shrink: 0;
    width: 140px;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ai-chat-product-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    background: var(--bg-gray);
}

.ai-chat-product-info {
    padding: var(--space-2);
}

.ai-chat-product-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-chat-product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

/* AI Chat Product Actions Container */
.ai-chat-product-actions {
    display: flex;
    gap: var(--space-2);
    width: 100%;
}

.ai-chat-product-detail-btn {
    flex: 1;
    padding: var(--space-2);
    background: var(--bg-gray);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.ai-chat-product-detail-btn:active {
    background: var(--border);
}

.ai-chat-product-detail-btn i {
    font-size: 12px;
}

.ai-chat-product-add-btn {
    flex: 1;
    padding: var(--space-2);
    background: var(--primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 12px;
    cursor: pointer;
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ai-chat-product-add-btn:active {
    background: var(--primary-dark);
}

/* Hide bottom nav on AI chat page */
.ai-chat-page~.bottom-nav,
body:has(.ai-chat-page) .bottom-nav {
    display: none;
}

/* AI Chat Message Animations - Requirements: 7.3 */
.ai-chat-message-entering {
    opacity: 0;
    transform: translateY(10px);
}

.ai-chat-message-entered {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* AI Chat Products Animation */
.ai-chat-products-entering {
    opacity: 0;
    transform: translateY(10px);
}

.ai-chat-products-entered {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Enhanced Product Card Styles - Requirements: 7.4 */
.ai-chat-product-card {
    position: relative;
}

.ai-chat-product-rx-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 1;
}

.ai-chat-product-sale-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #F59E0B;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 1;
}

.ai-chat-product-price-container {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.ai-chat-product-original-price {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.ai-chat-product-add-btn-success {
    background: var(--success) !important;
}

.ai-chat-product-add-btn[data-rx="true"] {
    background: var(--secondary);
}

.ai-chat-product-add-btn[data-rx="true"]:active {
    background: var(--secondary-dark);
}

/* Pharmacist Suggestion Card - Requirements: 7.6 */
.ai-chat-pharmacist-suggestion {
    padding: var(--space-3);
}

.ai-chat-suggestion-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #93C5FD;
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.ai-chat-suggestion-icon {
    width: 48px;
    height: 48px;
    background: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-chat-suggestion-icon i {
    font-size: 20px;
    color: white;
}

.ai-chat-suggestion-content {
    flex: 1;
}

.ai-chat-suggestion-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.ai-chat-suggestion-content p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.ai-chat-suggestion-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    min-height: var(--touch-target-min);
}

.ai-chat-suggestion-btn:active {
    background: var(--secondary-dark);
}

/* Prescription Prompt Modal */
.ai-chat-rx-prompt {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.ai-chat-rx-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    max-width: 320px;
    width: 100%;
    text-align: center;
    animation: slideUp 0.3s ease;
}

.ai-chat-rx-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.ai-chat-rx-icon i {
    font-size: 28px;
    color: #F59E0B;
}

.ai-chat-rx-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.ai-chat-rx-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.5;
}

.ai-chat-rx-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ai-chat-rx-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-height: var(--touch-target-min);
}

.ai-chat-rx-btn-primary {
    background: var(--secondary);
    color: white;
}

.ai-chat-rx-btn-primary:active {
    background: var(--secondary-dark);
}

.ai-chat-rx-btn-secondary {
    background: var(--bg-gray);
    color: var(--text-primary);
}

.ai-chat-rx-btn-secondary:active {
    background: var(--border);
}

/* Enhanced Products Label */
.ai-chat-products-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ai-chat-products-label i {
    color: var(--primary);
}


/* Enhanced Emergency Alert Styles - Requirements: 7.5 */
.ai-chat-emergency-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

.ai-chat-emergency-icon-pulse {
    animation: emergencyPulse 1.5s ease-in-out infinite;
}

@keyframes emergencyPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }
}

.ai-chat-emergency-body {
    margin-bottom: var(--space-4);
}

.ai-chat-emergency-symptoms {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-3);
    text-align: left;
}

.ai-chat-emergency-symptoms-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
    margin: 0 0 var(--space-2) 0;
}

.ai-chat-emergency-symptoms-list {
    margin: 0;
    padding-left: var(--space-4);
    font-size: 13px;
    color: var(--text-primary);
}

.ai-chat-emergency-symptoms-list li {
    margin-bottom: var(--space-1);
}

.ai-chat-emergency-btn {
    width: 100%;
    text-decoration: none;
}

.ai-chat-emergency-btn span {
    flex: 1;
}

.ai-chat-emergency-btn-warning {
    background: #F59E0B;
    color: white;
}

.ai-chat-emergency-btn-warning:active {
    background: #D97706;
}

.ai-chat-emergency-btn-primary {
    background: var(--secondary);
    color: white;
}

.ai-chat-emergency-btn-primary:active {
    background: var(--secondary-dark);
}

.ai-chat-emergency-disclaimer {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    margin: var(--space-4) 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.ai-chat-emergency-disclaimer i {
    color: var(--text-secondary);
}

/* Enhanced Emergency Alert Styles - Requirements: 3.2, 3.3 */
/* Critical vs Warning severity styling */
.ai-chat-emergency-critical {
    border: 3px solid var(--danger);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
}

.ai-chat-emergency-warning-level {
    border: 3px solid var(--warning);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

/* Icon styling for different severity levels */
.ai-chat-emergency-icon-critical {
    background: var(--danger-light);
}

.ai-chat-emergency-icon-critical i {
    color: var(--danger);
}

.ai-chat-emergency-icon-warning {
    background: var(--warning-light);
}

.ai-chat-emergency-icon-warning i {
    color: var(--warning);
}

/* Title styling for different severity levels */
.ai-chat-emergency-title-critical {
    color: var(--danger);
}

.ai-chat-emergency-title-warning {
    color: var(--warning);
}

/* Symptoms box styling for different severity levels */
.ai-chat-emergency-symptoms-critical {
    background: #FEF2F2;
    border: 1px solid #FECACA;
}

.ai-chat-emergency-symptoms-critical .ai-chat-emergency-symptoms-label {
    color: var(--danger);
}

.ai-chat-emergency-symptoms-warning {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
}

.ai-chat-emergency-symptoms-warning .ai-chat-emergency-symptoms-label {
    color: var(--warning);
}

/* Emergency contacts section */
.ai-chat-emergency-contacts {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
}

.ai-chat-emergency-contacts-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.ai-chat-emergency-contacts-label i {
    color: var(--danger);
    animation: phoneRing 1s ease-in-out infinite;
}

@keyframes phoneRing {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-10deg);
    }
}

/* Enhanced call button styling */
.ai-chat-emergency-btn-call {
    flex-direction: column;
    padding: var(--space-3) var(--space-4);
    min-height: 60px;
}

.ai-chat-emergency-btn-call span {
    font-size: 16px;
    font-weight: 700;
}

.ai-chat-emergency-btn-call small {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.9;
}

.ai-chat-emergency-btn-call i {
    font-size: 18px;
}

/* Info button for 1367 */
.ai-chat-emergency-btn-info {
    background: #3B82F6;
    color: white;
}

.ai-chat-emergency-btn-info:active {
    background: #2563EB;
}

/* Danger button animation for critical alerts */
.ai-chat-emergency-critical .ai-chat-emergency-btn-danger {
    animation: dangerPulse 2s ease-in-out infinite;
}

@keyframes dangerPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
}

/* Responsive adjustments for emergency alert */
@media (max-width: 360px) {
    .ai-chat-emergency-content {
        padding: var(--space-4);
    }

    .ai-chat-emergency-btn-call {
        min-height: 54px;
    }

    .ai-chat-emergency-btn-call span {
        font-size: 14px;
    }
}


/* ==================== Health Profile Page ====================
   Requirements: 18.1, 18.2, 18.3, 18.4, 18.5, 18.6, 18.7, 18.10, 18.12
   - Display sections for personal info, medical history, allergies, medications (18.1)
   - Show completion percentage (18.10)
   - Show last updated date and edit buttons (18.12)
==================== */

.health-profile-page {
    padding-bottom: calc(var(--space-16) + var(--safe-area-bottom));
}

/* Completion Card Header */
.health-profile-header {
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.completion-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
}

.completion-circle {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.circular-chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 3;
}

.circle {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.completion-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.completion-info {
    flex: 1;
}

.completion-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--space-1);
}

.completion-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-1);
}

.last-updated {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

/* Health Sections */
.health-section {
    margin: var(--space-3) var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.health-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    cursor: pointer;
    transition: background 0.2s;
}

.health-section .section-header:active {
    background: var(--bg-light);
}

.health-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.health-section .section-title i {
    width: 24px;
    text-align: center;
    color: var(--primary);
}

.health-section .section-title .badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.health-section .section-title .badge-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.health-section .section-title .badge-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.health-section .section-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.health-section .btn-edit,
.health-section .btn-add {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.health-section .btn-edit:active,
.health-section .btn-add:active {
    background: var(--border);
    transform: scale(0.95);
}

.health-section .btn-add {
    background: var(--primary-light);
    color: var(--primary);
}

.health-section .section-toggle {
    color: var(--text-muted);
    transition: transform 0.3s;
}

.health-section.expanded .section-toggle {
    transform: rotate(180deg);
}

.health-section .section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.health-section.expanded .section-content {
    max-height: 1000px;
    padding: 0 var(--space-4) var(--space-4);
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.info-item {
    background: var(--bg-light);
    padding: var(--space-3);
    border-radius: var(--radius-md);
}

.info-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Conditions List */
.conditions-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.condition-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--warning-light);
    color: #92400E;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
}

.condition-tag i {
    font-size: 12px;
}

/* Allergies List */
.allergies-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.allergy-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--warning);
}

.allergy-item.severity-mild {
    border-left-color: var(--interaction-mild);
}

.allergy-item.severity-moderate {
    border-left-color: var(--interaction-moderate);
}

.allergy-item.severity-severe {
    border-left-color: var(--interaction-severe);
    background: #FEF2F2;
}

.allergy-info {
    flex: 1;
}

.allergy-drug {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.allergy-drug i {
    color: var(--warning);
}

.allergy-item.severity-severe .allergy-drug i {
    color: var(--danger);
}

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

.allergy-details {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
}

.reaction-type {
    color: var(--text-secondary);
}

.severity-badge {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.severity-badge.warning {
    background: #FEF3C7;
    color: #92400E;
}

.severity-badge.orange {
    background: #FFEDD5;
    color: #9A3412;
}

.severity-badge.danger {
    background: #FEE2E2;
    color: #991B1B;
}

.allergy-notes {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

.btn-remove {
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.btn-remove:hover,
.btn-remove:active {
    background: var(--danger-light);
    color: var(--danger);
}

/* Medications List */
.medications-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.medication-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.medication-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.medication-info {
    flex: 1;
    min-width: 0;
}

.medication-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.medication-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--text-secondary);
}

.medication-details span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.medication-details i {
    font-size: 10px;
    color: var(--text-muted);
}

.medication-notes {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.medication-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.btn-edit-sm {
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.btn-edit-sm:hover,
.btn-edit-sm:active {
    background: var(--primary-light);
    color: var(--primary);
}

/* Privacy Notice */
.privacy-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-4);
    padding: var(--space-4);
    background: var(--info-light);
    border-radius: var(--radius-lg);
    font-size: 12px;
    color: #1E40AF;
}

.privacy-notice i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Empty State */
.health-section .empty-state {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-4);
}

.health-section .empty-state a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

/* Health Profile Modal Styles */
.health-profile-page .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

.health-profile-page .modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    background: #FFFFFF;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
}

.health-profile-page .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.health-profile-page .modal-header h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 17px;
    font-weight: 600;
    color: #1F2937;
}

.health-profile-page .modal-header h3 i {
    color: var(--primary);
}

.health-profile-page .modal-header.warning h3 {
    color: var(--warning);
}

.health-profile-page .modal-header.warning h3 i {
    color: var(--warning);
}

.health-profile-page .modal-close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.health-profile-page .modal-body {
    padding: var(--space-4);
    overflow-y: auto;
    max-height: calc(85vh - 140px);
    background: #FFFFFF;
}

/* Modal Footer */
.health-profile-page .modal-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    position: sticky;
    bottom: 0;
}

.health-profile-page .modal-footer .btn {
    flex: 1;
    min-height: var(--touch-target-min);
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-lg);
}

.health-profile-page .modal-footer .btn-cancel {
    background: var(--bg-gray);
    color: var(--text-secondary);
    border: none;
}

.health-profile-page .modal-footer .btn-save {
    background: var(--primary);
    color: white;
    border: none;
}

/* Form Styles */
.health-profile-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.health-profile-page .form-group {
    margin-bottom: var(--space-4);
}

.health-profile-page .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: var(--space-2);
}

.health-profile-page .form-group input,
.health-profile-page .form-group select,
.health-profile-page .form-group textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1.5px solid #D1D5DB;
    border-radius: var(--radius-md);
    font-size: 16px;
    color: #1F2937;
    background: #F9FAFB;
    transition: border-color 0.2s, background 0.2s;
}

.health-profile-page .form-group input:focus,
.health-profile-page .form-group select:focus,
.health-profile-page .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(17, 176, 166, 0.1);
}

.health-profile-page .form-group input::placeholder {
    color: #9CA3AF;
}

.health-profile-page .form-group input.disabled {
    background: var(--bg-light);
    color: var(--text-muted);
}

.health-profile-page .form-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* Checkbox Grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-item:has(input:checked) {
    background: var(--primary-light);
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.checkbox-label {
    font-size: 13px;
    color: var(--text-primary);
}

/* Autocomplete */
.autocomplete-wrapper {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.autocomplete-results.hidden {
    display: none;
}

.autocomplete-item {
    padding: var(--space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s;
}

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

.autocomplete-item:hover,
.autocomplete-item:active {
    background: var(--bg-light);
}

.autocomplete-item .drug-name {
    font-weight: 500;
    color: var(--text-primary);
}

.autocomplete-item .generic-name {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.autocomplete-item.no-results {
    color: var(--text-muted);
    cursor: default;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    position: sticky;
    bottom: 0;
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    margin-bottom: calc(-1 * var(--space-4));
}

.form-actions .btn {
    flex: 1;
    min-height: var(--touch-target-min);
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
}

.form-actions .btn-cancel,
.form-actions .btn-secondary {
    background: var(--bg-gray);
    color: var(--text-secondary);
}

.form-actions .btn-primary,
.form-actions .btn-save {
    background: var(--primary);
    color: white;
}

.form-actions .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* Interaction Warning Modal */
.interaction-warning-modal .warning-intro {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.interaction-warning-modal .interactions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.interaction-warning-modal .interaction-item {
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--warning);
}

.interaction-warning-modal .interaction-drugs {
    font-size: 14px;
    margin-bottom: var(--space-2);
}

.interaction-warning-modal .interaction-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.interaction-warning-modal .interaction-recommendation {
    font-size: 12px;
    color: var(--info);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.interaction-warning-modal .interaction-recommendation i {
    margin-top: 2px;
}

/* Health Profile Loading Skeleton */
.health-profile-loading {
    padding: var(--space-4);
}

.skeleton-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
}

.skeleton-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.skeleton-text-group {
    flex: 1;
}

.skeleton-section {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.skeleton-block {
    height: 80px;
    margin-top: var(--space-3);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    to {
        transform: translateY(0);
    }
}


/* ==================== Profile Page ==================== */
.profile-page {
    padding: var(--space-4);
    padding-bottom: calc(80px + var(--safe-area-bottom));
    min-height: 100vh;
    background: var(--bg-light);
}

.profile-header {
    text-align: center;
    padding: var(--space-6) 0;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    margin-bottom: var(--space-3);
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.profile-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-menu-item:active {
    transform: scale(0.98);
    background: var(--bg-gray);
}

.profile-menu-item i:first-child {
    width: 24px;
    font-size: 1.25rem;
}

.profile-menu-item span {
    flex: 1;
    font-size: 1rem;
    color: var(--text-primary);
}

.profile-menu-item i:last-child {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ==================== Settings Page ==================== */
.settings-page {
    padding-bottom: calc(80px + var(--safe-area-bottom));
    min-height: 100vh;
    background: var(--bg-light);
}

.settings-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.settings-header .page-title {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.settings-header .header-spacer {
    width: 40px;
}

.settings-content {
    padding: var(--space-4);
}

.settings-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--text-muted);
}

.settings-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-3);
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.settings-section {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.settings-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.settings-section-title i {
    color: var(--primary);
}

.settings-form .form-group {
    margin-bottom: var(--space-4);
}

.settings-form .form-group:last-child {
    margin-bottom: 0;
}

.settings-form .form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.settings-form .form-group input,
.settings-form .form-group select,
.settings-form .form-group textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-form .form-group input:focus,
.settings-form .form-group select:focus,
.settings-form .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

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

.settings-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.settings-actions {
    padding-top: var(--space-2);
}

.settings-actions .btn-block {
    width: 100%;
    padding: var(--space-4);
    font-size: 1rem;
    font-weight: 600;
}

/* ==================== Product Detail Page ==================== */
.product-detail-page {
    padding-bottom: calc(80px + var(--safe-area-bottom));
    min-height: 100vh;
    background: var(--bg-white);
}

.product-detail-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    padding: var(--space-4);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.product-detail-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--bg-gray);
}

.product-detail-info {
    padding: var(--space-4);
}

.product-detail-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.product-detail-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-4);
}

.product-detail-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.product-detail-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + var(--safe-area-bottom));
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: var(--space-3);
}

/* ==================== Appointments Page ==================== */
.appointments-page {
    padding: var(--space-4);
    padding-bottom: calc(80px + var(--safe-area-bottom));
    min-height: 100vh;
    background: var(--bg-light);
}

.appointments-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-4);
}

.appointment-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.appointment-date {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.appointment-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.appointment-status {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.appointment-status.pending {
    background: var(--warning-light);
    color: var(--warning);
}

.appointment-status.confirmed {
    background: var(--success-light);
    color: var(--success);
}

/* ==================== Redeem Points Page ==================== */
.redeem-page {
    padding: var(--space-4);
    padding-bottom: calc(80px + var(--safe-area-bottom));
    min-height: 100vh;
    background: var(--bg-light);
}

.redeem-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-4);
}

.points-balance-card {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    color: white;
    text-align: center;
    margin-bottom: var(--space-6);
}

.points-balance-label {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: var(--space-2);
}

.points-balance-value {
    font-size: 2.5rem;
    font-weight: 700;
}

.reward-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--space-3);
}

.reward-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-gray);
}

.reward-info {
    flex: 1;
}

.reward-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.reward-points {
    font-size: 0.875rem;
    color: var(--primary);
    font-weight: 600;
}


/* ==================== Product Detail Modal ==================== */
/* Modal like old liff-product-detail.php */

.product-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.product-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.product-modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--bg-white);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.product-detail-modal.show .product-modal-content {
    transform: translateY(0);
}

.product-modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: var(--space-3);
    z-index: 10;
}

.product-modal-close,
.product-modal-wishlist {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s;
}

.product-modal-close:active,
.product-modal-wishlist:active {
    transform: scale(0.95);
}

.product-modal-close i {
    font-size: 18px;
    color: var(--text-secondary);
}

.product-modal-wishlist i {
    font-size: 18px;
    color: var(--text-muted);
}

.product-modal-wishlist.active i,
.product-modal-wishlist i.fas {
    color: var(--danger);
}

.product-modal-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100px;
}

.product-modal-loading {
    padding: var(--space-4);
}

.product-modal-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-gray);
    overflow: hidden;
}

.product-modal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-modal-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
}

.product-modal-badge.sale {
    background: var(--danger);
    color: white;
}

.product-modal-info {
    padding: var(--space-4);
}

.product-modal-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
}

.product-modal-generic {
    font-size: 14px;
    color: var(--secondary);
    margin: 0 0 var(--space-3);
}

.product-modal-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.product-modal-price .price-current {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

.product-modal-price .price-current.sale {
    color: var(--danger);
}

.product-modal-price .price-original {
    font-size: 16px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.product-modal-price .price-unit {
    font-size: 14px;
    color: var(--text-secondary);
}

.product-modal-stock {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: var(--space-3);
}

.product-modal-stock.in {
    background: var(--success-light);
    color: var(--success);
}

.product-modal-stock.low {
    background: var(--warning-light);
    color: var(--warning);
}

.product-modal-stock.out {
    background: var(--danger-light);
    color: var(--danger);
}

.product-modal-manufacturer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.product-modal-manufacturer i {
    color: var(--text-muted);
}

.product-modal-section {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.product-modal-section h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.product-modal-section h3 i {
    color: var(--primary);
}

.product-modal-section p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}

.product-modal-sku {
    font-size: 12px;
    color: var(--text-muted);
    font-family: monospace;
}

.product-modal-sku span {
    color: var(--text-secondary);
}

.product-modal-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + var(--safe-area-bottom));
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.product-modal-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-modal-qty .qty-btn {
    width: 40px;
    height: 44px;
    border: none;
    background: var(--bg-light);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.product-modal-qty .qty-btn:active {
    background: var(--border);
}

.product-modal-qty input {
    width: 50px;
    height: 44px;
    border: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
}

.product-modal-add-btn {
    flex: 1;
    min-height: var(--touch-target-min);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: transform 0.15s, opacity 0.15s;
}

.product-modal-add-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.product-modal-add-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.product-modal-add-btn .btn-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Desktop Modal */
@media (min-width: 640px) {
    .product-detail-modal {
        align-items: center;
    }

    .product-modal-content {
        max-height: 85vh;
        border-radius: var(--radius-2xl);
        margin: var(--space-4);
    }
}


/* ==================== Appointments Page ==================== */
/* เหมือนระบบเก่า liff-appointment.php */

.appointments-page {
    min-height: 100vh;
    background: var(--bg-light);
    padding-bottom: calc(80px + var(--safe-area-bottom));
}

.appointments-header {
    display: flex;
    align-items: center;
    padding: var(--space-4);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Appointment Tabs */
.appointment-tabs {
    display: flex;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-4);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.appointment-tab {
    flex: 1;
    padding: var(--space-3);
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.appointment-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Step Indicator */
.appointment-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    gap: var(--space-2);
}

.appointment-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.appointment-steps .step-number {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg-gray);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.2s;
}

.appointment-steps .step.active .step-number {
    background: var(--primary);
    color: white;
}

.appointment-steps .step.completed .step-number {
    background: var(--success);
    color: white;
}

.appointment-steps .step-label {
    font-size: 11px;
    color: var(--text-muted);
}

.appointment-steps .step.active .step-label {
    color: var(--primary);
}

.appointment-steps .step-line {
    width: 40px;
    height: 2px;
    background: var(--border);
    margin-bottom: 20px;
}

/* Appointment Step Content */
.appointment-step-content {
    padding: var(--space-4);
}

/* Pharmacist List */
.pharmacist-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pharmacist-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.pharmacist-card:active {
    transform: scale(0.98);
}

.pharmacist-card.skeleton-card {
    cursor: default;
}

.pharmacist-avatar {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.pharmacist-avatar img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background: var(--bg-gray);
}

.pharmacist-rating {
    position: absolute;
    bottom: -4px;
    left: -4px;
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 1;
    white-space: nowrap;
}

.pharmacist-rating i {
    color: #FCD34D;
    font-size: 10px;
}

.pharmacist-info {
    flex: 1;
    min-width: 0;
}

.pharmacist-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.pharmacist-specialty {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-1);
}

.pharmacist-license {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}

.pharmacist-license i {
    margin-right: 4px;
}

.pharmacist-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pharmacist-fee {
    font-size: 18px;
    font-weight: 700;
    color: var(--danger);
}

.pharmacist-duration {
    font-size: 13px;
    color: var(--text-muted);
}

.pharmacist-book-btn {
    align-self: center;
}

/* Selected Pharmacist Info */
.selected-pharmacist-info {
    margin-bottom: var(--space-4);
}

.selected-pharmacist {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.selected-pharmacist img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.selected-pharmacist h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.selected-pharmacist p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* Date Selection */
.date-selection,
.time-selection {
    margin-bottom: var(--space-4);
}

.date-selection h3,
.time-selection h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--space-3);
}

.date-list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
}

.date-list::-webkit-scrollbar {
    display: none;
}

.date-btn {
    flex-shrink: 0;
    width: 64px;
    padding: var(--space-3) var(--space-2);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}

.date-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.date-btn .date-day {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.date-btn.selected .date-day {
    color: rgba(255, 255, 255, 0.8);
}

.date-btn .date-num {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.date-btn .date-month {
    display: block;
    font-size: 11px;
}

/* Time Slots */
.time-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.time-slot-btn {
    padding: var(--space-3);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.time-slot-btn:hover:not(:disabled) {
    border-color: var(--primary);
}

.time-slot-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.time-slot-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.no-slots-msg {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
}

/* Confirm Card */
.confirm-card,
.symptoms-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.confirm-card h3,
.symptoms-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--space-3);
}

.confirm-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.confirm-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.confirm-item i {
    width: 32px;
    height: 32px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.confirm-item label {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

.confirm-item span {
    font-size: 14px;
    font-weight: 500;
}

.symptoms-card textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    resize: none;
}

/* My Appointments Modal */
.appointments-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-light);
    z-index: var(--z-modal);
    overflow-y: auto;
}

.appointments-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
}

.appointments-modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.my-appointments-list {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.my-appointment-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.my-appointment-card .appointment-datetime {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.my-appointment-card .appointment-datetime i {
    margin-right: var(--space-2);
}

.my-appointment-card .appointment-pharmacist {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.my-appointment-card .appointment-pharmacist img {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.my-appointment-card .appointment-pharmacist span {
    font-weight: 600;
}

.my-appointment-card .appointment-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.appointment-status {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.appointment-status.pending {
    background: var(--warning-light);
    color: var(--warning);
}

.appointment-status.confirmed {
    background: var(--success-light);
    color: var(--success);
}

.appointment-status.completed {
    background: var(--info-light);
    color: var(--info);
}

.appointment-status.cancelled {
    background: var(--danger-light);
    color: var(--danger);
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    justify-content: center;
    padding: var(--space-8);
    color: var(--primary);
    font-size: 24px;
}

/* Error Text */
.error-text {
    text-align: center;
    color: var(--danger);
    padding: var(--space-4);
}


/* ==================== Register Page ==================== */
.register-page {
    min-height: 100vh;
    background: var(--bg-light);
    padding-bottom: calc(100px + var(--safe-area-bottom));
}

.register-header {
    display: flex;
    align-items: center;
    padding: var(--space-4);
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.register-form {
    padding: var(--space-4);
}

.register-profile-preview {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.register-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 3px solid var(--primary);
}

.register-profile-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.register-profile-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0;
}

.form-section {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-light);
}

.form-section-title .required {
    color: var(--error);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.form-group {
    margin-bottom: var(--space-3);
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.form-group label .required {
    color: var(--error);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--text-primary);
    background: var(--bg-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(17, 176, 166, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

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

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--primary);
}

.checkbox-label a {
    color: var(--primary);
    text-decoration: underline;
}

.btn-lg {
    padding: var(--space-4);
    font-size: 18px;
}

/* Appointments Section Title */
.appointments-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: var(--space-4) 0 var(--space-2);
    padding: 0 var(--space-2);
}

.appointments-section-title:first-child {
    margin-top: 0;
}

/* My Appointment Card */
.my-appointment-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.my-appointment-card .appointment-datetime {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.my-appointment-card .appointment-pharmacist {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.my-appointment-card .appointment-pharmacist img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.my-appointment-card .appointment-pharmacist span {
    font-weight: 600;
    color: var(--text-primary);
}

.my-appointment-card .appointment-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.my-appointment-card .appointment-status {
    font-size: 12px;
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.my-appointment-card .appointment-status.confirmed {
    background: var(--success-light);
    color: var(--success);
}

.my-appointment-card .appointment-status.pending {
    background: var(--warning-light);
    color: var(--warning);
}

.my-appointment-card .appointment-status.completed {
    background: var(--bg-gray);
    color: var(--text-muted);
}

.my-appointment-card .appointment-status.cancelled {
    background: var(--error-light);
    color: var(--error);
}

/* Reward Card Disabled */
.reward-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reward-insufficient {
    font-size: 12px;
    color: var(--error);
    margin-top: var(--space-1);
}


/* ==================== Enhanced Member Card & Profile Styles ==================== */
/* Premium glassmorphism design with 3D flip animation */

/* Emerald Gradient Theme */
.bg-emerald-gradient {
    background: linear-gradient(135deg, #10b981 0%, #6ee7b7 50%, #059669 100%);
}

.bg-gold-gradient {
    background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #c5a028 100%);
}

/* Enhanced Member Card with Glassmorphism */
.member-card-premium {
    position: relative;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    color: white;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-xl);
}

.member-card-premium:active {
    transform: scale(0.98);
}

/* Premium Tier Gradients */
.member-card-premium.tier-emerald {
    background: linear-gradient(135deg, #10b981 0%, #6ee7b7 50%, #059669 100%);
}

.member-card-premium.tier-gold {
    background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #c5a028 100%);
}

.member-card-premium.tier-platinum {
    background: linear-gradient(135deg, #334155 0%, #64748b 50%, #0f172a 100%);
}

.member-card-premium.tier-silver {
    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 50%, #6b7280 100%);
}

/* Glassmorphism Decorative Circles */
.member-card-decor-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.member-card-decor-circle.top-right {
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.1);
    filter: blur(40px);
}

.member-card-decor-circle.bottom-left {
    bottom: -20px;
    left: -40px;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.05);
    filter: blur(24px);
}

/* 3D Flip Card Enhanced */
.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

.card-flip-container {
    position: relative;
    width: 100%;
    height: 220px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-flip-container.flipped {
    transform: rotateY(180deg);
}

.card-flip-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.card-flip-front {
    z-index: 2;
}

.card-flip-back {
    transform: rotateY(180deg);
    background: var(--bg-white);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

/* Card Shadow Effect */
.card-shadow-effect {
    position: absolute;
    bottom: -16px;
    left: 16px;
    right: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.1);
    filter: blur(16px);
    border-radius: 50%;
    z-index: -1;
}

/* Bounce Animation for Flip Hint */
@keyframes bounce-hint {

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

    50% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
}

.animate-bounce-hint {
    animation: bounce-hint 1s infinite;
}

/* Member Card Content Layout */
.member-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 10;
}

.member-card-brand-text {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.member-card-tier-name {
    font-size: 24px;
    font-weight: 700;
    margin-top: var(--space-1);
}

.member-card-tier-badge {
    font-size: 30px;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07));
}

.member-card-tier-badge.gold {
    color: #fde047;
}

.member-card-tier-badge.platinum {
    color: #e2e8f0;
}

/* Points Display */
.member-card-points-section {
    position: relative;
    z-index: 10;
}

.member-card-points-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-2);
}

.member-card-points-label {
    font-size: 12px;
    opacity: 0.8;
}

.member-card-points-number {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.member-card-points-suffix {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.8;
}

.member-card-member-id {
    text-align: right;
}

.member-card-id-text {
    font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.1em;
}

/* Progress Bar Premium */
.member-card-progress-premium {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-1);
    backdrop-filter: blur(4px);
    overflow: hidden;
}

.member-card-progress-premium .progress-fill {
    height: 100%;
    background: white;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.member-card-progress-hint {
    font-size: 10px;
    text-align: right;
    opacity: 0.9;
}

/* Flip Hint Icon */
.member-card-flip-icon {
    position: absolute;
    bottom: 12px;
    right: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* QR Code Back Side */
.qr-code-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.qr-code-wrapper {
    background: white;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-light);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--space-2);
}

.qr-code-image {
    width: 128px;
    height: 128px;
    display: block;
    mix-blend-mode: multiply;
}

.qr-code-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.qr-code-id {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* Action Buttons Grid */
.member-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    padding: 0 var(--space-4);
    margin-bottom: var(--space-6);
}

.member-action-btn-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    min-height: var(--touch-target-min);
    transition: all var(--transition-fast);
    border: none;
}

.member-action-btn-premium:active {
    transform: scale(0.95);
}

.member-action-btn-premium.outline {
    background: var(--bg-white);
    color: var(--primary);
    border: 1px solid var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.member-action-btn-premium.filled {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Coupon Card Premium */
.coupon-card-premium {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.coupon-card-premium .coupon-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--primary);
}

.coupon-card-premium.expired .coupon-accent {
    background: var(--text-muted);
}

.coupon-card-premium.expired {
    opacity: 0.6;
    filter: grayscale(100%);
}

.coupon-discount-box {
    width: 64px;
    height: 64px;
    background: var(--primary-light);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-right: var(--space-3);
    flex-shrink: 0;
}

.coupon-discount-label {
    font-size: 12px;
    font-weight: 700;
}

.coupon-discount-value {
    font-size: 20px;
    font-weight: 700;
}

.coupon-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coupon-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.coupon-condition {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.coupon-expiry {
    font-size: 10px;
    font-weight: 500;
    color: var(--primary);
    background: var(--primary-light);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.coupon-use-btn {
    align-self: center;
    background: var(--text-primary);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.coupon-use-btn:active {
    transform: scale(0.95);
}

/* Coupon Circle Cuts */
.coupon-card-premium::before,
.coupon-card-premium::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bg-light);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.coupon-card-premium::before {
    left: -6px;
}

.coupon-card-premium::after {
    right: -6px;
}

/* Points History Premium */
.points-history-section {
    padding: 0 var(--space-4);
    margin-top: var(--space-6);
}

.points-history-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.points-history-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.points-history-item {
    padding: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}

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

.points-history-info h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}

.points-history-info p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.points-history-value {
    font-size: 14px;
    font-weight: 700;
}

.points-history-value.positive {
    color: var(--success);
}

.points-history-value.negative {
    color: var(--danger);
}

/* Profile Header Premium */
.profile-header-premium {
    padding: calc(var(--space-6) + var(--safe-area-top)) var(--space-6) var(--space-2);
    background: var(--bg-white);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.profile-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.profile-header-text h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.profile-header-text p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: var(--space-1) 0 0 0;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-gray);
    overflow: hidden;
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shimmer Effect */
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-effect 1.5s infinite;
}

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

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


/* ==================== AI Chat Enhanced Styles ====================
   Drug Interaction Warnings, MIMS Info, Allergy Reminders
==================== */

/* Drug Interaction Warning */
.ai-chat-drug-warning {
    padding: var(--space-3) 0;
}

.ai-chat-warning-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.ai-chat-warning-danger {
    border-left: 4px solid var(--danger);
}

.ai-chat-warning-caution {
    border-left: 4px solid var(--warning);
}

.ai-chat-warning-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: #FEF2F2;
    font-weight: 600;
    font-size: 14px;
    color: var(--danger);
}

.ai-chat-warning-caution .ai-chat-warning-header {
    background: #FEF3C7;
    color: #92400E;
}

.ai-chat-warning-body {
    padding: var(--space-3);
}

.ai-chat-warning-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    font-size: 13px;
}

.ai-chat-warning-item:last-child {
    margin-bottom: 0;
}

.ai-chat-warning-item-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.ai-chat-warning-item-danger i {
    color: var(--danger);
}

.ai-chat-warning-item-caution {
    background: #FEF3C7;
    color: #92400E;
}

.ai-chat-warning-item-caution i {
    color: var(--warning);
}

.ai-chat-warning-footer {
    padding: var(--space-3);
    border-top: 1px solid var(--border-light);
}

.ai-chat-warning-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-chat-warning-btn:active {
    background: var(--secondary-dark);
}

/* Enhanced Drug Interaction Warning Styles - Requirements 7.2, 7.4 */
.ai-chat-warning-section {
    margin-bottom: var(--space-3);
}

.ai-chat-warning-section:last-child {
    margin-bottom: 0;
}

.ai-chat-warning-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: #374151;
}

.ai-chat-warning-section-allergy .ai-chat-warning-section-title {
    color: #991B1B;
}

.ai-chat-warning-section-interaction .ai-chat-warning-section-title {
    color: #92400E;
}

.ai-chat-warning-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ai-chat-warning-item-message {
    font-weight: 500;
}

.ai-chat-warning-item-detail {
    font-size: 12px;
    opacity: 0.85;
}

.ai-chat-warning-item-highlight {
    font-size: 12px;
    font-weight: 600;
    color: #DC2626;
    background: rgba(220, 38, 38, 0.1);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    margin-top: 4px;
}

.ai-chat-warning-advice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 12px;
    color: #6B7280;
    margin: 0 0 var(--space-3);
    padding: var(--space-2);
    background: #F9FAFB;
    border-radius: var(--radius-sm);
}

.ai-chat-warning-advice i {
    color: #F59E0B;
    margin-top: 2px;
}

/* MIMS Knowledge Base Info */
.ai-chat-mims-info {
    padding: var(--space-3) 0;
}

.ai-chat-mims-card {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #C7D2FE;
}

.ai-chat-mims-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(99, 102, 241, 0.1);
    font-weight: 600;
    font-size: 13px;
    color: #4338CA;
}

.ai-chat-mims-body {
    padding: var(--space-3);
}

.ai-chat-mims-body h4 {
    font-size: 15px;
    font-weight: 600;
    color: #1E1B4B;
    margin: 0 0 var(--space-3);
}

.ai-chat-mims-section {
    margin-bottom: var(--space-3);
}

.ai-chat-mims-section:last-child {
    margin-bottom: 0;
}

.ai-chat-mims-section strong {
    display: block;
    font-size: 12px;
    color: #4338CA;
    margin-bottom: var(--space-2);
}

.ai-chat-mims-section ul {
    margin: 0;
    padding-left: var(--space-4);
    font-size: 13px;
    color: #374151;
}

.ai-chat-mims-section ul li {
    margin-bottom: var(--space-1);
}

.ai-chat-mims-referral {
    background: rgba(239, 68, 68, 0.1);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--danger);
}

.ai-chat-mims-referral strong {
    color: var(--danger);
}

.ai-chat-mims-redflags {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: #FEF2F2;
    border-radius: var(--radius-md);
}

.ai-chat-mims-redflags strong {
    display: block;
    font-size: 12px;
    color: var(--danger);
    margin-bottom: var(--space-2);
}

.ai-chat-redflag-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: #FEE2E2;
    color: #991B1B;
    border-radius: var(--radius-full);
    font-size: 11px;
    margin: 2px;
}

/* Allergy Reminder */
.ai-chat-allergy-reminder {
    padding: var(--space-2) 0;
}

.ai-chat-reminder-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: #FEF3C7;
    border-radius: var(--radius-lg);
    border: 1px solid #FCD34D;
}

.ai-chat-reminder-card>i {
    font-size: 20px;
    color: #D97706;
}

.ai-chat-reminder-content {
    flex: 1;
}

.ai-chat-reminder-content strong {
    display: block;
    font-size: 12px;
    color: #92400E;
    margin-bottom: 2px;
}

.ai-chat-reminder-content p {
    margin: 0;
    font-size: 13px;
    color: #78350F;
}

.ai-chat-reminder-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #92400E;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.ai-chat-reminder-close:active {
    background: rgba(0, 0, 0, 0.1);
}

/* Triage Mode Indicator */
.ai-chat-triage-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
    color: white;
    font-size: 12px;
    font-weight: 500;
}

.ai-chat-triage-indicator i {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Enhanced Quick Replies for Triage */
.ai-chat-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}

.ai-chat-quick-reply-btn {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.ai-chat-quick-reply-btn:active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

/* Pharmacist Suggestion Card Enhancement */
.ai-chat-pharmacist-suggestion {
    padding: var(--space-3) 0;
}

.ai-chat-suggestion-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-radius: var(--radius-lg);
    border: 1px solid #A7F3D0;
}

.ai-chat-suggestion-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 20px;
}

.ai-chat-suggestion-content {
    flex: 1;
}

.ai-chat-suggestion-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
    margin: 0 0 var(--space-1);
}

.ai-chat-suggestion-content p {
    font-size: 12px;
    color: #047857;
    margin: 0;
}

.ai-chat-suggestion-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.ai-chat-suggestion-btn:active {
    background: var(--secondary-dark);
}


/* ==================== AI Chat Quick Actions Menu ==================== */
.ai-chat-quick-actions {
    padding: var(--space-3) 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.ai-chat-actions-scroll {
    display: flex;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ai-chat-actions-scroll::-webkit-scrollbar {
    display: none;
}

.ai-chat-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: transparent;
    border: none;
    cursor: pointer;
    min-width: 70px;
    scroll-snap-align: start;
    transition: transform 0.2s;
}

.ai-chat-action-btn:active {
    transform: scale(0.95);
}

.ai-chat-action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s, transform 0.2s;
}

.ai-chat-action-btn:hover .ai-chat-action-icon {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.ai-chat-action-btn span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: center;
}

/* Responsive adjustments for quick actions */
@media (max-width: 360px) {
    .ai-chat-action-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .ai-chat-action-btn {
        min-width: 60px;
    }

    .ai-chat-action-btn span {
        font-size: 10px;
    }
}


/* ==================== Points Dashboard ==================== */
/* Requirements: 21.1, 21.2, 21.3, 21.4, 21.5, 21.6, 21.7, 21.8 */

.points-dashboard {
    padding: var(--space-4);
    padding-bottom: calc(var(--space-8) + var(--safe-area-bottom));
}

.points-dashboard-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-2) 0;
}

.points-dashboard-header .page-title {
    flex: 1;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.points-dashboard-header .header-action-btn {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gray);
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.points-dashboard-header .header-action-btn:active {
    background: var(--border);
    transform: scale(0.95);
}

/* Points Balance Card - Large (Requirement 21.1) */
.points-balance-card-large {
    position: relative;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-2xl);
    padding: var(--space-8) var(--space-6);
    margin-bottom: var(--space-4);
    overflow: hidden;
    text-align: center;
    color: white;
}

.points-balance-card-large .points-balance-bg {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.points-balance-card-large .points-balance-content {
    position: relative;
    z-index: 1;
}

.points-balance-card-large .points-balance-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-4);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.points-balance-card-large .points-balance-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: var(--space-2);
}

.points-balance-card-large .points-balance-value {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-1);
}

.points-balance-card-large .points-balance-unit {
    font-size: 14px;
    opacity: 0.8;
}

/* Points Summary Card (Requirement 21.2) */
.points-summary-card {
    display: flex;
    align-items: center;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.points-summary-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.points-summary-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.points-summary-icon.earned {
    background: var(--success-light);
    color: var(--success);
}

.points-summary-icon.used {
    background: var(--danger-light);
    color: var(--danger);
}

.points-summary-icon.expired {
    background: var(--bg-gray);
    color: var(--text-muted);
}

.points-summary-info {
    display: flex;
    flex-direction: column;
}

.points-summary-label {
    font-size: 11px;
    color: var(--text-muted);
}

.points-summary-value {
    font-size: 14px;
    font-weight: 600;
}

.points-summary-value.earned {
    color: var(--success);
}

.points-summary-value.used {
    color: var(--danger);
}

.points-summary-value.expired {
    color: var(--text-muted);
}

.points-summary-divider {
    width: 1px;
    height: 40px;
    background: var(--border-light);
    margin: 0 var(--space-2);
}

/* Tier Progress Card (Requirements 21.3, 21.4) */
.tier-progress-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.tier-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.tier-badge i {
    font-size: 14px;
}

.tier-next {
    text-align: right;
}

.tier-next-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.tier-next-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.tier-progress-bar-container {
    margin-bottom: var(--space-3);
}

.tier-progress-bar {
    height: 8px;
    background: var(--bg-gray);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.tier-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.tier-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.tier-progress-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--primary-light);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--primary-dark);
}

.tier-progress-info i {
    font-size: 14px;
}

/* Points Expiry Warning (Requirement 21.8) */
.points-expiry-warning {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--warning-light);
    border: 1px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.expiry-warning-icon {
    width: 40px;
    height: 40px;
    background: var(--warning);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.expiry-warning-content {
    flex: 1;
}

.expiry-warning-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--warning);
    margin-bottom: 2px;
}

.expiry-warning-text {
    font-size: 12px;
    color: var(--text-secondary);
}

.expiry-warning-action {
    padding: var(--space-2) var(--space-4);
    background: var(--warning);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-height: 36px;
}

.expiry-warning-action:active {
    opacity: 0.9;
    transform: scale(0.98);
}

/* Pending Points Card (Requirement 21.5) */
.pending-points-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--info-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.pending-points-icon {
    width: 40px;
    height: 40px;
    background: var(--info);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.pending-points-content {
    flex: 1;
}

.pending-points-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.pending-points-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--info);
}

.pending-points-date {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--text-muted);
}

/* Recent Transactions Section (Requirement 21.6) */
.recent-transactions-section {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.recent-transactions-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.recent-transactions-section .section-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.view-all-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.view-all-link i {
    font-size: 10px;
}

.transactions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.transaction-item:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--space-3);
}

.transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.transaction-icon.earned {
    background: var(--success-light);
    color: var(--success);
}

.transaction-icon.used {
    background: var(--danger-light);
    color: var(--danger);
}

.transaction-icon.expired {
    background: var(--bg-gray);
    color: var(--text-muted);
}

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

.transaction-description {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.transaction-ref {
    background: var(--bg-gray);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
}

.transaction-points {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.transaction-points.earned {
    color: var(--success);
}

.transaction-points.used {
    color: var(--danger);
}

.transaction-points.expired {
    color: var(--text-muted);
}

.empty-transactions {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-muted);
}

.empty-transactions i {
    font-size: 40px;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.empty-transactions p {
    font-size: 14px;
}

/* Points Actions */
.points-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Zero Balance State (Requirement 21.7) */
.zero-balance-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.zero-balance-illustration {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-6);
    background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zero-balance-illustration i {
    font-size: 56px;
    color: var(--primary);
}

.zero-balance-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.zero-balance-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.zero-balance-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-gray);
    border-radius: var(--radius-lg);
}

.benefit-item i {
    font-size: 20px;
    color: var(--primary);
}

.benefit-item span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Skeleton for Points Dashboard */
.points-balance-card-large.skeleton-card {
    background: var(--bg-gray);
}


/* ==================== Points History Transaction Styling ==================== */
/* Requirements: 22.3, 22.4, 22.5 - Transaction type styling */
/* 22.3: Green/plus for earned, 22.4: Red/minus for redeemed, 22.5: Gray for expired */

/* Points History Page Layout */
.points-history-page {
    min-height: 100vh;
    background: var(--bg-light);
    padding-bottom: calc(70px + var(--safe-area-bottom));
}

.points-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + var(--safe-area-top));
    background: var(--bg-white);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm);
}

.points-history-header .back-btn {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.points-history-header .back-btn:active {
    background: var(--bg-gray);
}

.points-history-header .page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.points-history-header .header-spacer {
    width: var(--touch-target-min);
}

/* Points Summary Header */
.points-summary-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: var(--space-5);
    margin: var(--space-4);
    border-radius: var(--radius-xl);
    color: white;
}

.summary-balance {
    text-align: center;
    margin-bottom: var(--space-4);
}

.summary-balance .balance-label {
    display: block;
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: var(--space-1);
}

.summary-balance .balance-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
}

.summary-stats {
    display: flex;
    justify-content: space-around;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.summary-stats .stat-item i {
    font-size: 16px;
    opacity: 0.9;
}

.summary-stats .stat-value {
    font-size: 14px;
    font-weight: 600;
}

.summary-stats .stat-label {
    font-size: 10px;
    opacity: 0.8;
}

/* Requirement 22.3: Green styling for earned */
.summary-stats .stat-item.earned i,
.summary-stats .stat-item.earned .stat-value {
    color: #86EFAC;
    /* Light green for visibility on gradient */
}

/* Requirement 22.4: Red styling for used/redeemed */
.summary-stats .stat-item.used i,
.summary-stats .stat-item.used .stat-value {
    color: #FCA5A5;
    /* Light red for visibility on gradient */
}

/* Requirement 22.5: Gray styling for expired */
.summary-stats .stat-item.expired i,
.summary-stats .stat-item.expired .stat-value {
    color: rgba(255, 255, 255, 0.7);
}

/* Filter Tabs Container */
.filter-tabs-container {
    padding: 0 var(--space-4);
    margin-bottom: var(--space-3);
}

.filter-tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: var(--touch-target-min);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.filter-tab i {
    font-size: 14px;
}

.filter-tab:active {
    transform: scale(0.98);
}

.filter-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Transactions Container */
.transactions-container {
    padding: 0 var(--space-4);
}

/* Transaction Item - Updated styling for Requirements 22.3, 22.4, 22.5 */
.transactions-list .transaction-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-sm);
}

/* Transaction Icon - Base styling */
.tx-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* Requirement 22.3: Green/plus for earned transactions */
.tx-icon.bg-earned {
    background: var(--success-light);
    color: var(--success);
}

/* Requirement 22.4: Red/minus for redeemed transactions */
.tx-icon.bg-used {
    background: var(--danger-light);
    color: var(--danger);
}

/* Requirement 22.5: Gray for expired transactions */
.tx-icon.bg-expired {
    background: var(--bg-gray);
    color: var(--text-muted);
}

/* Transaction Content */
.tx-content {
    flex: 1;
    min-width: 0;
}

.tx-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.tx-description {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

/* Transaction Points - Type-specific styling */
.tx-points {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Requirement 22.3: Green color for earned points */
.tx-points.earned {
    color: var(--success);
}

/* Requirement 22.4: Red color for redeemed/used points */
.tx-points.used {
    color: var(--danger);
}

/* Requirement 22.5: Gray color for expired points */
.tx-points.expired {
    color: var(--text-muted);
}

/* Transaction Meta */
.tx-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.tx-meta-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tx-reference {
    background: var(--bg-gray);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
}

.tx-date {
    font-size: 12px;
    color: var(--text-muted);
}

.tx-balance {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Load More Trigger */
.load-more-trigger {
    padding: var(--space-4);
    text-align: center;
}

.load-more-trigger .loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: 13px;
}

.load-more-trigger .loading-spinner i {
    font-size: 16px;
    color: var(--primary);
}

/* End of List */
.end-of-list {
    padding: var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* Empty State for Points History */
.points-history-page .empty-state {
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.points-history-page .empty-illustration {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: var(--bg-gray);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.points-history-page .empty-illustration i {
    font-size: 32px;
    color: var(--text-muted);
}

.points-history-page .empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.points-history-page .empty-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

/* Skeleton Loading for Transactions */
.skeleton-list .skeleton-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
}

.skeleton-list .skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}



/* ==================== Rewards Catalog ==================== */
/* Requirements: 23.1, 23.2, 23.3, 23.4, 23.5, 23.6, 23.7, 23.8, 23.9, 23.10, 23.11 */

.rewards-catalog-page {
    min-height: 100vh;
    background: var(--bg-light);
    padding-bottom: calc(var(--space-8) + var(--safe-area-bottom));
}

/* Rewards Header */
.rewards-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-white);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-sm);
}

.rewards-header .page-title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.rewards-header .back-btn,
.rewards-header .header-action-btn {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rewards-header .back-btn:active,
.rewards-header .header-action-btn:active {
    background: var(--bg-gray);
    transform: scale(0.95);
}

/* Rewards Points Card */
.rewards-points-card {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    margin: var(--space-4);
    overflow: hidden;
    color: white;
    box-shadow: var(--shadow-lg);
}

.rewards-points-bg {
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.rewards-points-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rewards-points-label {
    font-size: 13px;
    opacity: 0.9;
    display: block;
    margin-bottom: var(--space-1);
}

.rewards-points-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.rewards-points-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Rewards Tabs */
.rewards-tabs {
    display: flex;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-gray);
    margin-left: var(--space-4);
    margin-right: var(--space-4);
    border-radius: var(--radius-xl);
    padding: var(--space-1);
}

.rewards-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: var(--touch-target-min);
}

.rewards-tab.active {
    background: var(--bg-white);
    color: #764ba2;
    box-shadow: var(--shadow-sm);
}

.rewards-tab i {
    font-size: 14px;
}

/* Rewards Grid (Requirement 23.1) */
.rewards-content {
    padding: 0 var(--space-4);
}

.rewards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-3);
}

/* Reward Card (Requirements 23.2, 23.3, 23.4, 23.5) */
.reward-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.reward-card:active {
    transform: scale(0.98);
}

.reward-card.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.reward-card.out-of-stock .reward-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.reward-card-image {
    position: relative;
    height: 200px;
    background: var(--bg-gray);
    overflow: hidden;
}

.reward-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reward-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--text-muted);
}

/* Reward Badges (Requirements 23.3, 23.4) */
.reward-badge {
    position: absolute;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
}

.out-of-stock-badge {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--danger);
    color: white;
}

.limited-stock-badge {
    top: var(--space-2);
    left: var(--space-2);
    background: var(--warning);
    color: white;
}

.reward-points-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: #764ba2;
    color: white;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.reward-points-badge i {
    font-size: 10px;
}

/* Reward Card Info */
.reward-card-info {
    padding: var(--space-3);
}

.reward-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reward-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* Insufficient Points Display (Requirement 23.5) */
.reward-points-needed {
    font-size: 11px;
    color: var(--danger);
    margin-top: var(--space-2);
    font-weight: 500;
}

/* Reward Detail Modal (Requirement 23.6) */
.reward-detail-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.reward-detail-modal.active {
    opacity: 1;
    visibility: visible;
}

.reward-detail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.reward-detail-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--bg-white);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.reward-detail-modal.active .reward-detail-content {
    transform: translateY(0);
}

.reward-detail-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.reward-detail-image {
    height: 180px;
    background: var(--bg-gray);
}

.reward-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reward-detail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    color: var(--text-muted);
}

.reward-detail-body {
    padding: var(--space-5);
    padding-bottom: calc(var(--space-5) + var(--safe-area-bottom));
}

.reward-detail-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.reward-detail-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}

.reward-detail-points {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.reward-detail-points-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.reward-detail-points-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 20px;
    font-weight: 700;
    color: #764ba2;
}

.reward-detail-stock {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-4);
}

.reward-detail-stock i {
    margin-right: var(--space-1);
}

.reward-expiry-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--warning-light);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--warning);
    margin-bottom: var(--space-4);
}

.reward-detail-terms {
    padding: var(--space-3);
    background: var(--bg-gray);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.reward-detail-terms h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.reward-detail-terms p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.reward-detail-actions {
    display: flex;
    gap: var(--space-3);
}

.reward-detail-actions .btn {
    flex: 1;
    min-height: var(--touch-target-min);
}

/* Redemption Success Modal (Requirement 23.8) */
.redemption-success-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.redemption-success-modal.active {
    opacity: 1;
    visibility: visible;
}

.redemption-success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.redemption-success-content {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: var(--bg-white);
    border-radius: var(--radius-2xl);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.redemption-success-modal.active .redemption-success-content {
    transform: scale(1);
}

.confetti-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -20px;
    animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(400px) rotate(720deg);
        opacity: 0;
    }
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: var(--success-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--success);
}

.success-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.success-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

.redemption-code-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-gray);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.redemption-code {
    font-size: 24px;
    font-weight: 700;
    color: #764ba2;
    letter-spacing: 2px;
}

.copy-code-btn {
    width: 36px;
    height: 36px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.copy-code-btn:active {
    background: var(--primary-light);
    color: var(--primary);
}

.success-note {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 var(--space-4);
}

/* My Rewards List (Requirement 23.10) */
.my-rewards-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.redemption-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.redemption-card-image {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-gray);
}

.redemption-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.redemption-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-muted);
}

.redemption-card-info {
    flex: 1;
    min-width: 0;
}

.redemption-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1);
}

.redemption-card-date {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}

.redemption-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

/* Redemption Status (Requirement 23.10) */
.redemption-status {
    display: inline-flex;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.status-pending {
    background: var(--warning-light);
    color: var(--warning);
}

.status-approved {
    background: var(--info-light);
    color: var(--info);
}

.status-delivered {
    background: var(--success-light);
    color: var(--success);
}

.status-cancelled {
    background: var(--danger-light);
    color: var(--danger);
}

.redemption-card-code {
    font-size: 11px;
    background: var(--bg-gray);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

/* Redemption Expiry Warning (Requirement 23.11) */
.redemption-expiry-warning {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--warning-light);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--warning);
}

.redemption-expired {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--danger-light);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--danger);
}

/* Rewards Toast */
.rewards-toast {
    position: fixed;
    bottom: calc(80px + var(--safe-area-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--text-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: var(--z-toast);
}

.rewards-toast.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.rewards-toast.success {
    background: var(--success);
}

.rewards-toast.error {
    background: var(--danger);
}

/* Empty State */
.rewards-catalog-page .empty-state {
    padding: var(--space-12) var(--space-4);
    text-align: center;
}

.rewards-catalog-page .empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: var(--bg-gray);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--text-muted);
}

.rewards-catalog-page .empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.rewards-catalog-page .empty-state-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

/* ==================== Reward Detail Modal ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.modal-content.reward-detail-modal {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    position: relative;
    z-index: var(--z-modal);
}

.modal-overlay.show .modal-content.reward-detail-modal {
    transform: translateY(0);
}

.reward-detail-modal .close-modal {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 10;
}

.reward-detail-modal .close-modal:hover {
    background: rgba(0, 0, 0, 0.2);
}

.reward-detail-modal .close-modal::before,
.reward-detail-modal .close-modal::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: var(--text-primary);
}

.reward-detail-modal .close-modal::before {
    transform: rotate(45deg);
}

.reward-detail-modal .close-modal::after {
    transform: rotate(-45deg);
}

.reward-detail-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--bg-gray);
}

.reward-detail-content {
    padding: var(--space-6);
}

.reward-detail-content h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
    line-height: 1.3;
}

.reward-detail-points {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.reward-detail-points .points-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border-radius: var(--radius-full);
    font-size: 18px;
    font-weight: 700;
}

.reward-detail-points .points-badge i {
    font-size: 20px;
}

.reward-detail-description {
    margin-bottom: var(--space-4);
}

.reward-detail-description h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.reward-detail-description p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.reward-detail-terms {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.reward-detail-terms h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}

.reward-detail-terms ul {
    margin: 0;
    padding-left: var(--space-5);
}

.reward-detail-terms li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.reward-detail-terms li:last-child {
    margin-bottom: 0;
}

.reward-stock-warning {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--warning-light);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.reward-stock-warning i {
    color: var(--warning);
    font-size: 18px;
}

.reward-stock-warning span {
    font-size: 13px;
    color: #92400E;
    font-weight: 500;
}

.reward-insufficient-notice {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--danger-light);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.reward-insufficient-notice .notice-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.reward-insufficient-notice i {
    color: var(--danger);
    font-size: 18px;
}

.reward-insufficient-notice strong {
    font-size: 14px;
    color: #991B1B;
    font-weight: 600;
}

.reward-insufficient-notice .user-points,
.reward-insufficient-notice .shortage {
    font-size: 13px;
    color: #991B1B;
    margin: 0;
}

.reward-redeem-btn {
    width: 100%;
    height: var(--touch-target-min);
    min-height: var(--touch-target-min);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.reward-redeem-btn.primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.reward-redeem-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
}

.reward-redeem-btn.primary:active {
    transform: translateY(0);
}

.reward-redeem-btn.disabled {
    background: var(--bg-gray);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.reward-redeem-btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

.reward-redeem-btn i {
    font-size: 18px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .modal-overlay {
        padding: var(--space-2);
    }

    .reward-detail-image {
        height: 220px;
    }

    .reward-detail-content {
        padding: var(--space-4);
    }

    .reward-detail-content h2 {
        font-size: 20px;
    }

    .reward-detail-points .points-badge {
        font-size: 16px;
    }
}

/* ==================== Success Modal for Rewards ==================== */
.modal-overlay.success-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: var(--space-4);
}

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

.modal-content.success-modal-content {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    max-width: 400px;
    width: 100%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.success-modal.show .modal-content.success-modal-content {
    transform: scale(1);
}

.success-modal-content .success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPulse 0.6s ease;
}

@keyframes successPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

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

.success-modal-content .success-icon i {
    font-size: 40px;
    color: white;
}

.success-modal-content h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.success-modal-content .success-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

.success-modal-content .redemption-code-box {
    background: var(--bg-light);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.success-modal-content .redemption-code {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
    flex: 1;
}

.success-modal-content .copy-code-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.success-modal-content .copy-code-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.success-modal-content .copy-code-btn:active {
    transform: scale(0.95);
}

.success-modal-content .copy-code-btn i {
    font-size: 16px;
}

.success-modal-content .success-note {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 var(--space-5);
}

.success-modal-content .btn-block {
    width: 100%;
}

/* Responsive */
@media (max-width: 480px) {
    .modal-overlay.success-modal {
        padding: var(--space-3);
    }

    .modal-content.success-modal-content {
        padding: var(--space-5);
    }

    .success-modal-content .success-icon {
        width: 70px;
        height: 70px;
    }

    .success-modal-content .success-icon i {
        font-size: 35px;
    }

    .success-modal-content h2 {
        font-size: 20px;
    }

    .success-modal-content .redemption-code {
        font-size: 18px;
    }
}