/* ============================================================
   SHIPNEX — Component Library
   Reusable, token-driven primitives shared across both apps.
   ============================================================ */

/* ---------- Screen shell ---------- */
.screen {
  position: relative;
  width: var(--device-w);
  height: var(--device-h);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  letter-spacing: var(--tracking);
  direction: rtl;
  text-align: right;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.screen *, .screen *::before, .screen *::after { box-sizing: border-box; }
.screen .scroll {
  flex: 1;
  overflow: hidden;            /* static mock — content sized to fit */
  display: flex;
  flex-direction: column;
}
.screen-body { padding: 0 var(--gutter) var(--s5); display: flex; flex-direction: column; gap: var(--s5); }

/* ---------- Status bar ---------- */
.statusbar {
  height: 52px; flex: 0 0 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px 0 24px;
  font-weight: var(--fw-semi); font-size: 15px; color: var(--ink);
  direction: ltr;            /* iOS keeps time left / battery right */
}
.statusbar.on-dark { color: #fff; }
.statusbar .sb-icons { display: flex; align-items: center; gap: 7px; }
.statusbar .sb-icons svg { width: 18px; height: 18px; }
.statusbar .sb-bat { width: 25px; height: 13px; border: 1.6px solid currentColor; border-radius: 4px; position: relative; opacity: .9; }
.statusbar .sb-bat::after { content:""; position:absolute; right:-3.5px; top:3px; width:2px; height:5px; background:currentColor; border-radius:0 2px 2px 0; }
.statusbar .sb-bat i { position:absolute; inset:1.7px; width:70%; background: currentColor; border-radius:2px; }

/* ---------- App header ---------- */
.appbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s1) var(--gutter) var(--s3);
}
.appbar .ab-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); flex: 1; }
.appbar .ab-title.center { text-align: center; }
.iconbtn {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--surface-2);
  color: var(--ink); border: none; cursor: pointer; transition: background .15s;
}
.iconbtn:active { background: var(--surface-3); }
.iconbtn.ghost { background: transparent; }
.iconbtn svg { width: 21px; height: 21px; }
.appbar .loc { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.appbar .loc .lbl { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-med); }
.appbar .loc .val { font-size: var(--fs-title); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 5px; }
.appbar .loc .val svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font); font-weight: var(--fw-semi); font-size: var(--fs-body);
  border: none; cursor: pointer; border-radius: var(--r-btn);
  padding: 0 var(--s5); height: 48px; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--s2); color: var(--on-accent);
  background: var(--accent); transition: transform .12s var(--ease), filter .15s, background .15s;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:hover { background: var(--accent-press); }
.btn-lg { height: 56px; font-size: var(--fs-title); border-radius: calc(var(--r-btn) + 2px); }
.btn-block { width: 100%; }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-tint { background: var(--accent-tint); color: var(--accent); }
.btn-tint:hover { background: var(--accent-tint); filter: brightness(.97); }
.btn-outline { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn-danger { background: #FDECEC; color: #D64545; }
.btn-success { background: var(--green); color: #fff; }
.btn-pill { border-radius: var(--r-pill); }

/* ---------- Chips / segmented ---------- */
.chips { display: flex; gap: var(--s2); overflow: hidden; }
.chip {
  flex: 0 0 auto; padding: 9px var(--s4); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); font-weight: var(--fw-med);
  font-size: var(--fs-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
}
.chip svg { width: 15px; height: 15px; }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.tinted.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.segmented { display: flex; background: var(--surface-2); border-radius: var(--r-md); padding: 4px; gap: 4px; }
.segmented button {
  flex: 1; border: none; background: transparent; font-family: var(--font);
  font-weight: var(--fw-semi); font-size: var(--fs-sm); color: var(--ink-2);
  padding: 9px 0; border-radius: calc(var(--r-md) - 4px); cursor: pointer; transition: all .15s;
}
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-md); border: 1px solid var(--line-2); }
.card.flat { box-shadow: none; background: var(--surface-2); border-color: transparent; }
.card-pad { padding: var(--s4); }

/* Section header */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; }
.sec-head h3 { font-size: var(--fs-title); font-weight: var(--fw-bold); }
.sec-head a { font-size: var(--fs-sm); color: var(--accent); font-weight: var(--fw-semi); cursor: pointer; }

/* ---------- Image placeholder (drop-in slot upgrades these in live view) ---------- */
.imgph {
  position: relative; overflow: hidden; background: var(--surface-3);
  background-image: repeating-linear-gradient(135deg, rgba(16,24,40,.035) 0 10px, transparent 10px 20px);
  display: grid; place-items: center; color: var(--ink-3); border-radius: var(--r-md); flex: 0 0 auto;
}
.imgph span { font: 600 10px/1.3 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .03em;
  text-transform: uppercase; text-align: center; padding: 4px 6px; opacity: .8; }
.imgph.cover { width: 100%; height: 100%; }

/* ---------- Search bar ---------- */
.searchbar {
  display: flex; align-items: center; gap: var(--s2); height: 50px; padding: 0 var(--s4);
  background: var(--surface-2); border-radius: var(--r-md); color: var(--ink-3); font-size: var(--fs-body);
}
.searchbar svg { width: 20px; height: 20px; flex: 0 0 20px; }
.searchbar .ph { flex: 1; }
.searchbar .mic { color: var(--accent); }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-2); }
.input {
  height: 52px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface);
  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); color: var(--ink); font-size: var(--fs-body);
}
.input svg { width: 19px; height: 19px; color: var(--ink-3); flex: 0 0 19px; }
.input .val { flex: 1; }
.input .val.ph { color: var(--ink-3); }
.input.focused { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }

/* OTP boxes */
.otp { display: flex; gap: var(--s3); direction: ltr; justify-content: center; }
.otp .box {
  width: 56px; height: 64px; border-radius: var(--r-md); border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: 26px; font-weight: var(--fw-bold); background: var(--surface);
}
.otp .box.filled { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }

/* ---------- List rows ---------- */
.row { display: flex; align-items: center; gap: var(--s3); }
.row .lead { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); flex: 0 0 44px; }
.row .lead.tint { background: var(--accent-tint); color: var(--accent); }
.row .rmain { flex: 1; min-width: 0; }
.row .rmain .t { font-weight: var(--fw-semi); }
.row .rmain .s { font-size: var(--fs-sm); color: var(--ink-3); }
.row .chev { color: var(--ink-4); }
.row .chev svg { width: 20px; height: 20px; }

/* ---------- Badges / meta ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 4px 9px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); }
.badge.dark { background: var(--ink); color: #fff; }
.badge.green { background: var(--green-tint); color: var(--green); }
.rating { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.rating svg { width: 14px; height: 14px; color: #F5A623; fill: #F5A623; }
.meta { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: var(--fs-sm); font-weight: var(--fw-med); }
.meta svg { width: 14px; height: 14px; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); display: inline-block; }
.price { font-weight: var(--fw-bold); color: var(--ink); }
.price .cur { font-size: .78em; color: var(--ink-2); font-weight: var(--fw-semi); }
.strike { text-decoration: line-through; color: var(--ink-3); font-weight: var(--fw-med); }

/* ---------- Qty stepper ---------- */
.stepper { display: inline-flex; align-items: center; gap: var(--s3); background: var(--surface-2); border-radius: var(--r-pill); padding: 5px; }
.stepper button { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.stepper button.plus { background: var(--accent); color: var(--on-accent); }
.stepper button svg { width: 16px; height: 16px; }
.stepper .n { min-width: 18px; text-align: center; font-weight: var(--fw-bold); }

/* ---------- Bottom nav ---------- */
.tabbar {
  flex: 0 0 auto; height: 84px; padding: 10px var(--s4) 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); box-shadow: var(--shadow-up); border-top: 1px solid var(--line-2);
}
.tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-3); font-size: 10px; font-weight: var(--fw-med); cursor: pointer; flex: 1; }
.tabbar .tab svg { width: 24px; height: 24px; }
.tabbar .tab.active { color: var(--accent); }
.tabbar .tab.fab { flex: 0 0 auto; }
.tabbar .tab.fab .bub { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 8px 18px var(--accent-tint), var(--shadow-md); margin-top: -22px; }
.tabbar .tab.fab .bub svg { width: 26px; height: 26px; }

/* ---------- Banner ---------- */
.banner { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--ink); color: #fff; padding: var(--s5); min-height: 132px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.banner .ey { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--pop); }
.banner h4 { font-size: var(--fs-h2); font-weight: var(--fw-bold); max-width: 60%; }
.banner .b-img { position: absolute; inset-inline-end: -10px; bottom: -10px; width: 150px; height: 150px; }

/* ---------- Order timeline ---------- */
.timeline { display: flex; flex-direction: column; }
.tl-step { display: flex; gap: var(--s3); }
.tl-step .tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-step .tl-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--ink-3); display: grid; place-items: center; flex: 0 0 26px; }
.tl-step .tl-dot svg { width: 15px; height: 15px; }
.tl-step .tl-line { width: 2px; flex: 1; background: var(--line); margin: 3px 0; min-height: 26px; }
.tl-step.done .tl-dot { background: var(--accent); color: #fff; }
.tl-step.done .tl-line { background: var(--accent); }
.tl-step.active .tl-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 5px var(--accent-tint); }
.tl-step .tl-body { padding-bottom: var(--s5); }
.tl-step .tl-body .t { font-weight: var(--fw-semi); }
.tl-step .tl-body .s { font-size: var(--fs-sm); color: var(--ink-3); }
.tl-step.active .tl-body .t { color: var(--accent); }

/* ---------- Map ---------- */
.map { position: relative; background:
    linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02)),
    repeating-linear-gradient(0deg, #EAEEF2 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, #EAEEF2 0 1px, transparent 1px 46px),
    #F1F4F7; overflow: hidden; }
.map .route { position: absolute; }
.map .pin { position: absolute; width: 34px; height: 34px; border-radius: 50% 50% 50% 2px; transform: rotate(45deg); display: grid; place-items: center; box-shadow: var(--shadow-md); }
.map .pin svg { transform: rotate(-45deg); width: 17px; height: 17px; color: #fff; }
.map .pin.a { background: var(--ink); }
.map .pin.b { background: var(--accent); }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.avatar { border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--surface-3); }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.grow { flex: 1; }
.pad-g { padding-inline: var(--gutter); }
.hairline { border-top: 1px solid var(--line-2); }

/* Floating bottom action bar (cart/checkout) */
.actionbar { flex: 0 0 auto; padding: var(--s4) var(--gutter) 26px; background: var(--surface); box-shadow: var(--shadow-up); border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: var(--s3); }

/* Status bar custom glyphs */
.statusbar { position: relative; z-index: 6; }
.sb-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sb-signal i { width: 3px; background: currentColor; border-radius: 1px; }
.sb-signal i:nth-child(1){ height: 5px; } .sb-signal i:nth-child(2){ height: 7px; }
.sb-signal i:nth-child(3){ height: 9px; } .sb-signal i:nth-child(4){ height: 12px; }
.statusbar svg { width: 17px; height: 17px; }

/* Splash loading dots */
.splash-dots { display: flex; gap: 8px; }
.splash-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: sp-bounce 1.1s var(--ease) infinite; }
.splash-dots i:nth-child(2){ animation-delay: .15s; } .splash-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes sp-bounce { 0%,80%,100%{ opacity:.3; transform: translateY(0);} 40%{ opacity:1; transform: translateY(-6px);} }

/* Onboarding progress dots */
.ob-dots { display: flex; gap: 7px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--surface-3); transition: all .25s; }
.ob-dots i.on { width: 22px; background: var(--accent); }

/* Component variant toggles (Tweaks) */
body.cards-flat .card { box-shadow: none; border-color: var(--line); background: var(--surface-2); }
body.cards-outline .card { box-shadow: none; border: 1.5px solid var(--line); }

/* Home indicator */
.home-ind { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .25; z-index: 5; }
.on-dark .home-ind, .screen.dark .home-ind { background: #fff; opacity: .4; }