/* ═══════════════════════════════════════════════════
   Lokengo User App — Modern Light Theme
   Primary: Indigo Blue #5B6EF5
   Secondary: Emerald #10B981
   Accent: Coral #FF6B6B / Amber #F59E0B
   ═══════════════════════════════════════════════════ */

:root {
    --primary: #5B6EF5;
    --primary-dark: #4558E0;
    --primary-light: #818CF8;
    --primary-bg: rgba(91,110,245,.07);
    --primary-glow: rgba(91,110,245,.25);
    --secondary: #10B981;
    --secondary-dark: #059669;
    --secondary-light: #34D399;
    --secondary-bg: rgba(16,185,129,.07);
    --secondary-glow: rgba(16,185,129,.25);
    --bg: #F5F7FB;
    --bg-gradient: linear-gradient(160deg, #F5F7FB 0%, #EEF1F8 50%, #E8ECF6 100%);
    --surface: #FFFFFF;
    --surface-hover: #FAFBFF;
    --glass: rgba(255,255,255,.75);
    --glass-border: rgba(0,0,0,.06);
    --glass-strong: rgba(255,255,255,.9);
    --text-dark: #1E293B;
    --text: #334155;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --text-light: #CBD5E1;
    --danger: #EF4444;
    --danger-bg: rgba(239,68,68,.08);
    --success: #10B981;
    --success-bg: rgba(16,185,129,.08);
    --warning: #F59E0B;
    --warning-bg: rgba(245,158,11,.08);
    --amber: #F59E0B;
    --purple: #8B5CF6;
    --purple-bg: rgba(139,92,246,.08);
    --coral: #FF6B6B;
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --shadow-xs: 0 1px 3px rgba(0,0,0,.04);
    --shadow: 0 2px 12px rgba(0,0,0,.06);
    --shadow-md: 0 4px 20px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.1);
    --shadow-glow-primary: 0 4px 16px rgba(91,110,245,.2);
    --shadow-glow-green: 0 4px 16px rgba(16,185,129,.2);
    --header-h: 58px;
    --footer-h: 64px;
    --transition: all .25s ease;
    --backdrop: blur(20px) saturate(180%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Poppins', -apple-system, sans-serif;
    background: var(--bg);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}
a { color: var(--primary); text-decoration: none; transition: color .2s; }
/* a:hover { color: var(--primary-dark); } */
img { max-width: 100%; }

/* ── Sticky Header ── Frosted Glass ──────── */
.app-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--header-h);
    background: rgba(255,255,255,.78);
    backdrop-filter: var(--backdrop);
    -webkit-backdrop-filter: var(--backdrop);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center;
    padding: 0 16px; gap: 10px;
}
.header-brand { display: flex; align-items: center; gap: 8px; flex: 1; }
.header-logo {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem;
    box-shadow: var(--shadow-glow-primary);
}
.header-name { font-weight: 700; font-size: 1.1rem; color: var(--text-dark); letter-spacing: -.3px; }
.header-building {
    display: flex; align-items: center; gap: 6px;
    background: var(--secondary-bg);
    border: 1px solid rgba(16,185,129,.18);
    border-radius: 22px; padding: 5px 12px;
    font-weight: 600; font-size: .78rem; color: var(--secondary-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 150px;
}
.header-building i { font-size: .75rem; flex-shrink: 0; }
.header-logout {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); border-radius: 50%; transition: var(--transition);
}
.header-logout:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Main ────────────────────────────────── */
.app-main {
    padding: calc(var(--header-h) + 14px) 16px calc(var(--footer-h) + 18px);
    min-height: 100vh; max-width: 480px; margin: 0 auto;
}

/* ── Bottom Nav ── Frosted ────────────────── */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    height: var(--footer-h);
    background: rgba(255,255,255,.85);
    backdrop-filter: var(--backdrop);
    -webkit-backdrop-filter: var(--backdrop);
    border-top: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: space-around;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.04);
}
.nav-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 6px 0; min-width: 56px;
    color: var(--text-muted); font-size: .62rem; font-weight: 500;
    transition: var(--transition); text-decoration: none;
}
.nav-item i { font-size: 1.2rem; transition: var(--transition); }
.nav-item.active { color: var(--primary); }
.nav-item.active i { transform: scale(1.15); filter: drop-shadow(0 2px 4px rgba(91,110,245,.3)); }

/* Colorful icons for each nav item */
.nav-item:nth-child(1) i { color: var(--primary); }
.nav-item:nth-child(2) i { color: var(--warning); }
.nav-item:nth-child(3) i { color: var(--secondary); }
.nav-item:nth-child(4) i { color: var(--purple); }
.nav-item:nth-child(5) i { color: var(--coral); }
.nav-item.active span { color: var(--text-dark); font-weight: 600; }

/* ── Flash Messages ──────────────────────── */
.flash {
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 500; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: space-between;
    animation: slideDown .3s ease; transition: opacity .3s;
}
.flash-success { background: var(--success-bg); color: var(--secondary-dark); border: 1px solid rgba(16,185,129,.15); }
.flash-error { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(239,68,68,.15); }
.flash-close { cursor: pointer; font-size: 1.1rem; opacity: .6; }
@keyframes slideDown { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }

/* ── Cards ───────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden; margin-bottom: 14px;
}
.card-body { padding: 18px; }
.card-header-bar {
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.04);
    background: rgba(91,110,245,.02);
}
.card-header-bar h3 { font-size: .95rem; font-weight: 600; color: var(--text-dark); }

/* ── Home ────────────────────────────────── */
.greeting { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.greeting-sub { font-size: .82rem; color: var(--text-secondary); margin-bottom: 18px; }

.wallet-banner {
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: var(--shadow-xs);
}
.wallet-banner.low { background: var(--danger-bg); border-color: rgba(239,68,68,.15); }
.wallet-banner .wb-icon { font-size: 1.5rem; color: var(--primary); }
.wallet-banner.low .wb-icon { color: var(--danger); }
.wallet-banner .wb-info { flex: 1; }
.wallet-banner .wb-amount { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); }
.wallet-banner.low .wb-amount { color: var(--danger); }
.wallet-banner .wb-msg { font-size: .72rem; color: var(--text-muted); }
.wallet-banner.low .wb-msg { color: var(--danger); font-weight: 500; }
.wallet-banner .wb-btn {
    padding: 8px 18px; border-radius: 22px; font-size: .78rem; font-weight: 600;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; text-decoration: none;
    box-shadow: var(--shadow-glow-primary);
    transition: var(--transition);
}
.wallet-banner .wb-btn:hover { box-shadow: 0 6px 24px rgba(91,110,245,.3); }
.wallet-banner.low .wb-btn { background: linear-gradient(135deg, var(--danger), #dc2626); }

/* ── Animated Hero — Locker Scene ─────────── */
.hero-animation { text-align: center; margin-bottom: 16px; position: relative; padding: 10px 0; }
.locker-scene { width: 220px; height: 130px; margin: 0 auto; position: relative; }

/* Locker body */
.scene-locker {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100px; height: 130px;
    background: linear-gradient(145deg, #E8ECF6, #D5DAE8);
    border: 2px solid #C7CDE0;
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5);
}
/* Locker slots (top deco) */
.scene-locker::before {
    content: '';
    position: absolute; top: 6px; left: 8px; right: 8px; height: 14px;
    background: repeating-linear-gradient(90deg, #BFC5D6 0px, #BFC5D6 2px, transparent 2px, transparent 6px);
    border-radius: 2px; opacity: .4;
}

/* Door (swings open) */
.scene-door {
    position: absolute; top: 24px; left: 6px; right: 6px; bottom: 6px;
    background: linear-gradient(135deg, #F0F3FA, #E4E8F4);
    border: 1.5px solid #C7CDE0;
    border-radius: 4px;
    transform-origin: left center;
    animation: doorSwing 6s ease-in-out infinite;
    box-shadow: 1px 0 4px rgba(0,0,0,.05);
}
/* Door handle */
.scene-door::after {
    content: '';
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 18px;
    background: linear-gradient(135deg, #94A3B8, #64748B);
    border-radius: 3px;
}
@keyframes doorSwing {
    0%, 15% { transform: perspective(300px) rotateY(0deg); }
    25%, 60% { transform: perspective(300px) rotateY(-65deg); }
    75%, 100% { transform: perspective(300px) rotateY(0deg); }
}

/* Inside locker (visible when door opens) */
.scene-inside {
    position: absolute; top: 24px; left: 6px; right: 6px; bottom: 6px;
    background: linear-gradient(180deg, #CBD5E1, #94A3B8);
    border-radius: 4px; z-index: -1;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; opacity: .3;
}

/* PIN Pad */
.scene-pin {
    position: absolute; bottom: 14px; left: 16px;
    display: flex; gap: 3px;
    animation: pinBlink 6s ease-in-out infinite;
}
.scene-pin span {
    width: 14px; height: 18px;
    background: rgba(91,110,245,.12);
    border: 1px solid rgba(91,110,245,.2);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; font-weight: 700; color: var(--primary);
    font-family: 'Courier New', monospace;
}
@keyframes pinBlink {
    0%, 10% { opacity: 0; }
    12%, 22% { opacity: 1; }
    24%, 100% { opacity: .4; }
}
.scene-pin span:nth-child(1) { animation: digitAppear 6s ease infinite; animation-delay: 0s; }
.scene-pin span:nth-child(2) { animation: digitAppear 6s ease infinite; animation-delay: .4s; }
.scene-pin span:nth-child(3) { animation: digitAppear 6s ease infinite; animation-delay: .8s; }
.scene-pin span:nth-child(4) { animation: digitAppear 6s ease infinite; animation-delay: 1.2s; }
@keyframes digitAppear {
    0%, 8% { background: rgba(91,110,245,.08); color: transparent; }
    12%, 20% { background: rgba(16,185,129,.15); color: var(--secondary); border-color: var(--secondary); }
    30%, 100% { background: rgba(91,110,245,.08); color: var(--primary); }
}

/* Green check / unlock indicator */
.scene-unlock {
    position: absolute; top: -6px; right: -6px;
    width: 24px; height: 24px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(16,185,129,.35);
    animation: unlockPop 6s ease infinite;
}
.scene-unlock i { color: #fff; font-size: .55rem; }
@keyframes unlockPop {
    0%, 20% { transform: scale(0); opacity: 0; }
    25%, 55% { transform: scale(1); opacity: 1; }
    65%, 100% { transform: scale(0); opacity: 0; }
}

/* Shirt floating into locker */
.scene-shirt {
    position: absolute; top: 10px; right: 20px;
    font-size: 1.8rem;
    animation: shirtDrop 6s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
@keyframes shirtDrop {
    0%, 30% { top: 10px; right: 20px; opacity: 0; transform: rotate(-10deg) scale(.6); }
    35% { opacity: 1; transform: rotate(-10deg) scale(1); }
    55% { top: 70px; right: 50px; opacity: 1; transform: rotate(5deg) scale(.7); }
    60%, 100% { top: 80px; right: 50px; opacity: 0; transform: rotate(0deg) scale(.4); }
}

/* User hand/finger pressing keypad */
.scene-hand {
    position: absolute; bottom: 0px; left: -10px;
    font-size: 1.3rem;
    animation: handPress 6s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.1));
}
@keyframes handPress {
    0%, 5% { opacity: 0; transform: translate(0, 10px); }
    10%, 20% { opacity: 1; transform: translate(0, 0); }
    22% { transform: translate(2px, 2px); }
    24% { transform: translate(0, 0); }
    30%, 100% { opacity: 0; transform: translate(-10px, 10px); }
}

/* Sparkle effects */
.scene-sparkles span {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    animation: sparkle 6s ease infinite;
}
.scene-sparkles span:nth-child(1) { background: var(--primary); top: 25%; left: 10%; animation-delay: 2.5s; }
.scene-sparkles span:nth-child(2) { background: var(--secondary); top: 15%; right: 10%; animation-delay: 2.8s; }
.scene-sparkles span:nth-child(3) { background: var(--warning); bottom: 30%; left: 5%; animation-delay: 3.1s; }
.scene-sparkles span:nth-child(4) { background: var(--purple); top: 10%; right: 30%; animation-delay: 3.4s; }
.scene-sparkles span:nth-child(5) { background: var(--coral); bottom: 25%; right: 5%; animation-delay: 2.7s; }
@keyframes sparkle {
    0%, 35% { transform: scale(0); opacity: 0; }
    40%, 50% { transform: scale(1.5); opacity: 1; }
    55%, 100% { transform: scale(0); opacity: 0; }
}

/* Caption below animation */
.scene-caption {
    margin-top: 10px; font-size: .68rem; color: var(--text-muted);
    font-weight: 500; letter-spacing: .3px;
}

/* ── Action Cards ────────────────────────── */
.action-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.action-card {
    border-radius: var(--radius); padding: 28px 16px;
    text-align: center; cursor: pointer;
    transition: var(--transition); text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: relative; overflow: hidden;
}
.action-card::after {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,.15);
}
.action-card:active { transform: scale(.97); }
.action-card i { font-size: 2rem; color: #fff; }
.action-card .ac-label { font-weight: 700; font-size: 1rem; color: #fff; }
.action-card .ac-desc { font-size: .7rem; color: rgba(255,255,255,.85); }

.card-drop {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow-glow-primary);
}
.card-collect {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    box-shadow: var(--shadow-glow-green);
}
.card-disabled {
    background: #E2E8F0 !important; cursor: not-allowed; box-shadow: var(--shadow-xs) !important;
}
.card-disabled i { color: var(--text-muted) !important; }
.card-disabled .ac-label { color: var(--text-secondary) !important; }
.card-disabled .ac-desc { color: var(--danger) !important; font-weight: 600; }

/* ── Locker Grid ─────────────────────────── */
.locker-step-info {
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: var(--shadow-xs);
}
.locker-step-info i { font-size: 1.3rem; color: var(--primary); }
.locker-step-info .lsi-name { font-weight: 600; font-size: .92rem; color: var(--text-dark); }
.locker-step-info .lsi-building { font-size: .75rem; color: var(--text-muted); }

.locker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }

/* ── Locker Slider ───────────────────────── */
.locker-slider-section { position: relative; margin-bottom: 20px; }

.slider-nav-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; gap: 8px;
}
.slider-set-badge {
    flex: 1; text-align: center;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    color: var(--primary);
    background: var(--primary-bg);
    border: 1.5px solid rgba(91,110,245,.18);
    padding: 5px 14px; border-radius: 20px;
}
.slider-set-badge .set-total { color: var(--text-muted); font-weight: 500; }

.slider-nav-btn {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--primary);
    background: var(--primary-bg); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .9rem; font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 0 0 0 var(--primary-glow);
    animation: slider-btn-pulse 1.6s ease-in-out infinite;
}
.slider-nav-btn:hover { background: var(--primary); color: #fff; box-shadow: 0 4px 12px var(--primary-glow); }
.slider-nav-btn:disabled { opacity: .22; cursor: default; pointer-events: none; animation: none; border-color: var(--glass-border); background: var(--surface); color: var(--text-muted); }
@keyframes slider-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--primary-glow); border-color: var(--primary); }
    50%       { box-shadow: 0 0 0 6px rgba(91,110,245,0); border-color: var(--primary-light); }
}

.swipe-hint-bar {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: .71rem; color: var(--text-muted);
    margin-bottom: 10px; user-select: none;
}
.swipe-hint-bar .sh-arrow {
    display: inline-flex; font-size: .65rem;
}
.swipe-hint-bar .sh-left  { animation: sh-nudge-left  1.8s ease-in-out 0.6s 4; }
.swipe-hint-bar .sh-right { animation: sh-nudge-right 1.8s ease-in-out 0.6s 4; }
@keyframes sh-nudge-left  { 0%,60%,100%{transform:translateX(0)} 30%{transform:translateX(-5px)} }
@keyframes sh-nudge-right { 0%,60%,100%{transform:translateX(0)} 30%{transform:translateX(5px)} }

.locker-slider-viewport {
    overflow: hidden;
    border-radius: var(--radius);
}
.locker-slider-track {
    display: flex;
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.locker-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 3px; /* prevent box-shadow clip */
}

.slider-dots {
    display: flex; justify-content: center; align-items: center; gap: 7px;
    margin-top: 12px;
}
.slider-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--glass-border); border: 1.5px solid rgba(0,0,0,.09);
    cursor: pointer; transition: all .25s ease;
}
.slider-dot.active {
    background: var(--primary); border-color: var(--primary);
    width: 22px; border-radius: 4px;
}
.slider-dot:hover:not(.active) { background: var(--primary-light); border-color: var(--primary-light); }
.locker-cell {
    aspect-ratio: 1.2;
    border-radius: var(--radius); position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; font-weight: 700; font-size: 1.1rem; color: var(--text-dark);
    transition: var(--transition);
    border: 2px solid var(--glass-border);
    text-decoration: none;
    background: var(--surface);
}
.locker-cell .locker-label { font-size: .68rem; font-weight: 500; }

.locker-dot {
    position: absolute; top: 10px; right: 10px;
    width: 10px; height: 10px; border-radius: 50%;
}
.locker-dot.green { background: var(--secondary); animation: dot-flash-green 1.2s infinite; box-shadow: 0 0 8px rgba(16,185,129,.4); }
.locker-dot.amber { background: var(--amber); animation: dot-flash-amber 1.5s infinite; box-shadow: 0 0 8px rgba(245,158,11,.3); }
@keyframes dot-flash-green { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
@keyframes dot-flash-amber { 0%, 100% { opacity:1; } 50% { opacity:.3; } }

.locker-available {
    background: linear-gradient(135deg, rgba(16,185,129,.06), rgba(16,185,129,.02));
    border-color: var(--secondary);
    color: var(--secondary-dark); cursor: pointer;
    animation: locker-pulse-green 2.5s infinite;
}
.locker-available:hover { background: rgba(16,185,129,.1); }
.locker-available:active { transform: scale(.95); }
.locker-available .locker-label { color: var(--secondary); }
@keyframes locker-pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.2); }
    50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

.locker-occupied {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 50%, #FCD34D 100%);
    border-color: #F59E0B;
    color: #92400E; cursor: not-allowed;
    position: relative;
}
.locker-occupied::before {
    content: '👕'; position: absolute; top: 8px; left: 10px;
    font-size: .75rem; opacity: .5;
}
.locker-occupied::after {
    content: '🧺'; position: absolute; bottom: 8px; right: 10px;
    font-size: .7rem; opacity: .4;
}
.locker-occupied .locker-label { color: #B45309; font-weight: 600; }

.locker-maintenance {
    background: rgba(239,68,68,.04); border-color: rgba(239,68,68,.15);
    color: var(--text-muted); cursor: not-allowed;
}
.locker-maintenance .locker-label { color: var(--text-muted); }

.locker-ready {
    background: linear-gradient(135deg, rgba(139,92,246,.06), rgba(139,92,246,.02));
    border-color: var(--purple); color: var(--purple); cursor: pointer;
    animation: locker-pulse-purple 2.5s infinite;
}
.locker-ready:hover { background: rgba(139,92,246,.1); }
.locker-ready .locker-label { color: var(--purple); font-weight: 600; }
@keyframes locker-pulse-purple {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,.2); }
    50% { box-shadow: 0 0 0 6px rgba(139,92,246,0); }
}

/* ── PIN Display ─────────────────────────── */
.pin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.pin-box {
    background: var(--surface); border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 16px; text-align: center;
    box-shadow: var(--shadow-xs);
}
.pin-box .pin-label {
    font-size: .72rem; color: var(--text-muted); margin-bottom: 6px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pin-box .pin-value {
    font-size: 1.6rem; font-weight: 700; letter-spacing: 6px;
    color: var(--text-dark); font-family: 'Courier New', monospace;
}
.pin-box.pin-full { margin-bottom: 16px; }
.pin-info-icon {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary-bg); color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .65rem; cursor: pointer; transition: var(--transition);
}
.pin-info-icon:hover { background: rgba(91,110,245,.15); }

/* ── Modal ───────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,.45); backdrop-filter: blur(6px);
    z-index: 300; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 24px;
    max-width: 360px; width: 100%;
    box-shadow: var(--shadow-lg); animation: fadeUp .3s ease;
}
.modal-box h3 { font-size: 1rem; color: var(--text-dark); margin-bottom: 10px; }
.modal-box p { font-size: .82rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.modal-box .btn { width: 100%; }
@keyframes fadeUp { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }

/* ── Forms ───────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block; font-size: .78rem; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 5px;
}
.form-control {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: .9rem; color: var(--text-dark);
    background: #FFFFFF;
    outline: none; transition: var(--transition);
    -webkit-appearance: none;
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91,110,245,.1);
}
.form-control::placeholder { color: var(--text-light); }
.form-control[disabled] {
    background: #F1F5F9; color: var(--text-muted); cursor: not-allowed;
}

select.form-control {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6EF5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
    cursor: pointer;
}
select.form-control option { background: #fff; color: var(--text-dark); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-text { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }
.required { color: var(--danger); }

/* ── Buttons ─────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border: none; border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: .88rem; font-weight: 600; cursor: pointer;
    transition: var(--transition); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; box-shadow: var(--shadow-glow-primary);
}
.btn-primary:hover { box-shadow: 0 6px 25px rgba(91,110,245,.35); color: #fff; }
.btn-secondary {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: #fff; box-shadow: var(--shadow-glow-green);
}
.btn-secondary:hover { color: #fff; }
.btn-outline {
    background: transparent; border: 1.5px solid #E2E8F0;
    color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: linear-gradient(135deg, var(--danger), #dc2626); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: .78rem; }
.btn-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--text-muted); margin-bottom: 14px; text-decoration: none;
}
.btn-back:hover { color: var(--text-dark); }

/* ── Badges ──────────────────────────────── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .68rem; font-weight: 600; }
.badge-pending { background: var(--warning-bg); color: #B45309; }
.badge-accepted { background: var(--primary-bg); color: var(--primary); }
.badge-processing { background: rgba(91,110,245,.1); color: var(--primary-dark); }
.badge-ready { background: var(--purple-bg); color: var(--purple); }
.badge-collected { background: var(--success-bg); color: var(--secondary-dark); }
.badge-cancelled { background: var(--danger-bg); color: var(--danger); }
.badge-credit { background: var(--success-bg); color: var(--secondary-dark); }
.badge-debit { background: var(--danger-bg); color: var(--danger); }
.badge-success { background: var(--success-bg); color: var(--secondary-dark); }
.badge-failed { background: var(--danger-bg); color: var(--danger); }

/* ── Compact Card ────────────────────────── */
.compact-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); margin-bottom: 10px;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}
.compact-card:hover { box-shadow: var(--shadow); border-color: rgba(91,110,245,.1); }
.compact-card .cc-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.compact-card .cc-icon.icon-drop { background: var(--primary-bg); color: var(--primary); }
.compact-card .cc-icon.icon-collect { background: var(--success-bg); color: var(--secondary); }
.compact-card .cc-icon.icon-credit { background: var(--success-bg); color: var(--secondary); }
.compact-card .cc-icon.icon-debit { background: var(--danger-bg); color: var(--danger); }
.compact-card .cc-info { flex: 1; min-width: 0; }
.compact-card .cc-title { font-size: .82rem; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-card .cc-sub { font-size: .68rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.compact-card .cc-right { text-align: right; flex-shrink: 0; }
.compact-card .cc-amount { font-weight: 700; font-size: .88rem; }
.compact-card .cc-amount.credit { color: var(--secondary-dark); }
.compact-card .cc-amount.debit { color: var(--danger); }
.compact-card .cc-amount.order { color: var(--text-dark); }
.compact-card .cc-date { font-size: .62rem; color: var(--text-muted); }

/* ── Star Rating (Interactive — in modal) ─── */
.star-rating { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-rating input { display: none; }
.star-rating label { font-size: 1.3rem; color: #E2E8F0; cursor: pointer; transition: color .2s; }
.star-rating label:hover, .star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: var(--warning); }

/* ── Read-only stars (green, 8px — inline in order cards) ── */
.stars-readonly { display: inline-flex; gap: 1px; }
.stars-readonly i { font-size: 8px; pointer-events: none; }

.rate-link {
    font-size: .65rem; font-weight: 600; color: var(--primary);
    cursor: pointer; text-decoration: none;
    border: 1px solid rgba(91,110,245,.15);
    border-radius: 10px; padding: 1px 8px;
    transition: var(--transition);
}
.rate-link:hover { background: var(--primary-bg); color: var(--primary-dark); }

.star-display { color: var(--warning); font-size: .85rem; }
.star-display .star-empty { color: #E2E8F0; }
.rate-inline { display: flex; align-items: center; gap: 6px; }

/* ── Profile ─────────────────────────────── */
.profile-pic-wrap { text-align: center; margin-bottom: 20px; }
.profile-pic {
    width: 100px; height: 100px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--primary-light); box-shadow: var(--shadow-md);
}
.profile-pic-placeholder {
    width: 100px; height: 100px; border-radius: 50%;
    background: var(--primary-bg);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: var(--primary);
    border: 3px solid rgba(91,110,245,.15);
}

/* ── Support ─────────────────────────────── */
.support-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.support-btn {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 8px;
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: var(--radius); text-decoration: none;
    color: var(--text-dark); font-size: .72rem; font-weight: 500;
    transition: var(--transition); box-shadow: var(--shadow-xs);
}
.support-btn i { font-size: 1.6rem; }
.support-btn:active { transform: scale(.96); }
.support-btn:hover { box-shadow: var(--shadow); color: var(--text-dark); }
.support-btn.call i { color: var(--secondary); }
.support-btn.whatsapp i { color: #25D366; }
.support-btn.email i { color: var(--primary); }

.video-embed {
    border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px;
    position: relative; padding-bottom: 56.25%;
    border: 1px solid var(--glass-border);
}
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ── Filters ─────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-bar select, .filter-bar input[type="date"] {
    padding: 8px 12px; border: 1.5px solid #E2E8F0;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif; font-size: .78rem;
    background: #fff; color: var(--text); outline: none;
    flex: 1; min-width: 100px;
}
.filter-bar select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6EF5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 10px;
}
.filter-bar select:focus, .filter-bar input[type="date"]:focus { border-color: var(--primary); }

/* ── Confirm ─────────────────────────────── */
.confirm-box {
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 24px; text-align: center; margin-bottom: 16px;
}
.confirm-box h3 { font-size: 1rem; color: var(--text-dark); margin-bottom: 8px; }
.confirm-box p { font-size: .82rem; color: var(--text-secondary); margin-bottom: 16px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; }

/* ── Auth Pages ──────────────────────────── */
.auth-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg); background-image: var(--bg-gradient); padding: 20px;
}
.auth-card {
    width: 100%; max-width: 420px;
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: 22px; box-shadow: var(--shadow-lg);
    overflow: hidden; animation: fadeUp .5s ease;
}
.auth-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 32px 24px 28px; text-align: center; color: #fff;
    position: relative;
}
.auth-header::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
    height: 18px; background: var(--surface); border-radius: 18px 18px 0 0;
}
.auth-header .auth-logo {
    width: 54px; height: 54px; background: rgba(255,255,255,.2);
    border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 10px;
}
.auth-header h1 { font-size: 1.3rem; font-weight: 700; color: #fff; }
.auth-header p { font-size: .75rem; color: rgba(255,255,255,.85); margin-top: 2px; }
.auth-body { padding: 24px; }
.auth-footer { text-align: center; padding: 0 24px 24px; font-size: .78rem; color: var(--text-muted); }
.auth-footer a { color: var(--primary); font-weight: 600; }

.captcha-box {
    background: #F8FAFC; border: 1.5px solid #E2E8F0;
    border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
}
.captcha-box .captcha-q { font-weight: 700; font-size: 1.05rem; color: var(--text-dark); white-space: nowrap; }

.terms-check {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 16px; font-size: .78rem; color: var(--text-secondary);
}
.terms-check input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); }
.terms-check a { color: var(--primary); }

/* ── Empty State ─────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state i { font-size: 2.5rem; color: var(--text-light); margin-bottom: 12px; display: block; }
.empty-state h4 { font-size: .95rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.empty-state p { font-size: .78rem; color: var(--text-muted); }

/* ── Section Title ───────────────────────── */
.section-title {
    font-size: .88rem; font-weight: 600; color: var(--text-dark);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.section-title i { color: var(--primary); }

/* ── Legal Pages ─────────────────────────── */
.legal-page { max-width: 600px; margin: 0 auto; padding: 20px; }
.legal-page h1 { font-size: 1.4rem; color: var(--text-dark); margin-bottom: 8px; }
.legal-page h2 { font-size: 1rem; color: var(--text-dark); margin: 20px 0 8px; }
.legal-page p, .legal-page li { font-size: .85rem; color: var(--text); line-height: 1.7; }
.legal-page ul { padding-left: 20px; }
.legal-back { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: .85rem; margin-bottom: 16px; text-decoration: none; }

/* ── Utilities ───────────────────────────── */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--secondary) !important; }
.text-white { color: #fff !important; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-0 { margin-bottom: 0; }
.d-flex { display: flex; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }

/* ── Notification badge ──────────────────── */
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ef4444;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}
.header-notif { position: relative; }

/* ── KYC badge ────────────────────────────── */
.kyc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}
.kyc-pending  { background: #fef3c7; color: #92400e; }
.kyc-accepted { background: #d1fae5; color: #065f46; }
.kyc-rejected { background: #fee2e2; color: #991b1b; }

/* ── Referral box ─────────────────────────── */
.referral-code-box {
    background: linear-gradient(135deg, var(--primary-light), #fff);
    border: 2px dashed var(--primary);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}
.referral-code-val {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 4px;
    margin: 8px 0;
}
.referral-share-btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }

/* ── Order detail card ───────────────────── */
.order-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0eeeb;
    font-size: .83rem;
}
.order-detail-row:last-child { border-bottom: none; }
.order-detail-label { color: var(--text-muted); }
.order-detail-val   { font-weight: 600; color: var(--text-dark); text-align: right; }

/* ── Pay button ──────────────────────────── */
.btn-pay {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
/* .btn-pay:hover { opacity: .9; color: #fff; } */

/* ── Notification list ───────────────────── */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0eeeb;
    cursor: pointer;
    transition: background .2s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: #f0fdf4; }
.notif-item:hover  { background: #f8f7f5; }
.notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}
.notif-body { flex: 1; }
.notif-title { font-weight: 600; font-size: .85rem; color: var(--text-dark); }
.notif-time  { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 360px) {
    html { font-size: 14px; }
    .action-cards { gap: 10px; }
    .locker-cell { font-size: 1rem; }
    .pin-row { grid-template-columns: 1fr; }
}