/* ============================================================
   Converter pages — shared look
   ------------------------------------------------------------
   Built to the owner's reference layout, with the site's burnt
   orange standing in for the reference's green. The indigo on the
   shekel side is kept from the reference: giving each currency its
   own hue is what lets the two panels be told apart at a glance.

   Cards are white and light. Colour lives in the numbers, the
   badges and the small icons — not in large filled areas — which
   is what keeps a page this dense from feeling heavy.
   ============================================================ */

.cv{
  --ink:#1f2430;
  --muted:#8b93a3;
  --line:#EDEFF3;
  --card:#fff;
  --bg:#F7F8FA;

  --usd:#C2410C;              /* brand orange — the dollar side */
  --usd-2:#EA6A24;
  --usd-soft:#FDF0E7;

  --ils:#5B5BD6;              /* indigo — the shekel side */
  --ils-soft:#EEEEFB;

  --up:#0f7a4a;
  --up-soft:#E7F6EE;
  --down:#b5321f;
  --r:16px;
}

.cv{background:var(--bg);color:var(--ink);
  font:16px/1.6 Assistant,Heebo,Arial,sans-serif;margin:0;padding:0 0 56px}
.cv *{box-sizing:border-box}
.cv-wrap{max-width:1000px;margin:0 auto;padding:0 16px}

/* ── site bar ───────────────────────────────────────────── */
.cv-bar{background:#fff;border-bottom:1px solid var(--line)}
.cv-bar-in{max-width:1000px;margin:0 auto;padding:14px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.cv-brand{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05;
  text-decoration:none;order:3}
.cv-brand b{font:800 22px Heebo,Arial;color:var(--ink);letter-spacing:-.02em}
.cv-brand b i{font-style:normal;color:var(--usd)}
.cv-brand span{font-size:10px;color:var(--muted);letter-spacing:.03em;margin-top:2px}
.cv-links{display:flex;gap:20px;font-size:14.5px;order:2}
.cv-links a{color:#4b5261;text-decoration:none}
.cv-links a:hover{color:var(--usd)}
.cv-icons{display:flex;gap:8px;order:1}
.cv-icons span{width:34px;height:34px;border-radius:50%;background:var(--bg);
  display:grid;place-items:center;color:#6b7280;font-size:14px}
@media (max-width:820px){ .cv-links{display:none} }
@media (max-width:520px){ .cv-icons span:nth-child(n+3){display:none} }

.cv-crumb{font-size:12.5px;color:var(--muted);text-align:center;padding:18px 0 0}
.cv-crumb a{color:var(--muted);text-decoration:none}
.cv-crumb a:hover{color:var(--usd)}
.cv-crumb i{font-style:normal;margin:0 7px;opacity:.55}

.cv-head{text-align:center;padding:14px 0 22px}
.cv-head h1{font:800 clamp(27px,5.6vw,38px)/1.2 Heebo,Arial;margin:0 0 7px;
  letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;gap:10px}
.cv-head h1 .sw{color:var(--usd);font-size:.78em}
.cv-head p{margin:0;color:var(--muted);font-size:15px}

/* ── hero ───────────────────────────────────────────────── */
.cv-hero{position:relative;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 22px;
  box-shadow:0 2px 12px rgba(31,36,48,.04)}
.cv-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:170px;
  background:linear-gradient(180deg,var(--usd-soft) 0,rgba(255,255,255,0) 100%);
  opacity:.55;pointer-events:none}
.cv-hero>*{position:relative}

.cv-stampline{display:flex;justify-content:flex-start}
.cv-stamp{display:inline-flex;align-items:center;gap:6px;background:var(--up-soft);
  color:var(--up);font:600 12px Assistant,Arial;padding:6px 12px;border-radius:8px}

.cv-hero-top{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;
  margin-top:4px}
@media (max-width:640px){ .cv-hero-top{grid-template-columns:1fr;text-align:center} }
.cv-art{width:100%;max-width:230px;height:auto;justify-self:center}

.cv-rate{text-align:center}
.cv-rate .lbl{color:#6b7280;font-size:14.5px}
.cv-rate .num{font:800 clamp(42px,10vw,58px)/1 Heebo,Arial;margin:6px 0 3px;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink)}
.cv-rate .cur{color:var(--usd);font:700 15px Heebo,Arial}
.cv-delta{display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  font:700 12.5px Assistant,Arial;padding:5px 11px;border-radius:8px}
.cv-delta.up{color:var(--up);background:var(--up-soft)}
.cv-delta.down{color:var(--down);background:#FBECEA}

/* ── the two panels ─────────────────────────────────────── */
.cv-calc{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start;
  margin-top:22px}
@media (max-width:640px){ .cv-calc{grid-template-columns:1fr;gap:12px} }

.cv-col{display:flex;flex-direction:column;gap:10px}
.cv-side{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;
  box-shadow:0 1px 5px rgba(31,36,48,.04)}
.cv-side .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cv-side .tag{display:flex;align-items:center;gap:9px;font:600 13.5px Assistant,Arial;color:#4b5261}
.cv-side .sym{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font:800 14px Heebo,Arial}
.cv-ils .sym{background:var(--ils-soft);color:var(--ils)}
.cv-usd .sym{background:var(--usd-soft);color:var(--usd)}
.cv-side .iso{color:var(--muted);font-size:12.5px}
.cv-side .amt{font:800 30px Heebo,Arial;font-variant-numeric:tabular-nums;
  padding:12px 0 4px;width:100%;border:0;background:none;color:var(--ink);outline:0;
  text-align:center}
.cv-side .unit{text-align:center;color:var(--muted);font-size:12.5px}

.cv-mini{display:flex;gap:8px}
.cv-mini button{flex:1;border:0;border-radius:10px;padding:9px 6px;cursor:pointer;
  font:700 13px Assistant,Arial;font-variant-numeric:tabular-nums}
.cv-ils-chips button{background:var(--ils-soft);color:var(--ils)}
.cv-usd-chips button{background:var(--usd-soft);color:var(--usd)}
.cv-mini button:hover{filter:brightness(.96)}

.cv-swap{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  align-self:center;margin-top:40px;background:#fff;color:var(--usd);
  font-size:18px;cursor:pointer;justify-self:center;
  box-shadow:0 2px 8px rgba(31,36,48,.08);transition:transform .2s}
.cv-swap:hover{transform:rotate(180deg)}
@media (max-width:640px){ .cv-swap{margin-top:0} }

.cv-line{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;
  font:700 16px Heebo,Arial;color:var(--usd);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.cv-copy{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:15px;
  line-height:1;padding:2px 4px}
.cv-copy:hover{color:var(--usd)}

.cv-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;justify-content:center}
.cv-chips a{border:1px solid var(--line);background:#fff;color:#4b5261;border-radius:99px;
  padding:6px 14px;font:600 13px Assistant,Arial;text-decoration:none;
  font-variant-numeric:tabular-nums}
.cv-chips a:hover{border-color:var(--usd);color:var(--usd)}

/* ── sections ───────────────────────────────────────────── */
.cv-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px 20px;margin-top:16px;box-shadow:0 2px 12px rgba(31,36,48,.04)}
.cv-sec h2{font:800 17px Heebo,Arial;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.cv-sec h2 .ic{width:30px;height:30px;border-radius:9px;background:var(--usd-soft);
  color:var(--usd);display:grid;place-items:center;font-size:15px;flex:none}
.cv-sec .sub{color:var(--muted);font-size:13.5px;margin:-8px 0 14px}

/* ── table ──────────────────────────────────────────────── */
.cv-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cv-table th{font:600 12.5px Assistant,Arial;color:#6b7280;text-align:center;
  padding:11px 12px;background:var(--bg);white-space:nowrap;border:1px solid var(--line)}
.cv-table td{padding:12px;border:1px solid var(--line);font-size:14.5px;text-align:center;
  color:#4b5261}
.cv-table td:first-child{font-weight:700;color:var(--ink)}
.cv-table tr.on td{background:var(--usd-soft);color:var(--usd);font-weight:700}
.cv-scroll{overflow-x:auto}
.cv-more{display:block;text-align:center;margin-top:14px;color:var(--usd);
  text-decoration:none;font:700 13.5px Assistant,Arial}

/* ── products ───────────────────────────────────────────── */
.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.cv-card{text-decoration:none;color:inherit;display:block;border:1px solid var(--line);
  border-radius:14px;padding:10px;background:#fff;transition:box-shadow .2s}
.cv-card:hover{box-shadow:0 6px 18px rgba(31,36,48,.09)}
.cv-card img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;
  background:#fff;display:block}
.cv-card .t{font-size:12.5px;line-height:1.4;margin:9px 0 5px;color:#4b5261;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cv-card .p{font:800 17px Heebo,Arial;color:var(--usd);text-align:center;
  font-variant-numeric:tabular-nums}
.cv-card .p small{color:var(--muted);font-weight:600;font-size:11.5px;display:block;margin-top:2px}

.cv-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px auto 0;
  width:fit-content;background:var(--usd);color:#fff;border-radius:10px;
  padding:11px 22px;font:700 14px Heebo,Arial;text-decoration:none}
.cv-cta:hover{background:var(--usd-2)}

/* ── faq ────────────────────────────────────────────────── */
.cv-faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:9px}
.cv-faq details:last-child{margin-bottom:0}
.cv-faq summary{cursor:pointer;list-style:none;padding:14px 16px;
  font:700 14.5px Heebo,Arial;display:flex;justify-content:space-between;gap:10px}
.cv-faq summary::-webkit-details-marker{display:none}
.cv-faq summary::after{content:"⌄";color:var(--muted);font-size:17px;transition:transform .2s}
.cv-faq details[open] summary::after{transform:rotate(180deg);color:var(--usd)}
.cv-faq p{margin:0;padding:0 16px 15px;color:#5b6273;font-size:14px;line-height:1.7}

/* ── closing note + trust ───────────────────────────────── */
.cv-note{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r);padding:20px;
  margin-top:16px;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--usd-soft),#fff 60%)}
.cv-note .ic{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--usd);color:#fff;font-size:19px}
.cv-note h3{font:800 15.5px Heebo,Arial;margin:0 0 5px}
.cv-note p{margin:0;color:#5b6273;font-size:13.5px;line-height:1.7}

.cv-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
  margin-top:16px}
.cv-trust>div{display:flex;gap:12px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:15px}
.cv-trust .ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;
  place-items:center;font-size:16px;background:var(--usd-soft);color:var(--usd)}
.cv-trust b{display:block;font:800 13.5px Heebo,Arial;margin-bottom:2px}
.cv-trust span{color:var(--muted);font-size:12.5px;line-height:1.5}

.cv-foot{text-align:center;margin-top:26px;font-size:13.5px;color:var(--muted)}
.cv-foot a{color:var(--usd);text-decoration:none;margin:0 7px;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .cv-swap,.cv-card,.cv-faq summary::after{transition:none}
}


/* ── phones ──────────────────────────────────────────────────────────────
   The desktop sizes were carrying straight down to a 375px screen: the
   artwork filled half the fold before the shopper reached the number they
   came for, and the product grid was falling to one card per row, each a
   full screen tall. Everything below is that page at a size a hand can
   read — the answer first, the decoration small.
   Also guards against a phone set to a larger display or font scale, which
   is what made "everything is huge" show up on a normal-width device. */
@media (max-width:680px){
  .cv-wrap{padding:0 12px}

  .cv-bar-in{padding:10px 12px}
  .cv-brand b{font-size:19px}
  .cv-brand span{font-size:9.5px}
  .cv-icons span{width:30px;height:30px;font-size:13px}

  .cv-crumb{padding:12px 0 0;font-size:11.5px}
  .cv-crumb i{margin:0 5px}

  .cv-head{padding:10px 0 14px}
  .cv-head h1{font-size:24px;gap:8px}
  .cv-head h1 .sw{font-size:.7em}
  .cv-head p{font-size:13.5px}

  .cv-hero{padding:14px 14px 16px;border-radius:14px}
  .cv-hero::before{height:120px}
  .cv-stamp{font-size:11px;padding:5px 10px}

  /* the artwork is a garnish, not the content */
  .cv-hero-top{gap:6px;margin-top:8px}
  .cv-art{max-width:118px}

  .cv-rate .lbl{font-size:13px}
  .cv-rate .num{font-size:38px;margin:2px 0}
  .cv-rate .cur{font-size:13.5px}
  .cv-delta{font-size:11.5px;margin-top:7px}

  .cv-calc{margin-top:14px;gap:10px}
  .cv-side{padding:11px 12px 12px;border-radius:12px}
  .cv-side .tag{font-size:12.5px}
  .cv-side .sym{width:26px;height:26px;font-size:12.5px;border-radius:8px}
  .cv-side .iso{font-size:11.5px}
  .cv-side .amt{font-size:24px;padding:8px 0 2px}
  .cv-side .unit{font-size:11.5px}
  .cv-mini button{padding:7px 4px;font-size:12px}
  .cv-swap{width:38px;height:38px;font-size:16px}

  .cv-line{font-size:14.5px;margin-top:14px}
  .cv-chips{margin-top:12px;gap:6px}
  .cv-chips a{padding:5px 12px;font-size:12.5px}

  .cv-sec{padding:14px 14px 16px;border-radius:14px;margin-top:12px}
  .cv-sec h2{font-size:15.5px;margin-bottom:11px;gap:8px}
  .cv-sec h2 .ic{width:27px;height:27px;font-size:13.5px;border-radius:8px}

  .cv-table th,.cv-table td{padding:9px 6px;font-size:13px}

  /* two per row, always — one card per row makes a phone scroll forever */
  .cv-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cv-card{padding:8px;border-radius:12px}
  .cv-card img{border-radius:9px}
  .cv-card .t{font-size:11.5px;margin:7px 0 4px}
  .cv-card .p{font-size:15px}
  .cv-card .p small{font-size:10.5px}
  .cv-cta{padding:10px 18px;font-size:13px;margin-top:14px}

  .cv-faq summary{padding:12px 13px;font-size:13.5px}
  .cv-faq p{padding:0 13px 13px;font-size:13px}

  .cv-note{padding:15px;gap:11px;border-radius:14px}
  .cv-note .ic{width:36px;height:36px;font-size:16px}
  .cv-note h3{font-size:14px}
  .cv-note p{font-size:12.5px}

  .cv-trust{grid-template-columns:1fr 1fr;gap:9px}
  .cv-trust>div{padding:11px;gap:9px;border-radius:12px}
  .cv-trust .ic{width:31px;height:31px;font-size:14px;border-radius:9px}
  .cv-trust b{font-size:12.5px}
  .cv-trust span{font-size:11px}

  .cv-foot{font-size:12.5px;margin-top:20px}
}

@media (max-width:380px){
  .cv-head h1{font-size:21px}
  .cv-rate .num{font-size:33px}
  .cv-art{max-width:100px}
  .cv-side .amt{font-size:21px}
  .cv-trust{grid-template-columns:1fr}
}


/* ── make the amount look like something you can type in ─────────────────
   The number was styled as plain text, so nobody realised it was editable —
   and those who guessed had to tap, delete, then type. It now reads as a
   field: a bordered box, a caret colour, a focus ring, and a hint under it.
   The tap-to-select-all in the script does the rest. */
.cv-side .amt{
  border:1.5px solid var(--line);border-radius:11px;background:#fff;
  padding:11px 12px;caret-color:var(--usd);cursor:text;
  transition:border-color .15s,box-shadow .15s}
.cv-ils .amt{color:var(--ils)}
.cv-usd .amt{color:var(--usd)}
.cv-side .amt:hover{border-color:#D7DBE3}
.cv-ils .amt:focus{border-color:var(--ils);box-shadow:0 0 0 3px rgba(91,91,214,.14)}
.cv-usd .amt:focus{border-color:var(--usd);box-shadow:0 0 0 3px rgba(194,65,12,.14)}
/* the spinner arrows steal width and nobody uses them on a phone */
.cv-side .amt::-webkit-outer-spin-button,
.cv-side .amt::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cv-side .amt{-moz-appearance:textfield;appearance:textfield}

.cv-hint{display:flex;align-items:center;justify-content:center;gap:5px;
  margin-top:7px;color:var(--muted);font-size:11.5px}
.cv-hint b{color:var(--usd);font-weight:700}

@media (max-width:680px){
  .cv-side .amt{padding:9px 10px}
  .cv-hint{font-size:11px}
}