/* _content/QrBiteHub.Web/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-hvowak842n] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-hvowak842n] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/QrBiteHub.Web/Components/Pages/Customer/BillView.razor.rz.scp.css */
/* ============================================
   BILL VIEW PAGE - PREMIUM REDESIGN
   Refined Culinary Journey Aesthetic
   ============================================ */

/* Base Variables */
.bill-page[b-xfnb4hb80e] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-elevated: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-glass-strong: rgba(255, 255, 255, 0.95);
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --border-color: #f1f5f9;
    --border-subtle: #e2e8f0;
    --primary: #f58524;
    --primary-soft: #fff7ed;
    --primary-glow: rgba(245, 133, 36, 0.15);
    --success: #22c55e;
    --success-soft: #f0fdf4;
    --danger: #ef4444;
    --danger-soft: #fef2f2;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 4px 20px rgba(245, 133, 36, 0.25);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    min-height: 100dvh;
    background: var(--bg-primary);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Dark Mode */
[data-theme="dark"] .bill-page[b-xfnb4hb80e] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-elevated: #1a1a1a;
    --bg-glass: rgba(20, 20, 20, 0.9);
    --bg-glass-strong: rgba(26, 26, 26, 0.95);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --border-color: #1e1e1e;
    --border-subtle: #2a2a2a;
    --primary-soft: rgba(245, 133, 36, 0.12);
    --primary-glow: rgba(245, 133, 36, 0.2);
    --success-soft: rgba(34, 197, 94, 0.12);
    --danger-soft: rgba(239, 68, 68, 0.12);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ============================================
   HEADER
   ============================================ */

.bill-header[b-xfnb4hb80e] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
}

.bill-header h1[b-xfnb4hb80e] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin: 0;
}

.back-btn[b-xfnb4hb80e] {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.back-btn:focus-visible[b-xfnb4hb80e] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.back-btn:hover[b-xfnb4hb80e] { background: var(--bg-primary); color: var(--text-primary); }
.back-btn:active[b-xfnb4hb80e] { transform: scale(0.92); }

/* ============================================
   CONTENT
   ============================================ */

.bill-content[b-xfnb4hb80e] {
    padding: 16px;
    padding-bottom: max(100px, calc(env(safe-area-inset-bottom) + 100px));
}

/* ============================================
   SKELETON LOADING
   ============================================ */

.skeleton-loading[b-xfnb4hb80e] {
    padding-top: 8px;
}

.skeleton-restaurant[b-xfnb4hb80e] {
    text-align: center;
    padding: 24px 0;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 24px;
}

.skeleton-name[b-xfnb4hb80e] {
    height: 24px;
    width: 180px;
    margin: 0 auto 8px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.skeleton-branch[b-xfnb4hb80e] {
    height: 16px;
    width: 120px;
    margin: 0 auto 12px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-badge[b-xfnb4hb80e] {
    height: 32px;
    width: 100px;
    margin: 0 auto;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 16px;
}

.skeleton-section[b-xfnb4hb80e] {
    margin-bottom: 24px;
}

.skeleton-section-title[b-xfnb4hb80e] {
    height: 14px;
    width: 100px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-item[b-xfnb4hb80e] {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-qty[b-xfnb4hb80e] {
    height: 16px;
    width: 30px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-item-name[b-xfnb4hb80e] {
    flex: 1;
    height: 16px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-price[b-xfnb4hb80e] {
    height: 16px;
    width: 60px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-totals[b-xfnb4hb80e] {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-row[b-xfnb4hb80e] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.skeleton-row:last-child[b-xfnb4hb80e] { margin-bottom: 0; }

.skeleton-label[b-xfnb4hb80e] {
    height: 14px;
    width: 80px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-value[b-xfnb4hb80e] {
    height: 14px;
    width: 60px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-grand[b-xfnb4hb80e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.skeleton-grand-label[b-xfnb4hb80e] {
    height: 18px;
    width: 60px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-grand-value[b-xfnb4hb80e] {
    height: 32px;
    width: 100px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-xfnb4hb80e 1.5s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes shimmer-b-xfnb4hb80e {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-xfnb4hb80e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    min-height: 60vh;
}

.empty-illustration[b-xfnb4hb80e] {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 24px;
}

.empty-circle[b-xfnb4hb80e] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-soft) 0%, transparent 60%);
    border-radius: 50%;
    animation: emptyPulse-b-xfnb4hb80e 3s ease-in-out infinite;
}

.empty-icon[b-xfnb4hb80e] {
    position: absolute;
    inset: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    color: var(--text-tertiary);
}

.empty-icon svg[b-xfnb4hb80e] {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
}

@keyframes emptyPulse-b-xfnb4hb80e {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

.empty-state h2[b-xfnb4hb80e] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.empty-state p[b-xfnb4hb80e] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 28px;
    max-width: 260px;
    line-height: 1.5;
}

.empty-state .c-btn[b-xfnb4hb80e] {
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-md);
}

/* ============================================
   RESTAURANT INFO
   ============================================ */

.restaurant-info[b-xfnb4hb80e] {
    text-align: center;
    padding: 28px 0;
    border-bottom: 1px dashed var(--border-subtle);
    margin-bottom: 24px;
    animation: fadeInUp-b-xfnb4hb80e var(--duration-slow) var(--ease-smooth);
}

.restaurant-info h2[b-xfnb4hb80e] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.restaurant-info p[b-xfnb4hb80e] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.table-badge[b-xfnb4hb80e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ============================================
   BILL SECTION
   ============================================ */

.bill-section[b-xfnb4hb80e] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    animation: fadeInUp-b-xfnb4hb80e var(--duration-slow) var(--ease-smooth);
    animation-delay: 50ms;
    animation-fill-mode: both;
}

.bill-section h3[b-xfnb4hb80e] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px;
}

.bill-section h3[b-xfnb4hb80e]::before {
    content: '';
    display: block;
    width: 3px;
    height: 14px;
    background: var(--primary);
    border-radius: 2px;
}

.bill-item[b-xfnb4hb80e] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--duration-fast) var(--ease-smooth);
}

.bill-item:last-child[b-xfnb4hb80e] { border-bottom: none; }
.bill-item:hover[b-xfnb4hb80e] { background: var(--bg-primary); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }

.item-qty[b-xfnb4hb80e] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 24px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.item-details[b-xfnb4hb80e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name[b-xfnb4hb80e] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

.item-modifiers[b-xfnb4hb80e] {
    font-size: 12px;
    color: var(--text-secondary);
    display: block;
}

.item-notes[b-xfnb4hb80e] {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

.item-price[b-xfnb4hb80e] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ============================================
   BILL TOTALS
   ============================================ */

.bill-totals[b-xfnb4hb80e] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    animation: fadeInUp-b-xfnb4hb80e var(--duration-slow) var(--ease-smooth);
    animation-delay: 100ms;
    animation-fill-mode: both;
}

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

.total-row span:last-child[b-xfnb4hb80e] {
    font-weight: 600;
    color: var(--text-primary);
}

.total-row.discount[b-xfnb4hb80e] {
    color: var(--success);
}

.total-row.discount span:last-child[b-xfnb4hb80e] {
    color: var(--success);
}

/* ============================================
   TIP SECTION
   ============================================ */

.tip-section[b-xfnb4hb80e] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    animation: fadeInUp-b-xfnb4hb80e var(--duration-slow) var(--ease-smooth);
    animation-delay: 150ms;
    animation-fill-mode: both;
}

/* ============================================
   GRAND TOTAL
   ============================================ */

.grand-total[b-xfnb4hb80e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-soft) 0%, rgba(245, 133, 36, 0.05) 100%);
    border: 1px solid rgba(245, 133, 36, 0.2);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    animation: fadeInUp-b-xfnb4hb80e var(--duration-slow) var(--ease-smooth);
    animation-delay: 200ms;
    animation-fill-mode: both;
}

.grand-total span:first-child[b-xfnb4hb80e] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.total-amount[b-xfnb4hb80e] {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
}

/* ============================================
   SPLIT BILL
   ============================================ */

.split-btn[b-xfnb4hb80e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 16px;
    margin-bottom: 16px;
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
    animation: fadeInUp-b-xfnb4hb80e var(--duration-slow) var(--ease-smooth);
    animation-delay: 250ms;
    animation-fill-mode: both;
}

.split-btn:focus-visible[b-xfnb4hb80e] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.split-btn:hover[b-xfnb4hb80e] {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

.split-btn:active[b-xfnb4hb80e] { transform: scale(0.98); }

.split-info[b-xfnb4hb80e] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    animation: fadeInUp-b-xfnb4hb80e var(--duration-slow) var(--ease-smooth);
    animation-delay: 250ms;
    animation-fill-mode: both;
}

.split-header[b-xfnb4hb80e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.split-header span[b-xfnb4hb80e] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.change-btn[b-xfnb4hb80e] {
    background: none;
    border: none;
    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 8px 12px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.change-btn:focus-visible[b-xfnb4hb80e] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.change-btn:active[b-xfnb4hb80e] { transform: scale(0.95); }

.split-details[b-xfnb4hb80e] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.your-share[b-xfnb4hb80e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.your-share span:first-child[b-xfnb4hb80e] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.share-amount[b-xfnb4hb80e] {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}

/* ============================================
   PAYMENT ACTIONS
   ============================================ */

.payment-actions[b-xfnb4hb80e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
    animation: fadeInUp-b-xfnb4hb80e var(--duration-slow) var(--ease-smooth);
    animation-delay: 300ms;
    animation-fill-mode: both;
}

.payment-actions .c-btn[b-xfnb4hb80e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--duration-fast) var(--ease-smooth);
}

.payment-actions .c-btn.primary[b-xfnb4hb80e] {
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-glow);
}

.payment-actions .c-btn.primary:hover[b-xfnb4hb80e] {
    background: #e27519;
    transform: translateY(-1px);
}

.payment-actions .c-btn.secondary[b-xfnb4hb80e] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.payment-actions .c-btn.secondary:hover[b-xfnb4hb80e] {
    background: var(--bg-primary);
    border-color: var(--primary);
}

.payment-actions .c-btn:focus-visible[b-xfnb4hb80e] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.payment-actions .c-btn:active[b-xfnb4hb80e] { transform: scale(0.98); }

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp-b-xfnb4hb80e {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .bill-section[b-xfnb4hb80e],
    .bill-totals[b-xfnb4hb80e],
    .tip-section[b-xfnb4hb80e],
    .grand-total[b-xfnb4hb80e],
    .split-btn[b-xfnb4hb80e],
    .split-info[b-xfnb4hb80e],
    .payment-actions[b-xfnb4hb80e],
    .restaurant-info[b-xfnb4hb80e],
    .empty-circle[b-xfnb4hb80e],
    .back-btn[b-xfnb4hb80e],
    .split-btn[b-xfnb4hb80e],
    .change-btn[b-xfnb4hb80e],
    .c-btn[b-xfnb4hb80e] {
        animation: none !important;
        transition: opacity var(--duration-fast) ease !important;
    }

    .skeleton-name[b-xfnb4hb80e],
    .skeleton-branch[b-xfnb4hb80e],
    .skeleton-badge[b-xfnb4hb80e],
    .skeleton-section-title[b-xfnb4hb80e],
    .skeleton-qty[b-xfnb4hb80e],
    .skeleton-item-name[b-xfnb4hb80e],
    .skeleton-price[b-xfnb4hb80e],
    .skeleton-label[b-xfnb4hb80e],
    .skeleton-value[b-xfnb4hb80e],
    .skeleton-grand-label[b-xfnb4hb80e],
    .skeleton-grand-value[b-xfnb4hb80e] {
        animation: none !important;
        background: var(--border-color) !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .bill-item[b-xfnb4hb80e] { flex-direction: row-reverse; }

[dir="rtl"] .total-row[b-xfnb4hb80e] { flex-direction: row-reverse; }

[dir="rtl"] .grand-total[b-xfnb4hb80e] { flex-direction: row-reverse; }

[dir="rtl"] .split-header[b-xfnb4hb80e] { flex-direction: row-reverse; }

[dir="rtl"] .split-details[b-xfnb4hb80e] { flex-direction: row-reverse; }

[dir="rtl"] .your-share[b-xfnb4hb80e] { flex-direction: row-reverse; }

[dir="rtl"] .bill-section h3[b-xfnb4hb80e] { flex-direction: row-reverse; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 480px) {
    .bill-content[b-xfnb4hb80e] {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    .bill-page[b-xfnb4hb80e] {
        background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    }

    .bill-content[b-xfnb4hb80e] {
        max-width: 540px;
        padding: 24px;
        padding-bottom: max(100px, calc(env(safe-area-inset-bottom) + 100px));
    }

    .bill-section[b-xfnb4hb80e],
    .bill-totals[b-xfnb4hb80e],
    .tip-section[b-xfnb4hb80e],
    .grand-total[b-xfnb4hb80e],
    .split-info[b-xfnb4hb80e] {
        box-shadow: var(--shadow-md);
    }
}

@media (min-width: 1024px) {
    .bill-content[b-xfnb4hb80e] {
        max-width: 600px;
    }
}
/* _content/QrBiteHub.Web/Components/Pages/Customer/Cart.razor.rz.scp.css */
/* ============================================
   CART PAGE - PREMIUM REDESIGN
   Refined Culinary Journey Aesthetic
   ============================================ */

/* Base Variables */
.cart-page[b-w5qoi316xg] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-elevated: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-glass-strong: rgba(255, 255, 255, 0.95);
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --border-color: #f1f5f9;
    --border-subtle: #e2e8f0;
    --primary: #f58524;
    --primary-soft: #fff7ed;
    --primary-glow: rgba(245, 133, 36, 0.15);
    --success: #22c55e;
    --success-soft: #f0fdf4;
    --danger: #ef4444;
    --danger-soft: #fef2f2;
    --info: #3b82f6;
    --info-soft: #eff6ff;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 4px 20px rgba(245, 133, 36, 0.25);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    min-height: 100dvh;
    background: var(--bg-primary);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Dark Mode */
[data-theme="dark"] .cart-page[b-w5qoi316xg] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-elevated: #1a1a1a;
    --bg-glass: rgba(20, 20, 20, 0.9);
    --bg-glass-strong: rgba(26, 26, 26, 0.95);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --border-color: #1e1e1e;
    --border-subtle: #2a2a2a;
    --primary-soft: rgba(245, 133, 36, 0.12);
    --primary-glow: rgba(245, 133, 36, 0.2);
    --success-soft: rgba(34, 197, 94, 0.12);
    --danger-soft: rgba(239, 68, 68, 0.12);
    --info-soft: rgba(59, 130, 246, 0.12);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ============================================
   TOAST NOTIFICATION
   ============================================ */

.cart-toast[b-w5qoi316xg] {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 16px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    animation: toastSlideIn-b-w5qoi316xg var(--duration-slow) var(--ease-smooth);
}

.cart-toast .toast-icon[b-w5qoi316xg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.cart-toast.success .toast-icon[b-w5qoi316xg] {
    background: var(--success-soft);
    color: var(--success);
}

.cart-toast.error .toast-icon[b-w5qoi316xg] {
    background: var(--danger-soft);
    color: var(--danger);
}

@keyframes toastSlideIn-b-w5qoi316xg {
    0% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.9); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================================
   MODAL & BACKDROP
   ============================================ */

.modal-backdrop[b-w5qoi316xg] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    animation: fadeIn-b-w5qoi316xg var(--duration-normal) var(--ease-smooth);
}

.confirm-modal[b-w5qoi316xg] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 201;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 32px 24px;
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px));
    text-align: center;
    animation: modalSlideUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth);
}

.confirm-icon[b-w5qoi316xg] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--danger-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--danger);
    animation: iconPulse-b-w5qoi316xg 2s ease-in-out infinite;
}

@keyframes iconPulse-b-w5qoi316xg {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

.confirm-modal h3[b-w5qoi316xg] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.confirm-modal p[b-w5qoi316xg] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 28px;
    line-height: 1.5;
}

.confirm-actions[b-w5qoi316xg] {
    display: flex;
    gap: 12px;
}

.confirm-btn[b-w5qoi316xg] {
    flex: 1;
    height: 54px;
    border-radius: var(--radius-md);
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.confirm-btn:focus-visible[b-w5qoi316xg] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.confirm-btn.cancel[b-w5qoi316xg] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.confirm-btn.cancel:hover[b-w5qoi316xg] { background: var(--bg-primary); }
.confirm-btn.cancel:active[b-w5qoi316xg] { transform: scale(0.97); }

.confirm-btn.danger[b-w5qoi316xg] {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.confirm-btn.danger:hover[b-w5qoi316xg] { background: #dc2626; }
.confirm-btn.danger:active[b-w5qoi316xg] { transform: scale(0.97); }

@keyframes fadeIn-b-w5qoi316xg {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp-b-w5qoi316xg {
    from { transform: translateX(-50%) translateY(100%); }
    to { transform: translateX(-50%) translateY(0); }
}

/* ============================================
   HEADER
   ============================================ */

.cart-header[b-w5qoi316xg] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
}

.header-btn[b-w5qoi316xg] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.header-btn:focus-visible[b-w5qoi316xg] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.header-btn.back[b-w5qoi316xg] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.header-btn.back:hover[b-w5qoi316xg] { background: var(--bg-primary); color: var(--text-primary); }
.header-btn.back:active[b-w5qoi316xg] { transform: scale(0.92); }

.header-btn.clear[b-w5qoi316xg] {
    background: var(--danger-soft);
    color: var(--danger);
}

.header-btn.clear:hover[b-w5qoi316xg] { background: rgba(239, 68, 68, 0.15); }
.header-btn.clear:active[b-w5qoi316xg] { transform: scale(0.92); }

.header-btn-placeholder[b-w5qoi316xg] {
    width: 44px;
    flex-shrink: 0;
}

.header-center[b-w5qoi316xg] {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.header-center h1[b-w5qoi316xg] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.3px;
}

.header-sub[b-w5qoi316xg] {
    font-size: 12px;
    color: var(--text-secondary);
}

.header-pin-badge[b-w5qoi316xg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary-soft) 0%, rgba(245, 133, 36, 0.08) 100%);
    border: 1px solid rgba(245, 133, 36, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.3px;
}

.header-pin-badge svg[b-w5qoi316xg] { flex-shrink: 0; opacity: 0.8; }

/* ============================================
   CONTENT AREA
   ============================================ */

.cart-content[b-w5qoi316xg] {
    padding: 0 16px 16px;
    min-height: calc(100dvh - 70px);
}

/* ============================================
   SKELETON LOADING
   ============================================ */

.skeleton-loading[b-w5qoi316xg] {
    padding-top: 16px;
}

.skeleton-section[b-w5qoi316xg] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
    overflow: hidden;
}

.skeleton-header[b-w5qoi316xg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-title[b-w5qoi316xg] {
    height: 18px;
    width: 120px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-w5qoi316xg 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.skeleton-badge[b-w5qoi316xg] {
    height: 24px;
    width: 60px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-w5qoi316xg 1.5s ease-in-out infinite;
    border-radius: 12px;
}

.skeleton-item[b-w5qoi316xg] {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-item:last-child[b-w5qoi316xg] { border-bottom: none; }

.skeleton-image[b-w5qoi316xg] {
    width: 80px;
    height: 80px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-w5qoi316xg 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.skeleton-details[b-w5qoi316xg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-name[b-w5qoi316xg] {
    height: 16px;
    width: 70%;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-w5qoi316xg 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.skeleton-price[b-w5qoi316xg] {
    height: 16px;
    width: 50px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-w5qoi316xg 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.skeleton-stepper[b-w5qoi316xg] {
    height: 48px;
    width: 140px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-w5qoi316xg 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
    margin-top: auto;
}

.skeleton-summary[b-w5qoi316xg] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 18px;
}

.skeleton-row[b-w5qoi316xg] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.skeleton-row:last-child[b-w5qoi316xg] { margin-bottom: 0; }

.skeleton-label[b-w5qoi316xg] {
    height: 14px;
    width: 80px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-w5qoi316xg 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-value[b-w5qoi316xg] {
    height: 14px;
    width: 60px;
    background: linear-gradient(90deg, var(--border-color) 0%, var(--bg-primary) 50%, var(--border-color) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-w5qoi316xg 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes shimmer-b-w5qoi316xg {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-w5qoi316xg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 24px;
    min-height: 60vh;
}

.empty-illustration[b-w5qoi316xg] {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 28px;
}

.empty-circle[b-w5qoi316xg] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-soft) 0%, transparent 60%);
    border-radius: 50%;
    animation: emptyPulse-b-w5qoi316xg 3s ease-in-out infinite;
}

.empty-icon[b-w5qoi316xg] {
    position: absolute;
    inset: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    color: var(--text-tertiary);
}

.empty-icon svg[b-w5qoi316xg] {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
}

@keyframes emptyPulse-b-w5qoi316xg {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

.empty-state h2[b-w5qoi316xg] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.empty-state p[b-w5qoi316xg] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 32px;
    max-width: 260px;
    line-height: 1.5;
}

.browse-btn[b-w5qoi316xg] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.browse-btn:focus-visible[b-w5qoi316xg] {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.browse-btn:hover[b-w5qoi316xg] { background: #e27519; transform: translateY(-1px); }
.browse-btn:active[b-w5qoi316xg] { transform: scale(0.97); }

/* ============================================
   ORDER SECTION
   ============================================ */

.order-section[b-w5qoi316xg] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    animation: fadeInUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth);
}

.section-header[b-w5qoi316xg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}

.section-header h2[b-w5qoi316xg] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.2px;
}

.items-badge[b-w5qoi316xg] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: 0.2px;
}

/* ============================================
   CART ITEMS
   ============================================ */

.cart-items[b-w5qoi316xg] {
    /* Container for items */
}

.cart-item[b-w5qoi316xg] {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--duration-fast) var(--ease-smooth);
    animation: itemFadeIn-b-w5qoi316xg var(--duration-normal) var(--ease-smooth) both;
}

.cart-item:last-child[b-w5qoi316xg] { border-bottom: none; }
.cart-item:hover[b-w5qoi316xg] { background: var(--bg-primary); }

.cart-item:nth-child(1)[b-w5qoi316xg] { animation-delay: 0ms; }
.cart-item:nth-child(2)[b-w5qoi316xg] { animation-delay: 50ms; }
.cart-item:nth-child(3)[b-w5qoi316xg] { animation-delay: 100ms; }
.cart-item:nth-child(4)[b-w5qoi316xg] { animation-delay: 150ms; }
.cart-item:nth-child(5)[b-w5qoi316xg] { animation-delay: 200ms; }

@keyframes itemFadeIn-b-w5qoi316xg {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.item-image[b-w5qoi316xg] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.item-image img[b-w5qoi316xg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    transition: transform var(--duration-normal) var(--ease-smooth);
}

.cart-item:hover .item-image img[b-w5qoi316xg] { transform: scale(1.05); }

.image-placeholder[b-w5qoi316xg] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--bg-primary) 100%);
    color: var(--primary);
}

.item-details[b-w5qoi316xg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.item-header[b-w5qoi316xg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

.item-header h3[b-w5qoi316xg] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.item-price[b-w5qoi316xg] {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.item-modifiers[b-w5qoi316xg] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0 6px;
}

.modifier-tag[b-w5qoi316xg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.08);
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}

.modifier-tag .mod-price[b-w5qoi316xg] {
    color: var(--primary, #f58524);
    font-weight: 600;
}

.item-notes[b-w5qoi316xg] {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 10px;
    line-height: 1.4;
    font-style: italic;
}

.item-actions[b-w5qoi316xg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

/* ============================================
   QUANTITY STEPPER
   ============================================ */

.qty-stepper[b-w5qoi316xg] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 4px;
}

.qty-btn[b-w5qoi316xg] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-sm);
}

.qty-btn:focus-visible[b-w5qoi316xg] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.qty-btn:active[b-w5qoi316xg] { transform: scale(0.9); }

.qty-btn.danger[b-w5qoi316xg] {
    background: var(--danger-soft);
    color: var(--danger);
}

.qty-btn.danger:hover[b-w5qoi316xg] { background: rgba(239, 68, 68, 0.15); }

.qty-btn.plus[b-w5qoi316xg] {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 133, 36, 0.3);
}

.qty-btn.plus:hover[b-w5qoi316xg] { background: #e27519; }

.qty-value[b-w5qoi316xg] {
    min-width: 40px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.remove-btn[b-w5qoi316xg] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.remove-btn:focus-visible[b-w5qoi316xg] {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

.remove-btn:hover[b-w5qoi316xg] { background: var(--danger-soft); border-color: var(--danger); }
.remove-btn:active[b-w5qoi316xg] { transform: scale(0.95); }

/* ============================================
   NOTES SECTION
   ============================================ */

.notes-section[b-w5qoi316xg] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-top: 16px;
    border: 1px solid var(--border-color);
    animation: fadeInUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth);
    animation-delay: 100ms;
    animation-fill-mode: both;
}

.notes-label[b-w5qoi316xg] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.notes-label svg[b-w5qoi316xg] { color: var(--primary); }

.notes-input[b-w5qoi316xg] {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    background: var(--bg-primary);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    resize: none;
    transition: all var(--duration-fast) var(--ease-smooth);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

.notes-input:focus[b-w5qoi316xg] {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.notes-input[b-w5qoi316xg]::placeholder { color: var(--text-tertiary); }

/* ============================================
   COUPON SECTION
   ============================================ */

.coupon-section[b-w5qoi316xg] { margin-top: 16px; animation: fadeInUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth); animation-delay: 120ms; animation-fill-mode: both; }
.coupon-input-group[b-w5qoi316xg] { display: flex; gap: 8px; }
.coupon-input[b-w5qoi316xg] { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 14px; color: var(--text-primary); font-size: 14px; font-family: monospace; letter-spacing: 0.05em; outline: none; transition: border-color 0.2s; }
.coupon-input:focus[b-w5qoi316xg] { border-color: var(--primary); }
.coupon-input[b-w5qoi316xg]::placeholder { color: var(--text-tertiary); text-transform: none; font-family: inherit; letter-spacing: normal; }
.coupon-apply-btn[b-w5qoi316xg] { background: var(--primary); color: #fff; border: none; border-radius: var(--radius-md); padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.coupon-apply-btn:hover:not(:disabled)[b-w5qoi316xg] { background: #e0741a; }
.coupon-apply-btn:disabled[b-w5qoi316xg] { opacity: 0.5; cursor: not-allowed; }
.coupon-spinner[b-w5qoi316xg] { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin-b-w5qoi316xg 0.6s linear infinite; }
@keyframes spin-b-w5qoi316xg { to { transform: rotate(360deg); } }
.coupon-error[b-w5qoi316xg] { color: #f87171; font-size: 12px; margin: 6px 0 0; }
.coupon-applied[b-w5qoi316xg] { display: flex; align-items: center; justify-content: space-between; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.3); border-radius: var(--radius-md); padding: 10px 14px; }
.coupon-applied-info[b-w5qoi316xg] { display: flex; align-items: center; gap: 8px; color: #4ade80; font-size: 14px; font-weight: 600; }
.coupon-applied-info svg[b-w5qoi316xg] { flex-shrink: 0; }
.coupon-savings[b-w5qoi316xg] { color: #4ade80; font-weight: 700; }
.coupon-remove[b-w5qoi316xg] { background: transparent; border: none; color: #888; cursor: pointer; padding: 4px; transition: color 0.2s; }
.coupon-remove:hover[b-w5qoi316xg] { color: #f87171; }
.discount-row[b-w5qoi316xg] { color: #4ade80 !important; }
.discount-row .discount-value[b-w5qoi316xg], .discount-value[b-w5qoi316xg] { color: #4ade80 !important; font-weight: 600; }

/* ============================================
   SUMMARY SECTION
   ============================================ */

.summary-section[b-w5qoi316xg] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 20px 18px;
    margin-top: 16px;
    border: 1px solid var(--border-color);
    animation: fadeInUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth);
    animation-delay: 150ms;
    animation-fill-mode: both;
}

.summary-section h2[b-w5qoi316xg] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 18px;
    letter-spacing: -0.2px;
}

.summary-rows[b-w5qoi316xg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summary-row[b-w5qoi316xg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
}

.summary-row .value[b-w5qoi316xg] {
    font-weight: 600;
    color: var(--text-primary);
}

.summary-divider[b-w5qoi316xg] {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.summary-row.total[b-w5qoi316xg] {
    padding-top: 4px;
}

.summary-row.total span[b-w5qoi316xg] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-row.total .value[b-w5qoi316xg] {
    font-size: 22px;
    color: var(--primary);
    font-weight: 800;
}

/* ============================================
   INFO NOTES & WARNINGS
   ============================================ */

.service-fee-note[b-w5qoi316xg] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--info-soft);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-top: 16px;
    animation: fadeInUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth);
    animation-delay: 200ms;
    animation-fill-mode: both;
}

.service-fee-note svg[b-w5qoi316xg] {
    color: var(--info);
    flex-shrink: 0;
    margin-top: 1px;
}

.service-fee-note p[b-w5qoi316xg] {
    font-size: 13px;
    color: var(--info);
    margin: 0;
    line-height: 1.5;
}

[data-theme="dark"] .service-fee-note p[b-w5qoi316xg] { color: #93c5fd; }

.constraint-warning[b-w5qoi316xg] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--danger-soft);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-top: 12px;
    animation: shake-b-w5qoi316xg 0.4s var(--ease-smooth);
}

.constraint-warning svg[b-w5qoi316xg] {
    color: var(--danger);
    flex-shrink: 0;
}

.constraint-warning span[b-w5qoi316xg] {
    font-size: 13px;
    color: var(--danger);
    line-height: 1.5;
}

[data-theme="dark"] .constraint-warning span[b-w5qoi316xg] { color: #fca5a5; }

@keyframes shake-b-w5qoi316xg {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ============================================
   SUGGESTIONS SECTION
   ============================================ */

.suggestions-section[b-w5qoi316xg] {
    margin-top: 24px;
    animation: fadeInUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth);
    animation-delay: 250ms;
    animation-fill-mode: both;
}

.suggestions-section h3[b-w5qoi316xg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px 4px;
}

.suggestions-section h3[b-w5qoi316xg]::before {
    content: '';
    display: block;
    width: 3px;
    height: 14px;
    background: var(--primary);
    border-radius: 2px;
}

.suggestions-list[b-w5qoi316xg] {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.suggestion-item[b-w5qoi316xg] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--duration-fast) var(--ease-smooth);
    animation: itemFadeIn-b-w5qoi316xg var(--duration-normal) var(--ease-smooth) both;
}

.suggestion-item:last-child[b-w5qoi316xg] { border-bottom: none; }
.suggestion-item:hover[b-w5qoi316xg] { background: var(--bg-primary); }

.suggestion-item:nth-child(1)[b-w5qoi316xg] { animation-delay: 300ms; }
.suggestion-item:nth-child(2)[b-w5qoi316xg] { animation-delay: 350ms; }
.suggestion-item:nth-child(3)[b-w5qoi316xg] { animation-delay: 400ms; }

.suggestion-image[b-w5qoi316xg] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.suggestion-image img[b-w5qoi316xg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.suggestion-info[b-w5qoi316xg] {
    flex: 1;
    min-width: 0;
}

.suggestion-info h4[b-w5qoi316xg] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-price[b-w5qoi316xg] {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.suggestion-add[b-w5qoi316xg] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.suggestion-add:focus-visible[b-w5qoi316xg] {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.suggestion-add:hover[b-w5qoi316xg] {
    background: var(--primary);
    color: #fff;
    transform: scale(1.05);
}

.suggestion-add:active[b-w5qoi316xg] {
    transform: scale(0.9);
    background: var(--primary);
    color: #fff;
}

/* ============================================
   PAYMENT SELECTION
   ============================================ */
.payment-selection[b-w5qoi316xg] { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 18px; margin-top: 16px; border: 1px solid var(--border-color); animation: fadeInUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth); animation-delay: 200ms; animation-fill-mode: both; }
.payment-selection-title[b-w5qoi316xg] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 14px; }
.payment-selection-title svg[b-w5qoi316xg] { color: var(--primary); opacity: 0.8; }
.payment-pills[b-w5qoi316xg] { display: flex; gap: 10px; }
.payment-pill[b-w5qoi316xg] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 12px; border: 2px solid var(--border-subtle); background: var(--bg-primary); cursor: pointer; transition: all 0.2s ease; font-size: 13px; font-weight: 500; color: var(--text-secondary); font-family: inherit; -webkit-tap-highlight-color: transparent; }
.payment-pill:hover[b-w5qoi316xg] { border-color: var(--text-tertiary); }
.payment-pill:active[b-w5qoi316xg] { transform: scale(0.97); }
.payment-pill.selected[b-w5qoi316xg] { border-color: var(--primary, #f58524); background: var(--primary-soft); color: var(--primary, #f58524); }
.payment-pill svg[b-w5qoi316xg] { opacity: 0.6; }
.payment-pill.selected svg[b-w5qoi316xg] { opacity: 1; stroke: var(--primary, #f58524); }

/* ============================================
   CHECKOUT BAR
   ============================================ */

.checkout-bar[b-w5qoi316xg] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    padding: 12px 16px;
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    background: var(--bg-glass-strong);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--border-color);
    z-index: 100;
    animation: checkoutSlideUp-b-w5qoi316xg var(--duration-slow) var(--ease-smooth);
}

@keyframes checkoutSlideUp-b-w5qoi316xg {
    from { transform: translateX(-50%) translateY(100%); }
    to { transform: translateX(-50%) translateY(0); }
}

.checkout-btn[b-w5qoi316xg] {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: all var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

.checkout-btn[b-w5qoi316xg]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.checkout-btn:hover[b-w5qoi316xg]::before {
    transform: translateX(100%);
}

.checkout-btn:focus-visible[b-w5qoi316xg] {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.checkout-btn:hover:not(:disabled)[b-w5qoi316xg] {
    background: #e27519;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(245, 133, 36, 0.35);
}

.checkout-btn:active:not(:disabled)[b-w5qoi316xg] {
    transform: scale(0.98);
}

.checkout-btn:disabled[b-w5qoi316xg] {
    opacity: 0.7;
    cursor: not-allowed;
}

.checkout-btn.loading[b-w5qoi316xg] {
    background: #e27519;
    pointer-events: none;
}

.checkout-btn.blocked[b-w5qoi316xg] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.checkout-btn.payment-required[b-w5qoi316xg] {
    background: var(--text-tertiary);
    opacity: 0.75;
    cursor: default;
    box-shadow: none;
}

.checkout-total[b-w5qoi316xg] {
    padding: 0 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    margin-left: 6px;
    font-weight: 800;
    font-size: 17px;
}

.spinner[b-w5qoi316xg] {
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-w5qoi316xg 0.8s linear infinite;
}

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

.terms-text[b-w5qoi316xg] {
    text-align: center;
    font-size: 11px;
    color: var(--text-tertiary);
    margin: 10px 0 0;
}

.terms-text a[b-w5qoi316xg] {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================
   BOTTOM SPACER
   ============================================ */

.bottom-spacer[b-w5qoi316xg] {
    height: 140px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp-b-w5qoi316xg {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .cart-toast[b-w5qoi316xg],
    .confirm-modal[b-w5qoi316xg],
    .checkout-bar[b-w5qoi316xg],
    .cart-item[b-w5qoi316xg],
    .suggestion-item[b-w5qoi316xg],
    .order-section[b-w5qoi316xg],
    .notes-section[b-w5qoi316xg],
    .summary-section[b-w5qoi316xg],
    .payment-selection[b-w5qoi316xg],
    .suggestions-section[b-w5qoi316xg],
    .service-fee-note[b-w5qoi316xg],
    .constraint-warning[b-w5qoi316xg],
    .header-btn[b-w5qoi316xg],
    .qty-btn[b-w5qoi316xg],
    .confirm-btn[b-w5qoi316xg],
    .browse-btn[b-w5qoi316xg],
    .checkout-btn[b-w5qoi316xg],
    .remove-btn[b-w5qoi316xg],
    .suggestion-add[b-w5qoi316xg],
    .confirm-icon[b-w5qoi316xg],
    .empty-circle[b-w5qoi316xg] {
        animation: none !important;
        transition: opacity var(--duration-fast) ease !important;
    }

    .skeleton-title[b-w5qoi316xg],
    .skeleton-badge[b-w5qoi316xg],
    .skeleton-image[b-w5qoi316xg],
    .skeleton-name[b-w5qoi316xg],
    .skeleton-price[b-w5qoi316xg],
    .skeleton-stepper[b-w5qoi316xg],
    .skeleton-label[b-w5qoi316xg],
    .skeleton-value[b-w5qoi316xg] {
        animation: none !important;
        background: var(--border-color) !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .cart-toast[b-w5qoi316xg] { direction: rtl; }

[dir="rtl"] .item-actions[b-w5qoi316xg] { flex-direction: row-reverse; }

[dir="rtl"] .remove-btn[b-w5qoi316xg] { flex-direction: row-reverse; }

[dir="rtl"] .notes-label[b-w5qoi316xg] { flex-direction: row-reverse; }

[dir="rtl"] .section-header[b-w5qoi316xg] { flex-direction: row-reverse; }

[dir="rtl"] .summary-row[b-w5qoi316xg] { flex-direction: row-reverse; }

[dir="rtl"] .service-fee-note[b-w5qoi316xg],
[dir="rtl"] .constraint-warning[b-w5qoi316xg] {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .checkout-total[b-w5qoi316xg] {
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    margin-left: 0;
    margin-right: 6px;
}

[dir="rtl"] .suggestions-section h3[b-w5qoi316xg] { flex-direction: row-reverse; }

[dir="rtl"] .header-pin-badge[b-w5qoi316xg] { flex-direction: row-reverse; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 480px) {
    .cart-content[b-w5qoi316xg] {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    .cart-page[b-w5qoi316xg] {
        background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    }

    .cart-content[b-w5qoi316xg] {
        max-width: 540px;
        padding: 0 24px 24px;
    }

    .checkout-bar[b-w5qoi316xg] {
        max-width: 540px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border: 1px solid var(--border-color);
        border-bottom: none;
    }

    .empty-state[b-w5qoi316xg] {
        padding: 80px 48px;
    }

    .order-section[b-w5qoi316xg],
    .notes-section[b-w5qoi316xg],
    .summary-section[b-w5qoi316xg],
    .payment-selection[b-w5qoi316xg],
    .suggestions-list[b-w5qoi316xg] {
        box-shadow: var(--shadow-md);
    }
}

@media (min-width: 1024px) {
    .cart-content[b-w5qoi316xg] {
        max-width: 600px;
    }

    .checkout-bar[b-w5qoi316xg] {
        max-width: 600px;
    }
}
/* _content/QrBiteHub.Web/Components/Pages/Customer/Feedback.razor.rz.scp.css */
/* ============================================
   FEEDBACK PAGE - Premium Redesign
   Aesthetic: Refined Culinary Journey
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

.feedback-page[b-qqo6vn4km4] {
    --star-color: #fbbf24;
    --star-glow: rgba(251, 191, 36, 0.4);
    --success-color: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.12);
}

[data-theme="dark"] .feedback-page[b-qqo6vn4km4] {
    --success-bg: rgba(34, 197, 94, 0.15);
}

/* ============================================
   PAGE CONTAINER
   ============================================ */

.feedback-page[b-qqo6vn4km4] {
    min-height: 100dvh;
    background: var(--bg-page, #fafafa);
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

[data-theme="dark"] .feedback-page[b-qqo6vn4km4],
:root:not([data-theme="light"]) .feedback-page[b-qqo6vn4km4] {
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}

/* ============================================
   HEADER - Floating Glass Design
   ============================================ */

.feedback-header[b-qqo6vn4km4] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--bg-glass, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-glass, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

[data-theme="dark"] .feedback-header[b-qqo6vn4km4] {
    background: rgba(10, 10, 10, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.feedback-header h1[b-qqo6vn4km4] {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
}

.back-btn[b-qqo6vn4km4] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.back-btn:hover[b-qqo6vn4km4] {
    background: var(--bg-tertiary);
    transform: translateX(-2px);
}

[dir="rtl"] .back-btn:hover[b-qqo6vn4km4] {
    transform: translateX(2px);
}

.back-btn:focus-visible[b-qqo6vn4km4] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.back-btn:active[b-qqo6vn4km4] {
    transform: scale(0.92);
}

/* ============================================
   CONTENT AREA
   ============================================ */

.feedback-content[b-qqo6vn4km4] {
    padding: 20px 16px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   LOADING STATE - Skeleton
   ============================================ */

.loading-container[b-qqo6vn4km4] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 0;
}

.skeleton-restaurant[b-qqo6vn4km4] {
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-qqo6vn4km4 1.8s ease-in-out infinite;
}

.skeleton-stars[b-qqo6vn4km4] {
    height: 120px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-qqo6vn4km4 1.8s ease-in-out infinite 0.1s;
}

.skeleton-categories[b-qqo6vn4km4] {
    height: 160px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-qqo6vn4km4 1.8s ease-in-out infinite 0.2s;
}

.skeleton-comment[b-qqo6vn4km4] {
    height: 140px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-qqo6vn4km4 1.8s ease-in-out infinite 0.3s;
}

@keyframes shimmer-b-qqo6vn4km4 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fallback spinner */
.c-spinner[b-qqo6vn4km4] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--primary, #f58524);
    border-radius: 50%;
    animation: spin-b-qqo6vn4km4 0.8s linear infinite;
    margin: 48px auto;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-qqo6vn4km4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    min-height: 50vh;
    animation: fadeInUp-b-qqo6vn4km4 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.empty-state svg[b-qqo6vn4km4] {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 24px;
}

.empty-state h2[b-qqo6vn4km4] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.empty-state p[b-qqo6vn4km4] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    max-width: 260px;
}

/* ============================================
   SUCCESS STATE
   ============================================ */

.success-state[b-qqo6vn4km4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    min-height: 50vh;
    animation: fadeIn-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.success-icon[b-qqo6vn4km4] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success-color);
    margin-bottom: 28px;
    animation: scaleIn-b-qqo6vn4km4 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards;
}

.success-icon svg[b-qqo6vn4km4] {
    animation: check-draw-b-qqo6vn4km4 0.4s ease-out 0.3s backwards;
}

@keyframes check-draw-b-qqo6vn4km4 {
    from {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }
    to {
        stroke-dasharray: 100;
        stroke-dashoffset: 0;
    }
}

.success-state h2[b-qqo6vn4km4] {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0 0 12px;
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.success-state p[b-qqo6vn4km4] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 32px;
    max-width: 280px;
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
}

.success-state .c-btn[b-qqo6vn4km4] {
    min-width: 160px;
    min-height: 52px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
}

/* ============================================
   RESTAURANT INFO CARD
   ============================================ */

.restaurant-info[b-qqo6vn4km4] {
    text-align: center;
    padding: 24px;
    margin-bottom: 24px;
    background: var(--bg, #fff);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .restaurant-info[b-qqo6vn4km4] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.restaurant-info h2[b-qqo6vn4km4] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.restaurant-info p[b-qqo6vn4km4] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================
   OVERALL RATING SECTION
   ============================================ */

.rating-section[b-qqo6vn4km4] {
    text-align: center;
    padding: 32px 24px;
    margin-bottom: 20px;
    background: var(--bg, #fff);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s backwards;
}

[data-theme="dark"] .rating-section[b-qqo6vn4km4] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.rating-section h3[b-qqo6vn4km4] {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    margin: 0 0 20px;
}

/* Star Rating - Large */
.star-rating[b-qqo6vn4km4] {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.star-rating.large[b-qqo6vn4km4] {
    gap: 10px;
}

.star[b-qqo6vn4km4] {
    padding: 10px;
    min-width: 48px;
    min-height: 48px;
    border: none;
    background: none;
    border-radius: 12px;
    color: var(--text-muted, #cbd5e1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.star:focus-visible[b-qqo6vn4km4] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.star:hover[b-qqo6vn4km4] {
    transform: scale(1.15);
}

.star:active[b-qqo6vn4km4] {
    transform: scale(0.9);
}

.star.filled[b-qqo6vn4km4] {
    color: var(--star-color);
}

.star.filled[b-qqo6vn4km4]::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: radial-gradient(circle, var(--star-glow) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.6;
    z-index: -1;
    animation: star-glow-b-qqo6vn4km4 2s ease-in-out infinite;
}

@keyframes star-glow-b-qqo6vn4km4 {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.rating-label[b-qqo6vn4km4] {
    display: block;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary, #f58524);
    letter-spacing: -0.2px;
    min-height: 22px;
}

/* ============================================
   CATEGORY RATINGS
   ============================================ */

.category-ratings[b-qqo6vn4km4] {
    padding: 24px;
    margin-bottom: 20px;
    background: var(--bg, #fff);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
}

[data-theme="dark"] .category-ratings[b-qqo6vn4km4] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.category-rating[b-qqo6vn4km4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
}

.category-rating:not(:last-child)[b-qqo6vn4km4] {
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .category-rating:not(:last-child)[b-qqo6vn4km4] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.category-label[b-qqo6vn4km4] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Small star rating */
.star-rating.small[b-qqo6vn4km4] {
    gap: 4px;
}

.star-rating.small .star[b-qqo6vn4km4] {
    padding: 6px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
}

.star-rating.small .star.filled[b-qqo6vn4km4]::after {
    display: none;
}

/* ============================================
   ITEM RATINGS
   ============================================ */

.item-ratings[b-qqo6vn4km4] {
    padding: 24px;
    margin-bottom: 20px;
    background: var(--bg, #fff);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s backwards;
}

[data-theme="dark"] .item-ratings[b-qqo6vn4km4] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.item-ratings h3[b-qqo6vn4km4] {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.section-desc[b-qqo6vn4km4] {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

.item-rating-card[b-qqo6vn4km4] {
    padding: 18px;
    margin-bottom: 14px;
    background: var(--bg-secondary);
    border-radius: 16px;
    transition: all 0.2s;
}

[data-theme="dark"] .item-rating-card[b-qqo6vn4km4] {
    background: rgba(255, 255, 255, 0.04);
}

.item-rating-card:last-child[b-qqo6vn4km4] {
    margin-bottom: 0;
}

.item-info[b-qqo6vn4km4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.item-name[b-qqo6vn4km4] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.item-qty[b-qqo6vn4km4] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg);
    padding: 4px 10px;
    border-radius: 8px;
}

[data-theme="dark"] .item-qty[b-qqo6vn4km4] {
    background: rgba(255, 255, 255, 0.06);
}

/* Quick Tags */
.quick-tags[b-qqo6vn4km4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .quick-tags[b-qqo6vn4km4] {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.tag[b-qqo6vn4km4] {
    padding: 10px 16px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .tag[b-qqo6vn4km4] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.tag:focus-visible[b-qqo6vn4km4] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.tag:hover[b-qqo6vn4km4] {
    border-color: var(--primary, #f58524);
    color: var(--primary, #f58524);
}

.tag:active[b-qqo6vn4km4] {
    transform: scale(0.95);
}

.tag.selected[b-qqo6vn4km4] {
    border-color: var(--primary, #f58524);
    background: var(--primary-light, rgba(245, 133, 36, 0.1));
    color: var(--primary, #f58524);
    font-weight: 600;
}

[data-theme="dark"] .tag.selected[b-qqo6vn4km4] {
    background: rgba(245, 133, 36, 0.15);
}

/* ============================================
   COMMENT SECTION
   ============================================ */

.comment-section[b-qqo6vn4km4] {
    padding: 24px;
    margin-bottom: 20px;
    background: var(--bg, #fff);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

[data-theme="dark"] .comment-section[b-qqo6vn4km4] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.comment-section h3[b-qqo6vn4km4] {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.comment-section textarea[b-qqo6vn4km4] {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: 14px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

[data-theme="dark"] .comment-section textarea[b-qqo6vn4km4] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.comment-section textarea:focus[b-qqo6vn4km4] {
    outline: none;
    border-color: var(--primary, #f58524);
    box-shadow: 0 0 0 4px var(--primary-light, rgba(245, 133, 36, 0.15));
}

.comment-section textarea[b-qqo6vn4km4]::placeholder {
    color: var(--text-muted);
}

/* ============================================
   SUBMIT SECTION
   ============================================ */

.submit-section[b-qqo6vn4km4] {
    padding: 24px 0;
    animation: fadeInUp-b-qqo6vn4km4 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.25s backwards;
}

.submit-section .c-btn[b-qqo6vn4km4] {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

.submit-section .c-btn.primary[b-qqo6vn4km4] {
    background: var(--primary, #f58524);
    box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
}

.submit-section .c-btn.primary:hover:not(:disabled)[b-qqo6vn4km4] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 133, 36, 0.4);
}

.submit-section .c-btn:focus-visible[b-qqo6vn4km4] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 3px;
}

.submit-section .c-btn:active:not(:disabled)[b-qqo6vn4km4] {
    transform: scale(0.98);
}

.submit-section .c-btn:disabled[b-qqo6vn4km4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-qqo6vn4km4] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-qqo6vn4km4 0.8s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
}

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

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn-b-qqo6vn4km4 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp-b-qqo6vn4km4 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn-b-qqo6vn4km4 {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   RESPONSIVE - Tablet+
   ============================================ */

@media (min-width: 768px) {
    .feedback-content[b-qqo6vn4km4] {
        padding: 32px 24px;
    }

    .rating-section[b-qqo6vn4km4],
    .category-ratings[b-qqo6vn4km4],
    .item-ratings[b-qqo6vn4km4],
    .comment-section[b-qqo6vn4km4],
    .restaurant-info[b-qqo6vn4km4] {
        border-radius: 24px;
        padding: 28px;
    }

    .star-rating.large[b-qqo6vn4km4] {
        gap: 14px;
    }

    .star-rating.large .star[b-qqo6vn4km4] {
        min-width: 56px;
        min-height: 56px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .rating-section[b-qqo6vn4km4],
    .category-ratings[b-qqo6vn4km4],
    .item-ratings[b-qqo6vn4km4],
    .comment-section[b-qqo6vn4km4],
    .restaurant-info[b-qqo6vn4km4],
    .submit-section[b-qqo6vn4km4],
    .success-state[b-qqo6vn4km4],
    .success-icon[b-qqo6vn4km4],
    .success-state h2[b-qqo6vn4km4],
    .success-state p[b-qqo6vn4km4],
    .success-state .c-btn[b-qqo6vn4km4],
    .empty-state[b-qqo6vn4km4],
    .skeleton-restaurant[b-qqo6vn4km4],
    .skeleton-stars[b-qqo6vn4km4],
    .skeleton-categories[b-qqo6vn4km4],
    .skeleton-comment[b-qqo6vn4km4],
    .star.filled[b-qqo6vn4km4]::after,
    .c-spinner[b-qqo6vn4km4] {
        animation: none !important;
        transition: opacity 0.2s, transform 0.15s !important;
    }

    .star:hover[b-qqo6vn4km4],
    .submit-section .c-btn:hover[b-qqo6vn4km4],
    .back-btn:hover[b-qqo6vn4km4],
    .tag:active[b-qqo6vn4km4] {
        transform: none !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .feedback-header h1[b-qqo6vn4km4] {
    text-align: center;
}

[dir="rtl"] .category-rating[b-qqo6vn4km4] {
    flex-direction: row-reverse;
}

[dir="rtl"] .item-info[b-qqo6vn4km4] {
    flex-direction: row-reverse;
}

[dir="rtl"] .star-rating[b-qqo6vn4km4] {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-spinner[b-qqo6vn4km4] {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .quick-tags[b-qqo6vn4km4] {
    direction: rtl;
}
/* _content/QrBiteHub.Web/Components/Pages/Customer/Menu.razor.rz.scp.css */
/* ============================================
   MENU PAGE - RENOVATED CSS (Blazor CSS Isolation)
   Blueprint: CUSTOMER_MENU_UX_IMPROVEMENTS.md
   ============================================ */


/* ============================================
   1. TOAST NOTIFICATION
   ============================================ */

.toast-popup[b-8oxwbnpooe] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast, 400);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    padding-top: calc(var(--safe-top, 0px) + 14px);
    background: var(--text-primary, #0f172a);
    color: var(--text-inverse, #fff);
    border-radius: 0 0 var(--radius, 14px) var(--radius, 14px);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.2));
    animation: toastSlideDown-b-8oxwbnpooe 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    max-width: calc(100% - 32px);
}

.toast-check[b-8oxwbnpooe] {
    width: 22px;
    height: 22px;
    background: var(--success, #22c55e);
    border-radius: var(--radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@keyframes toastSlideDown-b-8oxwbnpooe {
    from { opacity: 0; transform: translateX(-50%) translateY(-100%); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================
   2. SKELETON LOADING (3.1-3.5)
   ============================================ */

.menu-loading[b-8oxwbnpooe] {
    padding: 0;
    background: var(--bg, #fff);
    min-height: 100dvh;
}

.loading-header[b-8oxwbnpooe] {
    height: 64px;
    background: linear-gradient(90deg, var(--bg-secondary, #f1f5f9) 25%, var(--bg-tertiary, #e2e8f0) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-8oxwbnpooe 1.5s infinite;
}

.loading-search[b-8oxwbnpooe] {
    height: 48px;
    margin: 12px 16px;
    border-radius: var(--radius, 14px);
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-8oxwbnpooe 1.5s infinite;
}

.loading-categories[b-8oxwbnpooe] {
    display: flex;
    gap: 10px;
    padding: 0 16px 16px;
    overflow: hidden;
}

.loading-pill[b-8oxwbnpooe] {
    width: 90px;
    height: 40px;
    border-radius: var(--radius-full, 24px);
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-8oxwbnpooe 1.5s infinite;
    flex-shrink: 0;
}

.loading-pill:nth-child(2)[b-8oxwbnpooe] { width: 70px; animation-delay: 0.1s; }
.loading-pill:nth-child(3)[b-8oxwbnpooe] { width: 100px; animation-delay: 0.2s; }
.loading-pill:nth-child(4)[b-8oxwbnpooe] { width: 80px; animation-delay: 0.3s; }
.loading-pill:nth-child(5)[b-8oxwbnpooe] { width: 60px; animation-delay: 0.4s; }

.loading-items[b-8oxwbnpooe] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
}

.loading-card[b-8oxwbnpooe] {
    display: flex;
    gap: 14px;
    padding: 12px;
    background: var(--bg, #fff);
    border-radius: var(--radius, 16px);
    border: 1px solid var(--border-light, #f1f5f9);
}

.loading-img[b-8oxwbnpooe] {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-sm, 12px);
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-8oxwbnpooe 1.5s infinite;
    flex-shrink: 0;
}

.loading-text[b-8oxwbnpooe] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.loading-line[b-8oxwbnpooe] {
    height: 14px;
    border-radius: var(--radius-xs, 6px);
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-8oxwbnpooe 1.5s infinite;
}

.loading-line.w-70[b-8oxwbnpooe] { width: 70%; }
.loading-line.w-50[b-8oxwbnpooe] { width: 50%; }
.loading-line.w-30[b-8oxwbnpooe] { width: 30%; margin-top: auto; }

@keyframes shimmer-b-8oxwbnpooe {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* View only banner */
.view-only-banner[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 8px 16px 0;
    background: var(--primary-ghost, rgba(245, 133, 36, 0.15));
    border: 1px solid rgba(245, 133, 36, 0.3);
    border-radius: var(--radius-sm, 8px);
    color: var(--primary, #f58524);
    font-size: 13px;
}

/* ============================================
   4. SEARCH BAR (7.1-7.5)
   ============================================ */

.search-section[b-8oxwbnpooe] {
    padding: 12px 16px;
    background: var(--bg-page, #f8fafc);
}

.search-field[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    height: 44px; /* 44px height (7.5) */
    background: var(--bg, #fff);
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 14px);
    transition: all var(--duration-fast) var(--ease-out);
    box-shadow: var(--shadow-inset, inset 0 1px 2px rgba(0,0,0,0.02));
}

/* Border primary on focus (7.4) */
.search-field:focus-within[b-8oxwbnpooe] {
    border-color: var(--primary, #f58524);
    box-shadow: 0 0 0 3px var(--primary-ghost, rgba(245, 133, 36, 0.1));
}

.search-field svg[b-8oxwbnpooe] {
    color: var(--text-muted, #94a3b8);
    flex-shrink: 0;
}

.search-field input[b-8oxwbnpooe] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--text-primary, #0f172a);
    outline: none;
}

.search-field input[b-8oxwbnpooe]::placeholder {
    color: var(--text-muted, #94a3b8);
}

/* Clear button scale transition (7.3) */
.clear-btn[b-8oxwbnpooe] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-tertiary, #e2e8f0);
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-spring);
}

.clear-btn:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.clear-btn:active[b-8oxwbnpooe] {
    transform: scale(0.85);
}

/* ============================================
   5. CATEGORY TABS (4.1-4.5)
   ============================================ */

/* Sticky below header (4.1) */
.category-tabs[b-8oxwbnpooe] {
    position: sticky;
    top: calc(var(--safe-top, 0px) + 68px); /* Header height + safe area */
    z-index: 90;
    background: var(--bg-page, #f8fafc);
    padding-bottom: 12px;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast);
}

/* Border on scroll (4.2) - applied via JS */
.category-tabs.scrolled[b-8oxwbnpooe] {
    border-color: var(--border-light, #f1f5f9);
}

.tabs-scroll[b-8oxwbnpooe] {
    display: flex;
    gap: 10px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tabs-scroll[b-8oxwbnpooe]::-webkit-scrollbar {
    display: none;
}

.tab[b-8oxwbnpooe] {
    padding: 10px 20px;
    border-radius: var(--radius-full, 24px);
    border: 1.5px solid var(--border, #e2e8f0);
    background: var(--bg, #fff);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--duration-normal) var(--ease-out);
}

.tab:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.tab:active[b-8oxwbnpooe] {
    transform: scale(0.95);
}

/* Active chip with box-shadow (4.5) */
.tab.active[b-8oxwbnpooe] {
    background: var(--primary, #f58524);
    border-color: var(--primary);
    color: var(--text-on-primary, #fff);
    box-shadow: var(--shadow-orange, 0 4px 14px rgba(245, 133, 36, 0.35));
}

.tab:not(.active):hover[b-8oxwbnpooe] {
    border-color: var(--primary);
    color: var(--primary);
}

/* Item count badge (4.4) */
.tab-count[b-8oxwbnpooe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-full, 9999px);
    font-size: 11px;
    font-weight: 600;
}

.tab.active .tab-count[b-8oxwbnpooe] {
    background: rgba(255, 255, 255, 0.25);
}

[dir="rtl"] .tab-count[b-8oxwbnpooe] {
    margin-left: 0;
    margin-right: 6px;
}

/* ============================================
   6. MENU MAIN CONTENT (9.1-9.6)
   ============================================ */

.menu-main[b-8oxwbnpooe] {
    padding: 16px;
    min-height: calc(100dvh - 200px); /* 100dvh (9.1) */
    background: var(--bg-page, #f8fafc);
    overscroll-behavior: contain; /* (9.2) */
}

/* Dynamic bottom padding (9.6) */
.menu-bottom-space[b-8oxwbnpooe] {
    height: 100px;
}

.menu-bottom-space.has-cart[b-8oxwbnpooe] {
    height: calc(80px + var(--safe-bottom, 0px));
}

/* No Results */
.no-results[b-8oxwbnpooe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
}

.no-results-icon[b-8oxwbnpooe] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--primary-light, #fff7ed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #f58524);
    margin-bottom: 20px;
}

.no-results h3[b-8oxwbnpooe] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 8px;
}

.no-results p[b-8oxwbnpooe] {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

/* ============================================
   7. POPULAR SECTION
   ============================================ */

.popular-section[b-8oxwbnpooe] {
    margin-bottom: 28px;
}

/* Section titles: 18px, weight 700 (10.2) */
.popular-heading[b-8oxwbnpooe] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.3px;
    margin: 0 0 14px 4px;
}

.popular-grid[b-8oxwbnpooe] {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
    gap: 12px;
}

@media (max-width: 400px) {
    .popular-grid[b-8oxwbnpooe] { grid-template-columns: 1fr; }
}

.popular-card[b-8oxwbnpooe] {
    flex-direction: column;
}

.popular-card .item-image[b-8oxwbnpooe] {
    width: 100%;
    height: 120px;
}

/* ============================================
   8. MENU SECTION
   ============================================ */

.menu-section[b-8oxwbnpooe] {
    margin-bottom: 28px;
    animation: fadeInUp-b-8oxwbnpooe var(--duration-normal) var(--ease-out) both;
}

/* Staggered animation (8.8) */
.menu-section:nth-child(1)[b-8oxwbnpooe] { animation-delay: 0ms; }
.menu-section:nth-child(2)[b-8oxwbnpooe] { animation-delay: 50ms; }
.menu-section:nth-child(3)[b-8oxwbnpooe] { animation-delay: 100ms; }
.menu-section:nth-child(4)[b-8oxwbnpooe] { animation-delay: 150ms; }
.menu-section:nth-child(5)[b-8oxwbnpooe] { animation-delay: 200ms; }

@keyframes fadeInUp-b-8oxwbnpooe {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.section-accent[b-8oxwbnpooe] {
    width: 4px;
    height: 24px;
    border-radius: 4px;
    background: var(--primary, #f58524);
}

/* Section title: 18px, weight 700 (10.2) */
.section-heading[b-8oxwbnpooe] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.3px;
    margin: 0;
}

/* Subcategory headers */
.subcategory-header[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    margin-bottom: 12px;
}

.subcategory-name[b-8oxwbnpooe] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary, #555);
}

.subcategory-count[b-8oxwbnpooe] {
    padding: 2px 8px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #999);
}

[b-8oxwbnpooe] [data-theme="dark"] .subcategory-header {
    border-bottom-color: rgba(255,255,255,0.08);
}

[b-8oxwbnpooe] [data-theme="dark"] .subcategory-count {
    background: #1a1a1a;
}

.menu-grid[b-8oxwbnpooe] {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
    gap: 12px;
}

@media (max-width: 400px) {
    .menu-grid[b-8oxwbnpooe] { grid-template-columns: 1fr; }
}

/* ============================================
   9. ITEM CARD (8.1-8.8)
   ============================================ */

.item-card[b-8oxwbnpooe] {
    display: flex;
    flex-direction: column;
    background: var(--bg, #fff); /* Pure white (10.7) */
    border-radius: var(--radius, 16px);
    border: 1px solid var(--border-light, #f1f5f9); /* Lighter border (10.6) */
    overflow: hidden;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
}

/* Card press feedback: scale(0.98) (8.7) */
.item-card:active[b-8oxwbnpooe] {
    transform: scale(0.98);
}

.item-card:hover[b-8oxwbnpooe] {
    box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,0.08));
}

/* Card pulse on add (1.5) */
.item-card.adding[b-8oxwbnpooe] {
    animation: cardPulse-b-8oxwbnpooe 0.5s var(--ease-out);
}

@keyframes cardPulse-b-8oxwbnpooe {
    0% { box-shadow: 0 0 0 0 var(--primary-glow, rgba(245, 133, 36, 0.4)); }
    50% { box-shadow: 0 0 0 10px rgba(245, 133, 36, 0); }
    100% { box-shadow: none; }
}

.item-image[b-8oxwbnpooe] {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: var(--bg-page, #f8fafc);
}

.item-image img[b-8oxwbnpooe] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient placeholder (8.3) */
.image-placeholder[b-8oxwbnpooe] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-light, #fff7ed) 0%, var(--bg-page, #f8fafc) 100%);
    color: var(--primary, #f58524);
}

.badge[b-8oxwbnpooe] {
    position: absolute;
    top: 8px;
    padding: 5px 10px;
    border-radius: var(--radius-xs, 6px);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Featured badge with box-shadow (8.5) */
.badge.bestseller[b-8oxwbnpooe] {
    left: 8px;
    background: rgba(255,255,255,0.95);
    color: var(--primary, #f58524);
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.1));
}

.badge.sale[b-8oxwbnpooe] {
    right: 8px;
    background: var(--danger, #ef4444);
    color: #fff;
}

[dir="rtl"] .badge.bestseller[b-8oxwbnpooe] { left: auto; right: 8px; }
[dir="rtl"] .badge.sale[b-8oxwbnpooe] { right: auto; left: 8px; }

/* Card padding: 12px (8.1) */
.item-info[b-8oxwbnpooe] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
}

/* Item name: 15px, weight 600 (10.3) */
.item-info h3[b-8oxwbnpooe] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin: 0 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Description: -webkit-line-clamp: 2 (8.4) */
.item-desc[b-8oxwbnpooe] {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-bottom[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
}

.item-price[b-8oxwbnpooe] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Price: 16px, weight 700 (10.4) */
.price-now[b-8oxwbnpooe] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

/* Discount price in red (8.6) */
.price-now.discount[b-8oxwbnpooe] {
    color: var(--danger, #ef4444);
}

.price-was[b-8oxwbnpooe] {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    text-decoration: line-through;
}

.out-stock[b-8oxwbnpooe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--danger, #ef4444);
    background: var(--danger-light, #fef2f2);
    padding: 5px 10px;
    border-radius: var(--radius-xs, 6px);
}

/* ============================================
   10. ADD BUTTON (1.1, 1.3, 1.4)
   ============================================ */

/* Quick-add button: 44px (1.1) */
.add-btn[b-8oxwbnpooe] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 9999px);
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.add-btn:hover[b-8oxwbnpooe] {
    background: var(--bg-tertiary, #e2e8f0);
}

.add-btn:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

/* Active scale-down: 0.92 (1.3) */
.add-btn:active[b-8oxwbnpooe] {
    transform: scale(0.92);
}

.add-btn.featured[b-8oxwbnpooe] {
    background: var(--primary, #f58524);
    color: var(--text-on-primary, #fff);
    box-shadow: var(--shadow-orange, 0 4px 12px rgba(245, 133, 36, 0.35));
}

/* Bounce animation on add (1.4) */
.add-btn.added[b-8oxwbnpooe] {
    background: var(--success, #22c55e);
    color: #fff;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    animation: buttonBounce-b-8oxwbnpooe 0.4s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

@keyframes buttonBounce-b-8oxwbnpooe {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ============================================
   11. CART FLOATING BAR (5.1-5.6)
   ============================================ */

.cart-float[b-8oxwbnpooe] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    padding: 16px;
    padding-bottom: calc(var(--safe-bottom, 0px) + 16px); /* Safe area (5.4) */
    z-index: var(--z-sticky, 100);
    animation: cartSlideUp-b-8oxwbnpooe 0.4s cubic-bezier(0.32, 0.72, 0, 1); /* Slide-up animation (5.1) */
}

@keyframes cartSlideUp-b-8oxwbnpooe {
    from { transform: translateX(-50%) translateY(100%); }
    to { transform: translateX(-50%) translateY(0); }
}

/* Rounded dark card design (5.2) */
.cart-float-btn[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    background: var(--text-primary, #0f172a);
    color: var(--text-inverse, #fff);
    border: none;
    border-radius: var(--radius, 16px);
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow-xl, 0 12px 40px rgba(0,0,0,0.25));
    transition: all var(--duration-fast) var(--ease-out);
}

.cart-float-btn:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

/* Active scale feedback (5.6) */
.cart-float-btn:active[b-8oxwbnpooe] {
    transform: scale(0.98);
}

.cart-left[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Item count badge (5.3) */
.cart-qty-badge[b-8oxwbnpooe] {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: var(--primary, #f58524);
    border-radius: var(--radius-sm, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.cart-info[b-8oxwbnpooe] {
    display: flex;
    flex-direction: column;
}

.cart-label[b-8oxwbnpooe] {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.7;
}

.cart-amount[b-8oxwbnpooe] {
    font-size: 16px;
    font-weight: 700;
}

.cart-right[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-text[b-8oxwbnpooe] {
    font-size: 14px;
    font-weight: 600;
}

/* ============================================
   12. ITEM DETAIL SHEET (6.1-6.9)
   ============================================ */

/* Backdrop fade animation (6.3) */
.sheet-overlay[b-8oxwbnpooe] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay, rgba(0, 0, 0, 0.5));
    z-index: var(--z-overlay, 200);
    animation: backdropFadeIn-b-8oxwbnpooe 0.25s ease-out;
}

@keyframes backdropFadeIn-b-8oxwbnpooe {
    from { opacity: 0; }
    to { opacity: 1; }
}

.item-sheet[b-8oxwbnpooe] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    max-height: 90dvh;
    background: var(--bg, #fff);
    border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0;
    z-index: var(--z-modal, 201);
    display: flex;
    flex-direction: column;
    /* Smooth slide-up animation (6.2) */
    animation: sheetSlideUp-b-8oxwbnpooe 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes sheetSlideUp-b-8oxwbnpooe {
    from { transform: translateX(-50%) translateY(100%); }
    to { transform: translateX(-50%) translateY(0); }
}

/* Drag handle: 36px × 4px (6.1) */
.sheet-drag-handle[b-8oxwbnpooe] {
    width: 36px;
    height: 4px;
    background: var(--border, #e2e8f0);
    border-radius: var(--radius-full);
    margin: 10px auto 0;
}

/* Close button styled as circle (6.4) */
.sheet-close-btn[b-8oxwbnpooe] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--duration-fast);
}

.sheet-close-btn:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.sheet-close-btn:active[b-8oxwbnpooe] {
    transform: scale(0.9);
    background: var(--bg-tertiary, #e2e8f0);
}

[dir="rtl"] .sheet-close-btn[b-8oxwbnpooe] {
    right: auto;
    left: 12px;
}

.sheet-content[b-8oxwbnpooe] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Image height: 220px (6.5) */
.sheet-hero[b-8oxwbnpooe] {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.sheet-hero img[b-8oxwbnpooe] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sheet-details[b-8oxwbnpooe] {
    padding: 20px;
    padding-bottom: calc(var(--safe-bottom, 0px) + 20px);
}

.sheet-details h2[b-8oxwbnpooe] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.sheet-desc[b-8oxwbnpooe] {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    line-height: 1.6;
    margin: 0 0 16px;
}

.sheet-tags[b-8oxwbnpooe] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.tag[b-8oxwbnpooe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-page, #f8fafc);
    border-radius: var(--radius-full, 20px);
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

.tag.warning[b-8oxwbnpooe] {
    background: #fef3c7;
    color: #d97706;
}

/* Price: 28px, primary color (6.6) */
.sheet-price-row[b-8oxwbnpooe] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 24px;
}

.big-price[b-8oxwbnpooe] {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary, #f58524);
}

.old-price[b-8oxwbnpooe] {
    font-size: 18px;
    color: var(--text-muted, #94a3b8);
    text-decoration: line-through;
}

/* Quantity buttons: 48px (6.7) */
.qty-picker[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.qty-btn[b-8oxwbnpooe] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius, 14px);
    border: 1.5px solid var(--border, #e2e8f0);
    background: var(--bg, #fff);
    color: var(--text-primary, #0f172a);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.qty-btn:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

/* Border highlight on press (6.7) */
.qty-btn:active:not(:disabled)[b-8oxwbnpooe] {
    transform: scale(0.92);
    border-color: var(--primary, #f58524);
    color: var(--primary);
}

.qty-btn:disabled[b-8oxwbnpooe] {
    opacity: 0.35;
    cursor: not-allowed;
}

.qty-btn.plus[b-8oxwbnpooe] {
    background: var(--primary-light, #fff7ed);
    border-color: var(--primary-light);
    color: var(--primary, #f58524);
}

.qty-btn.plus:active[b-8oxwbnpooe] {
    background: #fed7aa;
}

.qty-num[b-8oxwbnpooe] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    min-width: 48px;
    text-align: center;
}

/* Notes Box */
.notes-box[b-8oxwbnpooe] {
    margin-bottom: 20px;
}

.notes-box label[b-8oxwbnpooe] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-bottom: 8px;
}

.notes-box textarea[b-8oxwbnpooe] {
    width: 100%;
    height: 80px;
    padding: 12px 14px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    background: var(--bg-page, #f8fafc);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary, #0f172a);
    resize: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.notes-box textarea:focus[b-8oxwbnpooe] {
    outline: none;
    background: var(--bg, #fff);
    border-color: var(--primary, #f58524);
    box-shadow: 0 0 0 3px var(--primary-ghost, rgba(245, 133, 36, 0.1));
}

/* Add-to-cart button: 54px height (6.8) */
.sheet-add-btn[b-8oxwbnpooe] {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--primary, #f58524);
    color: var(--text-on-primary, #fff);
    border: none;
    border-radius: var(--radius, 14px);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-orange, 0 4px 16px rgba(245, 133, 36, 0.3));
    transition: all var(--duration-fast) var(--ease-out);
}

.sheet-add-btn:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.sheet-add-btn:active:not(:disabled)[b-8oxwbnpooe] {
    transform: scale(0.98);
}

.sheet-add-btn:disabled[b-8oxwbnpooe] {
    background: var(--bg-tertiary, #e2e8f0);
    color: var(--text-muted, #94a3b8);
    box-shadow: none;
    cursor: not-allowed;
}

.sheet-add-btn .divider[b-8oxwbnpooe] {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.3);
}

.sheet-add-btn .btn-price[b-8oxwbnpooe] {
    font-weight: 700;
}

/* ============================================
   13. PIN MODAL
   ============================================ */

.pin-modal-overlay[b-8oxwbnpooe] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay-heavy, rgba(0,0,0,0.6));
    z-index: 300;
    animation: backdropFadeIn-b-8oxwbnpooe 0.2s ease;
}

.pin-modal[b-8oxwbnpooe] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 360px;
    background: var(--bg, #fff);
    border-radius: var(--radius-xl, 24px);
    padding: 32px 24px;
    z-index: 301;
    text-align: center;
    animation: modalPop-b-8oxwbnpooe 0.3s var(--ease-spring);
}

.pin-modal.pin-display[b-8oxwbnpooe] {
    padding-top: 48px;
}

@keyframes modalPop-b-8oxwbnpooe {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.pin-modal-icon[b-8oxwbnpooe] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--primary-light, #fff7ed);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary, #f58524);
}

.pin-modal-icon.success[b-8oxwbnpooe] {
    background: #dcfce7;
    color: var(--success, #22c55e);
}

.pin-modal h2[b-8oxwbnpooe] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 8px;
}

.pin-modal p[b-8oxwbnpooe] {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    line-height: 1.5;
    margin: 0 0 24px;
}

.pin-display-code[b-8oxwbnpooe] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
}

.pin-digit[b-8oxwbnpooe] {
    width: 56px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-light, #fff7ed) 0%, #fed7aa 100%);
    border-radius: var(--radius, 12px);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 32px;
    font-weight: 700;
    color: var(--primary, #f58524);
    box-shadow: var(--shadow-orange, 0 4px 12px rgba(245,133,36,0.2));
}

.pin-note[b-8oxwbnpooe] {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    margin: 0 0 20px;
}

.pin-got-it-btn[b-8oxwbnpooe] {
    width: 100%;
    height: 52px;
    background: var(--success, #22c55e);
    color: #fff;
    border: none;
    border-radius: var(--radius, 12px);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.pin-got-it-btn:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.pin-got-it-btn:active[b-8oxwbnpooe] {
    transform: scale(0.98);
}

.pin-close-btn[b-8oxwbnpooe] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pin-close-btn:focus-visible[b-8oxwbnpooe] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.pin-close-btn:active[b-8oxwbnpooe] {
    transform: scale(0.9);
    background: var(--bg-tertiary, #e2e8f0);
}

[dir="rtl"] .pin-close-btn[b-8oxwbnpooe] {
    right: auto;
    left: 12px;
}

/* ============================================
   14. RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 480px) {
    .popular-grid[b-8oxwbnpooe],
    .menu-grid[b-8oxwbnpooe] {
        --grid-cols: 2;
        gap: 16px;
    }

    .item-image[b-8oxwbnpooe] {
        height: 140px;
    }

    .popular-card .item-image[b-8oxwbnpooe] {
        height: 140px;
    }
}

@media (min-width: 768px) {
    .menu-main[b-8oxwbnpooe] {
        max-width: 600px;
        margin: 0 auto;
    }

    .cart-float[b-8oxwbnpooe] {
        max-width: 600px;
    }

    .item-sheet[b-8oxwbnpooe] {
        max-width: 500px;
        border-radius: var(--radius-xl, 28px);
        bottom: 20px;
        max-height: 85dvh;
    }
}

@media (min-width: 1024px) {
    .popular-grid[b-8oxwbnpooe],
    .menu-grid[b-8oxwbnpooe] {
        --grid-cols: 3;
    }
}

/* ============================================
   15B. IMAGE SKELETON LOADERS
   ============================================ */

.img-skeleton-wrap[b-8oxwbnpooe] {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-skeleton[b-8oxwbnpooe] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-secondary, #f1f5f9) 25%, var(--bg-tertiary, #e2e8f0) 50%, var(--bg-secondary, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: imgShimmer-b-8oxwbnpooe 1.5s ease-in-out infinite;
    border-radius: inherit;
    z-index: 1;
}

@keyframes imgShimmer-b-8oxwbnpooe {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.img-skeleton-wrap img[b-8oxwbnpooe] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.img-skeleton-wrap img.loaded[b-8oxwbnpooe] {
    opacity: 1;
}

/* ============================================
   16. REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .menu-section[b-8oxwbnpooe],
    .cart-float[b-8oxwbnpooe],
    .item-sheet[b-8oxwbnpooe],
    .sheet-overlay[b-8oxwbnpooe],
    .toast-popup[b-8oxwbnpooe],
    .add-btn.added[b-8oxwbnpooe],
    .item-card.adding[b-8oxwbnpooe] {
        animation: none;
    }

    .loading-header[b-8oxwbnpooe],
    .loading-search[b-8oxwbnpooe],
    .loading-pill[b-8oxwbnpooe],
    .loading-img[b-8oxwbnpooe],
    .loading-line[b-8oxwbnpooe],
    .img-skeleton[b-8oxwbnpooe] {
        animation: none;
        background: var(--bg-secondary);
    }

    .img-skeleton-wrap img[b-8oxwbnpooe] {
        opacity: 1;
        transition: none;
    }
}

/* ============================================
   17. TAP HIGHLIGHT REMOVAL (1.6)
   ============================================ */

.tab[b-8oxwbnpooe],
.add-btn[b-8oxwbnpooe],
.item-card[b-8oxwbnpooe],
.cart-float-btn[b-8oxwbnpooe],
.sheet-close-btn[b-8oxwbnpooe],
.qty-btn[b-8oxwbnpooe],
.sheet-add-btn[b-8oxwbnpooe],
.pin-got-it-btn[b-8oxwbnpooe],
.clear-btn[b-8oxwbnpooe] {
    -webkit-tap-highlight-color: transparent;
}

/* ===== OPTION GROUPS IN ITEM SHEET ===== */
.sheet-options[b-8oxwbnpooe] { display: flex; flex-direction: column; gap: 20px; margin: 16px 0 8px; }

.option-group-section[b-8oxwbnpooe] { display: flex; flex-direction: column; gap: 8px; }
.option-group-section.unsatisfied .group-name[b-8oxwbnpooe] { color: #f97316; }

.option-group-label[b-8oxwbnpooe] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.group-name[b-8oxwbnpooe] { font-size: 15px; font-weight: 600; color: var(--text-primary, #0f172a); }
.group-rule[b-8oxwbnpooe] { font-size: 12px; color: var(--text-muted, #94a3b8); }
.group-rule.required[b-8oxwbnpooe] { color: #f97316; font-weight: 500; }
.group-desc[b-8oxwbnpooe] { font-size: 12px; color: var(--text-muted, #94a3b8); margin: 0; }

.option-choices[b-8oxwbnpooe] { display: flex; flex-direction: column; gap: 4px; }

.option-choice[b-8oxwbnpooe] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--bg-secondary, #f1f5f9); border: 1px solid var(--border-light, #e2e8f0);
    color: var(--text-primary, #0f172a); font-size: 14px;
    cursor: pointer; transition: all 0.15s; text-align: start; width: 100%;
}
.option-choice:hover[b-8oxwbnpooe] { background: var(--bg-tertiary, #e2e8f0); }
.option-choice.selected[b-8oxwbnpooe] { background: rgba(245,133,36,0.1); border-color: rgba(245,133,36,0.4); }
.option-choice.disabled[b-8oxwbnpooe] { opacity: 0.35; cursor: not-allowed; }

.choice-indicator[b-8oxwbnpooe] { flex-shrink: 0; display: flex; align-items: center; }

.choice-indicator .radio[b-8oxwbnpooe] {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border, #cbd5e1); transition: all 0.15s;
}
.choice-indicator .radio.checked[b-8oxwbnpooe] { border-color: #f58524; border-width: 6px; }

.choice-indicator .checkbox[b-8oxwbnpooe] {
    width: 20px; height: 20px; border-radius: 5px;
    border: 2px solid var(--border, #cbd5e1); transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.choice-indicator .checkbox.checked[b-8oxwbnpooe] { background: #f58524; border-color: #f58524; }
.choice-indicator .checkbox.checked svg[b-8oxwbnpooe] { color: #fff; }

.choice-name[b-8oxwbnpooe] { flex: 1; min-width: 0; }
.choice-price[b-8oxwbnpooe] { font-size: 13px; color: #f58524; font-weight: 500; white-space: nowrap; }

/* Solo add-on toggle (single-option groups rendered as standalone checkbox) */
.solo-addon[b-8oxwbnpooe] { border-radius: 12px; }
.solo-addon .choice-name[b-8oxwbnpooe] { font-weight: 500; }

.choice-qty[b-8oxwbnpooe] {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; flex-shrink: 0;
}
.choice-qty-btn[b-8oxwbnpooe] {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--bg-tertiary, #e2e8f0); border: 1px solid var(--border-light, #e2e8f0);
    color: var(--text-primary, #0f172a); font-size: 14px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.choice-qty-btn:hover[b-8oxwbnpooe] { background: var(--bg-secondary, #f1f5f9); }
.choice-qty-btn:disabled[b-8oxwbnpooe] { opacity: 0.3; cursor: not-allowed; }
.choice-qty span[b-8oxwbnpooe] { font-size: 13px; font-weight: 600; min-width: 16px; text-align: center; color: var(--text-primary, #0f172a); }

/* Dark mode overrides for option groups */
[data-theme="dark"] .group-name[b-8oxwbnpooe] { color: #fff; }
[data-theme="dark"] .group-rule[b-8oxwbnpooe] { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .group-desc[b-8oxwbnpooe] { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .option-choice[b-8oxwbnpooe] { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
[data-theme="dark"] .option-choice:hover[b-8oxwbnpooe] { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .choice-indicator .radio[b-8oxwbnpooe] { border-color: rgba(255,255,255,0.3); }
[data-theme="dark"] .choice-indicator .checkbox[b-8oxwbnpooe] { border-color: rgba(255,255,255,0.3); }
[data-theme="dark"] .choice-qty-btn[b-8oxwbnpooe] { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: #fff; }
[data-theme="dark"] .choice-qty-btn:hover[b-8oxwbnpooe] { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .choice-qty span[b-8oxwbnpooe] { color: #fff; }

/* RTL support for option groups */
[dir="rtl"] .choice-qty[b-8oxwbnpooe] { margin-left: 0; margin-right: auto; }
/* _content/QrBiteHub.Web/Components/Pages/Customer/MyOrders.razor.rz.scp.css */
/* ============================================
   MY ORDERS PAGE - Always Dark Theme
   Refined Culinary Journey
   ============================================ */

/* Page Container — dark by default */
.my-orders-page[b-iiw1z2rx9a] {
    min-height: 100dvh;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    color: #f5f5f5;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-iiw1z2rx9a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 80px 20px;
}

.loading-state span[b-iiw1z2rx9a] {
    color: #6b6b6b;
    font-size: 14px;
}

.skeleton-card[b-iiw1z2rx9a] {
    height: 120px;
    border-radius: 20px;
    background: linear-gradient(90deg, #141414 0%, #1a1a1a 50%, #141414 100%);
    background-size: 200% 100%;
    animation: shimmer-b-iiw1z2rx9a 1.8s ease-in-out infinite;
}

.skeleton-card:nth-child(2)[b-iiw1z2rx9a] { animation-delay: 0.1s; }
.skeleton-card:nth-child(3)[b-iiw1z2rx9a] { animation-delay: 0.2s; }
.skeleton-card:nth-child(4)[b-iiw1z2rx9a] { animation-delay: 0.3s; }

@keyframes shimmer-b-iiw1z2rx9a {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.spinner[b-iiw1z2rx9a] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(245, 133, 36, 0.2);
    border-top-color: #f58524;
    border-radius: 50%;
    animation: spin-b-iiw1z2rx9a 0.8s linear infinite;
}

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

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-iiw1z2rx9a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
    animation: fadeInUp-b-iiw1z2rx9a 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.empty-icon[b-iiw1z2rx9a] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    margin-bottom: 28px;
}

.empty-icon svg[b-iiw1z2rx9a] {
    width: 48px;
    height: 48px;
    color: #6b6b6b;
    opacity: 0.5;
}

.empty-state h2[b-iiw1z2rx9a] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #f5f5f5;
    margin: 0 0 10px;
}

.empty-state p[b-iiw1z2rx9a] {
    font-size: 15px;
    line-height: 1.5;
    color: #a0a0a0;
    margin: 0 0 28px;
    max-width: 260px;
}

.browse-menu-btn[b-iiw1z2rx9a] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    min-height: 52px;
    background: #f58524;
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.browse-menu-btn:hover[b-iiw1z2rx9a] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 133, 36, 0.4);
}

.browse-menu-btn:active[b-iiw1z2rx9a] {
    transform: scale(0.98);
}

.browse-menu-btn:focus-visible[b-iiw1z2rx9a] {
    outline: 2px solid #f58524;
    outline-offset: 3px;
}

/* ============================================
   ORDERS LIST
   ============================================ */

.orders-list[b-iiw1z2rx9a] {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   ORDER CARD — Dark Glass Design
   ============================================ */

.order-card[b-iiw1z2rx9a] {
    position: relative;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    -webkit-tap-highlight-color: transparent;
    animation: fadeInUp-b-iiw1z2rx9a 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.order-card:nth-child(1)[b-iiw1z2rx9a] { animation-delay: 0.05s; }
.order-card:nth-child(2)[b-iiw1z2rx9a] { animation-delay: 0.1s; }
.order-card:nth-child(3)[b-iiw1z2rx9a] { animation-delay: 0.15s; }
.order-card:nth-child(4)[b-iiw1z2rx9a] { animation-delay: 0.2s; }
.order-card:nth-child(5)[b-iiw1z2rx9a] { animation-delay: 0.25s; }

.order-card:focus-visible[b-iiw1z2rx9a] {
    outline: 2px solid #f58524;
    outline-offset: 2px;
}

.order-card:hover[b-iiw1z2rx9a] {
    background: #161616;
    border-color: rgba(245, 133, 36, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.order-card:active[b-iiw1z2rx9a] {
    transform: scale(0.98);
}

.order-header[b-iiw1z2rx9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.order-number[b-iiw1z2rx9a] {
    font-size: 18px;
    font-weight: 700;
    color: #f5f5f5;
    letter-spacing: -0.3px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

.order-badges[b-iiw1z2rx9a] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Status Badges — All dark-optimized colors */
.order-status[b-iiw1z2rx9a] {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-status.pending[b-iiw1z2rx9a] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.order-status.confirmed[b-iiw1z2rx9a] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.order-status.preparing[b-iiw1z2rx9a] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.order-status.ready[b-iiw1z2rx9a] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.order-status.served[b-iiw1z2rx9a] {
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
}

.order-status.completed[b-iiw1z2rx9a] {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
}

.order-status.cancelled[b-iiw1z2rx9a] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Payment Status Badges */
.payment-badge[b-iiw1z2rx9a] {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-badge.paid[b-iiw1z2rx9a] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.payment-badge.unpaid[b-iiw1z2rx9a] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.payment-badge.partial[b-iiw1z2rx9a] {
    background: rgba(245, 133, 36, 0.15);
    color: #f58524;
}

.payment-badge.refunded[b-iiw1z2rx9a] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

/* Order Details */
.order-details[b-iiw1z2rx9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}

.order-meta[b-iiw1z2rx9a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-date[b-iiw1z2rx9a],
.order-time[b-iiw1z2rx9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #a0a0a0;
}

.order-date svg[b-iiw1z2rx9a],
.order-time svg[b-iiw1z2rx9a] {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.order-total[b-iiw1z2rx9a] {
    text-align: right;
}

.total-label[b-iiw1z2rx9a] {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #6b6b6b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.total-amount[b-iiw1z2rx9a] {
    font-size: 20px;
    font-weight: 800;
    color: #f58524;
    letter-spacing: -0.5px;
}

.order-items-preview[b-iiw1z2rx9a] {
    font-size: 13px;
    color: #a0a0a0;
}

/* View Arrow */
.view-arrow[b-iiw1z2rx9a] {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    color: #6b6b6b;
    opacity: 0.5;
    transition: all 0.2s;
}

.view-arrow svg[b-iiw1z2rx9a] {
    width: 100%;
    height: 100%;
}

.order-card:hover .view-arrow[b-iiw1z2rx9a] {
    opacity: 1;
    color: #f58524;
    transform: translateY(-50%) translateX(4px);
}

[dir="rtl"] .view-arrow[b-iiw1z2rx9a] {
    right: auto;
    left: 20px;
}

[dir="rtl"] .order-card:hover .view-arrow[b-iiw1z2rx9a] {
    transform: translateY(-50%) translateX(-4px);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp-b-iiw1z2rx9a {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 768px) {
    .orders-list[b-iiw1z2rx9a] {
        padding: 32px 24px;
    }

    .order-card[b-iiw1z2rx9a] {
        padding: 22px 24px;
        border-radius: 24px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .order-card[b-iiw1z2rx9a],
    .empty-state[b-iiw1z2rx9a],
    .skeleton-card[b-iiw1z2rx9a],
    .spinner[b-iiw1z2rx9a] {
        animation: none !important;
        transition: opacity 0.2s, transform 0.15s !important;
    }

    .order-card:hover[b-iiw1z2rx9a],
    .order-card:hover .view-arrow[b-iiw1z2rx9a],
    .browse-menu-btn:hover[b-iiw1z2rx9a] {
        transform: none !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .order-header[b-iiw1z2rx9a] {
    flex-direction: row-reverse;
}

[dir="rtl"] .order-badges[b-iiw1z2rx9a] {
    justify-content: flex-start;
}

[dir="rtl"] .order-details[b-iiw1z2rx9a] {
    flex-direction: row-reverse;
}

[dir="rtl"] .order-total[b-iiw1z2rx9a] {
    text-align: left;
}

[dir="rtl"] .order-date[b-iiw1z2rx9a],
[dir="rtl"] .order-time[b-iiw1z2rx9a] {
    flex-direction: row-reverse;
}

/* ============================================
   CANCEL INLINE BUTTON & MODAL
   ============================================ */

.order-card-actions[b-iiw1z2rx9a] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.cancel-inline-btn[b-iiw1z2rx9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    color: #f87171;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.cancel-inline-btn:hover[b-iiw1z2rx9a] { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.4); }
.cancel-inline-btn:active[b-iiw1z2rx9a] { transform: scale(0.95); }

.pay-inline-btn[b-iiw1z2rx9a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(245, 133, 36, 0.15);
    border: 1px solid rgba(245, 133, 36, 0.3);
    border-radius: 10px;
    color: #f58524;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.pay-inline-btn:hover[b-iiw1z2rx9a] { background: rgba(245, 133, 36, 0.25); border-color: rgba(245, 133, 36, 0.5); }
.pay-inline-btn:active[b-iiw1z2rx9a] { transform: scale(0.95); }

.cancel-overlay[b-iiw1z2rx9a] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeOverlay-b-iiw1z2rx9a 0.2s ease;
}

.cancel-modal[b-iiw1z2rx9a] {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    animation: modalPop-b-iiw1z2rx9a 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cancel-modal-icon[b-iiw1z2rx9a] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    margin: 0 auto 20px;
}

.cancel-modal h3[b-iiw1z2rx9a] { font-size: 20px; font-weight: 700; color: #f5f5f5; margin: 0 0 8px; }
.cancel-modal p[b-iiw1z2rx9a] { font-size: 14px; line-height: 1.5; color: #a0a0a0; margin: 0 0 28px; }
.cancel-modal-actions[b-iiw1z2rx9a] { display: flex; gap: 12px; }

.cancel-modal-btn[b-iiw1z2rx9a] {
    flex: 1;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cancel-modal-btn.keep[b-iiw1z2rx9a] { background: #222; color: #f5f5f5; }
.cancel-modal-btn.keep:hover[b-iiw1z2rx9a] { background: #2a2a2a; }
.cancel-modal-btn.confirm[b-iiw1z2rx9a] { background: #ef4444; color: white; }
.cancel-modal-btn.confirm:hover[b-iiw1z2rx9a] { background: #dc2626; }
.cancel-modal-btn:disabled[b-iiw1z2rx9a] { opacity: 0.6; cursor: not-allowed; }
.cancel-modal-btn:active[b-iiw1z2rx9a] { transform: scale(0.97); }

.btn-spinner[b-iiw1z2rx9a] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-iiw1z2rx9a 0.6s linear infinite;
}

@keyframes fadeOverlay-b-iiw1z2rx9a { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop-b-iiw1z2rx9a { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* _content/QrBiteHub.Web/Components/Pages/Customer/OrderHistory.razor.rz.scp.css */
/* ============================================
   ORDER HISTORY PAGE - Premium Redesign
   Aesthetic: Refined Culinary Journey
   ============================================ */

/* Page Container */
.history-page[b-n1gnpv7ik9] {
    min-height: 100dvh;
    background: var(--bg-page, #fafafa);
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

[data-theme="dark"] .history-page[b-n1gnpv7ik9],
:root:not([data-theme="light"]) .history-page[b-n1gnpv7ik9] {
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}

/* ============================================
   HEADER - Floating Glass Design
   ============================================ */

.history-header[b-n1gnpv7ik9] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--bg-glass, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-glass, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

[data-theme="dark"] .history-header[b-n1gnpv7ik9] {
    background: rgba(10, 10, 10, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.history-header h1[b-n1gnpv7ik9] {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
}

.back-btn[b-n1gnpv7ik9] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.back-btn:hover[b-n1gnpv7ik9] {
    background: var(--bg-tertiary);
    transform: translateX(-2px);
}

[dir="rtl"] .back-btn:hover[b-n1gnpv7ik9] {
    transform: translateX(2px);
}

.back-btn:focus-visible[b-n1gnpv7ik9] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.back-btn:active[b-n1gnpv7ik9] {
    transform: scale(0.92);
}

/* ============================================
   CONTENT AREA
   ============================================ */

.history-content[b-n1gnpv7ik9] {
    padding: 20px 16px;
    min-height: calc(100dvh - 65px);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   LOADING STATE - Skeleton
   ============================================ */

.loading-container[b-n1gnpv7ik9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.skeleton-account[b-n1gnpv7ik9] {
    height: 88px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-n1gnpv7ik9 1.8s ease-in-out infinite;
}

.skeleton-order[b-n1gnpv7ik9] {
    height: 140px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-n1gnpv7ik9 1.8s ease-in-out infinite;
}

.skeleton-order:nth-child(2)[b-n1gnpv7ik9] { animation-delay: 0.1s; }
.skeleton-order:nth-child(3)[b-n1gnpv7ik9] { animation-delay: 0.2s; }

@keyframes shimmer-b-n1gnpv7ik9 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fallback spinner */
.c-spinner[b-n1gnpv7ik9] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--primary, #f58524);
    border-radius: 50%;
    animation: spin-b-n1gnpv7ik9 0.8s linear infinite;
    margin: 60px auto;
}

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

/* ============================================
   NOT LOGGED IN STATE
   ============================================ */

.not-logged-in[b-n1gnpv7ik9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    min-height: 50vh;
    animation: fadeInUp-b-n1gnpv7ik9 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-circle[b-n1gnpv7ik9] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

[data-theme="dark"] .icon-circle[b-n1gnpv7ik9] {
    background: rgba(255, 255, 255, 0.05);
}

.not-logged-in h2[b-n1gnpv7ik9] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.not-logged-in p[b-n1gnpv7ik9] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 28px;
    max-width: 280px;
}

.not-logged-in .c-btn[b-n1gnpv7ik9] {
    min-width: 160px;
    min-height: 52px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}

.not-logged-in .c-btn.primary[b-n1gnpv7ik9] {
    background: var(--primary, #f58524);
    box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
}

.not-logged-in .c-btn.primary:hover[b-n1gnpv7ik9] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 133, 36, 0.4);
}

.not-logged-in .c-btn:focus-visible[b-n1gnpv7ik9] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 3px;
}

.not-logged-in .c-btn:active[b-n1gnpv7ik9] {
    transform: scale(0.98);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-n1gnpv7ik9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    min-height: 50vh;
    animation: fadeInUp-b-n1gnpv7ik9 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.empty-state svg[b-n1gnpv7ik9] {
    color: var(--text-muted);
    opacity: 0.4;
    margin-bottom: 24px;
}

.empty-state h2[b-n1gnpv7ik9] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.empty-state p[b-n1gnpv7ik9] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    max-width: 260px;
}

/* ============================================
   ACCOUNT SUMMARY CARD
   ============================================ */

.account-summary[b-n1gnpv7ik9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin-bottom: 24px;
    background: var(--bg, #fff);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-n1gnpv7ik9 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .account-summary[b-n1gnpv7ik9] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.account-avatar[b-n1gnpv7ik9] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #f58524) 0%, #fb923c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.account-details[b-n1gnpv7ik9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-name[b-n1gnpv7ik9] {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.account-stats[b-n1gnpv7ik9] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ============================================
   ORDERS LIST
   ============================================ */

.orders-list[b-n1gnpv7ik9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================
   ORDER CARD - Premium Design
   ============================================ */

.order-card[b-n1gnpv7ik9] {
    background: var(--bg, #fff);
    border-radius: 20px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-n1gnpv7ik9 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

[data-theme="dark"] .order-card[b-n1gnpv7ik9] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.order-card:nth-child(1)[b-n1gnpv7ik9] { animation-delay: 0.05s; }
.order-card:nth-child(2)[b-n1gnpv7ik9] { animation-delay: 0.1s; }
.order-card:nth-child(3)[b-n1gnpv7ik9] { animation-delay: 0.15s; }
.order-card:nth-child(4)[b-n1gnpv7ik9] { animation-delay: 0.2s; }
.order-card:nth-child(5)[b-n1gnpv7ik9] { animation-delay: 0.25s; }

.restaurant-info[b-n1gnpv7ik9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .restaurant-info[b-n1gnpv7ik9] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.restaurant-name[b-n1gnpv7ik9] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.branch-name[b-n1gnpv7ik9] {
    font-size: 13px;
    color: var(--text-secondary);
}

.order-main[b-n1gnpv7ik9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-info[b-n1gnpv7ik9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-number[b-n1gnpv7ik9] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.order-time[b-n1gnpv7ik9] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Status Badge */
.order-status[b-n1gnpv7ik9] {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.order-status.pending[b-n1gnpv7ik9] {
    background: rgba(251, 191, 36, 0.12);
    color: #d97706;
}

.order-status.preparing[b-n1gnpv7ik9],
.order-status.inprogress[b-n1gnpv7ik9] {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.order-status.completed[b-n1gnpv7ik9] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.order-status.cancelled[b-n1gnpv7ik9] {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

[data-theme="dark"] .order-status.pending[b-n1gnpv7ik9] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .order-status.preparing[b-n1gnpv7ik9],
[data-theme="dark"] .order-status.inprogress[b-n1gnpv7ik9] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

[data-theme="dark"] .order-status.completed[b-n1gnpv7ik9] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

[data-theme="dark"] .order-status.cancelled[b-n1gnpv7ik9] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.order-footer[b-n1gnpv7ik9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .order-footer[b-n1gnpv7ik9] {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.item-count[b-n1gnpv7ik9] {
    font-size: 13px;
    color: var(--text-secondary);
}

.order-total[b-n1gnpv7ik9] {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary, #f58524);
    letter-spacing: -0.3px;
}

/* ============================================
   LOAD MORE
   ============================================ */

.load-more[b-n1gnpv7ik9] {
    padding: 28px 0;
    display: flex;
    justify-content: center;
}

.load-more .c-btn[b-n1gnpv7ik9] {
    min-width: 140px;
    min-height: 48px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}

.load-more .c-btn.secondary[b-n1gnpv7ik9] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.load-more .c-btn.secondary:hover[b-n1gnpv7ik9] {
    background: var(--bg-tertiary);
}

.load-more .c-btn:focus-visible[b-n1gnpv7ik9] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.load-more .c-btn:active:not(:disabled)[b-n1gnpv7ik9] {
    transform: scale(0.98);
}

.btn-spinner[b-n1gnpv7ik9] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-n1gnpv7ik9 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp-b-n1gnpv7ik9 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE - Tablet+
   ============================================ */

@media (min-width: 768px) {
    .history-content[b-n1gnpv7ik9] {
        padding: 32px 24px;
    }

    .account-summary[b-n1gnpv7ik9],
    .order-card[b-n1gnpv7ik9] {
        padding: 22px 24px;
        border-radius: 24px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .account-summary[b-n1gnpv7ik9],
    .order-card[b-n1gnpv7ik9],
    .not-logged-in[b-n1gnpv7ik9],
    .empty-state[b-n1gnpv7ik9],
    .skeleton-account[b-n1gnpv7ik9],
    .skeleton-order[b-n1gnpv7ik9],
    .c-spinner[b-n1gnpv7ik9],
    .btn-spinner[b-n1gnpv7ik9] {
        animation: none !important;
        transition: opacity 0.2s, transform 0.15s !important;
    }

    .not-logged-in .c-btn:hover[b-n1gnpv7ik9],
    .back-btn:hover[b-n1gnpv7ik9] {
        transform: none !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .history-header[b-n1gnpv7ik9] {
    flex-direction: row-reverse;
}

[dir="rtl"] .account-summary[b-n1gnpv7ik9] {
    flex-direction: row-reverse;
}

[dir="rtl"] .account-details[b-n1gnpv7ik9] {
    text-align: right;
}

[dir="rtl"] .restaurant-info[b-n1gnpv7ik9] {
    text-align: right;
}

[dir="rtl"] .order-main[b-n1gnpv7ik9] {
    flex-direction: row-reverse;
}

[dir="rtl"] .order-info[b-n1gnpv7ik9] {
    text-align: right;
}

[dir="rtl"] .order-footer[b-n1gnpv7ik9] {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-spinner[b-n1gnpv7ik9] {
    margin-right: 0;
    margin-left: 8px;
}
/* _content/QrBiteHub.Web/Components/Pages/Customer/OrdersList.razor.rz.scp.css */
/* ============================================
   ORDERS LIST - Premium Redesign
   Aesthetic: Refined Culinary Journey
   ============================================ */

/* Page Container */
.orders-page[b-yvfnx5vwqm] {
    min-height: 100dvh;
    background: var(--bg-page, #fafafa);
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

[data-theme="dark"] .orders-page[b-yvfnx5vwqm],
:root:not([data-theme="light"]) .orders-page[b-yvfnx5vwqm] {
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}

/* ============================================
   HEADER - Floating Glass Design
   ============================================ */

.orders-header[b-yvfnx5vwqm] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--bg-glass, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-glass, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    gap: 16px;
}

[data-theme="dark"] .orders-header[b-yvfnx5vwqm] {
    background: rgba(10, 10, 10, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.orders-header h1[b-yvfnx5vwqm] {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
}

.back-btn[b-yvfnx5vwqm] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.back-btn:hover[b-yvfnx5vwqm] {
    background: var(--bg-tertiary);
    transform: translateX(-2px);
}

[dir="rtl"] .back-btn:hover[b-yvfnx5vwqm] {
    transform: translateX(2px);
}

.back-btn:focus-visible[b-yvfnx5vwqm] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.back-btn:active[b-yvfnx5vwqm] {
    transform: scale(0.92);
}

.header-spacer[b-yvfnx5vwqm] {
    width: 44px;
    flex-shrink: 0;
}

/* ============================================
   CONTENT AREA
   ============================================ */

.orders-content[b-yvfnx5vwqm] {
    padding: 20px 16px;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   LOADING STATE - Skeleton Cards
   ============================================ */

.loading-skeleton[b-yvfnx5vwqm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-summary[b-yvfnx5vwqm] {
    height: 100px;
    border-radius: 20px;
    background: linear-gradient(90deg,
        var(--bg-secondary) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-yvfnx5vwqm 1.8s ease-in-out infinite;
}

.skeleton-card[b-yvfnx5vwqm] {
    height: 140px;
    border-radius: 20px;
    background: linear-gradient(90deg,
        var(--bg-secondary) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-yvfnx5vwqm 1.8s ease-in-out infinite;
}

.skeleton-card:nth-child(2)[b-yvfnx5vwqm] { animation-delay: 0.15s; }
.skeleton-card:nth-child(3)[b-yvfnx5vwqm] { animation-delay: 0.3s; }
.skeleton-card:nth-child(4)[b-yvfnx5vwqm] { animation-delay: 0.45s; }

@keyframes shimmer-b-yvfnx5vwqm {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   EMPTY STATE - Emotional Design
   ============================================ */

.empty-state[b-yvfnx5vwqm] {
    text-align: center;
    padding: 60px 32px;
    animation: fadeInUp-b-yvfnx5vwqm 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.empty-illustration[b-yvfnx5vwqm] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 28px;
}

.empty-circle[b-yvfnx5vwqm] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-light, rgba(245, 133, 36, 0.1)) 0%, transparent 60%);
    border-radius: 50%;
    animation: pulse-soft-b-yvfnx5vwqm 3s ease-in-out infinite;
}

.empty-icon[b-yvfnx5vwqm] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #f58524);
    opacity: 0.6;
}

.empty-icon svg[b-yvfnx5vwqm] {
    width: 56px;
    height: 56px;
    stroke-width: 1.2;
}

@keyframes pulse-soft-b-yvfnx5vwqm {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.7; }
}

.empty-state h2[b-yvfnx5vwqm] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.empty-state p[b-yvfnx5vwqm] {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 32px;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

.empty-cta[b-yvfnx5vwqm] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--primary, #f58524);
    color: white;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.empty-cta:hover[b-yvfnx5vwqm] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 133, 36, 0.4);
}

.empty-cta:active[b-yvfnx5vwqm] {
    transform: scale(0.96);
}

.empty-cta:focus-visible[b-yvfnx5vwqm] {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ============================================
   SESSION SUMMARY - Glassmorphic Card
   ============================================ */

.session-summary[b-yvfnx5vwqm] {
    position: relative;
    padding: 20px;
    margin-bottom: 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary, #f58524) 0%, #e06c10 100%);
    overflow: hidden;
    animation: fadeInUp-b-yvfnx5vwqm 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.session-summary[b-yvfnx5vwqm]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.session-summary[b-yvfnx5vwqm]::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 150px;
    height: 150px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.summary-header[b-yvfnx5vwqm] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-stats[b-yvfnx5vwqm] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}

.stat-item[b-yvfnx5vwqm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-item.total[b-yvfnx5vwqm] {
    text-align: right;
}

.stat-value[b-yvfnx5vwqm] {
    font-size: 32px;
    font-weight: 800;
    color: white;
    line-height: 1;
    letter-spacing: -1px;
}

.stat-item.total .stat-value[b-yvfnx5vwqm] {
    font-size: 26px;
}

.stat-label[b-yvfnx5vwqm] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============================================
   ORDERS LIST
   ============================================ */

.orders-list[b-yvfnx5vwqm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================
   ORDER CARD - Premium Design
   ============================================ */

.order-card[b-yvfnx5vwqm] {
    position: relative;
    background: var(--bg, #fff);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
    -webkit-tap-highlight-color: transparent;
    animation: fadeInUp-b-yvfnx5vwqm 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

[data-theme="dark"] .order-card[b-yvfnx5vwqm] {
    background: var(--bg-secondary, #141414);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.order-card:nth-child(1)[b-yvfnx5vwqm] { animation-delay: 0.05s; }
.order-card:nth-child(2)[b-yvfnx5vwqm] { animation-delay: 0.1s; }
.order-card:nth-child(3)[b-yvfnx5vwqm] { animation-delay: 0.15s; }
.order-card:nth-child(4)[b-yvfnx5vwqm] { animation-delay: 0.2s; }
.order-card:nth-child(5)[b-yvfnx5vwqm] { animation-delay: 0.25s; }

.order-card:hover[b-yvfnx5vwqm] {
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .order-card:hover[b-yvfnx5vwqm] {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.2);
}

.order-card:active[b-yvfnx5vwqm] {
    transform: scale(0.98);
}

.order-card:focus-visible[b-yvfnx5vwqm] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

/* Status Indicator Strip */
.order-status-strip[b-yvfnx5vwqm] {
    height: 4px;
    background: var(--bg-tertiary);
}

.order-status-strip.pending[b-yvfnx5vwqm] {
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

.order-status-strip.preparing[b-yvfnx5vwqm] {
    background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
    animation: progress-pulse-b-yvfnx5vwqm 2s ease-in-out infinite;
}

.order-status-strip.ready[b-yvfnx5vwqm] {
    background: linear-gradient(90deg, #34d399 0%, #22c55e 100%);
}

.order-status-strip.completed[b-yvfnx5vwqm] {
    background: var(--bg-tertiary);
}

.order-status-strip.cancelled[b-yvfnx5vwqm] {
    background: linear-gradient(90deg, #f87171 0%, #ef4444 100%);
}

@keyframes progress-pulse-b-yvfnx5vwqm {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Card Content */
.order-card-content[b-yvfnx5vwqm] {
    padding: 18px 20px;
}

/* Card Header */
.order-card-header[b-yvfnx5vwqm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.order-meta[b-yvfnx5vwqm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-number-row[b-yvfnx5vwqm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-number[b-yvfnx5vwqm] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.round-badge[b-yvfnx5vwqm] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--primary, #f58524);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.order-time[b-yvfnx5vwqm] {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-time svg[b-yvfnx5vwqm] {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* Status Badge */
.status-badge[b-yvfnx5vwqm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.status-badge.pending[b-yvfnx5vwqm] {
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
}

.status-badge.preparing[b-yvfnx5vwqm] {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.status-badge.ready[b-yvfnx5vwqm] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.status-badge.completed[b-yvfnx5vwqm] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.status-badge.cancelled[b-yvfnx5vwqm] {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

[data-theme="dark"] .status-badge.pending[b-yvfnx5vwqm] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .status-badge.preparing[b-yvfnx5vwqm] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .status-badge.ready[b-yvfnx5vwqm] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

[data-theme="dark"] .status-badge.cancelled[b-yvfnx5vwqm] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Items Preview */
.items-preview[b-yvfnx5vwqm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.item-chip[b-yvfnx5vwqm] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    transition: background 0.15s;
}

.item-chip .qty[b-yvfnx5vwqm] {
    color: var(--primary, #f58524);
    font-weight: 600;
    margin-right: 4px;
}

.more-items[b-yvfnx5vwqm] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    color: var(--primary, #f58524);
    font-size: 13px;
    font-weight: 600;
}

/* Card Footer */
.order-card-footer[b-yvfnx5vwqm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .order-card-footer[b-yvfnx5vwqm] {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.order-total[b-yvfnx5vwqm] {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary, #f58524);
    letter-spacing: -0.5px;
}

.view-arrow[b-yvfnx5vwqm] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.view-arrow svg[b-yvfnx5vwqm] {
    transition: transform 0.2s;
}

.order-card:hover .view-arrow svg[b-yvfnx5vwqm] {
    transform: translateX(4px);
}

[dir="rtl"] .order-card:hover .view-arrow svg[b-yvfnx5vwqm] {
    transform: translateX(-4px);
}

/* ============================================
   ADD MORE SECTION
   ============================================ */

.add-more-section[b-yvfnx5vwqm] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed var(--border);
    animation: fadeInUp-b-yvfnx5vwqm 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
}

.add-more-btn[b-yvfnx5vwqm] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.add-more-btn:hover[b-yvfnx5vwqm] {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    color: var(--primary);
}

.add-more-btn:active[b-yvfnx5vwqm] {
    transform: scale(0.98);
}

.add-more-btn:focus-visible[b-yvfnx5vwqm] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp-b-yvfnx5vwqm {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE - Tablet+
   ============================================ */

@media (min-width: 768px) {
    .orders-content[b-yvfnx5vwqm] {
        padding: 32px 24px;
    }

    .order-card[b-yvfnx5vwqm] {
        border-radius: 24px;
    }

    .order-card-content[b-yvfnx5vwqm] {
        padding: 22px 24px;
    }

    .session-summary[b-yvfnx5vwqm] {
        padding: 24px;
        border-radius: 24px;
    }

    .stat-value[b-yvfnx5vwqm] {
        font-size: 36px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .order-card[b-yvfnx5vwqm],
    .session-summary[b-yvfnx5vwqm],
    .empty-state[b-yvfnx5vwqm],
    .empty-circle[b-yvfnx5vwqm],
    .skeleton-summary[b-yvfnx5vwqm],
    .skeleton-card[b-yvfnx5vwqm],
    .order-status-strip.preparing[b-yvfnx5vwqm],
    .add-more-section[b-yvfnx5vwqm] {
        animation: none !important;
        transition: opacity 0.2s, transform 0.15s !important;
    }

    .back-btn:hover[b-yvfnx5vwqm],
    .order-card:hover[b-yvfnx5vwqm],
    .order-card:hover .view-arrow svg[b-yvfnx5vwqm] {
        transform: none !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .order-card-header[b-yvfnx5vwqm] {
    flex-direction: row-reverse;
}

[dir="rtl"] .order-card-footer[b-yvfnx5vwqm] {
    flex-direction: row-reverse;
}

[dir="rtl"] .order-meta[b-yvfnx5vwqm] {
    text-align: right;
}

[dir="rtl"] .status-badge[b-yvfnx5vwqm] {
    flex-direction: row-reverse;
}

[dir="rtl"] .view-arrow[b-yvfnx5vwqm] {
    flex-direction: row-reverse;
}

[dir="rtl"] .summary-stats[b-yvfnx5vwqm] {
    direction: rtl;
}

[dir="rtl"] .stat-item.total[b-yvfnx5vwqm] {
    text-align: left;
}

/* ============================================
   CANCEL INLINE BUTTON & MODAL
   ============================================ */

.cancel-inline-btn[b-yvfnx5vwqm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.cancel-inline-btn:hover[b-yvfnx5vwqm] { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.4); }
.cancel-inline-btn:active[b-yvfnx5vwqm] { transform: scale(0.95); }

[data-theme="dark"] .cancel-inline-btn[b-yvfnx5vwqm] { background: rgba(239, 68, 68, 0.12); color: #f87171; }
[data-theme="dark"] .cancel-inline-btn:hover[b-yvfnx5vwqm] { background: rgba(239, 68, 68, 0.2); }

.cancel-overlay[b-yvfnx5vwqm] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeOverlay-b-yvfnx5vwqm 0.2s ease;
}

.cancel-modal[b-yvfnx5vwqm] {
    background: var(--bg, #fff);
    border-radius: 24px;
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    animation: modalPop-b-yvfnx5vwqm 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .cancel-modal[b-yvfnx5vwqm] {
    background: #1a1a1a;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.cancel-modal-icon[b-yvfnx5vwqm] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    margin: 0 auto 20px;
}

.cancel-modal h3[b-yvfnx5vwqm] { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }
.cancel-modal p[b-yvfnx5vwqm] { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 28px; }
.cancel-modal-actions[b-yvfnx5vwqm] { display: flex; gap: 12px; }

.cancel-modal-btn[b-yvfnx5vwqm] {
    flex: 1;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cancel-modal-btn.keep[b-yvfnx5vwqm] { background: var(--bg-secondary); color: var(--text-primary); }
.cancel-modal-btn.keep:hover[b-yvfnx5vwqm] { background: var(--bg-tertiary); }
.cancel-modal-btn.confirm[b-yvfnx5vwqm] { background: #ef4444; color: white; }
.cancel-modal-btn.confirm:hover[b-yvfnx5vwqm] { background: #dc2626; }
.cancel-modal-btn:disabled[b-yvfnx5vwqm] { opacity: 0.6; cursor: not-allowed; }
.cancel-modal-btn:active[b-yvfnx5vwqm] { transform: scale(0.97); }

.btn-spinner[b-yvfnx5vwqm] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes fadeOverlay-b-yvfnx5vwqm { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop-b-yvfnx5vwqm { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* _content/QrBiteHub.Web/Components/Pages/Customer/OrderTracking.razor.rz.scp.css */
/* ============================================
   ORDER TRACKING - Premium Redesign
   Aesthetic: Immersive Status Journey
   ============================================ */

/* Page Container */
.tracking-page[b-cocf3y0oim] {
    min-height: 100dvh;
    background: var(--bg-page, #fafafa);
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

[data-theme="dark"] .tracking-page[b-cocf3y0oim],
:root:not([data-theme="light"]) .tracking-page[b-cocf3y0oim] {
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}

/* ============================================
   HEADER
   ============================================ */

.tracking-header[b-cocf3y0oim] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--bg-glass, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-glass, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    gap: 12px;
}

[data-theme="dark"] .tracking-header[b-cocf3y0oim],
:root:not([data-theme="light"]) .tracking-header[b-cocf3y0oim] {
    background: rgba(10, 10, 10, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.tracking-header h1[b-cocf3y0oim] {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
}

.back-btn[b-cocf3y0oim],
.refresh-btn[b-cocf3y0oim] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.back-btn:hover[b-cocf3y0oim],
.refresh-btn:hover[b-cocf3y0oim] {
    background: var(--bg-tertiary);
}

.back-btn:hover[b-cocf3y0oim] {
    transform: translateX(-2px);
}

[dir="rtl"] .back-btn:hover[b-cocf3y0oim] {
    transform: translateX(2px);
}

.back-btn:focus-visible[b-cocf3y0oim],
.refresh-btn:focus-visible[b-cocf3y0oim] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.back-btn:active[b-cocf3y0oim],
.refresh-btn:active[b-cocf3y0oim] {
    transform: scale(0.92);
}

.refresh-btn svg[b-cocf3y0oim] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.refresh-btn.spinning svg[b-cocf3y0oim] {
    animation: spin-b-cocf3y0oim 0.8s linear infinite;
}

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

/* ============================================
   LOADING SKELETON
   ============================================ */

.loading-skeleton[b-cocf3y0oim] {
    padding: 20px 16px;
    max-width: 600px;
    margin: 0 auto;
}

.skeleton-hero[b-cocf3y0oim] {
    height: 200px;
    border-radius: 24px;
    margin-bottom: 24px;
    background: linear-gradient(90deg,
        var(--bg-secondary) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-cocf3y0oim 1.8s ease-in-out infinite;
}

.skeleton-timeline[b-cocf3y0oim] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-step[b-cocf3y0oim] {
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(90deg,
        var(--bg-secondary) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 100%);
    background-size: 200% 100%;
    animation: shimmer-b-cocf3y0oim 1.8s ease-in-out infinite;
}

.skeleton-step:nth-child(2)[b-cocf3y0oim] { animation-delay: 0.15s; }
.skeleton-step:nth-child(3)[b-cocf3y0oim] { animation-delay: 0.3s; }
.skeleton-step:nth-child(4)[b-cocf3y0oim] { animation-delay: 0.45s; }

@keyframes shimmer-b-cocf3y0oim {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   ERROR STATE
   ============================================ */

.error-state[b-cocf3y0oim] {
    text-align: center;
    padding: 80px 32px;
    animation: fadeInUp-b-cocf3y0oim 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.error-icon[b-cocf3y0oim] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
    color: #ef4444;
}

.error-state h2[b-cocf3y0oim] {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}

.error-state p[b-cocf3y0oim] {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================
   CONTENT
   ============================================ */

.tracking-content[b-cocf3y0oim] {
    padding: 20px 16px;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   HERO STATUS CARD
   ============================================ */

.status-hero[b-cocf3y0oim] {
    position: relative;
    padding: 28px 24px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 28px;
    animation: fadeInUp-b-cocf3y0oim 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-hero.pending[b-cocf3y0oim] {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.status-hero.preparing[b-cocf3y0oim] {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.status-hero.ready[b-cocf3y0oim] {
    background: linear-gradient(135deg, #34d399 0%, #22c55e 100%);
}

.status-hero.completed[b-cocf3y0oim] {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}

.status-hero.cancelled[b-cocf3y0oim] {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

/* Decorative circles */
.status-hero[b-cocf3y0oim]::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.status-hero[b-cocf3y0oim]::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 140px;
    height: 140px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.hero-content[b-cocf3y0oim] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.hero-icon[b-cocf3y0oim] {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-icon svg[b-cocf3y0oim] {
    width: 32px;
    height: 32px;
    color: white;
}

.status-hero.preparing .hero-icon[b-cocf3y0oim] {
    animation: icon-pulse-b-cocf3y0oim 2s ease-in-out infinite;
}

@keyframes icon-pulse-b-cocf3y0oim {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.hero-text[b-cocf3y0oim] {
    flex: 1;
    color: white;
}

.hero-title[b-cocf3y0oim] {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 6px;
    line-height: 1.2;
}

.hero-description[b-cocf3y0oim] {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.5;
    margin: 0;
}

.hero-meta[b-cocf3y0oim] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.order-id[b-cocf3y0oim] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-id-label[b-cocf3y0oim] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
}

.order-id-value[b-cocf3y0oim] {
    font-size: 20px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.3px;
}

.order-time-badge[b-cocf3y0oim] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.order-time-badge svg[b-cocf3y0oim] {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

/* ============================================
   PROGRESS TIMELINE - Vertical Design
   ============================================ */

.progress-timeline[b-cocf3y0oim] {
    position: relative;
    padding: 0 0 0 40px;
    margin-bottom: 28px;
}

[dir="rtl"] .progress-timeline[b-cocf3y0oim] {
    padding: 0 40px 0 0;
}

/* Timeline line */
.timeline-track[b-cocf3y0oim] {
    position: absolute;
    left: 15px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    background: var(--border, #e2e8f0);
    border-radius: 2px;
    overflow: hidden;
}

[dir="rtl"] .timeline-track[b-cocf3y0oim] {
    left: auto;
    right: 15px;
}

.timeline-progress[b-cocf3y0oim] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(180deg, var(--primary, #f58524) 0%, #22c55e 100%);
    border-radius: 2px;
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-progress[data-step="1"][b-cocf3y0oim] { height: 0%; }
.timeline-progress[data-step="2"][b-cocf3y0oim] { height: 33%; }
.timeline-progress[data-step="3"][b-cocf3y0oim] { height: 66%; }
.timeline-progress[data-step="4"][b-cocf3y0oim] { height: 100%; }

/* Timeline steps */
.timeline-step[b-cocf3y0oim] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    opacity: 0.4;
    transition: all 0.3s;
}

.timeline-step.complete[b-cocf3y0oim],
.timeline-step.active[b-cocf3y0oim] {
    opacity: 1;
}

.step-marker[b-cocf3y0oim] {
    position: absolute;
    left: -40px;
    top: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 3px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 2;
}

[dir="rtl"] .step-marker[b-cocf3y0oim] {
    left: auto;
    right: -40px;
}

.step-marker svg[b-cocf3y0oim] {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: color 0.3s;
}

.timeline-step.complete .step-marker[b-cocf3y0oim] {
    background: #22c55e;
    border-color: #22c55e;
}

.timeline-step.complete .step-marker svg[b-cocf3y0oim] {
    color: white;
}

.timeline-step.active .step-marker[b-cocf3y0oim] {
    background: var(--primary, #f58524);
    border-color: var(--primary, #f58524);
    animation: marker-pulse-b-cocf3y0oim 2s ease-in-out infinite;
}

.timeline-step.active .step-marker svg[b-cocf3y0oim] {
    color: white;
}

@keyframes marker-pulse-b-cocf3y0oim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 133, 36, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(245, 133, 36, 0); }
}

.step-content[b-cocf3y0oim] {
    flex: 1;
    padding-top: 4px;
}

.step-title[b-cocf3y0oim] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}

.timeline-step:not(.complete):not(.active) .step-title[b-cocf3y0oim] {
    color: var(--text-muted);
}

.step-time[b-cocf3y0oim] {
    font-size: 13px;
    color: var(--text-secondary);
}

.timeline-step.active .step-time[b-cocf3y0oim] {
    color: var(--primary, #f58524);
    font-weight: 500;
}

/* ============================================
   ORDER ITEMS SECTION
   ============================================ */

.order-section[b-cocf3y0oim] {
    background: var(--bg, #fff);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-cocf3y0oim 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
}

[data-theme="dark"] .order-section[b-cocf3y0oim],
:root:not([data-theme="light"]) .order-section[b-cocf3y0oim] {
    background: var(--bg-secondary, #141414);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.section-header[b-cocf3y0oim] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .section-header[b-cocf3y0oim],
:root:not([data-theme="light"]) .section-header[b-cocf3y0oim] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.section-header svg[b-cocf3y0oim] {
    width: 18px;
    height: 18px;
    color: var(--primary, #f58524);
}

.section-header h3[b-cocf3y0oim] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.2px;
}

.order-items[b-cocf3y0oim] {
    padding: 8px 0;
}

.order-item[b-cocf3y0oim] {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    gap: 12px;
}

.order-item:not(:last-child)[b-cocf3y0oim] {
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.04));
}

[data-theme="dark"] .order-item:not(:last-child)[b-cocf3y0oim],
:root:not([data-theme="light"]) .order-item:not(:last-child)[b-cocf3y0oim] {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.item-qty[b-cocf3y0oim] {
    min-width: 36px;
    height: 28px;
    background: var(--primary-light, rgba(245, 133, 36, 0.1));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary, #f58524);
}

.item-info[b-cocf3y0oim] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name[b-cocf3y0oim] {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.item-modifiers[b-cocf3y0oim] {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

[data-theme="light"] .item-modifiers[b-cocf3y0oim] {
    color: rgba(0,0,0,0.5);
}

.item-price[b-cocf3y0oim] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ============================================
   ORDER TOTAL SECTION
   ============================================ */

.order-totals[b-cocf3y0oim] {
    background: var(--bg, #fff);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-cocf3y0oim 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

[data-theme="dark"] .order-totals[b-cocf3y0oim],
:root:not([data-theme="light"]) .order-totals[b-cocf3y0oim] {
    background: var(--bg-secondary, #141414);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.total-row[b-cocf3y0oim] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.total-row span:first-child[b-cocf3y0oim] {
    font-size: 14px;
    color: var(--text-secondary);
}

.total-row span:last-child[b-cocf3y0oim] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.total-row.grand[b-cocf3y0oim] {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 2px dashed var(--border);
}

.total-row.grand span:first-child[b-cocf3y0oim] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.total-row.grand span:last-child[b-cocf3y0oim] {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary, #f58524);
    letter-spacing: -0.5px;
}

/* ============================================
   ACTIONS
   ============================================ */

.order-actions[b-cocf3y0oim] {
    animation: fadeInUp-b-cocf3y0oim 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
}

.action-btn[b-cocf3y0oim] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.action-btn:hover[b-cocf3y0oim] {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    color: var(--primary);
}

.action-btn:active[b-cocf3y0oim] {
    transform: scale(0.98);
}

.action-btn:focus-visible[b-cocf3y0oim] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp-b-cocf3y0oim {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 768px) {
    .tracking-content[b-cocf3y0oim] {
        padding: 32px 24px;
    }

    .status-hero[b-cocf3y0oim] {
        padding: 32px 28px;
        border-radius: 28px;
    }

    .hero-title[b-cocf3y0oim] {
        font-size: 28px;
    }

    .order-section[b-cocf3y0oim],
    .order-totals[b-cocf3y0oim] {
        border-radius: 24px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .status-hero[b-cocf3y0oim],
    .order-section[b-cocf3y0oim],
    .order-totals[b-cocf3y0oim],
    .order-actions[b-cocf3y0oim],
    .timeline-step[b-cocf3y0oim],
    .skeleton-hero[b-cocf3y0oim],
    .skeleton-step[b-cocf3y0oim],
    .error-state[b-cocf3y0oim],
    .timeline-progress[b-cocf3y0oim],
    .step-marker[b-cocf3y0oim],
    .hero-icon[b-cocf3y0oim] {
        animation: none !important;
        transition: opacity 0.2s, transform 0.15s !important;
    }

    .refresh-btn.spinning svg[b-cocf3y0oim] {
        animation: none !important;
    }

    .timeline-step.active .step-marker[b-cocf3y0oim] {
        box-shadow: none !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .hero-content[b-cocf3y0oim] {
    flex-direction: row-reverse;
}

[dir="rtl"] .hero-text[b-cocf3y0oim] {
    text-align: right;
}

[dir="rtl"] .hero-meta[b-cocf3y0oim] {
    flex-direction: row-reverse;
}

[dir="rtl"] .order-id[b-cocf3y0oim] {
    text-align: right;
}

[dir="rtl"] .total-row[b-cocf3y0oim] {
    flex-direction: row-reverse;
}

[dir="rtl"] .order-item[b-cocf3y0oim] {
    flex-direction: row-reverse;
}

[dir="rtl"] .section-header[b-cocf3y0oim] {
    flex-direction: row-reverse;
}

/* ============================================
   CANCEL ORDER BUTTON & MODAL
   ============================================ */

.cancel-order-btn[b-cocf3y0oim] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    margin-top: 12px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 16px;
    color: #ef4444;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.cancel-order-btn:hover[b-cocf3y0oim] { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.5); }
.cancel-order-btn:active[b-cocf3y0oim] { transform: scale(0.98); }
.cancel-order-btn:focus-visible[b-cocf3y0oim] { outline: 2px solid #ef4444; outline-offset: 2px; }

.cancel-overlay[b-cocf3y0oim] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn-b-cocf3y0oim 0.2s ease;
}

.cancel-modal[b-cocf3y0oim] {
    background: var(--bg, #fff);
    border-radius: 24px;
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    animation: modalPop-b-cocf3y0oim 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .cancel-modal[b-cocf3y0oim],
:root:not([data-theme="light"]) .cancel-modal[b-cocf3y0oim] {
    background: #1a1a1a;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.cancel-modal-icon[b-cocf3y0oim] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    margin: 0 auto 20px;
}

.cancel-modal h3[b-cocf3y0oim] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.cancel-modal p[b-cocf3y0oim] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0 0 28px;
}

.cancel-modal-actions[b-cocf3y0oim] {
    display: flex;
    gap: 12px;
}

.cancel-modal-btn[b-cocf3y0oim] {
    flex: 1;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
}

.cancel-modal-btn.keep[b-cocf3y0oim] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.cancel-modal-btn.keep:hover[b-cocf3y0oim] { background: var(--bg-tertiary); }

.cancel-modal-btn.confirm[b-cocf3y0oim] {
    background: #ef4444;
    color: white;
}

.cancel-modal-btn.confirm:hover[b-cocf3y0oim] { background: #dc2626; }
.cancel-modal-btn:disabled[b-cocf3y0oim] { opacity: 0.6; cursor: not-allowed; }
.cancel-modal-btn:active[b-cocf3y0oim] { transform: scale(0.97); }

.btn-spinner[b-cocf3y0oim] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-cocf3y0oim 0.6s linear infinite;
}

@keyframes fadeIn-b-cocf3y0oim {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalPop-b-cocf3y0oim {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
/* _content/QrBiteHub.Web/Components/Pages/Customer/PickupOrderConfirmation.razor.rz.scp.css */
/* ============================================
   PICKUP ORDER CONFIRMATION - Always Dark Theme
   Celebration & Clarity
   ============================================ */

/* Page Container — dark by default */
.confirmation-page[b-6sv53h7op5] {
    min-height: 100dvh;
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
    padding: 0 16px calc(40px + env(safe-area-inset-bottom));
    max-width: 480px;
    margin: 0 auto;
    color: #f5f5f5;
    animation: fadeIn-b-6sv53h7op5 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   LOADING STATE
   ============================================ */

.confirmation-loading[b-6sv53h7op5] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: #0a0a0a;
    padding: 24px;
}

.spinner[b-6sv53h7op5] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(245, 133, 36, 0.2);
    border-top-color: #f58524;
    border-radius: 50%;
    animation: spin-b-6sv53h7op5 0.8s linear infinite;
}

@keyframes spin-b-6sv53h7op5 {
    to { transform: rotate(360deg); }
}

/* ============================================
   ERROR STATE
   ============================================ */

.confirmation-error[b-6sv53h7op5] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: #0a0a0a;
    animation: fadeIn-b-6sv53h7op5 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.error-icon[b-6sv53h7op5] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    margin-bottom: 24px;
    animation: errorShake-b-6sv53h7op5 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

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

.confirmation-error h1[b-6sv53h7op5] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #f5f5f5;
    margin: 0 0 8px;
}

.confirmation-error p[b-6sv53h7op5] {
    font-size: 15px;
    line-height: 1.5;
    color: #a0a0a0;
    margin: 0 0 32px;
    max-width: 280px;
}

.back-btn[b-6sv53h7op5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    min-height: 52px;
    background: #f58524;
    border-radius: 14px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.back-btn:hover[b-6sv53h7op5] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 133, 36, 0.4);
}

.back-btn:focus-visible[b-6sv53h7op5] {
    outline: 2px solid #f58524;
    outline-offset: 3px;
}

.back-btn:active[b-6sv53h7op5] {
    transform: scale(0.98);
}

/* ============================================
   SUCCESS HEADER
   ============================================ */

.success-header[b-6sv53h7op5] {
    text-align: center;
    padding: 32px 0 28px;
}

.success-icon[b-6sv53h7op5] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #34d399;
    margin: 0 auto 20px;
    animation: successPop-b-6sv53h7op5 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes successPop-b-6sv53h7op5 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-header h1[b-6sv53h7op5] {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #f5f5f5;
    margin: 0 0 8px;
}

.success-header p[b-6sv53h7op5] {
    font-size: 15px;
    color: #a0a0a0;
    margin: 0;
}

/* ============================================
   ORDER CARD — Dark Glass Design
   ============================================ */

.order-card[b-6sv53h7op5] {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    animation: fadeInUp-b-6sv53h7op5 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
}

.order-number-section[b-6sv53h7op5] {
    text-align: center;
    margin-bottom: 20px;
}

.order-number-section .label[b-6sv53h7op5] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b6b6b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.order-number[b-6sv53h7op5] {
    font-size: 28px;
    font-weight: 800;
    color: #f58524;
    letter-spacing: 2px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

/* Order Status Badge */
.order-status[b-6sv53h7op5] {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.status-badge[b-6sv53h7op5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.pending[b-6sv53h7op5] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.status-badge.confirmed[b-6sv53h7op5] {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.status-badge.preparing[b-6sv53h7op5] {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

.status-badge.ready[b-6sv53h7op5] {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.status-dot[b-6sv53h7op5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-b-6sv53h7op5 2s ease-in-out infinite;
}

@keyframes pulse-b-6sv53h7op5 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* Order Meta */
.order-meta[b-6sv53h7op5] {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.meta-item[b-6sv53h7op5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #a0a0a0;
}

.meta-item svg[b-6sv53h7op5] {
    width: 16px;
    height: 16px;
    color: #6b6b6b;
    opacity: 0.7;
}

/* ============================================
   ORDER ITEMS SECTION
   ============================================ */

.items-section[b-6sv53h7op5] {
    margin-bottom: 20px;
    animation: fadeInUp-b-6sv53h7op5 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s backwards;
}

.items-section h2[b-6sv53h7op5] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #f5f5f5;
    margin: 0 0 12px;
}

.items-list[b-6sv53h7op5] {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.order-item[b-6sv53h7op5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.order-item:last-child[b-6sv53h7op5] {
    border-bottom: none;
}

.item-qty[b-6sv53h7op5] {
    font-size: 14px;
    font-weight: 600;
    color: #a0a0a0;
    min-width: 36px;
}

.item-info[b-6sv53h7op5] {
    flex: 1;
    min-width: 0;
}

.item-name[b-6sv53h7op5] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #f5f5f5;
    line-height: 1.4;
}

.item-notes[b-6sv53h7op5] {
    display: block;
    font-size: 12px;
    color: #6b6b6b;
    margin-top: 4px;
    font-style: italic;
}

.item-price[b-6sv53h7op5] {
    font-size: 14px;
    font-weight: 700;
    color: #f58524;
    white-space: nowrap;
}

/* ============================================
   ORDER SUMMARY
   ============================================ */

.summary-section[b-6sv53h7op5] {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: fadeInUp-b-6sv53h7op5 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.summary-row[b-6sv53h7op5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #a0a0a0;
    margin-bottom: 10px;
}

.summary-row:last-child[b-6sv53h7op5] {
    margin-bottom: 0;
}

.summary-row.total[b-6sv53h7op5] {
    font-size: 17px;
    font-weight: 700;
    color: #f5f5f5;
}

.summary-row.total span:last-child[b-6sv53h7op5] {
    color: #f58524;
    font-size: 20px;
}

.summary-divider[b-6sv53h7op5] {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 14px 0;
}

/* ============================================
   PICKUP INFO CARD
   ============================================ */

.pickup-info[b-6sv53h7op5] {
    display: flex;
    gap: 16px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: fadeInUp-b-6sv53h7op5 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.25s backwards;
}

.info-icon[b-6sv53h7op5] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(245, 133, 36, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f58524;
    flex-shrink: 0;
}

.info-content[b-6sv53h7op5] {
    flex: 1;
    min-width: 0;
}

.info-content h3[b-6sv53h7op5] {
    font-size: 11px;
    font-weight: 600;
    color: #6b6b6b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px;
}

.branch-name[b-6sv53h7op5] {
    font-size: 16px;
    font-weight: 700;
    color: #f5f5f5;
    margin: 0 0 4px;
    line-height: 1.3;
}

.branch-address[b-6sv53h7op5] {
    font-size: 13px;
    color: #a0a0a0;
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.actions-section[b-6sv53h7op5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fadeInUp-b-6sv53h7op5 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
}

.btn-secondary[b-6sv53h7op5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    min-height: 56px;
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #f5f5f5;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.btn-secondary:hover[b-6sv53h7op5] {
    background: #1f1f1f;
    transform: translateY(-2px);
}

.btn-secondary:focus-visible[b-6sv53h7op5] {
    outline: 2px solid #f58524;
    outline-offset: 2px;
}

.btn-secondary:active[b-6sv53h7op5] {
    transform: scale(0.98);
}

.btn-secondary svg[b-6sv53h7op5] {
    width: 18px;
    height: 18px;
}

/* Safe Bottom Spacer */
.safe-bottom[b-6sv53h7op5] {
    height: calc(20px + env(safe-area-inset-bottom));
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn-b-6sv53h7op5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp-b-6sv53h7op5 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 768px) {
    .confirmation-page[b-6sv53h7op5] {
        padding: 32px 24px calc(48px + env(safe-area-inset-bottom));
        max-width: 520px;
    }

    .order-card[b-6sv53h7op5],
    .items-list[b-6sv53h7op5],
    .summary-section[b-6sv53h7op5],
    .pickup-info[b-6sv53h7op5] {
        border-radius: 24px;
    }

    .order-card[b-6sv53h7op5] {
        padding: 28px 24px;
    }

    .order-number[b-6sv53h7op5] {
        font-size: 32px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .confirmation-page[b-6sv53h7op5],
    .order-card[b-6sv53h7op5],
    .items-section[b-6sv53h7op5],
    .summary-section[b-6sv53h7op5],
    .pickup-info[b-6sv53h7op5],
    .actions-section[b-6sv53h7op5],
    .success-icon[b-6sv53h7op5],
    .error-icon[b-6sv53h7op5],
    .spinner[b-6sv53h7op5],
    .status-dot[b-6sv53h7op5] {
        animation: none !important;
        transition: opacity 0.2s, transform 0.15s !important;
    }

    .back-btn:hover[b-6sv53h7op5],
    .btn-secondary:hover[b-6sv53h7op5] {
        transform: none !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .order-item[b-6sv53h7op5] {
    flex-direction: row-reverse;
}

[dir="rtl"] .item-qty[b-6sv53h7op5] {
    text-align: left;
}

[dir="rtl"] .pickup-info[b-6sv53h7op5] {
    flex-direction: row-reverse;
}

[dir="rtl"] .info-content[b-6sv53h7op5] {
    text-align: right;
}

[dir="rtl"] .meta-item[b-6sv53h7op5] {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn-secondary svg[b-6sv53h7op5] {
    transform: scaleX(-1);
}

/* ============================================
   CANCELLED ICON
   ============================================ */

.cancelled-icon[b-6sv53h7op5] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* ============================================
   STATUS BADGE - CANCELLED
   ============================================ */

.status-badge.cancelled[b-6sv53h7op5] {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ============================================
   PAY NOW BUTTON
   ============================================ */

.btn-pay-now[b-6sv53h7op5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    min-height: 56px;
    width: 100%;
    background: #f58524;
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.btn-pay-now:hover[b-6sv53h7op5] { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245, 133, 36, 0.4); }
.btn-pay-now:active[b-6sv53h7op5] { transform: scale(0.98); }
.btn-pay-now:focus-visible[b-6sv53h7op5] { outline: 2px solid #f58524; outline-offset: 3px; }

.btn-pay-now svg[b-6sv53h7op5] { width: 20px; height: 20px; }

/* ============================================
   CANCEL ORDER BUTTON
   ============================================ */

.btn-cancel-order[b-6sv53h7op5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    min-height: 52px;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 14px;
    color: #f87171;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

.btn-cancel-order:hover[b-6sv53h7op5] { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.5); }
.btn-cancel-order:active[b-6sv53h7op5] { transform: scale(0.98); }
.btn-cancel-order:focus-visible[b-6sv53h7op5] { outline: 2px solid #ef4444; outline-offset: 2px; }

/* ============================================
   CANCEL MODAL
   ============================================ */

.cancel-overlay[b-6sv53h7op5] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeOverlay-b-6sv53h7op5 0.2s ease;
}

.cancel-modal[b-6sv53h7op5] {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    animation: modalPop-b-6sv53h7op5 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cancel-modal-icon[b-6sv53h7op5] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    margin: 0 auto 20px;
}

.cancel-modal h3[b-6sv53h7op5] { font-size: 20px; font-weight: 700; color: #f5f5f5; margin: 0 0 8px; letter-spacing: -0.3px; }
.cancel-modal p[b-6sv53h7op5] { font-size: 14px; line-height: 1.5; color: #a0a0a0; margin: 0 0 28px; }

.cancel-modal-actions[b-6sv53h7op5] { display: flex; gap: 12px; }

.cancel-modal-btn[b-6sv53h7op5] {
    flex: 1;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
}

.cancel-modal-btn.keep[b-6sv53h7op5] { background: #222; color: #f5f5f5; }
.cancel-modal-btn.keep:hover[b-6sv53h7op5] { background: #2a2a2a; }
.cancel-modal-btn.confirm[b-6sv53h7op5] { background: #ef4444; color: white; }
.cancel-modal-btn.confirm:hover[b-6sv53h7op5] { background: #dc2626; }
.cancel-modal-btn:disabled[b-6sv53h7op5] { opacity: 0.6; cursor: not-allowed; }
.cancel-modal-btn:active[b-6sv53h7op5] { transform: scale(0.97); }

.btn-spinner[b-6sv53h7op5] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-6sv53h7op5 0.6s linear infinite;
}

@keyframes fadeOverlay-b-6sv53h7op5 { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop-b-6sv53h7op5 { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* _content/QrBiteHub.Web/Components/Pages/Customer/Privacy.razor.rz.scp.css */
/* ============================================
   PRIVACY PAGE - Premium Redesign
   Aesthetic: Clean & Professional
   ============================================ */

/* Page Container */
.privacy-page[b-ej4xban650] {
    min-height: 100dvh;
    background: var(--bg-page, #fafafa);
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

[data-theme="dark"] .privacy-page[b-ej4xban650],
:root:not([data-theme="light"]) .privacy-page[b-ej4xban650] {
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}

/* ============================================
   HEADER - Floating Glass Design
   ============================================ */

.privacy-header[b-ej4xban650] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--bg-glass, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-glass, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    gap: 16px;
}

[data-theme="dark"] .privacy-header[b-ej4xban650] {
    background: rgba(10, 10, 10, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.privacy-header h1[b-ej4xban650] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin: 0;
}

.back-btn[b-ej4xban650] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.back-btn:hover[b-ej4xban650] {
    background: var(--bg-tertiary);
    transform: translateX(-2px);
}

[dir="rtl"] .back-btn:hover[b-ej4xban650] {
    transform: translateX(2px);
}

.back-btn:focus-visible[b-ej4xban650] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.back-btn:active[b-ej4xban650] {
    transform: scale(0.92);
}

/* ============================================
   CONTENT
   ============================================ */

.privacy-content[b-ej4xban650] {
    padding: 24px 16px 40px;
    max-width: 700px;
    margin: 0 auto;
    animation: fadeIn-b-ej4xban650 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.last-updated[b-ej4xban650] {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 8px 14px;
    border-radius: 20px;
    margin-bottom: 28px;
}

[data-theme="dark"] .last-updated[b-ej4xban650] {
    background: rgba(255, 255, 255, 0.06);
}

/* ============================================
   POLICY SECTIONS
   ============================================ */

.policy-section[b-ej4xban650] {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg, #fff);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-ej4xban650 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

[data-theme="dark"] .policy-section[b-ej4xban650] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.policy-section:nth-child(2)[b-ej4xban650] { animation-delay: 0.05s; }
.policy-section:nth-child(3)[b-ej4xban650] { animation-delay: 0.1s; }
.policy-section:nth-child(4)[b-ej4xban650] { animation-delay: 0.15s; }
.policy-section:nth-child(5)[b-ej4xban650] { animation-delay: 0.2s; }
.policy-section:nth-child(6)[b-ej4xban650] { animation-delay: 0.25s; }
.policy-section:nth-child(7)[b-ej4xban650] { animation-delay: 0.3s; }
.policy-section:nth-child(8)[b-ej4xban650] { animation-delay: 0.35s; }
.policy-section:nth-child(9)[b-ej4xban650] { animation-delay: 0.4s; }

.policy-section h2[b-ej4xban650] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary, #f58524);
    display: inline-block;
}

.policy-section h3[b-ej4xban650] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 20px 0 10px;
}

.policy-section h3:first-of-type[b-ej4xban650] {
    margin-top: 0;
}

.policy-section p[b-ej4xban650] {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

.policy-section p:last-child[b-ej4xban650] {
    margin-bottom: 0;
}

.policy-section ul[b-ej4xban650] {
    margin: 0 0 16px 0;
    padding: 0;
    list-style: none;
}

.policy-section ul:last-child[b-ej4xban650] {
    margin-bottom: 0;
}

.policy-section li[b-ej4xban650] {
    position: relative;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding-left: 24px;
    margin-bottom: 10px;
}

.policy-section li:last-child[b-ej4xban650] {
    margin-bottom: 0;
}

.policy-section li[b-ej4xban650]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    background: var(--primary, #f58524);
    border-radius: 50%;
    opacity: 0.7;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn-b-ej4xban650 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp-b-ej4xban650 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE - Tablet+
   ============================================ */

@media (min-width: 768px) {
    .privacy-content[b-ej4xban650] {
        padding: 32px 24px 48px;
    }

    .policy-section[b-ej4xban650] {
        padding: 28px;
        border-radius: 24px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .privacy-content[b-ej4xban650],
    .policy-section[b-ej4xban650] {
        animation: none !important;
        transition: opacity 0.2s !important;
    }

    .back-btn:hover[b-ej4xban650] {
        transform: none !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .privacy-header[b-ej4xban650] {
    flex-direction: row-reverse;
}

[dir="rtl"] .privacy-header h1[b-ej4xban650] {
    text-align: right;
}

[dir="rtl"] .policy-section li[b-ej4xban650] {
    padding-left: 0;
    padding-right: 24px;
}

[dir="rtl"] .policy-section li[b-ej4xban650]::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .last-updated[b-ej4xban650] {
    direction: rtl;
}
/* _content/QrBiteHub.Web/Components/Pages/Customer/ReserveTable.razor.rz.scp.css */
/* Reserve Table - Customer Booking Page */
.reserve-page[b-b21gy2hxcu] { max-width: 600px; margin: 0 auto; padding: 1.5rem 1rem; min-height: 100vh; }

/* Loading / Error */
.loading-state[b-b21gy2hxcu], .error-state[b-b21gy2hxcu] { text-align: center; padding: 4rem 1rem; color: #666; }
.spinner[b-b21gy2hxcu] { width: 32px; height: 32px; border: 3px solid #eee; border-top-color: #f58524; border-radius: 50%; animation: spin-b-b21gy2hxcu 0.6s linear infinite; margin: 0 auto 1rem; }
.spinner.small[b-b21gy2hxcu] { width: 20px; height: 20px; border-width: 2px; margin: 0; }
@keyframes spin-b-b21gy2hxcu { to { transform: rotate(360deg); } }

/* Restaurant Header */
.restaurant-header[b-b21gy2hxcu] { text-align: center; margin-bottom: 2rem; }
.restaurant-header h1[b-b21gy2hxcu] { font-size: 1.5rem; font-weight: 700; color: #1a1a1a; margin: 0; }
.branch-name[b-b21gy2hxcu] { font-size: 0.9rem; color: #666; margin: 0.25rem 0 0; }
.header-subtitle[b-b21gy2hxcu] { font-size: 0.85rem; color: #f58524; margin: 0.5rem 0 0; font-weight: 500; }

/* Steps */
.steps[b-b21gy2hxcu] { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 2rem; }
.step[b-b21gy2hxcu] { display: flex; align-items: center; gap: 0.4rem; }
.step-num[b-b21gy2hxcu] { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; color: #999; transition: all 0.2s; }
.step.active .step-num[b-b21gy2hxcu] { border-color: #f58524; color: #f58524; }
.step.done .step-num[b-b21gy2hxcu] { background: #f58524; border-color: #f58524; color: #fff; }
.step-text[b-b21gy2hxcu] { font-size: 0.8rem; color: #999; }
.step.active .step-text[b-b21gy2hxcu] { color: #1a1a1a; font-weight: 500; }
.step-line[b-b21gy2hxcu] { width: 40px; height: 2px; background: #ddd; margin: 0 0.25rem; }
.step-line.active[b-b21gy2hxcu] { background: #f58524; }

/* Step Content */
.step-content[b-b21gy2hxcu] { }

/* Form */
.form-group[b-b21gy2hxcu] { margin-bottom: 1.25rem; }
.form-group label[b-b21gy2hxcu] { display: block; font-size: 0.85rem; font-weight: 500; color: #333; margin-bottom: 0.4rem; }
.form-group input[b-b21gy2hxcu], .form-group select[b-b21gy2hxcu], .form-group textarea[b-b21gy2hxcu] { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9rem; color: #1a1a1a; background: #fff; }
.form-group input:focus[b-b21gy2hxcu], .form-group select:focus[b-b21gy2hxcu], .form-group textarea:focus[b-b21gy2hxcu] { outline: none; border-color: #f58524; box-shadow: 0 0 0 3px rgba(245,133,36,0.1); }

/* Party size pills */
.party-pills[b-b21gy2hxcu] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.party-pill[b-b21gy2hxcu] { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #ddd; background: #fff; font-size: 1rem; font-weight: 600; color: #333; cursor: pointer; transition: all 0.15s; }
.party-pill:hover[b-b21gy2hxcu] { border-color: #f58524; }
.party-pill.active[b-b21gy2hxcu] { background: #f58524; border-color: #f58524; color: #fff; }
.party-input[b-b21gy2hxcu] { width: 60px !important; height: 44px; text-align: center; border-radius: 22px !important; }

/* Time slots */
.time-slots[b-b21gy2hxcu] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.time-pill[b-b21gy2hxcu] { padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; text-align: center; transition: all 0.15s; font-size: 0.9rem; font-weight: 500; color: #333; }
.time-pill:hover[b-b21gy2hxcu] { border-color: #f58524; }
.time-pill.active[b-b21gy2hxcu] { background: #f58524; border-color: #f58524; color: #fff; }
.slot-avail[b-b21gy2hxcu] { display: block; font-size: 0.65rem; font-weight: 400; opacity: 0.7; }
.time-pill.active .slot-avail[b-b21gy2hxcu] { color: rgba(255,255,255,0.8); }

.slots-loading[b-b21gy2hxcu] { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem; color: #666; font-size: 0.85rem; }
.no-slots[b-b21gy2hxcu] { text-align: center; padding: 1.5rem; color: #666; }
.no-slots p[b-b21gy2hxcu] { margin-bottom: 1rem; }

/* Step Actions */
.step-actions[b-b21gy2hxcu] { margin-top: 2rem; }
.step-actions.dual[b-b21gy2hxcu] { display: flex; gap: 0.75rem; }
.btn-accent[b-b21gy2hxcu] { flex: 1; padding: 0.75rem 1.5rem; background: #f58524; color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.btn-accent:hover[b-b21gy2hxcu] { background: #e0741a; }
.btn-accent:disabled[b-b21gy2hxcu] { opacity: 0.5; cursor: not-allowed; }
.btn-outline[b-b21gy2hxcu] { flex: 1; padding: 0.75rem 1.5rem; background: #fff; color: #333; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; font-weight: 500; cursor: pointer; }
.btn-outline:hover[b-b21gy2hxcu] { border-color: #f58524; color: #f58524; }
.btn-danger[b-b21gy2hxcu] { flex: 1; padding: 0.75rem 1.5rem; background: #dc3545; color: #fff; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 500; cursor: pointer; }
.btn-danger:disabled[b-b21gy2hxcu] { opacity: 0.5; cursor: not-allowed; }

/* Review card */
.review-card[b-b21gy2hxcu] { background: #f9f9f9; border: 1px solid #eee; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.review-card h3[b-b21gy2hxcu] { font-size: 1rem; font-weight: 600; color: #1a1a1a; margin: 0 0 1rem 0; }
.review-row[b-b21gy2hxcu] { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #eee; font-size: 0.85rem; }
.review-row:last-child[b-b21gy2hxcu] { border-bottom: none; }
.review-row span:first-child[b-b21gy2hxcu] { color: #666; }
.review-row span:last-child[b-b21gy2hxcu] { color: #1a1a1a; font-weight: 500; }

.policy-note[b-b21gy2hxcu] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #666; padding: 0.75rem; background: #fffbf0; border: 1px solid #f5e6cc; border-radius: 8px; margin-bottom: 1rem; }

/* Confirmation screen */
.confirmation-screen[b-b21gy2hxcu] { text-align: center; padding: 2rem 0; }
.confirm-check[b-b21gy2hxcu] { color: #28a745; margin-bottom: 1rem; }
.confirm-check.cancelled[b-b21gy2hxcu] { color: #dc3545; }
.confirmation-screen h2[b-b21gy2hxcu] { font-size: 1.3rem; font-weight: 700; color: #1a1a1a; margin: 0 0 1rem; }
.confirm-code[b-b21gy2hxcu] { font-family: monospace; font-size: 1.5rem; font-weight: 700; color: #f58524; background: #fff5ec; padding: 0.75rem 1.5rem; border-radius: 8px; display: inline-block; margin-bottom: 1.5rem; letter-spacing: 2px; }
.confirm-details[b-b21gy2hxcu] { text-align: left; background: #f9f9f9; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.detail-row[b-b21gy2hxcu] { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.85rem; }
.detail-label[b-b21gy2hxcu] { color: #666; }
.detail-value[b-b21gy2hxcu] { color: #1a1a1a; font-weight: 500; }
.confirm-message[b-b21gy2hxcu] { font-size: 0.85rem; color: #666; padding: 0.75rem; background: #f0f8ff; border-radius: 8px; margin-bottom: 1rem; }
.confirm-actions[b-b21gy2hxcu] { display: flex; gap: 0.75rem; }

.cancel-section[b-b21gy2hxcu] { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee; }
.cancel-section h3[b-b21gy2hxcu] { font-size: 1rem; color: #dc3545; margin: 0 0 1rem; }
.cancel-actions[b-b21gy2hxcu] { display: flex; gap: 0.75rem; margin-top: 1rem; }

.error-toast[b-b21gy2hxcu] { background: #fde8e8; color: #dc3545; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1rem; }

@media (max-width: 480px) {
    .reserve-page[b-b21gy2hxcu] { padding: 1rem 0.75rem; }
    .step-text[b-b21gy2hxcu] { display: none; }
    .steps[b-b21gy2hxcu] { gap: 0.25rem; }
}
/* _content/QrBiteHub.Web/Components/Pages/Customer/RestaurantMenu.razor.rz.scp.css */
/* ============================================
   RESTAURANT MENU - Premium Redesign
   Aesthetic: Immersive Culinary Experience
   ============================================ */

/* ===== PAGE CONTAINER ===== */
.menu-page[b-vkvr3vgw63] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-page, #fafafa);
    position: relative;
}

[data-theme="dark"] .menu-page[b-vkvr3vgw63],
:root:not([data-theme="light"]) .menu-page[b-vkvr3vgw63] {
    background: #0a0a0a;
}

/* ===== TOAST ===== */
.toast-popup[b-vkvr3vgw63] {
    position: fixed;
    top: max(20px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    color: #22c55e;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    animation: toastSlide-b-vkvr3vgw63 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .toast-popup[b-vkvr3vgw63],
:root:not([data-theme="light"]) .toast-popup[b-vkvr3vgw63] {
    background: #1a1a1a;
    border-color: #2a2a2a;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.toast-icon[b-vkvr3vgw63] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes toastSlide-b-vkvr3vgw63 {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== LOADING SCREEN ===== */
.menu-loading-screen[b-vkvr3vgw63] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-page, #fafafa);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .menu-loading-screen[b-vkvr3vgw63],
:root:not([data-theme="light"]) .menu-loading-screen[b-vkvr3vgw63] {
    background: #0a0a0a;
}

.loading-atmosphere[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atmos-pulse[b-vkvr3vgw63] {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 133, 36, 0.15) 0%, transparent 70%);
    animation: atmosPulse-b-vkvr3vgw63 3s ease-in-out infinite;
}

.atmos-ring[b-vkvr3vgw63] {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid rgba(245, 133, 36, 0.2);
    animation: ringExpand-b-vkvr3vgw63 2.5s ease-out infinite;
}

.atmos-ring.delay[b-vkvr3vgw63] {
    animation-delay: 1.25s;
}

@keyframes atmosPulse-b-vkvr3vgw63 {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes ringExpand-b-vkvr3vgw63 {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

.loading-brand[b-vkvr3vgw63] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-logo-frame[b-vkvr3vgw63] {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmerPremium-b-vkvr3vgw63 1.8s ease-in-out infinite;
}

[data-theme="dark"] .loading-logo-frame[b-vkvr3vgw63],
:root:not([data-theme="light"]) .loading-logo-frame[b-vkvr3vgw63] {
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
}

.loading-skeleton[b-vkvr3vgw63] {
    height: 18px;
    border-radius: 9px;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmerPremium-b-vkvr3vgw63 1.8s ease-in-out infinite;
}

[data-theme="dark"] .loading-skeleton[b-vkvr3vgw63],
:root:not([data-theme="light"]) .loading-skeleton[b-vkvr3vgw63] {
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
}

.loading-skeleton.lg[b-vkvr3vgw63] { width: 180px; animation-delay: 0.1s; }
.loading-skeleton.md[b-vkvr3vgw63] { width: 120px; animation-delay: 0.2s; }

@keyframes shimmerPremium-b-vkvr3vgw63 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== ERROR SCREEN ===== */
.menu-error-screen[b-vkvr3vgw63] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page, #fafafa);
    position: relative;
    padding: 24px;
}

[data-theme="dark"] .menu-error-screen[b-vkvr3vgw63],
:root:not([data-theme="light"]) .menu-error-screen[b-vkvr3vgw63] {
    background: #0a0a0a;
}

.error-atmosphere[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.error-glow-ring[b-vkvr3vgw63] {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
}

.error-content[b-vkvr3vgw63] {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 320px;
}

.error-icon-frame[b-vkvr3vgw63] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
}

.error-icon-frame svg[b-vkvr3vgw63] {
    width: 36px;
    height: 36px;
}

.error-content h1[b-vkvr3vgw63] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.error-content p[b-vkvr3vgw63] {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

.return-home-btn[b-vkvr3vgw63] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #f58524 0%, #fb923c 100%);
    border-radius: 100px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 24px rgba(245, 133, 36, 0.3);
}

.return-home-btn svg[b-vkvr3vgw63] {
    width: 18px;
    height: 18px;
}

.return-home-btn:hover[b-vkvr3vgw63] {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(245, 133, 36, 0.4);
}

.return-home-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

/* Atmospheric Background */
.menu-atmosphere[b-vkvr3vgw63] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.menu-atmosphere .atmos-grain[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
}

.menu-atmosphere .atmos-gradient[b-vkvr3vgw63] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center top, rgba(245, 133, 36, 0.08) 0%, transparent 70%);
}

/* ===== PREMIUM HEADER ===== */
.menu-header[b-vkvr3vgw63] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0;
}

.header-glass[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    background: var(--bg-glass, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-glass, rgba(0, 0, 0, 0.06));
}

[data-theme="dark"] .header-glass[b-vkvr3vgw63],
:root:not([data-theme="light"]) .header-glass[b-vkvr3vgw63] {
    background: rgba(10, 10, 10, 0.9);
    border-bottom-color: #1a1a1a;
}

.header-content[b-vkvr3vgw63] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 12px;
    max-width: 600px;
    margin: 0 auto;
    gap: 10px;
}

.header-nav-btn[b-vkvr3vgw63] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .header-nav-btn[b-vkvr3vgw63],
:root:not([data-theme="light"]) .header-nav-btn[b-vkvr3vgw63] {
    background: #161616;
    color: #888;
}

.header-nav-btn svg[b-vkvr3vgw63] {
    width: 20px;
    height: 20px;
}

.header-nav-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.header-nav-btn:active[b-vkvr3vgw63] {
    transform: scale(0.95);
    background: var(--bg-tertiary);
}

[data-theme="dark"] .header-nav-btn:active[b-vkvr3vgw63],
:root:not([data-theme="light"]) .header-nav-btn:active[b-vkvr3vgw63] {
    background: #1f1f1f;
}

/* ===== HEADER BRAND ROW (QrBite logo + lang + my orders) ===== */
.header-brand-row[b-vkvr3vgw63] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 0;
    max-width: 600px;
    margin: 0 auto;
}

.nav-brand[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.brand-logo-img[b-vkvr3vgw63] {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
}

.brand-name[b-vkvr3vgw63] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.02em;
}

[data-theme="dark"] .brand-name[b-vkvr3vgw63],
:root:not([data-theme="light"]) .brand-name[b-vkvr3vgw63] {
    color: #fff;
}

.brand-qr[b-vkvr3vgw63] {
    color: #f58524;
}

.header-actions[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Language Toggle — Compact Pill */
.lang-toggle[b-vkvr3vgw63] {
    display: flex;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 10px;
    padding: 2px;
}

[data-theme="dark"] .lang-toggle[b-vkvr3vgw63],
:root:not([data-theme="light"]) .lang-toggle[b-vkvr3vgw63] {
    background: #1a1a1a;
}

.lang-btn[b-vkvr3vgw63] {
    padding: 5px 10px;
    min-width: 32px;
    min-height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #94a3b8);
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.lang-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.lang-btn.active[b-vkvr3vgw63] {
    background: var(--bg, #fff);
    color: var(--text-primary, #0f172a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .lang-btn.active[b-vkvr3vgw63],
:root:not([data-theme="light"]) .lang-btn.active[b-vkvr3vgw63] {
    background: #2a2a2a;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lang-btn:active[b-vkvr3vgw63] {
    transform: scale(0.95);
}

/* My Orders Button — Premium Orange Circular Design */
.my-orders-btn[b-vkvr3vgw63] {
    width: 36px;
    height: 36px;
    border-radius: 9999px !important;
    background: #f58524 !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(245, 133, 36, 0.3);
}

.my-orders-btn:hover[b-vkvr3vgw63] {
    background: #e6751a !important;
    box-shadow: 0 4px 12px rgba(245, 133, 36, 0.4);
    transform: scale(1.05);
}

.my-orders-btn:active[b-vkvr3vgw63] {
    background: #d66510 !important;
    transform: scale(0.95) !important;
}

.header-identity[b-vkvr3vgw63] {
    text-align: center;
    flex: 1;
}

.header-title[b-vkvr3vgw63] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.header-badge[b-vkvr3vgw63] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 10px;
    background: rgba(245, 133, 36, 0.1);
    border-radius: 100px;
}

.badge-dot[b-vkvr3vgw63] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f58524;
    animation: badgePulse-b-vkvr3vgw63 2s ease-in-out infinite;
}

@keyframes badgePulse-b-vkvr3vgw63 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.badge-text[b-vkvr3vgw63] {
    font-size: 11px;
    font-weight: 600;
    color: #f58524;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge variants: Open / Closed */
.header-badge.badge-open[b-vkvr3vgw63] { background: rgba(34, 197, 94, 0.12); }
.header-badge.badge-open .badge-dot[b-vkvr3vgw63] { background: #22c55e; animation: badgePulse-b-vkvr3vgw63 2s ease-in-out infinite; }
.header-badge.badge-open .badge-text[b-vkvr3vgw63] { color: #22c55e; }

.header-badge.badge-closed[b-vkvr3vgw63] { background: rgba(239, 68, 68, 0.12); }
.header-badge.badge-closed .badge-dot[b-vkvr3vgw63] { background: #ef4444; animation: none; }
.header-badge.badge-closed .badge-text[b-vkvr3vgw63] { color: #ef4444; }

/* Reserve a Table button */
.reserve-table-btn[b-vkvr3vgw63] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px;
    background: rgba(245, 133, 36, 0.12); color: #f58524;
    font-size: 0.78rem; font-weight: 600;
    text-decoration: none; transition: all 0.2s;
    margin-top: 4px;
}
.reserve-table-btn:hover[b-vkvr3vgw63] { background: rgba(245, 133, 36, 0.2); }
.reserve-table-btn svg[b-vkvr3vgw63] { flex-shrink: 0; }

/* Header branch location bar */
.header-branch-location[b-vkvr3vgw63] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    max-width: 100%;
}

.header-loc-icon[b-vkvr3vgw63] {
    width: 12px;
    height: 12px;
    color: #f58524;
    flex-shrink: 0;
}

.header-loc-text[b-vkvr3vgw63] {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.header-map-link[b-vkvr3vgw63] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #f58524;
    background: rgba(245, 133, 36, 0.1);
    flex-shrink: 0;
    transition: all 0.2s ease;
    text-decoration: none;
    margin-inline-start: 4px;
}

.header-map-link svg[b-vkvr3vgw63] {
    width: 12px;
    height: 12px;
}

.header-map-link:active[b-vkvr3vgw63] {
    transform: scale(0.9);
}

/* Closed branch in dropdown */
.dropdown-item.branch-closed[b-vkvr3vgw63] { opacity: 0.45; pointer-events: none; }
.item-closed-label[b-vkvr3vgw63] { display: inline-block; margin-inline-start: 6px; font-size: 10px; font-weight: 700; color: #ef4444; text-transform: uppercase; letter-spacing: 0.3px; }

/* Closed branch info banner */
.branch-closed-banner[b-vkvr3vgw63] { display: flex; align-items: flex-start; gap: 10px; margin: 0 16px 12px; padding: 12px 14px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.18); border-radius: 12px; color: #ef4444; font-size: 13px; line-height: 1.5; }
[data-theme="dark"] .branch-closed-banner[b-vkvr3vgw63], :root:not([data-theme="light"]) .branch-closed-banner[b-vkvr3vgw63] { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); }
.branch-closed-banner svg[b-vkvr3vgw63] { flex-shrink: 0; margin-top: 1px; }
.banner-text[b-vkvr3vgw63] { display: flex; flex-direction: column; gap: 2px; }
.banner-opens-at[b-vkvr3vgw63] { font-size: 12px; opacity: 0.8; }

.header-spacer[b-vkvr3vgw63] {
    width: 44px;
}

/* ===== RESTAURANT HERO ===== */
.restaurant-hero[b-vkvr3vgw63] {
    position: relative;
    margin-bottom: 24px;
}

.hero-banner[b-vkvr3vgw63] {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.hero-image[b-vkvr3vgw63] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, var(--bg-page, #fafafa) 100%);
}

[data-theme="dark"] .hero-overlay[b-vkvr3vgw63],
:root:not([data-theme="light"]) .hero-overlay[b-vkvr3vgw63] {
    background: linear-gradient(to bottom, rgba(8, 8, 8, 0.3) 0%, rgba(8, 8, 8, 0.95) 100%);
}

.hero-vignette[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .hero-vignette[b-vkvr3vgw63],
:root:not([data-theme="light"]) .hero-vignette[b-vkvr3vgw63] {
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}

.hero-content[b-vkvr3vgw63] {
    position: relative;
    margin-top: -60px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-logo-frame[b-vkvr3vgw63] {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 28px;
    overflow: hidden;
    border: 3px solid var(--bg-page, #fafafa);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    margin-bottom: 16px;
}

[data-theme="dark"] .hero-logo-frame[b-vkvr3vgw63],
:root:not([data-theme="light"]) .hero-logo-frame[b-vkvr3vgw63] {
    border-color: #080808;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.hero-logo-frame img[b-vkvr3vgw63] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-glow[b-vkvr3vgw63] {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(245, 133, 36, 0.3) 0%, transparent 50%);
    border-radius: inherit;
    z-index: -1;
}

.hero-info[b-vkvr3vgw63] {
    max-width: 300px;
}

.hero-name[b-vkvr3vgw63] {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.hero-tagline[b-vkvr3vgw63] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Hero Branch Info */
.hero-branch-info[b-vkvr3vgw63] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.hero-branch-row[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-branch-icon[b-vkvr3vgw63] {
    width: 14px;
    height: 14px;
    color: #f58524;
    flex-shrink: 0;
}

.hero-branch-text[b-vkvr3vgw63] {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    line-height: 1.4;
}

.hero-branch-phone[b-vkvr3vgw63] {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: color 0.2s;
}

.hero-branch-phone:hover[b-vkvr3vgw63] {
    color: #f58524;
}

.hero-map-btn[b-vkvr3vgw63] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #f58524;
    background: rgba(245, 133, 36, 0.12);
    flex-shrink: 0;
    transition: all 0.2s ease;
    text-decoration: none;
    margin-inline-start: 4px;
}

.hero-map-btn svg[b-vkvr3vgw63] {
    width: 14px;
    height: 14px;
}

.hero-map-btn:active[b-vkvr3vgw63] {
    transform: scale(0.9);
}

[data-theme="dark"] .hero-map-btn[b-vkvr3vgw63],
:root:not([data-theme="light"]) .hero-map-btn[b-vkvr3vgw63] {
    background: rgba(245, 133, 36, 0.15);
}

/* ===== BRANCH PICKER ===== */
/* Desktop dropdown - hidden on mobile */
.branch-picker-section[b-vkvr3vgw63] {
    padding: 0 16px 16px;
}

/* Branch dropdown - mobile base styles */
.branch-dropdown[b-vkvr3vgw63] {
    position: relative;
}

.dropdown-trigger[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    width: 100%;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    color: var(--text-primary, #0f172a);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

[data-theme="dark"] .dropdown-trigger[b-vkvr3vgw63],
:root:not([data-theme="light"]) .dropdown-trigger[b-vkvr3vgw63] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.branch-dropdown.open .dropdown-trigger[b-vkvr3vgw63] {
    border-color: #f58524;
}

.dropdown-trigger .location-icon[b-vkvr3vgw63] {
    width: 18px;
    height: 18px;
    color: #f58524;
    flex-shrink: 0;
}

.dropdown-trigger .selected-name[b-vkvr3vgw63] {
    text-align: start;
    font-weight: 500;
}

.dropdown-trigger .chevron-icon[b-vkvr3vgw63] {
    width: 16px;
    height: 16px;
    color: var(--text-muted, #94a3b8);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.branch-dropdown.open .chevron-icon[b-vkvr3vgw63] {
    transform: rotate(180deg);
}

.selected-branch-info[b-vkvr3vgw63] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-branch-info .selected-name[b-vkvr3vgw63] {
    text-align: start;
    font-weight: 500;
}

.selected-address[b-vkvr3vgw63] {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-backdrop[b-vkvr3vgw63] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dropdown-menu[b-vkvr3vgw63] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
    animation: dropdownSlide-b-vkvr3vgw63 0.2s ease;
}

[data-theme="dark"] .dropdown-menu[b-vkvr3vgw63],
:root:not([data-theme="light"]) .dropdown-menu[b-vkvr3vgw63] {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

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

.dropdown-item[b-vkvr3vgw63] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary, #0f172a);
    text-align: start;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

[data-theme="dark"] .dropdown-item[b-vkvr3vgw63],
:root:not([data-theme="light"]) .dropdown-item[b-vkvr3vgw63] {
    color: #fff;
}

.dropdown-item:not(:last-child)[b-vkvr3vgw63] {
    border-bottom: 1px solid var(--border, #f1f5f9);
}

[data-theme="dark"] .dropdown-item:not(:last-child)[b-vkvr3vgw63],
:root:not([data-theme="light"]) .dropdown-item:not(:last-child)[b-vkvr3vgw63] {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dropdown-item:hover[b-vkvr3vgw63] {
    background: var(--bg-secondary, #f8fafc);
}

[data-theme="dark"] .dropdown-item:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .dropdown-item:hover[b-vkvr3vgw63] {
    background: rgba(255, 255, 255, 0.05);
}

.dropdown-item.selected[b-vkvr3vgw63] {
    background: rgba(245, 133, 36, 0.06);
}

.dropdown-item.branch-closed[b-vkvr3vgw63] {
    opacity: 0.5;
}

.dropdown-item .item-name[b-vkvr3vgw63] {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-item .item-address[b-vkvr3vgw63] {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
}

.dropdown-item .item-closed-label[b-vkvr3vgw63] {
    font-size: 11px;
    color: #ef4444;
    font-weight: 600;
}

.dropdown-item .check-icon[b-vkvr3vgw63] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #f58524;
}

[dir="rtl"] .dropdown-item .check-icon[b-vkvr3vgw63] {
    right: auto;
    left: 16px;
}

/* Single branch - mobile base styles */
.single-branch[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-secondary, #64748b);
}

[data-theme="dark"] .single-branch[b-vkvr3vgw63],
:root:not([data-theme="light"]) .single-branch[b-vkvr3vgw63] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ccc;
}

.single-branch > svg[b-vkvr3vgw63] {
    width: 18px;
    height: 18px;
    color: #f58524;
    flex-shrink: 0;
}

.single-branch-info[b-vkvr3vgw63] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.branch-address-subtitle[b-vkvr3vgw63] {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.branch-maps-link[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #f58524;
    background: rgba(245, 133, 36, 0.1);
    flex-shrink: 0;
    transition: all 0.2s ease;
    text-decoration: none;
}

.branch-maps-link:active[b-vkvr3vgw63] {
    transform: scale(0.92);
}

/* Mobile branch picker (orphaned - kept for reference) */
.branch-picker[b-vkvr3vgw63] {
    margin: 0 16px 20px;
    padding: 16px;
    background: var(--bg, #fff);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .branch-picker[b-vkvr3vgw63],
:root:not([data-theme="light"]) .branch-picker[b-vkvr3vgw63] {
    background: #111;
}

.picker-header[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.picker-header svg[b-vkvr3vgw63] {
    width: 16px;
    height: 16px;
    color: #f58524;
}

.picker-options[b-vkvr3vgw63] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.picker-option[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-secondary, #f8fafc);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
    text-align: start;
    font-family: inherit;
    color: inherit;
}

[data-theme="dark"] .picker-option[b-vkvr3vgw63],
:root:not([data-theme="light"]) .picker-option[b-vkvr3vgw63] {
    background: #161616;
}

.picker-option:hover[b-vkvr3vgw63] {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .picker-option:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .picker-option:hover[b-vkvr3vgw63] {
    background: #1a1a1a;
}

.picker-option.active[b-vkvr3vgw63] {
    border-color: #f58524;
    background: var(--bg-tertiary);
}

[data-theme="dark"] .picker-option.active[b-vkvr3vgw63],
:root:not([data-theme="light"]) .picker-option.active[b-vkvr3vgw63] {
    background: #1a1a1a;
}

.option-radio[b-vkvr3vgw63] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[data-theme="dark"] .option-radio[b-vkvr3vgw63],
:root:not([data-theme="light"]) .option-radio[b-vkvr3vgw63] {
    border-color: #333;
}

.picker-option.active .option-radio[b-vkvr3vgw63] {
    border-color: #f58524;
}

.radio-dot[b-vkvr3vgw63] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f58524;
    transform: scale(0);
    transition: transform 0.2s;
}

.picker-option.active .radio-dot[b-vkvr3vgw63] {
    transform: scale(1);
}

.option-info[b-vkvr3vgw63] {
    flex: 1;
}

.option-name[b-vkvr3vgw63] {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.option-address[b-vkvr3vgw63] {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.single-location[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 20px;
    padding: 12px 16px;
    background: var(--bg, #fff);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

[data-theme="dark"] .single-location[b-vkvr3vgw63],
:root:not([data-theme="light"]) .single-location[b-vkvr3vgw63] {
    background: #111;
}

.single-location svg[b-vkvr3vgw63] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #f58524;
}

/* ===== SEARCH SECTION ===== */
.search-section[b-vkvr3vgw63] {
    padding: 0 16px 16px;
    max-width: 600px;
    margin: 0 auto;
}

.search-field[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    transition: all 0.2s;
}

[data-theme="dark"] .search-field[b-vkvr3vgw63],
:root:not([data-theme="light"]) .search-field[b-vkvr3vgw63] {
    background: #111;
    border-color: transparent;
}

.search-field:focus-within[b-vkvr3vgw63] {
    background: var(--bg-secondary);
    border-color: var(--primary, #f58524);
    box-shadow: 0 0 0 3px rgba(245, 133, 36, 0.15);
}

[data-theme="dark"] .search-field:focus-within[b-vkvr3vgw63],
:root:not([data-theme="light"]) .search-field:focus-within[b-vkvr3vgw63] {
    background: #161616;
    box-shadow: 0 0 0 2px rgba(245, 133, 36, 0.3);
}

.search-field svg[b-vkvr3vgw63] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-field input[b-vkvr3vgw63] {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--text-primary);
    font-family: inherit;
}

.search-field input[b-vkvr3vgw63]::placeholder {
    color: var(--text-muted);
}

.clear-btn[b-vkvr3vgw63] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .clear-btn[b-vkvr3vgw63],
:root:not([data-theme="light"]) .clear-btn[b-vkvr3vgw63] {
    background: #222;
    color: #888;
}

.clear-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.clear-btn:hover[b-vkvr3vgw63] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .clear-btn:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .clear-btn:hover[b-vkvr3vgw63] {
    background: #333;
    color: #aaa;
}

.clear-btn:active[b-vkvr3vgw63] {
    transform: scale(0.92);
}

/* ===== CATEGORY NAVIGATION ===== */
.category-navigation[b-vkvr3vgw63] {
    position: sticky;
    top: 68px;
    z-index: 90;
    background: var(--bg-glass, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border, #e2e8f0);
}

[data-theme="dark"] .category-navigation[b-vkvr3vgw63],
:root:not([data-theme="light"]) .category-navigation[b-vkvr3vgw63] {
    background: rgba(10, 10, 10, 0.95);
    border-bottom-color: #1a1a1a;
}

.category-scroll[b-vkvr3vgw63] {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 600px;
    margin: 0 auto;
}

.category-scroll[b-vkvr3vgw63]::-webkit-scrollbar {
    display: none;
}

.category-pill[b-vkvr3vgw63] {
    position: relative;
    flex-shrink: 0;
    padding: 10px 18px;
    min-height: 44px;
    background: var(--bg-secondary, #f1f5f9);
    border: none;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .category-pill[b-vkvr3vgw63],
:root:not([data-theme="light"]) .category-pill[b-vkvr3vgw63] {
    background: #161616;
    color: #888;
}

.category-pill:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.pill-text[b-vkvr3vgw63] {
    position: relative;
    z-index: 1;
}

.pill-glow[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f58524 0%, #fb923c 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.category-pill:hover[b-vkvr3vgw63] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .category-pill:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .category-pill:hover[b-vkvr3vgw63] {
    background: #1f1f1f;
    color: #ccc;
}

.category-pill.active[b-vkvr3vgw63] {
    color: #fff;
}

.category-pill.active .pill-glow[b-vkvr3vgw63] {
    opacity: 1;
}

.category-pill.active .pill-text[b-vkvr3vgw63] {
    font-weight: 700;
}

/* ===== MENU CONTENT ===== */
.menu-content[b-vkvr3vgw63] {
    position: relative;
    z-index: 1;
    padding: 24px 16px;
    max-width: 600px;
    margin: 0 auto;
}

.menu-category[b-vkvr3vgw63] {
    margin-bottom: 36px;
}

.menu-category:last-child[b-vkvr3vgw63] {
    margin-bottom: 0;
}

.section-header[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.section-accent[b-vkvr3vgw63] {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #f58524, #fb923c);
}

.section-header h2[b-vkvr3vgw63] {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.section-count[b-vkvr3vgw63] {
    padding: 4px 10px;
    background: var(--bg-secondary);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

[data-theme="dark"] .section-count[b-vkvr3vgw63],
:root:not([data-theme="light"]) .section-count[b-vkvr3vgw63] {
    background: #1a1a1a;
}

/* ===== SUBCATEGORY HEADERS ===== */
.subcategory-header[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.subcategory-name[b-vkvr3vgw63] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary, #555);
}

.subcategory-count[b-vkvr3vgw63] {
    padding: 2px 8px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #999);
}

[data-theme="dark"] .subcategory-header[b-vkvr3vgw63],
:root:not([data-theme="light"]) .subcategory-header[b-vkvr3vgw63] {
    border-bottom-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .subcategory-count[b-vkvr3vgw63],
:root:not([data-theme="light"]) .subcategory-count[b-vkvr3vgw63] {
    background: #1a1a1a;
}

::global([dir="rtl"]) .subcategory-header[b-vkvr3vgw63] {
    flex-direction: row-reverse;
}

/* ===== POPULAR SECTION ===== */
.popular-section[b-vkvr3vgw63] {
    margin-bottom: 36px;
}

.popular-grid[b-vkvr3vgw63] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.menu-card.popular[b-vkvr3vgw63] {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.menu-card.popular .card-visual[b-vkvr3vgw63] {
    width: 100%;
    height: 120px;
    border-radius: 0;
}

/* ===== MENU GRID ===== */
.menu-grid[b-vkvr3vgw63] {
    display: grid;
    gap: 14px;
}

.menu-card[b-vkvr3vgw63] {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--bg, #fff);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cardFadeIn-b-vkvr3vgw63 0.5s ease-out backwards;
    animation-delay: calc(var(--index) * 0.05s);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .menu-card[b-vkvr3vgw63],
:root:not([data-theme="light"]) .menu-card[b-vkvr3vgw63] {
    background: #111;
}

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

.menu-card:hover[b-vkvr3vgw63] {
    background: var(--bg-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .menu-card:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .menu-card:hover[b-vkvr3vgw63] {
    background: #161616;
}

.menu-card.adding[b-vkvr3vgw63] {
    transform: scale(0.98);
}

.card-hover-glow[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(245, 133, 36, 0.3);
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
}

.menu-card:hover .card-hover-glow[b-vkvr3vgw63] {
    opacity: 1;
}

.card-visual[b-vkvr3vgw63] {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-secondary, #f5f5f5);
}

[data-theme="dark"] .card-visual[b-vkvr3vgw63],
:root:not([data-theme="light"]) .card-visual[b-vkvr3vgw63] {
    background: #1a1a1a;
}

.card-visual img[b-vkvr3vgw63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    transition: transform 0.5s;
}

.menu-card:hover .card-visual img[b-vkvr3vgw63] {
    transform: scale(1.08);
}

.visual-overlay[b-vkvr3vgw63] {
    display: none;
}

.visual-placeholder[b-vkvr3vgw63] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

[data-theme="dark"] .visual-placeholder[b-vkvr3vgw63],
:root:not([data-theme="light"]) .visual-placeholder[b-vkvr3vgw63] {
    background: #1a1a1a;
    color: #333;
}

.visual-placeholder svg[b-vkvr3vgw63] {
    width: 32px;
    height: 32px;
}

.badge[b-vkvr3vgw63] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge.bestseller[b-vkvr3vgw63] {
    background: linear-gradient(135deg, #f58524, #fb923c);
    color: #fff;
}

.badge.sale[b-vkvr3vgw63] {
    background: #22c55e;
    color: #fff;
}

.sold-out-overlay[b-vkvr3vgw63] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .sold-out-overlay[b-vkvr3vgw63],
:root:not([data-theme="light"]) .sold-out-overlay[b-vkvr3vgw63] {
    background: rgba(8, 8, 8, 0.8);
}

.sold-out-overlay span[b-vkvr3vgw63] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ef4444;
    padding: 4px 8px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 4px;
}

.card-body[b-vkvr3vgw63] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent !important;
    padding: 0 !important;
}

.menu-card.popular .card-body[b-vkvr3vgw63] {
    padding: 12px !important;
    background: transparent !important;
}

.card-title[b-vkvr3vgw63] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.card-desc[b-vkvr3vgw63] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}

.card-footer[b-vkvr3vgw63] {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.price-tag[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-current[b-vkvr3vgw63] {
    font-size: 16px;
    font-weight: 700;
    color: #f58524;
}

.price-original[b-vkvr3vgw63] {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.price-discount[b-vkvr3vgw63] {
    font-size: 16px;
    font-weight: 700;
    color: #22c55e;
}

.add-btn[b-vkvr3vgw63] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #f58524 0%, #fb923c 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 12px rgba(245, 133, 36, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.add-btn svg[b-vkvr3vgw63] {
    width: 18px;
    height: 18px;
}

.add-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.add-btn:hover:not(:disabled)[b-vkvr3vgw63] {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(245, 133, 36, 0.4);
}

.add-btn:active:not(:disabled)[b-vkvr3vgw63] {
    transform: scale(0.92);
}

.add-btn:disabled[b-vkvr3vgw63] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

[data-theme="dark"] .add-btn:disabled[b-vkvr3vgw63],
:root:not([data-theme="light"]) .add-btn:disabled[b-vkvr3vgw63] {
    background: #222;
    color: #444;
}

.add-btn.added[b-vkvr3vgw63] {
    background: #22c55e;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-vkvr3vgw63] {
    text-align: center;
    padding: 60px 24px;
}

.empty-visual[b-vkvr3vgw63] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

[data-theme="dark"] .empty-visual[b-vkvr3vgw63],
:root:not([data-theme="light"]) .empty-visual[b-vkvr3vgw63] {
    background: #111;
    color: #333;
}

.empty-visual svg[b-vkvr3vgw63] {
    width: 36px;
    height: 36px;
}

.empty-state h3[b-vkvr3vgw63] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state p[b-vkvr3vgw63] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ===== SAFE BOTTOM ===== */
.safe-bottom[b-vkvr3vgw63] {
    height: 100px;
    height: calc(100px + env(safe-area-inset-bottom));
}

/* ===== FLOATING CART BAR ===== */
.cart-float[b-vkvr3vgw63] {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 150;
    width: calc(100% - 32px);
    max-width: 400px;
    cursor: pointer;
    animation: cartSlideUp-b-vkvr3vgw63 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cartSlideUp-b-vkvr3vgw63 {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.cart-float-content[b-vkvr3vgw63] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f58524 0%, #e67520 100%);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 133, 36, 0.3);
    z-index: 1;
}

[data-theme="dark"] .cart-float-content[b-vkvr3vgw63],
:root:not([data-theme="light"]) .cart-float-content[b-vkvr3vgw63] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 133, 36, 0.3);
}

.cart-float-glow[b-vkvr3vgw63] {
    position: absolute;
    inset: -2px;
    background: #f58524;
    border-radius: 20px;
    filter: blur(20px);
    opacity: 0.3;
    z-index: 0;
}

.cart-info[b-vkvr3vgw63] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-count[b-vkvr3vgw63] {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cart-total[b-vkvr3vgw63] {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.cart-action[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* ===== BOTTOM SHEETS ===== */
.sheet-backdrop[b-vkvr3vgw63] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    animation: fadeIn-b-vkvr3vgw63 0.25s ease;
}

[data-theme="dark"] .sheet-backdrop[b-vkvr3vgw63],
:root:not([data-theme="light"]) .sheet-backdrop[b-vkvr3vgw63] {
    background: rgba(0, 0, 0, 0.6);
}

@keyframes fadeIn-b-vkvr3vgw63 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.item-sheet[b-vkvr3vgw63], .cart-sheet[b-vkvr3vgw63] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
    background: var(--bg, #fff);
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    animation: sheetSlideUp-b-vkvr3vgw63 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 1px solid var(--border);
}

[data-theme="dark"] .item-sheet[b-vkvr3vgw63],
[data-theme="dark"] .cart-sheet[b-vkvr3vgw63],
:root:not([data-theme="light"]) .cart-sheet[b-vkvr3vgw63] {
    background: #0f0f0f;
    border-top-color: #222;
}

@keyframes sheetSlideUp-b-vkvr3vgw63 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.sheet-handle[b-vkvr3vgw63] {
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 12px auto;
}

[data-theme="dark"] .sheet-handle[b-vkvr3vgw63],
:root:not([data-theme="light"]) .sheet-handle[b-vkvr3vgw63] {
    background: #333;
}

.sheet-image[b-vkvr3vgw63] {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--bg-secondary, #f5f5f5);
}

[data-theme="dark"] .sheet-image[b-vkvr3vgw63],
:root:not([data-theme="light"]) .sheet-image[b-vkvr3vgw63] {
    background: #1a1a1a;
}

.sheet-image img[b-vkvr3vgw63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sheet-image-overlay[b-vkvr3vgw63] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, var(--bg, #fff) 0%, transparent 100%);
}

[data-theme="dark"] .sheet-image-overlay[b-vkvr3vgw63],
:root:not([data-theme="light"]) .sheet-image-overlay[b-vkvr3vgw63] {
    background: linear-gradient(to top, #111 0%, transparent 100%);
}

.sheet-content[b-vkvr3vgw63] {
    padding: 20px 20px calc(32px + env(safe-area-inset-bottom));
}

.sheet-header[b-vkvr3vgw63] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sheet-header h2[b-vkvr3vgw63] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.sheet-badge[b-vkvr3vgw63] {
    flex-shrink: 0;
    padding: 6px 10px;
    background: rgba(245, 133, 36, 0.15);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #f58524;
    text-transform: uppercase;
}

.sheet-desc[b-vkvr3vgw63] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.sheet-price[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.sheet-price .price-was[b-vkvr3vgw63] {
    font-size: 16px;
    color: var(--text-muted);
    text-decoration: line-through;
}

.sheet-price .price-now[b-vkvr3vgw63] {
    font-size: 24px;
    font-weight: 800;
    color: #f58524;
}

.sheet-notes[b-vkvr3vgw63] {
    margin-bottom: 20px;
}

.sheet-notes label[b-vkvr3vgw63] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.sheet-notes textarea[b-vkvr3vgw63] {
    width: 100%;
    padding: 14px;
    background: var(--bg-secondary);
    border: none;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: box-shadow 0.2s;
}

[data-theme="dark"] .sheet-notes textarea[b-vkvr3vgw63],
:root:not([data-theme="light"]) .sheet-notes textarea[b-vkvr3vgw63] {
    background: #161616;
}

.sheet-notes textarea:focus[b-vkvr3vgw63] {
    box-shadow: 0 0 0 2px rgba(245, 133, 36, 0.3);
}

.sheet-notes textarea[b-vkvr3vgw63]::placeholder {
    color: var(--text-muted);
}

.sheet-actions[b-vkvr3vgw63] {
    display: flex;
    gap: 12px;
}

.qty-control[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 4px;
}

[data-theme="dark"] .qty-control[b-vkvr3vgw63],
:root:not([data-theme="light"]) .qty-control[b-vkvr3vgw63] {
    background: #161616;
}

.qty-btn[b-vkvr3vgw63] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.qty-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.qty-btn:hover:not(:disabled)[b-vkvr3vgw63] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .qty-btn:hover:not(:disabled)[b-vkvr3vgw63],
:root:not([data-theme="light"]) .qty-btn:hover:not(:disabled)[b-vkvr3vgw63] {
    background: #222;
    color: #fff;
}

.qty-btn:active:not(:disabled)[b-vkvr3vgw63] {
    transform: scale(0.92);
}

.qty-btn:disabled[b-vkvr3vgw63] {
    opacity: 0.3;
    cursor: not-allowed;
}

.qty-value[b-vkvr3vgw63] {
    width: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.add-to-cart-btn[b-vkvr3vgw63] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 54px;
    background: linear-gradient(135deg, #f58524 0%, #fb923c 100%);
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.add-to-cart-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.add-to-cart-btn:hover:not(:disabled)[b-vkvr3vgw63] {
    box-shadow: 0 6px 24px rgba(245, 133, 36, 0.4);
    transform: translateY(-1px);
}

.add-to-cart-btn:active:not(:disabled)[b-vkvr3vgw63] {
    transform: scale(0.98);
}

.add-to-cart-btn:disabled[b-vkvr3vgw63] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

[data-theme="dark"] .add-to-cart-btn:disabled[b-vkvr3vgw63],
:root:not([data-theme="light"]) .add-to-cart-btn:disabled[b-vkvr3vgw63] {
    background: #222;
    color: #555;
}

.btn-price[b-vkvr3vgw63] {
    font-weight: 800;
}

/* ===== CART SHEET ===== */
.cart-sheet[b-vkvr3vgw63] {
    max-height: 85vh;
}

.cart-sheet-header[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .cart-sheet-header[b-vkvr3vgw63],
:root:not([data-theme="light"]) .cart-sheet-header[b-vkvr3vgw63] {
    border-bottom-color: #1a1a1a;
}

.cart-sheet-header h2[b-vkvr3vgw63] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.clear-cart-btn[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    min-height: 44px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #ef4444;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.clear-cart-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

.clear-cart-btn:hover[b-vkvr3vgw63] {
    background: rgba(239, 68, 68, 0.2);
}

.clear-cart-btn:active[b-vkvr3vgw63] {
    transform: scale(0.95);
}

.cart-sheet-content[b-vkvr3vgw63] {
    padding: 20px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.cart-empty[b-vkvr3vgw63] {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.cart-empty svg[b-vkvr3vgw63] {
    margin-bottom: 16px;
    color: var(--text-muted);
}

[data-theme="dark"] .cart-empty svg[b-vkvr3vgw63],
:root:not([data-theme="light"]) .cart-empty svg[b-vkvr3vgw63] {
    color: #333;
}

.cart-empty p[b-vkvr3vgw63] {
    font-size: 15px;
}

.cart-items[b-vkvr3vgw63] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.cart-item[b-vkvr3vgw63] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

[data-theme="dark"] .cart-item[b-vkvr3vgw63],
:root:not([data-theme="light"]) .cart-item[b-vkvr3vgw63] {
    background: #161616;
}

.cart-item-image[b-vkvr3vgw63] {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-secondary, #f5f5f5);
}

[data-theme="dark"] .cart-item-image[b-vkvr3vgw63],
:root:not([data-theme="light"]) .cart-item-image[b-vkvr3vgw63] {
    background: #1a1a1a;
}

.cart-item-image img[b-vkvr3vgw63] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.cart-item-image .image-placeholder[b-vkvr3vgw63] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

[data-theme="dark"] .cart-item-image .image-placeholder[b-vkvr3vgw63],
:root:not([data-theme="light"]) .cart-item-image .image-placeholder[b-vkvr3vgw63] {
    background: #1a1a1a;
    color: #333;
}

.cart-item-info[b-vkvr3vgw63] {
    flex: 1;
    min-width: 0;
}

.cart-item-info h4[b-vkvr3vgw63] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.cart-item-info .item-modifiers[b-vkvr3vgw63] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 4px;
}

.cart-item-info .modifier-tag[b-vkvr3vgw63] {
    display: inline-flex;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.08);
    padding: 1px 6px;
    border-radius: 8px;
}

.cart-item-info .item-notes[b-vkvr3vgw63] {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.cart-item-info .item-price[b-vkvr3vgw63] {
    font-size: 14px;
    font-weight: 700;
    color: #f58524;
}

.cart-item-qty[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-sm[b-vkvr3vgw63] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .qty-sm[b-vkvr3vgw63],
:root:not([data-theme="light"]) .qty-sm[b-vkvr3vgw63] {
    background: #222;
    color: #aaa;
}

.qty-sm:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.qty-sm:hover[b-vkvr3vgw63] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .qty-sm:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .qty-sm:hover[b-vkvr3vgw63] {
    background: #2a2a2a;
    color: #fff;
}

.qty-sm:active[b-vkvr3vgw63] {
    transform: scale(0.92);
}

.qty-sm.danger[b-vkvr3vgw63] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.qty-sm.danger:hover[b-vkvr3vgw63] {
    background: rgba(239, 68, 68, 0.25);
}

.cart-item-qty span[b-vkvr3vgw63] {
    width: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.order-notes-section[b-vkvr3vgw63] {
    margin-bottom: 20px;
}

.order-notes-section label[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.order-notes-section label svg[b-vkvr3vgw63] {
    color: #f58524;
}

.order-notes-section textarea[b-vkvr3vgw63] {
    width: 100%;
    padding: 14px;
    background: var(--bg-secondary);
    border: none;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: box-shadow 0.2s;
}

[data-theme="dark"] .order-notes-section textarea[b-vkvr3vgw63],
:root:not([data-theme="light"]) .order-notes-section textarea[b-vkvr3vgw63] {
    background: #161616;
}

.order-notes-section textarea:focus[b-vkvr3vgw63] {
    box-shadow: 0 0 0 2px rgba(245, 133, 36, 0.3);
}

.order-notes-section textarea[b-vkvr3vgw63]::placeholder {
    color: var(--text-muted);
}

/* Coupon Section */
.coupon-section[b-vkvr3vgw63] { margin-bottom: 16px; }
.coupon-input-group[b-vkvr3vgw63] { display: flex; gap: 8px; }
.coupon-input[b-vkvr3vgw63] { flex: 1; background: #0d0d0d; border: 1px solid #333; border-radius: 8px; padding: 10px 14px; color: #fff; font-size: 14px; font-family: monospace; letter-spacing: 0.05em; outline: none; transition: border-color 0.2s; }
.coupon-input:focus[b-vkvr3vgw63] { border-color: #f58524; }
.coupon-input[b-vkvr3vgw63]::placeholder { color: #666; text-transform: none; font-family: inherit; letter-spacing: normal; }
.coupon-apply-btn[b-vkvr3vgw63] { background: #f58524; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.coupon-apply-btn:hover:not(:disabled)[b-vkvr3vgw63] { background: #e0741a; }
.coupon-apply-btn:disabled[b-vkvr3vgw63] { opacity: 0.5; cursor: not-allowed; }
.coupon-spinner[b-vkvr3vgw63] { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: coupon-spin-b-vkvr3vgw63 0.6s linear infinite; }
@keyframes coupon-spin-b-vkvr3vgw63 { to { transform: rotate(360deg); } }
.coupon-error[b-vkvr3vgw63] { color: #f87171; font-size: 12px; margin: 6px 0 0; }
.coupon-applied[b-vkvr3vgw63] { display: flex; align-items: center; justify-content: space-between; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.3); border-radius: 8px; padding: 10px 14px; }
.coupon-applied-info[b-vkvr3vgw63] { display: flex; align-items: center; gap: 8px; color: #4ade80; font-size: 14px; font-weight: 600; }
.coupon-applied-info svg[b-vkvr3vgw63] { flex-shrink: 0; }
.coupon-savings[b-vkvr3vgw63] { color: #4ade80; font-weight: 700; }
.coupon-remove[b-vkvr3vgw63] { background: transparent; border: none; color: #888; cursor: pointer; padding: 4px; transition: color 0.2s; }
.coupon-remove:hover[b-vkvr3vgw63] { color: #f87171; }
.discount-row[b-vkvr3vgw63] { color: #4ade80 !important; }
.discount-row .discount-value[b-vkvr3vgw63], .discount-value[b-vkvr3vgw63] { color: #4ade80 !important; font-weight: 600; }

.cart-summary[b-vkvr3vgw63] {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 20px;
}

[data-theme="dark"] .cart-summary[b-vkvr3vgw63],
:root:not([data-theme="light"]) .cart-summary[b-vkvr3vgw63] {
    background: #161616;
}

.summary-row[b-vkvr3vgw63] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.summary-row:last-child[b-vkvr3vgw63] {
    margin-bottom: 0;
}

.summary-row.total[b-vkvr3vgw63] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-row.total span:last-child[b-vkvr3vgw63] {
    color: #f58524;
}

.summary-divider[b-vkvr3vgw63] {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

[data-theme="dark"] .summary-divider[b-vkvr3vgw63],
:root:not([data-theme="light"]) .summary-divider[b-vkvr3vgw63] {
    background: #222;
}

/* ===== PAYMENT SELECTION ===== */
.payment-selection[b-vkvr3vgw63] { margin-bottom: 16px; }
.payment-selection-title[b-vkvr3vgw63] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #666; margin-bottom: 10px; }
[data-theme="dark"] .payment-selection-title[b-vkvr3vgw63], :root:not([data-theme="light"]) .payment-selection-title[b-vkvr3vgw63] { color: #aaa; }
.payment-pills[b-vkvr3vgw63] { display: flex; gap: 10px; }
.payment-pill[b-vkvr3vgw63] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 12px; border: 2px solid #e0e0e0; background: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 13px; font-weight: 500; color: #555; }
[data-theme="dark"] .payment-pill[b-vkvr3vgw63], :root:not([data-theme="light"]) .payment-pill[b-vkvr3vgw63] { border-color: #333; background: #1a1a1a; color: #bbb; }
.payment-pill:hover[b-vkvr3vgw63] { border-color: #ccc; }
[data-theme="dark"] .payment-pill:hover[b-vkvr3vgw63], :root:not([data-theme="light"]) .payment-pill:hover[b-vkvr3vgw63] { border-color: #555; }
.payment-pill.selected[b-vkvr3vgw63] { border-color: var(--primary, #f58524); background: rgba(245, 133, 36, 0.08); color: var(--primary, #f58524); }
[data-theme="dark"] .payment-pill.selected[b-vkvr3vgw63], :root:not([data-theme="light"]) .payment-pill.selected[b-vkvr3vgw63] { background: rgba(245, 133, 36, 0.12); }
.payment-pill svg[b-vkvr3vgw63] { opacity: 0.6; }
.payment-pill.selected svg[b-vkvr3vgw63] { opacity: 1; stroke: var(--primary, #f58524); }

/* Customer info section for pickup */
.customer-info-section[b-vkvr3vgw63] { margin-bottom: 16px; }
.customer-info-title[b-vkvr3vgw63] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #666; margin-bottom: 10px; }
[data-theme="dark"] .customer-info-title[b-vkvr3vgw63], :root:not([data-theme="light"]) .customer-info-title[b-vkvr3vgw63] { color: #aaa; }
.customer-info-fields[b-vkvr3vgw63] { display: flex; flex-direction: column; gap: 10px; }
.customer-input[b-vkvr3vgw63] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 2px solid #e0e0e0; background: #fff; font-size: 14px; color: #333; outline: none; transition: border-color 0.2s; }
[data-theme="dark"] .customer-input[b-vkvr3vgw63], :root:not([data-theme="light"]) .customer-input[b-vkvr3vgw63] { border-color: #333; background: #1a1a1a; color: #ddd; }
.customer-input:focus[b-vkvr3vgw63] { border-color: var(--primary, #f58524); }
.customer-input.input-error[b-vkvr3vgw63] { border-color: #ef4444; }
.validation-error[b-vkvr3vgw63] { font-size: 12px; color: #ef4444; padding-left: 4px; }

.place-order-btn[b-vkvr3vgw63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 24px;
    height: 56px;
    background: linear-gradient(135deg, #f58524 0%, #fb923c 100%);
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 6px 24px rgba(245, 133, 36, 0.35);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.place-order-btn:focus-visible[b-vkvr3vgw63] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.place-order-btn:hover:not(:disabled)[b-vkvr3vgw63] {
    box-shadow: 0 8px 32px rgba(245, 133, 36, 0.45);
    transform: translateY(-2px);
}

.place-order-btn:active:not(:disabled)[b-vkvr3vgw63] {
    transform: scale(0.98);
}

.place-order-btn:disabled[b-vkvr3vgw63] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.place-order-btn.loading[b-vkvr3vgw63] {
    justify-content: center;
    gap: 12px;
}

.place-order-btn .spinner[b-vkvr3vgw63] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(8, 8, 8, 0.2);
    border-top-color: #080808;
    border-radius: 50%;
    animation: spin-b-vkvr3vgw63 0.8s linear infinite;
}

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

.btn-total[b-vkvr3vgw63] {
    font-weight: 800;
}

/* ===== RTL SUPPORT ===== */
:global([dir="rtl"]) .picker-option[b-vkvr3vgw63] {
    text-align: end;
}

:global([dir="rtl"]) .option-radio[b-vkvr3vgw63] {
    order: 2;
}

:global([dir="rtl"]) .option-info[b-vkvr3vgw63] {
    order: 1;
}

:global([dir="rtl"]) .section-accent[b-vkvr3vgw63] {
    order: 2;
}

:global([dir="rtl"]) .section-header h2[b-vkvr3vgw63] {
    order: 1;
    text-align: end;
}

/* ===== RESPONSIVE - MOBILE (Small Screens) ===== */
@media (max-width: 480px) {
    .header-brand-row[b-vkvr3vgw63] {
        padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0;
    }

    .header-content[b-vkvr3vgw63] {
        padding: 6px 12px 10px;
    }

    .brand-logo-img[b-vkvr3vgw63] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .brand-name[b-vkvr3vgw63] {
        font-size: 1rem;
    }

    .my-orders-btn[b-vkvr3vgw63] {
        width: 32px;
        height: 32px;
    }

    .my-orders-btn svg[b-vkvr3vgw63] {
        width: 16px;
        height: 16px;
    }

    .header-title[b-vkvr3vgw63] {
        font-size: 16px;
    }

    .badge-text[b-vkvr3vgw63] {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .header-brand-row[b-vkvr3vgw63] {
        padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 0;
    }

    .header-content[b-vkvr3vgw63] {
        padding: 4px 8px 8px;
    }

    .header-title[b-vkvr3vgw63] {
        font-size: 14px;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-badge[b-vkvr3vgw63] {
        padding: 4px 8px;
        gap: 4px;
    }

    .badge-dot[b-vkvr3vgw63] {
        width: 5px;
        height: 5px;
    }

    .badge-text[b-vkvr3vgw63] {
        font-size: 10px;
    }

    .header-loc-text[b-vkvr3vgw63] {
        max-width: 160px;
        font-size: 10px;
    }

    .header-loc-icon[b-vkvr3vgw63] {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 320px) {
    .header-loc-text[b-vkvr3vgw63] {
        max-width: 130px;
    }

    .header-title[b-vkvr3vgw63] {
        font-size: 13px;
        max-width: 200px;
    }

    .header-badge[b-vkvr3vgw63] {
        padding: 3px 6px;
    }

    .badge-text[b-vkvr3vgw63] {
        font-size: 9px;
    }
}

/* ===== RESPONSIVE - TABLET ===== */
@media (min-width: 640px) {
    .menu-content[b-vkvr3vgw63] {
        padding: 32px 24px;
    }

    .menu-grid[b-vkvr3vgw63] {
        grid-template-columns: repeat(2, 1fr);
    }

    .popular-grid[b-vkvr3vgw63] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== DESKTOP: Content-First Layout ===== */
@media (min-width: 1024px) {
    /* Show hero on desktop with adapted layout */
    .restaurant-hero[b-vkvr3vgw63] {
        display: block;
    }

    .hero-banner[b-vkvr3vgw63] {
        height: 260px;
    }

    .hero-content[b-vkvr3vgw63] {
        flex-direction: row;
        align-items: center;
        text-align: left;
        max-width: 1200px;
        margin: -50px auto 0;
        padding: 0 48px;
        gap: 24px;
    }

    [dir="rtl"] .hero-content[b-vkvr3vgw63] {
        text-align: right;
    }

    .hero-logo-frame[b-vkvr3vgw63] {
        width: 110px;
        height: 110px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .hero-name[b-vkvr3vgw63] {
        font-size: 28px;
    }

    /* Full-width dark background */
    .menu-page[b-vkvr3vgw63] {
        max-width: 100%;
        padding: 0;
    }

    .menu-atmosphere[b-vkvr3vgw63] {
        display: none;
    }

    /* ===== HEADER: Integrated Restaurant Info ===== */
    .menu-header[b-vkvr3vgw63] {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--bg-page);
        border-bottom: 1px solid var(--border);
    }

    [data-theme="dark"] .menu-header[b-vkvr3vgw63],
:root:not([data-theme="light"]) .menu-header[b-vkvr3vgw63] {
        background: #0a0a0a;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .header-brand-row[b-vkvr3vgw63] {
        max-width: 100%;
        padding: 12px 48px 0;
    }

    .header-glass[b-vkvr3vgw63] {
        display: none;
    }

    .header-content[b-vkvr3vgw63] {
        max-width: 100%;
        padding: 8px 48px 12px;
    }

    .header-nav-btn[b-vkvr3vgw63] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
    }

    [data-theme="dark"] .header-nav-btn[b-vkvr3vgw63],
:root:not([data-theme="light"]) .header-nav-btn[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .header-nav-btn:hover[b-vkvr3vgw63] {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    [data-theme="dark"] .header-nav-btn:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .header-nav-btn:hover[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .header-identity[b-vkvr3vgw63] {
        display: flex;
        align-items: center;
        gap: 16px;
        justify-content: center;
    }

    .header-title[b-vkvr3vgw63] {
        font-size: 22px;
        font-weight: 700;
    }

    .header-badge[b-vkvr3vgw63] {
        margin-top: 0;
        padding: 6px 14px;
    }

    /* ===== BRANCH SELECTOR: Desktop Overrides ===== */
    .branch-picker-section[b-vkvr3vgw63] {
        padding: 12px 48px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
    }

    [data-theme="dark"] .branch-picker-section[b-vkvr3vgw63],
:root:not([data-theme="light"]) .branch-picker-section[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.02);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .branch-dropdown[b-vkvr3vgw63] {
        display: inline-block;
    }

    .dropdown-trigger[b-vkvr3vgw63] {
        width: auto;
        min-width: 200px;
        border-radius: 10px;
    }

    .dropdown-trigger:hover[b-vkvr3vgw63] {
        background: var(--bg-secondary);
        border-color: var(--primary);
    }

    [data-theme="dark"] .dropdown-trigger:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .dropdown-trigger:hover[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .branch-dropdown.open .dropdown-trigger[b-vkvr3vgw63] {
        background: var(--bg-secondary);
    }

    [data-theme="dark"] .branch-dropdown.open .dropdown-trigger[b-vkvr3vgw63],
:root:not([data-theme="light"]) .branch-dropdown.open .dropdown-trigger[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.1);
    }

    .dropdown-menu[b-vkvr3vgw63] {
        left: 0;
        right: auto;
        min-width: 280px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    }

    [data-theme="dark"] .dropdown-menu[b-vkvr3vgw63],
:root:not([data-theme="light"]) .dropdown-menu[b-vkvr3vgw63] {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    }

    .dropdown-item[b-vkvr3vgw63] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
    }

    .dropdown-item .item-name[b-vkvr3vgw63] {
        flex: 1;
    }

    .dropdown-item .check-icon[b-vkvr3vgw63] {
        position: static;
        transform: none;
        width: 18px;
        height: 18px;
    }

    .dropdown-item:not(:last-child)[b-vkvr3vgw63] {
        border-bottom: 1px solid var(--border-light);
    }

    .branch-maps-link:hover[b-vkvr3vgw63] {
        background: rgba(245, 133, 36, 0.2);
        color: #ea7317;
    }

    .hero-map-btn:hover[b-vkvr3vgw63] {
        background: rgba(245, 133, 36, 0.2);
        color: #ea7317;
    }

    .header-map-link:hover[b-vkvr3vgw63] {
        background: rgba(245, 133, 36, 0.2);
        color: #ea7317;
    }

    .hero-branch-phone:hover[b-vkvr3vgw63] {
        color: #f58524;
    }

    /* Hide mobile branch picker on desktop */
    .branch-picker[b-vkvr3vgw63],
    .single-location[b-vkvr3vgw63] {
        display: none;
    }

    .search-section[b-vkvr3vgw63] {
        max-width: 100%;
        padding: 14px 48px;
        margin: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 24px;
    }

    [data-theme="dark"] .search-section[b-vkvr3vgw63],
:root:not([data-theme="light"]) .search-section[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.02);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .search-section[b-vkvr3vgw63]::before {
        content: none;
    }

    .search-field[b-vkvr3vgw63] {
        max-width: 360px;
        padding: 12px 18px;
        border-radius: 10px;
        background: var(--bg, #fff);
        border: 1px solid var(--border);
        font-size: 14px;
    }

    [data-theme="dark"] .search-field[b-vkvr3vgw63],
:root:not([data-theme="light"]) .search-field[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .search-field:focus-within[b-vkvr3vgw63] {
        border-color: #f58524;
    }

    /* ===== CATEGORIES: Sticky Horizontal Nav ===== */
    .category-navigation[b-vkvr3vgw63] {
        position: sticky;
        top: 77px;
        z-index: 50;
        background: var(--bg-page);
        padding: 16px 0;
        margin: 0;
        max-width: 100%;
        border-bottom: 1px solid var(--border);
    }

    [data-theme="dark"] .category-navigation[b-vkvr3vgw63],
:root:not([data-theme="light"]) .category-navigation[b-vkvr3vgw63] {
        background: #0a0a0a;
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .category-scroll[b-vkvr3vgw63] {
        padding: 0 48px;
        gap: 10px;
        max-width: 100%;
    }

    .category-pill[b-vkvr3vgw63] {
        padding: 10px 24px;
        font-size: 14px;
        border-radius: 8px;
        white-space: nowrap;
    }

    .category-pill.active[b-vkvr3vgw63] {
        background: #f58524;
        transform: none;
        box-shadow: none;
    }

    /* ===== MENU CONTENT: Full Width Grid ===== */
    .menu-content[b-vkvr3vgw63] {
        max-width: 100%;
        padding: 32px 48px 120px;
        margin: 0;
    }

    .popular-section[b-vkvr3vgw63],
    .menu-category[b-vkvr3vgw63] {
        margin-bottom: 48px;
    }

    .section-header[b-vkvr3vgw63] {
        margin-bottom: 24px;
    }

    .section-header h2[b-vkvr3vgw63] {
        font-size: 24px;
    }

    /* 4 Column Grid */
    .menu-grid[b-vkvr3vgw63],
    .popular-grid[b-vkvr3vgw63] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    /* Cards - Vertical layout on desktop */
    .menu-card[b-vkvr3vgw63] {
        display: flex;
        flex-direction: column;
        padding: 0;
        border-radius: 16px;
        background: var(--bg, #fff);
        border: 1px solid var(--border-light);
        transition: all 0.2s ease;
        min-width: 0;
        overflow: hidden;
    }

    [data-theme="dark"] .menu-card[b-vkvr3vgw63],
:root:not([data-theme="light"]) .menu-card[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .menu-card:hover[b-vkvr3vgw63] {
        transform: translateY(-4px);
        background: var(--bg-secondary);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .menu-card:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .menu-card:hover[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    }

    .card-visual[b-vkvr3vgw63] {
        width: 100%;
        height: 180px;
        min-height: 180px;
        flex-shrink: 0;
        border-radius: 16px 16px 0 0;
    }

    .card-visual img[b-vkvr3vgw63] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .visual-placeholder[b-vkvr3vgw63] {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-secondary);
    }

    [data-theme="dark"] .visual-placeholder[b-vkvr3vgw63],
:root:not([data-theme="light"]) .visual-placeholder[b-vkvr3vgw63] {
        background: rgba(255, 255, 255, 0.05);
    }

    .visual-placeholder svg[b-vkvr3vgw63] {
        width: 48px;
        height: 48px;
        opacity: 0.3;
    }

    .card-body[b-vkvr3vgw63] {
        padding: 16px;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 120px;
    }

    .card-title[b-vkvr3vgw63] {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .card-desc[b-vkvr3vgw63] {
        font-size: 13px;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-footer[b-vkvr3vgw63] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 12px;
    }

    .price-current[b-vkvr3vgw63],
    .price-discount[b-vkvr3vgw63] {
        font-size: 18px;
    }

    .add-btn[b-vkvr3vgw63] {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    /* Cart Float */
    .cart-float[b-vkvr3vgw63] {
        position: fixed;
        bottom: 32px;
        right: 48px;
        left: auto;
        width: auto;
        min-width: 300px;
        border-radius: 16px;
        transform: none;
    }

    .cart-float-content[b-vkvr3vgw63] {
        padding: 16px 24px;
    }

    .cart-float-glow[b-vkvr3vgw63] {
        display: none;
    }

    /* Modals */
    .sheet-backdrop[b-vkvr3vgw63] {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
    }

    [data-theme="dark"] .sheet-backdrop[b-vkvr3vgw63],
:root:not([data-theme="light"]) .sheet-backdrop[b-vkvr3vgw63] {
        background: rgba(0, 0, 0, 0.7);
    }

    .item-sheet[b-vkvr3vgw63],
    .cart-sheet[b-vkvr3vgw63] {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 500px;
        max-height: 85vh;
        border-radius: 20px;
        animation: modalIn-b-vkvr3vgw63 0.25s ease-out;
    }

    @keyframes modalIn-b-vkvr3vgw63 {
        from { opacity: 0; transform: translate(-50%, -48%); }
        to { opacity: 1; transform: translate(-50%, -50%); }
    }

    .sheet-handle[b-vkvr3vgw63] {
        display: none;
    }

    .sheet-image[b-vkvr3vgw63] {
        height: 240px;
    }

    .sheet-content[b-vkvr3vgw63] {
        padding: 24px;
    }

    .sheet-header h2[b-vkvr3vgw63] {
        font-size: 24px;
    }

    .add-to-cart-btn[b-vkvr3vgw63],
    .place-order-btn[b-vkvr3vgw63] {
        height: 52px;
        font-size: 15px;
        border-radius: 12px;
    }

    .toast-popup[b-vkvr3vgw63] {
        top: 96px;
    }

    .safe-bottom[b-vkvr3vgw63] {
        height: 80px;
    }
}

/* ===== LARGE DESKTOP: 5 Columns ===== */
@media (min-width: 1400px) {
    .header-brand-row[b-vkvr3vgw63],
    .header-content[b-vkvr3vgw63],
    .search-section[b-vkvr3vgw63],
    .branch-picker[b-vkvr3vgw63],
    .single-location[b-vkvr3vgw63],
    .menu-content[b-vkvr3vgw63] {
        padding-left: 64px;
        padding-right: 64px;
    }

    .category-scroll[b-vkvr3vgw63] {
        padding: 0 64px;
    }

    .menu-grid[b-vkvr3vgw63],
    .popular-grid[b-vkvr3vgw63] {
        grid-template-columns: repeat(5, 1fr);
        gap: 28px;
    }

    .card-visual[b-vkvr3vgw63] {
        height: 200px;
    }

    .section-header h2[b-vkvr3vgw63] {
        font-size: 28px;
    }
}

/* ===== ULTRA WIDE: 6 Columns ===== */
@media (min-width: 1800px) {
    .header-brand-row[b-vkvr3vgw63],
    .header-content[b-vkvr3vgw63],
    .search-section[b-vkvr3vgw63],
    .branch-picker[b-vkvr3vgw63],
    .single-location[b-vkvr3vgw63],
    .menu-content[b-vkvr3vgw63] {
        padding-left: 80px;
        padding-right: 80px;
    }

    .category-scroll[b-vkvr3vgw63] {
        padding: 0 80px;
    }

    .menu-grid[b-vkvr3vgw63],
    .popular-grid[b-vkvr3vgw63] {
        grid-template-columns: repeat(6, 1fr);
    }

    .card-visual[b-vkvr3vgw63] {
        height: 220px;
    }

    .sheet-content[b-vkvr3vgw63] {
        padding: 28px;
    }

    .sheet-header h2[b-vkvr3vgw63] {
        font-size: 28px;
    }

    .sheet-desc[b-vkvr3vgw63] {
        font-size: 16px;
        line-height: 1.6;
    }

    .sheet-price .price-now[b-vkvr3vgw63] {
        font-size: 32px;
    }

    .sheet-price .price-was[b-vkvr3vgw63] {
        font-size: 18px;
    }

    .sheet-notes label[b-vkvr3vgw63] {
        font-size: 14px;
    }

    .sheet-notes textarea[b-vkvr3vgw63] {
        font-size: 15px;
        padding: 14px 16px;
    }

    .qty-control[b-vkvr3vgw63] {
        gap: 16px;
    }

    .qty-btn[b-vkvr3vgw63] {
        width: 48px;
        height: 48px;
    }

    .qty-value[b-vkvr3vgw63] {
        font-size: 20px;
        min-width: 48px;
    }

    .add-to-cart-btn[b-vkvr3vgw63] {
        height: 60px;
        font-size: 17px;
        border-radius: 16px;
    }

    /* Cart Sheet */
    .cart-sheet-header[b-vkvr3vgw63] {
        padding: 24px 28px;
    }

    .cart-sheet-header h2[b-vkvr3vgw63] {
        font-size: 24px;
    }

    .cart-sheet-content[b-vkvr3vgw63] {
        padding: 0 28px 28px;
    }

    .cart-item[b-vkvr3vgw63] {
        padding: 16px;
        border-radius: 14px;
    }

    .cart-item-image[b-vkvr3vgw63] {
        width: 72px;
        height: 72px;
        border-radius: 12px;
    }

    .cart-item-info h4[b-vkvr3vgw63] {
        font-size: 16px;
    }

    .item-price[b-vkvr3vgw63] {
        font-size: 16px;
    }

    .summary-row[b-vkvr3vgw63] {
        font-size: 15px;
    }

    .summary-row.total[b-vkvr3vgw63] {
        font-size: 18px;
    }

    .place-order-btn[b-vkvr3vgw63] {
        height: 60px;
        font-size: 17px;
        border-radius: 16px;
    }

    /* Toast */
    .toast-popup[b-vkvr3vgw63] {
        top: 100px;
        padding: 16px 28px;
        font-size: 15px;
        border-radius: 14px;
    }

    /* Empty state */
    .empty-state[b-vkvr3vgw63] {
        padding: 80px 40px;
    }

    .empty-visual svg[b-vkvr3vgw63] {
        width: 80px;
        height: 80px;
    }

    .empty-state h3[b-vkvr3vgw63] {
        font-size: 24px;
    }

    .empty-state p[b-vkvr3vgw63] {
        font-size: 16px;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    *[b-vkvr3vgw63],
    *[b-vkvr3vgw63]::before,
    *[b-vkvr3vgw63]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .menu-card[b-vkvr3vgw63],
    .toast-popup[b-vkvr3vgw63],
    .cart-float[b-vkvr3vgw63],
    .item-sheet[b-vkvr3vgw63],
    .cart-sheet[b-vkvr3vgw63],
    .sheet-backdrop[b-vkvr3vgw63] {
        animation: none !important;
    }

    .atmos-pulse[b-vkvr3vgw63],
    .atmos-ring[b-vkvr3vgw63],
    .badge-dot[b-vkvr3vgw63],
    .spinner[b-vkvr3vgw63],
    .place-order-btn .spinner[b-vkvr3vgw63] {
        animation: none !important;
    }
}

/* ===== OPTION GROUPS IN ITEM SHEET ===== */
.sheet-options[b-vkvr3vgw63] { display: flex; flex-direction: column; gap: 20px; margin: 16px 0 8px; }

.option-group-section[b-vkvr3vgw63] { display: flex; flex-direction: column; gap: 8px; }
.option-group-section.unsatisfied .group-name[b-vkvr3vgw63] { color: #f97316; }

.option-group-label[b-vkvr3vgw63] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.group-name[b-vkvr3vgw63] { font-size: 15px; font-weight: 600; color: var(--text-primary, #0f172a); }
.group-rule[b-vkvr3vgw63] { font-size: 12px; color: var(--text-muted, #94a3b8); }
.group-rule.required[b-vkvr3vgw63] { color: #f97316; font-weight: 500; }
.group-desc[b-vkvr3vgw63] { font-size: 12px; color: var(--text-muted, #94a3b8); margin: 0; }

.option-choices[b-vkvr3vgw63] { display: flex; flex-direction: column; gap: 4px; }

.option-choice[b-vkvr3vgw63] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--bg-secondary, #f1f5f9); border: 1px solid var(--border-light, #e2e8f0);
    color: var(--text-primary, #0f172a); font-size: 14px;
    cursor: pointer; transition: all 0.15s; text-align: start; width: 100%;
}
.option-choice:hover[b-vkvr3vgw63] { background: var(--bg-tertiary, #e2e8f0); }
.option-choice.selected[b-vkvr3vgw63] { background: rgba(245,133,36,0.1); border-color: rgba(245,133,36,0.4); }
.option-choice.disabled[b-vkvr3vgw63] { opacity: 0.35; cursor: not-allowed; }

.choice-indicator[b-vkvr3vgw63] { flex-shrink: 0; display: flex; align-items: center; }

.choice-indicator .radio[b-vkvr3vgw63] {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border, #cbd5e1); transition: all 0.15s;
}
.choice-indicator .radio.checked[b-vkvr3vgw63] { border-color: #f58524; border-width: 6px; }

.choice-indicator .checkbox[b-vkvr3vgw63] {
    width: 20px; height: 20px; border-radius: 5px;
    border: 2px solid var(--border, #cbd5e1); transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.choice-indicator .checkbox.checked[b-vkvr3vgw63] { background: #f58524; border-color: #f58524; }
.choice-indicator .checkbox.checked svg[b-vkvr3vgw63] { color: #fff; }

.choice-name[b-vkvr3vgw63] { flex: 1; min-width: 0; }
.choice-price[b-vkvr3vgw63] { font-size: 13px; color: #f58524; font-weight: 500; white-space: nowrap; }

/* Solo add-on toggle (single-option groups rendered as standalone checkbox) */
.solo-addon[b-vkvr3vgw63] { border-radius: 12px; }
.solo-addon .choice-name[b-vkvr3vgw63] { font-weight: 500; }

.choice-qty[b-vkvr3vgw63] {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; flex-shrink: 0;
}
.choice-qty-btn[b-vkvr3vgw63] {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--bg-tertiary, #e2e8f0); border: 1px solid var(--border-light, #e2e8f0);
    color: var(--text-primary, #0f172a); font-size: 14px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.choice-qty-btn:hover[b-vkvr3vgw63] { background: var(--bg-secondary, #f1f5f9); }
.choice-qty-btn:disabled[b-vkvr3vgw63] { opacity: 0.3; cursor: not-allowed; }
.choice-qty span[b-vkvr3vgw63] { font-size: 13px; font-weight: 600; min-width: 16px; text-align: center; color: var(--text-primary, #0f172a); }

/* Dark mode overrides for option groups */
[data-theme="dark"] .group-name[b-vkvr3vgw63],
:root:not([data-theme="light"]) .group-name[b-vkvr3vgw63] { color: #fff; }
[data-theme="dark"] .group-rule[b-vkvr3vgw63],
:root:not([data-theme="light"]) .group-rule[b-vkvr3vgw63] { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .group-desc[b-vkvr3vgw63],
:root:not([data-theme="light"]) .group-desc[b-vkvr3vgw63] { color: rgba(255,255,255,0.4); }
[data-theme="dark"] .option-choice[b-vkvr3vgw63],
:root:not([data-theme="light"]) .option-choice[b-vkvr3vgw63] { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
[data-theme="dark"] .option-choice:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .option-choice:hover[b-vkvr3vgw63] { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .choice-indicator .radio[b-vkvr3vgw63],
:root:not([data-theme="light"]) .choice-indicator .radio[b-vkvr3vgw63] { border-color: rgba(255,255,255,0.3); }
[data-theme="dark"] .choice-indicator .checkbox[b-vkvr3vgw63],
:root:not([data-theme="light"]) .choice-indicator .checkbox[b-vkvr3vgw63] { border-color: rgba(255,255,255,0.3); }
[data-theme="dark"] .choice-qty-btn[b-vkvr3vgw63],
:root:not([data-theme="light"]) .choice-qty-btn[b-vkvr3vgw63] { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: #fff; }
[data-theme="dark"] .choice-qty-btn:hover[b-vkvr3vgw63],
:root:not([data-theme="light"]) .choice-qty-btn:hover[b-vkvr3vgw63] { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .choice-qty span[b-vkvr3vgw63],
:root:not([data-theme="light"]) .choice-qty span[b-vkvr3vgw63] { color: #fff; }

/* RTL support for option groups */
[dir="rtl"] .choice-qty[b-vkvr3vgw63] { margin-left: 0; margin-right: auto; }
/* _content/QrBiteHub.Web/Components/Pages/Customer/TableRedirect.razor.rz.scp.css */
    .redirect-container[b-o79d1s42dz] {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg, #f5f5f5);
        padding: 24px;
    }

    .loading-spinner[b-o79d1s42dz] {
        text-align: center;
    }

    .spinner[b-o79d1s42dz] {
        width: 50px;
        height: 50px;
        animation: rotate-b-o79d1s42dz 2s linear infinite;
    }

    .spinner .path[b-o79d1s42dz] {
        stroke: var(--accent, #f58524);
        stroke-linecap: round;
        animation: dash-b-o79d1s42dz 1.5s ease-in-out infinite;
    }

    @keyframes rotate-b-o79d1s42dz {
        100% { transform: rotate(360deg); }
    }

    @keyframes dash-b-o79d1s42dz {
        0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
        50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
        100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
    }

    .loading-spinner p[b-o79d1s42dz] {
        margin-top: 16px;
        color: var(--text-secondary, #666);
        font-size: 14px;
    }

    .error-state[b-o79d1s42dz] {
        text-align: center;
        color: var(--text-primary, #333);
    }

    .error-state svg[b-o79d1s42dz] {
        color: var(--danger, #dc3545);
        margin-bottom: 16px;
    }

    .error-state h2[b-o79d1s42dz] {
        margin: 0 0 8px;
        font-size: 24px;
    }

    .error-state p[b-o79d1s42dz] {
        color: var(--text-secondary, #666);
        margin: 0 0 24px;
    }

    .error-state .btn[b-o79d1s42dz] {
        display: inline-block;
        padding: 12px 24px;
        background: var(--accent, #f58524);
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
    }
/* _content/QrBiteHub.Web/Components/Pages/Customer/Terms.razor.rz.scp.css */
/* ============================================
   TERMS PAGE - Premium Redesign
   Aesthetic: Clean & Professional
   ============================================ */

/* Page Container */
.terms-page[b-mj60cbgo48] {
    min-height: 100dvh;
    background: var(--bg-page, #fafafa);
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

[data-theme="dark"] .terms-page[b-mj60cbgo48],
:root:not([data-theme="light"]) .terms-page[b-mj60cbgo48] {
    background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
}

/* ============================================
   HEADER - Floating Glass Design
   ============================================ */

.terms-header[b-mj60cbgo48] {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    background: var(--bg-glass, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-glass, rgba(0, 0, 0, 0.06));
    display: flex;
    align-items: center;
    gap: 16px;
}

[data-theme="dark"] .terms-header[b-mj60cbgo48] {
    background: rgba(10, 10, 10, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.terms-header h1[b-mj60cbgo48] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin: 0;
}

.back-btn[b-mj60cbgo48] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.back-btn:hover[b-mj60cbgo48] {
    background: var(--bg-tertiary);
    transform: translateX(-2px);
}

[dir="rtl"] .back-btn:hover[b-mj60cbgo48] {
    transform: translateX(2px);
}

.back-btn:focus-visible[b-mj60cbgo48] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

.back-btn:active[b-mj60cbgo48] {
    transform: scale(0.92);
}

/* ============================================
   CONTENT
   ============================================ */

.terms-content[b-mj60cbgo48] {
    padding: 24px 16px 40px;
    max-width: 700px;
    margin: 0 auto;
    animation: fadeIn-b-mj60cbgo48 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.last-updated[b-mj60cbgo48] {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 8px 14px;
    border-radius: 20px;
    margin-bottom: 28px;
}

[data-theme="dark"] .last-updated[b-mj60cbgo48] {
    background: rgba(255, 255, 255, 0.06);
}

/* ============================================
   TERMS SECTIONS
   ============================================ */

.terms-section[b-mj60cbgo48] {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg, #fff);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    animation: fadeInUp-b-mj60cbgo48 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

[data-theme="dark"] .terms-section[b-mj60cbgo48] {
    background: var(--bg-secondary, #141414);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.terms-section:nth-child(2)[b-mj60cbgo48] { animation-delay: 0.05s; }
.terms-section:nth-child(3)[b-mj60cbgo48] { animation-delay: 0.1s; }
.terms-section:nth-child(4)[b-mj60cbgo48] { animation-delay: 0.15s; }
.terms-section:nth-child(5)[b-mj60cbgo48] { animation-delay: 0.2s; }
.terms-section:nth-child(6)[b-mj60cbgo48] { animation-delay: 0.25s; }
.terms-section:nth-child(7)[b-mj60cbgo48] { animation-delay: 0.3s; }
.terms-section:nth-child(8)[b-mj60cbgo48] { animation-delay: 0.35s; }
.terms-section:nth-child(9)[b-mj60cbgo48] { animation-delay: 0.4s; }
.terms-section:nth-child(10)[b-mj60cbgo48] { animation-delay: 0.45s; }
.terms-section:nth-child(11)[b-mj60cbgo48] { animation-delay: 0.5s; }
.terms-section:nth-child(12)[b-mj60cbgo48] { animation-delay: 0.55s; }

.terms-section h2[b-mj60cbgo48] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary, #f58524);
    display: inline-block;
}

.terms-section p[b-mj60cbgo48] {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

.terms-section p:last-child[b-mj60cbgo48] {
    margin-bottom: 0;
}

.terms-section ul[b-mj60cbgo48] {
    margin: 0 0 16px 0;
    padding: 0;
    list-style: none;
}

.terms-section ul:last-child[b-mj60cbgo48] {
    margin-bottom: 0;
}

.terms-section li[b-mj60cbgo48] {
    position: relative;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding-left: 24px;
    margin-bottom: 10px;
}

.terms-section li:last-child[b-mj60cbgo48] {
    margin-bottom: 0;
}

.terms-section li[b-mj60cbgo48]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    background: var(--primary, #f58524);
    border-radius: 50%;
    opacity: 0.7;
}

/* Links */
.terms-section a[b-mj60cbgo48] {
    color: var(--primary, #f58524);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.terms-section a:hover[b-mj60cbgo48] {
    opacity: 0.8;
    text-decoration: underline;
}

.terms-section a:focus-visible[b-mj60cbgo48] {
    outline: 2px solid var(--primary, #f58524);
    outline-offset: 2px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn-b-mj60cbgo48 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp-b-mj60cbgo48 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE - Tablet+
   ============================================ */

@media (min-width: 768px) {
    .terms-content[b-mj60cbgo48] {
        padding: 32px 24px 48px;
    }

    .terms-section[b-mj60cbgo48] {
        padding: 28px;
        border-radius: 24px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .terms-content[b-mj60cbgo48],
    .terms-section[b-mj60cbgo48] {
        animation: none !important;
        transition: opacity 0.2s !important;
    }

    .back-btn:hover[b-mj60cbgo48] {
        transform: none !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

[dir="rtl"] .terms-header[b-mj60cbgo48] {
    flex-direction: row-reverse;
}

[dir="rtl"] .terms-header h1[b-mj60cbgo48] {
    text-align: right;
}

[dir="rtl"] .terms-section li[b-mj60cbgo48] {
    padding-left: 0;
    padding-right: 24px;
}

[dir="rtl"] .terms-section li[b-mj60cbgo48]::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .last-updated[b-mj60cbgo48] {
    direction: rtl;
}
/* _content/QrBiteHub.Web/Components/Pages/Customer/Welcome.razor.rz.scp.css */
    /* ============================================
       LOADING STATE
       ============================================ */
    .w-loading[b-z41c7en9v6] {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
    }

    .w-loading-content[b-z41c7en9v6] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .w-loading-logo[b-z41c7en9v6] {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
        background-size: 200% 100%;
        animation: w-shimmer-b-z41c7en9v6 1.5s infinite;
    }

    .w-loading-lines[b-z41c7en9v6] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .w-loading-line[b-z41c7en9v6] {
        height: 12px;
        border-radius: 6px;
        background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
        background-size: 200% 100%;
        animation: w-shimmer-b-z41c7en9v6 1.5s infinite;
    }

    .w-line-lg[b-z41c7en9v6] { width: 160px; }
    .w-line-sm[b-z41c7en9v6] { width: 100px; animation-delay: 0.15s; }

    .w-loading-dots[b-z41c7en9v6] {
        display: flex;
        gap: 6px;
    }

    .w-loading-dots span[b-z41c7en9v6] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #f58524;
        animation: w-bounce-b-z41c7en9v6 1s ease-in-out infinite;
    }

    .w-loading-dots span:nth-child(2)[b-z41c7en9v6] { animation-delay: 0.15s; }
    .w-loading-dots span:nth-child(3)[b-z41c7en9v6] { animation-delay: 0.3s; }

    @keyframes w-shimmer-b-z41c7en9v6 {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    @keyframes w-bounce-b-z41c7en9v6 {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
    }

    /* ============================================
       ERROR STATE
       ============================================ */
    .w-error[b-z41c7en9v6] {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        text-align: center;
        background: #fff;
    }

    .w-error-icon[b-z41c7en9v6] {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #fef2f2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ef4444;
        margin-bottom: 20px;
    }

    .w-error-title[b-z41c7en9v6] {
        font-size: 20px;
        font-weight: 600;
        color: #0f172a;
        margin: 0 0 8px 0;
        letter-spacing: -0.02em;
    }

    .w-error-text[b-z41c7en9v6] {
        font-size: 14px;
        color: #64748b;
        line-height: 1.5;
        margin: 0;
        max-width: 280px;
    }

    /* ============================================
       INFO STATE (Reserved Table)
       ============================================ */
    .w-info[b-z41c7en9v6] {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        text-align: center;
        background: linear-gradient(180deg, #fffbf7 0%, #fff 100%);
    }

    .w-info-icon[b-z41c7en9v6] {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f58524;
        margin-bottom: 24px;
        box-shadow: 0 4px 12px rgba(245, 133, 36, 0.15);
    }

    .w-info-title[b-z41c7en9v6] {
        font-size: 22px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 12px 0;
        letter-spacing: -0.02em;
    }

    .w-info-text[b-z41c7en9v6] {
        font-size: 15px;
        color: #64748b;
        line-height: 1.6;
        margin: 0 0 24px 0;
        max-width: 300px;
    }

    .w-info-hint[b-z41c7en9v6] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        color: #64748b;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .w-info-hint svg[b-z41c7en9v6] {
        color: #f58524;
    }

    /* ============================================
       WELCOME PAGE
       ============================================ */
    .w-page[b-z41c7en9v6] {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background: #fff;
        padding: 20px;
        padding-top: max(20px, env(safe-area-inset-top, 0px));
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    }

    /* Header */
    .w-header[b-z41c7en9v6] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
    }

    .w-theme-btn[b-z41c7en9v6] {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: none;
        background: var(--bg-secondary, #f1f5f9);
        color: var(--text-secondary, #64748b);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .w-theme-btn:hover[b-z41c7en9v6] {
        background: var(--bg-tertiary, #e2e8f0);
        color: var(--text-primary, #0f172a);
    }

    .w-theme-btn:focus-visible[b-z41c7en9v6] {
        outline: 2px solid var(--primary, #f58524);
        outline-offset: 2px;
    }

    .w-theme-btn:active[b-z41c7en9v6] {
        transform: scale(0.92);
    }

    .w-lang-toggle[b-z41c7en9v6] {
        display: flex;
        background: var(--bg-secondary, #f1f5f9);
        border-radius: 10px;
        padding: 3px;
    }

    .w-lang-btn[b-z41c7en9v6] {
        padding: 10px 16px;
        min-width: 44px;
        min-height: 44px;
        border: none;
        background: transparent;
        border-radius: 8px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary, #64748b);
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .w-lang-btn:focus-visible[b-z41c7en9v6] {
        outline: 2px solid var(--primary, #f58524);
        outline-offset: 2px;
    }

    .w-lang-btn.active[b-z41c7en9v6] {
        background: var(--bg, #fff);
        color: var(--text-primary, #0f172a);
        box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,0.1));
    }

    .w-lang-btn:active[b-z41c7en9v6] {
        transform: scale(0.95);
    }

    /* Hero Section */
    .w-hero[b-z41c7en9v6] {
        text-align: center;
        padding: 32px 0 28px;
        animation: w-fadeIn-b-z41c7en9v6 0.4s ease;
    }

    .w-logo[b-z41c7en9v6] {
        width: 88px;
        height: 88px;
        margin: 0 auto 20px;
        border-radius: 22px;
        overflow: hidden;
        background: #f8fafc;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .w-logo img[b-z41c7en9v6] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .w-logo.w-logo-initials[b-z41c7en9v6] {
        background: linear-gradient(135deg, #f58524 0%, #fb923c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .w-logo.w-logo-initials span[b-z41c7en9v6] {
        color: #fff;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -1px;
    }

    .w-restaurant-name[b-z41c7en9v6] {
        font-size: 26px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 8px 0;
        letter-spacing: -0.03em;
    }

    .w-branch-name[b-z41c7en9v6] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        font-weight: 500;
        color: #64748b;
        margin: 0;
    }

    .w-branch-name svg[b-z41c7en9v6] {
        color: #f58524;
    }

    /* Branch Location */
    .w-branch-location[b-z41c7en9v6] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 6px;
        flex-wrap: wrap;
    }

    .w-location-text[b-z41c7en9v6] {
        font-size: 12px;
        color: #94a3b8;
        line-height: 1.4;
    }

    .w-directions-link[b-z41c7en9v6] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 500;
        color: #f58524;
        text-decoration: none;
        padding: 3px 10px;
        border-radius: 20px;
        background: rgba(245, 133, 36, 0.08);
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .w-directions-link:hover[b-z41c7en9v6] {
        background: rgba(245, 133, 36, 0.15);
        color: #ea7317;
    }

    .w-directions-link:active[b-z41c7en9v6] {
        transform: scale(0.96);
    }

    /* Table Section */
    .w-table-section[b-z41c7en9v6] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        animation: w-fadeIn-b-z41c7en9v6 0.4s ease 0.1s both;
    }

    .w-table-card[b-z41c7en9v6] {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        background: #f8fafc;
        border-radius: 14px;
        border: 1px solid #e2e8f0;
    }

    .w-table-icon[b-z41c7en9v6] {
        width: 44px;
        height: 44px;
        border-radius: 11px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f58524;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    .w-table-info[b-z41c7en9v6] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .w-table-label[b-z41c7en9v6] {
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .w-table-number[b-z41c7en9v6] {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: -0.02em;
    }

    .w-table-seats[b-z41c7en9v6] {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        background: #fff;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

    /* PIN Entry Section for Joiners */
    .w-pin-section[b-z41c7en9v6] {
        margin-bottom: 24px;
        animation: w-fadeIn-b-z41c7en9v6 0.4s ease 0.2s both;
    }

    .w-pin-card[b-z41c7en9v6] {
        background: #fff;
        border: 1.5px solid #e2e8f0;
        border-radius: 20px;
        padding: 32px 24px;
        text-align: center;
    }

    .w-pin-icon[b-z41c7en9v6] {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        color: #f58524;
    }

    .w-pin-title[b-z41c7en9v6] {
        font-size: 20px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 8px;
    }

    .w-pin-desc[b-z41c7en9v6] {
        font-size: 14px;
        color: #64748b;
        line-height: 1.5;
        margin: 0 0 24px;
    }

    .w-pin-input-wrapper[b-z41c7en9v6] {
        margin-bottom: 20px;
    }

    .w-pin-input[b-z41c7en9v6] {
        width: 100%;
        height: 56px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-family: 'SF Mono', 'Fira Code', monospace;
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 12px;
        padding-left: 12px;
        color: #0f172a;
        transition: all 0.15s ease;
        background: #fff;
    }

    .w-pin-input:focus[b-z41c7en9v6] {
        outline: none;
        border-color: #f58524;
        box-shadow: 0 0 0 4px rgba(245, 133, 36, 0.1);
    }

    .w-pin-input.error[b-z41c7en9v6] {
        border-color: #ef4444;
        animation: w-shake-b-z41c7en9v6 0.4s ease;
    }

    .w-pin-input[b-z41c7en9v6]::placeholder {
        color: #cbd5e1;
        letter-spacing: 8px;
        font-size: 24px;
    }

    .w-pin-input:disabled[b-z41c7en9v6] {
        background: #f8fafc;
        color: #94a3b8;
    }

    @keyframes w-shake-b-z41c7en9v6 {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-8px); }
        40%, 80% { transform: translateX(8px); }
    }

    .w-pin-error[b-z41c7en9v6] {
        display: block;
        color: #ef4444;
        font-size: 13px;
        margin-top: 8px;
    }

    .w-pin-submit[b-z41c7en9v6] {
        width: 100%;
        height: 54px;
        background: #f58524;
        color: #fff;
        border: none;
        border-radius: 14px;
        font-family: inherit;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
    }

    .w-pin-submit:focus-visible[b-z41c7en9v6] {
        outline: 2px solid var(--primary, #f58524);
        outline-offset: 2px;
    }

    .w-pin-submit:hover:not(:disabled)[b-z41c7en9v6] {
        background: #ea7317;
    }

    .w-pin-submit:disabled[b-z41c7en9v6] {
        background: #e2e8f0;
        color: #94a3b8;
        cursor: not-allowed;
        box-shadow: none;
    }

    .w-pin-submit:not(:disabled):active[b-z41c7en9v6] {
        transform: scale(0.98);
    }

    .w-pin-spinner[b-z41c7en9v6] {
        width: 20px;
        height: 20px;
        border: 2px solid transparent;
        border-top-color: white;
        border-radius: 50%;
        animation: w-spin-b-z41c7en9v6 0.8s linear infinite;
    }

    @keyframes w-spin-b-z41c7en9v6 {
        to { transform: rotate(360deg); }
    }

    .w-pin-help[b-z41c7en9v6] {
        font-size: 13px;
        color: #94a3b8;
        margin: 16px 0 0;
    }

    /* Account Section */
    .w-account-section[b-z41c7en9v6] {
        margin-bottom: 24px;
        animation: w-fadeIn-b-z41c7en9v6 0.4s ease 0.2s both;
    }

    .w-account-card[b-z41c7en9v6] {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1.5px solid #e2e8f0;
        background: #fff;
        font-family: inherit;
        text-align: start;
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .w-account-card:focus-visible[b-z41c7en9v6] {
        outline: 2px solid var(--primary, #f58524);
        outline-offset: 2px;
    }

    .w-account-card:active[b-z41c7en9v6] {
        transform: scale(0.98);
    }

    .w-account-guest[b-z41c7en9v6] {
        border-style: dashed;
    }

    .w-account-guest:hover[b-z41c7en9v6] {
        border-color: #f58524;
        border-style: solid;
        background: #fffbf7;
    }

    .w-account-auth[b-z41c7en9v6] {
        background: #fffbf7;
        border-color: #fed7aa;
    }

    .w-account-avatar[b-z41c7en9v6] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #f58524 0%, #fb923c 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .w-account-icon[b-z41c7en9v6] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .w-account-guest:hover .w-account-icon[b-z41c7en9v6] {
        background: #ffedd5;
        color: #f58524;
    }

    .w-account-info[b-z41c7en9v6] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .w-account-name[b-z41c7en9v6],
    .w-account-prompt[b-z41c7en9v6] {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
    }

    .w-account-stats[b-z41c7en9v6],
    .w-account-benefit[b-z41c7en9v6] {
        font-size: 13px;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .w-account-stats svg[b-z41c7en9v6] {
        color: #22c55e;
    }

    .w-account-history-btn[b-z41c7en9v6] {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: #f58524;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        -webkit-tap-highlight-color: transparent;
    }

    .w-account-history-btn:focus-visible[b-z41c7en9v6] {
        outline: 2px solid var(--primary, #f58524);
        outline-offset: 2px;
    }

    .w-account-history-btn:active[b-z41c7en9v6] {
        transform: scale(0.92);
        background: #f58524;
        color: #fff;
    }

    .w-account-arrow[b-z41c7en9v6] {
        color: #94a3b8;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .w-account-guest:hover .w-account-arrow[b-z41c7en9v6] {
        color: #f58524;
        transform: translateX(3px);
    }

    [dir="rtl"] .w-account-guest:hover .w-account-arrow[b-z41c7en9v6] {
        transform: translateX(-3px);
    }

    /* Actions */
    .w-actions[b-z41c7en9v6] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        animation: w-fadeIn-b-z41c7en9v6 0.4s ease 0.3s both;
    }

    .w-cta[b-z41c7en9v6] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 54px;
        background: #f58524;
        border: none;
        border-radius: 14px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3);
        -webkit-tap-highlight-color: transparent;
    }

    .w-cta:focus-visible[b-z41c7en9v6] {
        outline: 2px solid var(--primary, #f58524);
        outline-offset: 2px;
    }

    .w-cta:hover[b-z41c7en9v6] {
        background: #ea7317;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(245, 133, 36, 0.35);
    }

    .w-cta:active[b-z41c7en9v6] {
        transform: scale(0.98) translateY(0);
    }

    .w-secondary-btn[b-z41c7en9v6] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 48px;
        background: #fff;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .w-secondary-btn:focus-visible[b-z41c7en9v6] {
        outline: 2px solid var(--primary, #f58524);
        outline-offset: 2px;
    }

    .w-secondary-btn:hover[b-z41c7en9v6] {
        border-color: #f58524;
        background: #fffbf7;
    }

    .w-secondary-btn:active[b-z41c7en9v6] {
        transform: scale(0.98);
    }

    .w-active-dot[b-z41c7en9v6] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #f58524;
        animation: w-pulse 1.5s ease-in-out infinite;
    }

    .w-text-btn[b-z41c7en9v6] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 44px;
        background: transparent;
        border: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: #64748b;
        cursor: pointer;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .w-text-btn:focus-visible[b-z41c7en9v6] {
        outline: 2px solid var(--primary, #f58524);
        outline-offset: 2px;
    }

    .w-text-btn:hover[b-z41c7en9v6] {
        color: #f58524;
    }

    .w-text-btn:active[b-z41c7en9v6] {
        transform: scale(0.98);
    }

    /* Footer */
    .w-footer[b-z41c7en9v6] {
        margin-top: auto;
        padding-top: 24px;
        display: flex;
        justify-content: center;
        animation: w-fadeIn-b-z41c7en9v6 0.4s ease 0.4s both;
    }

    .w-powered[b-z41c7en9v6] {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #94a3b8;
    }

    .w-powered svg[b-z41c7en9v6] {
        color: #f58524;
    }

    .w-powered-brand[b-z41c7en9v6] {
        font-weight: 700;
        color: #64748b;
    }

    /* Animation */
    @keyframes w-fadeIn-b-z41c7en9v6 {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ============================================
       DESKTOP RESPONSIVE STYLES
       ============================================ */
    @media (min-width: 768px) {
        /* Override CustomerLayout constraints */
        :global(.customer-app:has(.w-page))[b-z41c7en9v6],
        :global(.customer-app:has(.w-loading))[b-z41c7en9v6],
        :global(.customer-app:has(.w-error))[b-z41c7en9v6] {
            max-width: 100% !important;
            @* background: #0a0a0a !important; *@
        }

        :global(body:has(.w-page))[b-z41c7en9v6],
        :global(body:has(.w-loading))[b-z41c7en9v6],
        :global(body:has(.w-error))[b-z41c7en9v6] {
            background: #0a0a0a !important;
        }

        .w-loading[b-z41c7en9v6] {
            @* background: #0a0a0a; *@
        }

        .w-loading-content[b-z41c7en9v6] {
            transform: scale(1.2);
        }

        .w-loading-logo[b-z41c7en9v6],
        .w-loading-line[b-z41c7en9v6] {
            background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
            background-size: 200% 100%;
        }

        .w-error[b-z41c7en9v6] {
            padding: 48px;
            background: #0a0a0a;
        }

        .w-error-icon[b-z41c7en9v6] {
            width: 80px;
            height: 80px;
            background: rgba(239, 68, 68, 0.1);
        }

        .w-error-icon svg[b-z41c7en9v6] {
            width: 36px;
            height: 36px;
        }

        .w-error-title[b-z41c7en9v6] {
            font-size: 28px;
            color: #fff;
        }

        .w-error-text[b-z41c7en9v6] {
            font-size: 16px;
            max-width: 400px;
            color: #94a3b8;
        }

        /* Dark background with floating card */
        .w-page[b-z41c7en9v6] {
            padding: 40px;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }

        .w-page[b-z41c7en9v6]::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(ellipse at 20% 20%, rgba(245, 133, 36, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(245, 133, 36, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        .w-page > *[b-z41c7en9v6] {
            position: relative;
            z-index: 1;
        }

        /* Floating Card Container */
        .w-header[b-z41c7en9v6],
        .w-hero[b-z41c7en9v6],
        .w-table-section[b-z41c7en9v6],
        .w-account-section[b-z41c7en9v6],
        .w-actions[b-z41c7en9v6],
        .w-footer[b-z41c7en9v6],
        .w-pin-section[b-z41c7en9v6] {
            width: 100%;
            max-width: 480px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Card wrapper effect */
        .w-hero[b-z41c7en9v6],
        .w-table-section[b-z41c7en9v6],
        .w-account-section[b-z41c7en9v6],
        .w-actions[b-z41c7en9v6] {
            background: #fff;
            border-radius: 24px;
            padding: 32px;
            box-shadow:
                0 4px 6px rgba(0, 0, 0, 0.1),
                0 20px 40px rgba(0, 0, 0, 0.15);
            margin-bottom: 0;
        }

        .w-hero[b-z41c7en9v6] {
            border-radius: 24px 24px 0 0;
            padding-bottom: 24px;
        }

        .w-table-section[b-z41c7en9v6] {
            border-radius: 0;
            padding-top: 0;
            padding-bottom: 24px;
            margin-bottom: 0;
            box-shadow: none;
        }

        .w-account-section[b-z41c7en9v6] {
            border-radius: 0;
            padding-top: 0;
            padding-bottom: 24px;
            margin-bottom: 0;
            box-shadow: none;
        }

        .w-actions[b-z41c7en9v6] {
            border-radius: 0 0 24px 24px;
            padding-top: 8px;
            box-shadow:
                0 4px 6px rgba(0, 0, 0, 0.1),
                0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .w-footer[b-z41c7en9v6] {
            padding-top: 32px;
        }

        .w-powered[b-z41c7en9v6] {
            color: #64748b;
        }

        .w-powered-brand[b-z41c7en9v6] {
            color: #94a3b8;
        }

        /* Header - Desktop */
        .w-header[b-z41c7en9v6] {
            margin-bottom: 24px;
        }

        .w-lang-btn[b-z41c7en9v6] {
            padding: 10px 18px;
            font-size: 14px;
        }

        /* Hero - Desktop */
        .w-hero[b-z41c7en9v6] {
            padding: 48px 0 40px;
        }

        .w-logo[b-z41c7en9v6] {
            width: 120px;
            height: 120px;
            border-radius: 28px;
            margin-bottom: 28px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        }

        .w-logo.w-logo-initials span[b-z41c7en9v6] {
            font-size: 44px;
        }

        .w-restaurant-name[b-z41c7en9v6] {
            font-size: 36px;
            margin-bottom: 12px;
        }

        .w-branch-name[b-z41c7en9v6] {
            font-size: 16px;
            gap: 6px;
        }

        .w-branch-name svg[b-z41c7en9v6] {
            width: 16px;
            height: 16px;
        }

        .w-location-text[b-z41c7en9v6] {
            font-size: 13px;
        }

        .w-directions-link[b-z41c7en9v6] {
            font-size: 13px;
        }

        /* Table Section - Desktop */
        .w-table-section[b-z41c7en9v6] {
            gap: 16px;
            margin-bottom: 32px;
        }

        .w-table-card[b-z41c7en9v6] {
            padding: 20px 24px;
            border-radius: 16px;
            gap: 18px;
        }

        .w-table-icon[b-z41c7en9v6] {
            width: 56px;
            height: 56px;
            border-radius: 14px;
        }

        .w-table-icon svg[b-z41c7en9v6] {
            width: 24px;
            height: 24px;
        }

        .w-table-label[b-z41c7en9v6] {
            font-size: 12px;
        }

        .w-table-number[b-z41c7en9v6] {
            font-size: 26px;
        }

        .w-table-seats[b-z41c7en9v6] {
            padding: 8px 16px;
            font-size: 14px;
        }

        .w-session[b-z41c7en9v6] {
            padding: 10px 18px;
            font-size: 14px;
        }

        /* Account Section - Desktop */
        .w-account-section[b-z41c7en9v6] {
            margin-bottom: 32px;
        }

        .w-account-card[b-z41c7en9v6] {
            padding: 18px 20px;
            border-radius: 16px;
            gap: 16px;
        }

        .w-account-avatar[b-z41c7en9v6],
        .w-account-icon[b-z41c7en9v6] {
            width: 48px;
            height: 48px;
        }

        .w-account-avatar[b-z41c7en9v6] {
            font-size: 15px;
        }

        .w-account-icon svg[b-z41c7en9v6] {
            width: 22px;
            height: 22px;
        }

        .w-account-name[b-z41c7en9v6],
        .w-account-prompt[b-z41c7en9v6] {
            font-size: 16px;
        }

        .w-account-stats[b-z41c7en9v6],
        .w-account-benefit[b-z41c7en9v6] {
            font-size: 14px;
        }

        .w-account-history-btn[b-z41c7en9v6] {
            width: 44px;
            height: 44px;
        }

        .w-account-history-btn svg[b-z41c7en9v6] {
            width: 22px;
            height: 22px;
        }

        /* Actions - Desktop */
        .w-actions[b-z41c7en9v6] {
            gap: 16px;
        }

        .w-cta[b-z41c7en9v6] {
            height: 60px;
            border-radius: 16px;
            font-size: 17px;
            gap: 12px;
        }

        .w-cta svg[b-z41c7en9v6] {
            width: 24px;
            height: 24px;
        }

        .w-secondary-btn[b-z41c7en9v6] {
            height: 54px;
            border-radius: 14px;
            font-size: 15px;
            gap: 10px;
        }

        .w-secondary-btn svg[b-z41c7en9v6] {
            width: 18px;
            height: 18px;
        }

        .w-text-btn[b-z41c7en9v6] {
            height: 48px;
            font-size: 15px;
            gap: 10px;
        }

        .w-text-btn svg[b-z41c7en9v6] {
            width: 18px;
            height: 18px;
        }

        /* Footer - Desktop */
        .w-footer[b-z41c7en9v6] {
            padding-top: 32px;
        }

        .w-powered[b-z41c7en9v6] {
            font-size: 13px;
            gap: 6px;
        }

        .w-powered svg[b-z41c7en9v6] {
            width: 16px;
            height: 16px;
        }
    }

    /* Large Desktop */
    @media (min-width: 1024px) {
        .w-page[b-z41c7en9v6] {
            padding: 60px;
        }

        .w-header[b-z41c7en9v6],
        .w-hero[b-z41c7en9v6],
        .w-table-section[b-z41c7en9v6],
        .w-account-section[b-z41c7en9v6],
        .w-actions[b-z41c7en9v6],
        .w-footer[b-z41c7en9v6],
        .w-pin-section[b-z41c7en9v6] {
            max-width: 520px;
        }

        .w-hero[b-z41c7en9v6],
        .w-table-section[b-z41c7en9v6],
        .w-account-section[b-z41c7en9v6],
        .w-actions[b-z41c7en9v6] {
            padding-left: 40px;
            padding-right: 40px;
        }

        .w-hero[b-z41c7en9v6] {
            padding-top: 40px;
        }

        .w-logo[b-z41c7en9v6] {
            width: 140px;
            height: 140px;
            border-radius: 32px;
        }

        .w-logo.w-logo-initials span[b-z41c7en9v6] {
            font-size: 52px;
        }

        .w-restaurant-name[b-z41c7en9v6] {
            font-size: 42px;
        }

        .w-branch-name[b-z41c7en9v6] {
            font-size: 18px;
        }

        .w-table-number[b-z41c7en9v6] {
            font-size: 30px;
        }

        .w-cta[b-z41c7en9v6] {
            height: 64px;
            font-size: 18px;
        }
    }

    /* Extra Large Desktop */
    @media (min-width: 1440px) {
        .w-page[b-z41c7en9v6] {
            padding: 80px;
        }

        .w-header[b-z41c7en9v6],
        .w-hero[b-z41c7en9v6],
        .w-table-section[b-z41c7en9v6],
        .w-account-section[b-z41c7en9v6],
        .w-actions[b-z41c7en9v6],
        .w-footer[b-z41c7en9v6],
        .w-pin-section[b-z41c7en9v6] {
            max-width: 560px;
        }

        .w-hero[b-z41c7en9v6],
        .w-table-section[b-z41c7en9v6],
        .w-account-section[b-z41c7en9v6],
        .w-actions[b-z41c7en9v6] {
            padding-left: 48px;
            padding-right: 48px;
        }

        .w-hero[b-z41c7en9v6] {
            padding-top: 48px;
            border-radius: 28px 28px 0 0;
        }

        .w-actions[b-z41c7en9v6] {
            border-radius: 0 0 28px 28px;
        }

        .w-logo[b-z41c7en9v6] {
            width: 160px;
            height: 160px;
            border-radius: 36px;
            margin-bottom: 32px;
        }

        .w-logo.w-logo-initials span[b-z41c7en9v6] {
            font-size: 60px;
        }

        .w-restaurant-name[b-z41c7en9v6] {
            font-size: 48px;
            margin-bottom: 14px;
        }

        .w-branch-name[b-z41c7en9v6] {
            font-size: 20px;
        }

        .w-table-card[b-z41c7en9v6] {
            padding: 24px 28px;
        }

        .w-table-number[b-z41c7en9v6] {
            font-size: 32px;
        }

        .w-cta[b-z41c7en9v6] {
            height: 68px;
            font-size: 19px;
        }

        .w-secondary-btn[b-z41c7en9v6] {
            height: 58px;
            font-size: 16px;
        }
    }

    /* ============================================
       REDUCED MOTION SUPPORT
       ============================================ */
    @media (prefers-reduced-motion: reduce) {
        .w-loading-logo[b-z41c7en9v6],
        .w-loading-line[b-z41c7en9v6],
        .w-loading-dots span[b-z41c7en9v6],
        .w-hero[b-z41c7en9v6],
        .w-table-section[b-z41c7en9v6],
        .w-account-section[b-z41c7en9v6],
        .w-actions[b-z41c7en9v6],
        .w-footer[b-z41c7en9v6],
        .w-pin-section[b-z41c7en9v6],
        .w-pin-input[b-z41c7en9v6],
        .w-lang-btn[b-z41c7en9v6],
        .w-account-card[b-z41c7en9v6],
        .w-account-history-btn[b-z41c7en9v6],
        .w-cta[b-z41c7en9v6],
        .w-secondary-btn[b-z41c7en9v6],
        .w-text-btn[b-z41c7en9v6],
        .w-pin-submit[b-z41c7en9v6],
        .w-active-dot[b-z41c7en9v6],
        .w-account-arrow[b-z41c7en9v6],
        .w-account-guest:hover .w-account-arrow[b-z41c7en9v6],
        .w-directions-link[b-z41c7en9v6] {
            animation: none !important;
            transition: none !important;
        }
    }
/* _content/QrBiteHub.Web/Components/Pages/Dashboard.razor.rz.scp.css */
/* Skeleton status card sizing */
.skeleton-status-card[b-a7zfssoe31] { min-height: 280px; }
.skeleton-status-card .skeleton-default-content[b-a7zfssoe31] { height: 220px; }

.dashboard[b-a7zfssoe31] { padding: 24px; max-width: 1400px; margin: 0 auto; }

/* Welcome Section */
.welcome-section[b-a7zfssoe31] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.welcome-content h1[b-a7zfssoe31] { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; }
.welcome-content p[b-a7zfssoe31] { font-size: 14px; color: var(--text-muted); margin: 0; }
.welcome-date[b-a7zfssoe31] { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.date-day[b-a7zfssoe31] { font-size: 14px; font-weight: 600; color: var(--accent); }
.date-full[b-a7zfssoe31] { font-size: 13px; color: var(--text-muted); }

/* Stats Grid */
.stats-grid[b-a7zfssoe31] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card[b-a7zfssoe31] { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: all 0.2s ease; }
.stat-card:hover[b-a7zfssoe31] { border-color: var(--border-hover); box-shadow: var(--shadow); }

.stat-icon[b-a7zfssoe31] { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius); flex-shrink: 0; }
.stat-icon.orders[b-a7zfssoe31] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.stat-icon.revenue[b-a7zfssoe31] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.stat-icon.tables[b-a7zfssoe31] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.stat-icon.staff[b-a7zfssoe31] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

.stat-info[b-a7zfssoe31] { display: flex; flex-direction: column; gap: 4px; }
.stat-value[b-a7zfssoe31] { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.stat-label[b-a7zfssoe31] { font-size: 13px; color: var(--text-muted); }
.stat-change[b-a7zfssoe31] { font-size: 12px; font-weight: 500; }
.stat-change.positive[b-a7zfssoe31] { color: #10b981; }
.stat-change.negative[b-a7zfssoe31] { color: #ef4444; }
.stat-subtext[b-a7zfssoe31] { font-size: 12px; color: var(--text-muted); }

/* Hero KPI Card */
.stat-card-hero[b-a7zfssoe31] { grid-column: span 2; flex-direction: column; }
.hero-main[b-a7zfssoe31] { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
.stat-card-hero .stat-value[b-a7zfssoe31] { font-size: 36px; }
.hero-sparkline[b-a7zfssoe31] { width: 100%; height: 40px; opacity: 0.7; margin-top: 8px; }
.hero-sparkline[b-a7zfssoe31]  svg { width: 100%; height: 100%; }

/* Inline Sparkline (Revenue card etc.) */
.stat-sparkline[b-a7zfssoe31] { margin-top: 4px; }
.stat-sparkline[b-a7zfssoe31]  svg { display: block; }

/* Charts Row */
.charts-row[b-a7zfssoe31] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.chart-card[b-a7zfssoe31] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.chart-header[b-a7zfssoe31] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.chart-header h3[b-a7zfssoe31] { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
.chart-total[b-a7zfssoe31] { font-size: 13px; color: var(--text-muted); }

.bar-chart[b-a7zfssoe31] { display: flex; align-items: flex-end; gap: 12px; height: 160px; }
.bar-item[b-a7zfssoe31] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.bar[b-a7zfssoe31] { flex: 1; width: 100%; background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%); border-radius: 4px 4px 0 0; min-height: 4px; position: relative; display: flex; align-items: flex-start; justify-content: center; transition: height 0.3s ease; }
.bar-chart.revenue .bar[b-a7zfssoe31] { background: linear-gradient(180deg, #10b981 0%, #34d399 100%); }
.bar-value[b-a7zfssoe31] { position: absolute; top: -22px; font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.bar-label[b-a7zfssoe31] { font-size: 12px; color: var(--text-muted); }

/* Details Row */
.details-row[b-a7zfssoe31] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.detail-card[b-a7zfssoe31] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.detail-header[b-a7zfssoe31] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.detail-header h3[b-a7zfssoe31] { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
.view-all[b-a7zfssoe31] { font-size: 13px; color: var(--accent); text-decoration: none; }
.view-all:hover[b-a7zfssoe31] { text-decoration: underline; }

/* Orders List / Activity Feed */
.orders-list[b-a7zfssoe31] { display: flex; flex-direction: column; gap: 12px; }
.empty-list[b-a7zfssoe31] { padding: 32px; text-align: center; color: var(--text-muted); }

.order-item[b-a7zfssoe31] { display: flex; align-items: center; gap: 16px; padding: 12px; background: var(--bg-hover); border-radius: var(--radius); }
.order-info[b-a7zfssoe31] { display: flex; flex-direction: column; gap: 2px; }
.order-number[b-a7zfssoe31] { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.order-time[b-a7zfssoe31] { font-size: 12px; color: var(--text-muted); }
.order-details[b-a7zfssoe31] { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.order-items[b-a7zfssoe31] { font-size: 12px; color: var(--text-muted); }
.order-amount[b-a7zfssoe31] { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.order-status[b-a7zfssoe31] { padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 12px; text-transform: uppercase; }
.order-status.pending[b-a7zfssoe31] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.order-status.confirmed[b-a7zfssoe31] { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.order-status.preparing[b-a7zfssoe31] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.order-status.ready[b-a7zfssoe31] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.order-status.served[b-a7zfssoe31] { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.order-status.completed[b-a7zfssoe31] { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.order-status.cancelled[b-a7zfssoe31] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* Feed Item (Activity Feed) */
.feed-item[b-a7zfssoe31] { border-left: 3px solid transparent; position: relative; transition: all 0.2s ease; }
.feed-item.pending[b-a7zfssoe31] { border-left-color: #f59e0b; }
.feed-item.confirmed[b-a7zfssoe31] { border-left-color: #6366f1; }
.feed-item.preparing[b-a7zfssoe31] { border-left-color: #8b5cf6; }
.feed-item.ready[b-a7zfssoe31] { border-left-color: #10b981; }
.feed-item.served[b-a7zfssoe31] { border-left-color: #06b6d4; }
.feed-item.completed[b-a7zfssoe31] { border-left-color: #22c55e; }
.feed-item.cancelled[b-a7zfssoe31] { border-left-color: #ef4444; }
.feed-item:hover[b-a7zfssoe31] { background: var(--bg-hover); transform: translateX(2px); }
[b-a7zfssoe31] [dir="rtl"] .feed-item { border-left: none; border-right: 3px solid transparent; }
[b-a7zfssoe31] [dir="rtl"] .feed-item.pending { border-right-color: #f59e0b; }
[b-a7zfssoe31] [dir="rtl"] .feed-item.confirmed { border-right-color: #6366f1; }
[b-a7zfssoe31] [dir="rtl"] .feed-item.preparing { border-right-color: #8b5cf6; }
[b-a7zfssoe31] [dir="rtl"] .feed-item.ready { border-right-color: #10b981; }
[b-a7zfssoe31] [dir="rtl"] .feed-item.served { border-right-color: #06b6d4; }
[b-a7zfssoe31] [dir="rtl"] .feed-item.completed { border-right-color: #22c55e; }
[b-a7zfssoe31] [dir="rtl"] .feed-item.cancelled { border-right-color: #ef4444; }
[b-a7zfssoe31] [dir="rtl"] .feed-item:hover { transform: translateX(-2px); }

/* Pulse Dot */
.pulse-dot[b-a7zfssoe31] { width: 8px; height: 8px; border-radius: 50%; background: #10b981; display: inline-block; flex-shrink: 0; animation: dotPulse-b-a7zfssoe31 2s infinite; }
@keyframes dotPulse-b-a7zfssoe31 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* Status Distribution */
.status-distribution[b-a7zfssoe31] { display: flex; flex-direction: column; gap: 16px; }
.status-item[b-a7zfssoe31] { display: flex; flex-direction: column; gap: 6px; }
.status-bar[b-a7zfssoe31] { height: 8px; background: var(--bg-hover); border-radius: 4px; overflow: hidden; }
.status-fill[b-a7zfssoe31] { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.status-fill.pending[b-a7zfssoe31] { background: #f59e0b; }
.status-fill.confirmed[b-a7zfssoe31] { background: #6366f1; }
.status-fill.preparing[b-a7zfssoe31] { background: #8b5cf6; }
.status-fill.ready[b-a7zfssoe31] { background: #10b981; }
.status-fill.served[b-a7zfssoe31] { background: #06b6d4; }
.status-fill.completed[b-a7zfssoe31] { background: #22c55e; }
.status-fill.cancelled[b-a7zfssoe31] { background: #ef4444; }
.status-info[b-a7zfssoe31] { display: flex; justify-content: space-between; align-items: center; }
.status-label[b-a7zfssoe31] { font-size: 13px; font-weight: 500; }
.status-label.pending[b-a7zfssoe31] { color: #f59e0b; }
.status-label.confirmed[b-a7zfssoe31] { color: #6366f1; }
.status-label.preparing[b-a7zfssoe31] { color: #8b5cf6; }
.status-label.ready[b-a7zfssoe31] { color: #10b981; }
.status-label.served[b-a7zfssoe31] { color: #06b6d4; }
.status-label.completed[b-a7zfssoe31] { color: #22c55e; }
.status-label.cancelled[b-a7zfssoe31] { color: #ef4444; }
.status-count[b-a7zfssoe31] { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* Settlement Banner */
.settlement-banner[b-a7zfssoe31] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-radius: var(--radius-lg); margin-bottom: 16px; gap: 16px; }
.settlement-banner.warning[b-a7zfssoe31] { background: var(--warning-bg, rgba(245, 158, 11, 0.08)); border: 1px solid rgba(245, 158, 11, 0.25); }
.settlement-banner.active[b-a7zfssoe31] { background: var(--success-bg, rgba(16, 185, 129, 0.08)); border: 1px solid rgba(16, 185, 129, 0.25); }
.settlement-banner.closed[b-a7zfssoe31] { background: var(--bg-card); border: 1px solid var(--border); }
.settlement-banner-content[b-a7zfssoe31] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.settlement-banner.warning .settlement-banner-content[b-a7zfssoe31] { color: #f59e0b; }
.settlement-banner.active .settlement-banner-content[b-a7zfssoe31] { color: #10b981; }
.settlement-banner.closed .settlement-banner-content[b-a7zfssoe31] { color: var(--text-secondary); }
.settlement-banner-text[b-a7zfssoe31] { display: flex; flex-direction: column; gap: 2px; }
.settlement-banner-text strong[b-a7zfssoe31] { font-size: 14px; font-weight: 600; }
.settlement-banner-text span[b-a7zfssoe31] { font-size: 12px; opacity: 0.85; }
.settlement-banner-action[b-a7zfssoe31] { font-size: 13px; font-weight: 600; white-space: nowrap; padding: 6px 16px; border-radius: var(--radius); text-decoration: none; transition: all 0.2s ease; }
.settlement-banner.warning .settlement-banner-action[b-a7zfssoe31] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.settlement-banner.warning .settlement-banner-action:hover[b-a7zfssoe31] { background: rgba(245, 158, 11, 0.25); }
.settlement-banner.active .settlement-banner-action[b-a7zfssoe31] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.settlement-banner.active .settlement-banner-action:hover[b-a7zfssoe31] { background: rgba(16, 185, 129, 0.25); }
.settlement-banner.closed .settlement-banner-action[b-a7zfssoe31] { background: var(--bg-hover); color: var(--text-secondary); }
.settlement-banner.closed .settlement-banner-action:hover[b-a7zfssoe31] { background: var(--bg-elevated); }
.settlement-pulse[b-a7zfssoe31] { width: 10px; height: 10px; border-radius: 50%; background: #10b981; flex-shrink: 0; animation: settlementPulse-b-a7zfssoe31 2s infinite; }
@keyframes settlementPulse-b-a7zfssoe31 { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } }
.variance-over[b-a7zfssoe31] { color: #10b981; font-weight: 600; }
.variance-short[b-a7zfssoe31] { color: #ef4444; font-weight: 600; }

@media (max-width: 768px) {
    .settlement-banner[b-a7zfssoe31] { flex-direction: column; align-items: flex-start; gap: 10px; }
    .settlement-banner-action[b-a7zfssoe31] { align-self: stretch; text-align: center; }
}

/* Quick Actions */
.quick-actions[b-a7zfssoe31] { margin-bottom: 24px; }
.quick-actions h2[b-a7zfssoe31] { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 16px 0; }
.actions-grid[b-a7zfssoe31] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.action-card[b-a7zfssoe31] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-secondary); transition: all 0.2s ease; }
.action-card:hover[b-a7zfssoe31] { border-color: var(--accent); background: var(--bg-hover); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.action-icon[b-a7zfssoe31] { width: 48px; height: 48px; display: grid; place-items: center; background: var(--bg-hover); border-radius: var(--radius); transition: all 0.2s ease; }
.action-card:hover .action-icon[b-a7zfssoe31] { background: rgba(245, 133, 36, 0.1); }
.action-card span[b-a7zfssoe31] { font-size: 13px; font-weight: 500; }

/* Responsive */
@media (max-width: 1200px) {
    .stats-grid[b-a7zfssoe31] { grid-template-columns: repeat(2, 1fr); }
    .actions-grid[b-a7zfssoe31] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .dashboard[b-a7zfssoe31] { padding: 16px; }
    .welcome-section[b-a7zfssoe31] { flex-direction: column; gap: 16px; }
    .welcome-date[b-a7zfssoe31] { text-align: left; }
    .welcome-content h1[b-a7zfssoe31] { font-size: 20px; }
    .stats-grid[b-a7zfssoe31] { grid-template-columns: 1fr 1fr; }
    .stat-card-hero[b-a7zfssoe31] { grid-column: span 1; }
    .stat-card-hero .stat-value[b-a7zfssoe31] { font-size: 28px; }
    .charts-row[b-a7zfssoe31], .details-row[b-a7zfssoe31] { grid-template-columns: 1fr; }
    .actions-grid[b-a7zfssoe31] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .stats-grid[b-a7zfssoe31] { grid-template-columns: 1fr; }
    .actions-grid[b-a7zfssoe31] { grid-template-columns: repeat(2, 1fr); }
    .stat-value[b-a7zfssoe31] { font-size: 24px; }
}
/* _content/QrBiteHub.Web/Components/Pages/Onboard.razor.rz.scp.css */
/* ===========================================
   ONBOARD PAGE — 4-Step Registration Wizard
   Standalone dark page (public, no layout)
   =========================================== */

/* Base */
.onboard-page[b-a4ik0w0ary] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; padding: 5rem 1rem 4rem; font-family: 'Manrope', sans-serif; color: #fff; overflow-x: hidden; background: #0a0a0a; }
.bg-overlay[b-a4ik0w0ary] { position: fixed; inset: 0; background: #0a0a0a; z-index: -2; }
.glow-bottom[b-a4ik0w0ary] { position: fixed; bottom: -10%; right: -5%; width: 500px; height: 500px; background: rgba(245,133,36,0.15); filter: blur(120px); border-radius: 50%; z-index: -1; pointer-events: none; }
.glow-top[b-a4ik0w0ary] { position: fixed; top: -10%; left: -5%; width: 400px; height: 400px; background: rgba(245,133,36,0.08); filter: blur(100px); border-radius: 50%; z-index: -1; pointer-events: none; }

/* Header */
.onboard-header[b-a4ik0w0ary] { position: fixed; top: 0; left: 0; right: 0; padding: 1rem 1.5rem; z-index: 50; background: rgba(10,10,10,0.8); backdrop-filter: blur(8px); }
.header-container[b-a4ik0w0ary] { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.header-actions[b-a4ik0w0ary] { display: flex; align-items: center; }
.nav-brand[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand-logo-img[b-a4ik0w0ary] { width: 2rem; height: 2rem; object-fit: contain; }
.brand-name[b-a4ik0w0ary] { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.brand-qr[b-a4ik0w0ary] { color: #f58524; }

/* Glass Panel */
.onboard-main[b-a4ik0w0ary] { width: 100%; max-width: 720px; position: relative; z-index: 5; margin-top: 1rem; }
.glass-panel[b-a4ik0w0ary] { background: rgba(30,30,30,0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; padding: 2rem; position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }

/* Close Button */
.close-btn[b-a4ik0w0ary] { position: absolute; top: 1.25rem; right: 1.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255,255,255,0.08); border: none; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background 0.2s; text-decoration: none; z-index: 5; }
.close-btn:hover[b-a4ik0w0ary] { background: rgba(255,255,255,0.15); }
[b-a4ik0w0ary] [dir="rtl"] .close-btn { right: auto; left: 1.25rem; }

/* Step Indicator */
.step-indicator[b-a4ik0w0ary] { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 1.5rem; padding: 0 1rem; }
.step-dot[b-a4ik0w0ary] { width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.3s; flex-shrink: 0; }
.step-dot.active[b-a4ik0w0ary] { background: #f58524; border-color: #f58524; color: #fff; box-shadow: 0 0 15px rgba(245,133,36,0.4); }
.step-dot.done[b-a4ik0w0ary] { background: rgba(34,197,94,0.2); border-color: #22c55e; color: #22c55e; }
.step-dot.done .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1rem; }
.step-line[b-a4ik0w0ary] { flex: 1; height: 2px; background: rgba(255,255,255,0.1); margin: 0 0.25rem; max-width: 60px; }
.step-line.done[b-a4ik0w0ary] { background: #22c55e; }

/* Form Header */
.form-header[b-a4ik0w0ary] { text-align: center; margin-bottom: 1.5rem; }
.form-header h1[b-a4ik0w0ary] { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.2; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.form-header p[b-a4ik0w0ary] { font-size: 0.9375rem; color: rgba(255,255,255,0.6); margin: 0; }

/* Error Banner */
.error-banner[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; margin-bottom: 1rem; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); border-radius: 0.75rem; font-size: 0.875rem; color: #fca5a5; }
.error-banner .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; color: #ef4444; font-size: 1.25rem; flex-shrink: 0; }
.dismiss-btn[b-a4ik0w0ary] { margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 0; display: flex; }
.dismiss-btn .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }
[b-a4ik0w0ary] [dir="rtl"] .dismiss-btn { margin-left: 0; margin-right: auto; }

/* Step Content */
.step-content[b-a4ik0w0ary] { display: flex; flex-direction: column; gap: 1.25rem; }

/* Section Labels */
.section-label[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 700; color: #f58524; margin: 0.5rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); }
.section-label .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }

/* Form Groups */
.form-group[b-a4ik0w0ary] { display: flex; flex-direction: column; gap: 0.375rem; }
.form-group label[b-a4ik0w0ary] { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.8); }
.field-hint[b-a4ik0w0ary] { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.field-error[b-a4ik0w0ary] { font-size: 0.75rem; color: #f87171; }
.coords-hint[b-a4ik0w0ary] { font-family: monospace; }

/* Inputs */
.form-group input[type="text"][b-a4ik0w0ary],
.form-group input[type="email"][b-a4ik0w0ary],
.form-group input[type="tel"][b-a4ik0w0ary],
.form-group input[type="password"][b-a4ik0w0ary],
.form-group select[b-a4ik0w0ary] { width: 100%; height: 2.75rem; padding: 0 1rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 9999px; color: #fff; font-size: 0.875rem; font-family: 'Manrope', sans-serif; transition: all 0.2s; outline: none; box-sizing: border-box; }
.form-group input[b-a4ik0w0ary]::placeholder { color: rgba(255,255,255,0.3); }
.form-group input:focus[b-a4ik0w0ary], .form-group select:focus[b-a4ik0w0ary] { border-color: transparent; box-shadow: 0 0 0 2px #f58524; }
.form-group select[b-a4ik0w0ary] { appearance: none; cursor: pointer; padding-right: 2.5rem; }
.form-group select option[b-a4ik0w0ary] { background: #1e1e1e; color: #fff; }

/* Select Wrapper */
.select-wrapper[b-a4ik0w0ary] { position: relative; }
.select-arrow[b-a4ik0w0ary] { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.4); pointer-events: none; font-family: 'Material Symbols Outlined' !important; font-size: 1.25rem; }
[b-a4ik0w0ary] [dir="rtl"] .select-wrapper select { padding-right: 1rem; padding-left: 2.5rem; }
[b-a4ik0w0ary] [dir="rtl"] .select-arrow { right: auto; left: 1rem; }

/* Form Rows */
.form-row[b-a4ik0w0ary] { display: flex; flex-direction: column; gap: 1rem; }
.form-row.two-cols[b-a4ik0w0ary], .form-row.three-cols[b-a4ik0w0ary] { flex-direction: column; }
@media (min-width: 640px) {
    .form-row.two-cols[b-a4ik0w0ary] { flex-direction: row; }
    .form-row.two-cols > .form-group[b-a4ik0w0ary] { flex: 1; }
    .form-row.three-cols[b-a4ik0w0ary] { flex-direction: row; }
    .form-row.three-cols > .form-group[b-a4ik0w0ary] { flex: 1; }
}

/* Input with Status (check/X) */
.input-with-status[b-a4ik0w0ary] { position: relative; }
.input-with-status input[b-a4ik0w0ary] { padding-right: 2.5rem; }
.input-status[b-a4ik0w0ary] { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); }
.input-status .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }
.input-status.valid .material-icon[b-a4ik0w0ary] { color: #22c55e; }
.input-status.invalid .material-icon[b-a4ik0w0ary] { color: #ef4444; }
.mini-spinner[b-a4ik0w0ary] { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.2); border-top-color: #f58524; border-radius: 50%; animation: spin-b-a4ik0w0ary 0.7s linear infinite; display: block; }
[b-a4ik0w0ary] [dir="rtl"] .input-with-status input { padding-right: 1rem; padding-left: 2.5rem; }
[b-a4ik0w0ary] [dir="rtl"] .input-status { right: auto; left: 0.875rem; }

/* Tag Pills */
.tag-grid[b-a4ik0w0ary] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-pill[b-a4ik0w0ary] { padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); font-size: 0.8125rem; font-family: 'Manrope', sans-serif; cursor: pointer; transition: all 0.2s; }
.tag-pill:hover[b-a4ik0w0ary] { border-color: rgba(245,133,36,0.5); color: #fff; }
.tag-pill.selected[b-a4ik0w0ary] { background: rgba(245,133,36,0.2); border-color: #f58524; color: #f58524; font-weight: 600; }

/* Map */
.map-wrapper[b-a4ik0w0ary] { position: relative; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.map-container[b-a4ik0w0ary] { height: 250px; width: 100%; z-index: 1; }
.map-search-bar[b-a4ik0w0ary] { position: absolute; top: 0.75rem; left: 0.75rem; right: 0.75rem; z-index: 1000; display: flex; align-items: center; gap: 0.5rem; background: rgba(20,20,20,0.95); border: 1px solid rgba(255,255,255,0.15); border-radius: 9999px; padding: 0 1rem; height: 2.5rem; }
.map-search-bar .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; color: rgba(255,255,255,0.4); font-size: 1.125rem; flex-shrink: 0; }
.map-search-bar input[b-a4ik0w0ary] { flex: 1; background: none; border: none; color: #fff; font-size: 0.8125rem; outline: none; font-family: 'Manrope', sans-serif; }
.map-search-bar input[b-a4ik0w0ary]::placeholder { color: rgba(255,255,255,0.3); }
.map-search-results[b-a4ik0w0ary] { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.375rem; background: rgba(20,20,20,0.98); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.75rem; overflow: hidden; max-height: 200px; overflow-y: auto; }
.search-result-item[b-a4ik0w0ary] { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 0.625rem 1rem; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); font-size: 0.75rem; font-family: 'Manrope', sans-serif; cursor: pointer; text-align: left; }
.search-result-item:hover[b-a4ik0w0ary] { background: rgba(255,255,255,0.05); }
.search-result-item .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; color: #f58524; font-size: 1rem; flex-shrink: 0; margin-top: 0.125rem; }
.my-location-btn[b-a4ik0w0ary] { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 1000; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(20,20,20,0.95); border: 1px solid rgba(255,255,255,0.15); color: #f58524; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.my-location-btn:hover[b-a4ik0w0ary] { background: rgba(40,40,40,0.95); }
.my-location-btn .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }
[b-a4ik0w0ary] [dir="rtl"] .my-location-btn { right: auto; left: 0.75rem; }

/* Operating Hours Grid */
.hours-grid[b-a4ik0w0ary] { display: flex; flex-direction: column; gap: 0.5rem; }
.hours-row[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.day-toggle[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; min-width: 130px; user-select: none; }
.day-toggle input[type="checkbox"][b-a4ik0w0ary] { display: none; }
.toggle-track[b-a4ik0w0ary] { width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,0.15); position: relative; transition: background 0.2s; flex-shrink: 0; }
.day-toggle input:checked + .toggle-track[b-a4ik0w0ary] { background: #f58524; }
.toggle-thumb[b-a4ik0w0ary] { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.day-toggle input:checked + .toggle-track .toggle-thumb[b-a4ik0w0ary] { transform: translateX(16px); }
.day-name[b-a4ik0w0ary] { font-size: 0.8125rem; font-weight: 500; color: rgba(255,255,255,0.8); }
.time-inputs[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.375rem; }
.time-inputs input[type="time"][b-a4ik0w0ary] { width: 110px; height: 2.25rem; padding: 0 0.625rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 0.5rem; color: #fff; font-size: 0.8125rem; font-family: 'Manrope', sans-serif; outline: none; }
.time-inputs input[type="time"]:focus[b-a4ik0w0ary] { border-color: #f58524; }
.time-sep[b-a4ik0w0ary] { color: rgba(255,255,255,0.3); font-size: 0.875rem; }
.day-closed[b-a4ik0w0ary] { font-size: 0.8125rem; color: rgba(255,255,255,0.3); font-style: italic; }
.apply-all-btn[b-a4ik0w0ary] { background: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 0.375rem; color: rgba(255,255,255,0.5); cursor: pointer; padding: 0.25rem; display: flex; align-items: center; margin-left: auto; transition: all 0.2s; }
.apply-all-btn:hover[b-a4ik0w0ary] { border-color: #f58524; color: #f58524; }
.apply-all-btn .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1rem; }
[b-a4ik0w0ary] [dir="rtl"] .apply-all-btn { margin-left: 0; margin-right: auto; }

/* Password */
.password-input-wrapper[b-a4ik0w0ary] { position: relative; }
.password-input-wrapper input[b-a4ik0w0ary] { padding-right: 2.75rem; }
.toggle-password[b-a4ik0w0ary] { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 0; display: flex; }
.toggle-password .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }
[b-a4ik0w0ary] [dir="rtl"] .password-input-wrapper input { padding-right: 1rem; padding-left: 2.75rem; }
[b-a4ik0w0ary] [dir="rtl"] .toggle-password { right: auto; left: 0.875rem; }
.strength-meter[b-a4ik0w0ary] { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; margin-top: 0.25rem; }
.strength-bar[b-a4ik0w0ary] { height: 100%; border-radius: 2px; transition: width 0.3s, background 0.3s; }

/* Plan Selection */
.billing-toggle[b-a4ik0w0ary] { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.billing-toggle > span[b-a4ik0w0ary] { font-size: 0.875rem; color: rgba(255,255,255,0.4); transition: color 0.2s; }
.billing-toggle > span.active[b-a4ik0w0ary] { color: #fff; font-weight: 600; }
.save-badge[b-a4ik0w0ary] { display: inline-block; padding: 0.125rem 0.5rem; background: rgba(34,197,94,0.2); color: #22c55e; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; margin-left: 0.375rem; }
.toggle-switch[b-a4ik0w0ary] { position: relative; width: 44px; height: 24px; }
.toggle-switch input[b-a4ik0w0ary] { display: none; }
.toggle-slider[b-a4ik0w0ary] { position: absolute; inset: 0; background: rgba(255,255,255,0.15); border-radius: 12px; cursor: pointer; transition: background 0.2s; }
.toggle-slider[b-a4ik0w0ary]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle-switch input:checked + .toggle-slider[b-a4ik0w0ary] { background: #f58524; }
.toggle-switch input:checked + .toggle-slider[b-a4ik0w0ary]::after { transform: translateX(20px); }

/* Plan Cards */
.plan-cards[b-a4ik0w0ary] { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .plan-cards[b-a4ik0w0ary] { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.plan-card[b-a4ik0w0ary] { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.875rem; padding: 1.25rem; cursor: pointer; transition: all 0.3s; position: relative; }
.plan-card:hover[b-a4ik0w0ary] { border-color: rgba(245,133,36,0.3); background: rgba(255,255,255,0.06); }
.plan-card.selected[b-a4ik0w0ary] { border-color: #f58524; background: rgba(245,133,36,0.08); box-shadow: 0 0 20px rgba(245,133,36,0.15); }
.plan-card-header h3[b-a4ik0w0ary] { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.plan-card-header p[b-a4ik0w0ary] { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin: 0; }
.plan-price[b-a4ik0w0ary] { display: flex; align-items: baseline; gap: 0.25rem; margin: 1rem 0; }
.price-amount[b-a4ik0w0ary] { font-size: 2rem; font-weight: 800; color: #fff; }
.price-meta[b-a4ik0w0ary] { display: flex; flex-direction: column; }
.price-currency[b-a4ik0w0ary] { font-size: 0.75rem; color: rgba(255,255,255,0.5); font-weight: 600; }
.price-period[b-a4ik0w0ary] { font-size: 0.6875rem; color: rgba(255,255,255,0.35); }
.plan-limits[b-a4ik0w0ary] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.plan-limits li[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.7); }
.plan-limits .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1rem; color: rgba(255,255,255,0.3); }
.plan-trial[b-a4ik0w0ary] { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.75rem; color: #22c55e; font-weight: 600; }
.plan-check[b-a4ik0w0ary] { position: absolute; top: 0.75rem; right: 0.75rem; }
.plan-check .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; color: #f58524; font-size: 1.25rem; font-variation-settings: 'FILL' 1; }
[b-a4ik0w0ary] [dir="rtl"] .plan-check { right: auto; left: 0.75rem; }

/* Skip Trial */
.skip-trial[b-a4ik0w0ary] { text-align: center; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.08); }
.skip-trial-btn[b-a4ik0w0ary] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.2); border-radius: 9999px; color: rgba(255,255,255,0.7); font-size: 0.875rem; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: all 0.2s; }
.skip-trial-btn:hover[b-a4ik0w0ary] { border-color: #f58524; color: #f58524; }
.skip-trial-btn.active[b-a4ik0w0ary] { border-color: #f58524; color: #f58524; background: rgba(245,133,36,0.1); border-style: solid; }
.skip-trial-btn .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }
.skip-hint[b-a4ik0w0ary] { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-top: 0.75rem; }

/* Review */
.review-sections[b-a4ik0w0ary] { display: flex; flex-direction: column; gap: 1.25rem; }
.review-section[b-a4ik0w0ary] { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; padding: 1rem 1.25rem; }
.review-section h4[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; color: #f58524; margin: 0 0 0.75rem; }
.review-section h4 .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }
.review-grid[b-a4ik0w0ary] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem 1.5rem; }
.review-item[b-a4ik0w0ary] { display: flex; flex-direction: column; gap: 0.125rem; }
.review-item.full-width[b-a4ik0w0ary] { grid-column: 1 / -1; }
.review-label[b-a4ik0w0ary] { font-size: 0.6875rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
.review-value[b-a4ik0w0ary] { font-size: 0.875rem; color: #fff; word-break: break-word; }

/* Terms */
.terms-section[b-a4ik0w0ary] { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.checkbox-label[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; font-size: 0.8125rem; color: rgba(255,255,255,0.7); user-select: none; }
.checkbox-label input[type="checkbox"][b-a4ik0w0ary] { display: none; }
.checkmark[b-a4ik0w0ary] { width: 20px; height: 20px; border-radius: 0.375rem; border: 1.5px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.checkbox-label input:checked + .checkmark[b-a4ik0w0ary] { background: #f58524; border-color: #f58524; }
.checkbox-label input:checked + .checkmark[b-a4ik0w0ary]::after { content: ''; display: block; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -1px; }

/* Navigation Buttons */
.step-navigation[b-a4ik0w0ary] { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); }
.btn-back[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.375rem; padding: 0.75rem 1.25rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 9999px; color: rgba(255,255,255,0.7); font-size: 0.875rem; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: all 0.2s; }
.btn-back:hover[b-a4ik0w0ary] { border-color: rgba(255,255,255,0.3); color: #fff; }
.btn-back .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }
.btn-continue[b-a4ik0w0ary] { display: flex; align-items: center; gap: 0.375rem; padding: 0.75rem 1.75rem; background: #f58524; border: none; border-radius: 9999px; color: #fff; font-size: 0.9375rem; font-weight: 700; font-family: 'Manrope', sans-serif; cursor: pointer; transition: all 0.2s; box-shadow: 0 8px 20px rgba(245,133,36,0.2); }
.btn-continue:hover[b-a4ik0w0ary] { background: #e07620; transform: translateY(-1px); }
.btn-continue .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.125rem; }
.btn-submit[b-a4ik0w0ary] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 2rem; background: #f58524; border: none; border-radius: 9999px; color: #fff; font-size: 1rem; font-weight: 700; font-family: 'Manrope', sans-serif; cursor: pointer; transition: all 0.2s; box-shadow: 0 10px 25px rgba(245,133,36,0.25); }
.btn-submit:hover:not(:disabled)[b-a4ik0w0ary] { background: #e07620; }
.btn-submit:disabled[b-a4ik0w0ary] { opacity: 0.5; cursor: not-allowed; }
.btn-submit .material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-size: 1.25rem; }

/* Spinner */
.spinner[b-a4ik0w0ary] { width: 1.125rem; height: 1.125rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin-b-a4ik0w0ary 0.8s linear infinite; }
@keyframes spin-b-a4ik0w0ary { to { transform: rotate(360deg); } }

/* Material Icon base */
.material-icon[b-a4ik0w0ary] { font-family: 'Material Symbols Outlined' !important; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 1; display: inline-block; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400; }

/* Footer */
.onboard-footer[b-a4ik0w0ary] { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.75rem 2rem; font-size: 0.75rem; color: rgba(255,255,255,0.5); display: flex; justify-content: center; align-items: center; gap: 0.625rem; z-index: 100; background: transparent; }
.footer-link[b-a4ik0w0ary] { color: #f58524; text-decoration: none; }
.footer-link:hover[b-a4ik0w0ary] { color: #e07620; }
.footer-sep[b-a4ik0w0ary] { color: rgba(255,255,255,0.15); }

/* ========== RTL ========== */
[b-a4ik0w0ary] [dir="rtl"] { direction: rtl; text-align: right; }
[b-a4ik0w0ary] [dir="rtl"] h1, [b-a4ik0w0ary] [dir="rtl"] h2, [b-a4ik0w0ary] [dir="rtl"] h3, [b-a4ik0w0ary] [dir="rtl"] h4, [b-a4ik0w0ary] [dir="rtl"] p, [b-a4ik0w0ary] [dir="rtl"] a, [b-a4ik0w0ary] [dir="rtl"] span:not(.material-icon), [b-a4ik0w0ary] [dir="rtl"] button, [b-a4ik0w0ary] [dir="rtl"] label, [b-a4ik0w0ary] [dir="rtl"] input, [b-a4ik0w0ary] [dir="rtl"] select { font-family: 'IBM Plex Sans Arabic', 'Manrope', sans-serif !important; }
[b-a4ik0w0ary] [dir="rtl"] .material-icon { font-family: 'Material Symbols Outlined' !important; }
[b-a4ik0w0ary] [dir="rtl"] input[type="email"], [b-a4ik0w0ary] [dir="rtl"] input[type="tel"], [b-a4ik0w0ary] [dir="rtl"] input[type="password"] { direction: ltr; text-align: left; }
[b-a4ik0w0ary] [dir="rtl"] .search-result-item { text-align: right; }
[b-a4ik0w0ary] [dir="rtl"] .save-badge { margin-left: 0; margin-right: 0.375rem; }

/* ========== Responsive ========== */
@media (max-width: 640px) {
    .onboard-page[b-a4ik0w0ary] { padding: 4.5rem 0.75rem 4rem; }
    .glass-panel[b-a4ik0w0ary] { padding: 1.5rem 1rem; }
    .form-header h1[b-a4ik0w0ary] { font-size: 1.25rem; }
    .hours-row[b-a4ik0w0ary] { flex-wrap: wrap; gap: 0.375rem; }
    .day-toggle[b-a4ik0w0ary] { min-width: 120px; }
    .time-inputs input[type="time"][b-a4ik0w0ary] { width: 95px; }
    .review-grid[b-a4ik0w0ary] { grid-template-columns: 1fr; }
    .btn-continue[b-a4ik0w0ary], .btn-submit[b-a4ik0w0ary] { padding: 0.75rem 1.25rem; font-size: 0.875rem; }
}

@media (min-width: 1024px) {
    .glass-panel[b-a4ik0w0ary] { padding: 2.5rem; }
    .form-header h1[b-a4ik0w0ary] { font-size: 1.75rem; }
}
/* _content/QrBiteHub.Web/Components/Pages/RegisterSuccess.razor.rz.scp.css */
/* RegisterSuccess Page */
.success-page[b-92uf40tw6q] { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 3rem 1rem; font-family: 'Manrope', sans-serif; color: #fff; background: #0a0a0a; }
.bg-overlay[b-92uf40tw6q] { position: fixed; inset: 0; background: #0a0a0a; z-index: -2; }
.glow-bottom[b-92uf40tw6q] { position: fixed; bottom: -10%; right: -5%; width: 500px; height: 500px; background: rgba(245,133,36,0.15); filter: blur(120px); border-radius: 50%; z-index: -1; pointer-events: none; }
.glow-top[b-92uf40tw6q] { position: fixed; top: -10%; left: -5%; width: 400px; height: 400px; background: rgba(245,133,36,0.08); filter: blur(100px); border-radius: 50%; z-index: -1; pointer-events: none; }

/* Header */
.success-header[b-92uf40tw6q] { position: absolute; top: 0; left: 0; right: 0; padding: 1.5rem; z-index: 10; }
.header-container[b-92uf40tw6q] { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; }
.nav-brand[b-92uf40tw6q] { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand-logo-img[b-92uf40tw6q] { width: 2rem; height: 2rem; object-fit: contain; }
.brand-name[b-92uf40tw6q] { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.brand-qr[b-92uf40tw6q] { color: #f58524; }

/* Card */
.success-main[b-92uf40tw6q] { width: 100%; max-width: 560px; z-index: 5; }
.success-card[b-92uf40tw6q] { background: rgba(30,30,30,0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; padding: 3rem 2rem; text-align: center; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.success-card h1[b-92uf40tw6q] { font-size: 2rem; font-weight: 800; margin: 1.5rem 0 0.5rem; letter-spacing: -0.02em; }
.success-subtitle[b-92uf40tw6q] { color: rgba(255,255,255,0.7); font-size: 1rem; margin-bottom: 2rem; }

/* Checkmark Animation */
.check-circle[b-92uf40tw6q] { width: 80px; height: 80px; margin: 0 auto; }
.checkmark-svg[b-92uf40tw6q] { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 2; stroke: #22c55e; stroke-miterlimit: 10; animation: fill-b-92uf40tw6q 0.4s ease-in-out 0.4s forwards, scale-b-92uf40tw6q 0.3s ease-in-out 0.9s both; }
.checkmark-circle[b-92uf40tw6q] { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #22c55e; fill: none; animation: stroke-b-92uf40tw6q 0.6s cubic-bezier(0.65,0,0.45,1) forwards; }
.checkmark-check[b-92uf40tw6q] { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; stroke-width: 3; stroke-linecap: round; animation: stroke-b-92uf40tw6q 0.3s cubic-bezier(0.65,0,0.45,1) 0.8s forwards; }

@keyframes stroke-b-92uf40tw6q { 100% { stroke-dashoffset: 0; } }
@keyframes scale-b-92uf40tw6q { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1,1.1,1); } }
@keyframes fill-b-92uf40tw6q { 100% { box-shadow: inset 0 0 0 30px transparent; } }

/* Next Steps */
.next-steps[b-92uf40tw6q] { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; text-align: left; }
.step-item[b-92uf40tw6q] { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(255,255,255,0.05); border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.08); }
.step-icon[b-92uf40tw6q] { width: 40px; height: 40px; border-radius: 10px; background: rgba(245,133,36,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-icon .material-icon[b-92uf40tw6q] { font-family: 'Material Symbols Outlined' !important; color: #f58524; font-size: 1.25rem; }
.step-text[b-92uf40tw6q] { display: flex; flex-direction: column; gap: 0.25rem; }
.step-text strong[b-92uf40tw6q] { font-size: 0.9375rem; font-weight: 600; color: #fff; }
.step-text span[b-92uf40tw6q] { font-size: 0.8125rem; color: rgba(255,255,255,0.6); }

/* RTL */
[b-92uf40tw6q] [dir="rtl"] .next-steps { text-align: right; }

/* Login Button */
.btn-login[b-92uf40tw6q] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2.5rem; background: #f58524; border: none; border-radius: 9999px; color: #fff; font-size: 1.0625rem; font-weight: 700; font-family: 'Manrope', sans-serif; cursor: pointer; text-decoration: none; transition: all 0.2s; box-shadow: 0 10px 25px rgba(245,133,36,0.25); }
.btn-login:hover[b-92uf40tw6q] { background: #e07620; transform: translateY(-1px); }
.btn-login .material-icon[b-92uf40tw6q] { font-family: 'Material Symbols Outlined' !important; font-size: 1.25rem; }

/* Trial Note */
.trial-note[b-92uf40tw6q] { margin-top: 1.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.5); }

/* Footer */
.success-footer[b-92uf40tw6q] { position: fixed; bottom: 0; left: 0; right: 0; padding: 1rem 2rem; font-size: 0.75rem; color: rgba(255,255,255,0.5); display: flex; justify-content: center; align-items: center; gap: 0.625rem; }
.footer-link[b-92uf40tw6q] { color: #f58524; text-decoration: none; }
.footer-link:hover[b-92uf40tw6q] { color: #e07620; }
.footer-sep[b-92uf40tw6q] { color: rgba(255,255,255,0.15); }

/* Material icon base */
.material-icon[b-92uf40tw6q] { font-family: 'Material Symbols Outlined' !important; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 1; display: inline-block; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400; }

/* Mobile */
@media (max-width: 640px) {
    .success-page[b-92uf40tw6q] { padding: 5rem 1rem 3rem; }
    .success-card[b-92uf40tw6q] { padding: 2rem 1.5rem; }
    .success-card h1[b-92uf40tw6q] { font-size: 1.5rem; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Admin/AuthSettings.razor.rz.scp.css */
/* Auth Settings Page */
.auth-settings-page[b-32qz2h6vfe] { padding: 1.5rem; max-width: 1000px; margin: 0 auto; }

/* Page Header */
.page-header[b-32qz2h6vfe] { margin-bottom: 1.5rem; }
.page-header h1[b-32qz2h6vfe] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.page-header .subtitle[b-32qz2h6vfe] { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Alerts */
.alert[b-32qz2h6vfe] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 1rem; animation: alertIn-b-32qz2h6vfe 0.3s ease; }
.alert.success[b-32qz2h6vfe] { background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); }
.alert.error[b-32qz2h6vfe] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }
.alert svg[b-32qz2h6vfe] { flex-shrink: 0; }
@keyframes alertIn-b-32qz2h6vfe { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Info Cards (Always-on features) */
.info-cards[b-32qz2h6vfe] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.info-card[b-32qz2h6vfe] { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.info-card svg[b-32qz2h6vfe] { flex-shrink: 0; color: var(--text-muted); }
.info-card div[b-32qz2h6vfe] { flex: 1; min-width: 0; }
.info-card strong[b-32qz2h6vfe] { display: block; font-size: 0.875rem; color: var(--text-primary); margin-bottom: 0.15rem; }
.info-card span[b-32qz2h6vfe] { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.badge[b-32qz2h6vfe] { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.badge.always-on[b-32qz2h6vfe] { background: var(--success-bg); color: var(--success-text); }

/* Settings Section */
.settings-section[b-32qz2h6vfe] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow-card); }

/* Section Header */
.section-header[b-32qz2h6vfe] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; gap: 1rem; }
.section-title[b-32qz2h6vfe] { display: flex; align-items: flex-start; gap: 0.75rem; flex: 1; min-width: 0; }
.section-title > svg[b-32qz2h6vfe] { flex-shrink: 0; color: var(--text-muted); margin-top: 2px; }
.section-title h2[b-32qz2h6vfe] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.section-title p[b-32qz2h6vfe] { font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0 0; line-height: 1.4; }

/* Toggle Switch */
.toggle-switch[b-32qz2h6vfe] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; flex-shrink: 0; user-select: none; }
.toggle-switch input[b-32qz2h6vfe] { display: none; }
.toggle-slider[b-32qz2h6vfe] { position: relative; width: 44px; height: 24px; background: var(--border-hover); border-radius: 12px; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
.toggle-slider[b-32qz2h6vfe]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-switch input:checked + .toggle-slider[b-32qz2h6vfe] { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider[b-32qz2h6vfe]::after { transform: translateX(20px); }
.toggle-label[b-32qz2h6vfe] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); min-width: 60px; }

/* Section Body */
.section-body[b-32qz2h6vfe] { padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; animation: sectionExpand-b-32qz2h6vfe 0.3s ease; }
@keyframes sectionExpand-b-32qz2h6vfe { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 600px; } }

/* Form Grid */
.form-grid[b-32qz2h6vfe] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-grid.three-col[b-32qz2h6vfe] { grid-template-columns: 1fr 1fr 1fr; }
.form-group[b-32qz2h6vfe] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-32qz2h6vfe] { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }

/* Inputs */
.input[b-32qz2h6vfe] { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.input:focus[b-32qz2h6vfe] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.input[b-32qz2h6vfe]::placeholder { color: var(--text-muted); }
select.input[b-32qz2h6vfe] { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; cursor: pointer; }
select.input option[b-32qz2h6vfe] { background: var(--bg-card); }
.textarea-sm[b-32qz2h6vfe] { resize: vertical; min-height: 72px; font-family: monospace; font-size: 0.8rem; }

/* Test SMS Action */
.test-action[b-32qz2h6vfe] { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.5rem; }
.test-result[b-32qz2h6vfe] { font-size: 0.8rem; font-weight: 500; }
.test-result.success[b-32qz2h6vfe] { color: var(--success-text); }
.test-result.error[b-32qz2h6vfe] { color: var(--danger-text); }

/* Setup Hint */
.setup-hint[b-32qz2h6vfe] { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.5rem; }
.setup-hint svg[b-32qz2h6vfe] { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* Buttons */
.btn[b-32qz2h6vfe] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn:disabled[b-32qz2h6vfe] { opacity: 0.6; cursor: not-allowed; }
.btn.cta[b-32qz2h6vfe] { background: var(--accent); color: #fff; }
.btn.cta:hover:not(:disabled)[b-32qz2h6vfe] { background: var(--accent-hover); }
.btn.secondary[b-32qz2h6vfe] { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); }
.btn.secondary:hover:not(:disabled)[b-32qz2h6vfe] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* Button Spinner */
.btn-spinner[b-32qz2h6vfe] { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin-b-32qz2h6vfe 0.6s linear infinite; }
.btn.secondary .btn-spinner[b-32qz2h6vfe] { border-color: var(--border); border-top-color: var(--accent); }
@keyframes spin-b-32qz2h6vfe { to { transform: rotate(360deg); } }

/* Page Actions (Save bar) */
.page-actions[b-32qz2h6vfe] { display: flex; justify-content: flex-end; padding-top: 0.5rem; }

/* Access Denied */
.access-denied[b-32qz2h6vfe] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 4rem 2rem; text-align: center; color: var(--text-muted); }
.access-denied svg[b-32qz2h6vfe] { opacity: 0.4; }
.access-denied h2[b-32qz2h6vfe] { color: var(--text-primary); font-size: 1.25rem; margin: 0; }
.access-denied p[b-32qz2h6vfe] { font-size: 0.9rem; max-width: 400px; margin: 0; }

/* Loading State */
.loading-state[b-32qz2h6vfe] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 4rem 2rem; color: var(--text-muted); }
.spinner[b-32qz2h6vfe] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-32qz2h6vfe 0.8s linear infinite; }

/* Responsive */
@media (max-width: 768px) {
    .auth-settings-page[b-32qz2h6vfe] { padding: 1rem; }
    .info-cards[b-32qz2h6vfe] { grid-template-columns: 1fr; }
    .form-grid[b-32qz2h6vfe] { grid-template-columns: 1fr; }
    .form-grid.three-col[b-32qz2h6vfe] { grid-template-columns: 1fr; }
    .section-header[b-32qz2h6vfe] { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .toggle-switch[b-32qz2h6vfe] { align-self: flex-start; }
    .test-action[b-32qz2h6vfe] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
    .page-actions[b-32qz2h6vfe] { justify-content: stretch; }
    .page-actions .btn[b-32qz2h6vfe] { width: 100%; justify-content: center; }
}

/* RTL Support */
:global([dir="rtl"]) .toggle-slider[b-32qz2h6vfe]::after { left: auto; right: 3px; }
:global([dir="rtl"]) .toggle-switch input:checked + .toggle-slider[b-32qz2h6vfe]::after { transform: translateX(-20px); }
:global([dir="rtl"]) select.input[b-32qz2h6vfe] { background-position: left 0.75rem center; padding-right: 0.75rem; padding-left: 2rem; }
:global([dir="rtl"]) .setup-hint[b-32qz2h6vfe] { flex-direction: row-reverse; text-align: right; }
/* _content/QrBiteHub.Web/Components/Pages/Staff/Admin/Currencies.razor.rz.scp.css */
/* Currencies Admin Page */
.currencies-page[b-j0s58o1vkd] { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

.page-header[b-j0s58o1vkd] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.header-text h1[b-j0s58o1vkd] { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem; }
.header-text p[b-j0s58o1vkd] { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* KPI Cards */
.kpi-row[b-j0s58o1vkd] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card[b-j0s58o1vkd] { display: flex; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; }
.kpi-icon[b-j0s58o1vkd] { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon.total[b-j0s58o1vkd] { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.kpi-icon.active[b-j0s58o1vkd] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.kpi-icon.decimals[b-j0s58o1vkd] { background: rgba(245, 133, 36, 0.15); color: #f58524; }
.kpi-info[b-j0s58o1vkd] { display: flex; flex-direction: column; }
.kpi-value[b-j0s58o1vkd] { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.kpi-label[b-j0s58o1vkd] { font-size: 0.75rem; color: var(--text-muted); }

/* Table Card */
.table-card[b-j0s58o1vkd] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.data-table[b-j0s58o1vkd] { width: 100%; border-collapse: collapse; }
.data-table th[b-j0s58o1vkd] { text-align: left; padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
.data-table td[b-j0s58o1vkd] { padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.data-table tr:last-child td[b-j0s58o1vkd] { border-bottom: none; }
.data-table tr:hover[b-j0s58o1vkd] { background: var(--bg-hover); }
.data-table tr.inactive[b-j0s58o1vkd] { opacity: 0.5; }

.code-badge[b-j0s58o1vkd] { font-weight: 700; color: var(--accent); background: var(--accent-subtle); padding: 3px 8px; border-radius: 6px; font-size: 0.8rem; letter-spacing: 0.05em; }
.dp-badge[b-j0s58o1vkd] { font-weight: 600; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
.dp-badge.dp-2[b-j0s58o1vkd] { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
.dp-badge.dp-3[b-j0s58o1vkd] { background: rgba(245, 133, 36, 0.12); color: #f58524; }
.dp-badge.dp-0[b-j0s58o1vkd] { background: rgba(156, 163, 175, 0.12); color: var(--text-muted); }

.status-tag[b-j0s58o1vkd] { font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.status-tag.active[b-j0s58o1vkd] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-tag.inactive[b-j0s58o1vkd] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.row-actions[b-j0s58o1vkd] { display: flex; gap: 4px; justify-content: flex-end; }

/* Empty State */
.empty-state[b-j0s58o1vkd] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg[b-j0s58o1vkd] { margin-bottom: 1rem; opacity: 0.4; }
.empty-state h3[b-j0s58o1vkd] { font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 0.5rem; }
.empty-state p[b-j0s58o1vkd] { font-size: 0.85rem; margin: 0; }

/* Access Denied */
.access-denied[b-j0s58o1vkd] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.access-denied svg[b-j0s58o1vkd] { margin-bottom: 1rem; opacity: 0.4; }
.access-denied h2[b-j0s58o1vkd] { font-size: 1.2rem; color: var(--text-secondary); margin: 0 0 0.5rem; }
.access-denied p[b-j0s58o1vkd] { font-size: 0.85rem; margin: 0 0 1.5rem; }

/* Modal */
.modal-overlay[b-j0s58o1vkd] { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; backdrop-filter: blur(4px); }
.modal[b-j0s58o1vkd] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; z-index: 1001; }
.modal-header[b-j0s58o1vkd] { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-header h2[b-j0s58o1vkd] { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.close-btn[b-j0s58o1vkd] { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.close-btn:hover[b-j0s58o1vkd] { color: var(--text-primary); background: var(--bg-hover); }
.modal-body[b-j0s58o1vkd] { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-footer[b-j0s58o1vkd] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }

/* Confirm Modal */
.confirm-modal[b-j0s58o1vkd] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; text-align: center; max-width: 400px; width: 90%; z-index: 1001; }
.confirm-icon[b-j0s58o1vkd] { margin-bottom: 1rem; color: #f59e0b; }
.confirm-modal h3[b-j0s58o1vkd] { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.confirm-modal p[b-j0s58o1vkd] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1.5rem; }
.confirm-actions[b-j0s58o1vkd] { display: flex; justify-content: center; gap: 0.75rem; }

/* Form */
.form-group[b-j0s58o1vkd] { display: flex; flex-direction: column; gap: 6px; }
.form-group label[b-j0s58o1vkd] { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }
.form-hint[b-j0s58o1vkd] { font-size: 0.7rem; color: var(--text-muted); }
.form-row[b-j0s58o1vkd] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.error-banner[b-j0s58o1vkd] { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; }
.checkbox-label[b-j0s58o1vkd] { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-primary); padding-top: 1.5rem; }

/* Buttons */
.btn[b-j0s58o1vkd] { padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-j0s58o1vkd] { background: var(--bg-hover); }
.btn.cta[b-j0s58o1vkd] { background: #f58524; border-color: #f58524; color: white; }
.btn.cta:hover[b-j0s58o1vkd] { background: #e07520; }
.btn.cta:disabled[b-j0s58o1vkd] { opacity: 0.6; cursor: not-allowed; }
.btn.danger[b-j0s58o1vkd] { background: #ef4444; border-color: #ef4444; color: white; }
.btn.danger:hover[b-j0s58o1vkd] { background: #dc2626; }
.btn.danger:disabled[b-j0s58o1vkd] { opacity: 0.6; cursor: not-allowed; }
.icon-btn[b-j0s58o1vkd] { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover[b-j0s58o1vkd] { color: var(--text-primary); background: var(--bg-hover); }
.icon-btn.danger:hover[b-j0s58o1vkd] { color: #ef4444; }
.input[b-j0s58o1vkd] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; color: var(--text-primary); width: 100%; }
.input:focus[b-j0s58o1vkd] { outline: none; border-color: var(--accent); }
.input:disabled[b-j0s58o1vkd] { opacity: 0.5; cursor: not-allowed; }

/* Toast */
.toast[b-j0s58o1vkd] { position: fixed; bottom: 2rem; right: 2rem; background: #10b981; color: white; padding: 0.75rem 1.25rem; border-radius: 10px; font-size: 0.85rem; font-weight: 500; z-index: 2000; animation: slideUp 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.toast.error[b-j0s58o1vkd] { background: #ef4444; }

@@keyframes slideUp {
    from[b-j0s58o1vkd] { transform: translateY(20px); opacity: 0; }
    to[b-j0s58o1vkd] { transform: translateY(0); opacity: 1; }
}

@@media (max-width: 768px) {
    .currencies-page[b-j0s58o1vkd] { padding: 1rem; }
    .page-header[b-j0s58o1vkd] { flex-direction: column; }
    .kpi-row[b-j0s58o1vkd] { grid-template-columns: 1fr; }
    .form-row[b-j0s58o1vkd] { grid-template-columns: 1fr; }
    .data-table[b-j0s58o1vkd] { font-size: 0.8rem; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Admin/PlatformPayment.razor.rz.scp.css */
/* Platform Payment Settings Page */
.platform-payment-page[b-k3f4f6lyot] { padding: 1.5rem; max-width: 1000px; margin: 0 auto; }

/* Page Header */
.page-header[b-k3f4f6lyot] { margin-bottom: 1.5rem; }
.page-header h1[b-k3f4f6lyot] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.page-header .subtitle[b-k3f4f6lyot] { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Alerts */
.alert[b-k3f4f6lyot] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 1rem; animation: alertIn-b-k3f4f6lyot 0.3s ease; }
.alert.success[b-k3f4f6lyot] { background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); }
.alert.error[b-k3f4f6lyot] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }
.alert.info[b-k3f4f6lyot] { background: var(--accent-subtle); border: 1px solid var(--accent); color: var(--accent); }
.alert svg[b-k3f4f6lyot] { flex-shrink: 0; }
@keyframes alertIn-b-k3f4f6lyot { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Settings Section */
.settings-section[b-k3f4f6lyot] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow-card); }

/* Section Header */
.section-header[b-k3f4f6lyot] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; gap: 1rem; }
.section-title[b-k3f4f6lyot] { display: flex; align-items: flex-start; gap: 0.75rem; flex: 1; min-width: 0; }
.section-title > svg[b-k3f4f6lyot] { flex-shrink: 0; color: var(--text-muted); margin-top: 2px; }
.section-title h2[b-k3f4f6lyot] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.section-title p[b-k3f4f6lyot] { font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0 0; line-height: 1.4; }

/* Toggle Switch */
.toggle-switch[b-k3f4f6lyot] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; flex-shrink: 0; user-select: none; }
.toggle-switch input[b-k3f4f6lyot] { display: none; }
.toggle-slider[b-k3f4f6lyot] { position: relative; width: 44px; height: 24px; background: var(--border-hover); border-radius: 12px; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }
.toggle-slider[b-k3f4f6lyot]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-switch input:checked + .toggle-slider[b-k3f4f6lyot] { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider[b-k3f4f6lyot]::after { transform: translateX(20px); }
.toggle-label[b-k3f4f6lyot] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); min-width: 60px; }

/* Section Body */
.section-body[b-k3f4f6lyot] { padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }

/* Form Grid */
.form-grid[b-k3f4f6lyot] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group[b-k3f4f6lyot] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-k3f4f6lyot] { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }

/* Inputs */
.input[b-k3f4f6lyot] { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.input:focus[b-k3f4f6lyot] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.input[b-k3f4f6lyot]::placeholder { color: var(--text-muted); }
select.input[b-k3f4f6lyot] { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; cursor: pointer; }
select.input option[b-k3f4f6lyot] { background: var(--bg-card); }

/* Mode Row */
.mode-row[b-k3f4f6lyot] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Test Action */
.test-action[b-k3f4f6lyot] { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.test-result[b-k3f4f6lyot] { font-size: 0.8rem; font-weight: 500; }
.test-result.success[b-k3f4f6lyot] { color: var(--success-text); }
.test-result.error[b-k3f4f6lyot] { color: var(--danger-text); }

/* Setup Hint */
.setup-hint[b-k3f4f6lyot] { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.5rem; }
.setup-hint svg[b-k3f4f6lyot] { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

/* Stat Grid */
.stat-grid[b-k3f4f6lyot] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-card[b-k3f4f6lyot] { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; }
.stat-card.success[b-k3f4f6lyot] { border-color: var(--success); }
.stat-card.danger[b-k3f4f6lyot] { border-color: var(--danger); }
.stat-value[b-k3f4f6lyot] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.stat-card.success .stat-value[b-k3f4f6lyot] { color: var(--success-text); }
.stat-card.danger .stat-value[b-k3f4f6lyot] { color: var(--danger-text); }
.stat-label[b-k3f4f6lyot] { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Buttons */
.btn[b-k3f4f6lyot] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn:disabled[b-k3f4f6lyot] { opacity: 0.6; cursor: not-allowed; }
.btn.cta[b-k3f4f6lyot] { background: var(--accent); color: #fff; }
.btn.cta:hover:not(:disabled)[b-k3f4f6lyot] { background: var(--accent-hover); }
.btn.secondary[b-k3f4f6lyot] { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); }
.btn.secondary:hover:not(:disabled)[b-k3f4f6lyot] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* Button Spinner */
.btn-spinner[b-k3f4f6lyot] { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin-b-k3f4f6lyot 0.6s linear infinite; }
.btn.secondary .btn-spinner[b-k3f4f6lyot] { border-color: var(--border); border-top-color: var(--accent); }
@keyframes spin-b-k3f4f6lyot { to { transform: rotate(360deg); } }

/* Page Actions */
.page-actions[b-k3f4f6lyot] { display: flex; justify-content: flex-end; padding-top: 0.5rem; }

/* Access Denied */
.access-denied[b-k3f4f6lyot] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 4rem 2rem; text-align: center; color: var(--text-muted); }
.access-denied svg[b-k3f4f6lyot] { opacity: 0.4; }
.access-denied h2[b-k3f4f6lyot] { color: var(--text-primary); font-size: 1.25rem; margin: 0; }
.access-denied p[b-k3f4f6lyot] { font-size: 0.9rem; max-width: 400px; margin: 0; }

/* Loading State */
.loading-state[b-k3f4f6lyot] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 4rem 2rem; color: var(--text-muted); }
.spinner[b-k3f4f6lyot] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-k3f4f6lyot 0.8s linear infinite; }

/* Responsive */
@media (max-width: 768px) {
    .platform-payment-page[b-k3f4f6lyot] { padding: 1rem; }
    .form-grid[b-k3f4f6lyot] { grid-template-columns: 1fr; }
    .stat-grid[b-k3f4f6lyot] { grid-template-columns: repeat(2, 1fr); }
    .section-header[b-k3f4f6lyot] { flex-direction: column; align-items: flex-start; }
    .mode-row[b-k3f4f6lyot] { flex-direction: column; align-items: flex-start; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Admin/RestaurantRankings.razor.rz.scp.css */
/* Rankings Page Layout */
.rankings-page[b-9bdius0z28] { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
.loading-state[b-9bdius0z28] { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 4rem; color: var(--text-muted); }
.spinner[b-9bdius0z28] { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-9bdius0z28 0.6s linear infinite; }
.spinner-sm[b-9bdius0z28] { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-9bdius0z28 0.6s linear infinite; display: inline-block; }
@keyframes spin-b-9bdius0z28 { to { transform: rotate(360deg); } }

/* Header */
.page-header[b-9bdius0z28] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.header-left h1[b-9bdius0z28] { display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.header-left h1 svg[b-9bdius0z28] { color: var(--accent); }
.header-subtitle[b-9bdius0z28] { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; display: block; }
.header-actions[b-9bdius0z28] { display: flex; gap: 0.5rem; }

/* Buttons */
.btn[b-9bdius0z28] { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.15s; }
.btn:hover[b-9bdius0z28] { background: var(--bg-hover); border-color: var(--border-hover); }
.btn.cta[b-9bdius0z28] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.btn.cta:hover[b-9bdius0z28] { background: var(--accent-hover); }
.btn.cta:disabled[b-9bdius0z28] { opacity: 0.5; cursor: not-allowed; }
.btn.danger[b-9bdius0z28] { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover[b-9bdius0z28] { background: var(--danger); filter: brightness(0.9); }
.btn.danger:disabled[b-9bdius0z28] { opacity: 0.5; cursor: not-allowed; }
.btn-icon[b-9bdius0z28] { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.btn-icon:hover[b-9bdius0z28] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.btn-icon:disabled[b-9bdius0z28] { opacity: 0.3; cursor: not-allowed; }
.btn-icon.danger:hover[b-9bdius0z28] { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-icon-sm[b-9bdius0z28] { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; }
.btn-icon-sm:hover[b-9bdius0z28] { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon-sm:disabled[b-9bdius0z28] { opacity: 0.3; cursor: not-allowed; }
.btn-icon-sm.danger:hover[b-9bdius0z28] { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Alerts */
.alert[b-9bdius0z28] { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.alert-error[b-9bdius0z28] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }
.alert-success[b-9bdius0z28] { background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); }
.alert-close[b-9bdius0z28] { background: none; border: none; color: inherit; cursor: pointer; margin-left: auto; font-size: 1.2rem; line-height: 1; padding: 0 0.25rem; }

/* Ranking Row Cards */
.rows-container[b-9bdius0z28] { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.ranking-row-card[b-9bdius0z28] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ranking-row-card.inactive[b-9bdius0z28] { opacity: 0.6; }
.row-header[b-9bdius0z28] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.row-info[b-9bdius0z28] { display: flex; flex-direction: column; gap: 0.35rem; }
.row-title[b-9bdius0z28] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.row-name[b-9bdius0z28] { font-weight: 600; font-size: 1.1rem; color: var(--text-primary); }
.row-description[b-9bdius0z28] { font-size: 0.8rem; color: var(--text-muted); }
.badge[b-9bdius0z28] { padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 500; }
.badge-inactive[b-9bdius0z28] { background: var(--warning-bg); color: var(--warning-text); }
.badge-active[b-9bdius0z28] { background: var(--success-bg); color: var(--success-text); }
.capacity-badge[b-9bdius0z28] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; padding: 0.25rem 0.6rem; border-radius: 6px; }
.capacity-badge.full[b-9bdius0z28] { background: var(--accent-subtle); color: var(--accent); }
.capacity-badge.available[b-9bdius0z28] { background: var(--success-bg); color: var(--success-text); }
.row-actions[b-9bdius0z28] { display: flex; gap: 0.35rem; }

/* Row Body */
.row-body[b-9bdius0z28] { padding: 1rem 1.25rem; }
.restaurant-strip[b-9bdius0z28] { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.restaurant-mini-card[b-9bdius0z28] { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; display: flex; align-items: center; gap: 0.5rem; min-width: 180px; max-width: 280px; transition: border-color 0.15s; }
.restaurant-mini-card:hover[b-9bdius0z28] { border-color: var(--border-hover); }
.mini-card-content[b-9bdius0z28] { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.mini-card-logo[b-9bdius0z28] { width: 32px; height: 32px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.mini-card-logo img[b-9bdius0z28] { width: 100%; height: 100%; object-fit: cover; }
.logo-placeholder[b-9bdius0z28] { width: 32px; height: 32px; border-radius: 6px; background: var(--bg-deep); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--accent); font-size: 0.85rem; flex-shrink: 0; }
.logo-placeholder.sm[b-9bdius0z28] { width: 28px; height: 28px; font-size: 0.75rem; }
.mini-card-info[b-9bdius0z28] { display: flex; flex-direction: column; min-width: 0; }
.mini-card-name[b-9bdius0z28] { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card-position[b-9bdius0z28] { font-size: 0.7rem; color: var(--text-muted); }
.mini-card-actions[b-9bdius0z28] { display: flex; gap: 0.2rem; flex-shrink: 0; }
.empty-row[b-9bdius0z28] { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem 0; }
.btn-add-restaurant[b-9bdius0z28] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 6px; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; transition: all 0.15s; }
.btn-add-restaurant:hover[b-9bdius0z28] { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }

/* Empty State */
.empty-state[b-9bdius0z28] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg[b-9bdius0z28] { color: var(--text-muted); margin-bottom: 1rem; }
.empty-state h3[b-9bdius0z28] { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 0.5rem; }
.empty-state p[b-9bdius0z28] { font-size: 0.85rem; }

/* Unranked Section */
.unranked-section[b-9bdius0z28] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.unranked-header[b-9bdius0z28] { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.25rem; background: none; border: none; color: var(--text-secondary); cursor: pointer; transition: background 0.15s; }
.unranked-header:hover[b-9bdius0z28] { background: var(--bg-hover); }
.unranked-title[b-9bdius0z28] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; }
.unranked-count[b-9bdius0z28] { color: var(--text-muted); font-weight: 400; }
.chevron[b-9bdius0z28] { transition: transform 0.2s; }
.chevron.open[b-9bdius0z28] { transform: rotate(180deg); }
.unranked-list[b-9bdius0z28] { padding: 0 1.25rem 1rem; }
.unranked-item[b-9bdius0z28] { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--border); }
.unranked-item:last-child[b-9bdius0z28] { border-bottom: none; }
.unranked-item-info[b-9bdius0z28] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.unranked-logo[b-9bdius0z28] { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.empty-text[b-9bdius0z28] { color: var(--text-muted); font-size: 0.8rem; padding: 0.5rem 0; margin: 0; }

/* Modal */
.modal-backdrop[b-9bdius0z28] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; }
.modal[b-9bdius0z28] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 90%; max-width: 500px; z-index: 1001; max-height: 85vh; display: flex; flex-direction: column; }
.modal-header[b-9bdius0z28] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-header h3[b-9bdius0z28] { margin: 0; color: var(--text-primary); font-size: 1rem; }
.modal-close[b-9bdius0z28] { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 0 0.25rem; line-height: 1; }
.modal-close:hover[b-9bdius0z28] { color: var(--text-primary); }
.modal-body[b-9bdius0z28] { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-footer[b-9bdius0z28] { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }

/* Form */
.form-group[b-9bdius0z28] { margin-bottom: 1rem; }
.form-group label[b-9bdius0z28] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.35rem; font-weight: 500; }
.form-group input[type="text"][b-9bdius0z28], .form-group input[type="number"][b-9bdius0z28] { width: 100%; padding: 0.6rem 0.75rem; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font-size: 0.85rem; outline: none; transition: border-color 0.15s; box-sizing: border-box; }
.form-group input:focus[b-9bdius0z28] { border-color: var(--accent); }
.form-row[b-9bdius0z28] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checkbox-label[b-9bdius0z28] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: var(--text-secondary); font-size: 0.85rem !important; }
.checkbox-label input[type="checkbox"][b-9bdius0z28] { accent-color: var(--accent); width: 16px; height: 16px; }
.search-input[b-9bdius0z28] { width: 100%; padding: 0.6rem 0.75rem; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font-size: 0.85rem; outline: none; box-sizing: border-box; }
.search-input:focus[b-9bdius0z28] { border-color: var(--accent); }

/* Assign List */
.assign-list[b-9bdius0z28] { max-height: 300px; overflow-y: auto; margin-top: 0.5rem; }
.assign-item[b-9bdius0z28] { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.75rem; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; transition: background 0.15s; }
.assign-item:hover[b-9bdius0z28] { background: var(--bg-hover); }
.assign-item:last-child[b-9bdius0z28] { border-bottom: none; }
.assign-item-info[b-9bdius0z28] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.assign-logo[b-9bdius0z28] { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.assign-item svg[b-9bdius0z28] { color: var(--accent); opacity: 0; transition: opacity 0.15s; }
.assign-item:hover svg[b-9bdius0z28] { opacity: 1; }

/* Confirm Modal */
.confirm-modal[b-9bdius0z28] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; width: 90%; max-width: 400px; z-index: 1001; text-align: center; }
.confirm-icon[b-9bdius0z28] { color: var(--warning); margin-bottom: 1rem; }
.confirm-modal h3[b-9bdius0z28] { color: var(--text-primary); margin-bottom: 0.5rem; }
.confirm-modal p[b-9bdius0z28] { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1.5rem; }
.confirm-actions[b-9bdius0z28] { display: flex; justify-content: center; gap: 0.75rem; }

/* Access Denied */
.access-denied[b-9bdius0z28] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.access-denied svg[b-9bdius0z28] { color: var(--danger); margin-bottom: 1rem; }
.access-denied h2[b-9bdius0z28] { color: var(--text-primary); margin-bottom: 0.5rem; }
.access-denied p[b-9bdius0z28] { margin-bottom: 1.5rem; }
.access-denied .btn.cta[b-9bdius0z28] { text-decoration: none; }

/* Responsive */
@media (max-width: 768px) {
    .rankings-page[b-9bdius0z28] { padding: 1rem; }
    .page-header[b-9bdius0z28] { flex-direction: column; align-items: flex-start; }
    .restaurant-strip[b-9bdius0z28] { flex-direction: column; }
    .restaurant-mini-card[b-9bdius0z28] { max-width: 100%; }
    .form-row[b-9bdius0z28] { grid-template-columns: 1fr; }
    .row-header[b-9bdius0z28] { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .row-actions[b-9bdius0z28] { align-self: flex-end; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Admin/SubscriptionPlans.razor.rz.scp.css */
/* Subscription Plans Page */
.subplans-page[b-1isurs2b7e] { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

/* Access Denied */
.access-denied[b-1isurs2b7e] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.access-denied svg[b-1isurs2b7e] { margin-bottom: 1rem; opacity: 0.5; }
.access-denied h2[b-1isurs2b7e] { color: var(--text-primary); font-size: 1.25rem; margin: 0 0 0.5rem; }
.access-denied p[b-1isurs2b7e] { font-size: 0.875rem; margin: 0 0 1.5rem; }
.access-denied .btn.cta[b-1isurs2b7e] { display: inline-block; background: var(--accent); color: #fff; padding: 0.5rem 1.25rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 0.875rem; }
.access-denied .btn.cta:hover[b-1isurs2b7e] { background: var(--accent-hover); }

/* Header */
.page-header[b-1isurs2b7e] { margin-bottom: 1.5rem; }
.header-content[b-1isurs2b7e] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header-left h1[b-1isurs2b7e] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.header-left h1 svg[b-1isurs2b7e] { color: var(--accent); }
.header-subtitle[b-1isurs2b7e] { font-size: 0.85rem; color: var(--text-muted); }
.add-btn[b-1isurs2b7e] { display: flex; align-items: center; gap: 0.5rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.add-btn:hover[b-1isurs2b7e] { background: var(--accent-hover); }

/* Alert */
.alert[b-1isurs2b7e] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 1rem; }
.alert.error[b-1isurs2b7e] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }
.alert-close[b-1isurs2b7e] { background: none; border: none; color: inherit; font-size: 1.1rem; cursor: pointer; margin-left: auto; padding: 0 0.25rem; }

/* Success Toast */
.toast-success[b-1isurs2b7e] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; margin-bottom: 1rem; animation: toastIn-b-1isurs2b7e 0.3s ease; }
@keyframes toastIn-b-1isurs2b7e { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Empty State */
.empty-state[b-1isurs2b7e] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg[b-1isurs2b7e] { margin-bottom: 1rem; opacity: 0.5; }
.empty-state h3[b-1isurs2b7e] { color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 0.5rem; }
.empty-state p[b-1isurs2b7e] { font-size: 0.875rem; max-width: 360px; margin: 0 auto; }

/* Plan Grid */
.plan-grid[b-1isurs2b7e] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }

/* Plan Card */
.plan-card[b-1isurs2b7e] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.plan-card:hover[b-1isurs2b7e] { border-color: var(--border-hover); box-shadow: var(--shadow-lg); }
.plan-card.inactive[b-1isurs2b7e] { opacity: 0.6; }

.plan-card-header[b-1isurs2b7e] { padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border); }
.plan-name-row[b-1isurs2b7e] { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.plan-name[b-1isurs2b7e] { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.plan-status[b-1isurs2b7e] { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.plan-status.active[b-1isurs2b7e] { background: var(--success-bg); color: var(--success-text); }
.plan-status.disabled[b-1isurs2b7e] { background: var(--bg-elevated); color: var(--text-muted); }
.plan-desc[b-1isurs2b7e] { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.4; }

.plan-card-body[b-1isurs2b7e] { padding: 1rem 1.25rem; flex: 1; }

/* Pricing */
.plan-pricing[b-1isurs2b7e] { display: flex; gap: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--border); }
.price-item[b-1isurs2b7e] { display: flex; align-items: baseline; gap: 0.25rem; }
.price-value[b-1isurs2b7e] { font-size: 1.35rem; font-weight: 700; color: var(--accent); }
.price-label[b-1isurs2b7e] { font-size: 0.75rem; color: var(--text-muted); }

/* Limits */
.plan-limits[b-1isurs2b7e] { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.limit-item[b-1isurs2b7e] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.825rem; color: var(--text-secondary); }
.limit-item svg[b-1isurs2b7e] { color: var(--text-muted); flex-shrink: 0; }

/* Meta badges */
.plan-meta[b-1isurs2b7e] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.meta-badge[b-1isurs2b7e] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 10px; }
.meta-badge.features[b-1isurs2b7e] { background: var(--accent-subtle); color: var(--accent); }
.meta-badge.trial[b-1isurs2b7e] { background: var(--success-bg); color: var(--success-text); }
.meta-badge.sort[b-1isurs2b7e] { background: var(--bg-elevated); color: var(--text-muted); }

/* Card Footer */
.plan-card-footer[b-1isurs2b7e] { display: flex; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); }
.action-btn[b-1isurs2b7e] { display: flex; align-items: center; gap: 0.35rem; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 0.35rem 0.65rem; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; }
.action-btn:hover[b-1isurs2b7e] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.action-btn.danger:hover[b-1isurs2b7e] { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }

/* Drawer */
.drawer-backdrop[b-1isurs2b7e] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 999; animation: drawerFadeIn-b-1isurs2b7e 0.3s ease forwards; }
@keyframes drawerFadeIn-b-1isurs2b7e { from { opacity: 0; } to { opacity: 1; } }
.drawer[b-1isurs2b7e] { position: fixed; top: 0; right: 0; width: 480px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--bg-card); z-index: 1000; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08), -1px 0 0 var(--border); transform: translateX(100%); animation: drawerSlideIn-b-1isurs2b7e 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
@keyframes drawerSlideIn-b-1isurs2b7e { to { transform: translateX(0); } }

/* Drawer Header */
.drawer-header[b-1isurs2b7e] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer-header-left[b-1isurs2b7e] { display: flex; align-items: center; gap: 0.75rem; }
.drawer-header-icon[b-1isurs2b7e] { width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-subtle); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.drawer-title[b-1isurs2b7e] { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.drawer-subtitle[b-1isurs2b7e] { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.drawer-close[b-1isurs2b7e] { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.drawer-close:hover[b-1isurs2b7e] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* Drawer Body */
.drawer-body[b-1isurs2b7e] { flex: 1; overflow-y: auto; padding: 0; scroll-behavior: smooth; }
.drawer-body[b-1isurs2b7e]::-webkit-scrollbar { width: 4px; }
.drawer-body[b-1isurs2b7e]::-webkit-scrollbar-track { background: transparent; }
.drawer-body[b-1isurs2b7e]::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
.drawer-body[b-1isurs2b7e]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Drawer Alert */
.drawer-alert[b-1isurs2b7e] { margin: 1rem 1.5rem 0; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; }
.drawer-alert.error[b-1isurs2b7e] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }

/* Drawer Footer */
.drawer-footer[b-1isurs2b7e] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; }

/* Form Sections (Collapsible) */
.form-section[b-1isurs2b7e] { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.form-section:last-child[b-1isurs2b7e] { border-bottom: none; }
.form-section.collapsed[b-1isurs2b7e] { padding-bottom: 1.25rem; }
.section-label[b-1isurs2b7e] { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; transition: color 0.15s; }
.section-label:hover[b-1isurs2b7e] { color: var(--text-secondary); }
.form-section.collapsed .section-label[b-1isurs2b7e] { margin-bottom: 0; }
.section-label[b-1isurs2b7e]::after { content: ''; flex: 1; height: 1px; background: var(--border); order: 1; }
.section-label svg:first-child[b-1isurs2b7e] { flex-shrink: 0; opacity: 0.5; }
.section-chevron[b-1isurs2b7e] { flex-shrink: 0; order: 2; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.4; }
.section-label:hover .section-chevron[b-1isurs2b7e] { opacity: 0.7; }
.form-section.collapsed .section-chevron[b-1isurs2b7e] { transform: rotate(-90deg); }
.section-content[b-1isurs2b7e] { overflow: hidden; max-height: 800px; opacity: 1; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; }
.form-section.collapsed .section-content[b-1isurs2b7e] { max-height: 0; opacity: 0; }

/* Fields */
.field[b-1isurs2b7e] { margin-bottom: 0.875rem; }
.field:last-child[b-1isurs2b7e] { margin-bottom: 0; }
.field-label[b-1isurs2b7e] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
.optional-tag[b-1isurs2b7e] { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.field-input[b-1isurs2b7e] { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.field-input:focus[b-1isurs2b7e] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.field-input[b-1isurs2b7e]::placeholder { color: var(--text-muted); }
textarea.field-input[b-1isurs2b7e] { resize: vertical; min-height: 56px; }
.field-row[b-1isurs2b7e] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.875rem; }
.field-row .field[b-1isurs2b7e] { margin-bottom: 0; }
.field-hint[b-1isurs2b7e] { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; display: block; }

/* Features Grid */
.features-grid[b-1isurs2b7e] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.feature-checkbox[b-1isurs2b7e] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.2s; user-select: none; }
.feature-checkbox:hover[b-1isurs2b7e] { border-color: var(--border-hover); background: var(--bg-hover); }
.feature-checkbox.checked[b-1isurs2b7e] { border-color: var(--accent); background: var(--accent-subtle); }
.feature-checkbox input[b-1isurs2b7e] { display: none; }
.feature-check-icon[b-1isurs2b7e] { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border-hover); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.feature-checkbox.checked .feature-check-icon[b-1isurs2b7e] { background: var(--accent); border-color: var(--accent); color: #fff; }
.feature-label[b-1isurs2b7e] { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
.feature-checkbox.checked .feature-label[b-1isurs2b7e] { color: var(--text-primary); }

/* Toggle (Drawer Style) */
.toggle-row[b-1isurs2b7e] { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0; }
.toggle-info[b-1isurs2b7e] { display: flex; flex-direction: column; gap: 2px; }
.toggle-name[b-1isurs2b7e] { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.toggle-hint[b-1isurs2b7e] { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }
.toggle-switch-drawer[b-1isurs2b7e] { position: relative; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.toggle-switch-drawer input[b-1isurs2b7e] { display: none; }
.toggle-track[b-1isurs2b7e] { position: absolute; inset: 0; background: var(--border-hover); border-radius: 12px; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-switch-drawer input:checked + .toggle-track[b-1isurs2b7e] { background: var(--accent); }
.toggle-thumb[b-1isurs2b7e] { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-switch-drawer input:checked ~ .toggle-thumb[b-1isurs2b7e] { transform: translateX(20px); }

/* Buttons */
.btn[b-1isurs2b7e] { padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn.primary[b-1isurs2b7e] { background: var(--accent); color: #fff; }
.btn.primary:hover[b-1isurs2b7e] { background: var(--accent-hover); }
.btn.primary:disabled[b-1isurs2b7e] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
.btn.secondary[b-1isurs2b7e] { background: var(--bg-elevated); color: var(--text-secondary); }
.btn.secondary:hover[b-1isurs2b7e] { background: var(--bg-hover); color: var(--text-primary); }
.btn.danger[b-1isurs2b7e] { background: var(--danger); color: #fff; }
.btn.danger:hover[b-1isurs2b7e] { opacity: 0.9; }
.btn.danger:disabled[b-1isurs2b7e] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }

/* Modal (delete confirmation) */
.modal-overlay[b-1isurs2b7e] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[b-1isurs2b7e] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.confirm-modal[b-1isurs2b7e] { text-align: center; padding: 2rem !important; max-width: 400px !important; }
.confirm-icon[b-1isurs2b7e] { margin: 0 auto 1rem; }
.confirm-icon.danger svg[b-1isurs2b7e] { color: var(--danger); }
.confirm-modal h3[b-1isurs2b7e] { font-size: 1.1rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.confirm-modal p[b-1isurs2b7e] { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.5; }
.confirm-actions[b-1isurs2b7e] { display: flex; gap: 0.75rem; justify-content: center; }

/* Spinner */
.spinner-sm[b-1isurs2b7e] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-1isurs2b7e 0.6s linear infinite; }
@keyframes spin-b-1isurs2b7e { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 768px) {
    .subplans-page[b-1isurs2b7e] { padding: 1rem; }
    .header-content[b-1isurs2b7e] { flex-direction: column; align-items: flex-start; }
    .plan-grid[b-1isurs2b7e] { grid-template-columns: 1fr; }
    .features-grid[b-1isurs2b7e] { grid-template-columns: 1fr; }
    .field-row[b-1isurs2b7e] { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .drawer[b-1isurs2b7e] { width: 100vw; }
    .plan-pricing[b-1isurs2b7e] { flex-direction: column; gap: 0.5rem; }
}

/* RTL Support */
:global([dir="rtl"]) .plan-card-footer[b-1isurs2b7e] { flex-direction: row-reverse; }
:global([dir="rtl"]) .header-actions[b-1isurs2b7e] { flex-direction: row-reverse; }
:global([dir="rtl"]) .drawer[b-1isurs2b7e] { right: auto; left: 0; transform: translateX(-100%); box-shadow: 8px 0 40px rgba(0, 0, 0, 0.08), 1px 0 0 var(--border); }
:global([dir="rtl"]) .toggle-thumb[b-1isurs2b7e] { left: auto; right: 3px; }
:global([dir="rtl"]) .toggle-switch-drawer input:checked ~ .toggle-thumb[b-1isurs2b7e] { transform: translateX(-20px); }
:global([dir="rtl"]) .alert-close[b-1isurs2b7e] { margin-left: 0; margin-right: auto; }
/* _content/QrBiteHub.Web/Components/Pages/Staff/Admin/Subscriptions.razor.rz.scp.css */
/* Subscriptions Page */
.subs-page[b-zzvvywiv2b] { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

/* Access Denied */
.access-denied[b-zzvvywiv2b] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.access-denied svg[b-zzvvywiv2b] { margin-bottom: 1rem; opacity: 0.5; }
.access-denied h2[b-zzvvywiv2b] { color: var(--text-primary); font-size: 1.25rem; margin: 0 0 0.5rem; }
.access-denied p[b-zzvvywiv2b] { font-size: 0.875rem; margin: 0 0 1.5rem; }
.access-denied .btn.cta[b-zzvvywiv2b] { display: inline-block; background: var(--accent); color: #fff; padding: 0.5rem 1.25rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 0.875rem; }
.access-denied .btn.cta:hover[b-zzvvywiv2b] { background: var(--accent-hover); }

/* Header */
.page-header[b-zzvvywiv2b] { margin-bottom: 1.5rem; }
.header-content[b-zzvvywiv2b] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header-left h1[b-zzvvywiv2b] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.header-left h1 svg[b-zzvvywiv2b] { color: var(--accent); }
.header-subtitle[b-zzvvywiv2b] { font-size: 0.85rem; color: var(--text-muted); }
.header-actions[b-zzvvywiv2b] { display: flex; gap: 0.5rem; align-items: center; }
.add-btn[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.5rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.add-btn:hover[b-zzvvywiv2b] { background: var(--accent-hover); }

/* Alert */
.alert[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 1rem; }
.alert.error[b-zzvvywiv2b] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }
.alert-close[b-zzvvywiv2b] { background: none; border: none; color: inherit; font-size: 1.1rem; cursor: pointer; margin-left: auto; padding: 0 0.25rem; }

/* Success Toast */
.toast-success[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; margin-bottom: 1rem; animation: toastIn-b-zzvvywiv2b 0.3s ease; }
@keyframes toastIn-b-zzvvywiv2b { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Stats Grid */
.stats-grid[b-zzvvywiv2b] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card[b-zzvvywiv2b] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.stat-icon[b-zzvvywiv2b] { width: 44px; height: 44px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon.active[b-zzvvywiv2b] { background: var(--success-bg); color: var(--success); }
.stat-icon.warning[b-zzvvywiv2b] { background: var(--warning-bg); color: var(--warning); }
.stat-icon.danger[b-zzvvywiv2b] { background: var(--danger-bg); color: var(--danger); }
.stat-icon.revenue[b-zzvvywiv2b] { background: var(--accent-subtle); color: var(--accent); }
.stat-icon.uncovered[b-zzvvywiv2b] { background: var(--bg-elevated); color: var(--text-muted); }
.stat-card-active[b-zzvvywiv2b] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); }
.stat-info[b-zzvvywiv2b] { display: flex; flex-direction: column; min-width: 0; }
.stat-value[b-zzvvywiv2b] { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.stat-label[b-zzvvywiv2b] { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }

/* Filter Bar */
.filter-bar[b-zzvvywiv2b] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-chips[b-zzvvywiv2b] { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.chip[b-zzvvywiv2b] { padding: 0.35rem 0.85rem; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-size: 0.8rem; transition: all 0.15s; white-space: nowrap; }
.chip:hover[b-zzvvywiv2b] { border-color: var(--border-hover); color: var(--text-secondary); background: var(--bg-hover); }
.chip.active[b-zzvvywiv2b] { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); font-weight: 500; }
.search-box[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 0.75rem; min-width: 240px; }
.search-box svg[b-zzvvywiv2b] { color: var(--text-muted); flex-shrink: 0; }
.search-box input[b-zzvvywiv2b] { border: none; background: transparent; color: var(--text-primary); padding: 0.5rem 0; font-size: 0.85rem; outline: none; width: 100%; }

/* Subscription List */
.sub-list[b-zzvvywiv2b] { display: flex; flex-direction: column; gap: 0.75rem; }
.sub-card[b-zzvvywiv2b] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.15s; box-shadow: var(--shadow-card); }
.sub-card:hover[b-zzvvywiv2b] { border-color: var(--border-hover); }
.sub-row[b-zzvvywiv2b] { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; transition: background 0.15s; }
.sub-row:hover[b-zzvvywiv2b] { background: var(--bg-hover); }
.sub-main[b-zzvvywiv2b] { display: flex; flex-direction: column; gap: 0.35rem; min-width: 200px; flex-shrink: 0; }
.restaurant-name[b-zzvvywiv2b] { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.plan-name[b-zzvvywiv2b] { font-size: 0.8rem; color: var(--text-muted); }
.sub-badges[b-zzvvywiv2b] { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.sub-meta[b-zzvvywiv2b] { display: flex; gap: 1.5rem; flex: 1; flex-wrap: wrap; }
.meta-item[b-zzvvywiv2b] { display: flex; flex-direction: column; gap: 0.15rem; }
.meta-label[b-zzvvywiv2b] { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.meta-value[b-zzvvywiv2b] { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
.meta-value.text-danger[b-zzvvywiv2b] { color: var(--danger); }
.meta-value.text-warning[b-zzvvywiv2b] { color: var(--warning); }
.sub-actions-toggle[b-zzvvywiv2b] { flex-shrink: 0; color: var(--text-muted); }
.chevron[b-zzvvywiv2b] { transition: transform 0.2s; }
.chevron.open[b-zzvvywiv2b] { transform: rotate(180deg); }

/* Status Badges */
.status-badge[b-zzvvywiv2b] { padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.badge-trial[b-zzvvywiv2b] { background: var(--accent-subtle); color: var(--accent); }
.badge-active[b-zzvvywiv2b] { background: var(--success-bg); color: var(--success-text); }
.badge-grace[b-zzvvywiv2b] { background: var(--warning-bg); color: var(--warning-text); }
.badge-expired[b-zzvvywiv2b] { background: var(--bg-elevated); color: var(--text-muted); }
.badge-cancelled[b-zzvvywiv2b] { background: var(--danger-bg); color: var(--danger-text); }
.badge-suspended[b-zzvvywiv2b] { background: var(--danger-bg); color: var(--danger); }
.badge-pending[b-zzvvywiv2b] { background: var(--warning-bg); color: var(--warning-text); }
.cycle-badge[b-zzvvywiv2b] { padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.72rem; font-weight: 500; background: var(--bg-elevated); color: var(--text-muted); white-space: nowrap; }

/* Expanded Section */
.sub-expanded[b-zzvvywiv2b] { border-top: 1px solid var(--border); padding: 1rem 1.25rem; background: var(--bg-deep); }
.action-bar[b-zzvvywiv2b] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.action-btn[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.35rem; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 0.35rem 0.65rem; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; }
.action-btn:hover[b-zzvvywiv2b] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.action-btn.danger:hover[b-zzvvywiv2b] { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }
.action-btn.warning:hover[b-zzvvywiv2b] { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.action-btn.success:hover[b-zzvvywiv2b] { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.sub-notes[b-zzvvywiv2b] { font-size: 0.82rem; color: var(--text-muted); padding: 0.5rem 0.75rem; background: var(--bg-elevated); border-radius: var(--radius); margin-bottom: 0.75rem; white-space: pre-line; }
.notes-label[b-zzvvywiv2b] { font-weight: 600; color: var(--text-secondary); }
.notes-text[b-zzvvywiv2b] { color: var(--text-muted); }

/* Overrides Row */
.overrides-row[b-zzvvywiv2b] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.override-badge[b-zzvvywiv2b] { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.6rem; border-radius: 10px; background: var(--accent-subtle); color: var(--accent); }

/* Invoices Section */
.invoices-section[b-zzvvywiv2b] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.invoices-header[b-zzvvywiv2b] { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0.85rem; cursor: pointer; transition: background 0.15s; }
.invoices-header:hover[b-zzvvywiv2b] { background: var(--bg-hover); }
.invoices-title[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }
.inv-count[b-zzvvywiv2b] { color: var(--text-muted); font-weight: 400; }
.invoices-list[b-zzvvywiv2b] { border-top: 1px solid var(--border); }
.invoice-row[b-zzvvywiv2b] { display: flex; align-items: center; gap: 1rem; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.invoice-row:last-child[b-zzvvywiv2b] { border-bottom: none; }
.inv-main[b-zzvvywiv2b] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 140px; }
.inv-number[b-zzvvywiv2b] { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); font-family: monospace; }
.inv-type[b-zzvvywiv2b] { font-size: 0.72rem; color: var(--text-muted); }
.inv-notes[b-zzvvywiv2b] { font-size: 0.72rem; color: var(--text-secondary); font-style: italic; }
.inv-details[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.75rem; flex: 1; flex-wrap: wrap; }
.inv-amount[b-zzvvywiv2b] { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.inv-date[b-zzvvywiv2b] { font-size: 0.75rem; color: var(--text-muted); }
.inv-actions[b-zzvvywiv2b] { display: flex; gap: 0.35rem; flex-shrink: 0; }

/* Uncovered Restaurants */
.uncovered-list[b-zzvvywiv2b] { display: flex; flex-direction: column; gap: 0.5rem; }
.uncovered-card[b-zzvvywiv2b] { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; transition: border-color 0.15s; }
.uncovered-card:hover[b-zzvvywiv2b] { border-color: var(--border-hover); }
.uncovered-info[b-zzvvywiv2b] { display: flex; flex-direction: column; gap: 0.2rem; }
.uncovered-name[b-zzvvywiv2b] { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.uncovered-date[b-zzvvywiv2b] { font-size: 0.78rem; color: var(--text-muted); }
.assign-btn[b-zzvvywiv2b] { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.assign-btn:hover[b-zzvvywiv2b] { background: var(--accent-hover); }

/* Empty State */
.empty-state[b-zzvvywiv2b] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg[b-zzvvywiv2b] { margin-bottom: 1rem; opacity: 0.5; }
.empty-state h3[b-zzvvywiv2b] { color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 0.5rem; }
.empty-state p[b-zzvvywiv2b] { font-size: 0.875rem; max-width: 360px; margin: 0 auto; }
.empty-text[b-zzvvywiv2b] { color: var(--text-muted); font-size: 0.8rem; padding: 0.75rem 0.85rem; margin: 0; }

/* Drawer */
.drawer-backdrop[b-zzvvywiv2b] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 999; animation: drawerFadeIn-b-zzvvywiv2b 0.3s ease forwards; }
@keyframes drawerFadeIn-b-zzvvywiv2b { from { opacity: 0; } to { opacity: 1; } }
.drawer[b-zzvvywiv2b] { position: fixed; top: 0; right: 0; width: 480px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--bg-card); z-index: 1000; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08), -1px 0 0 var(--border); transform: translateX(100%); animation: drawerSlideIn-b-zzvvywiv2b 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
@keyframes drawerSlideIn-b-zzvvywiv2b { to { transform: translateX(0); } }

/* Drawer Header */
.drawer-header[b-zzvvywiv2b] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer-header-left[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.75rem; }
.drawer-header-icon[b-zzvvywiv2b] { width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-subtle); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.drawer-title[b-zzvvywiv2b] { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.drawer-subtitle[b-zzvvywiv2b] { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.drawer-close[b-zzvvywiv2b] { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.drawer-close:hover[b-zzvvywiv2b] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* Drawer Body */
.drawer-body[b-zzvvywiv2b] { flex: 1; overflow-y: auto; padding: 0; scroll-behavior: smooth; }
.drawer-body[b-zzvvywiv2b]::-webkit-scrollbar { width: 4px; }
.drawer-body[b-zzvvywiv2b]::-webkit-scrollbar-track { background: transparent; }
.drawer-body[b-zzvvywiv2b]::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
.drawer-body[b-zzvvywiv2b]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Drawer Alert */
.drawer-alert[b-zzvvywiv2b] { margin: 1rem 1.5rem 0; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; }
.drawer-alert.error[b-zzvvywiv2b] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }

/* Drawer Footer */
.drawer-footer[b-zzvvywiv2b] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; }

/* Form Sections (Collapsible) */
.form-section[b-zzvvywiv2b] { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.form-section:last-child[b-zzvvywiv2b] { border-bottom: none; }
.form-section.collapsed[b-zzvvywiv2b] { padding-bottom: 1.25rem; }
.section-label[b-zzvvywiv2b] { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; transition: color 0.15s; }
.section-label:hover[b-zzvvywiv2b] { color: var(--text-secondary); }
.form-section.collapsed .section-label[b-zzvvywiv2b] { margin-bottom: 0; }
.section-label[b-zzvvywiv2b]::after { content: ''; flex: 1; height: 1px; background: var(--border); order: 1; }
.section-label svg:first-child[b-zzvvywiv2b] { flex-shrink: 0; opacity: 0.5; }
.section-chevron[b-zzvvywiv2b] { flex-shrink: 0; order: 2; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.4; }
.section-label:hover .section-chevron[b-zzvvywiv2b] { opacity: 0.7; }
.form-section.collapsed .section-chevron[b-zzvvywiv2b] { transform: rotate(-90deg); }
.section-content[b-zzvvywiv2b] { overflow: hidden; max-height: 800px; opacity: 1; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; }
.form-section.collapsed .section-content[b-zzvvywiv2b] { max-height: 0; opacity: 0; }

/* Fields */
.field[b-zzvvywiv2b] { margin-bottom: 0.875rem; }
.field:last-child[b-zzvvywiv2b] { margin-bottom: 0; }
.field-label[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
.optional-tag[b-zzvvywiv2b] { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.field-input[b-zzvvywiv2b] { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.field-input:focus[b-zzvvywiv2b] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.field-input[b-zzvvywiv2b]::placeholder { color: var(--text-muted); }
.field-input:disabled[b-zzvvywiv2b] { opacity: 0.5; cursor: not-allowed; }
textarea.field-input[b-zzvvywiv2b] { resize: vertical; min-height: 56px; }
select.field-input[b-zzvvywiv2b] { cursor: pointer; }
.field-row[b-zzvvywiv2b] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.875rem; }
.field-row .field[b-zzvvywiv2b] { margin-bottom: 0; }
.field-hint[b-zzvvywiv2b] { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; display: block; }

/* Billing Cycle Toggle */
.cycle-toggle[b-zzvvywiv2b] { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cycle-option[b-zzvvywiv2b] { flex: 1; padding: 0.5rem 1rem; border: none; background: var(--bg-card); color: var(--text-muted); cursor: pointer; font-size: 0.85rem; font-family: inherit; transition: all 0.15s; }
.cycle-option:first-child[b-zzvvywiv2b] { border-right: 1px solid var(--border); }
.cycle-option:hover[b-zzvvywiv2b] { background: var(--bg-hover); color: var(--text-secondary); }
.cycle-option.active[b-zzvvywiv2b] { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }

/* Toggle (Drawer Style) */
.toggle-row[b-zzvvywiv2b] { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0; margin-bottom: 0.875rem; }
.toggle-info[b-zzvvywiv2b] { display: flex; flex-direction: column; gap: 2px; }
.toggle-name[b-zzvvywiv2b] { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.toggle-hint[b-zzvvywiv2b] { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }
.toggle-switch-drawer[b-zzvvywiv2b] { position: relative; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.toggle-switch-drawer input[b-zzvvywiv2b] { display: none; }
.toggle-track[b-zzvvywiv2b] { position: absolute; inset: 0; background: var(--border-hover); border-radius: 12px; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-switch-drawer input:checked + .toggle-track[b-zzvvywiv2b] { background: var(--accent); }
.toggle-thumb[b-zzvvywiv2b] { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-switch-drawer input:checked ~ .toggle-thumb[b-zzvvywiv2b] { transform: translateX(20px); }

/* Buttons */
.btn[b-zzvvywiv2b] { padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn.primary[b-zzvvywiv2b] { background: var(--accent); color: #fff; }
.btn.primary:hover[b-zzvvywiv2b] { background: var(--accent-hover); }
.btn.primary:disabled[b-zzvvywiv2b] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
.btn.secondary[b-zzvvywiv2b] { background: var(--bg-elevated); color: var(--text-secondary); }
.btn.secondary:hover[b-zzvvywiv2b] { background: var(--bg-hover); color: var(--text-primary); }
.btn.danger[b-zzvvywiv2b] { background: var(--danger); color: #fff; }
.btn.danger:hover[b-zzvvywiv2b] { opacity: 0.9; }
.btn.danger:disabled[b-zzvvywiv2b] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
.btn.warning-btn[b-zzvvywiv2b] { background: var(--warning); color: #fff; }
.btn.warning-btn:hover[b-zzvvywiv2b] { opacity: 0.9; }
.btn.warning-btn:disabled[b-zzvvywiv2b] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }

/* Modal (confirmation overlays) */
.modal-overlay[b-zzvvywiv2b] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[b-zzvvywiv2b] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.confirm-modal[b-zzvvywiv2b] { text-align: center; padding: 2rem !important; max-width: 440px !important; }
.confirm-icon[b-zzvvywiv2b] { margin: 0 auto 1rem; }
.confirm-icon.danger svg[b-zzvvywiv2b] { color: var(--danger); }
.confirm-icon.warning svg[b-zzvvywiv2b] { color: var(--warning); }
.confirm-icon.success svg[b-zzvvywiv2b] { color: var(--success); }
.confirm-icon.renew svg[b-zzvvywiv2b] { color: var(--accent); }
.confirm-modal h3[b-zzvvywiv2b] { font-size: 1.1rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.confirm-modal p[b-zzvvywiv2b] { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.5; }
.confirm-actions[b-zzvvywiv2b] { display: flex; gap: 0.75rem; justify-content: center; }

/* Spinner */
.spinner-sm[b-zzvvywiv2b] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-zzvvywiv2b 0.6s linear infinite; }
@keyframes spin-b-zzvvywiv2b { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 1280px) {
    .stats-grid[b-zzvvywiv2b] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .stats-grid[b-zzvvywiv2b] { grid-template-columns: repeat(2, 1fr); }
    .sub-row[b-zzvvywiv2b] { flex-direction: column; align-items: flex-start; }
    .sub-meta[b-zzvvywiv2b] { gap: 1rem; }
}

@media (max-width: 768px) {
    .subs-page[b-zzvvywiv2b] { padding: 1rem; }
    .header-content[b-zzvvywiv2b] { flex-direction: column; align-items: flex-start; }
    .stats-grid[b-zzvvywiv2b] { grid-template-columns: 1fr; }
    .filter-bar[b-zzvvywiv2b] { flex-direction: column; align-items: flex-start; }
    .search-box[b-zzvvywiv2b] { min-width: 100%; width: 100%; }
    .field-row[b-zzvvywiv2b] { grid-template-columns: 1fr; }
    .invoice-row[b-zzvvywiv2b] { flex-direction: column; align-items: flex-start; }
    .sub-main[b-zzvvywiv2b] { min-width: auto; }
    .uncovered-card[b-zzvvywiv2b] { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

@media (max-width: 540px) {
    .drawer[b-zzvvywiv2b] { width: 100vw; }
}

/* RTL Support */
:global([dir="rtl"]) .action-bar[b-zzvvywiv2b] { flex-direction: row-reverse; }
:global([dir="rtl"]) .header-actions[b-zzvvywiv2b] { flex-direction: row-reverse; }
:global([dir="rtl"]) .drawer[b-zzvvywiv2b] { right: auto; left: 0; transform: translateX(-100%); box-shadow: 8px 0 40px rgba(0, 0, 0, 0.08), 1px 0 0 var(--border); }
:global([dir="rtl"]) .toggle-thumb[b-zzvvywiv2b] { left: auto; right: 3px; }
:global([dir="rtl"]) .toggle-switch-drawer input:checked ~ .toggle-thumb[b-zzvvywiv2b] { transform: translateX(-20px); }
:global([dir="rtl"]) .alert-close[b-zzvvywiv2b] { margin-left: 0; margin-right: auto; }
:global([dir="rtl"]) .sub-row[b-zzvvywiv2b] { flex-direction: row-reverse; }
:global([dir="rtl"]) .confirm-actions[b-zzvvywiv2b] { flex-direction: row-reverse; }

/* Payment Badges */
.payment-badge[b-zzvvywiv2b] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 12px; font-weight: 500; white-space: nowrap; }
.payment-badge.gateway[b-zzvvywiv2b] { background: var(--accent-subtle); color: var(--accent); }
.payment-badge.card-info[b-zzvvywiv2b] { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); }
.payment-badge.attempts[b-zzvvywiv2b] { background: var(--warning-bg); color: var(--warning-text); }

/* Action btn warning variant */
.action-btn.warning[b-zzvvywiv2b] { color: var(--warning); }
.action-btn.warning:hover[b-zzvvywiv2b] { background: var(--warning-bg); }

/* Payment Logs Modal */
.payment-logs-modal[b-zzvvywiv2b] { max-width: 600px; width: 90vw; max-height: 80vh; display: flex; flex-direction: column; }
.modal-header-row[b-zzvvywiv2b] { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.modal-header-row h3[b-zzvvywiv2b] { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.modal-close-btn[b-zzvvywiv2b] { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius); transition: all 0.15s; }
.modal-close-btn:hover[b-zzvvywiv2b] { background: var(--bg-hover); color: var(--text-primary); }
.payment-logs-list[b-zzvvywiv2b] { display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; max-height: 55vh; padding-right: 0.25rem; }
.payment-log-entry[b-zzvvywiv2b] { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; transition: border-color 0.15s; }
.payment-log-entry.log-success[b-zzvvywiv2b] { border-left: 3px solid var(--success); }
.payment-log-entry.log-failed[b-zzvvywiv2b] { border-left: 3px solid var(--danger); }
.payment-log-entry.log-pending[b-zzvvywiv2b] { border-left: 3px solid var(--warning); }
.log-header[b-zzvvywiv2b] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.log-date[b-zzvvywiv2b] { font-size: 0.75rem; color: var(--text-muted); }
.log-details[b-zzvvywiv2b] { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.log-detail[b-zzvvywiv2b] { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; }
.log-label[b-zzvvywiv2b] { color: var(--text-muted); font-weight: 500; }
.log-mono[b-zzvvywiv2b] { font-family: monospace; font-size: 0.78rem; }
.log-error[b-zzvvywiv2b] { color: var(--danger-text); }
.badge-pending[b-zzvvywiv2b] { background: var(--bg-elevated); color: var(--text-muted); }
/* _content/QrBiteHub.Web/Components/Pages/Staff/BranchDetail.razor.rz.scp.css */
/* Branch Detail Page */
.detail-page[b-d4e9zunbz0] { padding: 0 0 2rem; max-width: 1200px; margin: 0 auto; }

/* Empty State */
.empty-state[b-d4e9zunbz0] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; color: var(--text-muted); gap: 1rem; }
.empty-state svg[b-d4e9zunbz0] { opacity: 0.3; }
.empty-state h3[b-d4e9zunbz0] { color: var(--text-primary); font-size: 1.25rem; margin: 0; }
.empty-state p[b-d4e9zunbz0] { color: var(--text-muted); max-width: 400px; margin: 0; }

/* Header */
.detail-header[b-d4e9zunbz0] { padding: 1.5rem 1.5rem 0; }
.detail-header .header-content[b-d4e9zunbz0] { display: flex; justify-content: space-between; align-items: flex-start; }
.detail-header .header-left[b-d4e9zunbz0] { display: flex; flex-direction: column; gap: 0.25rem; }
.detail-header h1[b-d4e9zunbz0] { font-size: 1.75rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.header-subtitle[b-d4e9zunbz0] { display: flex; align-items: center; gap: 0.75rem; }
.header-address[b-d4e9zunbz0] { font-size: 0.8rem; color: var(--text-muted); }

/* Breadcrumb */
.header-breadcrumb[b-d4e9zunbz0] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; margin-bottom: 0.25rem; }
.breadcrumb-link[b-d4e9zunbz0] { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb-link:hover[b-d4e9zunbz0] { color: #f58524; }
.header-breadcrumb svg[b-d4e9zunbz0] { color: var(--text-muted); }
.breadcrumb-current[b-d4e9zunbz0] { color: var(--text-secondary); }

/* Status Badge */
.status-badge[b-d4e9zunbz0] { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.status-badge.active[b-d4e9zunbz0] { background: rgba(16,185,129,0.15); color: #10b981; }
.status-badge.inactive[b-d4e9zunbz0] { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Tab Navigation */
.detail-tabs[b-d4e9zunbz0] { display: flex; gap: 0.25rem; padding: 1rem 1.5rem 0; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.detail-tabs[b-d4e9zunbz0]::-webkit-scrollbar { display: none; }
.tab-btn[b-d4e9zunbz0] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: none; border: none; color: var(--text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; font-family: inherit; }
.tab-btn:hover[b-d4e9zunbz0] { color: var(--text-secondary); }
.tab-btn.active[b-d4e9zunbz0] { color: #f58524; border-bottom-color: #f58524; }
.tab-btn svg[b-d4e9zunbz0] { opacity: 0.6; flex-shrink: 0; }
.tab-btn.active svg[b-d4e9zunbz0] { opacity: 1; }

/* Tab Content */
.detail-content[b-d4e9zunbz0] { padding: 1.5rem; }

/* CTA Button */
.btn.cta[b-d4e9zunbz0] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: #f58524; color: #fff; border: none; border-radius: 8px; font-size: 0.85rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.btn.cta:hover[b-d4e9zunbz0] { background: #e07520; }

/* RTL Support */
[b-d4e9zunbz0] [dir="rtl"] .header-breadcrumb { flex-direction: row-reverse; }
[b-d4e9zunbz0] [dir="rtl"] .detail-tabs { flex-direction: row-reverse; }

/* Responsive */
@media (max-width: 768px) {
    .detail-header[b-d4e9zunbz0] { padding: 1rem 1rem 0; }
    .detail-header h1[b-d4e9zunbz0] { font-size: 1.35rem; }
    .detail-tabs[b-d4e9zunbz0] { padding: 0.75rem 1rem 0; }
    .tab-btn[b-d4e9zunbz0] { padding: 0.6rem 0.75rem; font-size: 0.8rem; }
    .detail-content[b-d4e9zunbz0] { padding: 1rem; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Coupons.razor.rz.scp.css */
/* Coupons Page */
.coupons-page[b-xs0957cwyw] { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

/* Header */
.page-header[b-xs0957cwyw] { margin-bottom: 1.5rem; }
.header-content[b-xs0957cwyw] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header-left h1[b-xs0957cwyw] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.header-subtitle[b-xs0957cwyw] { font-size: 0.85rem; color: var(--text-muted); }
.header-stats[b-xs0957cwyw] { display: flex; gap: 1rem; }
.stat[b-xs0957cwyw] { text-align: center; padding: 0.5rem 1rem; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.stat-value[b-xs0957cwyw] { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.stat-label[b-xs0957cwyw] { font-size: 0.75rem; color: var(--text-muted); }
.stat.active .stat-value[b-xs0957cwyw] { color: var(--success); }
.stat.inactive .stat-value[b-xs0957cwyw] { color: var(--text-muted); }

/* Tab Navigation */
.tab-nav[b-xs0957cwyw] { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.tab-btn[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.25rem; border: none; background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; margin-bottom: -1px; }
.tab-btn:hover[b-xs0957cwyw] { color: var(--text-primary); background: var(--bg-hover); }
.tab-btn.active[b-xs0957cwyw] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-btn svg[b-xs0957cwyw] { flex-shrink: 0; }

/* Action Bar */
.action-bar[b-xs0957cwyw] { margin-bottom: 1.5rem; }
.action-group[b-xs0957cwyw] { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.search-box[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.5rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; flex: 1; min-width: 200px; max-width: 320px; }
.search-box svg[b-xs0957cwyw] { color: var(--text-muted); flex-shrink: 0; }
.search-box input[b-xs0957cwyw] { background: transparent; border: none; color: var(--text-primary); font-size: 0.875rem; width: 100%; outline: none; }
.search-box input[b-xs0957cwyw]::placeholder { color: var(--text-muted); }
.status-filter[b-xs0957cwyw] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; color: var(--text-primary); font-size: 0.875rem; outline: none; }
.status-filter option[b-xs0957cwyw] { background: var(--bg-card); }
.add-btn[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.5rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.add-btn:hover[b-xs0957cwyw] { background: var(--accent-hover); }

/* Empty State */
.empty-state[b-xs0957cwyw] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg[b-xs0957cwyw] { margin-bottom: 1rem; opacity: 0.5; }
.empty-state h3[b-xs0957cwyw] { color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 0.5rem; }
.empty-state p[b-xs0957cwyw] { font-size: 0.875rem; max-width: 360px; margin: 0 auto; }
.empty-state.small[b-xs0957cwyw] { padding: 2rem 1rem; }

/* Coupon Grid */
.coupon-grid[b-xs0957cwyw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.coupon-card[b-xs0957cwyw] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s; box-shadow: var(--shadow-card); }
.coupon-card:hover[b-xs0957cwyw] { border-color: var(--border-hover); }
.coupon-card.disabled[b-xs0957cwyw] { opacity: 0.6; }

/* Coupon Header */
.coupon-header[b-xs0957cwyw] { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.coupon-code[b-xs0957cwyw] { font-family: monospace; font-size: 0.875rem; font-weight: 700; color: var(--accent); background: var(--accent-subtle); padding: 0.25rem 0.5rem; border-radius: 4px; letter-spacing: 0.05em; }
.coupon-status[b-xs0957cwyw] { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.coupon-status.active[b-xs0957cwyw] { background: var(--success-bg); color: var(--success-text); }
.coupon-status.expired[b-xs0957cwyw] { background: var(--danger-bg); color: var(--danger-text); }
.coupon-status.limit-reached[b-xs0957cwyw] { background: var(--warning-bg); color: var(--warning-text); }
.coupon-status.disabled[b-xs0957cwyw] { background: var(--bg-elevated); color: var(--text-muted); }

/* Coupon Body */
.coupon-body[b-xs0957cwyw] { padding: 1rem; }
.coupon-name[b-xs0957cwyw] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.coupon-value[b-xs0957cwyw] { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.5rem; }
.value-text[b-xs0957cwyw] { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.value-label[b-xs0957cwyw] { font-size: 0.8rem; color: var(--text-muted); }
.coupon-desc[b-xs0957cwyw] { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.75rem; line-height: 1.4; }
.coupon-meta[b-xs0957cwyw] { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.meta-item[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--text-muted); }
.meta-item svg[b-xs0957cwyw] { color: var(--text-muted); }

/* Combinable Badge */
.combinable-badge[b-xs0957cwyw] { color: var(--accent) !important; }
.combinable-badge svg[b-xs0957cwyw] { color: var(--accent) !important; }
.combinable-dot[b-xs0957cwyw] { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 4px; vertical-align: middle; }

/* Order Type Pills (Drawer) */
.order-type-pills[b-xs0957cwyw] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.order-type-pill[b-xs0957cwyw] { padding: 0.4rem 0.85rem; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.order-type-pill:hover[b-xs0957cwyw] { border-color: var(--border-hover); color: var(--text-secondary); }
.order-type-pill.active[b-xs0957cwyw] { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Order Type Badge (Card Meta) */
.order-type-badge[b-xs0957cwyw] { color: var(--accent) !important; }
.order-type-badge svg[b-xs0957cwyw] { color: var(--accent) !important; }

/* Coupon Actions */
.coupon-actions[b-xs0957cwyw] { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); }
.action-btn[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.35rem; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 0.35rem 0.65rem; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; }
.action-btn:hover[b-xs0957cwyw] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.action-btn.danger:hover[b-xs0957cwyw] { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }

/* Modal (delete confirmation) */
.modal-overlay[b-xs0957cwyw] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[b-xs0957cwyw] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }

/* ==============================
   DRAWER PANEL
   ============================== */

/* Backdrop */
.drawer-backdrop[b-xs0957cwyw] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 999; animation: drawerFadeIn-b-xs0957cwyw 0.3s ease forwards; }
@keyframes drawerFadeIn-b-xs0957cwyw { from { opacity: 0; } to { opacity: 1; } }

/* Drawer Panel */
.drawer[b-xs0957cwyw] { position: fixed; top: 0; right: 0; width: 480px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--bg-card); z-index: 1000; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08), -1px 0 0 var(--border); transform: translateX(100%); animation: drawerSlideIn-b-xs0957cwyw 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
@keyframes drawerSlideIn-b-xs0957cwyw { to { transform: translateX(0); } }

/* Drawer Header */
.drawer-header[b-xs0957cwyw] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer-header-left[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.75rem; }
.drawer-header-icon[b-xs0957cwyw] { width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-subtle); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.drawer-title[b-xs0957cwyw] { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.drawer-subtitle[b-xs0957cwyw] { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.drawer-close[b-xs0957cwyw] { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.drawer-close:hover[b-xs0957cwyw] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* Drawer Body */
.drawer-body[b-xs0957cwyw] { flex: 1; overflow-y: auto; padding: 0; scroll-behavior: smooth; }
.drawer-body[b-xs0957cwyw]::-webkit-scrollbar { width: 4px; }
.drawer-body[b-xs0957cwyw]::-webkit-scrollbar-track { background: transparent; }
.drawer-body[b-xs0957cwyw]::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
.drawer-body[b-xs0957cwyw]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Drawer Alert */
.drawer-alert[b-xs0957cwyw] { margin: 1rem 1.5rem 0; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; }
.drawer-alert.error[b-xs0957cwyw] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }

/* Drawer Footer */
.drawer-footer[b-xs0957cwyw] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; }

/* ---- Form Sections (Collapsible) ---- */
.form-section[b-xs0957cwyw] { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.form-section:last-child[b-xs0957cwyw] { border-bottom: none; }
.form-section.collapsed[b-xs0957cwyw] { padding-bottom: 1.25rem; }
.section-label[b-xs0957cwyw] { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; transition: color 0.15s; }
.section-label:hover[b-xs0957cwyw] { color: var(--text-secondary); }
.form-section.collapsed .section-label[b-xs0957cwyw] { margin-bottom: 0; }
.section-label[b-xs0957cwyw]::after { content: ''; flex: 1; height: 1px; background: var(--border); order: 1; }
.section-label svg:first-child[b-xs0957cwyw] { flex-shrink: 0; opacity: 0.5; }
.section-chevron[b-xs0957cwyw] { flex-shrink: 0; order: 2; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.4; }
.section-label:hover .section-chevron[b-xs0957cwyw] { opacity: 0.7; }
.form-section.collapsed .section-chevron[b-xs0957cwyw] { transform: rotate(-90deg); }
.section-content[b-xs0957cwyw] { overflow: hidden; max-height: 600px; opacity: 1; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; }
.form-section.collapsed .section-content[b-xs0957cwyw] { max-height: 0; opacity: 0; }

/* ---- Fields ---- */
.field[b-xs0957cwyw] { margin-bottom: 0.875rem; }
.field:last-child[b-xs0957cwyw] { margin-bottom: 0; }
.field-label[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
.optional-tag[b-xs0957cwyw] { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.field-input[b-xs0957cwyw] { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.field-input:focus[b-xs0957cwyw] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.field-input[b-xs0957cwyw]::placeholder { color: var(--text-muted); }
.field-input.mono[b-xs0957cwyw] { font-family: 'Courier New', monospace; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
textarea.field-input[b-xs0957cwyw] { resize: vertical; min-height: 56px; }
select.field-input[b-xs0957cwyw] { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; cursor: pointer; }
select.field-input option[b-xs0957cwyw] { background: var(--bg-card); }
.field-row[b-xs0957cwyw] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field-row .field[b-xs0957cwyw] { margin-bottom: 0; }

/* ---- Segmented Control ---- */
.segment-control[b-xs0957cwyw] { display: flex; background: var(--bg-elevated); border-radius: var(--radius); padding: 3px; gap: 2px; border: 1px solid var(--border); }
.segment-btn[b-xs0957cwyw] { flex: 1; padding: 0.5rem 0.75rem; border: none; border-radius: 6px; font-family: inherit; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); background: transparent; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.segment-btn:hover[b-xs0957cwyw] { color: var(--text-secondary); }
.segment-btn.active[b-xs0957cwyw] { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-weight: 600; }
.seg-icon[b-xs0957cwyw] { font-size: 0.9rem; }

/* ---- Input with suffix ---- */
.input-suffixed[b-xs0957cwyw] { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.input-suffixed:focus-within[b-xs0957cwyw] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.input-suffixed input[b-xs0957cwyw] { flex: 1; background: transparent; border: none; padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; min-width: 0; }
.input-suffixed input[b-xs0957cwyw]::placeholder { color: var(--text-muted); }
.input-suffix-tag[b-xs0957cwyw] { padding: 0 0.75rem; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); background: var(--bg-elevated); border-left: 1px solid var(--border); display: flex; align-items: center; align-self: stretch; white-space: nowrap; }

/* ---- Toggle (Drawer Style) ---- */
.toggle-row[b-xs0957cwyw] { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0; }
.toggle-row + .toggle-row[b-xs0957cwyw] { border-top: 1px solid var(--border); }
.toggle-info[b-xs0957cwyw] { display: flex; flex-direction: column; gap: 2px; }
.toggle-name[b-xs0957cwyw] { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.toggle-hint[b-xs0957cwyw] { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }
.toggle-switch-drawer[b-xs0957cwyw] { position: relative; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.toggle-switch-drawer input[b-xs0957cwyw] { display: none; }
.toggle-track[b-xs0957cwyw] { position: absolute; inset: 0; background: var(--border-hover); border-radius: 12px; transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-switch-drawer input:checked + .toggle-track[b-xs0957cwyw] { background: var(--accent); }
.toggle-thumb[b-xs0957cwyw] { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-switch-drawer input:checked ~ .toggle-thumb[b-xs0957cwyw] { transform: translateX(20px); }

/* Buttons */
.btn[b-xs0957cwyw] { padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn.primary[b-xs0957cwyw] { background: var(--accent); color: #fff; }
.btn.primary:hover[b-xs0957cwyw] { background: var(--accent-hover); }
.btn.primary:disabled[b-xs0957cwyw] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
.btn.secondary[b-xs0957cwyw] { background: var(--bg-elevated); color: var(--text-secondary); }
.btn.secondary:hover[b-xs0957cwyw] { background: var(--bg-hover); color: var(--text-primary); }
.btn.danger[b-xs0957cwyw] { background: var(--danger); color: #fff; }
.btn.danger:hover[b-xs0957cwyw] { background: #dc2626; }
.btn.danger:disabled[b-xs0957cwyw] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }

/* Alert */
.alert[b-xs0957cwyw] { padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 1rem; }
.alert.error[b-xs0957cwyw] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }

/* Success Toast */
.toast-success[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; margin-bottom: 1rem; animation: toastIn-b-xs0957cwyw 0.3s ease; }
@keyframes toastIn-b-xs0957cwyw { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Confirm Modal */
.confirm-modal[b-xs0957cwyw] { text-align: center; padding: 2rem !important; max-width: 400px !important; }
.confirm-icon[b-xs0957cwyw] { margin: 0 auto 1rem; }
.confirm-icon.danger svg[b-xs0957cwyw] { color: var(--danger); }
.confirm-modal h3[b-xs0957cwyw] { font-size: 1.1rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.confirm-modal p[b-xs0957cwyw] { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.5; }
.confirm-actions[b-xs0957cwyw] { display: flex; gap: 0.75rem; justify-content: center; }

/* Spinner */
.spinner-sm[b-xs0957cwyw] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-xs0957cwyw 0.6s linear infinite; }
@keyframes spin-b-xs0957cwyw { to { transform: rotate(360deg); } }

/* ==============================
   ANALYTICS TAB
   ============================== */

/* Analytics Loading */
.analytics-loading[b-xs0957cwyw] { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 4rem 2rem; color: var(--text-muted); font-size: 0.875rem; }

/* Analytics Toolbar */
.analytics-toolbar[b-xs0957cwyw] { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.date-range[b-xs0957cwyw] { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.date-field[b-xs0957cwyw] { display: flex; flex-direction: column; gap: 0.25rem; }
.date-field label[b-xs0957cwyw] { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.date-field input[b-xs0957cwyw] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.45rem 0.65rem; color: var(--text-primary); font-size: 0.85rem; outline: none; }
.date-field input:focus[b-xs0957cwyw] { border-color: var(--accent); }
.apply-btn[b-xs0957cwyw] { height: fit-content; }
.filter-clear-btn[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.35rem; background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger); border-radius: var(--radius); padding: 0.45rem 0.75rem; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }
.filter-clear-btn:hover[b-xs0957cwyw] { background: var(--danger); color: #fff; }

/* Analytics Summary Stats */
.analytics-stats[b-xs0957cwyw] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.analytics-stat-card[b-xs0957cwyw] { display: flex; align-items: center; gap: 0.85rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.stat-icon[b-xs0957cwyw] { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon.discount[b-xs0957cwyw] { background: var(--accent-subtle); color: var(--accent); }
.stat-icon.usages[b-xs0957cwyw] { background: var(--success-bg); color: var(--success); }
.stat-icon.customers[b-xs0957cwyw] { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.stat-icon.average[b-xs0957cwyw] { background: var(--warning-bg); color: var(--warning); }
.stat-info[b-xs0957cwyw] { display: flex; flex-direction: column; min-width: 0; }
.stat-number[b-xs0957cwyw] { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-text[b-xs0957cwyw] { font-size: 0.75rem; color: var(--text-muted); }

/* Impact Cards */
.analytics-impact-row[b-xs0957cwyw] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.impact-card[b-xs0957cwyw] { padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.impact-header[b-xs0957cwyw] { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.impact-value[b-xs0957cwyw] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.impact-value.positive[b-xs0957cwyw] { color: var(--success); }
.impact-sub[b-xs0957cwyw] { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Highlight Cards */
.analytics-highlights-row[b-xs0957cwyw] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.highlight-card[b-xs0957cwyw] { padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.highlight-label[b-xs0957cwyw] { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; }
.highlight-code[b-xs0957cwyw] { font-family: monospace; font-size: 1rem; font-weight: 700; color: var(--accent); background: var(--accent-subtle); display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; margin-bottom: 0.25rem; }
.highlight-name[b-xs0957cwyw] { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.highlight-stat[b-xs0957cwyw] { font-size: 0.85rem; color: var(--text-primary); font-weight: 600; }

/* Analytics Sections */
.analytics-section[b-xs0957cwyw] { margin-bottom: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); }
.section-title[b-xs0957cwyw] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; }
.section-count[b-xs0957cwyw] { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; }

/* Bar Chart */
.bar-chart-container[b-xs0957cwyw] { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding: 0.5rem 0; overflow-x: auto; }
.chart-bar-item[b-xs0957cwyw] { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 24px; max-width: 48px; height: 100%; position: relative; }
.chart-bar[b-xs0957cwyw] { width: 100%; min-height: 2px; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%); border-radius: 3px 3px 0 0; transition: height 0.3s ease; position: relative; margin-top: auto; }
.chart-bar:hover[b-xs0957cwyw] { opacity: 0.85; }
.chart-bar-tooltip[b-xs0957cwyw] { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.6rem; white-space: nowrap; z-index: 10; box-shadow: var(--shadow-lg); }
.chart-bar-tooltip strong[b-xs0957cwyw] { display: block; font-size: 0.8rem; color: var(--text-primary); }
.chart-bar-tooltip span[b-xs0957cwyw] { font-size: 0.7rem; color: var(--text-muted); }
.chart-bar:hover .chart-bar-tooltip[b-xs0957cwyw] { display: block; }
.chart-bar-label[b-xs0957cwyw] { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.35rem; white-space: nowrap; }

/* Performance Table */
.perf-table-wrap[b-xs0957cwyw] { overflow-x: auto; }
.perf-table[b-xs0957cwyw] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.perf-table th[b-xs0957cwyw] { text-align: left; padding: 0.6rem 0.75rem; color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.perf-table td[b-xs0957cwyw] { padding: 0.6rem 0.75rem; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.perf-table tbody tr[b-xs0957cwyw] { cursor: pointer; transition: background 0.15s; }
.perf-table tbody tr:hover[b-xs0957cwyw] { background: var(--bg-hover); }
.perf-table tbody tr.dimmed[b-xs0957cwyw] { opacity: 0.5; }
.perf-table tbody tr.selected[b-xs0957cwyw] { background: var(--accent-subtle); }
.perf-table .num-col[b-xs0957cwyw] { text-align: right; }
.perf-code[b-xs0957cwyw] { font-family: monospace; font-size: 0.8rem; font-weight: 600; color: var(--accent); background: var(--accent-subtle); padding: 0.15rem 0.35rem; border-radius: 3px; }
.perf-name[b-xs0957cwyw] { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-status[b-xs0957cwyw] { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 8px; text-transform: uppercase; }
.perf-status.active[b-xs0957cwyw] { background: var(--success-bg); color: var(--success-text); }
.perf-status.expired[b-xs0957cwyw] { background: var(--danger-bg); color: var(--danger-text); }
.perf-status.limit-reached[b-xs0957cwyw] { background: var(--warning-bg); color: var(--warning-text); }
.perf-status.disabled[b-xs0957cwyw] { background: var(--bg-elevated); color: var(--text-muted); }

/* Usage Bar */
.usage-bar-wrap[b-xs0957cwyw] { width: 80px; height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; }
.usage-bar-fill[b-xs0957cwyw] { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; }
.usage-bar-text[b-xs0957cwyw] { font-size: 0.7rem; color: var(--text-muted); margin-left: 0.35rem; }
.usage-unlimited[b-xs0957cwyw] { font-size: 0.8rem; color: var(--text-muted); }

/* Usage History Table */
.usage-table-wrap[b-xs0957cwyw] { overflow-x: auto; }
.usage-table[b-xs0957cwyw] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.usage-table th[b-xs0957cwyw] { text-align: left; padding: 0.6rem 0.75rem; color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.usage-table td[b-xs0957cwyw] { padding: 0.55rem 0.75rem; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.usage-table tbody tr:hover[b-xs0957cwyw] { background: var(--bg-hover); }
.usage-table .num-col[b-xs0957cwyw] { text-align: right; }
.usage-date[b-xs0957cwyw] { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.customer-cell[b-xs0957cwyw] { display: flex; flex-direction: column; }
.customer-name[b-xs0957cwyw] { font-size: 0.85rem; color: var(--text-primary); }
.customer-phone[b-xs0957cwyw] { font-size: 0.7rem; color: var(--text-muted); }
.discount-col[b-xs0957cwyw] { color: var(--danger) !important; font-weight: 600; }

/* Order Status Pills */
.order-status[b-xs0957cwyw] { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 8px; white-space: nowrap; }
.order-status.status-completed[b-xs0957cwyw] { background: var(--success-bg); color: var(--success-text); }
.order-status.status-cancelled[b-xs0957cwyw] { background: var(--danger-bg); color: var(--danger-text); }
.order-status.status-pending[b-xs0957cwyw] { background: var(--warning-bg); color: var(--warning-text); }
.order-status.status-active[b-xs0957cwyw] { background: var(--accent-subtle); color: var(--accent); }

/* Load More */
.load-more-wrap[b-xs0957cwyw] { text-align: center; padding: 1rem 0 0; }
.load-more-btn[b-xs0957cwyw] { display: inline-flex; align-items: center; gap: 0.5rem; }
.remaining-count[b-xs0957cwyw] { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }

/* Responsive */
@media (max-width: 1024px) {
    .analytics-stats[b-xs0957cwyw] { grid-template-columns: repeat(2, 1fr); }
    .hide-tablet[b-xs0957cwyw] { display: none !important; }
}

@media (max-width: 768px) {
    .coupons-page[b-xs0957cwyw] { padding: 1rem; }
    .header-content[b-xs0957cwyw] { flex-direction: column; align-items: flex-start; }
    .coupon-grid[b-xs0957cwyw] { grid-template-columns: 1fr; }
    .action-group[b-xs0957cwyw] { flex-direction: column; }
    .search-box[b-xs0957cwyw] { max-width: none; }
    .analytics-stats[b-xs0957cwyw] { grid-template-columns: 1fr; }
    .analytics-impact-row[b-xs0957cwyw] { grid-template-columns: 1fr; }
    .analytics-highlights-row[b-xs0957cwyw] { grid-template-columns: 1fr; }
    .hide-mobile[b-xs0957cwyw] { display: none !important; }
    .analytics-toolbar[b-xs0957cwyw] { flex-direction: column; align-items: stretch; }
    .date-range[b-xs0957cwyw] { flex-direction: column; }
    .tab-nav[b-xs0957cwyw] { overflow-x: auto; }
}

@media (max-width: 540px) {
    .drawer[b-xs0957cwyw] { width: 100vw; }
    .field-row[b-xs0957cwyw] { grid-template-columns: 1fr; }
}

/* RTL Support */
:global([dir="rtl"]) .coupon-actions[b-xs0957cwyw] { flex-direction: row-reverse; }
:global([dir="rtl"]) .action-group[b-xs0957cwyw] { flex-direction: row-reverse; }
:global([dir="rtl"]) .combinable-dot[b-xs0957cwyw] { margin-left: 0; margin-right: 4px; }
:global([dir="rtl"]) .perf-table th[b-xs0957cwyw], :global([dir="rtl"]) .usage-table th[b-xs0957cwyw] { text-align: right; }
:global([dir="rtl"]) .perf-table .num-col[b-xs0957cwyw], :global([dir="rtl"]) .usage-table .num-col[b-xs0957cwyw] { text-align: left; }
:global([dir="rtl"]) .usage-bar-text[b-xs0957cwyw] { margin-left: 0; margin-right: 0.35rem; }
:global([dir="rtl"]) .drawer[b-xs0957cwyw] { right: auto; left: 0; transform: translateX(-100%); box-shadow: 8px 0 40px rgba(0, 0, 0, 0.08), 1px 0 0 var(--border); }
:global([dir="rtl"]) .input-suffix-tag[b-xs0957cwyw] { border-left: none; border-right: 1px solid var(--border); }
:global([dir="rtl"]) .toggle-thumb[b-xs0957cwyw] { left: auto; right: 3px; }
:global([dir="rtl"]) .toggle-switch-drawer input:checked ~ .toggle-thumb[b-xs0957cwyw] { transform: translateX(-20px); }
:global([dir="rtl"]) select.field-input[b-xs0957cwyw] { background-position: left 0.75rem center; padding-right: 0.75rem; padding-left: 2rem; }
/* _content/QrBiteHub.Web/Components/Pages/Staff/DailySettlement.razor.rz.scp.css */
/* Daily Settlement Page */
.settlement-page[b-uonm46ac8f] { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

/* Header */
.page-header[b-uonm46ac8f] { margin-bottom: 1.5rem; }
.header-content[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header-left h1[b-uonm46ac8f] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.header-subtitle[b-uonm46ac8f] { font-size: 0.85rem; color: var(--text-muted); }
.header-status[b-uonm46ac8f] { display: flex; align-items: center; }

/* Status Badges */
.status-badge[b-uonm46ac8f], .status-pill[b-uonm46ac8f] { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.status-open[b-uonm46ac8f] { background: var(--success-bg); color: var(--success-text); }
.status-closing[b-uonm46ac8f] { background: var(--warning-bg); color: var(--warning-text); }
.status-closed[b-uonm46ac8f] { background: var(--bg-elevated); color: var(--text-muted); }

/* Tab Navigation */
.tab-nav[b-uonm46ac8f] { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.tab-btn[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.25rem; border: none; background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; margin-bottom: -1px; font-family: inherit; }
.tab-btn:hover[b-uonm46ac8f] { color: var(--text-primary); background: var(--bg-hover); }
.tab-btn.active[b-uonm46ac8f] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Messages */
.toast-success[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; margin-bottom: 1rem; animation: toastIn-b-uonm46ac8f 0.3s ease; }
@keyframes toastIn-b-uonm46ac8f { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.alert.error[b-uonm46ac8f] { padding: 0.75rem 1rem; background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 1rem; }

/* ===== OPEN DAY CARD ===== */
.open-day-card[b-uonm46ac8f] { text-align: center; padding: 3rem 2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); max-width: 480px; margin: 2rem auto; }
.open-day-icon[b-uonm46ac8f] { margin-bottom: 1rem; color: var(--text-muted); opacity: 0.5; }
.open-day-card h2[b-uonm46ac8f] { font-size: 1.25rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.open-day-card p[b-uonm46ac8f] { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 1.5rem; }
.open-day-form[b-uonm46ac8f] { max-width: 280px; margin: 0 auto; }
.open-day-btn[b-uonm46ac8f] { width: 100%; margin-top: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }

/* ===== CLOSED BANNER ===== */
.closed-banner[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; background: var(--success-bg); border: 1px solid var(--success); border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 0.875rem; color: var(--success-text); flex-wrap: wrap; }
.closed-banner strong[b-uonm46ac8f] { margin-right: 0.25rem; }
.closed-banner .variance-badge[b-uonm46ac8f] { margin-left: auto; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; }

/* ===== SUMMARY CARDS ===== */
.summary-cards[b-uonm46ac8f] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.summary-card[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.85rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-icon[b-uonm46ac8f] { width: 42px; height: 42px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-icon.revenue[b-uonm46ac8f] { background: var(--accent-subtle); color: var(--accent); }
.card-icon.orders[b-uonm46ac8f] { background: var(--success-bg); color: var(--success); }
.card-icon.avg[b-uonm46ac8f] { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.card-icon.tips[b-uonm46ac8f] { background: var(--warning-bg); color: var(--warning); }
.card-info[b-uonm46ac8f] { display: flex; flex-direction: column; min-width: 0; }
.card-value[b-uonm46ac8f] { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-label[b-uonm46ac8f] { font-size: 0.75rem; color: var(--text-muted); }

/* ===== DETAILS GRID ===== */
.details-grid[b-uonm46ac8f] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.detail-card[b-uonm46ac8f] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); }
.detail-card.wide[b-uonm46ac8f] { grid-column: 1 / -1; }
.detail-card h4[b-uonm46ac8f] { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.85rem; }
.breakdown-list[b-uonm46ac8f] { display: flex; flex-direction: column; gap: 0.1rem; }
.breakdown-row[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.breakdown-row:last-child[b-uonm46ac8f] { border-bottom: none; }
.breakdown-label[b-uonm46ac8f] { font-size: 0.85rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; }
.breakdown-value[b-uonm46ac8f] { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.breakdown-row.discount .breakdown-value[b-uonm46ac8f] { color: var(--danger); }
.breakdown-row.cancelled .breakdown-value[b-uonm46ac8f] { color: var(--danger); }
.breakdown-row.sub[b-uonm46ac8f] { padding-left: 1.25rem; }
.breakdown-row.sub .breakdown-label[b-uonm46ac8f] { font-size: 0.8rem; color: var(--text-muted); }
.breakdown-row.sub .breakdown-value[b-uonm46ac8f] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.tx-count[b-uonm46ac8f] { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }

/* Dots for payment/order types */
.dot[b-uonm46ac8f] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.cash[b-uonm46ac8f] { background: var(--success); }
.dot.card[b-uonm46ac8f] { background: var(--accent); }
.dot.online[b-uonm46ac8f] { background: #6366f1; }
.dot.dinein[b-uonm46ac8f] { background: var(--accent); }
.dot.takeaway[b-uonm46ac8f] { background: var(--warning); }
.dot.delivery[b-uonm46ac8f] { background: #6366f1; }

/* ===== CASH MOVEMENTS ===== */
.movements-section[b-uonm46ac8f] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.movements-header[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.movements-header h4[b-uonm46ac8f] { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.add-movement-btn[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; padding: 0.35rem 0.75rem; }
.movements-empty[b-uonm46ac8f] { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 1rem; margin: 0; }
.movements-list[b-uonm46ac8f] { display: flex; flex-direction: column; }
.movement-row[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.movement-row:last-child[b-uonm46ac8f] { border-bottom: none; }
.movement-info[b-uonm46ac8f] { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.movement-type[b-uonm46ac8f] { font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 10px; display: inline-block; width: fit-content; }
.type-float[b-uonm46ac8f] { background: var(--accent-subtle); color: var(--accent); }
.type-drop[b-uonm46ac8f] { background: var(--danger-bg); color: var(--danger-text); }
.type-entry[b-uonm46ac8f] { background: var(--success-bg); color: var(--success-text); }
.type-expense[b-uonm46ac8f] { background: var(--warning-bg); color: var(--warning-text); }
.type-adjust[b-uonm46ac8f] { background: var(--bg-elevated); color: var(--text-secondary); }
.movement-meta[b-uonm46ac8f] { font-size: 0.75rem; color: var(--text-muted); }
.movement-notes[b-uonm46ac8f] { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.movement-amount[b-uonm46ac8f] { font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.movement-amount.inflow[b-uonm46ac8f] { color: var(--success); }
.movement-amount.outflow[b-uonm46ac8f] { color: var(--danger); }
.movement-delete[b-uonm46ac8f] { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: 4px; transition: all 0.15s; flex-shrink: 0; }
.movement-delete:hover[b-uonm46ac8f] { background: var(--danger-bg); color: var(--danger); }

/* ===== CLOSE DAY SECTION ===== */
.close-day-section[b-uonm46ac8f] { text-align: center; padding: 1rem 0; }
.close-day-btn[b-uonm46ac8f] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 2rem; font-size: 0.9rem; }

/* ===== CLOSE FLOW ===== */
.close-flow[b-uonm46ac8f] { max-width: 560px; margin: 0 auto; }

/* Step Indicator */
.step-indicator[b-uonm46ac8f] { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 2rem; }
.step[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.5rem; }
.step-num[b-uonm46ac8f] { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.step-text[b-uonm46ac8f] { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.step.active .step-num[b-uonm46ac8f] { border-color: var(--accent); background: var(--accent); color: #fff; }
.step.active .step-text[b-uonm46ac8f] { color: var(--text-primary); }
.step.done .step-num[b-uonm46ac8f] { border-color: var(--success); background: var(--success); color: #fff; }
.step.done .step-text[b-uonm46ac8f] { color: var(--success); }
.step-line[b-uonm46ac8f] { width: 60px; height: 2px; background: var(--border); margin: 0 0.75rem; }
.step-line.done[b-uonm46ac8f] { background: var(--success); }

/* Close Card */
.close-card[b-uonm46ac8f] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-card); }
.close-card h3[b-uonm46ac8f] { font-size: 1.1rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.close-hint[b-uonm46ac8f] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1.25rem; }

/* Expected Cash Display */
.expected-display[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--bg-elevated); border-radius: var(--radius); margin-bottom: 1rem; }
.expected-label[b-uonm46ac8f] { font-size: 0.85rem; color: var(--text-secondary); }
.expected-value[b-uonm46ac8f] { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }

/* Cash Input */
.cash-input[b-uonm46ac8f] { font-size: 1.1rem !important; font-weight: 600; }

/* Variance Preview */
.variance-preview[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 1rem; border-radius: var(--radius); margin-top: 0.75rem; }
.variance-label[b-uonm46ac8f] { font-size: 0.85rem; font-weight: 500; }
.variance-amount[b-uonm46ac8f] { font-size: 1rem; font-weight: 700; }
.variance-over[b-uonm46ac8f] { background: var(--success-bg); color: var(--success-text); }
.variance-short[b-uonm46ac8f] { background: var(--danger-bg); color: var(--danger-text); }
.variance-zero[b-uonm46ac8f] { background: var(--bg-elevated); color: var(--text-secondary); }

/* Warning Banner */
.warning-banner[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--radius); font-size: 0.8rem; color: var(--warning-text); margin-top: 0.75rem; }

/* Close Actions */
.close-actions[b-uonm46ac8f] { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }

/* Review Grid */
.review-grid[b-uonm46ac8f] { display: flex; flex-direction: column; gap: 0; }
.review-row[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.review-row:last-child[b-uonm46ac8f] { border-bottom: none; }
.review-row span[b-uonm46ac8f] { color: var(--text-secondary); }
.review-row strong[b-uonm46ac8f] { color: var(--text-primary); }
.review-row.variance[b-uonm46ac8f] { padding: 0.65rem 0.75rem; border-radius: var(--radius); margin-top: 0.5rem; border-bottom: none; }
.review-row.variance strong[b-uonm46ac8f] { font-size: 1rem; }

/* Final Warning */
.final-warning[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--bg-elevated); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem; }

/* ===== HISTORY ===== */
.history-section[b-uonm46ac8f] { }
.history-filters[b-uonm46ac8f] { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.date-field[b-uonm46ac8f] { display: flex; flex-direction: column; gap: 0.25rem; }
.date-field label[b-uonm46ac8f] { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.date-field input[b-uonm46ac8f] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.45rem 0.65rem; color: var(--text-primary); font-size: 0.85rem; outline: none; font-family: inherit; }
.date-field input:focus[b-uonm46ac8f] { border-color: var(--accent); }
.apply-btn[b-uonm46ac8f] { height: fit-content; }
.history-loading[b-uonm46ac8f] { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem; color: var(--text-muted); font-size: 0.875rem; }

/* Empty State */
.empty-state[b-uonm46ac8f] { text-align: center; padding: 3rem 2rem; color: var(--text-muted); }
.empty-state svg[b-uonm46ac8f] { margin-bottom: 1rem; opacity: 0.5; }
.empty-state h3[b-uonm46ac8f] { color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 0.5rem; }
.empty-state p[b-uonm46ac8f] { font-size: 0.875rem; max-width: 360px; margin: 0 auto; }

/* History Table */
.history-table-wrap[b-uonm46ac8f] { overflow-x: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.history-table[b-uonm46ac8f] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.history-table th[b-uonm46ac8f] { text-align: left; padding: 0.65rem 0.85rem; color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.history-table td[b-uonm46ac8f] { padding: 0.6rem 0.85rem; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.history-table tbody tr[b-uonm46ac8f] { cursor: pointer; transition: background 0.15s; }
.history-table tbody tr:hover[b-uonm46ac8f] { background: var(--bg-hover); }
.history-table tbody tr.selected[b-uonm46ac8f] { background: var(--accent-subtle); }
.history-table .num-col[b-uonm46ac8f] { text-align: right; }
.text-muted[b-uonm46ac8f] { color: var(--text-muted); }

/* Pagination */
.pagination[b-uonm46ac8f] { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 0; }
.page-info[b-uonm46ac8f] { font-size: 0.85rem; color: var(--text-muted); }

/* History Detail */
.history-detail[b-uonm46ac8f] { margin-top: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); }
.detail-header[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.detail-header h3[b-uonm46ac8f] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }

/* Snapshot Grid */
.snapshot-grid[b-uonm46ac8f] { display: flex; flex-direction: column; }
.snapshot-row[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.snapshot-row:last-child[b-uonm46ac8f] { border-bottom: none; }
.snapshot-row span[b-uonm46ac8f] { color: var(--text-secondary); }
.snapshot-row strong[b-uonm46ac8f] { color: var(--text-primary); }
.snapshot-row.variance-over strong[b-uonm46ac8f] { color: var(--success); }
.snapshot-row.variance-short strong[b-uonm46ac8f] { color: var(--danger); }
.snapshot-row.notes[b-uonm46ac8f] { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.snapshot-row.notes strong[b-uonm46ac8f] { font-weight: 400; font-style: italic; }

/* ===== MODAL ===== */
.modal-overlay[b-uonm46ac8f] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[b-uonm46ac8f] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); }
.modal-header[b-uonm46ac8f] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-header h3[b-uonm46ac8f] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.modal-body[b-uonm46ac8f] { padding: 1.25rem; }
.modal-footer[b-uonm46ac8f] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); }

/* Confirm Modal */
.confirm-modal[b-uonm46ac8f] { text-align: center; padding: 2rem !important; max-width: 400px !important; }
.confirm-icon[b-uonm46ac8f] { margin: 0 auto 1rem; }
.confirm-icon.danger svg[b-uonm46ac8f] { color: var(--danger); }
.confirm-modal h3[b-uonm46ac8f] { font-size: 1.1rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.confirm-modal p[b-uonm46ac8f] { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.5; }
.confirm-actions[b-uonm46ac8f] { display: flex; gap: 0.75rem; justify-content: center; }

/* ===== FORM ELEMENTS ===== */
.field[b-uonm46ac8f] { margin-bottom: 0.875rem; }
.field:last-child[b-uonm46ac8f] { margin-bottom: 0; }
.field-label[b-uonm46ac8f] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
.optional-tag[b-uonm46ac8f] { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.field-input[b-uonm46ac8f] { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.field-input:focus[b-uonm46ac8f] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.field-input[b-uonm46ac8f]::placeholder { color: var(--text-muted); }
textarea.field-input[b-uonm46ac8f] { resize: vertical; min-height: 56px; }
select.field-input[b-uonm46ac8f] { appearance: none; cursor: pointer; }
select.field-input option[b-uonm46ac8f] { background: var(--bg-card); }
.input-suffixed[b-uonm46ac8f] { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.input-suffixed:focus-within[b-uonm46ac8f] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.input-suffixed input[b-uonm46ac8f] { flex: 1; background: transparent; border: none; padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; min-width: 0; }
.input-suffixed input[b-uonm46ac8f]::placeholder { color: var(--text-muted); }
.input-suffix-tag[b-uonm46ac8f] { padding: 0 0.75rem; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); background: var(--bg-elevated); border-left: 1px solid var(--border); display: flex; align-items: center; align-self: stretch; white-space: nowrap; }

/* Buttons */
.btn[b-uonm46ac8f] { padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn.primary[b-uonm46ac8f] { background: var(--accent); color: #fff; }
.btn.primary:hover[b-uonm46ac8f] { background: var(--accent-hover); }
.btn.primary:disabled[b-uonm46ac8f] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
.btn.secondary[b-uonm46ac8f] { background: var(--bg-elevated); color: var(--text-secondary); }
.btn.secondary:hover[b-uonm46ac8f] { background: var(--bg-hover); color: var(--text-primary); }
.btn.secondary:disabled[b-uonm46ac8f] { opacity: 0.5; cursor: not-allowed; }
.btn.danger[b-uonm46ac8f] { background: var(--danger); color: #fff; }
.btn.danger:hover[b-uonm46ac8f] { opacity: 0.9; }
.btn.danger:disabled[b-uonm46ac8f] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }

/* Spinner */
.spinner-sm[b-uonm46ac8f] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-uonm46ac8f 0.6s linear infinite; }
@keyframes spin-b-uonm46ac8f { to { transform: rotate(360deg); } }

/* Drawer close button */
.drawer-close[b-uonm46ac8f] { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.drawer-close:hover[b-uonm46ac8f] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .summary-cards[b-uonm46ac8f] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .settlement-page[b-uonm46ac8f] { padding: 1rem; }
    .header-content[b-uonm46ac8f] { flex-direction: column; align-items: flex-start; }
    .summary-cards[b-uonm46ac8f] { grid-template-columns: 1fr; }
    .details-grid[b-uonm46ac8f] { grid-template-columns: 1fr; }
    .history-filters[b-uonm46ac8f] { flex-direction: column; align-items: stretch; }
    .tab-nav[b-uonm46ac8f] { overflow-x: auto; }
}

/* ===== RTL SUPPORT ===== */
:global([dir="rtl"]) .input-suffix-tag[b-uonm46ac8f] { border-left: none; border-right: 1px solid var(--border); }
:global([dir="rtl"]) .history-table th[b-uonm46ac8f] { text-align: right; }
:global([dir="rtl"]) .history-table .num-col[b-uonm46ac8f] { text-align: left; }
:global([dir="rtl"]) .close-actions[b-uonm46ac8f] { flex-direction: row-reverse; }
:global([dir="rtl"]) .confirm-actions[b-uonm46ac8f] { flex-direction: row-reverse; }
:global([dir="rtl"]) .closed-banner .variance-badge[b-uonm46ac8f] { margin-left: 0; margin-right: auto; }
/* _content/QrBiteHub.Web/Components/Pages/Staff/Languages.razor.rz.scp.css */
/* Languages Admin Page */
.languages-page[b-syuf8z4hmx] { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

.page-header[b-syuf8z4hmx] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.header-text h1[b-syuf8z4hmx] { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem; }
.header-text p[b-syuf8z4hmx] { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* KPI Cards */
.kpi-row[b-syuf8z4hmx] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card[b-syuf8z4hmx] { display: flex; align-items: center; gap: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; }
.kpi-icon[b-syuf8z4hmx] { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon.active[b-syuf8z4hmx] { background: rgba(245, 133, 36, 0.15); color: #f58524; }
.kpi-icon.total[b-syuf8z4hmx] { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.kpi-icon.default[b-syuf8z4hmx] { background: rgba(245, 133, 36, 0.15); color: #f58524; }
.kpi-info[b-syuf8z4hmx] { display: flex; flex-direction: column; }
.kpi-value[b-syuf8z4hmx] { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.kpi-label[b-syuf8z4hmx] { font-size: 0.75rem; color: var(--text-muted); }

/* Language Cards Grid */
.lang-grid[b-syuf8z4hmx] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.lang-card[b-syuf8z4hmx] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.2s; }
.lang-card:hover[b-syuf8z4hmx] { border-color: var(--accent); }
.lang-card.inactive[b-syuf8z4hmx] { opacity: 0.6; }
.lang-card-header[b-syuf8z4hmx] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1rem 0; }
.lang-code-badge[b-syuf8z4hmx] { font-size: 0.85rem; font-weight: 700; color: var(--accent); background: rgba(245, 133, 36, 0.12); padding: 4px 10px; border-radius: 6px; letter-spacing: 0.05em; }
.lang-code-badge.rtl[b-syuf8z4hmx] { direction: rtl; }
.lang-card-actions[b-syuf8z4hmx] { display: flex; align-items: center; gap: 4px; }
.default-star[b-syuf8z4hmx] { display: flex; align-items: center; }
.lang-card-body[b-syuf8z4hmx] { padding: 0.75rem 1rem; }
.lang-name[b-syuf8z4hmx] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.lang-native[b-syuf8z4hmx] { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.lang-meta[b-syuf8z4hmx] { display: flex; gap: 6px; flex-wrap: wrap; }
.meta-tag[b-syuf8z4hmx] { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.meta-tag.rtl[b-syuf8z4hmx] { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.meta-tag.active[b-syuf8z4hmx] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.meta-tag.inactive-tag[b-syuf8z4hmx] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.meta-tag.translations[b-syuf8z4hmx] { background: rgba(245, 133, 36, 0.1); color: var(--text-muted); }
.lang-card-footer[b-syuf8z4hmx] { display: flex; justify-content: flex-end; gap: 4px; padding: 0.5rem 1rem 1rem; border-top: 1px solid var(--border); }

/* Empty State */
.empty-state[b-syuf8z4hmx] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg[b-syuf8z4hmx] { margin-bottom: 1rem; opacity: 0.4; }
.empty-state h3[b-syuf8z4hmx] { font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 0.5rem; }
.empty-state p[b-syuf8z4hmx] { font-size: 0.85rem; margin: 0; }

/* Access Denied */
.access-denied[b-syuf8z4hmx] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.access-denied svg[b-syuf8z4hmx] { margin-bottom: 1rem; opacity: 0.4; }
.access-denied h3[b-syuf8z4hmx] { font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 0.5rem; }
.access-denied p[b-syuf8z4hmx] { font-size: 0.85rem; margin: 0; }

/* Modal */
.modal-overlay[b-syuf8z4hmx] { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; backdrop-filter: blur(4px); }
.modal[b-syuf8z4hmx] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; }
.modal-header[b-syuf8z4hmx] { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-header h2[b-syuf8z4hmx] { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.close-btn[b-syuf8z4hmx] { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.close-btn:hover[b-syuf8z4hmx] { color: var(--text-primary); background: var(--bg-hover); }
.modal-body[b-syuf8z4hmx] { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-footer[b-syuf8z4hmx] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }

/* Form */
.form-group[b-syuf8z4hmx] { display: flex; flex-direction: column; gap: 6px; }
.form-group label[b-syuf8z4hmx] { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }
.form-hint[b-syuf8z4hmx] { font-size: 0.7rem; color: var(--text-muted); }
.form-row[b-syuf8z4hmx] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.error-banner[b-syuf8z4hmx] { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; }
.checkbox-group[b-syuf8z4hmx] { flex-direction: row !important; }
.checkbox-label[b-syuf8z4hmx] { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-primary); }

/* Confirm Modal */
.confirm-modal[b-syuf8z4hmx] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; text-align: center; max-width: 400px; width: 100%; }
.confirm-icon[b-syuf8z4hmx] { margin-bottom: 1rem; color: #f59e0b; }
.confirm-modal h3[b-syuf8z4hmx] { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.confirm-modal p[b-syuf8z4hmx] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1.5rem; }
.confirm-actions[b-syuf8z4hmx] { display: flex; justify-content: center; gap: 0.75rem; }

/* Buttons */
.btn[b-syuf8z4hmx] { padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover[b-syuf8z4hmx] { background: var(--bg-hover); }
.btn.cta[b-syuf8z4hmx] { background: #f58524; border-color: #f58524; color: white; }
.btn.cta:hover[b-syuf8z4hmx] { background: #e07520; }
.btn.cta:disabled[b-syuf8z4hmx] { opacity: 0.6; cursor: not-allowed; }
.btn.danger[b-syuf8z4hmx] { background: #ef4444; border-color: #ef4444; color: white; }
.btn.danger:hover[b-syuf8z4hmx] { background: #dc2626; }
.btn.danger:disabled[b-syuf8z4hmx] { opacity: 0.6; cursor: not-allowed; }
.icon-btn[b-syuf8z4hmx] { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover[b-syuf8z4hmx] { color: var(--text-primary); background: var(--bg-hover); }
.icon-btn.sm[b-syuf8z4hmx] { padding: 4px; }
.icon-btn.danger:hover[b-syuf8z4hmx] { color: #ef4444; }
.input[b-syuf8z4hmx] { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; color: var(--text-primary); width: 100%; }
.input:focus[b-syuf8z4hmx] { outline: none; border-color: var(--accent); }
.input:disabled[b-syuf8z4hmx] { opacity: 0.5; cursor: not-allowed; }

/* Toast */
.toast[b-syuf8z4hmx] { position: fixed; bottom: 2rem; right: 2rem; background: #10b981; color: white; padding: 0.75rem 1.25rem; border-radius: 10px; font-size: 0.85rem; font-weight: 500; z-index: 2000; animation: slideUp 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.toast.error[b-syuf8z4hmx] { background: #ef4444; }

@@keyframes slideUp {
    from[b-syuf8z4hmx] { transform: translateY(20px); opacity: 0; }
    to[b-syuf8z4hmx] { transform: translateY(0); opacity: 1; }
}

/* Responsive */
@@media (max-width: 768px) {
    .languages-page[b-syuf8z4hmx] { padding: 1rem; }
    .page-header[b-syuf8z4hmx] { flex-direction: column; }
    .kpi-row[b-syuf8z4hmx] { grid-template-columns: 1fr; }
    .lang-grid[b-syuf8z4hmx] { grid-template-columns: 1fr; }
    .form-row[b-syuf8z4hmx] { grid-template-columns: 1fr; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/OrderHistory.razor.rz.scp.css */
/* Order History Page */
.order-history-page[b-r8oa72dvq6] { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

.page-header[b-r8oa72dvq6] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-header h1[b-r8oa72dvq6] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.btn-export[b-r8oa72dvq6] { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.btn-export:hover:not(:disabled)[b-r8oa72dvq6] { background: var(--bg-elevated); border-color: var(--accent); }
.btn-export:disabled[b-r8oa72dvq6] { opacity: 0.4; cursor: not-allowed; }

/* ============================
   SUMMARY CARDS
   ============================ */
.summary-cards[b-r8oa72dvq6] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card[b-r8oa72dvq6] { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: all 0.2s; }
.stat-card:hover[b-r8oa72dvq6] { border-color: var(--border-hover); box-shadow: var(--shadow); }
.stat-icon[b-r8oa72dvq6] { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
.stat-icon.orders-icon[b-r8oa72dvq6] { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
.stat-icon.revenue-icon[b-r8oa72dvq6] { background: rgba(245, 133, 36, 0.12); color: #f58524; }
.stat-icon.paid-icon[b-r8oa72dvq6] { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.stat-icon.unpaid-icon[b-r8oa72dvq6] { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.stat-icon.avg-icon[b-r8oa72dvq6] { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.stat-icon.cancelled-icon[b-r8oa72dvq6] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.stat-content[b-r8oa72dvq6] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-value[b-r8oa72dvq6] { font-size: 18px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-sub[b-r8oa72dvq6] { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.stat-label[b-r8oa72dvq6] { font-size: 12px; font-weight: 500; color: var(--text-muted); }

/* Type Breakdown Chips */
.type-breakdown[b-r8oa72dvq6] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.type-chip[b-r8oa72dvq6] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.type-chip.dinein[b-r8oa72dvq6] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.type-chip.takeaway[b-r8oa72dvq6] { background: rgba(245, 133, 36, 0.1); color: #f58524; }
.type-chip.delivery[b-r8oa72dvq6] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

/* ============================
   FILTERS
   ============================ */
.filters-bar[b-r8oa72dvq6] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 1.5rem; box-shadow: var(--shadow); }
.filter-row[b-r8oa72dvq6] { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-group[b-r8oa72dvq6] { display: flex; flex-direction: column; gap: 4px; }
.filter-group label[b-r8oa72dvq6] { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.filter-group input[b-r8oa72dvq6], .filter-group select[b-r8oa72dvq6] { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font-size: 13px; min-width: 140px; outline: none; transition: border-color 0.2s; }
.filter-group input:focus[b-r8oa72dvq6], .filter-group select:focus[b-r8oa72dvq6] { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); }
.search-group[b-r8oa72dvq6] { flex: 1; min-width: 200px; }
.search-group input[b-r8oa72dvq6] { width: 100%; }

/* Empty state */
.empty-state[b-r8oa72dvq6] { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; color: var(--text-muted); }

/* ============================
   DATA TABLE
   ============================ */
.results-table[b-r8oa72dvq6] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.table-header[b-r8oa72dvq6] { display: grid; grid-template-columns: 120px 100px 90px 1fr 50px 100px 90px 90px 80px; padding: 12px 16px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.table-row[b-r8oa72dvq6] { display: grid; grid-template-columns: 120px 100px 90px 1fr 50px 100px 90px 90px 80px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-primary); cursor: pointer; transition: background 0.15s; align-items: center; }
.table-row:hover[b-r8oa72dvq6] { background: var(--bg-hover); }
.table-row:last-child[b-r8oa72dvq6] { border-bottom: none; }

.col-customer[b-r8oa72dvq6] { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
.customer-name[b-r8oa72dvq6] { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-phone[b-r8oa72dvq6] { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.col-items[b-r8oa72dvq6] { text-align: center; color: var(--text-muted); font-size: 12px; }

.daily-tag[b-r8oa72dvq6] { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: rgba(245, 133, 36, 0.15); color: #f58524; margin-left: 4px; }

/* Type pills */
.type-pill[b-r8oa72dvq6] { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.type-pill.dinein[b-r8oa72dvq6] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.type-pill.takeaway[b-r8oa72dvq6] { background: rgba(245, 133, 36, 0.15); color: #f58524; }
.type-pill.delivery[b-r8oa72dvq6] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

/* Status pills */
.status-pill[b-r8oa72dvq6] { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.status-pill.pending[b-r8oa72dvq6] { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.status-pill.confirmed[b-r8oa72dvq6] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.status-pill.preparing[b-r8oa72dvq6] { background: rgba(245, 133, 36, 0.15); color: #f58524; }
.status-pill.ready[b-r8oa72dvq6] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-pill.completed[b-r8oa72dvq6] { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.status-pill.cancelled[b-r8oa72dvq6] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.status-pill.sm[b-r8oa72dvq6] { font-size: 10px; padding: 2px 6px; }

/* Payment pills */
.payment-pill[b-r8oa72dvq6] { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.payment-pill.paid[b-r8oa72dvq6] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.payment-pill.partial[b-r8oa72dvq6] { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.payment-pill.refunded[b-r8oa72dvq6] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.payment-pill.unpaid[b-r8oa72dvq6] { background: rgba(239, 68, 68, 0.1); color: #f87171; }

/* Action buttons in table */
.col-actions[b-r8oa72dvq6] { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.btn-icon[b-r8oa72dvq6] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.btn-icon:hover[b-r8oa72dvq6] { background: var(--bg-hover); color: var(--accent); }
.btn-pay-sm[b-r8oa72dvq6] { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(245, 133, 36, 0.25); background: rgba(245, 133, 36, 0.1); color: #f58524; cursor: pointer; transition: all 0.2s; }
.btn-pay-sm:hover[b-r8oa72dvq6] { background: rgba(245, 133, 36, 0.2); border-color: rgba(245, 133, 36, 0.4); }

/* Pagination */
.pagination[b-r8oa72dvq6] { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.page-btn[b-r8oa72dvq6] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; transition: all 0.2s; }
.page-btn:hover:not(:disabled)[b-r8oa72dvq6] { border-color: var(--accent); }
.page-btn:disabled[b-r8oa72dvq6] { opacity: 0.3; cursor: not-allowed; }
.page-info[b-r8oa72dvq6] { font-size: 13px; color: var(--text-muted); }

/* ============================
   MODALS
   ============================ */
.modal-overlay[b-r8oa72dvq6] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(4px); }
.detail-modal[b-r8oa72dvq6], .timeline-modal[b-r8oa72dvq6] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 600px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.modal-header[b-r8oa72dvq6] { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal-header h2[b-r8oa72dvq6] { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.modal-header div[b-r8oa72dvq6] { display: flex; align-items: center; gap: 10px; }
.btn-close[b-r8oa72dvq6] { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; }
.btn-close:hover[b-r8oa72dvq6] { background: var(--bg-hover); color: var(--text-primary); }
.order-ref[b-r8oa72dvq6] { font-size: 14px; color: var(--text-muted); font-weight: 600; }

.modal-body[b-r8oa72dvq6] { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-footer[b-r8oa72dvq6] { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); }
.btn-secondary[b-r8oa72dvq6] { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); font-size: 13px; cursor: pointer; transition: all 0.2s; }
.btn-secondary:hover[b-r8oa72dvq6] { border-color: var(--accent); color: var(--accent); }
.btn-pay[b-r8oa72dvq6] { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; border: none; background: linear-gradient(135deg, #f58524 0%, #ff9f4a 100%); color: white; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(245, 133, 36, 0.3); }
.btn-pay:hover[b-r8oa72dvq6] { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245, 133, 36, 0.4); }

/* Info grid */
.info-grid[b-r8oa72dvq6] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.info-item[b-r8oa72dvq6] { display: flex; flex-direction: column; gap: 2px; }
.info-label[b-r8oa72dvq6] { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.info-value[b-r8oa72dvq6] { font-size: 14px; color: var(--text-primary); }
.info-value.paid[b-r8oa72dvq6] { color: #10b981; }
.info-value.unpaid[b-r8oa72dvq6] { color: #f87171; }
.info-value.partial[b-r8oa72dvq6] { color: #eab308; }
.info-value.refunded[b-r8oa72dvq6] { color: #8b5cf6; }

/* Items list */
.section-title[b-r8oa72dvq6] { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.items-list[b-r8oa72dvq6] { margin-bottom: 16px; }
.item-row[b-r8oa72dvq6] { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.item-row:last-child[b-r8oa72dvq6] { border-bottom: none; }
.item-qty[b-r8oa72dvq6] { font-weight: 600; color: var(--accent); min-width: 30px; font-size: 13px; }
.item-name[b-r8oa72dvq6] { flex: 1; font-size: 13px; color: var(--text-primary); }
.item-mods[b-r8oa72dvq6] { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.item-note[b-r8oa72dvq6] { display: block; font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; }
.item-total[b-r8oa72dvq6] { font-size: 13px; color: var(--text-primary); font-weight: 500; white-space: nowrap; }

/* Totals */
.totals-section[b-r8oa72dvq6] { border-top: 1px dashed var(--border); padding-top: 12px; }
.total-row[b-r8oa72dvq6] { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--text-secondary); }
.total-row.grand[b-r8oa72dvq6] { font-size: 16px; font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }

/* Timeline */
.timeline[b-r8oa72dvq6] { padding-left: 16px; border-left: 2px solid var(--border); }
.timeline-item[b-r8oa72dvq6] { position: relative; padding-bottom: 20px; padding-left: 20px; }
.timeline-item:last-child[b-r8oa72dvq6] { padding-bottom: 0; }
.timeline-dot[b-r8oa72dvq6] { position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--border-hover); }
.timeline-dot.pending[b-r8oa72dvq6] { background: #eab308; }
.timeline-dot.confirmed[b-r8oa72dvq6] { background: #3b82f6; }
.timeline-dot.preparing[b-r8oa72dvq6] { background: #f58524; }
.timeline-dot.ready[b-r8oa72dvq6] { background: #10b981; }
.timeline-dot.completed[b-r8oa72dvq6] { background: #9ca3af; }
.timeline-dot.cancelled[b-r8oa72dvq6] { background: #ef4444; }
.timeline-content[b-r8oa72dvq6] { display: flex; flex-direction: column; gap: 4px; }
.timeline-status[b-r8oa72dvq6] { display: flex; align-items: center; gap: 6px; }
.timeline-meta[b-r8oa72dvq6] { display: flex; gap: 12px; }
.timeline-time[b-r8oa72dvq6] { font-size: 12px; color: var(--text-muted); }
.timeline-who[b-r8oa72dvq6] { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.timeline-notes[b-r8oa72dvq6] { font-size: 12px; color: var(--text-secondary); font-style: italic; padding: 4px 0; }
.empty-timeline[b-r8oa72dvq6] { text-align: center; padding: 32px; color: var(--text-muted); }

/* ============================
   STAFF PAYMENT MODAL
   ============================ */
.payment-modal[b-r8oa72dvq6] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; width: 100%; max-width: 480px; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4); animation: modalIn-b-r8oa72dvq6 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes modalIn-b-r8oa72dvq6 { from { opacity: 0; transform: scale(0.95) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-content[b-r8oa72dvq6] { padding: 24px; }
.amount-hero[b-r8oa72dvq6] { text-align: center; padding: 32px; background: linear-gradient(135deg, var(--accent-soft, rgba(245,133,36,0.1)) 0%, transparent 100%); border: 1px solid rgba(245, 133, 36, 0.2); border-radius: 16px; margin-bottom: 28px; }
.amount-label[b-r8oa72dvq6] { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.amount-value[b-r8oa72dvq6] { font-size: 42px; font-weight: 700; background: linear-gradient(135deg, #f58524 0%, #ff9f4a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; }

.payment-breakdown[b-r8oa72dvq6] { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--bg, #0a0a0a); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 20px; }
.breakdown-row[b-r8oa72dvq6] { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-secondary); }
.breakdown-row span:last-child[b-r8oa72dvq6] { font-weight: 600; color: var(--text-primary); }
.breakdown-row.paid-row span:last-child[b-r8oa72dvq6] { color: #10b981; }

.payment-methods[b-r8oa72dvq6] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 28px; }
.method-card[b-r8oa72dvq6] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; background: var(--bg, #0a0a0a); border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s ease; }
.method-card:hover[b-r8oa72dvq6] { border-color: #f58524; background: var(--bg-card); }
.method-card.active[b-r8oa72dvq6] { border-color: #f58524; background: rgba(245, 133, 36, 0.1); }
.method-icon[b-r8oa72dvq6] { font-size: 24px; }
.method-name[b-r8oa72dvq6] { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.method-card.active .method-name[b-r8oa72dvq6] { color: #f58524; }

.amount-inputs[b-r8oa72dvq6] { display: grid; grid-template-columns: 1fr; gap: 16px; }
.input-group[b-r8oa72dvq6] { display: flex; flex-direction: column; gap: 8px; }
.input-group label[b-r8oa72dvq6] { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.amount-input[b-r8oa72dvq6] { display: flex; align-items: center; background: var(--bg, #0a0a0a); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: all 0.15s ease; }
.amount-input:focus-within[b-r8oa72dvq6] { border-color: #f58524; box-shadow: 0 0 0 3px rgba(245, 133, 36, 0.15); }
.amount-input .prefix[b-r8oa72dvq6] { padding: 14px 0 14px 16px; color: var(--text-muted); font-weight: 600; }
.amount-input input[b-r8oa72dvq6] { flex: 1; padding: 14px 16px 14px 8px; font-size: 16px; font-weight: 600; background: transparent; border: none; color: var(--text-primary); outline: none; }

.payment-modal .modal-footer .btn-primary[b-r8oa72dvq6] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #f58524 0%, #ff9f4a 100%); color: white; border: none; box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3); transition: all 0.2s; }
.payment-modal .modal-footer .btn-primary:hover:not(:disabled)[b-r8oa72dvq6] { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245, 133, 36, 0.4); }
.payment-modal .modal-footer .btn-primary:disabled[b-r8oa72dvq6] { opacity: 0.5; cursor: not-allowed; transform: none; }
.spinner[b-r8oa72dvq6] { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin-b-r8oa72dvq6 0.6s linear infinite; }
@keyframes spin-b-r8oa72dvq6 { to { transform: rotate(360deg); } }

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 1200px) {
    .table-header[b-r8oa72dvq6], .table-row[b-r8oa72dvq6] { grid-template-columns: 100px 90px 80px 1fr 40px 90px 80px 80px 70px; font-size: 12px; padding: 10px 12px; }
    .summary-cards[b-r8oa72dvq6] { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 1024px) {
    .table-header[b-r8oa72dvq6], .table-row[b-r8oa72dvq6] { grid-template-columns: 90px 80px 80px 1fr 90px 80px 80px 60px; font-size: 12px; padding: 10px 12px; }
    .col-items[b-r8oa72dvq6] { display: none; }
    .filter-row[b-r8oa72dvq6] { gap: 8px; }
    .filter-group input[b-r8oa72dvq6], .filter-group select[b-r8oa72dvq6] { min-width: 120px; font-size: 12px; }
    .summary-cards[b-r8oa72dvq6] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .order-history-page[b-r8oa72dvq6] { padding: 1rem; }
    .page-header[b-r8oa72dvq6] { flex-direction: column; gap: 12px; align-items: stretch; }
    .summary-cards[b-r8oa72dvq6] { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card[b-r8oa72dvq6] { padding: 12px; gap: 10px; }
    .stat-icon[b-r8oa72dvq6] { width: 36px; height: 36px; }
    .stat-value[b-r8oa72dvq6] { font-size: 15px; }
    .table-header[b-r8oa72dvq6] { display: none; }
    .table-row[b-r8oa72dvq6] { grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px; }
    .col-items[b-r8oa72dvq6] { display: none; }
    .filter-row[b-r8oa72dvq6] { flex-direction: column; }
    .filter-group[b-r8oa72dvq6] { width: 100%; }
    .filter-group input[b-r8oa72dvq6], .filter-group select[b-r8oa72dvq6] { width: 100%; min-width: auto; }
    .detail-modal[b-r8oa72dvq6], .timeline-modal[b-r8oa72dvq6] { max-width: 100%; margin: 0; border-radius: 12px; }
    .info-grid[b-r8oa72dvq6] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .summary-cards[b-r8oa72dvq6] { grid-template-columns: 1fr 1fr; }
    .stat-icon[b-r8oa72dvq6] { width: 32px; height: 32px; }
    .stat-icon svg[b-r8oa72dvq6] { width: 16px; height: 16px; }
    .stat-value[b-r8oa72dvq6] { font-size: 14px; }
    .stat-label[b-r8oa72dvq6] { font-size: 11px; }
    .payment-methods[b-r8oa72dvq6] { grid-template-columns: repeat(2, 1fr); }
    .payment-modal[b-r8oa72dvq6] { max-width: 100%; border-radius: 16px; }
    .amount-value[b-r8oa72dvq6] { font-size: 32px; }
    .refund-modal[b-r8oa72dvq6] { max-width: 100%; border-radius: 16px; }
    .refund-items-header[b-r8oa72dvq6], .refund-item-row[b-r8oa72dvq6] { grid-template-columns: 1fr 120px 80px; gap: 4px; padding: 10px 12px; }
    .refund-type-pills[b-r8oa72dvq6] { grid-template-columns: repeat(2, 1fr); }
}

/* Refund Modal */
.refund-modal[b-r8oa72dvq6] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: refundModalIn-b-r8oa72dvq6 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

@keyframes refundModalIn-b-r8oa72dvq6 {
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.refund-modal .modal-body[b-r8oa72dvq6] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Refund button in detail footer */
.btn-refund[b-r8oa72dvq6] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg);
    border: 1px solid var(--danger, #ef4444);
    color: var(--danger, #ef4444);
}

.btn-refund:hover[b-r8oa72dvq6] {
    background: var(--danger-bg, rgba(239, 68, 68, 0.1));
}

/* Refund form sections */
.refund-form-section[b-r8oa72dvq6] { margin-bottom: 20px; }

.refund-label[b-r8oa72dvq6] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.optional-hint[b-r8oa72dvq6] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
    font-size: 11px;
}

.refund-hint[b-r8oa72dvq6] {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Type pills */
.refund-type-pills[b-r8oa72dvq6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* Select and textarea */
.refund-select[b-r8oa72dvq6] {
    width: 100%;
    padding: 12px 16px;
    background: var(--input-bg, var(--bg));
    border: 1px solid var(--input-border, var(--border));
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease;
    appearance: auto;
}

.refund-select:focus[b-r8oa72dvq6] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(245, 133, 36, 0.12));
}

.refund-textarea[b-r8oa72dvq6] {
    width: 100%;
    padding: 12px 16px;
    background: var(--input-bg, var(--bg));
    border: 1px solid var(--input-border, var(--border));
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.refund-textarea:focus[b-r8oa72dvq6] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(245, 133, 36, 0.12));
}

.refund-textarea[b-r8oa72dvq6]::placeholder { color: var(--text-muted); }

/* Amount display (read-only for Full) */
.refund-amount-display[b-r8oa72dvq6] {
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

/* Item-level grid */
.refund-items-grid[b-r8oa72dvq6] {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.refund-items-header[b-r8oa72dvq6] {
    display: grid;
    grid-template-columns: 1fr 140px 90px;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.refund-item-row[b-r8oa72dvq6] {
    display: grid;
    grid-template-columns: 1fr 140px 90px;
    gap: 8px;
    padding: 12px 16px;
    align-items: center;
    border-top: 1px solid var(--border);
    transition: background 0.15s ease;
}

.refund-item-row.selected[b-r8oa72dvq6] { background: var(--accent-subtle, rgba(245, 133, 36, 0.08)); }

.refund-item-name[b-r8oa72dvq6] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.refund-qty-control[b-r8oa72dvq6] { display: flex; align-items: center; gap: 8px; }

.qty-btn[b-r8oa72dvq6] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.qty-btn:hover:not(:disabled)[b-r8oa72dvq6] { background: var(--bg-hover); border-color: var(--accent); }
.qty-btn:disabled[b-r8oa72dvq6] { opacity: 0.4; cursor: not-allowed; }

.qty-value[b-r8oa72dvq6] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    min-width: 48px;
    text-align: center;
}

.refund-item-amount[b-r8oa72dvq6] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
}

.refund-items-total[b-r8oa72dvq6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 2px solid var(--border);
    background: var(--bg-elevated);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.refund-items-total span:last-child[b-r8oa72dvq6] { font-family: 'JetBrains Mono', monospace; }

/* Error banner */
.error-banner[b-r8oa72dvq6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--danger-bg, rgba(239, 68, 68, 0.1));
    border: 1px solid var(--danger, #ef4444);
    border-radius: 10px;
    color: var(--danger-text, #ef4444);
    font-size: 13px;
    margin-bottom: 16px;
}

/* btn-danger for refund modal footer */
.btn-danger[b-r8oa72dvq6] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.btn-danger:hover[b-r8oa72dvq6] { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4); }
.btn-danger:disabled[b-r8oa72dvq6] { opacity: 0.6; cursor: not-allowed; transform: none; }
/* _content/QrBiteHub.Web/Components/Pages/Staff/Orders.razor.rz.scp.css */
/* Refund Modal */
.refund-modal[b-e313gpy8fg] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: refundModalIn-b-e313gpy8fg 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

@keyframes refundModalIn-b-e313gpy8fg {
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.refund-modal[b-e313gpy8fg]  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.refund-modal[b-e313gpy8fg]  .modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.refund-modal[b-e313gpy8fg]  .modal-content {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.refund-modal[b-e313gpy8fg]  .modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border);
}

/* Refund button in drawer footer */
[b-e313gpy8fg] .refund-btn {
    background: var(--bg) !important;
    border: 1px solid var(--danger, #ef4444) !important;
    color: var(--danger, #ef4444) !important;
}

[b-e313gpy8fg] .refund-btn:hover {
    background: var(--danger-bg, rgba(239, 68, 68, 0.1)) !important;
    border-color: var(--danger, #ef4444) !important;
}

/* Form sections */
.refund-form-section[b-e313gpy8fg] {
    margin-bottom: 20px;
}

.form-label[b-e313gpy8fg] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.optional-label[b-e313gpy8fg] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
    font-size: 11px;
}

.form-hint[b-e313gpy8fg] {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Refund type pills */
.refund-type-pills[b-e313gpy8fg] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.refund-type-pills[b-e313gpy8fg]  .method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 12px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refund-type-pills[b-e313gpy8fg]  .method-card:hover {
    border-color: var(--accent);
    background: var(--bg-card);
}

.refund-type-pills[b-e313gpy8fg]  .method-card.active {
    border-color: var(--accent);
    background: var(--accent-subtle, rgba(245, 133, 36, 0.12));
}

.refund-type-pills[b-e313gpy8fg]  .method-card .method-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.refund-type-pills[b-e313gpy8fg]  .method-card.active .method-name {
    color: var(--accent);
}

.refund-type-pills[b-e313gpy8fg]  .method-card .method-icon {
    font-size: 20px;
}

/* Refund select dropdown */
.refund-select[b-e313gpy8fg] {
    width: 100%;
    padding: 12px 16px;
    background: var(--input-bg, var(--bg));
    border: 1px solid var(--input-border, var(--border));
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease;
    appearance: auto;
}

.refund-select:focus[b-e313gpy8fg] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(245, 133, 36, 0.12));
}

/* Refund textarea */
.refund-textarea[b-e313gpy8fg] {
    width: 100%;
    padding: 12px 16px;
    background: var(--input-bg, var(--bg));
    border: 1px solid var(--input-border, var(--border));
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.refund-textarea:focus[b-e313gpy8fg] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(245, 133, 36, 0.12));
}

.refund-textarea[b-e313gpy8fg]::placeholder {
    color: var(--text-muted);
}

/* Refund amount display (read-only for Full refunds) */
.refund-amount-display[b-e313gpy8fg] {
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

/* Item-level refund grid */
.refund-items-grid[b-e313gpy8fg] {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.refund-items-header[b-e313gpy8fg] {
    display: grid;
    grid-template-columns: 1fr 140px 90px;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.refund-item-row[b-e313gpy8fg] {
    display: grid;
    grid-template-columns: 1fr 140px 90px;
    gap: 8px;
    padding: 12px 16px;
    align-items: center;
    border-top: 1px solid var(--border);
    transition: background 0.15s ease;
}

.refund-item-row.selected[b-e313gpy8fg] {
    background: var(--accent-subtle, rgba(245, 133, 36, 0.08));
}

.refund-item-name[b-e313gpy8fg] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.refund-qty-control[b-e313gpy8fg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn[b-e313gpy8fg] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.qty-btn:hover:not(:disabled)[b-e313gpy8fg] {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.qty-btn:disabled[b-e313gpy8fg] {
    opacity: 0.4;
    cursor: not-allowed;
}

.qty-value[b-e313gpy8fg] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    min-width: 48px;
    text-align: center;
}

.refund-item-amount[b-e313gpy8fg] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
}

.refund-items-total[b-e313gpy8fg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 2px solid var(--border);
    background: var(--bg-elevated);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.refund-items-total span:last-child[b-e313gpy8fg] {
    font-family: 'JetBrains Mono', monospace;
}

/* Error banner */
.refund-modal[b-e313gpy8fg]  .error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--danger-bg, rgba(239, 68, 68, 0.1));
    border: 1px solid var(--danger, #ef4444);
    border-radius: 10px;
    color: var(--danger-text, #ef4444);
    font-size: 13px;
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 480px) {
    .refund-modal[b-e313gpy8fg] {
        max-width: 100%;
        border-radius: 16px;
    }

    .refund-items-header[b-e313gpy8fg],
    .refund-item-row[b-e313gpy8fg] {
        grid-template-columns: 1fr 120px 80px;
        gap: 4px;
        padding: 10px 12px;
    }

    .refund-type-pills[b-e313gpy8fg] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Refunds.razor.rz.scp.css */
/* Refunds Page */
.refunds-page[b-sdwdoi345u] { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

/* Header */
.page-header[b-sdwdoi345u] { margin-bottom: 1.5rem; }
.header-content[b-sdwdoi345u] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header-left h1[b-sdwdoi345u] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.header-subtitle[b-sdwdoi345u] { font-size: 0.85rem; color: var(--text-muted); }
.header-stats[b-sdwdoi345u] { display: flex; gap: 1rem; }
.stat[b-sdwdoi345u] { text-align: center; padding: 0.5rem 1rem; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.stat-value[b-sdwdoi345u] { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.stat-label[b-sdwdoi345u] { font-size: 0.75rem; color: var(--text-muted); }
.stat.pending .stat-value[b-sdwdoi345u] { color: var(--warning); }
.stat.approved .stat-value[b-sdwdoi345u] { color: var(--accent); }
.stat.processed .stat-value[b-sdwdoi345u] { color: var(--success); }

/* Filter Bar */
.filter-bar[b-sdwdoi345u] { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.filter-chips[b-sdwdoi345u] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip[b-sdwdoi345u] { padding: 0.4rem 0.85rem; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.chip:hover[b-sdwdoi345u] { border-color: var(--border-hover); color: var(--text-secondary); }
.chip.active[b-sdwdoi345u] { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.date-filters[b-sdwdoi345u] { display: flex; align-items: flex-end; gap: 0.5rem; }
.date-field[b-sdwdoi345u] { display: flex; flex-direction: column; gap: 0.25rem; }
.date-field label[b-sdwdoi345u] { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.date-field input[b-sdwdoi345u] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.45rem 0.65rem; color: var(--text-primary); font-size: 0.825rem; outline: none; font-family: inherit; }
.date-field input:focus[b-sdwdoi345u] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.btn-filter-apply[b-sdwdoi345u] { display: flex; align-items: center; gap: 0.35rem; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius); padding: 0.45rem 0.75rem; font-size: 0.825rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn-filter-apply:hover[b-sdwdoi345u] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

/* Empty State */
.empty-state[b-sdwdoi345u] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg[b-sdwdoi345u] { margin-bottom: 1rem; opacity: 0.5; }
.empty-state h3[b-sdwdoi345u] { color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 0.5rem; }
.empty-state p[b-sdwdoi345u] { font-size: 0.875rem; max-width: 360px; margin: 0 auto; }

/* Table */
.refund-table-wrap[b-sdwdoi345u] { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-card); }
.refund-table[b-sdwdoi345u] { width: 100%; border-collapse: collapse; }
.refund-table thead[b-sdwdoi345u] { background: var(--bg-elevated); }
.refund-table th[b-sdwdoi345u] { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.refund-table td[b-sdwdoi345u] { padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.refund-table tbody tr:last-child td[b-sdwdoi345u] { border-bottom: none; }
.refund-row[b-sdwdoi345u] { cursor: pointer; transition: background 0.15s; }
.refund-row:hover[b-sdwdoi345u] { background: var(--bg-hover); }
.num-col[b-sdwdoi345u] { text-align: right; }

/* Table Cell Styles */
.refund-number[b-sdwdoi345u] { font-family: monospace; font-size: 0.825rem; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; }
.order-number[b-sdwdoi345u] { font-family: monospace; font-size: 0.825rem; color: var(--text-secondary); }
.amount-text[b-sdwdoi345u] { font-weight: 600; }
.reason-text[b-sdwdoi345u] { font-size: 0.825rem; color: var(--text-secondary); }
.method-text[b-sdwdoi345u] { font-size: 0.825rem; color: var(--text-secondary); }
.requested-by-text[b-sdwdoi345u] { font-size: 0.825rem; color: var(--text-secondary); }
.date-text[b-sdwdoi345u] { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

/* Type Badges */
.type-badge[b-sdwdoi345u] { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.type-badge.type-full[b-sdwdoi345u] { background: var(--accent-subtle); color: var(--accent); }
.type-badge.type-partial[b-sdwdoi345u] { background: var(--warning-bg); color: var(--warning-text); }
.type-badge.type-item[b-sdwdoi345u] { background: var(--bg-elevated); color: var(--text-secondary); }

/* Status Badges */
.status-badge[b-sdwdoi345u] { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.status-badge.status-pending[b-sdwdoi345u] { background: var(--warning-bg); color: var(--warning-text); }
.status-badge.status-approved[b-sdwdoi345u] { background: var(--accent-subtle); color: var(--accent); }
.status-badge.status-processed[b-sdwdoi345u] { background: var(--success-bg); color: var(--success-text); }
.status-badge.status-failed[b-sdwdoi345u] { background: var(--danger-bg); color: var(--danger-text); }
.status-badge.status-rejected[b-sdwdoi345u] { background: var(--danger-bg); color: var(--danger-text); }

/* Messages */
.alert[b-sdwdoi345u] { padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 1rem; }
.alert.error[b-sdwdoi345u] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }
.toast-success[b-sdwdoi345u] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; margin-bottom: 1rem; animation: toastIn-b-sdwdoi345u 0.3s ease; }
@keyframes toastIn-b-sdwdoi345u { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ==============================
   DRAWER PANEL
   ============================== */
.drawer-backdrop[b-sdwdoi345u] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 999; animation: drawerFadeIn-b-sdwdoi345u 0.3s ease forwards; }
@keyframes drawerFadeIn-b-sdwdoi345u { from { opacity: 0; } to { opacity: 1; } }

.drawer[b-sdwdoi345u] { position: fixed; top: 0; right: 0; width: 520px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--bg-card); z-index: 1000; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08), -1px 0 0 var(--border); transform: translateX(100%); animation: drawerSlideIn-b-sdwdoi345u 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
@keyframes drawerSlideIn-b-sdwdoi345u { to { transform: translateX(0); } }

.drawer-header[b-sdwdoi345u] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.drawer-header-left[b-sdwdoi345u] { display: flex; align-items: center; gap: 0.75rem; }
.drawer-header-icon[b-sdwdoi345u] { width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-subtle); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.drawer-title[b-sdwdoi345u] { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.drawer-subtitle[b-sdwdoi345u] { font-size: 0.75rem; color: var(--text-muted); margin-top: 1px; }
.drawer-close[b-sdwdoi345u] { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.drawer-close:hover[b-sdwdoi345u] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }

.drawer-body[b-sdwdoi345u] { flex: 1; overflow-y: auto; padding: 0; scroll-behavior: smooth; }
.drawer-body[b-sdwdoi345u]::-webkit-scrollbar { width: 4px; }
.drawer-body[b-sdwdoi345u]::-webkit-scrollbar-track { background: transparent; }
.drawer-body[b-sdwdoi345u]::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
.drawer-body[b-sdwdoi345u]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.drawer-footer[b-sdwdoi345u] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; }

/* Detail Sections */
.detail-section[b-sdwdoi345u] { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.detail-section:last-child[b-sdwdoi345u] { border-bottom: none; }
.section-label[b-sdwdoi345u] { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.section-label[b-sdwdoi345u]::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-label svg[b-sdwdoi345u] { flex-shrink: 0; opacity: 0.5; }

/* Detail Grid */
.detail-grid[b-sdwdoi345u] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.detail-item[b-sdwdoi345u] { display: flex; flex-direction: column; gap: 0.2rem; }
.detail-item.full-width[b-sdwdoi345u] { grid-column: 1 / -1; }
.detail-label[b-sdwdoi345u] { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.detail-value[b-sdwdoi345u] { font-size: 0.875rem; color: var(--text-primary); }
.detail-value.mono[b-sdwdoi345u] { font-family: monospace; font-weight: 600; }

/* Amount Rows */
.amount-rows[b-sdwdoi345u] { display: flex; flex-direction: column; gap: 0.5rem; }
.amount-row[b-sdwdoi345u] { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; background: var(--bg-elevated); border-radius: var(--radius); }
.amount-label[b-sdwdoi345u] { font-size: 0.85rem; color: var(--text-secondary); }
.amount-value[b-sdwdoi345u] { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.amount-value.accent[b-sdwdoi345u] { color: var(--accent); }
.amount-value.success[b-sdwdoi345u] { color: var(--success); }

/* Refund Lines */
.refund-lines[b-sdwdoi345u] { display: flex; flex-direction: column; gap: 0.5rem; }
.refund-line-item[b-sdwdoi345u] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.65rem 0.75rem; background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--border); }
.line-info[b-sdwdoi345u] { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.line-name[b-sdwdoi345u] { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-qty[b-sdwdoi345u] { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); background: var(--bg-deep); padding: 0.15rem 0.4rem; border-radius: 4px; white-space: nowrap; }
.line-amount[b-sdwdoi345u] { font-size: 0.875rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.line-reason[b-sdwdoi345u] { width: 100%; font-size: 0.75rem; color: var(--text-muted); font-style: italic; }

/* Timeline */
.timeline[b-sdwdoi345u] { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 1.25rem; }
.timeline-item[b-sdwdoi345u] { position: relative; padding-bottom: 1.25rem; padding-left: 1rem; }
.timeline-item:last-child[b-sdwdoi345u] { padding-bottom: 0; }
.timeline-item[b-sdwdoi345u]::before { content: ''; position: absolute; left: -1.25rem; top: 8px; bottom: 0; width: 2px; background: var(--border); }
.timeline-item:last-child[b-sdwdoi345u]::before { display: none; }
.timeline-dot[b-sdwdoi345u] { position: absolute; left: -1.25rem; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--border-hover); transform: translateX(-4px); z-index: 1; }
.timeline-item.active .timeline-dot[b-sdwdoi345u] { background: var(--accent); }
.timeline-dot.approved[b-sdwdoi345u] { background: var(--accent); }
.timeline-dot.processed[b-sdwdoi345u] { background: var(--success); }
.timeline-dot.rejected[b-sdwdoi345u] { background: var(--danger); }
.timeline-content[b-sdwdoi345u] { display: flex; flex-direction: column; gap: 0.15rem; }
.timeline-title[b-sdwdoi345u] { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.timeline-meta[b-sdwdoi345u] { font-size: 0.8rem; color: var(--text-secondary); }
.timeline-date[b-sdwdoi345u] { font-size: 0.75rem; color: var(--text-muted); }
.timeline-reason[b-sdwdoi345u] { font-size: 0.8rem; color: var(--danger); font-style: italic; margin-top: 0.25rem; }

/* ==============================
   MODAL
   ============================== */
.modal-overlay[b-sdwdoi345u] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[b-sdwdoi345u] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header[b-sdwdoi345u] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-header h3[b-sdwdoi345u] { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.modal-body[b-sdwdoi345u] { padding: 1.25rem 1.5rem; }
.modal-desc[b-sdwdoi345u] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1rem; line-height: 1.5; }
.modal-footer[b-sdwdoi345u] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }

/* Confirm Modal */
.confirm-modal[b-sdwdoi345u] { text-align: center; padding: 2rem !important; max-width: 400px !important; }
.confirm-icon[b-sdwdoi345u] { margin: 0 auto 1rem; }
.confirm-icon.danger svg[b-sdwdoi345u] { color: var(--danger); }
.confirm-modal h3[b-sdwdoi345u] { font-size: 1.1rem; color: var(--text-primary); margin: 0 0 0.5rem; }
.confirm-modal p[b-sdwdoi345u] { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.5; }
.confirm-actions[b-sdwdoi345u] { display: flex; gap: 0.75rem; justify-content: center; }

/* Fields */
.field[b-sdwdoi345u] { margin-bottom: 0.875rem; }
.field:last-child[b-sdwdoi345u] { margin-bottom: 0; }
.field-label[b-sdwdoi345u] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
.field-input[b-sdwdoi345u] { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.field-input:focus[b-sdwdoi345u] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.field-input[b-sdwdoi345u]::placeholder { color: var(--text-muted); }
textarea.field-input[b-sdwdoi345u] { resize: vertical; min-height: 56px; }
.readonly-value[b-sdwdoi345u] { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); padding: 0.5rem 0.75rem; background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--border); }
.input-suffixed[b-sdwdoi345u] { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.input-suffixed:focus-within[b-sdwdoi345u] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.input-suffixed input[b-sdwdoi345u] { flex: 1; background: transparent; border: none; padding: 0.55rem 0.75rem; color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; min-width: 0; }
.input-suffixed input[b-sdwdoi345u]::placeholder { color: var(--text-muted); }
.input-suffix-tag[b-sdwdoi345u] { padding: 0 0.75rem; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); background: var(--bg-elevated); border-left: 1px solid var(--border); display: flex; align-items: center; align-self: stretch; white-space: nowrap; }

/* Buttons */
.btn[b-sdwdoi345u] { padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn.primary[b-sdwdoi345u] { background: var(--accent); color: #fff; }
.btn.primary:hover[b-sdwdoi345u] { background: var(--accent-hover); }
.btn.primary:disabled[b-sdwdoi345u] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
.btn.secondary[b-sdwdoi345u] { background: var(--bg-elevated); color: var(--text-secondary); }
.btn.secondary:hover[b-sdwdoi345u] { background: var(--bg-hover); color: var(--text-primary); }
.btn.danger[b-sdwdoi345u] { background: var(--danger); color: #fff; }
.btn.danger:hover[b-sdwdoi345u] { opacity: 0.9; }
.btn.danger:disabled[b-sdwdoi345u] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }

/* Spinner */
.spinner-sm[b-sdwdoi345u] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-sdwdoi345u 0.6s linear infinite; }
@keyframes spin-b-sdwdoi345u { to { transform: rotate(360deg); } }

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 768px) {
    .refunds-page[b-sdwdoi345u] { padding: 1rem; }
    .header-content[b-sdwdoi345u] { flex-direction: column; align-items: flex-start; }
    .header-stats[b-sdwdoi345u] { width: 100%; }
    .filter-bar[b-sdwdoi345u] { flex-direction: column; align-items: stretch; }
    .date-filters[b-sdwdoi345u] { flex-wrap: wrap; }
    .hide-tablet[b-sdwdoi345u], .hide-mobile[b-sdwdoi345u] { display: none !important; }
    .drawer[b-sdwdoi345u] { width: 100vw; }
    .detail-grid[b-sdwdoi345u] { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hide-tablet[b-sdwdoi345u] { display: none !important; }
}

/* RTL support */
:global([dir="rtl"]) .drawer[b-sdwdoi345u] { right: auto; left: 0; transform: translateX(-100%); }
:global([dir="rtl"]) .drawer[b-sdwdoi345u] { animation-name: drawerSlideInRtl-b-sdwdoi345u; }
@keyframes drawerSlideInRtl-b-sdwdoi345u { to { transform: translateX(0); } }
:global([dir="rtl"]) .timeline[b-sdwdoi345u] { padding-left: 0; padding-right: 1.25rem; }
:global([dir="rtl"]) .timeline-item[b-sdwdoi345u] { padding-left: 0; padding-right: 1rem; }
:global([dir="rtl"]) .timeline-item[b-sdwdoi345u]::before { left: auto; right: -1.25rem; }
:global([dir="rtl"]) .timeline-dot[b-sdwdoi345u] { left: auto; right: -1.25rem; transform: translateX(4px); }
:global([dir="rtl"]) .input-suffix-tag[b-sdwdoi345u] { border-left: none; border-right: 1px solid var(--border); }
/* _content/QrBiteHub.Web/Components/Pages/Staff/Reservations.razor.rz.scp.css */
/* Reservations Page - Uses CSS variable theming */
.reservations-page[b-w8uq9palf3] { padding: 1.5rem; max-width: 1600px; margin: 0 auto; }

/* Toast */
.toast-success[b-w8uq9palf3], .toast-error[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.875rem; }
.toast-success[b-w8uq9palf3] { background: var(--success-bg); color: var(--success-text); }
.toast-error[b-w8uq9palf3] { background: var(--danger-bg); color: var(--danger-text); }

/* Header */
.page-header[b-w8uq9palf3] { margin-bottom: 1.5rem; }
.header-content[b-w8uq9palf3] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header-left h1[b-w8uq9palf3] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.header-subtitle[b-w8uq9palf3] { font-size: 0.875rem; color: var(--text-muted); }
.date-nav[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.5rem; }
.date-btn[b-w8uq9palf3] { padding: 0.4rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: 0.8rem; transition: all 0.15s; }
.date-btn:hover[b-w8uq9palf3] { border-color: var(--accent); color: var(--accent); }
.date-btn.active[b-w8uq9palf3] { background: var(--accent); color: #fff; border-color: var(--accent); }
.date-input[b-w8uq9palf3] { padding: 0.4rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--input-bg); color: var(--text-primary); font-size: 0.8rem; }

/* Stats Row */
.stats-row[b-w8uq9palf3] { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.stat-card[b-w8uq9palf3] { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; text-align: center; }
.stat-card .stat-value[b-w8uq9palf3] { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.stat-card .stat-label[b-w8uq9palf3] { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.stat-card.accent .stat-value[b-w8uq9palf3] { color: var(--accent); }
.stat-card.warning .stat-value[b-w8uq9palf3] { color: var(--warning); }
.stat-card.success .stat-value[b-w8uq9palf3] { color: var(--success); }

/* Tab Navigation */
.tab-nav[b-w8uq9palf3] { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.tab-btn[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; transition: all 0.15s; }
.tab-btn:hover[b-w8uq9palf3] { color: var(--text-primary); }
.tab-btn.active[b-w8uq9palf3] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn svg[b-w8uq9palf3] { opacity: 0.7; }
.tab-btn.active svg[b-w8uq9palf3] { opacity: 1; }

/* ====== TIMELINE ====== */
.timeline-container[b-w8uq9palf3] { overflow-x: auto; }
.timeline-grid[b-w8uq9palf3] { display: flex; flex-direction: column; min-width: 800px; }
.timeline-header[b-w8uq9palf3] { display: flex; position: sticky; top: 0; z-index: 2; background: var(--bg); }
.timeline-header .timeline-label[b-w8uq9palf3] { min-width: 100px; padding: 0.5rem; font-weight: 600; font-size: 0.75rem; color: var(--text-muted); }
.timeline-slot-header[b-w8uq9palf3] { flex: 1; min-width: 60px; padding: 0.5rem 0.25rem; text-align: center; font-size: 0.7rem; color: var(--text-muted); border-left: 1px solid var(--border); }
.timeline-row[b-w8uq9palf3] { display: flex; border-top: 1px solid var(--border); min-height: 48px; }
.timeline-row .timeline-label[b-w8uq9palf3] { min-width: 100px; padding: 0.5rem; display: flex; flex-direction: column; justify-content: center; background: var(--bg-card); border-right: 1px solid var(--border); }
.table-number[b-w8uq9palf3] { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.table-seats[b-w8uq9palf3] { font-size: 0.7rem; color: var(--text-muted); }
.timeline-cells[b-w8uq9palf3] { display: flex; flex: 1; position: relative; }
.timeline-cell[b-w8uq9palf3] { flex: 1; min-width: 60px; border-left: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
.timeline-cell.empty:hover[b-w8uq9palf3] { background: var(--accent-subtle); }
.timeline-block[b-w8uq9palf3] { display: flex; flex-direction: column; justify-content: center; padding: 0.25rem 0.5rem; border-radius: var(--radius); cursor: pointer; overflow: hidden; font-size: 0.75rem; min-height: 40px; margin: 2px; transition: opacity 0.15s; }
.timeline-block:hover[b-w8uq9palf3] { opacity: 0.85; }
.block-name[b-w8uq9palf3] { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block-info[b-w8uq9palf3] { font-size: 0.65rem; opacity: 0.8; }

/* Status colors for timeline blocks */
.timeline-block.status-pending[b-w8uq9palf3] { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning); }
.timeline-block.status-confirmed[b-w8uq9palf3] { background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--accent); }
.timeline-block.status-seated[b-w8uq9palf3] { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success); }
.timeline-block.status-completed[b-w8uq9palf3] { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
.timeline-block.status-noshow[b-w8uq9palf3] { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger); }
.timeline-block.status-waitlisted[b-w8uq9palf3] { background: var(--bg-elevated); color: var(--text-secondary); border: 1px dashed var(--border); }

/* FAB */
.fab-btn[b-w8uq9palf3] { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 10; transition: transform 0.15s; }
.fab-btn:hover[b-w8uq9palf3] { transform: scale(1.1); background: var(--accent-hover); }

/* ====== LIST ====== */
.list-container[b-w8uq9palf3] { }
.action-bar[b-w8uq9palf3] { margin-bottom: 1rem; }
.action-group[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.search-box[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); min-width: 240px; }
.search-box svg[b-w8uq9palf3] { color: var(--text-muted); flex-shrink: 0; }
.search-box input[b-w8uq9palf3] { border: none; background: transparent; color: var(--text-primary); font-size: 0.85rem; outline: none; width: 100%; }
.status-chips[b-w8uq9palf3] { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.chip[b-w8uq9palf3] { padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: 0.75rem; transition: all 0.15s; white-space: nowrap; }
.chip:hover[b-w8uq9palf3] { border-color: var(--accent); }
.chip.active[b-w8uq9palf3] { background: var(--accent); color: #fff; border-color: var(--accent); }
.add-btn[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: background 0.15s; white-space: nowrap; }
.add-btn:hover[b-w8uq9palf3] { background: var(--accent-hover); }

/* Reservation List Cards */
.reservation-list[b-w8uq9palf3] { display: flex; flex-direction: column; gap: 0.5rem; }
.reservation-card[b-w8uq9palf3] { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s; }
.reservation-card:hover[b-w8uq9palf3] { border-color: var(--border-hover); }
.res-time[b-w8uq9palf3] { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.time-start[b-w8uq9palf3] { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.time-sep[b-w8uq9palf3] { font-size: 0.7rem; color: var(--text-muted); }
.time-end[b-w8uq9palf3] { font-size: 0.75rem; color: var(--text-muted); }
.res-info[b-w8uq9palf3] { flex: 1; min-width: 0; }
.res-name[b-w8uq9palf3] { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; }
.res-details[b-w8uq9palf3] { display: flex; gap: 0.75rem; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
.res-table[b-w8uq9palf3] { color: var(--accent); font-weight: 500; }
.res-status[b-w8uq9palf3] { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 80px; }
.status-badge[b-w8uq9palf3] { padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.status-badge.status-pending[b-w8uq9palf3] { background: var(--warning-bg); color: var(--warning-text); }
.status-badge.status-confirmed[b-w8uq9palf3] { background: var(--accent-subtle); color: var(--accent); }
.status-badge.status-seated[b-w8uq9palf3] { background: var(--success-bg); color: var(--success-text); }
.status-badge.status-completed[b-w8uq9palf3] { background: var(--bg-elevated); color: var(--text-muted); }
.status-badge.status-noshow[b-w8uq9palf3] { background: var(--danger-bg); color: var(--danger-text); }
.status-badge.status-cancelled[b-w8uq9palf3] { background: var(--bg-elevated); color: var(--text-muted); }
.status-badge.status-waitlisted[b-w8uq9palf3] { background: var(--bg-elevated); color: var(--text-secondary); }
.res-code[b-w8uq9palf3] { font-size: 0.7rem; color: var(--text-muted); font-family: monospace; }
.res-actions[b-w8uq9palf3] { display: flex; gap: 0.25rem; }
.action-btn[b-w8uq9palf3] { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.action-btn:hover[b-w8uq9palf3] { border-color: var(--accent); color: var(--accent); }
.action-btn.confirm:hover[b-w8uq9palf3] { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.action-btn.seat:hover[b-w8uq9palf3] { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.action-btn.complete:hover[b-w8uq9palf3] { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.action-btn.noshow:hover[b-w8uq9palf3] { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.action-btn.cancel:hover[b-w8uq9palf3] { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

/* ====== SETTINGS ====== */
.settings-container[b-w8uq9palf3] { max-width: 900px; }
.settings-grid[b-w8uq9palf3] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.settings-section[b-w8uq9palf3] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }
.settings-section h3[b-w8uq9palf3] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1rem 0; }
.form-group[b-w8uq9palf3] { margin-bottom: 0.75rem; }
.form-group label[b-w8uq9palf3] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
.form-group input[b-w8uq9palf3], .form-group select[b-w8uq9palf3], .form-group textarea[b-w8uq9palf3] { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--input-bg); color: var(--text-primary); font-size: 0.85rem; }
.form-group input:focus[b-w8uq9palf3], .form-group select:focus[b-w8uq9palf3], .form-group textarea:focus[b-w8uq9palf3] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.form-row[b-w8uq9palf3] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* Toggle */
.toggle-group[b-w8uq9palf3] { display: flex; align-items: center; justify-content: space-between; }
.toggle[b-w8uq9palf3] { width: 40px; height: 22px; border-radius: 11px; border: none; background: var(--border); cursor: pointer; position: relative; transition: background 0.2s; flex-shrink: 0; }
.toggle.on[b-w8uq9palf3] { background: var(--accent); }
.toggle-knob[b-w8uq9palf3] { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.toggle.on .toggle-knob[b-w8uq9palf3] { transform: translateX(18px); }

/* Segment Control */
.segment-control[b-w8uq9palf3] { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg-btn[b-w8uq9palf3] { flex: 1; padding: 0.4rem 0.75rem; border: none; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: 0.8rem; transition: all 0.15s; }
.seg-btn:not(:last-child)[b-w8uq9palf3] { border-right: 1px solid var(--border); }
.seg-btn.active[b-w8uq9palf3] { background: var(--accent); color: #fff; }
.seg-btn:hover:not(.active)[b-w8uq9palf3] { background: var(--bg-hover); }

/* Duration Tiers */
.tier-list[b-w8uq9palf3] { display: flex; flex-direction: column; gap: 0.5rem; }
.tier-row[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.4rem; }
.tier-input[b-w8uq9palf3] { width: 60px !important; text-align: center; padding: 0.35rem !important; }
.tier-sep[b-w8uq9palf3], .tier-arrow[b-w8uq9palf3] { color: var(--text-muted); font-size: 0.85rem; }
.tier-label[b-w8uq9palf3] { font-size: 0.75rem; color: var(--text-muted); }
.tier-remove[b-w8uq9palf3] { width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--danger-bg); color: var(--danger); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.add-tier-btn[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border: 1px dashed var(--border); border-radius: var(--radius); background: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; }
.add-tier-btn:hover[b-w8uq9palf3] { border-color: var(--accent); color: var(--accent); }

.settings-footer[b-w8uq9palf3] { margin-top: 1.5rem; display: flex; justify-content: flex-end; }
.save-btn[b-w8uq9palf3] { padding: 0.6rem 1.5rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; font-weight: 500; }
.save-btn:hover[b-w8uq9palf3] { background: var(--accent-hover); }
.save-btn:disabled[b-w8uq9palf3] { opacity: 0.6; cursor: not-allowed; }

/* ====== ANALYTICS ====== */
.analytics-container[b-w8uq9palf3] { }
.date-range-bar[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.date-sep[b-w8uq9palf3] { color: var(--text-muted); font-size: 0.85rem; }
.refresh-btn[b-w8uq9palf3] { width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.refresh-btn:hover[b-w8uq9palf3] { border-color: var(--accent); color: var(--accent); }

.analytics-cards[b-w8uq9palf3] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.a-card[b-w8uq9palf3] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; text-align: center; }
.a-value[b-w8uq9palf3] { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.a-label[b-w8uq9palf3] { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
.a-card.danger .a-value[b-w8uq9palf3] { color: var(--danger); }
.a-card.warning .a-value[b-w8uq9palf3] { color: var(--warning); }

.chart-section[b-w8uq9palf3] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; }
.chart-section h3[b-w8uq9palf3] { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1rem 0; }

/* Bar Chart */
.bar-chart[b-w8uq9palf3] { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-top: 1rem; }
.bar-group[b-w8uq9palf3] { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bar[b-w8uq9palf3] { background: var(--accent); border-radius: 3px 3px 0 0; min-width: 8px; position: relative; transition: height 0.3s; }
.bar-value[b-w8uq9palf3] { position: absolute; top: -18px; font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; }
.bar-label[b-w8uq9palf3] { font-size: 0.6rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Heatmap */
.heatmap[b-w8uq9palf3] { display: flex; gap: 4px; flex-wrap: wrap; }
.heat-cell[b-w8uq9palf3] { width: 52px; height: 52px; border-radius: var(--radius); background: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.heat-hour[b-w8uq9palf3] { font-size: 0.7rem; font-weight: 600; }
.heat-count[b-w8uq9palf3] { font-size: 0.6rem; opacity: 0.8; }

/* Utilization Table */
.util-table[b-w8uq9palf3] { font-size: 0.8rem; }
.util-header[b-w8uq9palf3], .util-row[b-w8uq9palf3] { display: grid; grid-template-columns: 2fr 0.5fr 1fr 1fr 2fr; gap: 0.5rem; padding: 0.5rem 0; align-items: center; }
.util-header[b-w8uq9palf3] { font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); font-size: 0.75rem; }
.util-row[b-w8uq9palf3] { color: var(--text-primary); border-bottom: 1px solid var(--border); }
.util-bar-cell[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.5rem; }
.util-bar[b-w8uq9palf3] { height: 8px; border-radius: 4px; background: var(--accent); min-width: 0; }

/* ====== DRAWER ====== */
.drawer-backdrop[b-w8uq9palf3] { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; }
.drawer[b-w8uq9palf3] { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 90vw; background: var(--bg); border-left: 1px solid var(--border); z-index: 101; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
[dir="rtl"] .drawer[b-w8uq9palf3] { right: auto; left: 0; border-left: none; border-right: 1px solid var(--border); }
.drawer-header[b-w8uq9palf3] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.drawer-header h2[b-w8uq9palf3] { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.drawer-close[b-w8uq9palf3] { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; }
.drawer-close:hover[b-w8uq9palf3] { color: var(--text-primary); }
.drawer-body[b-w8uq9palf3] { flex: 1; overflow-y: auto; padding: 1.25rem; }
.form-section[b-w8uq9palf3] { margin-bottom: 1.5rem; }
.form-section h4[b-w8uq9palf3] { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.drawer-footer[b-w8uq9palf3] { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: 0.75rem; justify-content: flex-end; }
.btn-primary[b-w8uq9palf3] { padding: 0.5rem 1.25rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; font-weight: 500; }
.btn-primary:hover[b-w8uq9palf3] { background: var(--accent-hover); }
.btn-primary:disabled[b-w8uq9palf3] { opacity: 0.6; cursor: not-allowed; }
.btn-secondary[b-w8uq9palf3] { padding: 0.5rem 1.25rem; background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; }
.btn-secondary:hover[b-w8uq9palf3] { border-color: var(--border-hover); }
.btn-confirm-action[b-w8uq9palf3], .btn-seat-action[b-w8uq9palf3] { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; font-weight: 500; }
.btn-confirm-action[b-w8uq9palf3] { background: var(--accent); color: #fff; }
.btn-confirm-action:hover[b-w8uq9palf3] { background: var(--accent-hover); }
.btn-seat-action[b-w8uq9palf3] { background: var(--success); color: #fff; }
.btn-seat-action:hover[b-w8uq9palf3] { opacity: 0.9; }
.btn-confirm-action:disabled[b-w8uq9palf3], .btn-seat-action:disabled[b-w8uq9palf3] { opacity: 0.6; cursor: not-allowed; }

/* ====== MODAL ====== */
.modal-backdrop[b-w8uq9palf3] { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; }
.confirm-modal[b-w8uq9palf3] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2rem; width: 400px; max-width: 90vw; z-index: 201; text-align: center; box-shadow: var(--shadow-lg); }
.confirm-icon[b-w8uq9palf3] { margin-bottom: 1rem; }
.confirm-icon.danger[b-w8uq9palf3] { color: var(--danger); }
.confirm-modal h3[b-w8uq9palf3] { font-size: 1.1rem; color: var(--text-primary); margin: 0 0 0.5rem 0; }
.confirm-modal p[b-w8uq9palf3] { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.confirm-actions[b-w8uq9palf3] { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.btn-danger[b-w8uq9palf3] { padding: 0.5rem 1.25rem; background: var(--danger); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; font-weight: 500; }
.btn-danger:hover[b-w8uq9palf3] { opacity: 0.9; }
.btn-danger:disabled[b-w8uq9palf3] { opacity: 0.6; cursor: not-allowed; }

/* Empty State */
.empty-state[b-w8uq9palf3] { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state svg[b-w8uq9palf3] { opacity: 0.4; margin-bottom: 1rem; }
.empty-state h3[b-w8uq9palf3] { color: var(--text-primary); font-size: 1rem; margin: 0 0 0.5rem 0; }
.empty-state p[b-w8uq9palf3] { font-size: 0.85rem; }

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
    .reservations-page[b-w8uq9palf3] { padding: 1rem; }
    .stats-row[b-w8uq9palf3] { grid-template-columns: repeat(2, 1fr); }
    .analytics-cards[b-w8uq9palf3] { grid-template-columns: repeat(3, 1fr); }
    .settings-grid[b-w8uq9palf3] { grid-template-columns: 1fr; }
    .header-content[b-w8uq9palf3] { flex-direction: column; align-items: flex-start; }
    .reservation-card[b-w8uq9palf3] { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .res-actions[b-w8uq9palf3] { align-self: flex-end; }
    .drawer[b-w8uq9palf3] { width: 100%; max-width: 100vw; }
}

@media (max-width: 480px) {
    .analytics-cards[b-w8uq9palf3] { grid-template-columns: repeat(2, 1fr); }
    .date-nav[b-w8uq9palf3] { flex-wrap: wrap; }
    .status-chips[b-w8uq9palf3] { overflow-x: auto; flex-wrap: nowrap; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/RestaurantDetail.razor.rz.scp.css */
/* Restaurant Detail Page */
.detail-page[b-3m89cdt9ep] { padding: 0 0 2rem; max-width: 1200px; margin: 0 auto; }

/* Empty State */
.empty-state[b-3m89cdt9ep] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; color: var(--text-muted); gap: 1rem; }
.empty-state svg[b-3m89cdt9ep] { opacity: 0.3; }
.empty-state h3[b-3m89cdt9ep] { color: var(--text-primary); font-size: 1.25rem; margin: 0; }
.empty-state p[b-3m89cdt9ep] { color: var(--text-muted); max-width: 400px; margin: 0; }

/* Access Denied */
.access-denied[b-3m89cdt9ep] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; color: var(--text-muted); gap: 1rem; }
.access-denied svg[b-3m89cdt9ep] { opacity: 0.3; }
.access-denied h2[b-3m89cdt9ep] { color: var(--text-primary); margin: 0; }
.access-denied p[b-3m89cdt9ep] { color: var(--text-muted); margin: 0; }

/* Header */
.detail-header[b-3m89cdt9ep] { padding: 1.5rem 1.5rem 0; }
.detail-header .header-content[b-3m89cdt9ep] { display: flex; justify-content: space-between; align-items: flex-start; }
.detail-header .header-left[b-3m89cdt9ep] { display: flex; flex-direction: column; gap: 0.25rem; }
.detail-header h1[b-3m89cdt9ep] { font-size: 1.75rem; font-weight: 600; color: var(--text-primary); margin: 0; }

/* Breadcrumb */
.header-breadcrumb[b-3m89cdt9ep] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; margin-bottom: 0.25rem; }
.breadcrumb-link[b-3m89cdt9ep] { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.breadcrumb-link:hover[b-3m89cdt9ep] { color: #f58524; }
.header-breadcrumb svg[b-3m89cdt9ep] { color: var(--text-muted); }
.breadcrumb-current[b-3m89cdt9ep] { color: var(--text-secondary); }

/* Status Badge */
.status-badge[b-3m89cdt9ep] { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.status-badge.active[b-3m89cdt9ep] { background: rgba(16,185,129,0.15); color: #10b981; }
.status-badge.inactive[b-3m89cdt9ep] { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Tab Navigation */
.detail-tabs[b-3m89cdt9ep] { display: flex; gap: 0.25rem; padding: 1rem 1.5rem 0; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.detail-tabs[b-3m89cdt9ep]::-webkit-scrollbar { display: none; }
.tab-btn[b-3m89cdt9ep] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: none; border: none; color: var(--text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; font-family: inherit; }
.tab-btn:hover[b-3m89cdt9ep] { color: var(--text-secondary); }
.tab-btn.active[b-3m89cdt9ep] { color: #f58524; border-bottom-color: #f58524; }
.tab-btn svg[b-3m89cdt9ep] { opacity: 0.6; flex-shrink: 0; }
.tab-btn.active svg[b-3m89cdt9ep] { opacity: 1; }

/* Tab Content */
.detail-content[b-3m89cdt9ep] { padding: 1.5rem; }

/* CTA Button */
.btn.cta[b-3m89cdt9ep] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: #f58524; color: #fff; border: none; border-radius: 8px; font-size: 0.85rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.2s; }
.btn.cta:hover[b-3m89cdt9ep] { background: #e07520; }

/* RTL Support */
[b-3m89cdt9ep] [dir="rtl"] .header-breadcrumb { flex-direction: row-reverse; }
[b-3m89cdt9ep] [dir="rtl"] .detail-tabs { flex-direction: row-reverse; }

/* Responsive */
@media (max-width: 768px) {
    .detail-header[b-3m89cdt9ep] { padding: 1rem 1rem 0; }
    .detail-header h1[b-3m89cdt9ep] { font-size: 1.35rem; }
    .detail-tabs[b-3m89cdt9ep] { padding: 0.75rem 1rem 0; }
    .tab-btn[b-3m89cdt9ep] { padding: 0.6rem 0.75rem; font-size: 0.8rem; }
    .detail-content[b-3m89cdt9ep] { padding: 1rem; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/BranchOperationsTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-0x6bw7vklf] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-0x6bw7vklf] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-0x6bw7vklf] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-0x6bw7vklf] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Form Sections */
.form-section[b-0x6bw7vklf] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.form-section h3[b-0x6bw7vklf] { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.form-grid[b-0x6bw7vklf] { display: grid; gap: 1rem; }
.form-grid.two-col[b-0x6bw7vklf] { grid-template-columns: 1fr 1fr; }
.form-grid.three-col[b-0x6bw7vklf] { grid-template-columns: 1fr 1fr 1fr; }
.form-group[b-0x6bw7vklf] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-0x6bw7vklf] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.input[b-0x6bw7vklf] { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; }
.input:focus[b-0x6bw7vklf] { outline: none; border-color: #f58524; }
select.input[b-0x6bw7vklf] { cursor: pointer; }

/* Feature Groups */
.feature-group[b-0x6bw7vklf] { margin-bottom: 1rem; }
.feature-group:last-child[b-0x6bw7vklf] { margin-bottom: 0; }
.group-label[b-0x6bw7vklf] { display: block; font-size: 0.75rem; font-weight: 600; color: #f58524; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }

/* Toggle Group */
.toggle-group[b-0x6bw7vklf] { display: flex; flex-direction: column; gap: 0.5rem; }
.toggle-item[b-0x6bw7vklf] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-radius: 8px; transition: opacity 0.2s; }
.toggle-item:hover[b-0x6bw7vklf] { background: var(--bg-hover); }
.toggle-item.disabled[b-0x6bw7vklf] { opacity: 0.4; }
.disabled-section[b-0x6bw7vklf] { opacity: 0.5; pointer-events: none; }
.toggle-item span[b-0x6bw7vklf] { font-size: 0.85rem; color: var(--text-secondary); }

/* Toggle */
.toggle[b-0x6bw7vklf] { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input[b-0x6bw7vklf] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-0x6bw7vklf] { position: absolute; cursor: pointer; inset: 0; background: var(--bg-hover); border-radius: 24px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle-slider[b-0x6bw7vklf]::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle input:checked + .toggle-slider[b-0x6bw7vklf] { background: #f58524; }
.toggle input:checked + .toggle-slider[b-0x6bw7vklf]::before { transform: translateX(20px); }
.toggle input:disabled + .toggle-slider[b-0x6bw7vklf] { opacity: 0.4; cursor: not-allowed; }
.toggle:active .toggle-slider[b-0x6bw7vklf]::before { transform: scale(0.9); }
.toggle:active input:checked + .toggle-slider[b-0x6bw7vklf]::before { transform: translateX(20px) scale(0.9); }

/* Buttons */
.btn[b-0x6bw7vklf] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn.save[b-0x6bw7vklf] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.save:hover[b-0x6bw7vklf] { background: #e07520; }
.btn.save:disabled[b-0x6bw7vklf] { opacity: 0.5; cursor: not-allowed; }

/* Toast - Fixed position with slide-in animation */
.toast-fixed[b-0x6bw7vklf] { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius, 8px); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); animation: toastSlideIn-b-0x6bw7vklf 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; pointer-events: auto; max-width: 420px; }
.toast-fixed.success[b-0x6bw7vklf] { background: var(--success-bg, rgba(16,185,129,0.15)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.25); }
.toast-fixed.error[b-0x6bw7vklf] { background: var(--danger-bg, rgba(239,68,68,0.15)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.25); }
.toast-fixed svg[b-0x6bw7vklf] { flex-shrink: 0; }
@keyframes toastSlideIn-b-0x6bw7vklf { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Spinner */
.spinner-sm[b-0x6bw7vklf] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin-b-0x6bw7vklf 0.6s linear infinite; }
@keyframes spin-b-0x6bw7vklf { to { transform: rotate(360deg); } }
.loading-state[b-0x6bw7vklf] { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner[b-0x6bw7vklf] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: #f58524; border-radius: 50%; animation: spin-b-0x6bw7vklf 0.8s linear infinite; }

/* Responsive */
@media (max-width: 768px) {
    .form-grid.two-col[b-0x6bw7vklf], .form-grid.three-col[b-0x6bw7vklf] { grid-template-columns: 1fr; }
    .tab-header[b-0x6bw7vklf] { flex-direction: column; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/BranchOverviewTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-6hjy3e8vkn] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-6hjy3e8vkn] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-6hjy3e8vkn] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-6hjy3e8vkn] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Form Sections */
.form-section[b-6hjy3e8vkn] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.form-section h3[b-6hjy3e8vkn] { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.form-grid[b-6hjy3e8vkn] { display: grid; gap: 1rem; }
.form-grid.two-col[b-6hjy3e8vkn] { grid-template-columns: 1fr 1fr; }
.form-grid.three-col[b-6hjy3e8vkn] { grid-template-columns: 1fr 1fr 1fr; }
.form-group[b-6hjy3e8vkn] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-6hjy3e8vkn] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.input[b-6hjy3e8vkn] { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; }
.input:focus[b-6hjy3e8vkn] { outline: none; border-color: #f58524; }
select.input[b-6hjy3e8vkn] { cursor: pointer; }
textarea.input[b-6hjy3e8vkn] { resize: vertical; min-height: 60px; }

/* Image Upload */
.image-upload[b-6hjy3e8vkn] { display: flex; align-items: flex-start; gap: 1rem; }
.image-preview-box[b-6hjy3e8vkn] { display: flex; align-items: center; gap: 1rem; }
.image-preview-box img[b-6hjy3e8vkn] { width: 120px; height: 80px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.image-actions[b-6hjy3e8vkn] { display: flex; flex-direction: column; gap: 0.5rem; }
.image-placeholder[b-6hjy3e8vkn] { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 160px; height: 100px; border: 2px dashed var(--border); border-radius: 8px; cursor: pointer; color: var(--text-muted); gap: 0.5rem; font-size: 0.75rem; transition: border-color 0.2s; }
.image-placeholder:hover[b-6hjy3e8vkn] { border-color: #f58524; color: #f58524; }
.image-placeholder input[type="file"][b-6hjy3e8vkn] { display: none; }
.image-preview-box label input[type="file"][b-6hjy3e8vkn] { display: none; }

/* Toggle */
.toggle-row[b-6hjy3e8vkn] { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--text-secondary); }
.toggle[b-6hjy3e8vkn] { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input[b-6hjy3e8vkn] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-6hjy3e8vkn] { position: absolute; cursor: pointer; inset: 0; background: var(--bg-hover); border-radius: 24px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle-slider[b-6hjy3e8vkn]::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle input:checked + .toggle-slider[b-6hjy3e8vkn] { background: #f58524; }
.toggle input:checked + .toggle-slider[b-6hjy3e8vkn]::before { transform: translateX(20px); }
.toggle:active .toggle-slider[b-6hjy3e8vkn]::before { transform: scale(0.9); }
.toggle:active input:checked + .toggle-slider[b-6hjy3e8vkn]::before { transform: translateX(20px) scale(0.9); }

/* Buttons */
.btn[b-6hjy3e8vkn] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn:hover[b-6hjy3e8vkn] { border-color: var(--border-hover); color: var(--text-primary); }
.btn.save[b-6hjy3e8vkn] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.save:hover[b-6hjy3e8vkn] { background: #e07520; }
.btn.save:disabled[b-6hjy3e8vkn] { opacity: 0.5; cursor: not-allowed; }
.btn.small[b-6hjy3e8vkn] { padding: 0.35rem 0.75rem; font-size: 0.75rem; }
.btn.danger[b-6hjy3e8vkn] { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.btn.danger:hover[b-6hjy3e8vkn] { background: rgba(239,68,68,0.1); }

/* Toast - Fixed position with slide-in animation */
.toast-fixed[b-6hjy3e8vkn] { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius, 8px); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); animation: toastSlideIn-b-6hjy3e8vkn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; pointer-events: auto; max-width: 420px; }
.toast-fixed.success[b-6hjy3e8vkn] { background: var(--success-bg, rgba(16,185,129,0.15)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.25); }
.toast-fixed.error[b-6hjy3e8vkn] { background: var(--danger-bg, rgba(239,68,68,0.15)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.25); }
.toast-fixed svg[b-6hjy3e8vkn] { flex-shrink: 0; }
@keyframes toastSlideIn-b-6hjy3e8vkn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Spinner */
.spinner-sm[b-6hjy3e8vkn] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin-b-6hjy3e8vkn 0.6s linear infinite; }
@keyframes spin-b-6hjy3e8vkn { to { transform: rotate(360deg); } }
.loading-state[b-6hjy3e8vkn] { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner[b-6hjy3e8vkn] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: #f58524; border-radius: 50%; animation: spin-b-6hjy3e8vkn 0.8s linear infinite; }

/* Map Picker */
.map-section[b-6hjy3e8vkn] { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.map-header[b-6hjy3e8vkn] { display: flex; justify-content: space-between; align-items: center; }
.map-header label[b-6hjy3e8vkn] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.map-container[b-6hjy3e8vkn] { width: 100%; height: 300px; border-radius: var(--radius, 8px); border: 1px solid var(--border); overflow: hidden; position: relative; z-index: 0; }
.location-btn[b-6hjy3e8vkn] { color: #f58524; border-color: rgba(245,133,36,0.3); }
.location-btn:hover[b-6hjy3e8vkn] { background: rgba(245,133,36,0.1); }

/* Leaflet marker override */
[b-6hjy3e8vkn] .qrbite-map-marker { background: none !important; border: none !important; }

/* Responsive */
@media (max-width: 768px) {
    .form-grid.two-col[b-6hjy3e8vkn], .form-grid.three-col[b-6hjy3e8vkn] { grid-template-columns: 1fr; }
    .tab-header[b-6hjy3e8vkn] { flex-direction: column; }
    .map-container[b-6hjy3e8vkn] { height: 250px; }
    .map-header[b-6hjy3e8vkn] { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/BranchPaymentsTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-xb6tg70h1j] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-xb6tg70h1j] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-xb6tg70h1j] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-xb6tg70h1j] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Info Banner */
.info-banner[b-xb6tg70h1j] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); border-radius: 8px; font-size: 0.85rem; color: #60a5fa; }
.info-banner svg[b-xb6tg70h1j] { flex-shrink: 0; }
.info-banner.simulation[b-xb6tg70h1j] { background: var(--warning-bg, rgba(245,158,11,0.1)); border-color: rgba(245,158,11,0.25); color: var(--warning, #f59e0b); font-weight: 500; margin-bottom: 0.5rem; }

/* Override Banner */
.override-banner[b-xb6tg70h1j] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.override-info[b-xb6tg70h1j] { flex: 1; }
.override-label[b-xb6tg70h1j] { font-size: 0.85rem; color: var(--text-secondary); }
.override-label.active[b-xb6tg70h1j] { color: #f58524; font-weight: 500; }

/* Settings Content */
.settings-content[b-xb6tg70h1j] { display: flex; flex-direction: column; gap: 1.5rem; }
.settings-content.read-only[b-xb6tg70h1j] { opacity: 0.7; pointer-events: none; }

/* Form Sections */
.form-section[b-xb6tg70h1j] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.form-section h3[b-xb6tg70h1j] { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.section-header-row[b-xb6tg70h1j] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.section-header-row h3[b-xb6tg70h1j] { margin-bottom: 0; }
.form-grid[b-xb6tg70h1j] { display: grid; gap: 1rem; }
.form-grid.two-col[b-xb6tg70h1j] { grid-template-columns: 1fr 1fr; }
.form-grid.three-col[b-xb6tg70h1j] { grid-template-columns: 1fr 1fr 1fr; }
.form-group[b-xb6tg70h1j] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-xb6tg70h1j] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.form-actions[b-xb6tg70h1j] { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

/* Inputs */
.input[b-xb6tg70h1j] { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; }
.input:focus[b-xb6tg70h1j] { outline: none; border-color: #f58524; }
.input:disabled[b-xb6tg70h1j] { opacity: 0.5; cursor: not-allowed; }
select.input[b-xb6tg70h1j] { cursor: pointer; }

/* Toggle Group */
.toggle-group[b-xb6tg70h1j] { display: flex; flex-direction: column; gap: 0.5rem; }
.toggle-item[b-xb6tg70h1j] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
.toggle-item span[b-xb6tg70h1j] { font-size: 0.85rem; color: var(--text-secondary); }
.toggle[b-xb6tg70h1j] { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input[b-xb6tg70h1j] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-xb6tg70h1j] { position: absolute; cursor: pointer; inset: 0; background: var(--bg-hover); border-radius: 24px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle-slider[b-xb6tg70h1j]::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle input:checked + .toggle-slider[b-xb6tg70h1j] { background: #f58524; }
.toggle input:checked + .toggle-slider[b-xb6tg70h1j]::before { transform: translateX(20px); }
.toggle input:disabled + .toggle-slider[b-xb6tg70h1j] { opacity: 0.4; cursor: not-allowed; }
.toggle:active .toggle-slider[b-xb6tg70h1j]::before { transform: scale(0.9); }
.toggle:active input:checked + .toggle-slider[b-xb6tg70h1j]::before { transform: translateX(20px) scale(0.9); }

/* Methods List */
.methods-list[b-xb6tg70h1j] { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.method-row[b-xb6tg70h1j] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--bg-deep); border-radius: 8px; }
.method-icon[b-xb6tg70h1j] { font-size: 1.25rem; }
.method-info[b-xb6tg70h1j] { flex: 1; display: flex; flex-direction: column; }
.method-name[b-xb6tg70h1j] { font-size: 0.85rem; color: var(--text-primary); font-weight: 500; }
.method-ar[b-xb6tg70h1j] { font-size: 0.75rem; color: var(--text-muted); }
.method-type[b-xb6tg70h1j] { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: var(--bg-hover); color: var(--text-muted); text-transform: uppercase; }
.method-form[b-xb6tg70h1j] { background: var(--bg-deep); border: 1px solid rgba(245,133,36,0.2); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* Icon Buttons */
.btn-icon[b-xb6tg70h1j] { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; transition: color 0.2s; }
.btn-icon:hover[b-xb6tg70h1j] { color: var(--text-primary); }
.btn-icon.danger:hover[b-xb6tg70h1j] { color: #ef4444; }

/* Buttons */
.btn[b-xb6tg70h1j] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn:hover[b-xb6tg70h1j] { border-color: var(--border-hover); color: var(--text-primary); }
.btn.primary[b-xb6tg70h1j] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.primary:hover[b-xb6tg70h1j] { background: #e07520; }
.btn.save[b-xb6tg70h1j] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.save:hover[b-xb6tg70h1j] { background: #e07520; }
.btn.save:disabled[b-xb6tg70h1j] { opacity: 0.5; cursor: not-allowed; }
.btn.small[b-xb6tg70h1j] { padding: 0.35rem 0.75rem; font-size: 0.75rem; }
.btn.danger-fill[b-xb6tg70h1j] { background: #ef4444; border-color: #ef4444; color: #fff; }
.btn.danger-fill:hover[b-xb6tg70h1j] { background: #dc2626; }
.btn.danger-fill:disabled[b-xb6tg70h1j] { opacity: 0.5; }

/* Confirm Modal */
.confirm-overlay[b-xb6tg70h1j] { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; }
.confirm-modal[b-xb6tg70h1j] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; max-width: 400px; width: 90%; z-index: 1001; text-align: center; }
.confirm-icon[b-xb6tg70h1j] { color: #f59e0b; margin-bottom: 1rem; }
.confirm-modal h3[b-xb6tg70h1j] { color: var(--text-primary); margin: 0 0 0.5rem; }
.confirm-modal p[b-xb6tg70h1j] { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1.5rem; }
.confirm-actions[b-xb6tg70h1j] { display: flex; justify-content: center; gap: 0.75rem; }

/* Toast - Fixed position with slide-in animation */
.toast-fixed[b-xb6tg70h1j] { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius, 8px); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); animation: toastSlideIn-b-xb6tg70h1j 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; pointer-events: auto; max-width: 420px; }
.toast-fixed.success[b-xb6tg70h1j] { background: var(--success-bg, rgba(16,185,129,0.15)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.25); }
.toast-fixed.error[b-xb6tg70h1j] { background: var(--danger-bg, rgba(239,68,68,0.15)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.25); }
.toast-fixed svg[b-xb6tg70h1j] { flex-shrink: 0; }
@keyframes toastSlideIn-b-xb6tg70h1j { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Spinner */
.spinner-sm[b-xb6tg70h1j] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin-b-xb6tg70h1j 0.6s linear infinite; }
@keyframes spin-b-xb6tg70h1j { to { transform: rotate(360deg); } }
.loading-state[b-xb6tg70h1j] { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner[b-xb6tg70h1j] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: #f58524; border-radius: 50%; animation: spin-b-xb6tg70h1j 0.8s linear infinite; }

/* Platform Control */
.platform-control[b-xb6tg70h1j] { padding: 0.75rem; margin-bottom: 0.5rem; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); border-radius: 8px; }
.platform-control .toggle-item[b-xb6tg70h1j] { padding: 0.25rem 0; }
.platform-label[b-xb6tg70h1j] { font-weight: 600; color: #a78bfa; }
.form-hint[b-xb6tg70h1j] { font-size: 0.75rem; color: var(--text-muted); }

/* Gateway Locked Banner */
.gateway-locked-banner[b-xb6tg70h1j] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; font-size: 0.85rem; color: #f87171; }
.gateway-locked-banner svg[b-xb6tg70h1j] { flex-shrink: 0; }

/* Responsive */
@media (max-width: 768px) {
    .form-grid.two-col[b-xb6tg70h1j], .form-grid.three-col[b-xb6tg70h1j] { grid-template-columns: 1fr; }
    .tab-header[b-xb6tg70h1j] { flex-direction: column; }
    .override-banner[b-xb6tg70h1j] { flex-direction: column; align-items: flex-start; }
    .method-row[b-xb6tg70h1j] { flex-wrap: wrap; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/BranchTaxFeesTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-ybrusyxse5] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-ybrusyxse5] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-ybrusyxse5] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-ybrusyxse5] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Form Sections */
.form-section[b-ybrusyxse5] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.form-section h3[b-ybrusyxse5] { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.form-grid[b-ybrusyxse5] { display: grid; gap: 1rem; }
.form-grid.two-col[b-ybrusyxse5] { grid-template-columns: 1fr 1fr; }
.form-group[b-ybrusyxse5] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-ybrusyxse5] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.input[b-ybrusyxse5] { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; }
.input:focus[b-ybrusyxse5] { outline: none; border-color: #f58524; }
select.input[b-ybrusyxse5] { cursor: pointer; }

/* Toggle Group */
.toggle-group[b-ybrusyxse5] { display: flex; flex-direction: column; gap: 0.75rem; }
.toggle-item[b-ybrusyxse5] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
.toggle-item span[b-ybrusyxse5] { font-size: 0.85rem; color: var(--text-secondary); }

/* Toggle */
.toggle[b-ybrusyxse5] { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input[b-ybrusyxse5] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-ybrusyxse5] { position: absolute; cursor: pointer; inset: 0; background: var(--bg-hover); border-radius: 24px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle-slider[b-ybrusyxse5]::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle input:checked + .toggle-slider[b-ybrusyxse5] { background: #f58524; }
.toggle input:checked + .toggle-slider[b-ybrusyxse5]::before { transform: translateX(20px); }
.toggle:active .toggle-slider[b-ybrusyxse5]::before { transform: scale(0.9); }
.toggle:active input:checked + .toggle-slider[b-ybrusyxse5]::before { transform: translateX(20px) scale(0.9); }

/* Buttons */
.btn[b-ybrusyxse5] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn.save[b-ybrusyxse5] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.save:hover[b-ybrusyxse5] { background: #e07520; }
.btn.save:disabled[b-ybrusyxse5] { opacity: 0.5; cursor: not-allowed; }

/* Toast - Fixed position with slide-in animation */
.toast-fixed[b-ybrusyxse5] { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius, 8px); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); animation: toastSlideIn-b-ybrusyxse5 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; pointer-events: auto; max-width: 420px; }
.toast-fixed.success[b-ybrusyxse5] { background: var(--success-bg, rgba(16,185,129,0.15)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.25); }
.toast-fixed.error[b-ybrusyxse5] { background: var(--danger-bg, rgba(239,68,68,0.15)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.25); }
.toast-fixed svg[b-ybrusyxse5] { flex-shrink: 0; }
@keyframes toastSlideIn-b-ybrusyxse5 { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Spinner */
.spinner-sm[b-ybrusyxse5] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin-b-ybrusyxse5 0.6s linear infinite; }
@keyframes spin-b-ybrusyxse5 { to { transform: rotate(360deg); } }
.loading-state[b-ybrusyxse5] { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner[b-ybrusyxse5] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: #f58524; border-radius: 50%; animation: spin-b-ybrusyxse5 0.8s linear infinite; }

/* Responsive */
@media (max-width: 768px) {
    .form-grid.two-col[b-ybrusyxse5] { grid-template-columns: 1fr; }
    .tab-header[b-ybrusyxse5] { flex-direction: column; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/BranchTranslationsTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-y01urkjtg6] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-y01urkjtg6] { display: flex; justify-content: space-between; align-items: flex-start; }
.tab-header h2[b-y01urkjtg6] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-y01urkjtg6] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/RestaurantBranchesTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-xb1e5ie9sc] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-xb1e5ie9sc] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-xb1e5ie9sc] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-xb1e5ie9sc] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Branches Grid */
.branches-grid[b-xb1e5ie9sc] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.branch-card[b-xb1e5ie9sc] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 0.2s; }
.branch-card:hover[b-xb1e5ie9sc] { border-color: var(--border-hover); }
.branch-card.inactive[b-xb1e5ie9sc] { opacity: 0.6; }
.branch-top[b-xb1e5ie9sc] { display: flex; justify-content: space-between; align-items: center; }
.branch-icon[b-xb1e5ie9sc] { width: 40px; height: 40px; border-radius: 10px; background: rgba(245,133,36,0.1); display: flex; align-items: center; justify-content: center; color: #f58524; }
.branch-info h4[b-xb1e5ie9sc] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.branch-address[b-xb1e5ie9sc] { font-size: 0.8rem; color: var(--text-muted); margin: 0.25rem 0 0; }
.branch-stats[b-xb1e5ie9sc] { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
.stat-item[b-xb1e5ie9sc] { display: inline-flex; align-items: center; gap: 0.25rem; }
.branch-footer[b-xb1e5ie9sc] { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: auto; }

/* Status Badge */
.status-badge[b-xb1e5ie9sc] { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.status-badge.active[b-xb1e5ie9sc] { background: rgba(16,185,129,0.15); color: #10b981; }
.status-badge.inactive[b-xb1e5ie9sc] { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Create Form */
.create-form[b-xb1e5ie9sc] { background: var(--bg-card); border: 1px solid rgba(245,133,36,0.2); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.form-grid[b-xb1e5ie9sc] { display: grid; gap: 1rem; }
.form-grid.two-col[b-xb1e5ie9sc] { grid-template-columns: 1fr 1fr; }
.form-group[b-xb1e5ie9sc] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-xb1e5ie9sc] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.form-actions[b-xb1e5ie9sc] { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Inputs */
.input[b-xb1e5ie9sc] { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; }
.input:focus[b-xb1e5ie9sc] { outline: none; border-color: #f58524; }

/* Buttons */
.btn[b-xb1e5ie9sc] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn:hover[b-xb1e5ie9sc] { border-color: var(--border-hover); color: var(--text-primary); }
.btn.create[b-xb1e5ie9sc] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.create:hover[b-xb1e5ie9sc] { background: #e07520; }
.btn.save[b-xb1e5ie9sc] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.save:hover[b-xb1e5ie9sc] { background: #e07520; }
.btn.save:disabled[b-xb1e5ie9sc] { opacity: 0.5; cursor: not-allowed; }
.btn.manage[b-xb1e5ie9sc] { color: #f58524; border-color: rgba(245,133,36,0.3); }
.btn.manage:hover[b-xb1e5ie9sc] { background: rgba(245,133,36,0.1); }

/* Empty State */
.empty-state[b-xb1e5ie9sc] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 250px; text-align: center; color: var(--text-muted); gap: 0.75rem; }
.empty-state h3[b-xb1e5ie9sc] { color: var(--text-muted); font-size: 1rem; margin: 0; }
.empty-state p[b-xb1e5ie9sc] { color: var(--text-muted); margin: 0; font-size: 0.85rem; }

/* Toast - Fixed position with slide-in animation */
.toast-fixed[b-xb1e5ie9sc] { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius, 8px); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); animation: toastSlideIn-b-xb1e5ie9sc 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; pointer-events: auto; max-width: 420px; }
.toast-fixed.success[b-xb1e5ie9sc] { background: var(--success-bg, rgba(16,185,129,0.15)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.25); }
.toast-fixed.error[b-xb1e5ie9sc] { background: var(--danger-bg, rgba(239,68,68,0.15)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.25); }
.toast-fixed svg[b-xb1e5ie9sc] { flex-shrink: 0; }
@keyframes toastSlideIn-b-xb1e5ie9sc { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Spinner */
.spinner-sm[b-xb1e5ie9sc] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin-b-xb1e5ie9sc 0.6s linear infinite; }
@keyframes spin-b-xb1e5ie9sc { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 768px) {
    .branches-grid[b-xb1e5ie9sc] { grid-template-columns: 1fr; }
    .form-grid.two-col[b-xb1e5ie9sc] { grid-template-columns: 1fr; }
    .tab-header[b-xb1e5ie9sc] { flex-direction: column; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/RestaurantErpTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-ombaogakwl] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-ombaogakwl] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-ombaogakwl] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-ombaogakwl] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Form Sections */
.form-section[b-ombaogakwl] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.form-section h3[b-ombaogakwl] { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Form Grid */
.form-grid[b-ombaogakwl] { display: grid; gap: 1rem; }
.form-grid.two-col[b-ombaogakwl] { grid-template-columns: 1fr 1fr; }

/* Form Group */
.form-group[b-ombaogakwl] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-ombaogakwl] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.form-hint[b-ombaogakwl] { font-size: 0.75rem; color: var(--text-muted); }
.input[b-ombaogakwl] { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; }
.input:focus[b-ombaogakwl] { outline: none; border-color: var(--accent); }
.input:disabled[b-ombaogakwl] { opacity: 0.5; cursor: not-allowed; }
.mt[b-ombaogakwl] { margin-top: 1rem; }

/* Toggle */
.toggle[b-ombaogakwl] { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input[b-ombaogakwl] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-ombaogakwl] { position: absolute; cursor: pointer; inset: 0; background: var(--bg-hover); border-radius: 24px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle-slider[b-ombaogakwl]::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle input:checked + .toggle-slider[b-ombaogakwl] { background: #f58524; }
.toggle input:checked + .toggle-slider[b-ombaogakwl]::before { transform: translateX(20px); }
.toggle input:disabled + .toggle-slider[b-ombaogakwl] { opacity: 0.4; cursor: not-allowed; }

/* Toggle Row */
.toggle-row[b-ombaogakwl] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.toggle-row.compact[b-ombaogakwl] { margin-top: 0.5rem; }
.toggle-title[b-ombaogakwl] { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.toggle-desc[b-ombaogakwl] { font-size: 0.8rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Status Badge */
.status-badge[b-ombaogakwl] { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 99px; font-size: 0.75rem; font-weight: 600; }
.status-badge.active[b-ombaogakwl] { background: var(--success-bg); color: var(--success-text); }
.status-badge.inactive[b-ombaogakwl] { background: var(--danger-bg); color: var(--danger-text); }

/* Actions */
.actions-row[b-ombaogakwl] { display: flex; gap: 0.75rem; align-items: center; }

/* Buttons */
.btn[b-ombaogakwl] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; border: none; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn:disabled[b-ombaogakwl] { opacity: 0.5; cursor: not-allowed; }
.btn.save[b-ombaogakwl] { background: #f58524; color: #fff; }
.btn.save:hover:not(:disabled)[b-ombaogakwl] { background: var(--accent-hover); }
.btn.secondary[b-ombaogakwl] { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.btn.secondary:hover:not(:disabled)[b-ombaogakwl] { border-color: var(--border-hover); background: var(--bg-hover); }

/* Toast */
.toast-fixed[b-ombaogakwl] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; }
.toast-fixed.success[b-ombaogakwl] { background: var(--success-bg); color: var(--success-text); }
.toast-fixed.error[b-ombaogakwl] { background: var(--danger-bg); color: var(--danger-text); }

/* Test Info */
.test-info[b-ombaogakwl] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; padding: 0.5rem 0.75rem; background: var(--bg-elevated); border-radius: var(--radius); }
.test-label[b-ombaogakwl] { color: var(--text-muted); }
.test-status[b-ombaogakwl] { font-weight: 600; }
.test-ok[b-ombaogakwl] { color: var(--success); }
.test-fail[b-ombaogakwl] { color: var(--danger); }
.test-date[b-ombaogakwl] { color: var(--text-muted); margin-left: auto; }

/* Loading */
.loading-state[b-ombaogakwl] { display: flex; justify-content: center; padding: 3rem; }
.spinner[b-ombaogakwl] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: #f58524; border-radius: 50%; animation: spin-b-ombaogakwl 0.8s linear infinite; }
.spinner-sm[b-ombaogakwl] { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin-b-ombaogakwl 0.8s linear infinite; }
@keyframes spin-b-ombaogakwl { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 640px) {
    .form-grid.two-col[b-ombaogakwl] { grid-template-columns: 1fr; }
    .actions-row[b-ombaogakwl] { flex-direction: column; }
    .actions-row .btn[b-ombaogakwl] { width: 100%; justify-content: center; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/RestaurantOverviewTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-1irttwyw9v] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-1irttwyw9v] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-1irttwyw9v] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-1irttwyw9v] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Form Sections */
.form-section[b-1irttwyw9v] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.form-section h3[b-1irttwyw9v] { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Form Grid */
.form-grid[b-1irttwyw9v] { display: grid; gap: 1rem; }
.form-grid.two-col[b-1irttwyw9v] { grid-template-columns: 1fr 1fr; }
.form-grid.three-col[b-1irttwyw9v] { grid-template-columns: 1fr 1fr 1fr; }

/* Form Group */
.form-group[b-1irttwyw9v] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-1irttwyw9v] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.input[b-1irttwyw9v] { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; }
.input:focus[b-1irttwyw9v] { outline: none; border-color: #f58524; }
select.input[b-1irttwyw9v] { cursor: pointer; }
textarea.input[b-1irttwyw9v] { resize: vertical; min-height: 80px; }

/* Logo Upload */
.logo-upload[b-1irttwyw9v] { display: flex; align-items: flex-start; gap: 1rem; }
.logo-preview-box[b-1irttwyw9v] { display: flex; align-items: center; gap: 1rem; }
.logo-preview-box img[b-1irttwyw9v] { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); }
.logo-actions[b-1irttwyw9v] { display: flex; flex-direction: column; gap: 0.5rem; }
.logo-placeholder[b-1irttwyw9v] { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 120px; height: 120px; border: 2px dashed var(--border); border-radius: 12px; cursor: pointer; color: var(--text-muted); gap: 0.5rem; font-size: 0.75rem; transition: border-color 0.2s; }
.logo-placeholder:hover[b-1irttwyw9v] { border-color: #f58524; color: #f58524; }
.logo-placeholder input[type="file"][b-1irttwyw9v] { display: none; }
.logo-preview-box label input[type="file"][b-1irttwyw9v] { display: none; }

/* Toggle */
.toggle-row[b-1irttwyw9v] { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--text-secondary); }
.toggle[b-1irttwyw9v] { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle input[b-1irttwyw9v] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-1irttwyw9v] { position: absolute; cursor: pointer; inset: 0; background: var(--bg-hover); border-radius: 24px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle-slider[b-1irttwyw9v]::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle input:checked + .toggle-slider[b-1irttwyw9v] { background: #f58524; }
.toggle input:checked + .toggle-slider[b-1irttwyw9v]::before { transform: translateX(20px); }
.toggle:active .toggle-slider[b-1irttwyw9v]::before { transform: scale(0.9); }
.toggle:active input:checked + .toggle-slider[b-1irttwyw9v]::before { transform: translateX(20px) scale(0.9); }

/* Buttons */
.btn[b-1irttwyw9v] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn:hover[b-1irttwyw9v] { border-color: var(--border-hover); color: var(--text-primary); }
.btn.save[b-1irttwyw9v] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.save:hover[b-1irttwyw9v] { background: #e07520; }
.btn.save:disabled[b-1irttwyw9v] { opacity: 0.5; cursor: not-allowed; }
.btn.small[b-1irttwyw9v] { padding: 0.35rem 0.75rem; font-size: 0.75rem; }
.btn.danger[b-1irttwyw9v] { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.btn.danger:hover[b-1irttwyw9v] { background: rgba(239,68,68,0.1); }

/* Toast - Fixed position with slide-in animation */
.toast-fixed[b-1irttwyw9v] { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius, 8px); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); animation: toastSlideIn-b-1irttwyw9v 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; pointer-events: auto; max-width: 420px; }
.toast-fixed.success[b-1irttwyw9v] { background: var(--success-bg, rgba(16,185,129,0.15)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.25); }
.toast-fixed.error[b-1irttwyw9v] { background: var(--danger-bg, rgba(239,68,68,0.15)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.25); }
.toast-fixed svg[b-1irttwyw9v] { flex-shrink: 0; }
@keyframes toastSlideIn-b-1irttwyw9v { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Spinner */
.spinner-sm[b-1irttwyw9v] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin-b-1irttwyw9v 0.6s linear infinite; }
@keyframes spin-b-1irttwyw9v { to { transform: rotate(360deg); } }
.loading-state[b-1irttwyw9v] { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner[b-1irttwyw9v] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: #f58524; border-radius: 50%; animation: spin-b-1irttwyw9v 0.8s linear infinite; }

/* QR Code Section */
.qr-section[b-1irttwyw9v] { display: flex; }
.qr-preview[b-1irttwyw9v] { display: flex; align-items: center; gap: 1.5rem; }
.qr-code-box[b-1irttwyw9v] { background: #fff; padding: 12px; border-radius: 12px; flex-shrink: 0; line-height: 0; }
.qr-code-box :deep(svg)[b-1irttwyw9v] { display: block; width: 180px; height: 180px; }
.qr-details[b-1irttwyw9v] { display: flex; flex-direction: column; gap: 0.5rem; }
.qr-label[b-1irttwyw9v] { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.qr-url-display[b-1irttwyw9v] { font-size: 0.75rem; color: var(--text-muted); word-break: break-all; background: var(--bg-deep); padding: 0.5rem 0.75rem; border-radius: 6px; margin: 0; border: 1px solid var(--border); }
.qr-actions[b-1irttwyw9v] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.btn.small.cta[b-1irttwyw9v] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.small.cta:hover[b-1irttwyw9v] { background: #e07520; }

/* Responsive */
@media (max-width: 768px) {
    .form-grid.two-col[b-1irttwyw9v], .form-grid.three-col[b-1irttwyw9v] { grid-template-columns: 1fr; }
    .tab-header[b-1irttwyw9v] { flex-direction: column; }
    .qr-preview[b-1irttwyw9v] { flex-direction: column; align-items: flex-start; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/RestaurantPaymentsTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-9m5wkf6x5p] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-9m5wkf6x5p] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-9m5wkf6x5p] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-9m5wkf6x5p] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Form Sections */
.form-section[b-9m5wkf6x5p] { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; }
.form-section h3[b-9m5wkf6x5p] { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Form Grid */
.form-grid[b-9m5wkf6x5p] { display: grid; gap: 1rem; }
.form-grid.two-col[b-9m5wkf6x5p] { grid-template-columns: 1fr 1fr; }
.form-grid.three-col[b-9m5wkf6x5p] { grid-template-columns: 1fr 1fr 1fr; }

/* Form Group */
.form-group[b-9m5wkf6x5p] { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label[b-9m5wkf6x5p] { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.form-hint[b-9m5wkf6x5p] { font-size: 0.75rem; color: var(--text-muted); }
.input[b-9m5wkf6x5p] { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; }
.input:focus[b-9m5wkf6x5p] { outline: none; border-color: #f58524; }
select.input[b-9m5wkf6x5p] { cursor: pointer; }

/* Toggle Group */
.toggle-group[b-9m5wkf6x5p] { display: flex; flex-direction: column; gap: 0.75rem; }
.toggle-item[b-9m5wkf6x5p] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
.toggle-item span[b-9m5wkf6x5p] { font-size: 0.85rem; color: var(--text-secondary); }
.toggle-inline[b-9m5wkf6x5p] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.toggle-inline span[b-9m5wkf6x5p] { font-size: 0.85rem; color: var(--text-secondary); }

/* Toggle */
.toggle[b-9m5wkf6x5p] { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input[b-9m5wkf6x5p] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-9m5wkf6x5p] { position: absolute; cursor: pointer; inset: 0; background: var(--bg-hover); border-radius: 24px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle-slider[b-9m5wkf6x5p]::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.toggle input:checked + .toggle-slider[b-9m5wkf6x5p] { background: #f58524; }
.toggle input:checked + .toggle-slider[b-9m5wkf6x5p]::before { transform: translateX(20px); }
.toggle input:disabled + .toggle-slider[b-9m5wkf6x5p] { opacity: 0.4; cursor: not-allowed; }
.toggle:active .toggle-slider[b-9m5wkf6x5p]::before { transform: scale(0.9); }
.toggle:active input:checked + .toggle-slider[b-9m5wkf6x5p]::before { transform: translateX(20px) scale(0.9); }

/* Buttons */
.btn[b-9m5wkf6x5p] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn:hover[b-9m5wkf6x5p] { border-color: var(--border-hover); color: var(--text-primary); }
.btn.save[b-9m5wkf6x5p] { background: #f58524; border-color: #f58524; color: #fff; }
.btn.save:hover[b-9m5wkf6x5p] { background: #e07520; }
.btn.save:disabled[b-9m5wkf6x5p] { opacity: 0.5; cursor: not-allowed; }

/* Toast - Fixed position with slide-in animation */
.toast-fixed[b-9m5wkf6x5p] { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius, 8px); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); animation: toastSlideIn-b-9m5wkf6x5p 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; pointer-events: auto; max-width: 420px; }
.toast-fixed.success[b-9m5wkf6x5p] { background: var(--success-bg, rgba(16,185,129,0.15)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.25); }
.toast-fixed.error[b-9m5wkf6x5p] { background: var(--danger-bg, rgba(239,68,68,0.15)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.25); }
.toast-fixed svg[b-9m5wkf6x5p] { flex-shrink: 0; }
@keyframes toastSlideIn-b-9m5wkf6x5p { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Spinner */
.spinner-sm[b-9m5wkf6x5p] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin-b-9m5wkf6x5p 0.6s linear infinite; }
@keyframes spin-b-9m5wkf6x5p { to { transform: rotate(360deg); } }
.loading-state[b-9m5wkf6x5p] { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner[b-9m5wkf6x5p] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: #f58524; border-radius: 50%; animation: spin-b-9m5wkf6x5p 0.8s linear infinite; }

/* Platform Control */
.platform-control[b-9m5wkf6x5p] { padding: 0.75rem; margin-bottom: 1rem; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); border-radius: 8px; }
.platform-control .toggle-item[b-9m5wkf6x5p] { padding: 0.25rem 0; }
.platform-label[b-9m5wkf6x5p] { font-weight: 600; color: #a78bfa; }

/* Gateway Locked Banner */
.gateway-locked-banner[b-9m5wkf6x5p] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1rem; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; font-size: 0.85rem; color: #f87171; }
.gateway-locked-banner svg[b-9m5wkf6x5p] { flex-shrink: 0; }

/* Gateway Disabled State */
.gateway-disabled[b-9m5wkf6x5p] { opacity: 0.45; pointer-events: none; }

/* Gateway Credentials */
.gateway-credentials[b-9m5wkf6x5p] { margin-top: 1rem; padding: 1rem; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px; }
.gateway-credentials h4[b-9m5wkf6x5p] { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 0.5rem; }
.credential-hint[b-9m5wkf6x5p] { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.75rem; line-height: 1.4; }
.credential-input[b-9m5wkf6x5p] { font-family: 'Courier New', Courier, monospace; letter-spacing: 0.02em; }
.secure-hint[b-9m5wkf6x5p] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; margin-bottom: 0; color: var(--text-muted); opacity: 0.7; }
.secure-hint svg[b-9m5wkf6x5p] { flex-shrink: 0; }

/* Simulation Banner */
.info-banner.simulation[b-9m5wkf6x5p] { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; margin-bottom: 1rem; background: var(--warning-bg, rgba(245,158,11,0.1)); border: 1px solid rgba(245,158,11,0.25); border-radius: 8px; font-size: 0.8rem; color: var(--warning, #f59e0b); font-weight: 500; }
.info-banner.simulation svg[b-9m5wkf6x5p] { flex-shrink: 0; }

/* Credential Validation */
.credential-validation[b-9m5wkf6x5p] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-top: 0.75rem; border-radius: 8px; font-size: 0.8rem; font-weight: 500; }
.credential-validation.checking[b-9m5wkf6x5p] { color: var(--text-muted); }
.credential-validation.valid[b-9m5wkf6x5p] { background: var(--success-bg, rgba(16,185,129,0.1)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.2); }
.credential-validation.invalid[b-9m5wkf6x5p] { background: var(--danger-bg, rgba(239,68,68,0.1)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.2); }
.credential-validation.ratelimited[b-9m5wkf6x5p] { background: var(--warning-bg, rgba(245,158,11,0.1)); color: var(--warning, #f59e0b); border: 1px solid rgba(245,158,11,0.2); }
.credential-validation svg[b-9m5wkf6x5p] { flex-shrink: 0; }
.merchant-name[b-9m5wkf6x5p] { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
.attempts-warning[b-9m5wkf6x5p] { font-weight: 400; color: var(--warning, #f59e0b); font-size: 0.75rem; }

/* Required indicator */
.required[b-9m5wkf6x5p] { color: var(--danger, #ef4444); }

/* Responsive */
@media (max-width: 768px) {
    .form-grid.two-col[b-9m5wkf6x5p], .form-grid.three-col[b-9m5wkf6x5p] { grid-template-columns: 1fr; }
    .tab-header[b-9m5wkf6x5p] { flex-direction: column; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/RestaurantSubscriptionTab.razor.rz.scp.css */
.tab-container[b-jrssrzpj1d] { max-width: 800px; }
.tab-header[b-jrssrzpj1d] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; }
.tab-header h2[b-jrssrzpj1d] { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.25rem; }
.tab-header p[b-jrssrzpj1d] { font-size: 0.875rem; color: var(--text-secondary); margin: 0; }

.loading-state[b-jrssrzpj1d] { display: flex; justify-content: center; padding: 3rem 0; }
.spinner[b-jrssrzpj1d] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-jrssrzpj1d 0.8s linear infinite; }
@keyframes spin-b-jrssrzpj1d { to { transform: rotate(360deg); } }

.empty-state[b-jrssrzpj1d] { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state svg[b-jrssrzpj1d] { margin-bottom: 1rem; opacity: 0.4; }
.empty-state h3[b-jrssrzpj1d] { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.empty-state p[b-jrssrzpj1d] { font-size: 0.875rem; color: var(--text-secondary); margin: 0; }

.form-card[b-jrssrzpj1d] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }
.form-card.mt[b-jrssrzpj1d] { margin-top: 1.5rem; }
.card-title[b-jrssrzpj1d] { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1rem; }

.sub-plan-header[b-jrssrzpj1d] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sub-plan-name[b-jrssrzpj1d] { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; }
.sub-status[b-jrssrzpj1d] { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.sub-status.status-active[b-jrssrzpj1d] { background: var(--success-bg); color: var(--success); }
.sub-status.status-warning[b-jrssrzpj1d] { background: var(--warning-bg); color: var(--warning); }
.sub-status.status-danger[b-jrssrzpj1d] { background: var(--danger-bg); color: var(--danger); }
.sub-expiry[b-jrssrzpj1d] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; }
.sub-expiry-label[b-jrssrzpj1d] { font-size: 0.75rem; color: var(--text-secondary); }
.sub-expiry-date[b-jrssrzpj1d] { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.sub-days-remaining[b-jrssrzpj1d] { font-size: 0.75rem; color: var(--text-secondary); }
.sub-grace-label[b-jrssrzpj1d] { color: var(--warning); font-weight: 600; }
.sub-grace-warn[b-jrssrzpj1d] { color: var(--warning); font-weight: 600; }

.details-grid[b-jrssrzpj1d] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.detail-item[b-jrssrzpj1d] { display: flex; flex-direction: column; gap: 0.25rem; }
.detail-label[b-jrssrzpj1d] { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.detail-value[b-jrssrzpj1d] { font-size: 0.9375rem; font-weight: 500; color: var(--text-primary); }
.detail-value.override[b-jrssrzpj1d] { color: var(--accent); font-weight: 600; }

.badge-yes[b-jrssrzpj1d] { font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 10px; background: var(--success-bg); color: var(--success); }
.badge-no[b-jrssrzpj1d] { font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 10px; background: var(--bg-elevated); color: var(--text-muted); }

.overrides-section[b-jrssrzpj1d] { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.overrides-title[b-jrssrzpj1d] { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 0.75rem; }

.notes-section[b-jrssrzpj1d] { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.notes-title[b-jrssrzpj1d] { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 0.5rem; }
.notes-text[b-jrssrzpj1d] { font-size: 0.875rem; color: var(--text-primary); margin: 0; line-height: 1.5; white-space: pre-wrap; }

.usage-item[b-jrssrzpj1d] { margin-bottom: 1rem; }
.usage-item:last-child[b-jrssrzpj1d] { margin-bottom: 0; }
.usage-label[b-jrssrzpj1d] { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.375rem; }
.usage-bar[b-jrssrzpj1d] { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.usage-fill[b-jrssrzpj1d] { height: 100%; border-radius: 4px; transition: width 0.5s ease; min-width: 4px; }
.usage-fill.usage-ok[b-jrssrzpj1d] { background: var(--success); }
.usage-fill.usage-warning[b-jrssrzpj1d] { background: var(--warning); }
.usage-fill.usage-critical[b-jrssrzpj1d] { background: var(--danger); }

.sub-features-grid[b-jrssrzpj1d] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.sub-feature-item[b-jrssrzpj1d] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-secondary); padding: 0.5rem 0.65rem; background: var(--bg); border-radius: var(--radius); }
.sub-feature-item svg[b-jrssrzpj1d] { color: var(--success); flex-shrink: 0; }

@media (max-width: 600px) {
    .details-grid[b-jrssrzpj1d] { grid-template-columns: 1fr; }
    .sub-features-grid[b-jrssrzpj1d] { grid-template-columns: 1fr; }
    .sub-plan-header[b-jrssrzpj1d] { flex-direction: column; }
    .sub-expiry[b-jrssrzpj1d] { align-items: flex-start; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/RestaurantTagsTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-n26s8yqz0u] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-n26s8yqz0u] { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tab-header h2[b-n26s8yqz0u] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-n26s8yqz0u] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }

/* Summary */
.tags-summary[b-n26s8yqz0u] { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.tag-count[b-n26s8yqz0u] { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.primary-badge[b-n26s8yqz0u] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; background: var(--accent-subtle); color: var(--accent); border-radius: 20px; font-size: 0.75rem; font-weight: 500; }

/* Form Sections */
.form-section[b-n26s8yqz0u] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; }
.type-header[b-n26s8yqz0u] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.type-dot[b-n26s8yqz0u] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.type-count[b-n26s8yqz0u] { margin-left: auto; font-size: 0.75rem; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }

/* Type-specific colors */
.cuisine-type .type-dot[b-n26s8yqz0u] { background: #6366f1; }
.food-specialty .type-dot[b-n26s8yqz0u] { background: var(--accent); }
.dietary-pref .type-dot[b-n26s8yqz0u] { background: var(--success); }

/* Tags Grid */
.tags-grid[b-n26s8yqz0u] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-chip[b-n26s8yqz0u] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; transition: all 0.2s; user-select: none; }
.tag-chip:hover[b-n26s8yqz0u] { border-color: var(--border-hover); background: var(--bg-hover); }
.tag-chip.selected[b-n26s8yqz0u] { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.tag-chip.primary[b-n26s8yqz0u] { box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.tag-icon[b-n26s8yqz0u] { font-size: 1rem; line-height: 1; }
.tag-label[b-n26s8yqz0u] { font-size: 0.8rem; font-weight: 500; color: inherit; }

/* Star Button */
.star-btn[b-n26s8yqz0u] { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0; border-radius: 50%; transition: all 0.2s; }
.star-btn:hover[b-n26s8yqz0u] { color: var(--accent); background: var(--bg-hover); }
.star-btn.active[b-n26s8yqz0u] { color: var(--accent); }

/* Buttons */
.btn[b-n26s8yqz0u] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn:hover[b-n26s8yqz0u] { border-color: var(--border-hover); color: var(--text-primary); }
.btn.save[b-n26s8yqz0u] { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.save:hover[b-n26s8yqz0u] { background: var(--accent-hover); }
.btn.save:disabled[b-n26s8yqz0u] { opacity: 0.5; cursor: not-allowed; }

/* Toast - Fixed position with slide-in animation */
.toast-fixed[b-n26s8yqz0u] { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius, 8px); font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15)); animation: toastSlideIn-b-n26s8yqz0u 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards; pointer-events: auto; max-width: 420px; }
.toast-fixed.success[b-n26s8yqz0u] { background: var(--success-bg, rgba(16,185,129,0.15)); color: var(--success, #10b981); border: 1px solid rgba(16,185,129,0.25); }
.toast-fixed.error[b-n26s8yqz0u] { background: var(--danger-bg, rgba(239,68,68,0.15)); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.25); }
.toast-fixed svg[b-n26s8yqz0u] { flex-shrink: 0; }
@keyframes toastSlideIn-b-n26s8yqz0u { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Spinner */
.spinner-sm[b-n26s8yqz0u] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin-b-n26s8yqz0u 0.6s linear infinite; }
@keyframes spin-b-n26s8yqz0u { to { transform: rotate(360deg); } }
.loading-state[b-n26s8yqz0u] { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner[b-n26s8yqz0u] { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-n26s8yqz0u 0.8s linear infinite; }

/* Responsive */
@media (max-width: 768px) {
    .tab-header[b-n26s8yqz0u] { flex-direction: column; }
    .tags-summary[b-n26s8yqz0u] { flex-wrap: wrap; }
}
/* _content/QrBiteHub.Web/Components/Pages/Staff/Tabs/RestaurantTranslationsTab.razor.rz.scp.css */
/* Tab Container */
.tab-container[b-tmijvq58l9] { display: flex; flex-direction: column; gap: 1.5rem; }
.tab-header[b-tmijvq58l9] { display: flex; justify-content: space-between; align-items: flex-start; }
.tab-header h2[b-tmijvq58l9] { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.tab-header p[b-tmijvq58l9] { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }
/* _content/QrBiteHub.Web/Components/Pages/Staff/Transactions.razor.rz.scp.css */
/* Transactions Ledger Page */
.transactions-page[b-ldmcc57zmd] { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }

/* Header */
.page-header[b-ldmcc57zmd] { margin-bottom: 1.5rem; }
.header-content[b-ldmcc57zmd] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.header-left h1[b-ldmcc57zmd] { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.header-subtitle[b-ldmcc57zmd] { font-size: 0.85rem; color: var(--text-muted); }
.header-actions[b-ldmcc57zmd] { display: flex; gap: 0.5rem; }
.btn-export[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.4rem; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius); padding: 0.5rem 0.9rem; font-size: 0.825rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn-export:hover[b-ldmcc57zmd] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.btn-export:disabled[b-ldmcc57zmd] { opacity: 0.5; cursor: not-allowed; }

/* Summary Cards */
.summary-cards[b-ldmcc57zmd] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.summary-card[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.card-icon[b-ldmcc57zmd] { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.invoice-card .card-icon[b-ldmcc57zmd] { background: var(--accent-subtle); color: var(--accent); }
.receipt-card .card-icon[b-ldmcc57zmd] { background: var(--success-bg); color: var(--success); }
.creditnote-card .card-icon[b-ldmcc57zmd] { background: var(--warning-bg); color: var(--warning); }
.unreported-card .card-icon[b-ldmcc57zmd] { background: var(--danger-bg); color: var(--danger); }
.card-info[b-ldmcc57zmd] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.card-label[b-ldmcc57zmd] { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.card-value[b-ldmcc57zmd] { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.card-amount[b-ldmcc57zmd] { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Filter Bar */
.filter-bar[b-ldmcc57zmd] { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.filter-row[b-ldmcc57zmd] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.date-filters[b-ldmcc57zmd] { display: flex; align-items: flex-end; gap: 0.5rem; }
.date-field[b-ldmcc57zmd] { display: flex; flex-direction: column; gap: 0.25rem; }
.date-field label[b-ldmcc57zmd] { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.date-field input[b-ldmcc57zmd] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.45rem 0.65rem; color: var(--text-primary); font-size: 0.825rem; outline: none; font-family: inherit; }
.date-field input:focus[b-ldmcc57zmd] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.search-box[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.4rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.45rem 0.65rem; flex: 1; min-width: 200px; color: var(--text-muted); transition: border-color 0.2s, box-shadow 0.2s; }
.search-box:focus-within[b-ldmcc57zmd] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.search-box input[b-ldmcc57zmd] { border: none; background: transparent; outline: none; color: var(--text-primary); font-size: 0.825rem; font-family: inherit; width: 100%; }
.search-box input[b-ldmcc57zmd]::placeholder { color: var(--text-muted); }

/* Pill Groups */
.pill-group[b-ldmcc57zmd] { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.pill-label[b-ldmcc57zmd] { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); margin-right: 0.25rem; }
.pill[b-ldmcc57zmd] { padding: 0.35rem 0.7rem; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; white-space: nowrap; }
.pill:hover[b-ldmcc57zmd] { border-color: var(--border-hover); color: var(--text-secondary); }
.pill.active[b-ldmcc57zmd] { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Bulk Actions Toolbar */
.bulk-toolbar[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; background: var(--accent-subtle); border: 1px solid var(--accent); border-radius: var(--radius); margin-bottom: 1rem; animation: slideDown-b-ldmcc57zmd 0.2s ease; }
@keyframes slideDown-b-ldmcc57zmd { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.bulk-count[b-ldmcc57zmd] { font-size: 0.825rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.bulk-actions[b-ldmcc57zmd] { display: flex; gap: 0.5rem; flex: 1; }
.bulk-btn[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.65rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.bulk-btn:hover[b-ldmcc57zmd] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.bulk-btn:disabled[b-ldmcc57zmd] { opacity: 0.5; cursor: not-allowed; }
.bulk-btn.pending:hover[b-ldmcc57zmd] { color: var(--warning); }
.bulk-btn.reported:hover[b-ldmcc57zmd] { color: var(--success); }
.bulk-btn.skipped:hover[b-ldmcc57zmd] { color: var(--text-muted); }
.bulk-clear[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.65rem; border-radius: var(--radius); border: none; background: transparent; color: var(--text-muted); font-size: 0.75rem; cursor: pointer; transition: color 0.2s; font-family: inherit; }
.bulk-clear:hover[b-ldmcc57zmd] { color: var(--text-primary); }

/* Table */
.table-wrap[b-ldmcc57zmd] { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-card); }
.data-table[b-ldmcc57zmd] { width: 100%; border-collapse: collapse; }
.data-table thead[b-ldmcc57zmd] { background: var(--bg-elevated); }
.data-table th[b-ldmcc57zmd] { padding: 0.7rem 0.75rem; text-align: left; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td[b-ldmcc57zmd] { padding: 0.65rem 0.75rem; font-size: 0.825rem; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.data-table tbody tr:last-child td[b-ldmcc57zmd] { border-bottom: none; }
.data-table tbody tr[b-ldmcc57zmd] { transition: background 0.15s; }
.data-table tbody tr:hover[b-ldmcc57zmd] { background: var(--bg-hover); }
.row-selected[b-ldmcc57zmd] { background: var(--accent-subtle) !important; }
.num-col[b-ldmcc57zmd] { text-align: right; }
.col-check[b-ldmcc57zmd] { width: 36px; text-align: center; }
.col-check input[type="checkbox"][b-ldmcc57zmd] { cursor: pointer; accent-color: var(--accent); }
.col-type[b-ldmcc57zmd] { width: 90px; }
.col-actions[b-ldmcc57zmd] { width: 80px; }

/* Doc Badges */
.doc-badge[b-ldmcc57zmd] { font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.badge-invoice[b-ldmcc57zmd] { background: var(--accent-subtle); color: var(--accent); }
.badge-receipt[b-ldmcc57zmd] { background: var(--success-bg); color: var(--success-text); }
.badge-creditnote[b-ldmcc57zmd] { background: var(--warning-bg); color: var(--warning-text); }

/* Status Badges */
.status-badge[b-ldmcc57zmd] { font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.badge-notreported[b-ldmcc57zmd] { background: var(--bg-elevated); color: var(--text-muted); }
.badge-pending[b-ldmcc57zmd] { background: var(--warning-bg); color: var(--warning-text); }
.badge-reported[b-ldmcc57zmd] { background: var(--success-bg); color: var(--success-text); }
.badge-failed[b-ldmcc57zmd] { background: var(--danger-bg); color: var(--danger-text); }
.badge-skipped[b-ldmcc57zmd] { background: var(--bg-elevated); color: var(--text-muted); font-style: italic; }

/* Cell Styles */
.mono[b-ldmcc57zmd] { font-family: monospace; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.text-muted[b-ldmcc57zmd] { color: var(--text-muted); }
.customer-name[b-ldmcc57zmd] { font-size: 0.825rem; color: var(--text-primary); display: block; }
.customer-phone[b-ldmcc57zmd] { font-size: 0.75rem; color: var(--text-muted); display: block; }
.amount-negative[b-ldmcc57zmd] { color: var(--danger); font-weight: 600; }
.ext-id[b-ldmcc57zmd] { color: var(--text-secondary); cursor: default; }

/* Row Actions */
.row-actions[b-ldmcc57zmd] { display: flex; gap: 0.25rem; }
.action-btn-sm[b-ldmcc57zmd] { width: 28px; height: 28px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.action-btn-sm:hover[b-ldmcc57zmd] { background: var(--bg-hover); border-color: var(--border-hover); }
.action-btn-sm.reported:hover[b-ldmcc57zmd] { color: var(--success); }
.action-btn-sm.skipped:hover[b-ldmcc57zmd] { color: var(--text-muted); }

/* Pagination */
.pagination-bar[b-ldmcc57zmd] { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 0.75rem; }
.pagination-info[b-ldmcc57zmd] { font-size: 0.8rem; color: var(--text-muted); }
.pagination-controls[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.25rem; }
.page-btn[b-ldmcc57zmd] { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 500; transition: all 0.15s; font-family: inherit; }
.page-btn:hover:not(:disabled)[b-ldmcc57zmd] { background: var(--bg-hover); border-color: var(--border-hover); }
.page-btn.active[b-ldmcc57zmd] { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-btn:disabled[b-ldmcc57zmd] { opacity: 0.4; cursor: not-allowed; }
.page-ellipsis[b-ldmcc57zmd] { width: 32px; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
.page-size-selector select[b-ldmcc57zmd] { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.35rem 0.5rem; color: var(--text-primary); font-size: 0.8rem; font-family: inherit; cursor: pointer; outline: none; }
.page-size-selector select:focus[b-ldmcc57zmd] { border-color: var(--accent); }

/* Empty State */
.empty-state[b-ldmcc57zmd] { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state svg[b-ldmcc57zmd] { margin-bottom: 1rem; opacity: 0.5; }
.empty-state h3[b-ldmcc57zmd] { color: var(--text-secondary); font-size: 1.1rem; margin: 0 0 0.5rem; }
.empty-state p[b-ldmcc57zmd] { font-size: 0.875rem; max-width: 360px; margin: 0 auto; }

/* Messages */
.alert[b-ldmcc57zmd] { padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.85rem; margin-bottom: 1rem; }
.alert.error[b-ldmcc57zmd] { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-text); }
.toast-success[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--success-bg); border: 1px solid var(--success); color: var(--success-text); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; margin-bottom: 1rem; animation: toastIn-b-ldmcc57zmd 0.3s ease; }
@keyframes toastIn-b-ldmcc57zmd { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Modal */
.modal-overlay[b-ldmcc57zmd] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[b-ldmcc57zmd] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.external-id-modal[b-ldmcc57zmd] { max-width: 560px; }
.modal-header[b-ldmcc57zmd] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-header h3[b-ldmcc57zmd] { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.modal-close[b-ldmcc57zmd] { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.modal-close:hover[b-ldmcc57zmd] { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.modal-body[b-ldmcc57zmd] { padding: 1.25rem 1.5rem; }
.modal-desc[b-ldmcc57zmd] { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1rem; line-height: 1.5; }
.modal-footer[b-ldmcc57zmd] { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }

/* External ID List */
.external-id-list[b-ldmcc57zmd] { display: flex; flex-direction: column; gap: 0.65rem; }
.external-id-row[b-ldmcc57zmd] { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem; background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--border); }
.ext-row-info[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.5rem; }
.ext-doc-number[b-ldmcc57zmd] { font-family: monospace; font-size: 0.825rem; font-weight: 600; color: var(--text-primary); }
.ext-id-input[b-ldmcc57zmd] { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.45rem 0.65rem; color: var(--text-primary); font-size: 0.825rem; font-family: inherit; outline: none; box-sizing: border-box; }
.ext-id-input:focus[b-ldmcc57zmd] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.ext-id-input[b-ldmcc57zmd]::placeholder { color: var(--text-muted); }

/* Buttons */
.btn[b-ldmcc57zmd] { padding: 0.5rem 1rem; border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn.primary[b-ldmcc57zmd] { background: var(--accent); color: #fff; }
.btn.primary:hover[b-ldmcc57zmd] { background: var(--accent-hover); }
.btn.primary:disabled[b-ldmcc57zmd] { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
.btn.secondary[b-ldmcc57zmd] { background: var(--bg-elevated); color: var(--text-secondary); }
.btn.secondary:hover[b-ldmcc57zmd] { background: var(--bg-hover); color: var(--text-primary); }

/* Spinner */
.spinner-sm[b-ldmcc57zmd] { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin-b-ldmcc57zmd 0.6s linear infinite; }
@keyframes spin-b-ldmcc57zmd { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 768px) {
    .transactions-page[b-ldmcc57zmd] { padding: 1rem; }
    .header-content[b-ldmcc57zmd] { flex-direction: column; align-items: flex-start; }
    .summary-cards[b-ldmcc57zmd] { grid-template-columns: repeat(2, 1fr); }
    .filter-row[b-ldmcc57zmd] { flex-direction: column; align-items: stretch; }
    .date-filters[b-ldmcc57zmd] { flex-wrap: wrap; }
    .search-box[b-ldmcc57zmd] { min-width: unset; }
    .pill-group[b-ldmcc57zmd] { flex-wrap: wrap; }
    .bulk-toolbar[b-ldmcc57zmd] { flex-wrap: wrap; }
    .bulk-actions[b-ldmcc57zmd] { flex-wrap: wrap; }
    .hide-mobile[b-ldmcc57zmd] { display: none !important; }
    .pagination-bar[b-ldmcc57zmd] { flex-direction: column; align-items: center; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hide-tablet[b-ldmcc57zmd] { display: none !important; }
    .summary-cards[b-ldmcc57zmd] { grid-template-columns: repeat(2, 1fr); }
}

/* Upload to ERP Button */
.btn-upload-erp[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.4rem; background: var(--accent); border: none; color: #fff; border-radius: var(--radius); padding: 0.5rem 0.9rem; font-size: 0.825rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.btn-upload-erp:hover[b-ldmcc57zmd] { background: var(--accent-hover); }
.btn-upload-erp:disabled[b-ldmcc57zmd] { opacity: 0.5; cursor: not-allowed; }
.upload-count[b-ldmcc57zmd] { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: rgba(255,255,255,0.25); color: #fff; font-size: 0.7rem; font-weight: 700; }
.bulk-btn.upload:hover[b-ldmcc57zmd] { color: var(--accent); }
.action-btn-sm.upload:hover[b-ldmcc57zmd] { color: var(--accent); }
.action-btn-sm:disabled[b-ldmcc57zmd] { opacity: 0.4; cursor: not-allowed; }

/* Upload Progress Modal */
.upload-progress-modal[b-ldmcc57zmd] { max-width: 440px; }
.progress-bar[b-ldmcc57zmd] { width: 100%; height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; margin-bottom: 0.75rem; }
.progress-fill[b-ldmcc57zmd] { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s ease; }
.progress-stats[b-ldmcc57zmd] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.progress-count[b-ldmcc57zmd] { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.progress-current[b-ldmcc57zmd] { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.progress-results[b-ldmcc57zmd] { display: flex; gap: 1.5rem; }
.progress-success[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 500; color: var(--success); }
.progress-failed[b-ldmcc57zmd] { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 500; color: var(--danger); }

/* RTL support */
:global([dir="rtl"]) .search-box[b-ldmcc57zmd] { flex-direction: row-reverse; }
:global([dir="rtl"]) .ext-row-info[b-ldmcc57zmd] { flex-direction: row-reverse; }
/* _content/QrBiteHub.Web/Components/Shared/AccountModal.razor.rz.scp.css */
/* Account Modal — Unified Auth */
.modal-overlay[b-nehrfkpnqb] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1000; animation: fadeIn-b-nehrfkpnqb 0.2s ease; }
.account-modal[b-nehrfkpnqb] { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-radius: 16px 16px 0 0; padding: 24px; z-index: 1001; max-height: 90vh; overflow-y: auto; animation: slideUp-b-nehrfkpnqb 0.3s ease; }

@keyframes fadeIn-b-nehrfkpnqb { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp-b-nehrfkpnqb { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Close Button */
.modal-close[b-nehrfkpnqb] { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none; background: var(--bg-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); z-index: 1; }
.modal-close:hover[b-nehrfkpnqb] { background: var(--border); }

/* Header */
.modal-header[b-nehrfkpnqb] { text-align: center; margin-bottom: 20px; position: relative; }
.modal-header h2[b-nehrfkpnqb] { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.modal-header p[b-nehrfkpnqb] { font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
.identifier-display[b-nehrfkpnqb] { font-weight: 600; color: var(--primary) !important; font-size: 15px !important; }

/* Back Button */
.back-btn[b-nehrfkpnqb] { position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border: none; background: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.back-btn:hover[b-nehrfkpnqb] { background: var(--bg-secondary); }

/* Social Login Buttons */
.social-buttons[b-nehrfkpnqb] { margin-bottom: 4px; }
.social-btn[b-nehrfkpnqb] { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s; margin-bottom: 10px; font-family: inherit; }
.social-btn:hover[b-nehrfkpnqb] { border-color: var(--text-muted); background: var(--bg-tertiary, var(--bg-secondary)); }
.social-btn:disabled[b-nehrfkpnqb] { opacity: 0.5; cursor: not-allowed; }
.social-btn.google svg[b-nehrfkpnqb] { flex-shrink: 0; }
.social-btn.apple svg[b-nehrfkpnqb] { flex-shrink: 0; }

/* Divider */
.divider[b-nehrfkpnqb] { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.divider[b-nehrfkpnqb]::before, .divider[b-nehrfkpnqb]::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span[b-nehrfkpnqb] { font-size: 13px; color: var(--text-muted); text-transform: lowercase; }

/* Form */
.form-group[b-nehrfkpnqb] { margin-bottom: 16px; }
.form-group label[b-nehrfkpnqb] { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input[b-nehrfkpnqb] { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); font-size: 16px; font-family: inherit; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.form-group input:focus[b-nehrfkpnqb] { border-color: var(--primary); }
.form-group input[b-nehrfkpnqb]::placeholder { color: var(--text-muted); }
.form-group .hint[b-nehrfkpnqb] { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-row[b-nehrfkpnqb] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Identifier Input with Country Prefix */
.identifier-input-wrap[b-nehrfkpnqb] { position: relative; display: flex; align-items: center; }
.country-prefix[b-nehrfkpnqb] { position: absolute; left: 16px; font-size: 16px; font-weight: 500; color: var(--text-secondary); z-index: 1; pointer-events: none; }
.identifier-input.has-prefix[b-nehrfkpnqb] { padding-left: 52px !important; }

/* OTP Input */
.otp-input-group[b-nehrfkpnqb] { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.otp-digit[b-nehrfkpnqb] { width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: 700; border: 2px solid var(--border); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); outline: none; transition: border-color 0.2s; font-family: inherit; }
.otp-digit:focus[b-nehrfkpnqb] { border-color: var(--primary); }

/* Resend Section */
.resend-section[b-nehrfkpnqb] { text-align: center; margin-top: 16px; }
.resend-timer[b-nehrfkpnqb] { font-size: 13px; color: var(--text-muted); }

/* Error Message */
.error-message[b-nehrfkpnqb] { background: rgba(239, 68, 68, 0.1); color: #ef4444; padding: 12px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; text-align: center; }

/* Buttons */
.full-width[b-nehrfkpnqb] { width: 100%; justify-content: center; }
.btn-spinner[b-nehrfkpnqb] { width: 18px; height: 18px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin-b-nehrfkpnqb 0.8s linear infinite; margin-right: 8px; }
@keyframes spin-b-nehrfkpnqb { to { transform: rotate(360deg); } }

/* Footer */
.modal-footer[b-nehrfkpnqb] { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; }
.link-btn[b-nehrfkpnqb] { background: none; border: none; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; font-family: inherit; }
.link-btn:disabled[b-nehrfkpnqb] { opacity: 0.5; cursor: not-allowed; }
.skip-btn[b-nehrfkpnqb] { display: block; width: 100%; text-align: center; margin-top: 12px; color: var(--text-muted); text-decoration: none; font-weight: 500; }
.skip-btn:hover[b-nehrfkpnqb] { color: var(--text-secondary); }

/* Desktop modal positioning */
@media (min-width: 640px) {
    .account-modal[b-nehrfkpnqb] { bottom: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 420px; border-radius: 16px; animation: scaleIn-b-nehrfkpnqb 0.3s ease; }
    @keyframes scaleIn-b-nehrfkpnqb { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
}

/* RTL support */
:global([dir="rtl"]) .modal-close[b-nehrfkpnqb] { right: auto; left: 16px; }
:global([dir="rtl"]) .back-btn[b-nehrfkpnqb] { left: auto; right: 0; }
:global([dir="rtl"]) .back-btn svg[b-nehrfkpnqb] { transform: scaleX(-1); }
:global([dir="rtl"]) .country-prefix[b-nehrfkpnqb] { left: auto; right: 16px; }
:global([dir="rtl"]) .identifier-input.has-prefix[b-nehrfkpnqb] { padding-left: 16px !important; padding-right: 52px !important; }
:global([dir="rtl"]) .btn-spinner[b-nehrfkpnqb] { margin-right: 0; margin-left: 8px; }
/* _content/QrBiteHub.Web/Components/Shared/Customer/DineInHeader.razor.rz.scp.css */
.dinein-header[b-clbq8b0fds] { position: sticky; top: 0; z-index: var(--z-header, 100); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; padding-top: calc(var(--safe-top, 0px) + 12px); background: var(--bg-glass, rgba(255,255,255,0.95)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-light, #f1f5f9); }
.header-left[b-clbq8b0fds] { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.back-btn[b-clbq8b0fds] { width: 44px; height: 44px; border-radius: var(--radius-full, 9999px); border: none; background: var(--bg-secondary, #f1f5f9); color: var(--text-primary, #334155); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease-out; flex-shrink: 0; }
.back-btn:focus-visible[b-clbq8b0fds] { outline: 2px solid var(--primary, #f58524); outline-offset: 2px; }
.back-btn:active[b-clbq8b0fds] { transform: scale(0.92); background: var(--bg-tertiary, #e2e8f0); }
.header-brand[b-clbq8b0fds] { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brand-icon[b-clbq8b0fds] { width: 40px; height: 40px; border-radius: var(--radius-sm, 10px); background: var(--primary-light, #fff7ed); display: flex; align-items: center; justify-content: center; color: var(--primary, #f58524); flex-shrink: 0; overflow: hidden; }
.brand-logo-img[b-clbq8b0fds] { width: 100%; height: 100%; object-fit: cover; }
.brand-info[b-clbq8b0fds] { flex: 1; min-width: 0; }
.brand-info h1[b-clbq8b0fds] { font-size: 17px; font-weight: 700; color: var(--text-primary, #0f172a); letter-spacing: -0.3px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-status[b-clbq8b0fds] { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted, #64748b); }
.status-dot[b-clbq8b0fds] { width: 6px; height: 6px; border-radius: var(--radius-full, 9999px); background: var(--success, #22c55e); }
.header-actions[b-clbq8b0fds] { display: flex; align-items: center; gap: 8px; }
.pin-badge[b-clbq8b0fds] { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: linear-gradient(135deg, var(--primary-light, #fff7ed) 0%, #fed7aa 100%); border: 1.5px solid #fdba74; border-radius: var(--radius-full, 20px); color: #c2410c; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.theme-toggle-btn[b-clbq8b0fds] { width: 44px; height: 44px; border-radius: var(--radius, 12px); border: none; background: var(--bg-secondary, #f1f5f9); color: var(--text-secondary, #64748b); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease-out; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.theme-toggle-btn:hover[b-clbq8b0fds] { background: var(--bg-tertiary, #e2e8f0); color: var(--text-primary, #0f172a); }
.call-waiter-btn[b-clbq8b0fds] { width: 44px; height: 44px; border-radius: var(--radius-full, 9999px); border: none; background: var(--primary, #f58524); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease-out; flex-shrink: 0; }
.call-waiter-btn:focus-visible[b-clbq8b0fds] { outline: 2px solid var(--primary, #f58524); outline-offset: 2px; }
.call-waiter-btn:active[b-clbq8b0fds] { transform: scale(0.92); }

/* ExtraActions content gets the PARENT's CSS scope, so use ::deep to style it */
.header-actions[b-clbq8b0fds]  .orders-btn { position: relative; width: 44px; height: 44px; border-radius: var(--radius-full, 9999px); border: none; background: var(--primary, #f58524); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease-out; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.header-actions[b-clbq8b0fds]  .orders-btn:focus-visible { outline: 2px solid var(--primary, #f58524); outline-offset: 2px; }
.header-actions[b-clbq8b0fds]  .orders-btn:active { transform: scale(0.92); }
.header-actions[b-clbq8b0fds]  .orders-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--danger, #ef4444); color: white; font-size: 11px; font-weight: 600; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.header-actions[b-clbq8b0fds]  .header-btn { width: 44px; height: 44px; border-radius: var(--radius-full, 9999px); border: none; background: var(--bg-secondary, #f1f5f9); color: var(--text-secondary, #64748b); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease-out; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.header-actions[b-clbq8b0fds]  .header-btn.clear { color: var(--danger, #ef4444); }
.header-actions[b-clbq8b0fds]  .header-btn:active { transform: scale(0.92); }

/* Dark mode */
[data-theme="dark"] .dinein-header[b-clbq8b0fds],
:root:not([data-theme="light"]) .dinein-header[b-clbq8b0fds] { background: rgba(10, 10, 10, 0.95); border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .back-btn[b-clbq8b0fds],
:root:not([data-theme="light"]) .back-btn[b-clbq8b0fds] { background: #161616; color: #aaa; }
[data-theme="dark"] .back-btn:active[b-clbq8b0fds],
:root:not([data-theme="light"]) .back-btn:active[b-clbq8b0fds] { background: #1f1f1f; }
[data-theme="dark"] .brand-icon[b-clbq8b0fds],
:root:not([data-theme="light"]) .brand-icon[b-clbq8b0fds] { background: rgba(245, 133, 36, 0.15); }
[data-theme="dark"] .theme-toggle-btn[b-clbq8b0fds],
:root:not([data-theme="light"]) .theme-toggle-btn[b-clbq8b0fds] { background: #161616; color: #aaa; }
[data-theme="dark"] .theme-toggle-btn:hover[b-clbq8b0fds],
:root:not([data-theme="light"]) .theme-toggle-btn:hover[b-clbq8b0fds] { background: #1f1f1f; color: #fff; }
[data-theme="dark"] .header-actions[b-clbq8b0fds]  .header-btn,
:root:not([data-theme="light"]) .header-actions[b-clbq8b0fds]  .header-btn { background: #161616; color: #aaa; }

@media (max-width: 480px) {
    .dinein-header[b-clbq8b0fds] { padding: 10px 12px; padding-top: calc(var(--safe-top, 0px) + 10px); gap: 8px; }
    .back-btn[b-clbq8b0fds], .theme-toggle-btn[b-clbq8b0fds], .call-waiter-btn[b-clbq8b0fds] { width: 40px; height: 40px; }
    .header-actions[b-clbq8b0fds]  .orders-btn, .header-actions[b-clbq8b0fds]  .header-btn { width: 40px; height: 40px; }
    .brand-icon[b-clbq8b0fds] { width: 36px; height: 36px; }
    .brand-info h1[b-clbq8b0fds] { font-size: 15px; }
    .header-actions[b-clbq8b0fds] { gap: 6px; }
    .pin-badge[b-clbq8b0fds] { padding: 5px 10px; font-size: 12px; }
}

@media (max-width: 380px) {
    .dinein-header[b-clbq8b0fds] { padding: 8px 10px; padding-top: calc(var(--safe-top, 0px) + 8px); gap: 6px; }
    .back-btn[b-clbq8b0fds], .theme-toggle-btn[b-clbq8b0fds], .call-waiter-btn[b-clbq8b0fds] { width: 36px; height: 36px; }
    .header-actions[b-clbq8b0fds]  .orders-btn, .header-actions[b-clbq8b0fds]  .header-btn { width: 36px; height: 36px; }
    .back-btn svg[b-clbq8b0fds], .theme-toggle-btn svg[b-clbq8b0fds], .call-waiter-btn svg[b-clbq8b0fds] { width: 16px; height: 16px; }
    .header-actions[b-clbq8b0fds]  .orders-btn svg, .header-actions[b-clbq8b0fds]  .header-btn svg { width: 16px; height: 16px; }
    .brand-icon[b-clbq8b0fds] { width: 32px; height: 32px; }
    .brand-icon svg[b-clbq8b0fds] { width: 14px; height: 14px; }
    .brand-info h1[b-clbq8b0fds] { font-size: 14px; }
    .pin-badge[b-clbq8b0fds] { padding: 4px 8px; font-size: 11px; gap: 4px; }
    .pin-badge svg[b-clbq8b0fds] { width: 12px; height: 12px; }
}

@media (max-width: 320px) {
    .header-brand[b-clbq8b0fds] { display: none; }
}
/* _content/QrBiteHub.Web/Components/Shared/Customer/PickupHeader.razor.rz.scp.css */
/* Pickup header — always dark, onboard-style */
.pickup-header[b-4uly1y4963] { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

/* Brand — QrBite logo link */
.nav-brand[b-4uly1y4963] { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
.brand-logo-img[b-4uly1y4963] { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.brand-name[b-4uly1y4963] { font-size: 1.15rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.brand-qr[b-4uly1y4963] { color: #f58524; }

/* Actions — lang toggle + extra */
.header-actions[b-4uly1y4963] { display: flex; align-items: center; gap: 8px; }

/* Language toggle pill */
.lang-toggle[b-4uly1y4963] { display: flex; background: #1a1a1a; border-radius: 10px; padding: 2px; }
.lang-btn[b-4uly1y4963] { padding: 5px 10px; min-width: 32px; min-height: 28px; border: none; background: transparent; color: #6b6b6b; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; }
.lang-btn:focus-visible[b-4uly1y4963] { outline: 2px solid #f58524; outline-offset: 2px; }
.lang-btn.active[b-4uly1y4963] { background: #2a2a2a; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.lang-btn:active[b-4uly1y4963] { transform: scale(0.95); }

/* Extra action buttons (orders btn etc.) */
.header-actions[b-4uly1y4963]  .orders-btn { position: relative; width: 36px; height: 36px; border-radius: 9999px; border: none; background: #f58524; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 150ms ease-out; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.header-actions[b-4uly1y4963]  .orders-btn:focus-visible { outline: 2px solid #f58524; outline-offset: 2px; }
.header-actions[b-4uly1y4963]  .orders-btn:active { transform: scale(0.92); }
.header-actions[b-4uly1y4963]  .orders-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; background: #ef4444; color: white; font-size: 11px; font-weight: 600; border-radius: 10px; display: flex; align-items: center; justify-content: center; }

/* Responsive */
@media (max-width: 480px) {
    .pickup-header[b-4uly1y4963] { padding: 10px 12px; padding-top: calc(env(safe-area-inset-top, 0px) + 10px); gap: 8px; }
    .brand-logo-img[b-4uly1y4963] { width: 1.5rem; height: 1.5rem; }
    .brand-name[b-4uly1y4963] { font-size: 1rem; }
    .header-actions[b-4uly1y4963]  .orders-btn { width: 32px; height: 32px; }
    .header-actions[b-4uly1y4963] { gap: 6px; }
}

@media (max-width: 380px) {
    .pickup-header[b-4uly1y4963] { padding: 8px 10px; padding-top: calc(env(safe-area-inset-top, 0px) + 8px); gap: 6px; }
    .header-actions[b-4uly1y4963]  .orders-btn { width: 30px; height: 30px; }
    .header-actions[b-4uly1y4963]  .orders-btn svg { width: 16px; height: 16px; }
}
/* _content/QrBiteHub.Web/Components/Shared/Customer/ServiceRequestModal.razor.rz.scp.css */
.sr-modal-overlay[b-ddv9g2g8jw] { position: fixed; inset: 0; background: var(--bg-overlay-heavy, rgba(0,0,0,0.6)); z-index: 300; animation: backdropFadeIn-b-ddv9g2g8jw 0.2s ease; }
@keyframes backdropFadeIn-b-ddv9g2g8jw { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetSlideUp-b-ddv9g2g8jw { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } }
.sr-modal[b-ddv9g2g8jw] { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; max-height: 85dvh; background: var(--bg, #fff); border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0; padding: 24px; padding-bottom: calc(var(--safe-bottom, 0px) + 24px); z-index: 301; animation: sheetSlideUp-b-ddv9g2g8jw 0.3s var(--ease-out, ease-out); overflow-y: auto; }
.sr-modal-header[b-ddv9g2g8jw] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sr-modal-header h2[b-ddv9g2g8jw] { font-size: 20px; font-weight: 700; color: var(--text-primary, #0f172a); margin: 0; }
.sr-close-btn[b-ddv9g2g8jw] { width: 36px; height: 36px; border-radius: var(--radius-full, 9999px); border: none; background: var(--bg-secondary, #f1f5f9); color: var(--text-secondary, #64748b); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sr-close-btn:focus-visible[b-ddv9g2g8jw] { outline: 2px solid var(--primary, #f58524); outline-offset: 2px; }
.sr-close-btn:active[b-ddv9g2g8jw] { transform: scale(0.9); background: var(--bg-tertiary, #e2e8f0); }
.sr-modal-subtitle[b-ddv9g2g8jw] { font-size: 14px; color: var(--text-secondary, #64748b); margin: 0 0 20px; }
.sr-options[b-ddv9g2g8jw] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 400px) { .sr-options[b-ddv9g2g8jw] { grid-template-columns: repeat(2, 1fr); } }
.sr-option[b-ddv9g2g8jw] { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px; background: var(--bg-page, #f8fafc); border: 2px solid var(--border, #e2e8f0); border-radius: var(--radius, 16px); cursor: pointer; transition: all 150ms ease-out; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.sr-option:hover:not(:disabled)[b-ddv9g2g8jw] { border-color: var(--primary, #f58524); background: var(--primary-light, #fff7ed); }
.sr-option:focus-visible[b-ddv9g2g8jw] { outline: 2px solid var(--primary, #f58524); outline-offset: 2px; }
.sr-option:active:not(:disabled)[b-ddv9g2g8jw] { transform: scale(0.95); }
.sr-option:disabled[b-ddv9g2g8jw] { opacity: 0.6; cursor: not-allowed; }
.sr-option span[b-ddv9g2g8jw] { font-size: 12px; font-weight: 600; color: var(--text-primary, #334155); text-align: center; line-height: 1.3; }
.sr-option-icon[b-ddv9g2g8jw] { width: 48px; height: 48px; border-radius: var(--radius, 14px); display: flex; align-items: center; justify-content: center; }
.sr-option-icon.call[b-ddv9g2g8jw] { background: rgba(245,133,36,0.15); color: var(--primary, #f58524); }
.sr-option-icon.bill[b-ddv9g2g8jw] { background: rgba(34,197,94,0.15); color: var(--success, #22c55e); }
.sr-option-icon.water[b-ddv9g2g8jw] { background: rgba(59,130,246,0.15); color: #3b82f6; }
.sr-option-icon.utensils[b-ddv9g2g8jw] { background: rgba(168,85,247,0.15); color: #a855f7; }
.sr-option-icon.condiments[b-ddv9g2g8jw] { background: rgba(234,179,8,0.15); color: #eab308; }
.sr-option-icon.other[b-ddv9g2g8jw] { background: rgba(107,114,128,0.15); color: #6b7280; }
.sr-other-input[b-ddv9g2g8jw] { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.sr-other-input textarea[b-ddv9g2g8jw] { width: 100%; padding: 14px; border: 2px solid var(--border, #e2e8f0); border-radius: var(--radius, 12px); font-family: inherit; font-size: 14px; color: var(--text-primary, #0f172a); resize: none; transition: all 150ms ease-out; }
.sr-other-input textarea:focus[b-ddv9g2g8jw] { outline: none; border-color: var(--primary, #f58524); box-shadow: 0 0 0 3px var(--primary-ghost, rgba(245,133,36,0.1)); }
.sr-submit-btn[b-ddv9g2g8jw] { height: 48px; background: var(--primary, #f58524); color: #fff; border: none; border-radius: var(--radius, 12px); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 150ms ease-out; -webkit-tap-highlight-color: transparent; }
.sr-submit-btn:disabled[b-ddv9g2g8jw] { background: var(--bg-tertiary, #e2e8f0); color: var(--text-muted, #94a3b8); cursor: not-allowed; }
.sr-submit-btn:focus-visible[b-ddv9g2g8jw] { outline: 2px solid var(--primary, #f58524); outline-offset: 2px; }
.sr-submit-btn:not(:disabled):active[b-ddv9g2g8jw] { transform: scale(0.98); }
.sr-loading[b-ddv9g2g8jw] { display: flex; align-items: center; justify-content: center; padding: 20px; }
.btn-spinner[b-ddv9g2g8jw] { width: 20px; height: 20px; border: 2px solid transparent; border-top-color: currentColor; border-radius: var(--radius-full, 9999px); animation: spin-b-ddv9g2g8jw 0.8s linear infinite; }
.btn-spinner.large[b-ddv9g2g8jw] { width: 28px; height: 28px; border-width: 3px; }
@keyframes spin-b-ddv9g2g8jw { to { transform: rotate(360deg); } }
.sr-success-toast[b-ddv9g2g8jw] { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--success, #22c55e); color: #fff; border-radius: var(--radius, 16px); box-shadow: 0 8px 32px rgba(34,197,94,0.4); z-index: var(--z-toast, 400); animation: toastPop-b-ddv9g2g8jw 0.3s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
@keyframes toastPop-b-ddv9g2g8jw { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
.sr-success-icon[b-ddv9g2g8jw] { width: 40px; height: 40px; border-radius: var(--radius-full, 9999px); background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr-success-content[b-ddv9g2g8jw] { display: flex; flex-direction: column; gap: 2px; }
.sr-success-title[b-ddv9g2g8jw] { font-size: 15px; font-weight: 700; }
.sr-success-subtitle[b-ddv9g2g8jw] { font-size: 13px; opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
    .sr-modal-overlay[b-ddv9g2g8jw], .sr-modal[b-ddv9g2g8jw], .sr-success-toast[b-ddv9g2g8jw] { animation: none; }
}
/* _content/QrBiteHub.Web/Components/Shared/FeatureGate.razor.rz.scp.css */
.feature-gate-overlay[b-jqyf1ponsv] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 2rem;
}

.feature-gate-card[b-jqyf1ponsv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 420px;
    padding: 3rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.feature-gate-icon[b-jqyf1ponsv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    background: var(--accent-subtle);
    border-radius: 50%;
    color: var(--accent);
}

.feature-gate-title[b-jqyf1ponsv] {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.feature-gate-message[b-jqyf1ponsv] {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.feature-gate-btn[b-jqyf1ponsv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.2s ease;
}

.feature-gate-btn:hover[b-jqyf1ponsv] {
    background: var(--accent-hover);
}
/* _content/QrBiteHub.Web/Components/Shared/Payment/CardPaymentForm.razor.rz.scp.css */
.card-form[b-067kldz93h] { padding: 0.5rem 0; }

.form-header[b-067kldz93h] { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.form-header h3[b-067kldz93h] { margin: 0; font-size: 1.1rem; font-weight: 600; flex: 1; text-align: center; }
.header-spacer[b-067kldz93h] { width: 36px; }
.back-btn[b-067kldz93h] { background: none; border: none; color: #888; cursor: pointer; padding: 8px; border-radius: 50%; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.back-btn:hover[b-067kldz93h] { color: #fff; background: rgba(255,255,255,0.1); }
.back-btn:disabled[b-067kldz93h] { opacity: 0.5; cursor: not-allowed; }

.card-preview[b-067kldz93h] { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid #2a2a2a; position: relative; overflow: hidden; }
.card-preview[b-067kldz93h]::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%); pointer-events: none; }
.card-preview.card-visa[b-067kldz93h] { border-color: #1a1f71; }
.card-preview.card-mastercard[b-067kldz93h] { border-color: #eb001b; }
.card-preview.card-amex[b-067kldz93h] { border-color: #006fcf; }

.card-brand-icon[b-067kldz93h] { position: absolute; top: 1rem; right: 1rem; }
.brand-name[b-067kldz93h] { font-size: 0.75rem; color: #666; text-transform: uppercase; letter-spacing: 0.1em; }

.card-number-display[b-067kldz93h] { font-family: 'JetBrains Mono', monospace; font-size: 1.35rem; letter-spacing: 0.15em; color: #fff; margin-bottom: 1.25rem; }

.card-details-display[b-067kldz93h] { display: flex; justify-content: space-between; align-items: flex-end; }
.card-name[b-067kldz93h] { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; }
.card-expiry[b-067kldz93h] { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: #888; }

.form-fields[b-067kldz93h] { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }

.form-group[b-067kldz93h] { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label[b-067kldz93h] { font-size: 0.8rem; color: #888; font-weight: 500; }
.form-group input[b-067kldz93h] { padding: 0.875rem 1rem; background: #161616; border: 1px solid #2a2a2a; border-radius: 10px; font-size: 1rem; color: #fff; transition: all 0.2s; }
.form-group input:focus[b-067kldz93h] { outline: none; border-color: #f58524; background: #1a1a1a; }
.form-group input[b-067kldz93h]::placeholder { color: #444; }
.form-group input:disabled[b-067kldz93h] { opacity: 0.6; cursor: not-allowed; }

.input-wrapper[b-067kldz93h] { position: relative; }
.input-wrapper input[b-067kldz93h] { width: 100%; padding-right: 140px; }
.card-icons[b-067kldz93h] { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); display: flex; gap: 0.35rem; align-items: center; }
.card-icons .card-brand-svg[b-067kldz93h] { height: 20px; width: auto; opacity: 0.3; transition: opacity 0.2s; border-radius: 3px; }
.card-icons .card-brand-svg.active[b-067kldz93h] { opacity: 1; }

.form-row[b-067kldz93h] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.cvv-input-wrapper[b-067kldz93h] { position: relative; }
.cvv-input-wrapper input[b-067kldz93h] { width: 100%; padding-right: 2.5rem; }
.cvv-help[b-067kldz93h] { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #444; cursor: help; }

.form-actions[b-067kldz93h] { margin-bottom: 1rem; }
.pay-btn[b-067kldz93h] { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem; background: linear-gradient(135deg, #f58524 0%, #d97706 100%); border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.2s; }
.pay-btn:hover:not(:disabled)[b-067kldz93h] { box-shadow: 0 4px 20px rgba(245, 133, 36, 0.4); transform: translateY(-1px); }
.pay-btn:active:not(:disabled)[b-067kldz93h] { transform: translateY(0); }
.pay-btn:disabled[b-067kldz93h] { opacity: 0.5; cursor: not-allowed; }
.pay-btn svg[b-067kldz93h] { flex-shrink: 0; }

.spinner[b-067kldz93h] { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin-b-067kldz93h 0.8s linear infinite; }
@keyframes spin-b-067kldz93h { to { transform: rotate(360deg); } }

.secure-badge[b-067kldz93h] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #555; font-size: 0.75rem; }
.secure-badge svg[b-067kldz93h] { color: #10b981; }
/* _content/QrBiteHub.Web/Components/Shared/Payment/PaymentError.razor.rz.scp.css */
.error-container[b-txaf9xdjit] { display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem; text-align: center; }

.error-icon[b-txaf9xdjit] { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%); border-radius: 50%; margin-bottom: 1.5rem; animation: shake-b-txaf9xdjit 0.5s ease-out; }
.error-icon svg[b-txaf9xdjit] { color: #ef4444; }

@keyframes shake-b-txaf9xdjit {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.error-container h3[b-txaf9xdjit] { font-size: 1.25rem; font-weight: 600; color: #ef4444; margin: 0 0 0.75rem; }

.error-message[b-txaf9xdjit] { color: #888; font-size: 0.9rem; margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: rgba(239, 68, 68, 0.1); border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.2); max-width: 100%; word-break: break-word; }

.error-actions[b-txaf9xdjit] { display: flex; gap: 0.75rem; width: 100%; margin-bottom: 1.5rem; }

.retry-btn[b-txaf9xdjit] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; background: linear-gradient(135deg, #f58524 0%, #d97706 100%); border: none; border-radius: 12px; font-size: 0.95rem; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.2s; }
.retry-btn:hover[b-txaf9xdjit] { box-shadow: 0 4px 16px rgba(245, 133, 36, 0.3); }

.cancel-btn[b-txaf9xdjit] { flex: 1; padding: 1rem; background: #1a1a1a; border: 1px solid #333; border-radius: 12px; font-size: 0.95rem; font-weight: 500; color: #888; cursor: pointer; transition: all 0.2s; }
.cancel-btn:hover[b-txaf9xdjit] { border-color: #555; color: #fff; }

.help-text[b-txaf9xdjit] { color: #555; font-size: 0.8rem; margin: 0; }
.help-text a[b-txaf9xdjit] { color: #f58524; text-decoration: none; }
.help-text a:hover[b-txaf9xdjit] { text-decoration: underline; }
/* _content/QrBiteHub.Web/Components/Shared/Payment/PaymentModal.razor.rz.scp.css */
.payment-modal-overlay[b-1llhsknyjn] { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.payment-modal-overlay.visible[b-1llhsknyjn] { opacity: 1; pointer-events: auto; }

.payment-modal[b-1llhsknyjn] { background: #0d0d0d; border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; padding: 1.5rem; color: #fff; transform: translateY(100%); transition: transform 0.3s ease; max-height: 90vh; overflow-y: auto; }
.payment-modal-overlay.visible .payment-modal[b-1llhsknyjn] { transform: translateY(0); }

@media (min-width: 640px) {
    .payment-modal-overlay[b-1llhsknyjn] { align-items: center; }
    .payment-modal[b-1llhsknyjn] { border-radius: 20px; max-height: 85vh; }
}

.payment-header[b-1llhsknyjn] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.payment-header h2[b-1llhsknyjn] { margin: 0; font-size: 1.25rem; font-weight: 600; }
.close-btn[b-1llhsknyjn] { background: none; border: none; color: #666; cursor: pointer; padding: 8px; border-radius: 50%; transition: all 0.2s; }
.close-btn:hover[b-1llhsknyjn] { color: #fff; background: rgba(255,255,255,0.1); }

.payment-amount[b-1llhsknyjn] { text-align: center; margin-bottom: 2rem; padding: 1.75rem; background: linear-gradient(135deg, #1a1a1a 0%, #111 100%); border-radius: 16px; border: 1px solid #222; }
.payment-amount .label[b-1llhsknyjn] { display: block; color: #888; font-size: 0.8rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.payment-amount .value[b-1llhsknyjn] { display: block; font-size: 2.25rem; font-weight: 700; color: #f58524; font-family: 'JetBrains Mono', monospace; }
.payment-amount .tip[b-1llhsknyjn] { display: block; color: #666; font-size: 0.8rem; margin-top: 0.5rem; }

.payment-methods[b-1llhsknyjn] { display: flex; flex-direction: column; gap: 0.75rem; }
.method-btn[b-1llhsknyjn] { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; color: #fff; cursor: pointer; transition: all 0.2s; font-size: 1rem; }
.method-btn:hover[b-1llhsknyjn] { background: #1a1a1a; border-color: #f58524; }
.method-btn:active[b-1llhsknyjn] { transform: scale(0.98); }
.method-btn .icon[b-1llhsknyjn] { width: 28px; height: 28px; color: #f58524; }
.method-btn img[b-1llhsknyjn] { height: 28px; width: auto; }
.method-btn span[b-1llhsknyjn] { flex: 1; text-align: left; font-weight: 500; }
.method-btn .arrow[b-1llhsknyjn] { color: #444; margin-left: auto; }
.method-btn:hover .arrow[b-1llhsknyjn] { color: #f58524; }

.method-btn.apple-pay[b-1llhsknyjn] { background: #000; border-color: #333; }
.method-btn.apple-pay:hover[b-1llhsknyjn] { border-color: #fff; }
.method-btn.google-pay[b-1llhsknyjn] { background: #1a1a1a; }

.secure-footer[b-1llhsknyjn] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #1a1a1a; color: #555; font-size: 0.75rem; }
.secure-footer svg[b-1llhsknyjn] { color: #10b981; }

.threeds-container[b-1llhsknyjn] { padding: 1rem 0; }
.threeds-header[b-1llhsknyjn] { text-align: center; margin-bottom: 1rem; }
.threeds-header h3[b-1llhsknyjn] { margin: 0 0 0.25rem; font-size: 1.1rem; color: #fff; }
.threeds-header p[b-1llhsknyjn] { margin: 0; color: #888; font-size: 0.875rem; }
.threeds-frame[b-1llhsknyjn] { width: 100%; height: 450px; border: none; border-radius: 12px; background: #fff; }

.simulation-banner[b-1llhsknyjn] { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background: rgba(245,133,36,0.15); border: 1px solid rgba(245,133,36,0.4); border-radius: 10px; color: #f58524; font-size: 0.8rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0.02em; }
.simulation-banner svg[b-1llhsknyjn] { flex-shrink: 0; }
/* _content/QrBiteHub.Web/Components/Shared/Payment/PaymentProcessing.razor.rz.scp.css */
.processing-container[b-319fmog1o8] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; }

.processing-animation[b-319fmog1o8] { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }

.card-icon[b-319fmog1o8] { position: relative; z-index: 1; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); border-radius: 16px; border: 1px solid #333; animation: cardPulse-b-319fmog1o8 2s ease-in-out infinite; }
.card-icon svg[b-319fmog1o8] { color: #f58524; }

@keyframes cardPulse-b-319fmog1o8 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.pulse-ring[b-319fmog1o8] { position: absolute; width: 100%; height: 100%; border: 2px solid #f58524; border-radius: 50%; animation: pulse-b-319fmog1o8 2s ease-out infinite; opacity: 0; }
.pulse-ring.delay-1[b-319fmog1o8] { animation-delay: 0.5s; }
.pulse-ring.delay-2[b-319fmog1o8] { animation-delay: 1s; }

@keyframes pulse-b-319fmog1o8 {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

.processing-container h3[b-319fmog1o8] { font-size: 1.25rem; font-weight: 600; color: #fff; margin: 0 0 0.5rem; }

.message[b-319fmog1o8] { color: #888; font-size: 0.9rem; margin: 0 0 1rem; }

.hint[b-319fmog1o8] { color: #555; font-size: 0.8rem; margin: 0; padding: 0.75rem 1rem; background: rgba(245, 133, 36, 0.1); border-radius: 8px; border: 1px solid rgba(245, 133, 36, 0.2); }
/* _content/QrBiteHub.Web/Components/Shared/Payment/PaymentSuccess.razor.rz.scp.css */
.success-container[b-x7e964ai4x] { display: flex; flex-direction: column; align-items: center; padding: 2rem 1.5rem; text-align: center; }

.success-icon[b-x7e964ai4x] { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%); border-radius: 50%; margin-bottom: 1.5rem; animation: successPop-b-x7e964ai4x 0.5s ease-out; }
.success-icon svg[b-x7e964ai4x] { color: #10b981; }

@keyframes successPop-b-x7e964ai4x {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.success-container h3[b-x7e964ai4x] { font-size: 1.35rem; font-weight: 600; color: #10b981; margin: 0 0 1.5rem; }

.amount-paid[b-x7e964ai4x] { background: #161616; border-radius: 12px; padding: 1.25rem 2rem; margin-bottom: 1rem; border: 1px solid #2a2a2a; }
.amount-paid .label[b-x7e964ai4x] { display: block; font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem; }
.amount-paid .value[b-x7e964ai4x] { display: block; font-size: 1.75rem; font-weight: 700; color: #fff; font-family: 'JetBrains Mono', monospace; }

.transaction-id[b-x7e964ai4x] { background: #111; border-radius: 8px; padding: 0.75rem 1.25rem; margin-bottom: 1rem; }
.transaction-id .label[b-x7e964ai4x] { font-size: 0.7rem; color: #666; text-transform: uppercase; letter-spacing: 0.05em; }
.transaction-id .value[b-x7e964ai4x] { font-size: 0.85rem; color: #888; font-family: 'JetBrains Mono', monospace; word-break: break-all; }

.receipt-note[b-x7e964ai4x] { color: #666; font-size: 0.85rem; margin: 0 0 1.5rem; }

.done-btn[b-x7e964ai4x] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 1rem; background: #10b981; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; color: #fff; cursor: pointer; transition: all 0.2s; }
.done-btn:hover[b-x7e964ai4x] { background: #059669; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); }
/* _content/QrBiteHub.Web/Components/Shared/SubscriptionBanner.razor.rz.scp.css */
.subscription-banner[b-2uarh1pywi] { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; font-size: 0.8125rem; font-weight: 500; gap: 0.5rem; }
.banner-content[b-2uarh1pywi] { display: flex; align-items: center; gap: 0.5rem; }
.banner-info[b-2uarh1pywi] { background: var(--accent-subtle); color: var(--accent); border-bottom: 1px solid var(--accent); }
.banner-warning[b-2uarh1pywi] { background: var(--warning-bg); color: var(--warning-text); border-bottom: 1px solid var(--warning); }
.banner-urgent[b-2uarh1pywi] { background: var(--danger-bg); color: var(--danger-text); border-bottom: 1px solid var(--danger); }
.banner-critical[b-2uarh1pywi] { background: var(--danger); color: #fff; border-bottom: 1px solid var(--danger); }
.banner-dismiss[b-2uarh1pywi] { background: none; border: none; cursor: pointer; color: inherit; opacity: 0.7; padding: 0.25rem; border-radius: var(--radius); }
.banner-dismiss:hover[b-2uarh1pywi] { opacity: 1; background: rgba(0,0,0,0.1); }

/* Blocking overlay for Suspended/Expired/Cancelled */
.subscription-block-overlay[b-2uarh1pywi] { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.block-card[b-2uarh1pywi] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem; text-align: center; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); }
.block-card svg[b-2uarh1pywi] { color: var(--danger); margin-bottom: 1rem; }
.block-card h2[b-2uarh1pywi] { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.75rem; }
.block-card p[b-2uarh1pywi] { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.5; }
.block-link[b-2uarh1pywi] { display: inline-block; padding: 0.625rem 1.25rem; background: var(--accent); color: #fff; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 0.15s; }
.block-link:hover[b-2uarh1pywi] { background: var(--accent-hover); }