/* ═══════════════════════════════════════════════════════════════════════
   forms.css — the form-control layer.

   The original site contained exactly one <input> (the newsletter) and no
   <label>, <select>, <textarea>, radio, checkbox or error state anywhere,
   so all of this is authored rather than extended. Every value is derived
   from what already exists so it reads as the same site.

   RTL note: this file uses logical properties (padding-inline,
   inset-inline-start) throughout, unlike bloom.css which predates the
   multi-page work and uses physical ones.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Field primitives ─────────────────────────────────────────────── */
.field { display: grid; gap: 8px; margin-block-end: 20px; }
.field--narrow { max-width: 320px; }   /* short inputs like a coupon code; was inline (CSP) */

.field > label {
  font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sage-text);
}
/* Deliberately not .eyebrow: 12px uppercase at 0.22em is too shouty here,
   and text-transform:uppercase is meaningless in Hebrew. */
.field.is-required > label::after { content: ' *'; color: var(--error); }

.field .hint {
  font-family: 'Heebo', sans-serif; font-size: 12.5px; line-height: 1.5;
  color: rgba(43,43,43,0.7);
}

.input, .select, .textarea {
  width: 100%;
  background: var(--cream);
  border: 1px solid rgba(140,90,54,0.18);
  border-radius: var(--radius-field);
  padding: 14px 16px;
  font-family: 'Heebo', sans-serif; font-size: 15px; line-height: 1.4;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input::placeholder, .textarea::placeholder { color: rgba(43,43,43,0.7); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(140,90,54,0.32); }

.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none;
  border-color: var(--mocha);
  box-shadow: var(--focus-ring);
}
.textarea { min-height: 110px; resize: vertical; }

/* Email and phone read left-to-right but stay flush with the RTL form. */
.input[dir="ltr"] { text-align: right; }

/* Native select arrow removed; ours sits on the LEFT because the document
   is RTL. Logical property so it stays correct if the page is mirrored. */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1l6 6 6-6' stroke='%238C5A36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-inline-end: 44px;
}

/* ── Validation ───────────────────────────────────────────────────── */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  border-color: var(--error);
  background: var(--error-soft);
}
.field-error {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Heebo', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--error);
}
/* display:flex above beats the UA's [hidden] rule, which left an empty
   error — just the red "!" — visible under the admin login. */
.field-error[hidden] { display: none; }
.field-error::before {
  content: '!';
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--error); color: #fff;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}

/* The banner is what makes a long form usable on a phone: it collects every
   failure and links straight to the offending field. */
.form-summary-error {
  margin-block-end: 26px; padding: 18px 20px;
  background: var(--error-soft);
  border: 1px solid rgba(168,69,47,0.3);
  border-radius: var(--radius-field);
}
.form-summary-error:focus-visible { outline: 2px solid var(--error); outline-offset: 3px; }
.form-summary-error h3 {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 14.5px;
  color: var(--error); margin-block-end: 8px;
}
.form-summary-error ul { display: flex; flex-direction: column; gap: 5px; }
.form-summary-error a {
  font-family: 'Heebo', sans-serif; font-size: 13.5px;
  color: var(--error); text-decoration: underline;
}

.field-ok { color: var(--ok); }

/* ── Fieldsets ────────────────────────────────────────────────────── */
.form-section { margin-block-end: 36px; }
.form-section > legend {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 18px;
  color: var(--ink); margin-block-end: 6px; letter-spacing: -0.01em;
}
.form-section .legend-note {
  font-family: 'Heebo', sans-serif; font-size: 13px; line-height: 1.6;
  color: rgba(43,43,43,0.7); margin-block-end: 18px;
}

.form-grid { display: grid; gap: 0 20px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .field-wide { grid-column: 1 / -1; }

.form-actions {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-block-start: 10px;
}
.form-actions .btn { justify-content: center; }

/* ── Choice cards ─────────────────────────────────────────────────────
   Derived from .slot in the events widget so the visual language matches.
   The native radio stays in the DOM, visually hidden, so keyboard and
   screen-reader behaviour is the browser's rather than ours. */
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  background: var(--cream);
  border: 1px solid rgba(140,90,54,0.18);
  border-radius: var(--radius-field);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
}
.choice-card:hover { border-color: rgba(140,90,54,0.4); transform: translateY(-1px); }
.choice-card:has(:checked) {
  border-color: var(--rose);
  background: var(--ivory);
  box-shadow: 0 0 0 1px var(--mocha) inset, var(--shadow-card);
}
.choice-card:has(:focus-visible) { box-shadow: var(--focus-ring); border-color: var(--mocha); }

.choice-mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(140,90,54,0.35);
  margin-block-start: 2px;
  display: grid; place-items: center;
  transition: border-color .2s;
}
.choice-card:has(:checked) .choice-mark { border-color: var(--rose); }
.choice-mark::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rose); transform: scale(0);
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.choice-card:has(:checked) .choice-mark::after { transform: scale(1); }

.choice-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.choice-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink);
}
.choice-price { font-variant-numeric: tabular-nums; color: var(--sage-text); font-size: 16px; }
.choice-desc {
  font-family: 'Heebo', sans-serif; font-size: 13px; line-height: 1.55;
  color: rgba(43,43,43,0.7);
}
.choice-card.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Checkboxes ───────────────────────────────────────────────────────
   Native control, styled with accent-color: one line, fully accessible,
   zero risk of reimplementing keyboard behaviour badly. */
.checkbox-row { display: flex; gap: 12px; align-items: flex-start; margin-block-end: 16px; }
.checkbox-row input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0; margin-block-start: 2px;
  accent-color: var(--rose); cursor: pointer;
}
.checkbox-row label {
  font-family: 'Heebo', sans-serif; font-size: 14px; line-height: 1.6;
  color: rgba(43,43,43,0.85); cursor: pointer;
}
.checkbox-row a { color: var(--sage-text); text-decoration: underline; }
.checkbox-row.is-invalid label { color: var(--error); }

/* ── Stepper ──────────────────────────────────────────────────────── */
.stepper {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-block-end: 32px;
}
.stepper li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(140,90,54,0.07);
  font-family: 'Heebo', sans-serif; font-size: 12.5px; font-weight: 600;
  /* 0.7 blended to #625e5a on the pill's own tint — 4.46:1, just under the
     4.5:1 floor. 0.75 reaches 5.09:1. */
  color: rgba(43,43,43,0.75);
}
.stepper li[aria-current="step"] { background: var(--rose); color: var(--ink); }
.stepper li.is-done { background: rgba(152,160,122,0.22); color: #4B5039; }
.stepper .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.35); font-size: 11px; font-weight: 700;
}
.stepper li[aria-current="step"] .step-num { background: rgba(43,43,43,0.14); }
.stepper .step-sep { color: rgba(43,43,43,0.25); }

/* ── Order summary ────────────────────────────────────────────────── */
.summary-panel { position: sticky; top: calc(var(--header-h) + 20px); }
.summary-panel h2 {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 17px;
  color: var(--ink); margin-block-end: 16px;
}
.summary-class {
  display: flex; gap: 14px; align-items: center;
  padding-block-end: 16px; margin-block-end: 16px;
  border-bottom: 1px solid rgba(140,90,54,0.12);
}
.summary-class img {
  width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
}
.summary-class-title { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
/* mocha-deep, not mocha: at 12.5px on the neutral ground mocha reads 4.35:1,
   just under the floor. mocha-deep reads 6.20:1. */
.summary-class-sub { font-family: 'Heebo', sans-serif; font-size: 12.5px; color: var(--mocha-deep); margin-block-start: 2px; }

.summary-rows { display: flex; flex-direction: column; gap: 10px; }
.summary-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-family: 'Heebo', sans-serif; font-size: 13.5px; color: rgba(43,43,43,0.78);
}
.summary-row dt { color: rgba(43,43,43,0.7); }
.summary-row dd { font-weight: 600; color: var(--ink); text-align: start; }
.summary-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-block-start: 18px; padding-block-start: 16px;
  border-top: 1px solid rgba(140,90,54,0.12);
}
.summary-total dt { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.summary-total dd {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 24px;
  color: var(--sage-text); font-variant-numeric: tabular-nums;
}
.summary-note {
  margin-block-start: 14px;
  font-family: 'Heebo', sans-serif; font-size: 12px; line-height: 1.6;
  color: rgba(43,43,43,0.7);
}

/* ── Registration page shell ──────────────────────────────────────── */
.register { padding: 0 0 var(--space-section); background: var(--neutral); }
.register .container-narrow { padding-top: 8px; }
.register-grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .register-grid { grid-template-columns: 1fr 360px; gap: 40px; } }

.age-warning {
  display: flex; gap: 10px; align-items: flex-start;
  margin-block-start: -8px; margin-block-end: 20px;
  padding: 14px 16px; border-radius: var(--radius-field);
  background: rgba(140,90,54,0.07);
  border: 1px solid rgba(140,90,54,0.2);
  font-family: 'Heebo', sans-serif; font-size: 13px; line-height: 1.6;
  color: var(--mocha-deep);
}
.age-warning[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   CHILD ROWS — /entry/register.html

   Entry is priced per child, so the form grows a row at a time. Each row is
   a real fieldset with its own legend, which is what lets a screen-reader
   user tell "שם" in row 2 from "שם" in row 1.
   ═══════════════════════════════════════════════════════════════════════ */
.child-row {
  position: relative;
  border: 1px solid var(--neutral);
  border-radius: var(--radius-field);
  background: var(--cream);
  padding: 16px 18px 4px;
  margin-block-end: 12px;
}
.child-row-legend {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 12px;
  color: var(--sage-text); letter-spacing: 0.1em; text-transform: uppercase;
  /* A legend is drawn ON the fieldset's border by default, so half of it sat
     outside the card and read as text leaking out of it. Floating it takes it
     off the border and into the padding box, still a real legend. */
  float: right; float: inline-start;
  width: 100%;
  margin-block-end: 10px;
}
.child-row-legend + * { clear: both; }
/* The birthdate field carries a band hint and the name field does not, so the
   grid stretches the name field to match — and .field, itself a grid, shares
   that height out between its label and its input. Pinned to the top, the two
   inputs line up and keep their own height. */
.child-row .field { align-content: start; }
.child-remove {
  /* Opposite end from the legend, now that the legend is inside the card. */
  position: absolute; inset-block-start: 12px; inset-inline-end: 14px;
  background: none; border: 0; padding: 4px 6px;
  font-family: 'Heebo', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--error); border-radius: 6px;
  cursor: pointer;
  transition: background .2s;
}
.child-remove:hover { background: var(--error-soft); }
.child-remove:focus-visible { background: var(--error-soft); }

.summary-empty {
  font-family: 'Heebo', sans-serif; font-size: 13px; line-height: 1.7;
  color: rgba(43,43,43,0.7);
  padding-block: 6px;
}

/* Cloudflare Turnstile. Empty — and so invisible — for almost everyone; it
   only fills when Cloudflare needs the visitor to click a checkbox, and then
   it sits directly above the submit button it is gating. */
.turnstile-slot:empty { display: none; }
.turnstile-slot { margin-block: 16px 4px; min-height: 65px; }

@media (prefers-reduced-motion: reduce) {
  .child-remove { transition: none; }
}

/* Saved children from the personal area (db/0023), one tap each on the
   registration page. A pill per child; pressed ones are spent. */
.saved-kids { margin-block: 4px 14px; }
.saved-kids-title { font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600; color: var(--sage-text); margin: 0 0 8px; }
.saved-kids-list { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-kid {
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--cream); border: 1px solid rgba(140, 90, 54, 0.3);
  border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.saved-kid:hover { background: rgba(232, 180, 184, 0.3); border-color: var(--rose-deep); }
.saved-kid:active { transform: translateY(1px); }
.saved-kid:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.saved-kid[aria-pressed='true'] { opacity: 0.5; cursor: default; background: var(--neutral); }
#saveKidsRow { margin-block-start: 14px; }