/* Hammam declaration — customer pages.
   Palette carried over from the ALSHAL shipping form; the action colour is a
   deeper gold so white button text passes contrast on every phone screen. */

@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/plex-arabic-400.2f2e0bcc0409.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/plex-arabic-700.eba83f5de5ef.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --gold: #BFA46A;
  --gold-deep: #8C6D34;
  --gold-deeper: #735829;
  --gold-soft: #EFE4CC;
  --cream: #F3EFE8;
  --paper: #FAF7F1;
  --ink: #3F3526;
  --muted: #766A58;
  --line: #E2D7C4;
  --white: #FFFFFF;
  --danger: #B42318;
  --danger-bg: #FFF4F2;
  --danger-line: #F3C7C0;
  --ok: #2F6B45;
  --ok-bg: #EEF5EF;
  --radius: 14px;
  --font: "Plex Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 5L14.1 7.1L16.9 7.1L16.9 9.9L19 12L16.9 14.1L16.9 16.9L14.1 16.9L12 19L9.9 16.9L7.1 16.9L7.1 14.1L5 12L7.1 9.9L7.1 7.1L9.9 7.1Z' fill='none' stroke='%23BFA46A' stroke-width='1'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.shell {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(80, 63, 34, 0.10);
  padding: 0 20px 24px;
  overflow: hidden;
}

/* The one decorative element: a band of zellige stars along the top edge. */
.card::before {
  content: "";
  display: block;
  height: 14px;
  margin: 0 -20px 0;
  background: var(--paper) var(--tile) repeat-x center / 14px 14px;
  border-bottom: 1px solid var(--line);
}

/* ---------- brand header ---------- */
.brand {
  display: flex;
  justify-content: center;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--gold-soft);
  margin-bottom: 18px;
}
/* close to the first page's logo (min(240px, 66%)) */
.brand-logo { display: block; width: min(220px, 60%); height: auto; }
/* short phones: keep the signature pad and its button on the first screen */
@media (max-height: 720px) {
  .brand { padding: 12px 0 10px; }
  .brand-logo { width: min(160px, 46%); }
}

/* ---------- steps (a real sequence, so numbered) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.steps li::before {
  content: "";
  height: 5px;
  border-radius: 3px;
  background: var(--line);
}
.steps li.done::before { background: var(--gold); }
.steps li.current::before { background: var(--gold-deep); }
.steps li.current { color: var(--ink); font-weight: 700; }

/* ---------- type ---------- */
h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 6.6vw, 30px);
  line-height: 1.35;
  font-weight: 700;
}
.lead {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 17px;
}

/* "Why do we ask?" — opens on tap, links the ministry decision */
.why { margin: -2px 0 4px; }
.why summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.why summary::-webkit-details-marker { display: none; }
.why summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;     /* physical: a down chevron in both directions */
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.why[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.why summary:focus-visible { outline: 3px solid rgba(191, 164, 106, 0.55); outline-offset: 2px; }
.why-body {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: 15.5px;
  line-height: 1.8;
}
.why-body p { margin: 0 0 8px; }
.why-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  color: var(--gold-deep);
  text-underline-offset: 4px;
}
.why-link::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C6D34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") no-repeat center / contain;
}
.why-link:focus-visible { outline: 3px solid rgba(191, 164, 106, 0.55); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .why summary::after { transition: none; } }

/* ---------- forms ---------- */
.field { margin-top: 20px; }
label.field-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: clamp(17px, 4.6vw, 20px);
}
input[type="text"], input[type="tel"], input[type="search"],
input[type="password"], input[type="date"], select {
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: clamp(17px, 4.6vw, 20px);   /* >=16px stops iOS zoom on focus */
  color: var(--ink);
  background: var(--paper);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder { color: #9B9286; opacity: 1; }
input:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 164, 106, 0.25);
  background: var(--white);
}
input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-bg); }
.ltr { direction: ltr; text-align: left; }
[dir="rtl"] .ltr { text-align: right; }
.hint { margin-top: 6px; font-size: 15px; color: var(--muted); }
.field-error { margin-top: 6px; font-size: 15px; color: var(--danger); font-weight: 700; }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 60px;
  padding: 14px 18px;
  border: none;
  border-radius: var(--radius);
  background: var(--gold-deep);
  color: var(--white);
  font: inherit;
  font-size: clamp(18px, 5vw, 21px);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--gold-deeper); }
.btn:disabled { background: #B8B0A3; cursor: not-allowed; }
.btn:focus-visible, .lang-btn:focus-visible,
.back-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn-quiet {
  background: var(--white);
  color: var(--gold-deep);
  border: 1px solid var(--gold);
}
.btn-quiet:hover { background: var(--paper); }
.actions { margin-top: 26px; display: grid; gap: 12px; }
.back-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  text-decoration: none;
  padding: 6px 2px;
}

/* ---------- notices ---------- */
.notice {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15.5px;
  line-height: 1.7;
}
.notice-privacy {
  background: var(--paper);
  color: var(--muted);
  border-inline-start: 3px solid var(--gold);
}
.notice-info {
  background: var(--paper);
  color: var(--gold-deeper);
  border: 1px solid var(--gold-soft);
  font-weight: 700;
}
.notice-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-line);
  font-weight: 700;
}
[hidden] { display: none !important; }

/* ---------- language page ---------- */
.welcome { text-align: center; padding: 18px 0 6px; }
.welcome-logo { display: block; width: min(240px, 66%); height: auto; margin: 10px auto 30px; }
.lang-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  background: var(--paper);
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}
.lang-btn:active { background: var(--gold-soft); }

/* ---------- declaration ---------- */
.clauses {
  counter-reset: clause;
  list-style: none;
  margin: 8px 0 0;
  padding: 18px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.clauses li {
  counter-increment: clause;
  position: relative;
  padding-inline-start: 40px;
  margin-bottom: 16px;
  font-size: 17.5px;
  line-height: 1.85;
}
.clauses li:last-child { margin-bottom: 0; }
.clauses li:only-child { padding-inline-start: 0; }
.clauses li:only-child::before { content: none; }
.clauses li::before {
  content: counter(clause);
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  background: var(--white);
}
.agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
}
.agree input {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 1px 0 0;
  accent-color: var(--gold-deep);
}
.agree.invalid { border-color: var(--danger); background: var(--danger-bg); }

/* ---------- signature ---------- */
.signer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
  font-size: 15px;
  color: var(--muted);
}
.signer strong { color: var(--ink); }
.pad {
  position: relative;
  height: 230px;
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.pad canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
/* signing line, like the foot of a paper form */
.pad::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 52px;
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
.pad-x {
  position: absolute;
  bottom: 56px;
  inset-inline-start: 24px;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}
.pad-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
  color: #B3A895;
  font-size: 18px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pad.has-ink .pad-hint { opacity: 0; }
.pad.invalid { border-color: var(--danger); }
/* "Sign and send" first (the right side in Arabic) and wide; "clear" small at the other end —
   always side by side, so the main button is never pushed below the fold */
.pad-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }
.pad-row .btn { margin: 0; white-space: nowrap; }
.pad-row .btn-quiet { padding-inline: 20px; }
.final-note { margin-top: 12px; font-size: 15px; color: var(--muted); text-align: center; }

/* ---------- signature page: compact, so the pad and "sign and send" fit on one phone screen ---------- */
.page-sign .brand { padding: 10px 0 8px; margin-bottom: 12px; }
.page-sign .brand-logo { width: min(140px, 40%); }
.page-sign .steps { margin-bottom: 12px; }
.page-sign .steps li { font-size: 13px; gap: 4px; }
.page-sign h1 { font-size: 22px; margin-bottom: 2px; }
.page-sign .lead { font-size: 15px; line-height: 1.5; }
.page-sign .signer { margin: 8px 0 6px; font-size: 14px; }
.page-sign .pad { height: clamp(150px, 30vh, 230px); height: clamp(150px, 30svh, 230px); }   /* svh: stable while browser bars move */
.page-sign .pad-hint { font-size: 16px; }
.page-sign .pad-row { margin-top: 10px; }
.page-sign .pad-row .btn { min-height: 50px; padding-block: 8px; }
.page-sign .pad-row .btn-quiet { font-size: 16px; padding-inline: 16px; }
.page-sign .final-note { margin-top: 8px; font-size: 13.5px; }
.page-sign .back-link { margin-top: 6px; font-size: 15px; }
.page-sign .notice { margin-top: 8px; }
@media (max-height: 600px) {
  .page-sign .brand-logo { width: min(110px, 32%); }
  .page-sign .steps li { font-size: 12px; }
}

/* ---------- result pages ---------- */
.result { text-align: center; padding: 10px 0 4px; }
.result-mark { width: 88px; height: 88px; margin: 6px auto 16px; display: block; }
.result-mark .star { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 1.6; }
.result-mark .tick { fill: none; stroke: var(--ok); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.result-mark.info .star { fill: var(--paper); stroke: var(--gold); }
.result-mark.info .dot { fill: var(--gold-deep); }
.result h1 { font-size: clamp(22px, 6vw, 27px); }
.number-label { margin: 18px 0 6px; color: var(--muted); font-size: 16px; }
.number-box {
  direction: ltr;
  display: block;
  margin: 0 auto;
  padding: 18px 10px;
  border: 1px dashed var(--gold);
  border-radius: 16px;
  background: var(--paper);
  color: var(--gold-deeper);
  font-size: clamp(26px, 8vw, 36px);
  font-weight: 700;
  letter-spacing: 0.5px;
  word-break: break-word;
}
.result .lead { margin-top: 16px; font-size: 18px; }

/* success mark draws itself once — the only non-user motion on these pages */
@media (prefers-reduced-motion: no-preference) {
  .result-mark .tick {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: draw 0.6s 0.2s ease-out forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

@media (max-width: 360px) {
  body { font-size: 17px; }
  .card { padding: 0 14px 20px; }
  .card::before { margin: 0 -14px; }
  .pad { height: 200px; }
}

@media (min-width: 600px) {
  body { padding-top: 32px; }
  .card { padding: 0 32px 32px; }
  .card::before { margin: 0 -32px; }
  .pad { height: 260px; }
}

@media (hover: none) {
  .btn:hover { background: var(--gold-deep); }
  .btn-quiet:hover { background: var(--white); }
}