/* Tawqit watch finder — RTL-first, on the Bundl identity (2026-09-24).
 *
 * Ivory Cream is the ground, Obsidian Black the ink, Deep Mahogany the
 * "boutique" surfaces (intro, help panel), Terracotta and Dusty Blue as
 * small accents. Imagery is the brand's own radial frame and texture, so
 * the page reads as the shop rather than as a form.
 */

:root{
  /* palette — the five Bundl colours, plus tints derived from them */
  --ink:#000000;            /* Obsidian Black */
  --ink-2:#391b16;          /* Deep Mahogany */
  --paper:#fcf2e8;          /* Ivory Cream */
  --paper-2:#fffaf4;        /* raised ivory: option rows */
  --card:#ffffff;           /* product photos are shot on pure white */
  --muted:#6e5f57;          /* warm grey from mahogany; 5.6:1 on ivory */
  --line:rgba(57,27,22,.14);
  --line-2:rgba(57,27,22,.32);
  --accent:#9b4121;         /* Burnt Terracotta */
  --blue:#a6bcba;           /* Dusty Blue */
  --blue-tint:#e5ecea;
  --on-dark:#fcf2e8;
  --on-dark-2:rgba(252,242,232,.72);
  --wa:#25d366;             /* WhatsApp's own green — recognition sells it */

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(57,27,22,.06), 0 18px 36px -18px rgba(57,27,22,.30);
  --maxw:1040px;
  --gutter:16px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"PingARLT","Segoe UI",Tahoma,system-ui,sans-serif;
  /* brand headline faces, from the Adobe Fonts kit in index.html */
  --display:"risala-variable",var(--font);
  --latin:"adobe-garamond-pro",Georgia,serif;
}
@media (min-width:600px){ :root{ --gutter:24px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------ chrome */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:14px;padding-inline:var(--gutter);
  max-width:var(--maxw);width:100%;margin-inline:auto;
  min-height:64px;
}
.brand{
  display:inline-flex;align-items:center;min-height:44px;
  /* the alt-text fallback, if the logo ever fails to load */
  font-size:18px;font-weight:500;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
}
.brand-logo{height:24px;width:auto;display:block}
@media (min-width:600px){ .brand-logo{height:28px} }
.restart{
  background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer;
  min-height:44px;padding-inline:4px;
  transition:color .2s;
}
.restart:hover{color:var(--ink)}

.foot{
  margin-top:auto;padding-block:40px 36px;padding-inline:var(--gutter);
  text-align:center;color:var(--muted);font-size:13px;
  display:flex;gap:6px 14px;justify-content:center;align-items:center;flex-wrap:wrap;
}
.foot-mark{flex:0 0 100%;height:20px;width:auto;object-fit:contain;opacity:.7;margin-bottom:6px}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-underline-offset:4px;text-decoration-color:var(--line-2)}
.foot a:hover{text-decoration-color:currentColor}

/* ------------------------------------------------------------ screens */
#app{
  flex:1;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
}
.screen{display:none}
.screen.is-active{display:block;animation:enter .6s var(--ease) both}
@keyframes enter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ------------------------------------------------------------ intro
 * Mahogany boutique panel. The radial frame (Bundl V3) holds the logo mark
 * at its centre, then fades into solid mahogany where the copy sits.
 * Full-bleed on phones, a rounded panel from tablet up.
 */
.intro{
  position:relative;overflow:hidden;
  margin-inline:calc(var(--gutter) * -1);
  background:var(--ink-2) url(assets/texture-mahogany.webp) center/cover;
  color:var(--on-dark);
  text-align:center;
  isolation:isolate;
}
.dial{
  aspect-ratio:1;width:100%;
  background:url(assets/frame-mahogany-sm.webp) center/cover;
  display:grid;place-items:center;
  -webkit-mask-image:linear-gradient(#000 58%,transparent 92%);
          mask-image:linear-gradient(#000 58%,transparent 92%);
}
/* the frame's inner circle is 54% of the square; the mark sits inside it */
.dial-mark{width:15%;height:auto;animation:settle 1.2s var(--ease) both .1s}
@keyframes settle{
  from{opacity:0;transform:scale(.92) rotate(-8deg)}
  to{opacity:1;transform:none}
}
.intro-copy{
  position:relative;
  margin-top:-26%;
  padding-inline:var(--gutter);padding-block:0 44px;
  max-width:520px;margin-inline:auto;
}
.eyebrow{
  color:var(--blue);font-size:14px;font-weight:500;
  letter-spacing:.04em;margin:0 0 10px;
}
/* Risala Regular for every headline, per the brand guide */
.intro h1,#qtitle,#rtitle,.help h3{font-family:var(--display);font-weight:400}
.intro h1{
  font-size:clamp(30px,8.4vw,50px);line-height:1.35;
  margin:0 0 14px;
}
.lede{color:var(--on-dark-2);font-size:17px;line-height:1.8;margin:0 0 30px}

@media (min-width:600px){
  .intro{margin-inline:0;border-radius:var(--radius);margin-top:8px}
}
@media (min-width:860px){
  .intro{
    display:grid;grid-template-columns:1fr 1fr;align-items:center;
    text-align:start;min-height:520px;
  }
  /* RTL: copy on the reading side (right), dial on the left */
  .intro-copy{order:1;margin:0;padding-block:56px;padding-inline:56px 24px;max-width:none}
  .dial{
    order:2;height:100%;aspect-ratio:auto;
    background-image:url(assets/frame-mahogany.webp);
    /* fade the edge that meets the copy (physical: the copy is on the right in RTL) */
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 34%);
            mask-image:linear-gradient(to left,transparent 0,#000 34%);
  }
  .dial-mark{width:12%}
  .intro .btn-ghost{margin-inline:0}
}

/* ------------------------------------------------------------ buttons */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;min-width:200px;padding-inline:44px;
  background:var(--paper);color:var(--ink);border:0;border-radius:999px;
  font-size:17px;font-weight:500;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s,background .2s;
}
.btn-primary::after{content:"←";font-size:18px;transition:transform .25s var(--ease)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.btn-primary:hover::after{transform:translateX(-4px)}

.btn-ghost{
  display:block;margin:10px auto 0;min-height:44px;padding-inline:8px;
  background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:14px;
  text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:var(--line-2);
  transition:color .2s,text-decoration-color .2s;
}
.btn-ghost:hover{color:var(--ink);text-decoration-color:currentColor}
.intro .btn-ghost{color:var(--on-dark-2);text-decoration-color:rgba(252,242,232,.3)}
.intro .btn-ghost:hover{color:var(--on-dark);text-decoration-color:currentColor}

.btn-back{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;margin-top:22px;padding:0;
  background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer;
  transition:color .2s;
}
.btn-back::before{content:"→";transition:transform .25s var(--ease)}
.btn-back:hover{color:var(--ink)}
.btn-back:hover::before{transform:translateX(3px)}

/* ------------------------------------------------------------ question */
.qwrap{max-width:680px;margin-inline:auto}
.qhead{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:18px 26px;
}
.dots{display:flex;gap:6px}
.dot{
  width:30px;height:3px;border-radius:999px;background:var(--line);
  transition:background .4s var(--ease);
}
.dot.on{background:var(--ink-2)}

/* The live counter — it counts down as the customer narrows. app.js rebuilds
   the <b> on every step, so the tick animation replays with each new number. */
.counter{
  margin:0;color:var(--muted);font-size:13px;line-height:1.2;
  display:flex;align-items:baseline;gap:7px;white-space:nowrap;
}
.counter b{
  font-size:30px;font-weight:300;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  display:inline-block;animation:tick .5s var(--ease) both;
}
@keyframes tick{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

#qtitle{
  font-size:clamp(26px,6.6vw,38px);line-height:1.4;margin:0 0 6px;
}
.qhint{color:var(--muted);font-size:15px;margin:0 0 26px}

.options{display:grid;gap:10px;counter-reset:opt}
@media (min-width:620px){
  .options{grid-template-columns:repeat(2,1fr);gap:12px}
  .options .opt.wide{grid-column:1/-1}
  /* An odd number of answers before the full-width opt-out would orphan one
     card (the budget step has three) — stack those as a single list instead. */
  .options:has(> .opt.wide:nth-child(even)){grid-template-columns:1fr}
}

.opt{
  position:relative;display:flex;align-items:center;gap:14px;
  width:100%;min-height:76px;padding-block:16px;padding-inline:16px 18px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);font-size:17px;text-align:start;cursor:pointer;
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s,background .2s;
  animation:rise .45s var(--ease) both;
}
.opt:hover{border-color:var(--ink-2);background:var(--card);transform:translateY(-2px);box-shadow:var(--shadow)}
.opt:active{transform:translateY(0)}

/* The option glyphs from app.js are emoji; on brand they read as clip-art.
   They're hidden and replaced with dial-style indices — ١ ٢ ٣ — drawn here. */
.opt .ico{
  flex:0 0 40px;height:40px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--ink-2);
  display:grid;place-items:center;
  font-size:0;line-height:1;
  transition:background .2s,color .2s,border-color .2s;
}
.opt .ico::before{
  counter-increment:opt;content:counter(opt,arabic-indic);
  font-size:16px;font-weight:500;
  transform:translateY(2px);   /* PingARLT's Arabic-Indic digits sit high */
}
.opt:hover .ico{background:var(--ink-2);border-color:var(--ink-2);color:var(--on-dark)}

.opt .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt .lab{font-weight:500;line-height:1.5}
.opt .sub{font-size:13px;color:var(--muted);font-weight:400;line-height:1.6}

/* The opt-out answer. A real choice, not a failure — so a quiet Dusty Blue
   ground and a full-dial ring, never a dashed "placeholder" border. */
.opt.neutral{background:var(--blue-tint);border-color:transparent}
.opt.neutral:hover{background:var(--card);border-color:var(--ink-2)}
.opt.neutral .ico{border-color:transparent}
.opt.neutral .ico::before{
  counter-increment:none;content:"";
  width:10px;height:10px;border-radius:50%;transform:none;
  border:1.5px solid currentColor;
  outline:1.5px solid currentColor;outline-offset:3px;
}

/* How many watches this answer leads to — shown before the customer commits.
   The small watch glyph keeps it from reading as a price on the budget step. */
.opt .cnt{
  margin-inline-start:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:5px;
  min-height:30px;padding-inline:10px 11px;border-radius:999px;
  background:rgba(57,27,22,.06);color:var(--ink-2);
  font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;
}
.opt .cnt::before{
  content:"";width:14px;height:14px;flex:0 0 auto;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M9 6.6 9.7 2.5h4.6l.7 4.1M9 17.4l.7 4.1h4.6l.7-4.1M12 9.6V12l1.5 1.1'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M9 6.6 9.7 2.5h4.6l.7 4.1M9 17.4l.7 4.1h4.6l.7-4.1M12 9.6V12l1.5 1.1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.opt:hover .cnt{background:var(--ink-2);color:var(--on-dark)}
.opt .cnt.none{background:transparent;color:var(--accent);font-size:13px;padding-inline:0}
.opt .cnt.none::before{display:none}

/* An answer that would return nothing: dimmed, still clickable. */
.opt.void{opacity:.55;background:transparent}
.opt.void:hover{transform:none;box-shadow:none;border-color:var(--line-2);background:transparent}
.opt.void:hover .ico{background:transparent;color:var(--ink-2);border-color:var(--line-2)}

/* ------------------------------------------------------------ results */
.rhead{padding-block:22px 26px;text-align:center;max-width:640px;margin-inline:auto}
#rtitle{font-size:clamp(28px,6.6vw,40px);line-height:1.35;margin:0 0 6px}
.rsub{color:var(--muted);margin:0 0 16px;font-size:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{
  border:1px solid var(--line-2);border-radius:999px;
  padding:5px 14px;font-size:13px;line-height:1.6;color:var(--ink-2);
}
.jump{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;
  color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;
}
.jump::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--wa);
  box-shadow:0 0 0 4px rgba(37,211,102,.18);
}
.jump:hover{text-decoration:underline;text-underline-offset:5px}

/* Two-up on phones — it's how a watch boutique browses on mobile. */
.grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} }
@media (min-width:980px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} }

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
  animation:rise .5s var(--ease) both;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card .shot{aspect-ratio:1;background:var(--card);display:grid;place-items:center;padding:8%}
.card .shot img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.card:hover .shot img{transform:scale(1.04)}

.card .body{
  flex:1;display:flex;flex-direction:column;gap:8px;
  padding-block:12px 14px;padding-inline:12px;
  border-top:1px solid var(--line);
}
@media (min-width:600px){ .card .body{padding-inline:16px;padding-block:14px 16px} }

/* brand → name → reasons → price: brand is a whisper, price is the anchor */
/* Latin brand names (SEIKO, ORIENT) take Garamond uppercase, the guide's English headline */
.card .bd{
  font-family:var(--latin);font-size:12px;font-weight:400;letter-spacing:.16em;line-height:1.3;
  text-transform:uppercase;color:var(--accent);
}
.card .nm{
  margin:0;font-size:14px;font-weight:500;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (min-width:600px){ .card .nm{font-size:15px} }

.why{display:flex;gap:4px;flex-wrap:wrap}
.why span{
  background:var(--blue-tint);color:var(--ink-2);border-radius:6px;
  padding:2px 8px;font-size:11.5px;line-height:1.7;
}
.card .pr{
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line);
  font-size:17px;font-weight:700;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.card .pr .cur{font-size:12px;font-weight:400;color:var(--muted);margin-inline-start:2px}

/* Near-miss: shown only when nothing matched. It must not pass for a match —
   ivory instead of white, a Dusty Blue outline, and the reason up front. */
.grid:has(> .near)::before{
  content:"بدائل قريبة";grid-column:1/-1;
  display:flex;align-items:center;gap:12px;
  color:var(--muted);font-size:13px;letter-spacing:.04em;
}
.card.near{background:var(--paper-2);border:1px dashed var(--blue)}
.card.near .shot{background:var(--paper-2)}
.card.near .shot img{mix-blend-mode:multiply;opacity:.92}
.card.near .body{border-top-color:rgba(166,188,186,.6)}
.why span.out{
  background:var(--accent);color:var(--on-dark);font-weight:500;
}
.card.near .pr{border-top-color:rgba(166,188,186,.6)}

.btn-more{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;margin:26px auto 0;padding-inline:34px;
  background:transparent;border:1px solid var(--ink-2);border-radius:999px;
  color:var(--ink-2);font-size:15px;font-weight:500;cursor:pointer;
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.btn-more:hover{background:var(--ink-2);color:var(--on-dark)}
.btn-more[hidden]{display:none}

/* ------------------------------------------------------------ help
 * The WhatsApp handoff is the highest-converting element on the page, so it
 * gets the second boutique panel and the brightest button on it.
 */
.help{
  position:relative;overflow:hidden;
  margin-block:48px 8px;margin-inline:calc(var(--gutter) * -1);
  padding-block:44px 34px;padding-inline:var(--gutter);
  background:var(--ink-2) url(assets/texture-mahogany.webp) center/cover;
  color:var(--on-dark);text-align:center;
  scroll-margin-top:16px;
}
@media (min-width:600px){
  .help{margin-inline:0;border-radius:var(--radius);padding-block:56px 40px}
}
.help-mark{display:block;height:34px;width:auto;margin:0 auto 18px;opacity:.9}
.help h3{margin:0 0 8px;font-size:clamp(24px,6vw,32px);line-height:1.4}
.help p{margin:0 auto 26px;max-width:420px;color:var(--on-dark-2);font-size:15px;line-height:1.8}

.btn-wa{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;max-width:380px;min-height:60px;margin-inline:auto;
  padding-inline:22px 26px;
  background:var(--paper);color:var(--ink);border-radius:999px;
  text-decoration:none;font-size:17px;font-weight:500;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.7);
  transition:transform .2s var(--ease),box-shadow .2s;
}
.btn-wa svg{
  flex:0 0 auto;width:36px;height:36px;padding:8px;border-radius:50%;
  background:var(--wa);color:#fff;
}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(0,0,0,.8)}

.help-links{display:flex;justify-content:center;flex-wrap:wrap;gap:0 18px;margin-top:14px}
.help .btn-ghost{margin:0;color:var(--on-dark-2);text-decoration-color:rgba(252,242,232,.3)}
.help .btn-ghost:hover{color:var(--on-dark);text-decoration-color:currentColor}

/* ------------------------------------------------------------ toast */
.toast{
  position:fixed;inset-inline:0;bottom:calc(24px + env(safe-area-inset-bottom));
  margin-inline:auto;width:max-content;max-width:calc(100vw - 2 * var(--gutter));
  background:var(--ink-2);color:var(--on-dark);
  padding:12px 22px;border-radius:999px;font-size:14px;line-height:1.5;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s,transform .25s var(--ease);z-index:50;
  overflow-wrap:anywhere;
}
.toast.show{opacity:1;transform:none}

/* ------------------------------------------------------------ motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;transition:none!important;
  }
}

/* ------------------------------------------------- model codes (added by dev)
   app.js wraps model codes (MTP-1302D-1B, RA-AC39Y) in .code so they can't
   break at a hyphen on a narrow card. Only the first declaration is load-
   bearing — restyle or relocate this block freely. */
.card .nm .code{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}

/* ------------------------------------------------------------ warranty
   app.js appends .warranty after the price ("ضمان ٣ سنوات" / "ضمان سنة",
   counted nouns generated there — never hardcode it). Warranty is buyers'
   first pre-purchase worry, so it gets a seal glyph rather than muted grey. */
.card .warranty{
  display:flex;align-items:center;gap:5px;
  margin-top:-2px;
  font-size:12px;line-height:1.5;color:var(--ink-2);
}
.card .warranty::before{
  content:"";width:13px;height:13px;flex:0 0 auto;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 4.5 5.5v5.8c0 4.6 3.2 8.6 7.5 10.2 4.3-1.6 7.5-5.6 7.5-10.2V5.5z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.3-4.4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 4.5 5.5v5.8c0 4.6 3.2 8.6 7.5 10.2 4.3-1.6 7.5-5.6 7.5-10.2V5.5z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.3-4.4'/%3E%3C/svg%3E") center/contain no-repeat;
}