/* ============================================================
   /n/ - the create wizard, Hebrew/RTL.

   NOT a copy of Darim.Web's wizard.css. That sheet is written against
   the RU brand's light-paper tokens (--paper, --ink-text, --berry-ink)
   which do not exist here, and against physical left/right properties.
   Rewriting it was cheaper than mapping both, and it keeps the same
   promise site.css makes: logical properties only, so a Russian-language
   card rendered LTR on this brand mirrors for free.

   Only wizard-specific affordances live here; colours, type and buttons
   come from site.css.
   ============================================================ */

/* ---------- form primitives ---------- */

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
}

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }

.field > label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
}

.hint { color: var(--muted); font-weight: 400; font-size: 13.5px; }

.muted { color: var(--muted); }
.small { font-size: 13.5px; }

.input {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    padding: 12px 14px;
    /* start/end, not left/right: the same rule has to serve a Hebrew
       field and a Russian one on the same brand. */
    text-align: start;
    transition: border-color .16s ease;
}

.input:focus {
    outline: none;
    border-color: var(--accent);
}

.input::placeholder { color: var(--muted); opacity: .75; }

/* Email and URL fields hold Latin text. Without an explicit direction
   the RTL context puts the caret and any punctuation on the wrong side,
   and "you@example.com" renders as "com.example@you" the moment a dot
   lands at a boundary. */
.input[type="email"],
.input[type="date"],
.input.ltr-field {
    direction: ltr;
    text-align: start;
}

/* ---------- chips (occasion + prompt suggestions) ---------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: .16s ease;
}

.chip:hover { border-color: var(--accent); color: var(--accent); }

.chip.sel {
    background: var(--accent);
    border-color: var(--accent);
    color: #2B1C10;
}

.prompt-chip {
    font-weight: 400;
    font-size: 13.5px;
    text-align: start;
}

/* ---------- progress ---------- */

.wiz-progress {
    max-width: 640px;
    margin: 0 auto 28px;
}

.wiz-progress ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.wiz-progress .wstep {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    font-size: 13.5px;
    transition: .16s ease;
}

/* The circled digit is a position indicator, not prose - Hebrew reads
   1-2-3 left to right like everyone else, and the grid order already
   carries the direction. */
.wiz-progress .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
    font-weight: 700;
    font-size: 12px;
    flex: 0 0 22px;
}

.wiz-progress .wstep.current {
    border-color: var(--accent);
    color: var(--accent);
}

.wiz-progress .wstep.current .num {
    background: var(--accent);
    color: #2B1C10;
    border-color: var(--accent);
}

.wiz-progress .wstep.done { color: var(--ink); }

.wiz-progress .wstep.done .num {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

.wiz-progress .lbl { font-weight: 600; }

@media (max-width: 540px) {
    .wiz-progress .lbl { font-size: 12px; }
    .wiz-progress .wstep { padding: 6px 8px; gap: 6px; }
}

/* ---------- steps ---------- */

.page { padding: 34px 0 60px; }

.wiz-step {
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 28px;
}

.page-head { margin-bottom: 20px; }
.page-head h1, .page-head h2 { margin: 8px 0 10px; }

.wiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    gap: 14px;
}

.btn-block { display: block; width: 100%; text-align: center; }

/* ---------- date + time ---------- */

.date-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.date-preset {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: .16s ease;
}

.date-preset:hover { border-color: var(--accent); color: var(--accent); }

.date-preset.sel {
    background: var(--accent);
    color: #2B1C10;
    border-color: var(--accent);
}

/* HH:MM is a number, and numbers stay LTR inside RTL text. Without the
   isolation the colon migrates and 18:00 renders as 00:18. */
.time-text {
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    max-width: 140px;
}

.reveal-summary-card {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    /* border-inline-start, not border-left: on an RTL page the accent
       rule belongs on the right edge, and the rounded corners have to
       follow it. */
    border-inline-start: 3px solid var(--accent);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reveal-summary-card .rsl {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600;
}

.reveal-summary-card strong { font-size: 15.5px; }

/* The rendered date mixes Hebrew weekday names with Latin digits.
   Isolate it so the digits cannot reorder the sentence around them. */
.reveal-summary-card strong,
#reveal-summary { unicode-bidi: isolate; }

.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.consent input { margin-top: 4px; flex: 0 0 auto; }

/* ---------- error box ---------- */

.flag-box {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.55;
}

#error-box {
    border-color: var(--accent-deep);
    color: var(--ink);
}

.fb-h { font-weight: 700; margin-bottom: 6px; color: var(--accent); }

/* ---------- success ---------- */

#step-success {
    max-width: 980px;
    margin-inline: auto;
}

.two-col {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 26px;
    align-items: start;
}

@media (max-width: 860px) {
    .two-col { grid-template-columns: 1fr; }
}

.links-out { display: flex; flex-direction: column; gap: 12px; }

.link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
}

.lr-ic {
    flex: 0 0 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--panel);
    font-size: 16px;
}

.lr-grow { flex: 1 1 auto; min-width: 0; }

.lr-t { font-size: 13px; color: var(--muted); font-weight: 600; }

/* A URL is Latin and must not be reordered by the RTL paragraph around
   it. overflow-wrap keeps a long token from widening the grid column
   instead of wrapping - the RU site shipped that bug and had to give the
   success layout its own wider canvas to hide it. */
.lr-u {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 13.5px;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.copy-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: .16s ease;
}

.copy-btn:hover { border-color: var(--accent); color: var(--accent); }

/* THE button. WhatsApp is where the organiser's group actually is, so it
   is not one share icon among several - it is the single obvious next
   move, sized and coloured accordingly. Everything else on this screen
   is quieter on purpose. */
.wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #25D366;
    color: #06331A;
    font: inherit;
    font-size: 16.5px;
    font-weight: 700;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: filter .16s ease, transform .16s ease;
}

.wa-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.wa-btn svg { flex: 0 0 22px; }

.wa-note {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin: 8px 0 0;
}

.share-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.share-btn {
    font-size: 12.5px;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 10px;
}

.share-btn:hover { border-color: var(--accent); color: var(--accent); }

.cover {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    display: flex;
    align-items: flex-end;
    padding: 18px;
}

.cover .badge {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    background: rgba(0, 0, 0, .35);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
}

.cover .ttl { font-size: 22px; font-weight: 700; }

.cover-actions { margin-top: 10px; }

.mini-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
}

.mini-btn:hover { border-color: var(--accent); color: var(--accent); }

.mini-btn:disabled { opacity: .55; cursor: default; }

/* ---------- faq ---------- */

.faq { margin-top: 56px; }

.faq-q {
    border-block-end: 1px solid var(--line);
    padding: 14px 0;
}

.faq-q summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
}

.faq-q p { margin: 10px 0 0; color: var(--muted); }

/* A native <details> marker sits on the left in LTR. In RTL the browser
   mirrors it correctly, but only if we do not override list-style - so
   this rule exists to document that it is deliberately left alone. */