/* ============================================================
   SVLM Customer App — Design System
   Orange #FF6A1A · Plus Jakarta Sans + Noto Sans Thai · flat, no shadows
   ============================================================ */

html { cursor: pointer; }

:root {
  --c-orange: #FF6A1A;
  --c-orange-tint-bg: #FFF1E6;
  --c-orange-tint-text: #B3634A;

  --c-ink: #201812;
  --c-muted: #7A6F68;
  --c-muted-2: #8A7C74;
  --c-faint: #B3A89F;

  --c-border: #F1E6DC;
  --c-soft-bg: #F5EEE8;
  --c-white: #fff;

  --c-green: #2FAE66;
  --c-green-bg: #EAF6EE;
  --c-teal: #0EA5A0;

  --c-r-card: 16px;
  --c-r-sm: 12px;
  --c-r-pill: 999px;

  --c-font: "Plus Jakarta Sans", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

.cust {
  font-family: var(--c-font);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}
.cust *, .cust *::before, .cust *::after { box-sizing: border-box; }
.cust button { font-family: var(--c-font); }

/* ---------- Phone shell ---------- */
.cust-phone {
  width: 390px; height: 844px; position: relative;
  background: #fff; overflow: hidden;
  font-family: var(--c-font); color: var(--c-ink);
  display: flex; flex-direction: column;
}
.cust-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cust-noscroll::-webkit-scrollbar { display: none; }
.cust-noscroll { scrollbar-width: none; }

.cust-statusbar {
  height: 50px; flex: 0 0 50px; display: flex; align-items: flex-end;
  justify-content: space-between; padding: 0 26px 8px; font-size: 14px;
  font-weight: 600; letter-spacing: .2px; position: relative; z-index: 5;
}

/* ---------- Bottom tab bar ---------- */
.cust-tabbar {
  flex: 0 0 auto; display: flex; justify-content: space-around; align-items: center;
  padding: 10px 6px 26px; background: #fff; border-top: 1px solid var(--c-border);
  position: relative; z-index: 30;
}
.cust-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex: 1; }
.cust-tab-label { font-size: 10.5px; font-weight: 600; }

/* ---------- Buttons ---------- */
.cust-btn-primary {
  height: 54px; border-radius: var(--c-r-pill); background: var(--c-orange); color: #fff;
  font-size: 15px; font-weight: 700; border: none; cursor: pointer; font-family: var(--c-font);
  display: flex; align-items: center; justify-content: center;
}
.cust-btn-outline {
  height: 48px; border-radius: var(--c-r-pill); background: #fff; color: var(--c-orange);
  border: 1.5px solid var(--c-orange); font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--c-font); display: flex; align-items: center; justify-content: center;
}

/* ---------- Inputs ---------- */
.cust-input {
  height: 52px; border-radius: 14px; border: 1.5px solid var(--c-border); background: #fff;
  padding: 0 16px; font-size: 14px; color: var(--c-ink); outline: none; font-family: var(--c-font);
  width: 100%;
}
.cust-input::placeholder { color: var(--c-faint); }

/* ---------- Cards ---------- */
.cust-card { border-radius: var(--c-r-card); background: #fff; }
.cust-chip { border-radius: var(--c-r-pill); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* ---------- Scrollbars off for horizontal rails ---------- */
/* min-width: 0 keeps the rail from growing to fit all its cards unclipped
   when it's a flex child (flex items default to min-width: auto, i.e. their
   content's intrinsic width) — without it, a long row can push the whole
   page wider than the viewport instead of scrolling internally. */
.cust-rail { display: flex; overflow-x: auto; overflow-y: hidden; min-width: 0; flex-shrink: 0; }
.cust-rail::-webkit-scrollbar { display: none; }

/* ---------- Small inline spinner (booking QR "waiting for payment") ---------- */
@keyframes cust-spin { to { transform: rotate(360deg); } }
.cust-rail { scrollbar-width: none; }