/* ============================================================
   SEARCH WIZARD
   A guided, one-question-at-a-time search. Shared by the public
   pages and the admin panel, so everything here is driven by the
   theme tokens rather than fixed colours, and every animation is
   transform/opacity only - the phone work earlier in this project
   showed that anything repainting (box-shadow, background-position,
   filter) costs far more than it looks.
============================================================ */

/* ---- Trigger -------------------------------------------- */
.wz-open {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease;
}
.wz-open:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.wz-open:active { transform: translateY(0); }
.wz-open > i {
    color: var(--accent);
    font-size: 1.05rem;
}
.wz-open-hint {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    padding-inline-start: 10px;
    border-inline-start: 1px solid var(--border);
}

/* A slow sheen crossing the button. Transform only, and it stops
   on hover so it never competes with the lift. */
.wz-open-spark {
    position: absolute;
    top: 0;
    /* Physical `left`, not inset-inline-start. The logical property put the
       spark's start edge on the right under RTL, which parked it inside the
       button - measured at x=1195 on a button ending at 1248 - and the
       rightward sweep then carried it straight off the edge without ever
       crossing. Anchored left in both directions, the travel is what gets
       mirrored instead. */
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        var(--accent-glow),
        transparent);
    transform: translateX(-100%);
    pointer-events: none;
}
/* Sheen plays once on hover, not on an endless loop — a constantly sweeping
   light reads as flicker/"coming and going" on an otherwise static page. */
.wz-open:hover .wz-open-spark { animation: wzSheen 1.1s ease-in-out; }
/* Sweeps from off the left edge to off the right one. Played backwards for
   RTL so the light crosses right to left, with the text. */
@keyframes wzSheen {
    0%, 100% { transform: translateX(-100%); }
    45%, 55% { transform: translateX(420%); }
}
[dir="rtl"] .wz-open-spark { animation-direction: reverse; }

/* ---- Overlay -------------------------------------------- */
.wz-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.wz-overlay[hidden] { display: none; }

.wz-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 10, 0.72);
    opacity: 0;
    transition: opacity 0.28s ease;
}
[data-theme="light"] .wz-backdrop { background: rgba(20, 22, 34, 0.45); }
.wz-overlay.is-open .wz-backdrop { opacity: 1; }

/* ---- Panel ---------------------------------------------- */
.wz-panel {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: opacity 0.3s ease,
                transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
/* At rest the panel drops back to NO transform, so it is a plain,
   non-composited element. Its shadow is then painted once on the normal
   layer and is never re-rasterised when a child is hovered — which is what
   made the whole box flash and glitch as the mouse moved over it. The
   transform only exists during the open/close animation. */
.wz-overlay.is-open .wz-panel {
    opacity: 1;
    transform: none;
}

/* A hairline of brand colour along the top edge. */
.wz-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
    opacity: 0.9;
}

/* ---- Head ----------------------------------------------- */
.wz-head {
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.wz-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.wz-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.wz-title > i { color: var(--accent); }
.wz-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* The glyph has to sit dead centre or the hover rotation swings it. An icon
   font draws on the text baseline inside a full line box - here a 12.8px mark
   in a 20.5px box, so the visible cross rode low, and rotating 90deg turned
   that drop into a sideways lurch. Collapsing the line box and dropping
   Bootstrap Icons' -.125em nudge puts the mark on the button's centre, so the
   rotation now spins in place. */
.wz-close > i {
    display: block;
    line-height: 1;
}
.wz-close > i::before {
    display: block;
    line-height: 1;
    vertical-align: 0;
}
.wz-close:hover {
    color: var(--danger);
    border-color: var(--danger);
    transform: rotate(90deg);
}

/* ---- Progress rail -------------------------------------- */
.wz-rail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    margin-bottom: 8px;
}
/* The track and its fill sit behind the dots. Inset so the line starts
   and ends at the dot centres rather than the panel edge. */
.wz-rail::before {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline: 11px;
    height: 2px;
    background: var(--border);
    transform: translateY(-50%);
}
.wz-rail-fill {
    position: absolute;
    top: 50%;
    inset-inline-start: 11px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transform: translateY(-50%);
    transition: width 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.wz-dot {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    font-size: 0.6rem;
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The tick is hidden on the icon itself rather than by inheriting a
   transparent colour from the dot: the admin panel sets a body colour that
   wins over the inherited value, which left a grey tick sitting inside every
   dot, including the ones the visitor has not reached yet. */
.wz-dot > i {
    color: transparent;
    transition: color 0.3s ease;
}
.wz-dot.is-current {
    border-color: var(--accent);
    transform: scale(1.18);
}
.wz-dot.is-done {
    border-color: var(--accent);
    background: var(--accent);
}
.wz-dot.is-done > i { color: #fff; }
.wz-count {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- Body / steps --------------------------------------- */
.wz-body {
    position: relative;
    padding: 24px 22px;
    overflow-y: auto;
    /* The step slides in from 26px to the side. Naming one axis auto makes the
       other axis auto too, so without this the incoming step raises a
       horizontal scrollbar for the length of the animation. */
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 210px;
}
.wz-step { display: none; }
.wz-step.is-active {
    display: block;
    /* No fill mode, deliberately. With "both" the step holds the from-state -
       opacity 0 - whenever the animation does not actually run, which hides
       the content outright. Unfilled, the step is visible by default and the
       slide is pure decoration on top of it. */
    animation: wzIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Direction is set per-navigation so Back slides the other way, and it
   is mirrored under RTL. --wz-from is written by the script. */
@keyframes wzIn {
    from { opacity: 0; transform: translateX(var(--wz-from, 26px)); }
    to   { opacity: 1; transform: translateX(0); }
}

.wz-question {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.35;
}
.wz-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.wz-question + .wz-textwrap,
.wz-question + .wz-cards,
.wz-question + .wz-chips,
.wz-question + .wz-range,
.wz-question + .wz-toggle { margin-top: 18px; }

/* ---- Text step ------------------------------------------ */
.wz-textwrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 50px;
    background: var(--surface2);
    padding: 0 18px;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.wz-textwrap:focus-within {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.wz-textwrap > i {
    color: var(--text-dim);
    font-size: 1rem;
    flex-shrink: 0;
}
.wz-text {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    padding: 15px 12px;
    outline: none;
    min-width: 0;
}
.wz-text::placeholder { color: var(--text-dim); }

/* ---- Card step ------------------------------------------ */
.wz-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.wz-card { cursor: pointer; }
.wz-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wz-card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.wz-card:hover .wz-card-inner { transform: translateY(-3px); }
.wz-card-inner > i {
    font-size: 1.15rem;
    color: var(--accent);
}
.wz-card-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.wz-card-hint {
    font-size: 0.74rem;
    color: var(--text-muted);
}
.wz-card input:checked + .wz-card-inner {
    border-color: var(--accent);
    background: var(--accent-glow);
}
.wz-card input:focus-visible + .wz-card-inner { border-color: var(--accent2); }

/* ---- Chip step ------------------------------------------ */
.wz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.wz-chip { cursor: pointer; }
.wz-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wz-chip > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 600;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wz-chip:hover > span { transform: translateY(-2px); }
.wz-chip input:checked + span {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--text);
}

/* ---- Range step ----------------------------------------- */
.wz-range {
    display: flex;
    gap: 12px;
}
/* min-width:0 is what keeps these on one row. A flex item's automatic minimum
   is its content's min-content width, and a number input's is far wider than
   the 140px basis - so each field measured 358px inside a 347px container and
   wrapped. Without the override the basis is simply ignored. */
.wz-range-field {
    flex: 1 1 0;
    min-width: 0;
}
.wz-range-input { min-width: 0; }
.wz-range-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.wz-range-input {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    transition: border-color 0.25s ease;
}
.wz-range-input:focus-within { border-color: var(--accent); }
.wz-prefix {
    color: var(--text-dim);
    font-size: 0.92rem;
    flex-shrink: 0;
}
.wz-range-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.95rem;
    padding: 12px 0;
    outline: none;
}

/* ---- Toggle step ---------------------------------------- */
.wz-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
}
.wz-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wz-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50px;
    background: var(--border);
    transition: background-color 0.25s ease;
}
.wz-toggle-knob {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.25s ease;
}
.wz-toggle input:checked ~ .wz-toggle-track { background: var(--accent); }
.wz-toggle input:checked ~ .wz-toggle-track .wz-toggle-knob {
    background: #fff;
    /* logical property would be wrong here: the knob must travel toward the
       track's own end, and the track is fixed-width either way round */
    transform: translateX(18px);
}
[dir="rtl"] .wz-toggle input:checked ~ .wz-toggle-track .wz-toggle-knob {
    transform: translateX(-18px);
}
.wz-toggle-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

/* ---- Summary -------------------------------------------- */
.wz-summary {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wz-summary li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface2);
    font-size: 0.88rem;
    animation: wzIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.wz-summary li span:first-child {
    color: var(--text-muted);
    font-weight: 600;
}
.wz-summary li span:last-child {
    color: var(--text);
    font-weight: 600;
    text-align: end;
}
.wz-summary li.is-empty span:last-child {
    color: var(--text-dim);
    font-weight: 500;
}

/* ---- Foot ----------------------------------------------- */
.wz-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.wz-foot-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wz-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wz-btn:hover:not([disabled]) {
    color: var(--text);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.wz-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.wz-next, .wz-go {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.wz-next:hover:not([disabled]), .wz-go:hover {
    color: #fff;
    border-color: var(--accent);
}
.wz-go {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    border-color: transparent;
}
.wz-skip { border-color: transparent; }

/* ---- Small screens -------------------------------------- */
@media (max-width: 575.98px) {
    .wz-overlay { padding: 0; align-items: flex-end; }
    .wz-panel {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
    }
    .wz-overlay.is-open .wz-panel { transform: none; }
    .wz-head, .wz-body, .wz-foot { padding-inline: 16px; }
    .wz-cards { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
    .wz-question { font-size: 1.08rem; }
    .wz-open { width: 100%; justify-content: center; }
    .wz-open-hint { display: none; }
    .wz-foot { flex-wrap: wrap; }
    .wz-btn { padding: 10px 14px; }
}

/* ---- Reduced motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wz-open-spark { animation: none; opacity: 0; }
    .wz-panel,
    .wz-backdrop,
    .wz-rail-fill,
    .wz-dot,
    .wz-btn,
    .wz-card-inner,
    .wz-chip > span,
    .wz-toggle-knob { transition-duration: 0.01ms; }
    .wz-step.is-active,
    .wz-summary li { animation: none; }
    .wz-close:hover { transform: none; }
}

/* ============================================================
   ACTIVE FILTER CHIPS
   Replaces the old filter bars. Present only while something is
   actually filtered, so an untouched page shows nothing here.
============================================================ */
.af-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.af-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-inline-end: 2px;
}
.af-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background: var(--surface2);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.af-chip:hover {
    color: var(--text);
    border-color: var(--danger);
    transform: translateY(-1px);
}
.af-chip > i:first-child {
    font-size: 0.78rem;
    color: var(--accent);
}
.af-x {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-inline-start: 1px;
    transition: color 0.2s ease;
}
.af-chip:hover .af-x { color: var(--danger); }

.af-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 50px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.af-clear:hover {
    color: var(--text);
    border-color: var(--border);
}
.af-clear > i { font-size: 0.7rem; }

@media (prefers-reduced-motion: reduce) {
    .af-chip { transition-duration: 0.01ms; }
}

/* ============================================================
   RTL TEXT SIZING
   Two separate problems.

   First, .wz-question is an <h3>, and style.css sizes every RTL
   h3 with "clamp(1.1rem, 2vw, 1.6rem) !important". At desktop
   width that resolves to 1.6rem against the 1.22rem this panel
   asks for - a third larger - which is what made the Kurdish and
   Arabic headings tower over the English. !important here only
   because the rule it has to beat carries one.

   Second, Noto Kufi Arabic simply reads heavier than Roboto at
   equal pixel size, so the rest is trimmed by about 5% on top.
============================================================ */
[dir="rtl"] .wz-question { font-size: 1.14rem !important; }
[dir="rtl"] .wz-hint          { font-size: 0.8rem; }
[dir="rtl"] .wz-title         { font-size: 0.94rem; }
[dir="rtl"] .wz-count         { font-size: 0.7rem; }
[dir="rtl"] .wz-btn           { font-size: 0.82rem; }
[dir="rtl"] .wz-card-label    { font-size: 0.85rem; }
[dir="rtl"] .wz-card-hint     { font-size: 0.7rem; }
[dir="rtl"] .wz-chip > span   { font-size: 0.81rem; }
[dir="rtl"] .wz-range-label   { font-size: 0.71rem; }
[dir="rtl"] .wz-range-input input { font-size: 0.9rem; }
[dir="rtl"] .wz-text          { font-size: 0.94rem; }
[dir="rtl"] .wz-summary li    { font-size: 0.83rem; }
[dir="rtl"] .wz-toggle-text   { font-size: 0.85rem; }
[dir="rtl"] .wz-open          { font-size: 0.85rem; }
[dir="rtl"] .wz-open-hint     { font-size: 0.68rem; }
[dir="rtl"] .af-chip          { font-size: 0.78rem; }
[dir="rtl"] .af-label         { font-size: 0.68rem; }
[dir="rtl"] .af-clear         { font-size: 0.76rem; }

@media (max-width: 575.98px) {
    [dir="rtl"] .wz-question { font-size: 1.02rem !important; }
}