/* ============================================================
   SAHELLI — Design System  ·  canonical stylesheet
   Direction: Modern Editorial. White · deep green · hairlines.
   Type: IBM Plex Sans (Latin) / IBM Plex Sans Arabic (RTL).
   All app component classes are scoped under .sa
   ============================================================ */

:root {
  /* ---- brand & accent ---- */
  --sa-green:        #0E5C3F;  /* primary — deep, confident */
  --sa-green-press:  #0A4A33;
  --sa-green-bright: #1A7F5A;  /* links, secondary accents */
  --sa-green-tint:   #E8F1EC;  /* fills, selected states */
  --sa-green-tint-2: #F1F6F3;

  /* ---- ink & neutrals ---- */
  --sa-ink:    #101512;  /* headings, primary text */
  --sa-ink-2:  #2C342F;  /* body text */
  --sa-muted:  #717C76;  /* secondary / captions */
  --sa-faint:  #9AA39E;  /* placeholder / disabled */
  --sa-line:   #E7EBE9;  /* hairline borders */
  --sa-line-2: #D7DDDA;  /* stronger border (inputs) */
  --sa-surf:   #F6F8F7;  /* subtle surface fill */
  --sa-white:  #FFFFFF;

  /* ---- semantic ---- */
  --sa-star:    #F4A52E;  /* ratings */
  --sa-success: #1A7F5A;
  --sa-warn:    #C97A12;
  --sa-warn-tint:#FBF0DD;
  --sa-danger:  #C4453B;
  --sa-danger-tint:#FBECEA;

  /* ---- radius ---- */
  --sa-r-sm: 8px;
  --sa-r:    10px;
  --sa-r-md: 14px;
  --sa-r-lg: 18px;
  --sa-r-xl: 22px;
  --sa-r-pill: 999px;

  /* ---- spacing scale ---- */
  --sa-1: 4px;  --sa-2: 8px;  --sa-3: 12px; --sa-4: 16px;
  --sa-5: 20px; --sa-6: 24px; --sa-8: 32px; --sa-10: 40px;

  /* ---- shadow ---- */
  --sa-sh-1: 0 1px 2px rgba(16,40,28,.05);
  --sa-sh-2: 0 6px 20px rgba(16,40,28,.08);
  --sa-sh-float: 0 10px 34px rgba(14,40,28,.14), 0 2px 8px rgba(14,40,28,.06);

  /* ---- type ---- */
  --sa-font: "IBM Plex Sans", system-ui, sans-serif;
  --sa-font-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}

/* ============================================================
   APP ROOT
   ============================================================ */
.sa, .sa * { box-sizing: border-box; }
.sa {
  font-family: var(--sa-font);
  color: var(--sa-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sa [dir="rtl"], .sa.rtl { font-family: var(--sa-font-ar); direction: rtl; }

/* ---- phone screen shell ---- */
.sa-screen {
  width: 390px;
  min-height: 100%;
  background: var(--sa-white);
  position: relative;
  overflow: hidden;
  font-family: var(--sa-font);
}
.sa-screen.rtl { direction: rtl; font-family: var(--sa-font-ar); }
.sa-statusbar {
  height: 44px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px 0 30px; font-size: 14px; font-weight: 600; letter-spacing: .2px;
  color: var(--sa-ink); flex-shrink: 0;
}
.sa-statusbar.on-dark { color: #fff; }
.sa-statusbar .sb-right { display: flex; align-items: center; gap: 6px; }
.sa-statusbar .sb-right svg { width: 17px; height: 17px; }
.sa-home-ind { height: 5px; width: 134px; border-radius: 3px; background: var(--sa-ink); opacity: .85; margin: 7px auto 9px; }
.sa-pad-bottom { height: 110px; }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.sa-display { font-size: 30px; line-height: 1.08; font-weight: 700; letter-spacing: -1px; margin: 0; }
.sa-h1 { font-size: 26px; line-height: 1.12; font-weight: 700; letter-spacing: -.5px; margin: 0; }
.sa-h2 { font-size: 22px; line-height: 1.18; font-weight: 700; letter-spacing: -.4px; margin: 0; }
.sa-title { font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; margin: 0; }
.sa-body-lg { font-size: 16px; line-height: 1.5; font-weight: 400; }
.sa-body { font-size: 15px; line-height: 1.55; font-weight: 400; color: var(--sa-ink-2); }
.sa-sm { font-size: 14px; line-height: 1.5; }
.sa-xs { font-size: 13px; line-height: 1.45; }
.sa-micro { font-size: 11px; line-height: 1.3; }
.sa-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--sa-muted); margin: 0; }
.sa-green-text { color: var(--sa-green); }
.sa-muted-text { color: var(--sa-muted); }

/* ============================================================
   BUTTONS
   ============================================================ */
.sa-btn {
  font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.1px;
  border: none; cursor: pointer; height: 54px; padding: 0 22px;
  border-radius: var(--sa-r); display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; transition: background .15s, transform .08s, box-shadow .15s; width: 100%;
}
.sa-btn:active { transform: scale(.985); }
.sa-btn svg { width: 20px; height: 20px; }
.sa-btn-primary { background: var(--sa-green); color: #fff; }
.sa-btn-primary:hover { background: var(--sa-green-press); }
.sa-btn-secondary { background: var(--sa-green-tint); color: var(--sa-green); }
.sa-btn-outline { background: #fff; color: var(--sa-ink); border: 1.5px solid var(--sa-ink); }
.sa-btn-ghost { background: transparent; color: var(--sa-green); }
.sa-btn-danger { background: var(--sa-danger-tint); color: var(--sa-danger); }
.sa-btn-sm { height: 44px; font-size: 14.5px; padding: 0 16px; }
.sa-btn:disabled, .sa-btn.is-disabled { background: var(--sa-surf); color: var(--sa-faint); cursor: not-allowed; }

.sa-iconbtn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--sa-line);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  color: var(--sa-ink); cursor: pointer; flex-shrink: 0;
}
.sa-iconbtn svg { width: 20px; height: 20px; }
.sa-iconbtn.on-photo { background: rgba(255,255,255,.18); backdrop-filter: blur(6px); border: none; color: #fff; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.sa-field { margin-bottom: 16px; }
.sa-label { display: block; font-size: 13px; font-weight: 600; color: var(--sa-ink-2); margin-bottom: 7px; }
.sa-input {
  width: 100%; height: 54px; border: 1.5px solid var(--sa-line-2); border-radius: var(--sa-r);
  padding: 0 15px; font-family: inherit; font-size: 16px; color: var(--sa-ink); background: #fff;
  display: flex; align-items: center; gap: 10px;
}
.sa-input::placeholder, .sa-input .ph-text { color: var(--sa-faint); }
.sa-input.focused { border-color: var(--sa-ink); }
.sa-input svg { width: 20px; height: 20px; color: var(--sa-muted); flex-shrink: 0; }
.sa-input .val { color: var(--sa-ink); }
.sa-textarea { min-height: 110px; align-items: flex-start; padding: 14px 15px; line-height: 1.5; }
.sa-help { font-size: 12px; color: var(--sa-muted); margin-top: 6px; }

/* search */
.sa-search {
  height: 54px; border: 1.5px solid var(--sa-ink); border-radius: var(--sa-r);
  display: flex; align-items: center; gap: 11px; padding: 0 16px; color: var(--sa-faint);
  font-size: 15px; font-weight: 500; background: #fff;
}
.sa-search svg { width: 20px; height: 20px; color: var(--sa-ink); flex-shrink: 0; }
.sa-search .kbd { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-ink); }
.sa-search.soft { border: 1.5px solid var(--sa-line-2); }
.sa-search.soft svg { color: var(--sa-muted); }

/* OTP */
.sa-otp { display: flex; gap: 10px; }
.sa-otp .cell {
  flex: 1; height: 60px; border: 1.5px solid var(--sa-line-2); border-radius: var(--sa-r);
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--sa-ink);
}
.sa-otp .cell.filled { border-color: var(--sa-ink); }
.sa-otp .cell.active { border-color: var(--sa-green); box-shadow: 0 0 0 3px var(--sa-green-tint); }

/* phone prefix */
.sa-phone-input { display: flex; gap: 10px; }
.sa-phone-input .prefix { width: 92px; flex-shrink: 0; height: 54px; border: 1.5px solid var(--sa-line-2); border-radius: var(--sa-r); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 16px; font-weight: 600; }
.sa-phone-input .prefix .flag { width: 22px; height: 16px; border-radius: 2px; overflow: hidden; display: inline-block; }

/* toggle */
.sa-toggle { width: 48px; height: 28px; border-radius: 999px; background: var(--sa-line-2); position: relative; cursor: pointer; transition: background .18s; flex-shrink: 0; }
.sa-toggle.on { background: var(--sa-green); }
.sa-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sa-toggle.on::after { transform: translateX(20px); }

/* segmented */
.sa-segment { display: flex; background: var(--sa-surf); border-radius: var(--sa-r); padding: 4px; gap: 4px; }
.sa-segment .seg { flex: 1; text-align: center; padding: 10px 8px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--sa-muted); cursor: pointer; }
.sa-segment .seg.on { background: #fff; color: var(--sa-ink); box-shadow: var(--sa-sh-1); }

/* filter chips */
.sa-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sa-fchip { padding: 9px 15px; border-radius: var(--sa-r-pill); border: 1.5px solid var(--sa-line-2); font-size: 13.5px; font-weight: 600; color: var(--sa-ink-2); background: #fff; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.sa-fchip svg { width: 15px; height: 15px; }
.sa-fchip.on { background: var(--sa-green); border-color: var(--sa-green); color: #fff; }

/* ============================================================
   BADGES / CHIPS / RATINGS
   ============================================================ */
.sa-badge { color: var(--sa-green); display: inline-flex; align-items: center; }
.sa-badge svg { width: 16px; height: 16px; }
.sa-rate { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--sa-ink); }
.sa-rate .star { color: var(--sa-star); }
.sa-stars { display: inline-flex; gap: 1px; }
.sa-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--sa-r-pill); background: var(--sa-surf); color: var(--sa-ink-2); font-size: 12.5px; font-weight: 600; }
.sa-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--sa-r-pill); font-size: 13px; font-weight: 700; }
.sa-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sa-status.active { background: var(--sa-green-tint); color: var(--sa-green); }
.sa-status.warn { background: var(--sa-warn-tint); color: var(--sa-warn); }
.sa-status.expired { background: var(--sa-danger-tint); color: var(--sa-danger); }

/* ============================================================
   AVATARS & PHOTO PLACEHOLDERS
   ============================================================ */
.sa-avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; flex-shrink: 0; overflow: hidden; }
.sa-avatar.sq { border-radius: var(--sa-r); }
.sa-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--sa-surf); color: #C2CCC7; position: relative; overflow: hidden;
}
.sa-ph svg { width: 26px; height: 26px; opacity: .8; }
.sa-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.012), rgba(0,0,0,.05)); }

/* ============================================================
   HEADERS
   ============================================================ */
.sa-appbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 22px 14px; }
.sa-appbar .brand { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.sa-appbar .brand b { color: var(--sa-green); }
.sa-appbar .loc { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--sa-muted); }
.sa-appbar .loc svg { width: 15px; height: 15px; color: var(--sa-green); }
.sa-navbar { display: flex; align-items: center; gap: 12px; padding: 6px 16px 12px; }
.sa-navbar .title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.sa-sechead { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 14px; }
.sa-sechead h3 { font-size: 13px; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: .12em; color: var(--sa-muted); }
.sa-sechead a { font-size: 13px; font-weight: 600; color: var(--sa-green); display: inline-flex; align-items: center; gap: 3px; }
.sa-sechead a svg { width: 15px; height: 15px; }

/* ============================================================
   CATEGORY PHOTO TILE
   ============================================================ */
.sa-cat { position: relative; height: 116px; border-radius: var(--sa-r-md); overflow: hidden; }
.sa-cat .sa-ph { position: absolute; inset: 0; border-radius: 0; }
.sa-cat .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,14,0) 32%, rgba(8,20,14,.72)); }
.sa-cat .ci { position: absolute; left: 14px; top: 12px; color: #fff; }
.sa-cat .ci svg { width: 22px; height: 22px; }
.sa-cat .cn { position: absolute; right: 12px; top: 12px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--sa-r-pill); }
.sa-cat .cl { position: absolute; left: 14px; bottom: 12px; color: #fff; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }

/* ============================================================
   PRO CARD (list row)
   ============================================================ */
.sa-pro { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--sa-line); align-items: center; }
.sa-pro.first, .sa-pro:first-child { border-top: none; }
.sa-pro .pic { width: 72px; height: 72px; border-radius: var(--sa-r); flex-shrink: 0; }
.sa-pro .info { flex: 1; min-width: 0; }
.sa-pro .nm { font-size: 16px; font-weight: 700; letter-spacing: -.2px; display: flex; align-items: center; gap: 5px; }
.sa-pro .tr { font-size: 13px; color: var(--sa-muted); font-weight: 500; margin-top: 2px; }
.sa-pro .meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; }
.sa-pro .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sa-muted); }
.sa-pro .meta .ds { color: var(--sa-muted); font-weight: 500; }
.sa-pro .chev { color: var(--sa-muted); }
.sa-pro .chev svg { width: 20px; height: 20px; }

/* ============================================================
   STATS / INFO ROWS / REVIEWS
   ============================================================ */
.sa-stats { display: flex; border-top: 1px solid var(--sa-line); border-bottom: 1px solid var(--sa-line); }
.sa-stats .stat { flex: 1; padding: 18px 8px; text-align: center; border-right: 1px solid var(--sa-line); }
.sa-stats .stat:last-child { border-right: none; }
.sa-stats .v { font-size: 22px; font-weight: 700; letter-spacing: -.5px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.sa-stats .l { font-size: 11px; color: var(--sa-muted); font-weight: 600; margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }

.sa-block { padding: 22px; border-bottom: 1px solid var(--sa-line); }
.sa-block.last { border-bottom: none; }
.sa-block h3 { font-size: 13px; font-weight: 700; margin: 0 0 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--sa-muted); }
.sa-block p { font-size: 15px; line-height: 1.6; color: var(--sa-ink-2); margin: 0; }

.sa-gallery { display: flex; gap: 8px; }
.sa-gallery .sa-ph { width: 110px; height: 110px; border-radius: var(--sa-r); flex-shrink: 0; }

.sa-review { padding: 18px 0; border-top: 1px solid var(--sa-line); }
.sa-review.first, .sa-review:first-of-type { border-top: none; padding-top: 0; }
.sa-review .rhead { display: flex; align-items: center; gap: 11px; }
.sa-review .rn { font-size: 14.5px; font-weight: 700; }
.sa-review .rd { font-size: 12px; color: var(--sa-muted); }
.sa-review .rstars { margin-left: auto; }
.sa-review p { font-size: 14px; line-height: 1.55; color: var(--sa-ink-2); margin: 10px 0 0; }

/* settings / list rows */
.sa-list { }
.sa-list .row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--sa-line); }
.sa-list .row:first-child { border-top: none; }
.sa-list .row .ic { width: 40px; height: 40px; border-radius: var(--sa-r); background: var(--sa-surf); display: flex; align-items: center; justify-content: center; color: var(--sa-ink); flex-shrink: 0; }
.sa-list .row .ic svg { width: 20px; height: 20px; }
.sa-list .row .lbl { flex: 1; font-size: 15px; font-weight: 600; }
.sa-list .row .lbl small { display: block; font-size: 12.5px; font-weight: 400; color: var(--sa-muted); margin-top: 1px; }
.sa-list .row .chev { color: var(--sa-faint); }
.sa-list .row .chev svg { width: 20px; height: 20px; }

/* ============================================================
   FLOATING TAB BAR  (Nightingale-style)
   ============================================================ */
.sa-tabbar {
  position: absolute; left: 16px; right: 16px; bottom: 18px;
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid var(--sa-line); border-radius: var(--sa-r-xl);
  padding: 7px; box-shadow: var(--sa-sh-float);
}
.sa-tabbar .tab {
  display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 15px;
  font-size: 13.5px; font-weight: 600; color: var(--sa-muted); cursor: pointer;
  transition: background .18s, color .18s;
}
.sa-tabbar .tab svg { width: 22px; height: 22px; }
.sa-tabbar .tab span { display: none; white-space: nowrap; }
.sa-tabbar .tab.on { background: var(--sa-green); color: #fff; padding: 12px 16px; }
.sa-tabbar .tab.on span { display: inline; }

/* ============================================================
   STICKY BOTTOM ACTION BAR
   ============================================================ */
.sa-actionbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--sa-line); display: flex; align-items: center; gap: 12px;
}
.sa-actionbar .sa-btn { flex: 1; }
.sa-actionbar .fav { width: 54px; height: 54px; border-radius: var(--sa-r); border: 1.5px solid var(--sa-ink); display: flex; align-items: center; justify-content: center; color: var(--sa-ink); flex-shrink: 0; cursor: pointer; }
.sa-actionbar .fav svg { width: 22px; height: 22px; }

/* cover photo header */
.sa-cover { position: relative; }
.sa-cover .sa-ph { position: absolute; inset: 0; border-radius: 0; }
.sa-cover .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,14,.35) 0%, rgba(8,20,14,0) 28%, rgba(8,20,14,.78)); }
.sa-cover .topbtns { position: absolute; top: 8px; left: 0; right: 0; padding: 0 16px; display: flex; justify-content: space-between; }
.sa-cover .ctitle { position: absolute; left: 22px; right: 22px; bottom: 18px; color: #fff; }
.sa-cover .ctitle .nm { font-size: 26px; font-weight: 700; letter-spacing: -.5px; display: flex; align-items: center; gap: 7px; }
.sa-cover .ctitle .nm svg { width: 20px; height: 20px; }
.sa-cover .ctitle .tr { font-size: 14px; font-weight: 500; opacity: .92; margin-top: 2px; }
.sa-cover .badge-w { color: #fff; }

/* subscription card */
.sa-subcard { border-radius: var(--sa-r-lg); padding: 22px; color: #fff; background: var(--sa-green); position: relative; overflow: hidden; }
.sa-subcard .big { font-size: 46px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.sa-subcard .big small { font-size: 17px; font-weight: 600; letter-spacing: 0; opacity: .8; }
.sa-subcard .meter { height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); margin: 16px 0 0; overflow: hidden; }
.sa-subcard .meter .fill { height: 100%; background: #fff; border-radius: 4px; }

/* sheet */
.sa-sheet { border-radius: var(--sa-r-xl) var(--sa-r-xl) 0 0; background: #fff; padding: 8px 22px 22px; box-shadow: 0 -10px 40px rgba(16,40,28,.14); }
.sa-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--sa-line-2); margin: 0 auto 16px; }

/* emergency FAB — floats above the tab bar */
.sa-fab-emg {
  position: absolute; right: 20px; bottom: 96px; z-index: 6;
  height: 50px; padding: 0 18px; border: none; cursor: pointer;
  border-radius: var(--sa-r-pill); background: var(--sa-danger); color: #fff;
  display: inline-flex; align-items: center; gap: 8px; font-family: inherit;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.1px;
  box-shadow: 0 8px 22px rgba(196,69,59,.42), 0 0 0 6px rgba(196,69,59,.10);
}
.sa-fab-emg svg { width: 19px; height: 19px; }
.sa-screen.rtl .sa-fab-emg { right: auto; left: 20px; }