/* ============================================================
   BANDWIDTH TIFFIN — Customer Dashboard CSS
   Theme: Matched to Homepage (Outfit font, #080c0d dark base, #e63946 accent)
   Version: 3.0 — Homepage Unified
   ============================================================ */

/* ─── Fonts (match homepage exactly) ────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

/* ─── CSS Variables (mirrors homepage style.css) ────────────── */
:root {
    /* Backgrounds — same as homepage */
    --bg-app:       #080c0d;
    --bg-surface-1: #0f1315;
    --bg-surface-2: #141a1d;
    --bg-input:     #1a2124;

    /* Text — same as homepage */
    --text-primary:   #f0f4f5;
    --text-secondary: #8a9ba3;
    --text-muted:     #5a6e77;

    /* Accent — same as homepage */
    --accent-primary:   #e63946;
    --accent-secondary: #ff6b74;
    --accent-dark:      #b52a35;
    --accent-gradient:  linear-gradient(135deg, #e63946 0%, #ff6b74 100%);
    --accent-glow:      rgba(230, 57, 70, 0.2);
    --gold:             #f4a261;

    /* Status */
    --status-active:      #32CD32;
    --status-active-bg:   rgba(50, 205, 50, 0.1);
    --status-pending:     #FFBF00;
    --status-pending-bg:  rgba(255, 191, 0, 0.1);
    --status-missed:      #FF6961;
    --status-missed-bg:   rgba(255, 105, 97, 0.1);

    /* Borders — same as homepage */
    --border:           rgba(255,255,255,0.07);
    --border-hover:     rgba(230,57,70,0.35);
    --border-active:    rgba(230,57,70,0.6);

    /* Shadows */
    --shadow:           0 4px 24px rgba(0,0,0,0.5);
    --shadow-accent:    0 8px 32px rgba(230,57,70,0.2);
    --shadow-sm:        0 2px 12px rgba(0,0,0,0.4);

    /* Typography — same as homepage */
    --font-heading: 'Outfit', sans-serif;
    --font-body:    'Outfit', sans-serif;

    /* Radii — match homepage */
    --radius-card:  20px;
    --radius-input: 12px;
    --radius-pill:  50px;

    /* Transitions */
    --trans:             0.25s ease;
    --transition-fast:   0.18s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ─── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family: var(--font-body);
    background: var(--bg-app);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
h1,h2,h3,h4,h5 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; font-family:var(--font-body); }
input, select, textarea { font-family:var(--font-body); }

/* ─── Card (replaces .neumorphic) ───────────────────────────── */
.neumorphic {
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-normal);
}
.neumorphic:hover { border-color: var(--border-hover); }

.neumorphic-inset {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
}

.neumorphic-sm {
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
}

.glassmorphic {
    background: rgba(15,19,21,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
}

/* ─── Utility ────────────────────────────────────────────────── */
.hidden { display:none !important; }
.flex-1 { flex:1; }
.flex-2 { flex:2; }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items:center; justify-content:center; gap:8px;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-input);
    padding: 12px 24px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: var(--trans);
    min-height: 44px;
    white-space: nowrap;
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity:0.45; cursor:not-allowed; }

.btn-secondary {
    display: inline-flex; align-items:center; justify-content:center; gap:8px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    padding: 12px 24px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: var(--trans);
    min-height: 44px;
    white-space: nowrap;
}
.btn-secondary:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: var(--bg-surface-2);
}
.btn-secondary:disabled { opacity:0.45; cursor:not-allowed; }

.neumorphic-btn {
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--trans);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex; align-items:center; justify-content:center; gap:6px;
    padding: 8px 16px;
}
.neumorphic-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }

.btn-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items:center; justify-content:center;
    transition: var(--trans);
    flex-shrink:0;
}
.btn-icon:hover { color: var(--accent-primary); border-color: var(--border-hover); }

/* ─── Spinner ────────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Section label (matches homepage .section-label) ───────── */
.section-chip {
    display: inline-block;
    background: rgba(230,57,70,0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(230,57,70,0.25);
    padding: 3px 12px;
    border-radius: 30px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─── Views ──────────────────────────────────────────────────── */
.view { display:none; min-height:100vh; }
.view.active { display:flex; }

/* ─── SIGNUP PAGE ────────────────────────────────────────────── */
#signup-page { flex-direction:row; min-height:100vh; }

.split-left {
    flex:1;
    position:relative;
    overflow:hidden;
    background: var(--bg-surface-1);
    display:flex; align-items:flex-end;
    padding: 56px;
    min-height:100vh;
}
.split-left::before {
    content:'';
    position:absolute; inset:0;
    background-image: url('https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=900&q=80');
    background-size:cover; background-position:center;
    filter: brightness(0.35) saturate(1.1);
    z-index:0;
}
.split-left::after {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(8,12,13,0.97) 0%, rgba(8,12,13,0.3) 60%, transparent 100%);
    z-index:1;
}
.split-hero { position:relative; z-index:2; }
.split-hero .brand { display:flex; align-items:center; gap:12px; margin-bottom:32px; }

.brand-logo {
    width:46px; height:46px;
    background: var(--accent-primary);
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-heading); font-weight:900; font-size:1.2rem; color:#fff;
    box-shadow: var(--shadow-accent);
    flex-shrink:0;
}
.brand-name { font-family:var(--font-heading); font-size:1.15rem; font-weight:800; letter-spacing:0.5px; }

.split-hero h1 { font-size:clamp(2rem,4vw,3rem); line-height:1.15; margin-bottom:24px; }
.split-hero h1 span { color: var(--accent-primary); }

.value-props { display:flex; flex-direction:column; gap:14px; }
.value-prop { display:flex; align-items:center; gap:14px; font-size:0.92rem; color:rgba(240,244,245,0.8); }
.value-prop i { font-size:16px; color:var(--accent-primary); flex-shrink:0; width:18px; }

/* Scanner line */
.scanner-line {
    position:absolute; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity:0.4; z-index:3;
    animation: scan 5s linear infinite;
    pointer-events:none;
}
@keyframes scan {
    0%   { top:0%; opacity:0; }
    5%   { opacity:0.4; }
    95%  { opacity:0.4; }
    100% { top:100%; opacity:0; }
}

.split-right {
    width:520px; min-width:320px;
    overflow-y:auto;
    padding: 48px 48px;
    display:flex; flex-direction:column; justify-content:center;
    background: var(--bg-app);
}

.auth-header { margin-bottom:32px; }
.auth-header h2 { font-size:1.8rem; margin-bottom:8px; font-weight:800; }
.auth-header p { color:var(--text-secondary); font-size:0.92rem; line-height:1.5; }
.auth-header p a { color:var(--accent-primary); font-weight:600; }
.auth-header p a:hover { color:var(--accent-secondary); }

.form-row { display:flex; gap:14px; }
.form-row .input-group { flex:1; }

.input-group { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.input-group label {
    font-size:0.78rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.8px;
}
.input-wrapper {
    position:relative;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    transition: border-color var(--transition-fast);
}
.input-wrapper:focus-within { border-color: var(--border-hover); }
.input-wrapper input,
.input-wrapper select {
    width:100%; padding:12px 16px;
    background:transparent; border:none; outline:none;
    color:var(--text-primary); font-size:0.92rem; font-family:var(--font-body);
}
.input-wrapper select { appearance:none; cursor:pointer; }
.input-wrapper select option { background:var(--bg-surface-2); color:var(--text-primary); }
.input-wrapper .input-icon {
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); font-size:16px; pointer-events:none;
}
.input-wrapper .toggle-pass {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; padding:0; transition:color var(--transition-fast);
}
.input-wrapper .toggle-pass:hover { color:var(--accent-primary); }
.input-wrapper input.has-toggle { padding-right:44px; }

/* Password strength */
.pass-strength { height:3px; background:var(--bg-surface-2); border-radius:10px; overflow:hidden; margin-top:4px; }
.pass-strength-fill { height:100%; border-radius:10px; transition:width 0.4s ease, background 0.4s ease; width:0%; }
.pass-strength-fill.weak   { width:33%; background:var(--status-missed); }
.pass-strength-fill.medium { width:66%; background:var(--status-pending); }
.pass-strength-fill.strong { width:100%; background:var(--status-active); }

/* Phone + OTP */
.phone-otp-wrapper { display:flex; gap:10px; align-items:stretch; }
.phone-otp-wrapper .input-wrapper { flex:1; }
.phone-otp-wrapper .btn-secondary { flex-shrink:0; padding:0 16px; }

#otp-group { flex-direction:column; gap:7px; }
#otp-timer { font-size:0.78rem; color:var(--text-secondary); }
#resend-btn {
    background:none; border:none; color:var(--accent-primary);
    font-size:0.78rem; font-weight:700; cursor:pointer; padding:0;
}
#resend-btn:disabled { opacity:0.45; cursor:not-allowed; }

.terms-row {
    display:flex; align-items:flex-start; gap:10px;
    margin-bottom:20px; font-size:0.83rem; color:var(--text-secondary); line-height:1.5;
}
.terms-row a { color:var(--accent-primary); }
.terms-row input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent-primary); flex-shrink:0; margin-top:3px; }

/* ─── LOGIN PAGE ─────────────────────────────────────────────── */
#login-page { align-items:center; justify-content:center; position:relative; overflow:hidden; }

.login-bg {
    position:fixed; inset:0;
    background:
        radial-gradient(ellipse at 25% 50%, rgba(230,57,70,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 20%, rgba(244,162,97,0.05) 0%, transparent 50%);
    animation: bgPulse 8s ease-in-out infinite alternate; z-index:0;
}
@keyframes bgPulse { from{opacity:0.6;} to{opacity:1;} }

.auth-card {
    position:relative; z-index:1;
    width:100%; max-width:440px;
    padding:44px 40px;
    border-radius: var(--radius-card);
    margin:24px;
}

.auth-brand { display:flex; align-items:center; gap:14px; margin-bottom:32px; }

.google-btn-wrapper { display:flex; gap:10px; margin-bottom:22px; }
.google-btn {
    flex:1;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    padding: 12px 20px;
    color: var(--text-primary);
    font-weight: 600; font-size:0.88rem;
    display:flex; align-items:center; justify-content:center; gap:10px;
    cursor:pointer; transition: var(--trans);
}
.google-btn:hover { border-color:var(--border-hover); background:var(--bg-input); transform:translateY(-1px); }
.google-btn img { width:18px; height:18px; object-fit:contain; }

.divider {
    display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }
.divider span { color:var(--text-muted); font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }

.login-extras { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; font-size:0.83rem; }
.remember-me { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--text-secondary); }
.remember-me input[type="checkbox"] { accent-color:var(--accent-primary); width:15px; height:15px; }
.forgot-link { color:var(--accent-primary); font-weight:600; }
.forgot-link:hover { color:var(--accent-secondary); }

/* ─── DASHBOARD VIEW ─────────────────────────────────────────── */
#dashboard-page { flex-direction:column; min-height:100vh; }

.dashboard-layout { display:flex; height:100vh; overflow:hidden; }

/* Mobile header */
.mobile-header {
    display:none;
    align-items:center; justify-content:space-between;
    padding:14px 18px;
    background: var(--bg-surface-1);
    border-bottom: 1px solid var(--border);
    position:sticky; top:0; z-index:100;
}
.mobile-brand { display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:800; font-size:1rem; }
.hamburger {
    width:38px; height:38px;
    background:var(--bg-surface-2); border:1px solid var(--border); border-radius:10px;
    color:var(--text-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.sidebar-backdrop {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.65); z-index:199;
    backdrop-filter:blur(4px);
}
.sidebar-backdrop.visible { display:block; }

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar {
    width:252px; flex-shrink:0;
    background: var(--bg-surface-1);
    border-right: 1px solid var(--border);
    border-radius: 0;
    display:flex; flex-direction:column;
    padding: 28px 14px;
    z-index:200; overflow-y:auto;
    transition: transform 0.3s ease;
}
.sidebar-brand {
    display:flex; align-items:center; gap:12px;
    margin-bottom:36px; padding-left:6px;
}
.sidebar-brand .brand-name { font-family:var(--font-heading); font-size:1.05rem; font-weight:900; }

.sidebar-nav { display:flex; flex-direction:column; gap:4px; flex:1; }

.nav-item {
    display:flex; align-items:center; gap:12px;
    padding:11px 14px; border-radius:12px; border:none;
    background:transparent; color:var(--text-secondary);
    font-size:0.88rem; font-weight:500; cursor:pointer;
    transition: var(--trans); text-align:left; width:100%;
}
.nav-item i { font-size:16px; flex-shrink:0; width:18px; text-align:center; }
.nav-item .nav-text { flex:1; }
.nav-item .nav-badge {
    background: var(--accent-primary); color:#fff;
    font-size:0.68rem; font-weight:700;
    border-radius:20px; padding:2px 7px;
}

.nav-item:hover:not(.active) { background:var(--bg-surface-2); color:var(--text-primary); }
.nav-item.active {
    background: rgba(230,57,70,0.1);
    color: var(--accent-primary);
    border-left:3px solid var(--accent-primary);
    padding-left:11px;
}
.nav-item.active i { color:var(--accent-primary); }

.sidebar-divider { height:1px; background:var(--border); margin:10px 0; }
.sidebar-bottom { margin-top:auto; padding-top:16px; }

.logout-btn {
    display:flex; align-items:center; gap:12px;
    padding:11px 14px; border-radius:12px; border:none;
    background:transparent; color:var(--status-missed);
    font-size:0.88rem; font-weight:600; cursor:pointer;
    transition: var(--trans); width:100%;
}
.logout-btn:hover { background:var(--status-missed-bg); }
.logout-btn i { font-size:16px; }

/* ─── Main Content ───────────────────────────────────────────── */
.main-content {
    flex:1; padding:32px 36px;
    overflow-y:auto;
    display:flex; flex-direction:column;
    gap:28px;
}

.top-bar { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.top-bar-left h2 { font-size:1.55rem; margin-bottom:4px; font-weight:800; }
.top-bar-left p  { color:var(--text-secondary); font-size:0.88rem; }
.top-bar-right   { display:flex; align-items:center; gap:10px; }

.date-chip {
    display:flex; align-items:center; gap:7px;
    padding:9px 14px; border-radius:var(--radius-pill);
    font-size:0.82rem; color:var(--text-secondary);
    background:var(--bg-surface-2); border:1px solid var(--border);
}
.date-chip i { font-size:13px; color:var(--accent-primary); }

.whatsapp-fab {
    width:42px; height:42px; border-radius:50%; border:none;
    background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: var(--trans); flex-shrink:0;
    box-shadow:0 4px 14px rgba(37,211,102,0.3);
}
.whatsapp-fab:hover { transform:scale(1.08); }
.whatsapp-fab svg { width:20px; height:20px; fill:#fff; }

/* Tabs */
.dash-tab { display:none; animation: tabFadeIn 0.25s ease; width:100%; }
.dash-tab.active { display:block; }
@keyframes tabFadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

.content-row { display:flex; gap:24px; align-items:flex-start; }

.section-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:18px;
}
.section-header h3 {
    font-size:1rem; display:flex; align-items:center; gap:9px; font-weight:700;
}
.section-header h3 i { font-size:15px; color:var(--accent-primary); }

/* ─── Overview Stat Cards ────────────────────────────────────── */
.stats-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:18px; margin-bottom:4px;
}

.stat-card {
    padding:22px;
    border-radius: var(--radius-card);
    transition: var(--trans);
    background: var(--bg-surface-1);
    border: 1px solid var(--border);
}
.stat-card:hover { border-color:var(--border-hover); transform:translateY(-2px); }

.stat-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.stat-icon {
    width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
}
.stat-icon.blue   { background:rgba(59,130,246,0.12); color:#60a5fa; }
.stat-icon.green  { background:var(--status-active-bg); color:var(--status-active); }
.stat-icon.orange { background:rgba(244,162,97,0.12); color:var(--gold); }
.stat-icon.red    { background:rgba(230,57,70,0.12); color:var(--accent-primary); }
.stat-icon.purple { background:rgba(167,139,250,0.12); color:#a78bfa; }

.stat-badge {
    font-size:0.68rem; font-weight:700; padding:3px 9px;
    border-radius:var(--radius-pill);
    background:var(--status-active-bg); color:var(--status-active);
}
.stat-badge.yellow { background:var(--status-pending-bg); color:var(--status-pending); }

.stat-value { font-family:var(--font-heading); font-size:1.9rem; font-weight:900; line-height:1; margin-bottom:5px; }
.stat-label { font-size:0.8rem; color:var(--text-secondary); font-weight:500; }

/* Status pills */
.status-pill {
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.72rem; font-weight:700; padding:4px 10px;
    border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:0.5px;
}
.status-pill::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.active-pill   { color:var(--status-active);  background:var(--status-active-bg); }
.dispatched    { color:var(--status-pending); background:var(--status-pending-bg); }
.pending-pill  { color:var(--status-pending); background:var(--status-pending-bg); }
.missed-pill   { color:var(--status-missed);  background:var(--status-missed-bg); }
.scheduled-pill { color:var(--text-secondary); background:var(--bg-surface-2); }
.scheduled-pill::before { display:none; }

/* ─── Tracker ────────────────────────────────────────────────── */
.tracker-timeline { display:flex; flex-direction:column; }
.tracker-step { display:flex; align-items:flex-start; gap:14px; position:relative; padding-bottom:24px; }
.tracker-step:last-child { padding-bottom:0; }
.tracker-step:last-child .step-line { display:none; }
.step-icon-wrap { position:relative; display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.step-dot {
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; transition: var(--trans);
}
.step-dot.done    { background:var(--status-active-bg); color:var(--status-active); border:1px solid rgba(50,205,50,0.3); }
.step-dot.current { background:var(--accent-primary); color:#fff; box-shadow:var(--shadow-accent); animation:pulse 2s ease-in-out infinite; }
.step-dot.pending-step { background:var(--bg-surface-2); color:var(--text-muted); border:1px solid var(--border); }
@keyframes pulse { 0%,100%{box-shadow:0 0 10px var(--accent-glow);} 50%{box-shadow:0 0 22px var(--accent-glow);} }

.step-line {
    width:1px; min-height:24px; background:var(--border);
    position:absolute; top:34px; left:16px;
}
.step-line.done-line { background:var(--status-active); }
.step-info { padding-top:5px; flex:1; }
.step-info h4 { font-size:0.9rem; margin-bottom:3px; }
.step-info p  { font-size:0.8rem; color:var(--text-secondary); }

/* ─── Meal Selection ─────────────────────────────────────────── */
.meal-selection-card { padding:26px; }
.meal-dropdowns { display:flex; gap:14px; margin-bottom:18px; }
.meal-dropdowns .input-group { flex:1; margin-bottom:0; }

/* ─── Addon Cart ─────────────────────────────────────────────── */
.addons-card { padding:26px; }
.addon-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.addon-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 16px; border-radius:12px;
    background:var(--bg-input); border:1px solid var(--border);
    transition: border-color var(--transition-fast);
}
.addon-item:hover { border-color:var(--border-hover); }
.addon-info h4 { font-size:0.88rem; margin-bottom:2px; }
.addon-info p  { font-size:0.78rem; color:var(--text-secondary); }

.qty-control { display:flex; align-items:center; gap:10px; background:var(--bg-surface-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px 8px; }
.qty-btn {
    width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
    background:var(--bg-input); color:var(--text-primary);
    font-size:1rem; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition: var(--trans);
}
.qty-btn:hover { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }
.qty-display { min-width:22px; text-align:center; font-weight:700; font-size:0.9rem; }

.addons-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:18px; border-top:1px solid var(--border);
}
.addons-total span { font-size:0.83rem; color:var(--text-secondary); }
.addons-total strong { font-size:1.45rem; font-weight:900; color:var(--accent-primary); }

/* ─── Subscription ───────────────────────────────────────────── */
.plan-card { padding:28px; position:relative; overflow:hidden; }
.plan-card::after {
    content:'';
    position:absolute; top:-80px; right:-80px;
    width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(230,57,70,0.08), transparent 70%);
    pointer-events:none;
}
.plan-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; }
.plan-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--accent-primary); color:#fff;
    padding:5px 14px; border-radius:var(--radius-pill);
    font-size:0.76rem; font-weight:700;
}
.plan-price { text-align:right; }
.plan-price .amount {
    font-size:2.2rem; font-weight:900; color:var(--accent-primary); line-height:1;
}
.plan-price .period { color:var(--text-secondary); font-size:0.82rem; }

.plan-breakdown { margin-bottom:22px; }
.plan-breakdown h4 { margin-bottom:10px; font-size:0.88rem; color:var(--text-secondary); }
.breakdown-list { display:flex; flex-direction:column; gap:9px; }
.breakdown-item { display:flex; align-items:center; gap:10px; font-size:0.88rem; }
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.color-red    { background:var(--status-missed); }
.color-yellow { background:var(--status-pending); }
.color-green  { background:var(--status-active); }
.b-label { font-size:0.88rem; font-weight:500; }

.progress-header { display:flex; justify-content:space-between; font-size:0.82rem; margin-bottom:7px; color:var(--text-secondary); }
.progress-track { height:10px; width:100%; padding:2px; background:var(--bg-input); border-radius:10px; border:1px solid var(--border); }
.progress-fill  { height:100%; border-radius:8px; background:var(--accent-primary); box-shadow:0 0 8px var(--accent-glow); }

.plan-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Weekly Planner */
.weekly-planner { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.weekly-planner::-webkit-scrollbar { display:none; }
.day-card { min-width:126px; flex-shrink:0; padding:18px 14px; border-radius:16px; text-align:center; background:var(--bg-surface-1); border:1px solid var(--border); transition:var(--trans); }
.day-card:hover { border-color:var(--border-hover); }
.day-label { font-size:0.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:7px; }
.day-date  { font-size:1.25rem; font-weight:900; margin-bottom:10px; }
.skip-status { font-size:0.75rem; font-weight:600; margin-bottom:10px; min-height:16px; }
.skip-status.active  { color:var(--status-active); }
.skip-status.skipped { color:var(--status-missed); }
.skip-btn {
    width:100%; padding:8px 10px; border-radius:8px;
    border:1px solid var(--border); background:var(--bg-surface-2);
    color:var(--text-secondary); font-size:0.78rem; font-weight:600;
    cursor:pointer; transition:var(--trans); font-family:var(--font-body);
}
.skip-btn:hover { color:var(--text-primary); border-color:var(--border-hover); }
.skip-btn.neumorphic-inset { background:var(--status-missed-bg); border-color:rgba(255,105,97,0.3); color:var(--status-missed); }

/* ─── Rollover ───────────────────────────────────────────────── */
.rollover-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:4px; }
.calendar-container { padding:18px; border-radius:14px; margin-bottom:20px; background:var(--bg-surface-2); border:1px solid var(--border); }
.calendar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-weight:700; }
.cal-nav { width:30px; height:30px; border-radius:8px; border:1px solid var(--border); color:var(--text-primary); background:var(--bg-input); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--trans); }
.cal-nav:hover { color:var(--accent-primary); border-color:var(--border-hover); }
.calendar-days-grid,.calendar-dates-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.calendar-days-grid { text-align:center; font-size:0.74rem; color:var(--text-muted); font-weight:700; margin-bottom:10px; }
.calendar-dates-grid { gap:3px; }
.date-btn { aspect-ratio:1; border:none; background:transparent; color:var(--text-primary); border-radius:7px; font-family:var(--font-body); font-weight:500; cursor:pointer; transition:0.15s; font-size:0.82rem; }
.date-btn:not(.empty):not(.past):hover { background:var(--bg-surface-1); }
.date-btn.past  { color:var(--text-muted); cursor:not-allowed; }
.date-btn.today { background:rgba(230,57,70,0.12); border:1px solid rgba(230,57,70,0.35); color:var(--accent-primary); }
.date-btn.selected { background:var(--accent-primary); color:#fff; }

.rollover-feedback {
    background:var(--status-active-bg); border:1px solid rgba(50,205,50,0.2);
    padding:14px; border-radius:10px;
    display:flex; align-items:flex-start; gap:10px;
    margin-bottom:20px; animation:tabFadeIn 0.3s ease;
}
.feedback-icon { color:var(--status-active); font-size:18px; }
.rollover-feedback p { font-size:0.87rem; line-height:1.5; }
.highlight-text { font-weight:700; color:var(--text-primary); }

/* ─── Billing ────────────────────────────────────────────────── */
.billing-table-wrap { overflow-x:auto; }
.billing-table { width:100%; border-collapse:separate; border-spacing:0 8px; font-size:0.87rem; }
.billing-table th { padding:10px 14px; text-align:left; color:var(--text-muted); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; }
.billing-table td { padding:14px; background:var(--bg-input); }
.billing-table tr td:first-child { border-radius:10px 0 0 10px; border-left:1px solid var(--border); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.billing-table tr td:last-child  { border-radius:0 10px 10px 0; border-right:1px solid var(--border); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.billing-table tr td { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.billing-table tbody tr:hover td { background:var(--bg-surface-2); }
.invoice-download { border:none; background:transparent; color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; gap:5px; font-size:0.82rem; transition:color var(--transition-fast); }
.invoice-download:hover { color:var(--accent-primary); }

/* ─── Settings ───────────────────────────────────────────────── */
.settings-section { padding:26px; margin-bottom:20px; }
.settings-section h3 { font-size:1rem; margin-bottom:20px; display:flex; align-items:center; gap:9px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.settings-section h3 i { color:var(--accent-primary); font-size:16px; }

.spice-options { display:flex; gap:8px; flex-wrap:wrap; }
.spice-pill {
    padding:8px 20px; border-radius:var(--radius-pill);
    border:1px solid var(--border); background:var(--bg-surface-2);
    color:var(--text-secondary); font-size:0.85rem; font-weight:600;
    cursor:pointer; transition:var(--trans); font-family:var(--font-body);
}
.spice-pill:hover { border-color:var(--border-hover); color:var(--text-primary); }
.spice-pill.active { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); box-shadow:var(--shadow-accent); }

.dislike-tags { display:flex; gap:7px; flex-wrap:wrap; }
.dislike-tag {
    display:flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:var(--radius-pill);
    background:var(--bg-surface-2); border:1px solid var(--border);
    font-size:0.8rem; font-weight:500; color:var(--text-secondary);
}
.dislike-tag button { background:none; border:none; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; padding:0; transition:color var(--transition-fast); font-size:12px; }
.dislike-tag button:hover { color:var(--status-missed); }

.notif-list { display:flex; flex-direction:column; gap:14px; }
.notif-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.notif-info h4 { font-size:0.88rem; margin-bottom:2px; }
.notif-info p  { font-size:0.78rem; color:var(--text-secondary); }
.toggle-switch { position:relative; width:46px; height:25px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-track {
    position:absolute; inset:0;
    background:var(--bg-surface-2); border:1px solid var(--border);
    border-radius:25px; cursor:pointer; transition:var(--trans);
}
.toggle-track::after { content:''; position:absolute; left:3px; top:3px; width:17px; height:17px; border-radius:50%; background:var(--text-muted); transition:var(--trans); }
.toggle-switch input:checked + .toggle-track { background:rgba(50,205,50,0.15); border-color:rgba(50,205,50,0.3); }
.toggle-switch input:checked + .toggle-track::after { left:calc(100% - 20px); background:var(--status-active); }

/* ─── Meal History ───────────────────────────────────────────── */
.history-month { margin-bottom:32px; }
.history-month-title { font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.history-month-title::after { content:''; flex:1; height:1px; background:var(--border); }
.history-items { display:flex; flex-direction:column; gap:10px; }
.history-item { display:flex; align-items:center; gap:18px; padding:16px 18px; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); transition:border-color var(--transition-fast); }
.history-item:hover { border-color:var(--border-hover); }
.history-date { display:flex; flex-direction:column; align-items:center; min-width:48px; padding-right:18px; border-right:1px solid var(--border); }
.history-date .h-day  { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; font-weight:700; }
.history-date .h-date { font-weight:900; font-size:1.05rem; }
.history-info { flex:1; }
.history-info h4 { font-size:0.9rem; margin-bottom:3px; }
.history-info p  { font-size:0.78rem; color:var(--text-secondary); }
.star-rating { display:flex; gap:3px; }
.star { font-size:16px; color:var(--text-muted); cursor:pointer; transition:color var(--transition-fast), transform var(--transition-fast); user-select:none; }
.star:hover,.star.filled { color:#ffd700; transform:scale(1.1); }

/* ─── Main Menu ──────────────────────────────────────────────── */
.menu-tabs { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.menu-tab-btn {
    padding:9px 20px; border-radius:var(--radius-pill);
    border:1px solid var(--border); background:var(--bg-surface-2);
    color:var(--text-secondary); font-size:0.85rem; font-weight:600;
    cursor:pointer; transition:var(--trans); font-family:var(--font-body);
}
.menu-tab-btn:hover { border-color:var(--border-hover); color:var(--text-primary); }
.menu-tab-btn.active { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); }

.menu-category { display:none; }
.menu-category.active { display:block; animation:tabFadeIn 0.25s ease; }
.menu-category-title { font-size:0.8rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.menu-category-title::after { content:''; flex:1; height:1px; background:var(--border); }
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-bottom:28px; }
.menu-item { padding:14px 16px; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); display:flex; align-items:center; gap:10px; transition:var(--trans); }
.menu-item:hover { border-color:var(--border-hover); transform:translateY(-1px); }
.menu-item-icon { font-size:20px; }
.menu-item-name { font-size:0.85rem; font-weight:500; }

/* ─── Right Action Panel ─────────────────────────────────────── */
.action-panel {
    width:300px; flex-shrink:0;
    background:var(--bg-surface-1);
    border-left: 1px solid var(--border);
    border-radius:0;
    display:flex; flex-direction:column;
    padding:32px 24px; overflow-y:auto; gap:24px;
}
.profile-snippet { display:flex; align-items:center; gap:16px; }
.avatar-wrap { position:relative; flex-shrink:0; }
.avatar-circle {
    width:64px; height:64px; border-radius:50%;
    background:var(--accent-primary);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-heading); font-size:1.4rem; font-weight:900; color:#fff;
    box-shadow:var(--shadow-accent);
}
.edit-avatar-btn {
    position:absolute; bottom:-2px; right:-2px;
    width:24px; height:24px; border-radius:50%; border:1px solid var(--border);
    background:var(--bg-surface-2); color:var(--text-primary);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:11px;
}
.profile-info h3 { font-size:1rem; margin-bottom:3px; font-weight:700; }
.profile-meta { font-size:0.8rem; color:var(--text-secondary); display:flex; align-items:center; gap:4px; }
.profile-meta i { font-size:13px; }
.neumorphic-divider { border:none; height:1px; background:var(--border); margin:0; }
.panel-widget-title { font-size:0.92rem; font-weight:700; margin-bottom:14px; }

.plan-update-widget { display:flex; flex-direction:column; gap:9px; }
.plan-option { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); cursor:pointer; transition:var(--trans); }
.plan-option:hover { border-color:var(--border-hover); }
.plan-option.current-plan { border-color:var(--accent-primary); background:rgba(230,57,70,0.05); }
.plan-option-icon { font-size:20px; }
.plan-option-info h4 { font-size:0.84rem; margin-bottom:2px; }
.plan-option-info p  { font-size:0.75rem; color:var(--text-secondary); }

.quick-actions { display:flex; flex-direction:column; gap:8px; }
.quick-action-btn {
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    border-radius:12px; border:1px solid var(--border);
    background:var(--bg-input); color:var(--text-primary);
    font-size:0.84rem; font-weight:500; cursor:pointer; text-align:left; width:100%;
    transition:var(--trans); font-family:var(--font-body);
}
.quick-action-btn:hover { border-color:var(--border-hover); color:var(--accent-primary); }
.quick-action-btn i { font-size:15px; color:var(--text-muted); }
.quick-action-btn:hover i { color:var(--accent-primary); }

.active-plan-widget { padding:22px; }
.widget-title { margin-bottom:18px; }
.widget-title h3 { font-size:0.95rem; margin-bottom:3px; }
.widget-title p  { font-size:0.8rem; color:var(--text-secondary); }
.meal-status-widget { padding:22px; }

/* ─── Deliveries List ────────────────────────────────────────── */
.deliveries-list { display:flex; flex-direction:column; gap:10px; }
.delivery-item { display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:12px; background:var(--bg-input); border:1px solid var(--border); }
.d-date { display:flex; flex-direction:column; align-items:center; min-width:46px; padding-right:16px; border-right:1px solid var(--border); }
.d-date .day  { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; font-weight:700; }
.d-date .date { font-weight:900; font-size:1rem; }
.d-info { flex:1; }
.d-info h4 { font-size:0.9rem; margin-bottom:3px; }
.d-info p  { font-size:0.78rem; color:var(--text-secondary); display:flex; align-items:center; gap:3px; }
.d-info p i { font-size:12px; }

/* ─── Modals ─────────────────────────────────────────────────── */
.overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.75);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    z-index:1000; padding:20px; animation:fadeIn 0.22s ease;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.popup-card {
    width:100%; max-width:420px; padding:32px;
    animation:popIn 0.28s cubic-bezier(0.175,0.885,0.32,1.275);
    max-height:90vh; overflow-y:auto;
}
@keyframes popIn { from{opacity:0;transform:scale(0.92) translateY(16px);} to{opacity:1;transform:scale(1) translateY(0);} }
.popup-card h3 { font-size:1.15rem; margin-bottom:10px; }

.otp-boxes { display:flex; gap:10px; justify-content:center; margin:22px 0; }
.otp-box {
    width:52px; height:52px; border-radius:12px;
    background:var(--bg-input); border:1px solid var(--border);
    text-align:center; font-size:1.3rem; font-weight:700; color:var(--text-primary); outline:none;
    transition:border-color var(--transition-fast); font-family:var(--font-heading);
}
.otp-box:focus { border-color:var(--border-hover); }

.meal-alert-icon { font-size:52px; text-align:center; margin-bottom:14px; }
.meal-alert-details { background:var(--bg-input); border:1px solid var(--border); border-radius:12px; padding:14px 18px; text-align:left; margin-bottom:20px; }
.meal-detail-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:0.87rem; }
.meal-detail-row:not(:last-child) { border-bottom:1px solid var(--border); }
.meal-detail-row span:first-child { color:var(--text-secondary); }
.meal-detail-row span:last-child { font-weight:700; }

/* ─── Toast ──────────────────────────────────────────────────── */
.toast-notification {
    position:fixed; top:22px; left:50%;
    transform:translateX(-50%) translateY(-120px);
    padding:12px 22px; border-radius:var(--radius-pill);
    display:flex; align-items:center; gap:9px;
    z-index:9999; transition:transform var(--transition-slow);
    font-weight:600; font-size:0.87rem; pointer-events:none;
    white-space:nowrap; max-width:calc(100vw - 40px);
}
.toast-notification.show { transform:translateX(-50%) translateY(0); }
.toast-notification.success { background:var(--status-active-bg); border:1px solid rgba(50,205,50,0.25); color:var(--status-active); }
.toast-notification.error   { background:var(--status-missed-bg); border:1px solid rgba(255,105,97,0.25); color:var(--status-missed); }
.toast-notification.info    { background:var(--bg-surface-2); border:1px solid var(--border); color:var(--text-primary); }
.toast-notification i { font-size:16px; }

/* ─── Mobile Bottom Nav ──────────────────────────────────────── */
.bottom-nav { display:none; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .stats-grid     { grid-template-columns:repeat(2,1fr); }
    .rollover-stats { grid-template-columns:repeat(2,1fr); }
    .action-panel   { width:260px; }
}
@media (max-width: 1100px) {
    #action-panel { display:none !important; }
    .main-content { padding:26px 28px; }
}
@media (max-width: 900px) {
    .split-left { display:none; }
    .split-right { width:100%; padding:36px 28px; justify-content:flex-start; padding-top:48px; }
    .auth-card { padding:32px 28px; }
}
@media (max-width: 768px) {
    .sidebar {
        display:none; position:fixed; left:0; top:0; bottom:0; z-index:200;
        border-right:1px solid var(--border);
        box-shadow:10px 0 30px rgba(0,0,0,0.5);
        overflow-y:auto;
        max-height:100vh;
        max-height:100dvh;
        padding-bottom:80px;
    }
    .sidebar.open { display:flex; }
    .mobile-header { display:flex; }
    .top-bar       { display:none; }
    .dashboard-layout { flex-direction:column; height:auto; min-height:100vh; overflow-y:auto; }
    .main-content { padding:14px !important; padding-bottom:24px !important; overflow-y:visible; }

    /* Stat grids — keep 2 columns on all mobile */
    .stats-grid     { grid-template-columns:repeat(2,1fr); gap:10px; }
    .rollover-stats { grid-template-columns:repeat(2,1fr); gap:10px; }

    /* Compact stat cards */
    .stat-card      { padding:14px 14px; }
    .stat-top       { margin-bottom:10px; }
    .stat-icon      { width:36px; height:36px; border-radius:10px; font-size:15px; }
    .stat-value     { font-size:1.5rem; margin-bottom:3px; }
    .stat-label     { font-size:0.74rem; }

    /* Plan tab — stack header vertically on mobile */
    .plan-header    { flex-direction:column; gap:10px; margin-bottom:16px; }
    .plan-price     { text-align:left; }
    .plan-price .amount { font-size:1.8rem; }

    /* Rollover stats compact */
    .rollover-stats .stat-card { padding:14px; }

    /* Weekly planner note */
    #weekly-skip-limit-note { font-size:0.78rem; }

    /* Billing table horizontal scroll */
    .billing-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .billing-table  { min-width:420px; font-size:0.8rem; }

    /* Stacking layouts */
    .meal-dropdowns { flex-direction:column; }
    .content-row    { flex-direction:column; }
    .form-row       { flex-direction:column; }
    .plan-actions   { flex-direction:column; }
    .popup-card     { padding:20px 16px; }

    /* Weekly planner — tighter cards */
    .day-card       { min-width:100px; padding:14px 10px; }
    .day-date       { font-size:1.1rem; margin-bottom:7px; }

    /* History items — prevent star overflow */
    .history-item   { gap:12px; padding:13px 14px; }
    .history-date   { min-width:40px; padding-right:12px; }
    .star           { font-size:14px; }

    /* Settings compact */
    .settings-section { padding:18px 16px; }

    /* Rollover calendar compact */
    .calendar-container { padding:14px; }
    .date-btn       { font-size:0.75rem; }
}
@media (max-width: 480px) {
    /* Keep 2-column grids — do NOT collapse to 1 col */
    .stats-grid     { grid-template-columns:repeat(2,1fr); gap:8px; }
    .rollover-stats { grid-template-columns:repeat(2,1fr); gap:8px; }

    /* Even more compact cards */
    .stat-card      { padding:12px 12px; }
    .stat-value     { font-size:1.3rem; }
    .stat-icon      { width:32px; height:32px; font-size:14px; border-radius:9px; }

    /* Auth */
    .split-right    { padding:28px 18px; }
    .auth-card      { padding:28px 18px; margin:16px; }

    .main-content   { padding:12px !important; padding-bottom:20px !important; }
    .menu-grid      { grid-template-columns:repeat(2,1fr); }

    /* History item — hide star rating on tiny screens to save space */
    .star-rating    { display:none; }

    /* Compact planner cards */
    .day-card       { min-width:86px; padding:12px 8px; }
    .day-label      { font-size:0.62rem; }
    .skip-btn       { font-size:0.72rem; padding:7px 6px; }
}

/* ── Menu Card with Photo Placeholder ────────────────────── */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.menu-card {
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.2s;
}
.menu-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}
.menu-card-photo {
    height: 120px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-align: center;
    padding: 0 8px;
}
.menu-photo-placeholder .material-symbols-rounded { font-size: 28px; opacity: 0.4; }
.menu-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.menu-item-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.menu-item-tag  { font-size: 0.72rem; color: var(--text-secondary); }

/* ── Invoice View Button ──────────────────────────────────── */
.invoice-view-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    background: rgba(230,57,70,0.1); border: 1px solid rgba(230,57,70,0.25);
    color: var(--accent-primary); font-size: 0.78rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.invoice-view-btn:hover { background: rgba(230,57,70,0.2); }
.invoice-view-btn .material-symbols-rounded { font-size: 16px; }

/* ── Allergy Chips Grid ───────────────────────────────────── */
.allergy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.allergy-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-input);
    cursor: pointer; font-size: 0.85rem; color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}
.allergy-chip:hover { border-color: var(--border-hover); }
.allergy-chip input { accent-color: var(--accent-primary); width: 15px; height: 15px; flex-shrink: 0; }
.allergy-chip:has(input:checked) {
    border-color: var(--accent-primary);
    background: rgba(230,57,70,0.08);
}

/* ── Next Month Calendar — Selected Day ──────────────────── */
.date-btn.selected {
    background: var(--accent-primary) !important;
    color: #fff !important;
    border-color: var(--accent-primary) !important;
    font-weight: 700;
}
.date-btn.skipped {
    background: rgba(230,57,70,0.15) !important;
    color: var(--accent-primary) !important;
    border: 1px solid rgba(230,57,70,0.3) !important;
}

/* ── Relocation pending msg hidden helper ─────────────────── */
.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg-app); }
::-webkit-scrollbar-thumb { background:var(--bg-surface-2); border-radius:10px; }

/* ── Plan Tier Accordion (Right Panel) ───────────────────── */
.plan-tier-group {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.plan-tier-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-input);
    cursor: pointer;
    transition: var(--trans);
}
.plan-tier-header:hover { background: var(--bg-surface-2); }
.tier-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.25s ease;
}
.plan-tier-subs {
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    padding: 1px 0 0;
}
.plan-sub-option {
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    padding-left: 24px !important;
}
.plan-sub-option:hover { background: var(--bg-surface-2) !important; }
.plan-price-tag {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 6px;
}

/* ── Sidebar logo image ──────────────────────────────────── */
.sidebar-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}