/* ═══════════════════════════════════════════════════════
   JASA ESSENTIAL — Clean Responsive Styles
   ═══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --primary:        #2D8CF0;
    --primary-dark:   #1a74d4;
    --primary-light:  #deeeff;
    --primary-faint:  #eef6ff;

    --yellow:         #f5c518;
    --yellow-dark:    #deb010;

    --bg:             #f2f4f8;
    --bg-white:       #ffffff;
    --bg-sidebar:     #e8e8e8;

    /* ── Text: deliberately dark & high contrast ── */
    --txt1:           #0d1117;   /* headings, labels   */
    --txt2:           #374151;   /* body / sub text    */
    --txt3:           #6b7280;   /* captions / hints   */

    --border:         #dde2ed;
    --border2:        #c8d0e0;

    --sh-sm:  0 1px 4px rgba(0,0,0,.07);
    --sh-md:  0 4px 16px rgba(0,0,0,.10);
    --sh-lg:  0 8px 32px rgba(0,0,0,.14);

    --hh:   60px;
    --bnh:  64px;
    --sw:   270px;
    --r:    14px;
    --r-sm: 10px;
    --r-xs: 8px;
    --ease: .22s ease;
}

/* ── Dark theme ── */
[data-theme="dark"] {
    --bg:            #0b0e16;
    --bg-white:      #161a26;
    --bg-sidebar:    #101420;

    --txt1:          #f0f3fa;
    --txt2:          #b0bbd0;
    --txt3:          #6b7a96;

    --border:        #232940;
    --border2:       #2e364f;

    --primary-light: rgba(45,140,240,.16);
    --primary-faint: rgba(45,140,240,.09);

    --sh-sm: 0 1px 4px rgba(0,0,0,.45);
    --sh-md: 0 4px 16px rgba(0,0,0,.55);
    --sh-lg: 0 8px 32px rgba(0,0,0,.70);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
    font-family:'Plus Jakarta Sans',sans-serif;
    background:var(--bg);
    color:var(--txt1);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    transition:background var(--ease),color var(--ease);
}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input{font-family:inherit}
img{display:block;max-width:100%}

/* ════════════════════════════════
   HEADER
   ════════════════════════════════ */
.header{
    position:fixed;
    top:0;left:0;right:0;
    height:var(--hh);
    background:var(--bg-white);
    border-bottom:1px solid var(--border);
    box-shadow:var(--sh-sm);
    z-index:900;
    transition:background var(--ease),border-color var(--ease);
}

.header-inner{
    height:100%;
    padding:0 16px;
    display:flex;
    align-items:center;          /* ← single row, vertically centred */
    justify-content:space-between;
    gap:10px;
}

/* ── left group: hamburger + brand on same line ── */
.header-left{
    display:flex;
    align-items:center;
    gap:10px;                    /* gap between ≡ and "Print my xerox" */
    flex:1;
    min-width:0;
}

.hamburger{
    flex-shrink:0;
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-xs);
    color:var(--txt1);
    font-size:1.2rem;
    transition:background var(--ease),color var(--ease);
}
.hamburger:hover{background:var(--primary-light);color:var(--primary)}

/* ── Brand: Print [my] xerox — all on one line ── */
.header-brand{
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;          /* never wrap */
    line-height:1;
}

.brand-print{
    font-size:1.25rem;
    font-weight:800;
    color:var(--txt1);
    letter-spacing:-.3px;
}

.brand-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;height:28px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:.72rem;
    font-weight:800;
    flex-shrink:0;
}

.brand-xerox{
    font-size:1.25rem;
    font-weight:800;
    color:var(--primary);
    letter-spacing:-.3px;
}

/* ── right group ── */
.header-right{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:8px;
}

.header-icon-btn{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-xs);
    color:var(--txt1);
    font-size:1.15rem;
    position:relative;
    transition:background var(--ease),color var(--ease);
}
.header-icon-btn:hover{background:var(--primary-light);color:var(--primary)}

/* ── Login button (guest state) ── */
.header-login-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:36px;
    padding:0 14px;
    border-radius:50px;
    border:1.5px solid var(--primary);
    color:var(--primary);
    font-size:.8rem;
    font-weight:800;
    text-decoration:none;
    transition:background var(--ease),color var(--ease),box-shadow var(--ease);
    white-space:nowrap;
}
.header-login-btn:hover{
    background:var(--primary);
    color:#fff;
    box-shadow:0 3px 12px rgba(45,140,240,.35);
}
.header-login-btn i{ font-size:.9rem; }

/* ── Profile avatar (logged-in) ── */
.header-avatar-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid var(--av-color, #2D8CF0);
    background: var(--av-bg, #e8f2fe);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 0 0 0 var(--av-color, #2D8CF0);
    animation: avatarPing 2.4s ease-in-out infinite;
}
.header-avatar-wrap:hover {
    transform: scale(1.1);
    animation: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--av-color, #2D8CF0) 25%, transparent);
}
@keyframes avatarPing {
    0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--av-color, #2D8CF0) 40%, transparent); }
    50%       { box-shadow: 0 0 0 5px color-mix(in srgb, var(--av-color, #2D8CF0) 0%,  transparent); }
}

.header-avatar-icon {
    font-size: 1rem;
    color: var(--av-color, #2D8CF0);
    pointer-events: none;
}

/* ════════════════════════════════
   SIDEBAR OVERLAY
   ════════════════════════════════ */
.sidebar-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(3px);
    z-index:1000;
    opacity:0;pointer-events:none;
    transition:opacity var(--ease);
}
.sidebar-overlay.active{opacity:1;pointer-events:all}

/* ════════════════════════════════
   SIDEBAR
   ════════════════════════════════ */
.sidebar{
    position:fixed;
    top:0;left:0;
    width:var(--sw);
    height:100vh;
    background:var(--bg-sidebar);
    border-right:1px solid var(--border);
    box-shadow:var(--sh-lg);
    z-index:1100;
    display:flex;
    flex-direction:column;
    transform:translateX(calc(-1 * var(--sw)));
    transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar.open{transform:translateX(0)}

.sidebar-header{
    height:var(--hh);
    padding:0 16px;
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    position:relative;
}
.sidebar-brand{
    display:flex;align-items:center;gap:8px;
    font-size:1.05rem;font-weight:800;color:var(--txt1);
    text-align:center;
    justify-content:center;
}
.sidebar-brand i{display:none}

.sidebar-close{display:none}

.sidebar-nav{
    flex:1;overflow-y:auto;
    padding:10px;
    display:flex;flex-direction:column;gap:2px;
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
}

/* ─── Access Box (WEBSITE-style grouped menu cards) ─── */
.access-box {
    margin: 4px 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
}
.access-box-header {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--txt3);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding: 0 4px;
}
.access-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    color: var(--txt1);
    font-size: .88rem;
    font-weight: 600;
    border-radius: 9px;
    border-bottom: 1px solid var(--border);
    transition: background var(--ease), color var(--ease);
    text-decoration: none;
}
.access-link:last-child { border-bottom: none; }
.access-link i {
    width: 20px;
    text-align: center;
    font-size: .9rem;
    color: var(--primary);
    flex-shrink: 0;
}
.access-link:hover, .access-link.active {
    background: var(--primary-light);
    color: var(--primary);
}
.access-link:hover i, .access-link.active i { color: var(--primary); }

/* ─── Sidebar Identity Card (logged-in hero) ─── */
.sb-identity {
    margin: 10px 12px 6px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a55d4 0%, #2D8CF0 100%);
    padding: 16px 14px 14px;
    position: relative;
}
.sb-identity::before {
    content: '';
    position: absolute;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    top: -20px; right: -20px;
}
.sb-identity-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff;
    margin-bottom: 8px;
}
.sb-identity-name {
    font-size: .9rem; font-weight: 800; color: #fff;
    margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-identity-email {
    font-size: .68rem; font-weight: 500;
    color: rgba(255,255,255,.75);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-identity-id {
    margin-top: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.18);
    color: #fff; font-size: .68rem; font-weight: 700;
    padding: 4px 10px; border-radius: 50px;
    cursor: pointer;
    user-select: none;
    transition: background var(--ease), transform var(--ease);
}
.sb-identity-id:hover {
    background: rgba(255,255,255,.3);
}
.sb-identity-id:active {
    transform: scale(0.96);
}
.sb-identity-id i {
    font-size: .75rem;
    color: rgba(255,255,255,.9);
}

/* ─── Sidebar Guest Card ─── */
.sb-guest {
    margin: 10px 12px 6px;
    padding: 14px;
    border-radius: 14px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    text-align: center;
}
.sb-guest-text {
    font-size: .78rem; font-weight: 600; color: var(--txt3);
    margin-bottom: 10px;
}
.sb-login-btn {
    display: block; width: 100%;
    padding: 10px; border-radius: 50px;
    background: var(--primary); color: #fff;
    font-size: .82rem; font-weight: 800;
    text-decoration: none;
    text-align: center;
    transition: background var(--ease), box-shadow var(--ease);
}
.sb-login-btn:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(45,140,240,.35); }

/* ─── keep old nav-item for any leftover refs ─── */
.nav-item{
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;
    border-radius:var(--r-sm);
    color:var(--txt2);
    font-size:.9rem;font-weight:700;
    transition:background var(--ease),color var(--ease);
}
.nav-item i{width:20px;text-align:center;font-size:.95rem;flex-shrink:0}
.nav-item:hover,.nav-item.active{background:var(--primary-light);color:var(--primary)}
.nav-divider{height:1px;background:var(--border);margin:6px 4px}

.sidebar-footer{
    padding:12px 10px;
    border-top:1px solid var(--border);
    flex-shrink:0;
}
.sidebar-footer-row{
    display:flex;
    gap:8px;
}
.sidebar-footer-btn{
    flex:1;
    display:flex;align-items:center;justify-content:center;gap:7px;
    padding:10px 8px;
    border-radius:var(--r-sm);
    background:var(--primary-light);color:var(--primary);
    font-size:.8rem;font-weight:700;
    transition:background var(--ease),color var(--ease);
    white-space:nowrap;
}
.sidebar-footer-btn:hover{background:var(--primary);color:#fff}
.sidebar-footer-btn i{font-size:.9rem}
.sidebar-footer-btn.logout{
    background:rgba(239,68,68,.09);color:#ef4444;
}
.sidebar-footer-btn.logout:hover{background:#ef4444;color:#fff}

/* ════════════════════════════════
   THEME PICKER POPUP
   ════════════════════════════════ */
.theme-picker-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(4px);
    z-index:2000;
    display:flex;align-items:flex-end;justify-content:flex-start;
    padding:0 0 calc(var(--bnh) + 16px) 10px;
    opacity:0;pointer-events:none;
    transition:opacity .22s ease;
}
.theme-picker-overlay.visible{opacity:1;pointer-events:all}
.theme-picker-card{
    background:var(--bg-white);
    border:1px solid var(--border);
    border-radius:20px;
    padding:18px 16px 14px;
    box-shadow:var(--sh-lg);
    width:240px;
    transform:translateY(20px);
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.theme-picker-overlay.visible .theme-picker-card{transform:translateY(0)}
.theme-picker-title{
    font-size:.72rem;font-weight:800;color:var(--txt3);
    letter-spacing:1px;text-transform:uppercase;
    margin-bottom:12px;padding:0 2px;
}
.theme-picker-options{
    display:flex;gap:8px;
}
.theme-option{
    flex:1;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:12px 6px 10px;
    border-radius:14px;
    border:2px solid var(--border);
    background:var(--bg);
    color:var(--txt2);
    font-size:.72rem;font-weight:700;
    cursor:pointer;
    transition:all .18s ease;
}
.theme-option:hover{
    border-color:var(--primary);
    color:var(--primary);
    background:var(--primary-faint);
}
.theme-option.active{
    border-color:var(--primary);
    background:var(--primary-light);
    color:var(--primary);
}
.theme-option-icon{
    width:36px;height:36px;
    border-radius:10px;
    background:var(--bg-white);
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;
    box-shadow:var(--sh-sm);
}

/* ════════════════════════════════
   LOGOUT CONFIRMATION POPUP
   ════════════════════════════════ */
.logout-confirm-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(4px);
    z-index:2100;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    opacity:0;pointer-events:none;
    transition:opacity .22s ease;
}
.logout-confirm-overlay.visible{opacity:1;pointer-events:all}
.logout-confirm-card{
    background:var(--bg-white);
    border:1px solid var(--border);
    border-radius:24px;
    padding:24px 20px 20px;
    box-shadow:var(--sh-lg);
    width:100%;max-width:320px;
    text-align:center;
    transform:scale(.92);
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.logout-confirm-overlay.visible .logout-confirm-card{transform:scale(1)}
.logout-confirm-icon{
    width:52px;height:52px;
    border-radius:50%;
    background:rgba(239,68,68,.12);
    color:#ef4444;
    font-size:1.3rem;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 14px;
}
.logout-confirm-title{
    font-size:1.15rem;font-weight:800;
    color:var(--txt1);
    margin-bottom:6px;
}
.logout-confirm-desc{
    font-size:.84rem;font-weight:500;
    color:var(--txt3);
    line-height:1.45;
    margin-bottom:20px;
}
.logout-confirm-actions{
    display:flex;gap:10px;
}
.logout-btn-cancel{
    flex:1;padding:11px 0;
    border-radius:50px;
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--txt2);
    font-size:.85rem;font-weight:700;
    cursor:pointer;
    transition:background var(--ease);
}
.logout-btn-cancel:hover{background:var(--border)}
.logout-btn-confirm{
    flex:1;padding:11px 0;
    border-radius:50px;
    background:#ef4444;
    border:none;
    color:#fff;
    font-size:.85rem;font-weight:800;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(239,68,68,.3);
    transition:background var(--ease),transform var(--ease);
}
.logout-btn-confirm:hover{
    background:#dc2626;
    transform:translateY(-1px);
}

/* ════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════ */
.main-content{
    flex:1;
    width:100%;
    padding-top:var(--hh);
    padding-bottom:calc(var(--bnh) + 8px);
}

/* inner container to cap width on large screens */
.page-wrap{
    max-width:780px;
    margin:0 auto;
    padding:0 0 8px;
}

/* ════════════════════════════════
   BANNER SLIDER — Animated
   ════════════════════════════════ */
.banner-section{
    margin:14px 14px 0;
    border-radius:var(--r);
    overflow:hidden;
    position:relative;
    min-height:40px;
    background:#0f2d80;
}

/* track: holds all slides side by side, slides by translateX */
.banner-track{
    display:flex;
    width:100%;
    transition:transform .55s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}

.banner-slide{
    min-width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 18px 44px;
    gap:8px;
    min-height:40px;
    position:relative;
    overflow:hidden;
    transition:background .55s ease;
}

/* ── Floating bubbles (decorative) ── */
.bb{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    pointer-events:none;
}
.bb1{width:120px;height:120px;top:-40px;right:20%;animation:bbFloat 6s ease-in-out infinite}
.bb2{width:70px; height:70px; bottom:-20px;left:10%;animation:bbFloat 8s ease-in-out infinite reverse}
.bb3{width:45px; height:45px; top:30%;right:5%; animation:bbFloat 5s ease-in-out infinite 1s}

@keyframes bbFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%     {transform:translateY(-14px) scale(1.06)}
}

/* ── Content side ── */
.banner-content{
    flex:1;min-width:0;
    position:relative;z-index:2;
}

.banner-chip{
    display:inline-flex;align-items:center;gap:5px;
    background:rgba(255,255,255,.18);
    color:#fff;
    font-size:.65rem;font-weight:700;letter-spacing:.5px;
    padding:4px 10px;border-radius:50px;
    margin-bottom:8px;
    backdrop-filter:blur(6px);
}

.banner-title{
    color:#fff;
    font-size:1.7rem;font-weight:900;line-height:1.05;
    margin-bottom:7px;letter-spacing:-.5px;
}
.banner-title span{
    display:block;
    font-size:2rem;
    /* shimmer effect */
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.6) 50%,#fff 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shimmer 3s linear infinite;
}
@keyframes shimmer{
    0%  {background-position:200% center}
    100%{background-position:-200% center}
}

.banner-desc{
    color:rgba(255,255,255,.82);
    font-size:.74rem;font-weight:500;line-height:1.55;
    margin-bottom:15px;
}

.banner-cta{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--yellow);color:#1a1a1a;
    padding:9px 16px;border-radius:50px;
    font-size:.72rem;font-weight:800;letter-spacing:.4px;
    box-shadow:0 4px 14px rgba(245,197,24,.45);
    border:none;cursor:pointer;
    transition:background var(--ease),transform var(--ease),box-shadow var(--ease);
    animation:ctaPulse 2.5s ease-in-out infinite;
}
@keyframes ctaPulse{
    0%,100%{box-shadow:0 4px 14px rgba(245,197,24,.45)}
    50%     {box-shadow:0 4px 24px rgba(245,197,24,.75)}
}
.banner-cta:hover{
    background:var(--yellow-dark);
    transform:scale(1.04);
    animation:none;
}

/* ── Visual side ── */
.banner-visual{
    flex-shrink:0;
    position:relative;z-index:2;
    width:118px;height:130px;
    display:flex;align-items:center;justify-content:center;
}

/* spinning rings */
.bv-ring{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.15);
    pointer-events:none;
}
.bv-ring1{
    width:110px;height:110px;
    animation:spinRing 12s linear infinite;
    border-top-color:rgba(255,255,255,.4);
}
.bv-ring2{
    width:84px;height:84px;
    animation:spinRing 8s linear infinite reverse;
    border-right-color:rgba(255,255,255,.35);
}
@keyframes spinRing{
    to{transform:rotate(360deg)}
}

/* main icon card */
.bv-card{
    position:absolute;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:var(--r-sm);
    display:flex;align-items:center;justify-content:center;
    color:#fff;
}
.bv-card-main{
    width:64px;height:64px;
    font-size:1.9rem;
    border-radius:var(--r);
    background:rgba(255,255,255,.22);
    animation:mainPop 3s ease-in-out infinite;
}
@keyframes mainPop{
    0%,100%{transform:scale(1) rotate(-2deg)}
    50%     {transform:scale(1.07) rotate(2deg)}
}

/* small floating cards */
.bv-card-sm{
    width:32px;height:32px;
    font-size:.9rem;
    border-radius:var(--r-xs);
}
.bv-float1{
    top:4px;right:2px;
    animation:floatCard1 4s ease-in-out infinite;
}
.bv-float2{
    bottom:8px;left:4px;
    animation:floatCard2 3.5s ease-in-out infinite;
}
@keyframes floatCard1{
    0%,100%{transform:translateY(0) rotate(6deg)}
    50%     {transform:translateY(-10px) rotate(-4deg)}
}
@keyframes floatCard2{
    0%,100%{transform:translateY(0) rotate(-5deg)}
    50%     {transform:translateY(8px) rotate(5deg)}
}

/* dot grid watermark */
.bv-dot-grid{
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1px);
    background-size:10px 10px;
    border-radius:50%;
    opacity:.4;
    pointer-events:none;
}

/* content enter animation (plays on active slide) */
.banner-slide.is-entering .banner-content{
    animation:contentIn .5s cubic-bezier(.2,.8,.2,1) both;
}
.banner-slide.is-entering .banner-visual{
    animation:visualIn .55s cubic-bezier(.2,.8,.2,1) .08s both;
}
@keyframes contentIn{
    from{opacity:0;transform:translateX(-28px)}
    to  {opacity:1;transform:translateX(0)}
}
@keyframes visualIn{
    from{opacity:0;transform:translateX(28px) scale(.9)}
    to  {opacity:1;transform:translateX(0) scale(1)}
}

/* ── Dots ── */
.banner-dots{
    position:absolute;
    bottom:12px;left:50%;transform:translateX(-50%);
    display:flex;gap:6px;z-index:5;
}
.dot{
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.35);
    cursor:pointer;
    transition:background var(--ease),width .3s ease,border-radius .3s ease;
}
.dot.active{background:#fff;width:22px;border-radius:4px}

/* ── Arrows ── */
.banner-arrow{
    position:absolute;
    top:50%;transform:translateY(-50%);
    width:30px;height:30px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;font-size:.7rem;
    display:flex;align-items:center;justify-content:center;
    z-index:5;cursor:pointer;
    transition:background var(--ease),transform var(--ease);
    margin-top:-16px; /* offset for dot row */
}
.banner-arrow:hover{background:rgba(255,255,255,.32)}
.banner-prev{left:8px}
.banner-next{right:8px}

/* ════════════════════════════════
   SECTION COMMON
   ════════════════════════════════ */
.section { padding: 22px 14px 0; }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--txt1);
    letter-spacing: -.2px;
}

.section-view-all {
    font-size: .82rem;
    font-weight: 700;
    color: var(--primary);
}
.section-view-all:hover { text-decoration: underline; }

/* ════════════════════════════════
   SERVICES GRID (4 cols)
   ════════════════════════════════ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.service-card {
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 16px 6px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    cursor: pointer;
    transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.service-card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-3px);
    border-color: var(--primary);
}

/* coloured icon box */
.service-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: var(--r-sm);
    background: var(--ic-bg);
    color: var(--ic);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform var(--ease);
}
.service-card:hover .service-icon-wrap { transform: scale(1.12); }

.service-name {
    font-size: .82rem;
    font-weight: 800;
    color: var(--txt1);          /* dark & bold */
    line-height: 1.2;
}
.service-desc {
    font-size: .65rem;
    font-weight: 600;
    color: var(--txt2);          /* clearly visible, not washed out */
    line-height: 1.35;
}

/* ════════════════════════════════
   TRACK ORDER CARD
   ════════════════════════════════ */
.track-section { padding: 16px 14px 0; }

.track-card {
    background: var(--primary-faint);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
}

.track-left { flex: 1; min-width: 0; }

.track-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--txt1);
    margin-bottom: 3px;
}
.track-desc {
    font-size: .74rem;
    font-weight: 600;
    color: var(--txt2);
    margin-bottom: 13px;
}

.track-input-row { display: flex; gap: 8px; align-items: center; }

.track-input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 1.5px solid var(--border2);
    border-radius: var(--r-sm);
    padding: 0 12px;
    font-size: .83rem;
    font-weight: 600;
    background: var(--bg-white);
    color: var(--txt1);
    outline: none;
    transition: border-color var(--ease);
}
.track-input:focus  { border-color: var(--primary); }
.track-input::placeholder { color: var(--txt3); font-weight: 500; }

.track-btn {
    height: 42px;
    padding: 0 16px;
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    border-radius: var(--r-sm);
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background var(--ease), transform var(--ease);
}
.track-btn:hover { background: var(--primary-dark); transform: scale(1.02); }

/* ── Track result panel ── */
.track-result {
    margin-top: 10px;
    animation: trFadeIn .28s ease;
}
@keyframes trFadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Result card */
.tr-card {
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}

.tr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
}
.tr-order-id {
    font-size: .82rem; font-weight: 800;
    color: var(--txt1); letter-spacing: .3px;
}
.tr-date {
    font-size: .68rem; font-weight: 600;
    color: var(--txt3); margin-top: 2px;
}
.tr-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: 50px;
    font-size: .68rem; font-weight: 800;
    white-space: nowrap; flex-shrink: 0;
}

/* Info rows */
.tr-rows { padding: 4px 16px; }
.tr-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}
.tr-row:last-child { border-bottom: none; }
.tr-label {
    font-size: .7rem; font-weight: 700;
    color: var(--txt3);
    display: flex; align-items: center; gap: 5px;
    flex-shrink: 0;
}
.tr-val {
    font-size: .78rem; font-weight: 600;
    color: var(--txt1); text-align: right;
    word-break: break-word;
}

/* 4-step tracker */
.tr-tracker {
    padding: 16px 16px 10px;
    position: relative;
}
.tr-track-line {
    position: absolute;
    top: 30px; left: calc(16px + 12.5%);
    right: calc(16px + 12.5%);
    height: 3px;
    background: var(--border);
    border-radius: 3px;
    z-index: 0;
}
.tr-track-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width .5s ease;
}
.tr-steps {
    display: flex;
    justify-content: space-between;
    position: relative; z-index: 1;
}
.tr-step {
    display: flex; flex-direction: column;
    align-items: center; gap: 7px;
    flex: 1;
}
.tr-step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; color: var(--txt3);
    transition: background .3s, border-color .3s, color .3s;
}
.tr-step.done .tr-step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.tr-step.active .tr-step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(45,140,240,.2);
    animation: trStepPulse 1.6s ease-in-out infinite;
}
@keyframes trStepPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(45,140,240,.25); }
    50%     { box-shadow: 0 0 0 7px rgba(45,140,240,.08); }
}
.tr-step-label {
    font-size: .6rem; font-weight: 700;
    color: var(--txt3); text-align: center;
    text-transform: uppercase; letter-spacing: .3px;
    line-height: 1.2;
}
.tr-step.done  .tr-step-label { color: var(--primary); }
.tr-step.active .tr-step-label { color: var(--primary); }

/* Cancelled state */
.tr-cancelled {
    margin: 12px 16px;
    padding: 10px 14px;
    background: #fee2e2;
    border-radius: var(--r-sm);
    color: #dc2626;
    font-size: .78rem; font-weight: 800;
    display: flex; align-items: center; gap: 8px;
}

/* Footer */
.tr-footer {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--border);
}
.tr-details-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; height: 42px;
    background: var(--primary); color: #fff;
    border-radius: var(--r-sm);
    font-size: .82rem; font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(45,140,240,.3);
    transition: background var(--ease), transform var(--ease);
}
.tr-details-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    color: #fff;
}
.tr-guest-note {
    text-align: center;
    font-size: .74rem; font-weight: 600;
    color: var(--txt3); margin: 0;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Error state */
.tr-error {
    padding: 12px 16px;
    background: var(--bg-white);
    border: 1.5px solid #fecaca;
    border-radius: var(--r-sm);
    color: #dc2626;
    font-size: .78rem; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
    box-shadow: var(--sh-sm);
}

/* Loading */
.tr-loading {
    padding: 12px 16px;
    color: var(--txt3);
    font-size: .78rem; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}

/* Spinner (reuses login.css spin class name but scoped) */
.track-spin {
    width: 16px; height: 16px;
    border: 2px solid rgba(45,140,240,.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: trSpin .6s linear infinite;
    flex-shrink: 0;
    display: inline-block;
}
@keyframes trSpin { to { transform: rotate(360deg); } }

.track-illustration {
    flex-shrink: 0;
    width: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.track-pin  { font-size: 1.6rem; color: var(--primary); }
.track-path {
    width: 2px; height: 16px;
    border-left: 2px dashed var(--txt3);
    margin: 2px 0; opacity: .5;
}
.track-box  { font-size: 1.4rem; color: var(--txt2); opacity: .75; }

/* ════════════════════════════════
   MORE SERVICES (4 cols)
   ════════════════════════════════ */
.more-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.more-service-item {
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    padding: 16px 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}
.more-service-item:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-3px);
    border-color: var(--primary);
}

.more-service-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: var(--primary-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: transform var(--ease);
}
.more-service-item:hover .more-service-icon { transform: scale(1.1); }

.more-service-name {
    font-size: .7rem;
    font-weight: 800;
    color: var(--txt1);          /* dark bold label */
    white-space: nowrap;
}

/* ════════════════════════════════
   BOTTOM NAV
   ════════════════════════════════ */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bnh);
    background: var(--bg-white);
    border-top: 1.5px solid var(--border);
    display: flex;
    align-items: stretch;
    z-index: 900;
    transition: background var(--ease), border-color var(--ease);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: .62rem;
    font-weight: 700;
    color: var(--txt3);
    padding: 6px 0;
    transition: color var(--ease);
}
.bottom-nav-item i {
    font-size: 1.25rem;
    transition: transform .18s ease;
}
.bottom-nav-item span {
    font-weight: 700;
    letter-spacing: .1px;
}
.bottom-nav-item:hover         { color: var(--primary); }
.bottom-nav-item:hover i       { transform: translateY(-2px); }
.bottom-nav-item.active        { color: var(--primary); }
.bottom-nav-item.active i      { transform: translateY(-2px); }

/* ════════════════════════════════
   RESPONSIVE — TABLET (≥ 600px)
   ════════════════════════════════ */
@media (min-width:600px){
    .page-wrap{padding:0 8px 8px}

    .banner-section{margin:16px 0 0;min-height:210px}
    .banner-slide{min-height:210px;padding:26px 24px 46px}
    .banner-title{font-size:2rem}
    .banner-title span{font-size:2.4rem}
    .banner-visual{width:140px;height:148px}
    .bv-ring1{width:130px;height:130px}
    .bv-ring2{width:100px;height:100px}
    .bv-card-main{width:74px;height:74px;font-size:2.1rem}
    .bv-card-sm{width:36px;height:36px;font-size:1rem}
    .bb1{width:150px;height:150px}

    .section,.track-section{padding-left:0;padding-right:0}
    .services-grid{gap:14px}
    .service-card{padding:20px 10px 16px}
    .service-icon-wrap{width:54px;height:54px;font-size:1.5rem}
    .service-name{font-size:.84rem}
    .more-services-grid{gap:14px}
    .more-service-icon{width:52px;height:52px;font-size:1.45rem}
    .track-card{padding:20px}
}

/* ════════════════════════════════
   RESPONSIVE — DESKTOP (≥ 900px)
   ════════════════════════════════ */
@media (min-width:900px){
    .page-wrap{max-width:860px;padding:0 0 16px}
    .header-inner{max-width:860px;margin:0 auto;padding:0 24px}
    .bottom-nav{
        max-width:860px;
        left:50%;right:auto;
        transform:translateX(-50%);
        width:100%;
        border-left:1px solid var(--border);
        border-right:1px solid var(--border);
        border-radius:var(--r) var(--r) 0 0;
    }
    .banner-section{min-height:230px}
    .banner-slide{min-height:230px;padding:30px 28px 50px}
    .banner-title{font-size:2.2rem}
    .banner-title span{font-size:2.7rem}
    .banner-visual{width:165px;height:168px}
    .bv-ring1{width:155px;height:155px}
    .bv-ring2{width:118px;height:118px}
    .bv-card-main{width:86px;height:86px;font-size:2.5rem}
    .bv-card-sm{width:40px;height:40px;font-size:1.1rem}
    .banner-arrow{width:34px;height:34px;font-size:.8rem}
    .services-grid{gap:16px}
    .service-card{padding:22px 12px 18px}
    .service-icon-wrap{width:58px;height:58px;font-size:1.6rem}
    .more-services-grid{gap:16px}
    .track-input{height:46px;font-size:.86rem}
    .track-btn{height:46px;font-size:.82rem;padding:0 20px}
}

/* ════════════════════════════════
   RESPONSIVE — WIDE (≥ 1100px)
   ════════════════════════════════ */
@media (min-width:1100px){
    .page-wrap{max-width:980px}
    .header-inner{max-width:980px}
    .bottom-nav{max-width:980px}
    .banner-section{border-radius:20px;min-height:250px}
    .banner-slide{min-height:250px;padding:34px 32px 54px}
    .banner-title{font-size:2.5rem}
    .banner-title span{font-size:3rem}
    .banner-visual{width:190px;height:192px}
    .bv-ring1{width:178px;height:178px}
    .bv-ring2{width:136px;height:136px}
    .bv-card-main{width:96px;height:96px;font-size:2.8rem}
}

/* ════════════════════════════════
   TINY SCREENS (< 360px)
   ════════════════════════════════ */
@media (max-width:359px){
    .banner-title{font-size:1.4rem}
    .banner-title span{font-size:1.7rem}
    .banner-visual{width:88px;height:96px}
    .bv-ring1{width:84px;height:84px}
    .bv-ring2{width:64px;height:64px}
    .bv-card-main{width:52px;height:52px;font-size:1.5rem}
    .bv-card-sm{width:26px;height:26px;font-size:.75rem}
    .service-card{padding:12px 6px}
    .service-icon{font-size:1.7rem}
    .more-service-icon{width:38px;height:38px;font-size:1.1rem}
    .more-service-name{font-size:.62rem}
    .track-btn{padding:0 10px;font-size:.72rem}
    .banner-arrow{display:none}
}