/* ==========================================================================
   Cookie consent — the bar and the settings dialog.

   Loaded after site.css and takes every colour from its tokens, so dark mode
   needs no block of its own here: --surface, --ink and the rest are already
   swapped by the time these rules read them.

   Both accept and reject are the same size, the same shape and the same
   weight. That is not a style preference — a "reject" that is quieter than
   "accept" is the specific pattern regulators treat as invalid consent.
   ========================================================================== */

.consent-bar{
  position:fixed;z-index:70;
  inset-inline:0;bottom:0;
  background:var(--sticky-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -18px 40px -28px rgba(38,20,27,.45);
  transform:translateY(110%);
  transition:transform .32s var(--ease);
}
.consent-bar.is-shown{transform:none}
@media (prefers-reduced-motion:reduce){
  .consent-bar{transition:none}
}

.consent-bar-inner{
  max-width:1120px;margin:0 auto;
  padding:12px clamp(20px,4vw,44px) calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:clamp(14px,3vw,32px);
  flex-wrap:wrap;
}
/* Wide enough that the shortened copy lands on two lines at a normal desktop
   width instead of three. Still `1 1`, so on a phone it gives the whole width
   back rather than holding a column the screen does not have. */
.consent-bar-copy{flex:1 1 420px;min-width:0}
.consent-bar-title{
  font-family:'Rubik',sans-serif;font-weight:800;
  font-size:1.06rem;line-height:1.25;margin-bottom:2px;
}
/* A clear step below the title rather than a whisker below it. The bar is read
   at a glance, and a body that matches its own heading gives the eye nowhere
   to start. */
.consent-bar-body{font-size:.9375rem;line-height:1.45;color:var(--ink-soft)}
.consent-bar-body a{color:var(--accent-down);text-underline-offset:3px}
.consent-bar-body a:hover{color:var(--accent)}
:root[data-theme="dark"] .consent-bar-body a{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .consent-bar-body a{color:var(--accent)}
}

.consent-bar-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  flex:0 0 auto;
}

/* ---------- buttons ----------
   Smaller than the site's .btn on purpose: this is a strip, not a hero. The
   shape is the same, so it still reads as the same product. */
.consent-btn{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:.92rem;
  line-height:1;cursor:pointer;white-space:nowrap;
  padding:12px 22px;border-radius:999px;border:2px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .18s var(--ease);
}
.consent-btn:active{transform:translateY(1px)}
.consent-btn-primary{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
.consent-btn-primary:hover{background:var(--accent-down);border-color:var(--accent-down)}
/* Same footprint as the primary, in the page's own ink. Equal prominence,
   without two accent buttons competing for the same glance. */
.consent-btn-secondary{
  background:var(--surface);border-color:var(--ink);color:var(--ink);
}
.consent-btn-secondary:hover{background:var(--ink);color:var(--bg)}
.consent-btn-quiet{
  background:transparent;border-color:transparent;color:var(--ink-soft);
  padding-inline:12px;text-decoration:underline;text-underline-offset:4px;
}
.consent-btn-quiet:hover{color:var(--ink)}

/* On a phone the two answers share a row and split it evenly, and drop to a
   row each only when 11rem apiece no longer fits — which is what keeps them
   the same size as one another at every width. The basis is doing the work:
   without it they would size to their labels, and "דחיית עוגיות נוספות" next
   to "קבלת הכל" is the lopsided pair the equal-prominence rule exists to
   prevent. `normal` wrapping is the release valve for a label that still
   cannot fit. */
@media (max-width:620px){
  .consent-bar-actions{width:100%}
  .consent-btn{white-space:normal}
  .consent-btn-primary,.consent-btn-secondary{flex:1 1 11rem}
  .consent-btn-quiet{flex:0 0 100%;padding:6px 0;text-align:center}
}

/* ---------- the settings dialog ----------
   A native <dialog>: the top layer puts it above the fixed header and the bar
   without a z-index race, and ::backdrop is the browser's own dimming. */
/* Centred by hand, not by the browser. A modal <dialog> is centred by the UA
   rule `margin:auto` against `inset:0` — and site.css opens with
   `*{margin:0;padding:0}`, which wins over the UA sheet and drops the dialog
   into the inline-start top corner (the RIGHT corner, in Hebrew). Restating
   the four properties here is what makes it immune to that reset.
   `height:fit-content` matters as much as the margin: with `inset:0` and an
   auto height, the box stretches to the full viewport instead of centring. */
.consent-dialog{
  position:fixed;inset:0;margin:auto;
  padding:0;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);color:var(--ink);
  width:min(560px,calc(100vw - 32px));
  height:fit-content;max-height:min(86dvh,760px);
  box-shadow:0 30px 80px -40px rgba(38,20,27,.7);
}
.consent-dialog::backdrop{background:rgba(38,20,27,.5);backdrop-filter:blur(2px)}
:root[data-theme="dark"] .consent-dialog::backdrop{background:rgba(0,0,0,.65)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .consent-dialog::backdrop{background:rgba(0,0,0,.65)}
}

.consent-dialog-form{
  padding:clamp(20px,4vw,28px);
  display:grid;gap:16px;
}
.consent-dialog-head{display:flex;align-items:flex-start;gap:12px}
.consent-dialog-head h2{
  font-family:'Rubik',sans-serif;font-weight:900;
  font-size:1.35rem;line-height:1.25;flex:1;
}
.consent-dialog-close{
  flex:0 0 auto;background:none;border:0;cursor:pointer;padding:4px;
  border-radius:8px;color:var(--ink-soft);
}
.consent-dialog-close:hover{background:var(--bg-soft);color:var(--ink)}
.consent-dialog-close svg{
  width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;display:block;
}
.consent-dialog-intro{font-size:.9rem;color:var(--ink-soft);line-height:1.6}

.consent-row{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 0;border-top:1px solid var(--line);
}
.consent-row-copy{flex:1;min-width:0}
.consent-row-title{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:1rem;
  margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.consent-row-body{font-size:.88rem;line-height:1.6;color:var(--ink-soft)}
.consent-badge{
  font-family:'Heebo',system-ui,sans-serif;font-weight:600;font-size:.72rem;
  padding:2px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-down);
}
:root[data-theme="dark"] .consent-badge{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .consent-badge{color:var(--accent)}
}

/* The switch mirrors the app's <Switch>: a real button with role="switch",
   and a thumb travelling on logical insets so it runs the reading direction's
   way in Hebrew as well as English. */
.consent-switch{
  position:relative;flex:0 0 auto;
  width:44px;height:26px;margin-top:2px;
  border-radius:999px;border:1px solid var(--line);
  background:var(--bg-soft);cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.consent-switch[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.consent-switch:disabled{cursor:not-allowed;opacity:.55}
.consent-switch-thumb{
  position:absolute;top:50%;transform:translateY(-50%);
  inset-inline-start:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 3px rgba(38,20,27,.35);
  transition:inset-inline-start .16s var(--ease);
}
.consent-switch[aria-checked="true"] .consent-switch-thumb{inset-inline-start:21px}
@media (prefers-reduced-motion:reduce){
  .consent-switch,.consent-switch-thumb{transition:none}
}

.consent-dialog-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:18px;
}
.consent-dialog-foot > a{
  font-size:.88rem;color:var(--accent-down);text-underline-offset:3px;
}
.consent-dialog-foot > a:hover{color:var(--accent)}
:root[data-theme="dark"] .consent-dialog-foot > a{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .consent-dialog-foot > a{color:var(--accent)}
}
.consent-dialog-buttons{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:520px){
  .consent-dialog-foot{flex-direction:column;align-items:stretch}
  .consent-dialog-buttons{flex-direction:column-reverse}
  .consent-dialog-foot > a{text-align:center;order:2}
}

/* The escape from the question, not a fourth answer to it. Quiet on purpose:
   given the weight of a button it would pull people toward the exit, and the
   whole reason it exists is that ignoring the bar is already a valid outcome
   where it is offered. */
.consent-dismiss {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: var(--consent-muted, #6b6b6b);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.375rem;
}

.consent-dismiss:hover {
  color: inherit;
}

.consent-dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}