/* ==========================================================================
   Gold Currency — Design tokens
   Vault / ledger aesthetic: warm ink, antique gold, parchment. No neon,
   no card-soup, no gradients-as-decoration.
   Base direction is LTR (English default); [dir="rtl"] overrides below
   flip the layout for Persian/Arabic without duplicating the stylesheet.
   ========================================================================== */
:root{
  --ink:        #12100D;
  --ink-2:      #1C1815;
  --ink-3:      #26211C;
  --gold:       #B8912F;
  --gold-bright:#D4AF37;
  --bronze:     #6B5527;
  --parchment:  #F6F1E7;
  --parchment-2:#EDE4D0;
  --text-dark:  #1B1712;
  --text-dim:   #5A5142;
  --text-light: #F6F1E7;
  --text-light-dim: #C9BFA9;
  --line-light: rgba(27,23,18,0.14);
  --line-dark:  rgba(212,175,55,0.22);
  --up:         #4E7A51;
  --down:       #A34B3C;

  --font: "Inter", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;

  --container: 1180px;
  --radius: 4px;
  --speed: 220ms;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--parchment);
  color: var(--text-dark);
  direction: ltr;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:800; line-height:1.15; }
p{ margin:0; line-height:1.75; }

:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------- RTL overrides ---------------- */
html[dir="rtl"] body{ direction: rtl; text-align: right; }
html[dir="rtl"] .ledger__row{ direction: rtl; }
html[dir="rtl"] .nav__burger,
html[dir="rtl"] .drawer__close{ direction: rtl; }

/* ---------------- Top bar (price ticker) ---------------- */
.ticker{
  background: var(--ink);
  color: var(--text-light-dim);
  font-size: 13px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
}
.ticker__track{
  display:flex;
  gap: 40px;
  padding: 8px 0;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
  width: max-content;
}
.ticker__item{ display:flex; align-items:center; gap:8px; }
.ticker__item b{ color: var(--text-light); font-weight:700; }
.ticker__item.up{ color: var(--up); }
.ticker__item.down{ color: var(--down); }
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
html[dir="rtl"] .ticker__track{ animation-direction: reverse; }

/* ---------------- Header / nav ---------------- */
header.site{
  position: sticky; top:0; z-index: 40;
  background: rgba(18,16,13,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-dark);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px;
  max-width: var(--container);
  margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{
  /* Registered trademark: "Gold Currency & Design" (CIPO app. no. 2399355) */
  height:34px; width:auto; display:block; flex:none;
}
.brand__name{ color: var(--text-light); font-weight:800; font-size:18px; letter-spacing:.2px; }
footer .brand__name{ color: var(--text-light); }

.nav__links{ display:flex; gap:22px; }
.nav__links a{
  color: var(--text-light-dim);
  font-size:15px; font-weight:600;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--speed), border-color var(--speed);
}
.nav__links a:hover, .nav__links a.active{
  color: var(--gold-bright);
  border-color: var(--gold);
}

.nav__actions{ display:flex; align-items:center; gap:14px; }
.lang-select{
  background: transparent;
  color: var(--text-light-dim);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-weight:700; font-size:14.5px;
  border: 1px solid transparent;
  transition: transform var(--speed), background var(--speed), border-color var(--speed), color var(--speed);
}
.btn--gold{
  background: var(--gold-bright);
  color: var(--ink);
}
.btn--gold:hover{ background:#e6c04a; }
.btn--ghost{
  border-color: var(--line-dark);
  color: var(--text-light);
}
.btn--ghost:hover{ border-color: var(--gold); color: var(--gold-bright); }
.btn--dark{
  background: var(--ink);
  color: var(--text-light);
}
.btn--dark:hover{ background: var(--ink-2); }

.nav__burger{
  display:none;
  width: 40px; height:40px;
  border:1px solid var(--line-dark);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-light);
  align-items:center; justify-content:center;
  font-size: 18px;
}

/* mobile drawer */
.drawer{
  position: fixed; inset:0;
  background: var(--ink);
  z-index: 60;
  display:flex; flex-direction:column;
  padding: 22px 28px;
  transform: translateY(-100%);
  transition: transform var(--speed) ease;
}
.drawer.open{ transform: translateY(0); }
.drawer__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 40px; }
.drawer__close{ background:none; border:none; color:var(--text-light); font-size:22px; }
.drawer a{
  color: var(--text-light);
  font-size: 22px;
  font-weight:800;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}
.drawer__cta{ margin-top: 30px; }

/* ---------------- Hero ---------------- */
.hero{
  background: var(--ink);
  color: var(--text-light);
  position: relative;
  overflow:hidden;
  border-bottom: 1px solid var(--line-dark);
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items:center;
  padding-top: 84px;
  padding-bottom: 84px;
}
.hero__eyebrow{
  color: var(--gold-bright);
  font-size: 15px;
  font-weight:700;
  margin-bottom: 18px;
}
.hero h1{
  font-size: clamp(34px, 4.6vw, 58px);
  max-width: 15ch;
}
.hero p.lead{
  margin-top: 22px;
  font-size: 18px;
  color: var(--text-light-dim);
  max-width: 46ch;
}
.hero__ctas{ display:flex; gap:16px; margin-top:34px; }
.hero__stats{
  display:flex; gap:34px; margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.stat b{ display:block; font-size: 26px; color: var(--gold-bright); font-weight:800; }
.stat span{ font-size: 13.5px; color: var(--text-light-dim); }

.hero__art{ position:relative; }
.hero__art svg{ width:100%; height:auto; }

/* ---------------- Section shells ---------------- */
section{ padding: 96px 0; }
section.alt{ background: var(--parchment-2); }
section.dark{ background: var(--ink); color: var(--text-light); }
.section__head{ max-width: 620px; margin-bottom: 54px; }
.section__head.center{ margin-inline:auto; text-align:center; }
.section__kicker{
  color: var(--bronze);
  font-weight:700; font-size:14.5px; margin-bottom: 10px;
}
.dark .section__kicker{ color: var(--gold-bright); }
.section__head h2{ font-size: clamp(26px, 3vw, 38px); }
.section__head p{ margin-top:14px; color: var(--text-dim); font-size:16.5px; }
.dark .section__head p{ color: var(--text-light-dim); }

/* ---------------- About ---------------- */
.about__grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items:center;
}
.about__art{
  background: var(--ink);
  border-radius: var(--radius);
  padding: 30px;
}
.about__art svg{ width:100%; height:auto; }
.about__points{ margin-top: 28px; display:grid; gap:18px; }
.about__point{ display:flex; gap:14px; }
.about__point .ico{
  flex:none; width:38px; height:38px;
  border:1px solid var(--bronze);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--bronze);
}
.about__point h4{ font-size:16px; margin-bottom:4px; }
.about__point p{ color: var(--text-dim); font-size:15px; }

/* ---------------- Services (ledger list, not cards) ---------------- */
.ledger{ border-top: 1px solid var(--line-light); }
.ledger__row{
  display:grid;
  grid-template-columns: 70px 1fr 1.3fr;
  gap: 34px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line-light);
  align-items:start;
}
.ledger__num{
  font-family: Georgia, serif;
  font-size: 28px;
  color: var(--gold);
  font-weight:700;
}
.ledger__row h3{ font-size:21px; margin-bottom:4px; }
.ledger__row .tag{ color: var(--bronze); font-size: 13.5px; font-weight:700; }
.ledger__row p{ color: var(--text-dim); font-size:15.5px; }

/* ---------------- Dashboard preview ---------------- */
.dash{
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  overflow:hidden;
}
.dash__bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--text-light-dim);
  font-size: 13px;
}
.dash__dots{ display:flex; gap:6px; }
.dash__dots span{ width:9px; height:9px; border-radius:50%; background: var(--line-dark); }
.dash__body{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
}
.dash__balance{ padding: 30px; border-right: 1px solid var(--line-dark); }
html[dir="rtl"] .dash__balance{ border-right:none; border-left: 1px solid var(--line-dark); }
.dash__balance .amount{ font-size: 40px; font-weight:800; color: var(--text-light); }
.dash__balance .amount small{ font-size:16px; color: var(--gold-bright); font-weight:700; margin-inline-end:6px; }
.dash__balance .sub{ color: var(--text-light-dim); font-size:14px; margin-top:6px; }
.dash__chart{ margin-top: 22px; }
.dash__tx{ padding: 30px; }
.dash__tx h4{ color: var(--text-light-dim); font-size:13px; font-weight:700; margin-bottom:16px; }
.tx__row{
  display:flex; justify-content:space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 14px;
  color: var(--text-light-dim);
}
.tx__row b{ color: var(--text-light); }
.tx__row .amt.up{ color: var(--up); }
.tx__row .amt.down{ color: var(--down); }

/* ---------------- Security strip ---------------- */
.security{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 28px;
}
.security__item{ text-align:center; padding: 0 8px; }
.security__item .ico{
  width:50px;height:50px; margin:0 auto 14px;
  border:1px solid var(--bronze); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--bronze);
}
.security__item h4{ font-size:15.5px; margin-bottom:6px; }
.security__item p{ font-size:13.5px; color: var(--text-dim); }

.disclosure{
  margin-top: 40px;
  padding: 18px 22px;
  border: 1px dashed var(--bronze);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text-dim);
  background: rgba(107,85,39,0.06);
}

/* ---------------- Contact ---------------- */
.contact__grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
}
.contact__info{ display:grid; gap:22px; align-content:start; }
.contact__info .row{ display:flex; gap:14px; }
.contact__info .ico{
  flex:none; width:38px; height:38px;
  border:1px solid var(--line-dark);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-bright);
}
.contact__info h4{ font-size:15px; margin-bottom:2px; }
.contact__info p{ color: var(--text-light-dim); font-size:14.5px; }

form.contact-form{ display:grid; gap:16px; }
.field{ display:grid; gap:8px; }
.field label{ font-size:14px; font-weight:700; color: var(--text-light-dim); }
.field input, .field textarea{
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 13px 14px;
  color: var(--text-light);
  font-family: inherit;
  font-size: 15px;
}
.field input:focus, .field textarea:focus{ border-color: var(--gold); }
.field textarea{ resize: vertical; min-height: 120px; }
.form__msg{ font-size:14px; min-height: 20px; }
.form__msg.ok{ color: #7fbb82; }
.form__msg.err{ color: #d98070; }

/* ---------------- Footer ---------------- */
footer.site{
  background: var(--ink);
  color: var(--text-light-dim);
  border-top: 1px solid var(--line-dark);
  padding: 60px 0 26px;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer__brand p{ margin-top:14px; font-size:14px; max-width:32ch; color: var(--text-light-dim); }
.footer__col h5{ color: var(--text-light); font-size:14.5px; margin-bottom:16px; }
.footer__col ul{ display:grid; gap:10px; }
.footer__col a{ font-size:14px; transition: color var(--speed); }
.footer__col a:hover{ color: var(--gold-bright); }
.footer__social{ display:flex; gap:12px; margin-top:18px; }
.footer__social a{
  width:34px; height:34px; border:1px solid var(--line-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.footer__bottom{
  border-top: 1px solid var(--line-dark);
  padding-top: 22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size: 13px;
}

/* ---------------- Utility / install prompt ---------------- */
.install-toast{
  position: fixed; bottom: 20px; inset-inline-start: 20px;
  background: var(--ink); color: var(--text-light);
  border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 14px 16px;
  display:flex; align-items:center; gap:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transform: translateY(140%);
  transition: transform var(--speed) ease;
  z-index: 50;
  max-width: 320px;
  font-size: 14px;
}
.install-toast.show{ transform: translateY(0); }
.install-toast button{
  background:none; border:none; color: var(--text-light-dim); font-size:18px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .nav__links, .nav__actions .btn--ghost{ display:none; }
  .nav__burger{ display:flex; }
  .hero .wrap{ grid-template-columns: 1fr; padding-top:56px; padding-bottom:56px; }
  .hero__art{ order:-1; max-width: 320px; margin: 0 auto 10px; }
  .about__grid, .contact__grid{ grid-template-columns: 1fr; }
  .about__art{ order:-1; }
  .ledger__row{ grid-template-columns: 44px 1fr; }
  .ledger__row > p{ grid-column: 1 / -1; }
  .security{ grid-template-columns: repeat(2,1fr); row-gap: 30px; }
  .dash__body{ grid-template-columns: 1fr; }
  .dash__balance{ border-right:none; border-bottom: 1px solid var(--line-dark); }
  html[dir="rtl"] .dash__balance{ border-left:none; border-bottom: 1px solid var(--line-dark); }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  section{ padding: 64px 0; }
}
@media (max-width: 560px){
  .wrap{ padding: 0 20px; }
  .hero__ctas{ flex-direction:column; }
  .hero__stats{ flex-wrap:wrap; gap:22px; }
  .footer__grid{ grid-template-columns: 1fr; }
  .security{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Multi-page additions — page header, breadcrumb, cards, tables, FAQ,
   dashboard extras, live-price badge, request-access box.
   Reuses the same design tokens; no new colors introduced.
   ========================================================================== */

/* ---------------- Sub-page header banner ---------------- */
.page-header{
  background: var(--ink);
  color: var(--text-light);
  border-bottom: 1px solid var(--line-dark);
  padding: 56px 0 46px;
}
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size: 13.5px;
  color: var(--text-light-dim);
  margin-bottom: 18px;
}
.breadcrumb a{ color: var(--text-light-dim); transition: color var(--speed); }
.breadcrumb a:hover{ color: var(--gold-bright); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color: var(--gold-bright); }
.page-header h1{ font-size: clamp(28px, 3.6vw, 42px); max-width: 22ch; }
.page-header p.lead{ margin-top:14px; color: var(--text-light-dim); font-size:16.5px; max-width:56ch; }

/* Active nav link set per-page (no scroll-spy needed on subpages) */
.nav__links a[aria-current="page"]{ color: var(--gold-bright); border-color: var(--gold); }
.drawer a[aria-current="page"]{ color: var(--gold-bright); }

/* ---------------- Product / feature cards ---------------- */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card{
  background: var(--parchment);
  border: 1px solid var(--line-light);
  border-radius: 6px;
  padding: 30px 26px;
}
section.dark .card, section.alt .card{ background: rgba(255,255,255,0.02); }
section.dark .card{ border-color: var(--line-dark); }
.card .ico{
  width:44px; height:44px; margin-bottom:18px;
  border:1px solid var(--bronze); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--bronze);
}
.card h3{ font-size:19px; margin-bottom:8px; }
.card p{ color: var(--text-dim); font-size:15px; }
section.dark .card p{ color: var(--text-light-dim); }
.card .price{ margin-top:16px; font-family:Georgia,serif; font-size:22px; color:var(--gold); font-weight:700; }

/* ---------------- Pricing / fee table ---------------- */
.rate-table{ width:100%; border-collapse:collapse; margin-top: 10px; }
.rate-table th, .rate-table td{
  text-align: left; padding: 16px 18px;
  border-bottom: 1px solid var(--line-light);
  font-size: 15px;
}
html[dir="rtl"] .rate-table th, html[dir="rtl"] .rate-table td{ text-align: right; }
.rate-table th{
  color: var(--bronze); font-size:13px; text-transform:uppercase; letter-spacing:.04em;
  font-weight:700;
}
.rate-table td b{ color: var(--text-dark); }
section.dark .rate-table th, section.dark .rate-table td{ border-color: var(--line-dark); }
section.dark .rate-table td b{ color: var(--text-light); }
.table-wrap{ overflow-x:auto; border:1px solid var(--line-light); border-radius:6px; padding:6px 18px; }
section.dark .table-wrap{ border-color: var(--line-dark); }

/* ---------------- FAQ accordion ---------------- */
.faq{ border-top: 1px solid var(--line-light); }
.faq__item{ border-bottom: 1px solid var(--line-light); }
.faq__q{
  width:100%; text-align:left; background:none; border:none;
  padding: 22px 4px; font-size:16.5px; font-weight:700; color: inherit;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
html[dir="rtl"] .faq__q{ text-align:right; }
.faq__q .plus{ flex:none; font-size:20px; color: var(--gold); transition: transform var(--speed); }
.faq__item.open .faq__q .plus{ transform: rotate(45deg); }
.faq__a{
  max-height:0; overflow:hidden; transition: max-height var(--speed) ease;
  color: var(--text-dim); font-size:15px; padding: 0 4px;
}
.faq__item.open .faq__a{ padding-bottom: 22px; }

/* ---------------- Glossary ---------------- */
.glossary{ display:grid; gap:22px; grid-template-columns: repeat(2,1fr); }
.glossary dt{ font-weight:700; font-size:15.5px; margin-bottom:4px; }
.glossary dd{ margin:0; color: var(--text-dim); font-size:14.5px; }

/* ---------------- Live price badge ---------------- */
.live-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color: var(--text-light-dim);
}
.live-badge .dot{
  width:7px; height:7px; border-radius:50%; background: var(--up);
  box-shadow: 0 0 0 0 rgba(78,122,81,0.6);
  animation: pulse 1.8s infinite;
}
.live-badge.stale .dot{ background: var(--bronze); animation:none; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(78,122,81,0.55); }
  70%{ box-shadow: 0 0 0 7px rgba(78,122,81,0); }
  100%{ box-shadow: 0 0 0 0 rgba(78,122,81,0); }
}

/* ---------------- Dashboard extras ---------------- */
.dash__holdings{ display:grid; gap:14px; margin-top:22px; }
.holding-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 0; border-bottom:1px solid var(--line-dark); font-size:14px;
  color: var(--text-light-dim);
}
.holding-row b{ color: var(--text-light); }

.request-access{
  margin-top: 34px; padding: 26px 28px; border-radius:6px;
  background: rgba(212,175,55,0.06); border:1px solid var(--line-dark);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.request-access p{ color: var(--text-light-dim); font-size:14.5px; max-width:44ch; }
.request-access h4{ font-size:17px; margin-bottom:6px; }

/* ---------------- Contact page extras ---------------- */
.contact-map{
  margin-top: 26px; border:1px dashed var(--line-dark); border-radius:6px;
  padding: 22px; font-size:13.5px; color: var(--text-light-dim);
  background: rgba(255,255,255,0.02);
}

/* ---------------- Section CTA banner ---------------- */
.cta-banner{
  background: var(--ink); color: var(--text-light);
  border-radius: 8px; padding: 48px 44px;
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  border: 1px solid var(--line-dark);
}
.cta-banner h3{ font-size:24px; max-width:26ch; }
.cta-banner p{ color: var(--text-light-dim); margin-top:8px; max-width:44ch; }

/* ---------------- Responsive: multi-page additions ---------------- */
@media (max-width: 980px){
  .cards{ grid-template-columns: 1fr 1fr; }
  .glossary{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
  .request-access, .cta-banner{ flex-direction:column; align-items:flex-start; }
}

/* Seven menu items need the phone menu a little earlier than the old five (1240px: below that the full menu cannot keep a clean gap between logo, menu and buttons). */
@media (max-width: 1240px){
  .nav__links, .nav__actions .btn--ghost{ display:none; }
  .nav__burger{ display:flex; }
}

.ticker .gc-price-age{ opacity: .85; font-size: .92em; }

/* ---- Longer menu labels in other languages: labels stay on one line; app.js (initNavFit) adds
        nav--tight first (drops the Contact Us button, smaller labels) and nav--compact (phone menu) only if still needed. ---- */
.nav__links a{ white-space: nowrap; }
header.site .nav.nav--tight .nav__actions .btn--ghost{ display: none; }
header.site .nav.nav--tight .nav__links{ gap: 14px; }
header.site .nav.nav--tight .nav__links a{ font-size: 14px; }
header.site .nav.nav--compact .nav__links,
header.site .nav.nav--compact .nav__actions .btn--ghost{ display: none; }
header.site .nav.nav--compact .nav__burger{ display: flex; }

/* ---- Phones: the header actions must fit (Sign In stays available in the phone menu), and form fields are
        16px so iOS Safari does not zoom the page in when a field is focused. ---- */
@media (max-width: 520px){
  .nav__actions .btn--gold{ display: none; }
}
@media (max-width: 768px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), select, textarea, .lang-select{ font-size: 16px !important; }
}

/* ---- Touch targets: the phone-menu buttons are at least 44px and never squeezed by the header. ---- */
@media (max-width: 980px){
  .nav__burger{ flex: none; width: 44px; height: 44px; }
  .drawer__close{ min-width: 44px; min-height: 44px; }
}

/* ---- The language menu looks the same in every browser (Safari draws its own white select otherwise),
        and the phone header keeps logo, language menu and menu button on one line without overlap. ---- */
.lang-select{
  -webkit-appearance: none; appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b9ab84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px auto;
  padding-inline-end: 28px;
}
html[dir="rtl"] .lang-select{ background-position: left 9px center; }
.lang-select option{ background: #1b1710; color: #f3ead2; }
@media (max-width: 520px){
  .nav{ padding: 12px 16px; gap: 8px; }
  .brand{ min-width: 0; gap: 8px; }
  .brand__name{ font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__actions{ gap: 8px; }
  .lang-select{ max-width: 118px; }
}
@media (max-width: 380px){
  .brand__name{ display: none; }
}

/* ==========================================================================
   Header and price bar: clean spacing at every width, and a scrolling price bar that never shows a repeat.
   (Shared by every page; the markup is unchanged.)
   ========================================================================== */

/* Header: the browser keeps a real gap between logo, menu and buttons (nothing may touch). If the labels of a
   language do not fit with that gap, app.js initNavFit drops the extra Contact Us button first, then switches to the phone menu. */
header.site .nav{ gap: 16px; max-width: 1320px; }
header.site .nav__actions{ gap: 12px; }
.nav__actions .btn, .brand__name{ white-space: nowrap; }
@media (min-width: 1241px){
  .brand, .nav__actions{ flex: none; }
}
/* Below 641px the header keeps logo, language menu and menu button; Sign In is in the phone menu. */
@media (max-width: 640px){
  .nav__actions .btn--gold{ display: none; }
}
/* 1241-1400px: the menu already has a Contact link, so the extra Contact Us button waits for a wider screen. */
@media (min-width: 1241px) and (max-width: 1400px){
  header.site .nav{ gap: 24px; }
  header.site .nav__actions .btn--ghost{ display: none; }
}
@media (min-width: 1401px){
  header.site .nav{ gap: 32px; }
  header.site .nav__actions{ gap: 14px; }
}
@media (max-width: 520px){
  header.site .nav{ gap: 12px; }
  header.site .nav__actions{ gap: 12px; }
}

/* Price bar: it scrolls in a seamless loop made of two identical sets (app.js initTicker builds them). Each set is at
   least one screen PLUS 300px wide, and its items are spread evenly, so one item can never be on screen twice: the bar
   moves, but nothing repeats. Before the script runs (or without it) one static copy is shown. */
.ticker__track > .ticker__item:nth-child(n+5){ display: none; }
.ticker:not(.ticker--ready) .ticker__track{ animation: none; }
.ticker--ready .ticker__track{ gap: 0; animation-duration: var(--ticker-dur, 40s); }
.ticker__set{ display: flex; flex: none; align-items: center; justify-content: space-around; gap: 40px; min-width: calc(100vw + 300px); box-sizing: border-box; }
/* Right-to-left languages: the track starts at the right edge and grows to the left, so the loop moves to the right by one set (0 -> 50%). */
@keyframes ticker-rtl{
  from{ transform: translateX(0); }
  to{ transform: translateX(50%); }
}
html[dir="rtl"] .ticker--ready .ticker__track{ animation-name: ticker-rtl; animation-direction: normal; }
@media (prefers-reduced-motion: reduce){
  .ticker__set + .ticker__set{ display: none; }
  .ticker__track{ animation: none; transform: none; }
  .ticker__set{ min-width: 100vw; }
  .ticker{ overflow-x: auto; scrollbar-width: none; }
  .ticker::-webkit-scrollbar{ display: none; }
}

/* ---------------- Share button (Part 1) ---------------- */
.nav__share{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(212,175,55,.35);background:transparent;color:var(--gold-bright,#D4AF37);cursor:pointer;transition:background .15s ease,border-color .15s ease}
.nav__share:hover{background:rgba(212,175,55,.12);border-color:rgba(212,175,55,.6)}
.share-overlay{position:fixed;inset:0;background:rgba(18,16,13,.55);z-index:9998;display:none}
.share-overlay.open{display:block}
.share-popover{position:fixed;z-index:9999;background:var(--ink,#12100D);border:1px solid rgba(212,175,55,.3);border-radius:10px;padding:16px;width:260px;box-shadow:0 12px 32px rgba(0,0,0,.4);display:none}
.share-popover.open{display:block}
.share-popover h4{margin:0 0 12px;font-size:14px;color:var(--parchment,#F6F1E7)}
.share-popover__row{display:flex;flex-direction:column;gap:8px}
.share-popover__row a,.share-popover__row button{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;border:1px solid rgba(246,241,231,.15);background:rgba(246,241,231,.04);color:var(--parchment,#F6F1E7);text-decoration:none;font-size:13px;cursor:pointer;text-align:left;font-family:inherit}
.share-popover__row a:hover,.share-popover__row button:hover{border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.08)}
.share-popover__close{position:absolute;top:10px;right:10px;background:none;border:none;color:rgba(246,241,231,.6);cursor:pointer;font-size:16px;line-height:1}