/* =========================================================
   ALHADDAD SHRED LAB — assets/pricing.css
   Currency picker + local-price bits shared by index.html,
   package.html and start.html. Needs the tokens in styles.css.
   ========================================================= */

/* ---------- Currency picker ---------- */
.asl-cur { margin-top: 18px; }
.asl-cur[hidden] { display: none; }
.asl-cur__label { font-size: .9rem; color: var(--ink-3); line-height: 1.6; margin-bottom: 10px; }
.asl-cur__label strong { color: var(--ink); }
.asl-cur__why { color: var(--ink-4); font-size: .84rem; }
.asl-cur__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.asl-cur__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--pill);
  background: var(--surface); border: 1.5px solid var(--line); color: var(--ink-2);
  font-family: var(--font-body); font-weight: 700; font-size: .84rem; line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s var(--ease-spring);
}
.asl-cur__chip:hover { border-color: var(--orange); color: var(--orange); }
.asl-cur__chip.is-active { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 6px 14px -8px rgba(255,94,21,.55); }
.asl-cur__chip small { font-weight: 600; opacity: .8; font-size: .78em; }

/* Note under the prices when a converted currency is shown */
.asl-curnote { margin-top: 14px; font-size: .84rem; color: var(--ink-4); text-align: center; line-height: 1.6; }
.asl-curnote[hidden] { display: none; }
.asl-curnote--start { text-align: start; max-width: 64ch; }

/* ---------- Home page: centered under the Programs header ---------- */
.asl-cur--center { margin: -14px auto 30px; max-width: 720px; text-align: center; }
.asl-cur--center .asl-cur__chips { justify-content: center; }
@media (max-width: 599px) { .asl-cur--center { margin-bottom: 22px; } }

/* ---------- Package page: on the dark hero banner ---------- */
.asl-cur--dark { margin-top: 16px; }
.asl-cur--dark .asl-cur__label { color: rgba(255,255,255,.85); }
.asl-cur--dark .asl-cur__label strong { color: #fff; }
.asl-cur--dark .asl-cur__why { color: rgba(255,255,255,.62); }
.asl-cur--dark .asl-cur__chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.asl-cur--dark .asl-cur__chip:hover { border-color: var(--orange); color: #fff; background: rgba(255,94,21,.25); }
.asl-cur--dark .asl-cur__chip.is-active { background: var(--orange); border-color: var(--orange); }

/* Currency symbol inside a big amount (package hero + sticky bar) */
.asl-sym { font-size: .5em; font-weight: 700; opacity: .85; letter-spacing: 0; }