/* /Components/Admin/LessonTopicPicker.razor.rz.scp.css */
/* Staged category picker — large buttons, one level at a time (§13.5). */

.qcat-current[b-6veytaa3yo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: 1.1rem;
}

.qcat-current-label[b-6veytaa3yo] { font-weight: 700; color: var(--dtz-blue); }
.qcat-current-none[b-6veytaa3yo] { color: var(--dtz-text-muted); }
.qcat-current-path[b-6veytaa3yo] { font-weight: 700; color: var(--dtz-bronze-text); }
.qcat-sep[b-6veytaa3yo] { font-size: .8em; margin: 0 .35rem; color: var(--dtz-bronze); }

.qcat-change-btn[b-6veytaa3yo] {
    margin-inline-start: auto;
    min-height: 48px;
    padding: 0 1.1rem;
    border: 2px solid var(--dtz-bronze);
    background: #fff;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dtz-blue);
    cursor: pointer;
}

.qcat-stage[b-6veytaa3yo] {
    margin-top: 1rem;
    border: 2px solid var(--dtz-bronze);
    border-radius: 12px;
    padding: 1rem;
    background: var(--dtz-bg);
}

.qcat-stage-head[b-6veytaa3yo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .9rem;
}

.qcat-up[b-6veytaa3yo] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 48px;
    padding: 0 1rem;
    border: 2px solid var(--dtz-bronze);
    background: #fff;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.qcat-stage-where[b-6veytaa3yo] { font-weight: 700; color: var(--dtz-bronze-text); font-size: 1.05rem; }

.qcat-options[b-6veytaa3yo] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.qcat-option[b-6veytaa3yo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: 56px;
    padding: 0 1.25rem;
    border: 2px solid var(--dtz-bronze-border);
    background: #fff;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dtz-blue);
    text-align: start;
    cursor: pointer;
}

.qcat-option:hover[b-6veytaa3yo] { border-color: var(--dtz-bronze); background: var(--dtz-bronze-bg); }

.qcat-self[b-6veytaa3yo] {
    border-color: var(--dtz-bronze);
    background: var(--dtz-bronze-bg);
    font-weight: 800;
}

.qcat-self i[b-6veytaa3yo] { color: var(--dtz-success); }

.qcat-clear[b-6veytaa3yo] { color: var(--dtz-text-muted); font-weight: 600; }

.qcat-branch i[b-6veytaa3yo] { color: var(--dtz-bronze); }
/* /Components/Admin/QaAdminRow.razor.rz.scp.css */
/* Shared admin Q&A row. Big touch targets, high contrast (IS 5568 / WCAG AA).
   Used by the rav's queue and the published/archived archive alike. */

.qadmin-row[b-7qt62bonq8] {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    min-height: 84px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 12px;
    margin-bottom: .75rem;
    cursor: pointer;
    background: #fff;
    transition: background .12s, border-color .12s;
}

.qadmin-row:hover[b-7qt62bonq8] { background: var(--dtz-bg); border-color: var(--dtz-bronze); }

/* Archive split view: the row whose editor is open in the side panel. The inset
   accent sits on the inline-start edge (the right in RTL). */
.qadmin-row--selected[b-7qt62bonq8] {
    background: var(--dtz-bg);
    border-color: var(--dtz-bronze);
    box-shadow: inset 4px 0 0 0 var(--dtz-bronze);
}

.qadmin-row-main[b-7qt62bonq8] { flex: 1; min-width: 0; }

.qadmin-row-top[b-7qt62bonq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
}

.qadmin-asker[b-7qt62bonq8] {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--dtz-blue);
}

.qadmin-row-tags[b-7qt62bonq8] { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Pinned-management view: cluster the qid + pin chip right after the asker name
   (reads as one header line) instead of the default space-between, which strands
   them at the far edge once a full row shows an asker. */
.qadmin-row-top--grouped[b-7qt62bonq8] { justify-content: flex-start; }

/* Public Q&A number, shown at the head of the row (in the top tag cluster). */
.qadmin-qid[b-7qt62bonq8] {
    color: var(--dtz-blue);
    font-weight: 800;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* Pinned indicator — visible without opening the row. */
.qadmin-pin[b-7qt62bonq8] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--dtz-bronze);
    color: #fff;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

.qadmin-qtext[b-7qt62bonq8] {
    margin: 0 0 .4rem;
    font-size: 1.05rem;
    color: var(--dtz-text-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Answer preview — regular weight, muted, clamped so rows stay compact. */
.qadmin-atext[b-7qt62bonq8] {
    margin: 0 0 .4rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--dtz-blue-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The rav's full-size rows (queue + search results) grow to fit their content —
   the whole question and answer are shown, nothing clamped, so the rav reads it
   all without opening the row. The archive's compact rows keep their clamp (below)
   to stay dense. */
.qadmin-row:not(.qadmin-row--compact) .qadmin-qtext[b-7qt62bonq8],
.qadmin-row:not(.qadmin-row--compact) .qadmin-atext[b-7qt62bonq8] {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

/* Search-match highlight — <mark> arrives via MarkupString (it carries no scope
   attribute), so ::deep is required. Soft yellow background, text keeps its colour
   but turns bold — same as the public site (QasPage). */
.qadmin-qtext[b-7qt62bonq8]  mark,
.qadmin-atext[b-7qt62bonq8]  mark {
    background-color: var(--dtz-highlight);
    color: inherit;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

.qadmin-row-meta[b-7qt62bonq8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .95rem;
    color: var(--dtz-text-muted);
}

.qadmin-cat[b-7qt62bonq8] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--dtz-bronze-text);
    font-weight: 600;
}

.qadmin-cat-sep[b-7qt62bonq8] { font-size: .7rem; opacity: .6; }

/* Date sits on its own line, below the category. */
.qadmin-date[b-7qt62bonq8] {
    margin-top: .35rem;
    font-size: .9rem;
    color: var(--dtz-text-muted);
    font-variant-numeric: tabular-nums;
}

.qadmin-row-action[b-7qt62bonq8] { display: flex; align-items: center; }

.qadmin-publish-btn[b-7qt62bonq8] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 56px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 10px;
    background: var(--dtz-success);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.qadmin-publish-btn:disabled[b-7qt62bonq8] { opacity: .6; cursor: default; }

/* Unpin button (pinned-management page) — outlined bronze so it reads as a
   "remove" action without competing with the green publish button. */
.qadmin-unpin-btn[b-7qt62bonq8] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 56px;
    padding: 0 1.25rem;
    border: 1.5px solid var(--dtz-bronze);
    border-radius: 10px;
    background: #fff;
    color: var(--dtz-bronze-text);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.qadmin-unpin-btn:hover:not(:disabled)[b-7qt62bonq8] { background: var(--dtz-bronze); color: #fff; }
.qadmin-unpin-btn:disabled[b-7qt62bonq8] { opacity: .6; cursor: default; }

/* Compact archive row: no asker/date, smaller text, tighter spacing — fits more
   rows in the list column (the dropped details all live in the side panel). */
.qadmin-row--compact[b-7qt62bonq8] {
    min-height: 0;
    padding: .55rem .8rem;
    margin-bottom: .4rem;
    gap: .6rem;
}

.qadmin-row--compact .qadmin-row-top[b-7qt62bonq8] { margin-bottom: .25rem; }
.qadmin-row--compact .qadmin-qid[b-7qt62bonq8] { font-size: .85rem; }

/* Scale the pin tag down with the rest of the compact row (it's otherwise sized
   for the rav's big rows and dominates the dense archive list). */
.qadmin-row--compact .qadmin-pin[b-7qt62bonq8] {
    font-size: .72rem;
    padding: .2rem .5rem;
    gap: .25rem;
}

.qadmin-row--compact .qadmin-qtext[b-7qt62bonq8] {
    font-size: .9rem;
    margin-bottom: .25rem;
}

.qadmin-row--compact .qadmin-atext[b-7qt62bonq8] {
    font-size: .82rem;
    -webkit-line-clamp: 1;
    margin-bottom: .25rem;
}

.qadmin-row--compact .qadmin-row-meta[b-7qt62bonq8] { font-size: .8rem; }
/* /Components/Admin/QaArchiveEditor.razor.rz.scp.css */
/* Compact side-panel editor for the published Q&A archive split view.
   Denser than the rav's full-page editor on purpose — the archive is a
   power-use tagging/editing surface, not the elderly rav's answer screen. */

.qaed[b-arijclf9ry] {
    font-size: 15px;
    color: var(--dtz-text-dark);
}

.qaed-loading[b-arijclf9ry] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.qaed-notfound[b-arijclf9ry] {
    text-align: center;
    color: var(--dtz-text-muted);
    padding: 2rem 1rem;
}

/* Top bar: prev/next on the start side, tags in the middle, close on the end. */
.qaed-bar[b-arijclf9ry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.qaed-nav[b-arijclf9ry] { display: inline-flex; gap: .4rem; }

.qaed-navbtn[b-arijclf9ry] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 38px;
    padding: 0 .8rem;
    border: 1.5px solid var(--dtz-bronze);
    border-radius: 8px;
    background: #fff;
    color: var(--dtz-blue);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
}

.qaed-navbtn:hover:not(:disabled)[b-arijclf9ry] { background: var(--dtz-bg); }
.qaed-navbtn:disabled[b-arijclf9ry] { opacity: .4; cursor: default; }

.qaed-pin[b-arijclf9ry] {
    color: var(--dtz-bronze);
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
}

.qaed-close[b-arijclf9ry] {
    border: 0;
    background: transparent;
    color: var(--dtz-text-muted);
    font-size: 1.1rem;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
}

.qaed-close:hover[b-arijclf9ry] { background: var(--dtz-bg); color: var(--dtz-blue); }

.qaed-saved[b-arijclf9ry] {
    color: var(--dtz-success);
    font-weight: 700;
    margin-bottom: .5rem;
}

.qaed-alert[b-arijclf9ry] {
    background: #fdecea;
    color: #b3261e;
    border-radius: 8px;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    font-weight: 600;
}

.qaed-meta[b-arijclf9ry] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    color: var(--dtz-text-muted);
    font-size: .9rem;
    margin-bottom: .75rem;
}

.qaed-meta b[b-arijclf9ry] { color: var(--dtz-blue); font-weight: 700; }

/* Question + answer read as plain text and reveal a field affordance on
   hover/focus — the same in-place edit feel as the rav's question box. Height
   follows the content (auto-grow.js), so there is no fixed-size box. */
.qaed-text[b-arijclf9ry] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.7;
    color: var(--dtz-text-dark);
    direction: rtl;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: .25rem .65rem;
    margin: 0 -.65rem;          /* keep the text visually flush despite padding */
    resize: none;
    overflow: hidden;           /* auto-grow owns the height — no inner scrollbar */
    transition: border-color .12s, background .12s, box-shadow .12s;
}

.qaed-text:hover[b-arijclf9ry] { border-color: var(--dtz-bronze-border); background: var(--dtz-bg); }

.qaed-text:focus[b-arijclf9ry] {
    outline: none;
    border-color: var(--dtz-bronze);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--dtz-bronze-rgb), .18);
}

/* The question reads bold (blue); the answer regular, separated by a gap — no labels. */
.qaed-text--q[b-arijclf9ry] { font-size: 1.05rem; font-weight: 700; color: var(--dtz-blue); }
.qaed-text--a[b-arijclf9ry] { font-size: 1.05rem; margin-top: .15rem; }

.qaed-cats[b-arijclf9ry] { margin: 1.1rem 0; }

.qaed-actions[b-arijclf9ry] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dtz-bronze-border);
}

.qaed-btn[b-arijclf9ry] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 9px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
}

.qaed-btn:disabled[b-arijclf9ry] { opacity: .55; cursor: default; }

.qaed-btn--save[b-arijclf9ry] { background: var(--dtz-success); color: #fff; }
.qaed-btn--pin[b-arijclf9ry] {
    background: #fff;
    color: var(--dtz-blue);
    border: 1.5px solid var(--dtz-bronze);
}
.qaed-btn--delete[b-arijclf9ry] {
    margin-inline-start: auto;
    background: #fff;
    color: #b3261e;
    border: 1.5px solid #e6a9a3;
}

/* Other Q&As by the same asker — collapsed by default, loaded on expand. */
.qaed-others[b-arijclf9ry] { margin-top: 1.25rem; }

.qaed-others-toggle[b-arijclf9ry] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    color: var(--dtz-blue);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    padding: .25rem 0;
}

.qaed-others-toggle:hover[b-arijclf9ry] { color: var(--dtz-bronze-text); }

.qaed-others-loading[b-arijclf9ry],
.qaed-others-empty[b-arijclf9ry] {
    color: var(--dtz-text-muted);
    font-size: .9rem;
    padding: .5rem .25rem;
}

.qaed-others-list[b-arijclf9ry] {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.qaed-other[b-arijclf9ry] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .7rem;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 9px;
    cursor: pointer;
    background: #fff;
    transition: background .12s, border-color .12s;
}

.qaed-other:hover[b-arijclf9ry] { background: var(--dtz-bg); border-color: var(--dtz-bronze); }

.qaed-other-q[b-arijclf9ry] {
    flex: 1;
    min-width: 0;
    font-size: .95rem;
    color: var(--dtz-text-dark);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.qaed-other-qid[b-arijclf9ry] {
    flex-shrink: 0;
    color: var(--dtz-blue);
    font-weight: 700;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/Admin/QaCategoryPicker.razor.rz.scp.css */
/* Staged category picker — large buttons, one level at a time (§13.5). */

.qcat-current[b-qvcj24j391] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: 1.1rem;
}

.qcat-current-label[b-qvcj24j391] {
    font-weight: 700;
    color: var(--dtz-blue);
    margin-inline-end: .25rem;
}

/* Empty state: the whole row is one dashed "add category" button. */
.qcat-add-empty[b-qvcj24j391] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 1.25rem;
    border: 2px dashed var(--dtz-bronze-border);
    background: #fff;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dtz-blue);
    cursor: pointer;
}

.qcat-add-empty:hover[b-qvcj24j391] {
    border-style: solid;
    border-color: var(--dtz-bronze);
    background: var(--dtz-bronze-bg);
}

.qcat-add-empty i[b-qvcj24j391] { color: var(--dtz-bronze); }

/* Selected category — a removable pill carrying the full path. */
.qcat-chip[b-qvcj24j391] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    padding-block: .3rem;
    padding-inline: .85rem .3rem;   /* text side roomier, ✕ (end) side tighter */
    border: 1.5px solid var(--dtz-bronze-border);
    background: var(--dtz-bronze-bg);
    border-radius: 999px;
}

.qcat-chip-path[b-qvcj24j391] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--dtz-bronze-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qcat-chip-x[b-qvcj24j391] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze-text);
    font-size: .8rem;
    cursor: pointer;
}

.qcat-chip-x:hover[b-qvcj24j391] { background: var(--dtz-bronze); color: #fff; }

/* Compact add/close toggle that lives at the end of the chips row. */
.qcat-add-chip[b-qvcj24j391] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 40px;
    padding: 0 .8rem;
    border: 1.5px dashed var(--dtz-bronze-border);
    background: #fff;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dtz-blue);
    cursor: pointer;
}

.qcat-add-chip:hover[b-qvcj24j391] {
    border-style: solid;
    border-color: var(--dtz-bronze);
    background: var(--dtz-bronze-bg);
}

.qcat-add-chip i[b-qvcj24j391] { color: var(--dtz-bronze); }

.qcat-add-chip--on[b-qvcj24j391] {
    border-style: solid;
    border-color: var(--dtz-bronze);
    background: var(--dtz-bronze-bg);
}

.qcat-stage[b-qvcj24j391] {
    margin-top: 1rem;
    border: 2px solid var(--dtz-bronze);
    border-radius: 12px;
    padding: 1rem;
    background: var(--dtz-bg);
}

/* Live search box — a shortcut above the drilldown. */
.qcat-search-row[b-qvcj24j391] {
    position: relative;
    margin-bottom: .9rem;
}

.qcat-search-icon[b-qvcj24j391] {
    position: absolute;
    inset-inline-start: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dtz-bronze);
    font-size: .95rem;
    pointer-events: none;
}

.qcat-search[b-qvcj24j391] {
    width: 100%;
    min-height: 48px;
    padding-block: 0;
    padding-inline: 2.4rem 1rem;   /* room for the leading search icon */
    border: 2px solid var(--dtz-bronze-border);
    border-radius: 10px;
    background: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dtz-blue);
}

.qcat-search:focus[b-qvcj24j391] {
    outline: none;
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 3px var(--dtz-bronze-bg);
}

.qcat-search[b-qvcj24j391]::placeholder { color: var(--dtz-muted, #8a8a8a); font-weight: 500; }

/* Flat search results — reuse .qcat-option, add a full-path layout. */
.qcat-results[b-qvcj24j391] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.qcat-result-path[b-qvcj24j391] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem;
    font-weight: 500;
    color: var(--dtz-bronze-text);
}

.qcat-result-sep[b-qvcj24j391] { color: var(--dtz-bronze); }

.qcat-result-leaf[b-qvcj24j391] { font-weight: 800; color: var(--dtz-blue); }

.qcat-result i[b-qvcj24j391] { color: var(--dtz-success); }

.qcat-no-results[b-qvcj24j391] {
    padding: 1rem;
    text-align: center;
    color: var(--dtz-bronze-text);
    font-weight: 600;
}

.qcat-stage-head[b-qvcj24j391] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .9rem;
}

.qcat-up[b-qvcj24j391] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 48px;
    padding: 0 1rem;
    border: 2px solid var(--dtz-bronze);
    background: #fff;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.qcat-stage-where[b-qvcj24j391] { font-weight: 700; color: var(--dtz-bronze-text); font-size: 1.05rem; }

.qcat-options[b-qvcj24j391] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.qcat-option[b-qvcj24j391] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: 56px;
    padding: 0 1.25rem;
    border: 2px solid var(--dtz-bronze-border);
    background: #fff;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dtz-blue);
    text-align: start;
    cursor: pointer;
}

.qcat-option:hover[b-qvcj24j391] { border-color: var(--dtz-bronze); background: var(--dtz-bronze-bg); }

.qcat-self[b-qvcj24j391] {
    border-color: var(--dtz-bronze);
    background: var(--dtz-bronze-bg);
    font-weight: 800;
}

.qcat-self i[b-qvcj24j391] { color: var(--dtz-success); }

.qcat-branch i[b-qvcj24j391] { color: var(--dtz-bronze); }

/* ── Compact variant — the archive's side panel ─────────────────────────────
   The rav's full-page editor keeps the big accessible defaults above; the
   archive (Compact="true") tightens fonts, paddings and button heights so the
   picker fits a dense, browse-many-rows panel. */
.qcat-picker--compact .qcat-current[b-qvcj24j391] { gap: .4rem; font-size: .95rem; }

.qcat-picker--compact .qcat-add-empty[b-qvcj24j391] {
    min-height: 36px;
    padding: 0 .9rem;
    border-width: 1.5px;
    border-radius: 8px;
    font-size: .9rem;
}

.qcat-picker--compact .qcat-chip[b-qvcj24j391] { padding-block: .2rem; padding-inline: .65rem .25rem; }
.qcat-picker--compact .qcat-chip-path[b-qvcj24j391] { font-size: .85rem; }
.qcat-picker--compact .qcat-chip-x[b-qvcj24j391] { width: 19px; height: 19px; font-size: .72rem; }

.qcat-picker--compact .qcat-add-chip[b-qvcj24j391] {
    min-height: 30px;
    min-width: 34px;
    padding: 0 .6rem;
    font-size: .9rem;
}

.qcat-picker--compact .qcat-stage[b-qvcj24j391] {
    margin-top: .6rem;
    border-width: 1.5px;
    border-radius: 9px;
    padding: .65rem;
}

.qcat-picker--compact .qcat-search-row[b-qvcj24j391] { margin-bottom: .6rem; }

.qcat-picker--compact .qcat-search[b-qvcj24j391] {
    min-height: 36px;
    padding-inline: 2.1rem .8rem;
    border-width: 1.5px;
    border-radius: 8px;
    font-size: .92rem;
}

.qcat-picker--compact .qcat-search-icon[b-qvcj24j391] { inset-inline-start: .7rem; font-size: .85rem; }

.qcat-picker--compact .qcat-results[b-qvcj24j391] { gap: .4rem; }

.qcat-picker--compact .qcat-no-results[b-qvcj24j391] { padding: .65rem; font-size: .9rem; }

.qcat-picker--compact .qcat-stage-head[b-qvcj24j391] { gap: .6rem; margin-bottom: .6rem; }

.qcat-picker--compact .qcat-up[b-qvcj24j391] {
    min-height: 34px;
    padding: 0 .7rem;
    border-width: 1.5px;
    border-radius: 8px;
    font-size: .85rem;
}

.qcat-picker--compact .qcat-stage-where[b-qvcj24j391] { font-size: .9rem; }

.qcat-picker--compact .qcat-options[b-qvcj24j391] { gap: .4rem; }

.qcat-picker--compact .qcat-option[b-qvcj24j391] {
    min-height: 40px;
    padding: 0 .85rem;
    border-width: 1.5px;
    border-radius: 8px;
    font-size: .92rem;
}
/* /Components/Admin/QaStatusChip.razor.rz.scp.css */
.chip[b-t8lmkc9cyj] {
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.chip--pending[b-t8lmkc9cyj]   { background: var(--dtz-blue); }
.chip--draft[b-t8lmkc9cyj]     { background: var(--dtz-text-muted); }
.chip--answered[b-t8lmkc9cyj]  { background: var(--dtz-bronze); }
.chip--published[b-t8lmkc9cyj] { background: var(--dtz-success); }
/* /Components/AskQuestionForm.razor.rz.scp.css */
/* The wrapper is transparent to layout so the host's chrome (home card flex /
   sidebar accordion box) frames the fields exactly as before. It still serves
   as the scope anchor for ::deep field styling and the --compact modifier. */
.ask-form[b-gxvqx0vtwv] {
    display: contents;
}

/* ── Heading (home variant) ───────────────────────────────────────────── */
.ask-form-heading[b-gxvqx0vtwv] {
    width: 100%;
    text-align: right;
    margin-top: 2rem;
}

/* ── Intro paragraph ──────────────────────────────────────────────────── */
.ask-form-intro[b-gxvqx0vtwv] {
    text-align: right;
    margin-bottom: 2rem;
}
.ask-form--compact .ask-form-intro[b-gxvqx0vtwv] {
    margin: 0.25rem 0 0.5rem;
    font-size: 13px;
    line-height: 1.4;
}

/* ── Fields ───────────────────────────────────────────────────────────── */
/* Full width even when the home form centers its items (align-items-center). */
.ask-form-fields > .ask-form-group[b-gxvqx0vtwv] {
    width: 100%;
    margin-top: 0.5rem;
}
/* The home form gives its first field a little more breathing room on ≥sm. */
@media (min-width: 576px) {
    .ask-form:not(.ask-form--compact) .ask-form-fields > .ask-form-group:first-of-type[b-gxvqx0vtwv] {
        margin-top: 1rem;
    }
}
/* Tighter label spacing in the compact (sidebar) variant. */
.ask-form--compact .ask-form-group label[b-gxvqx0vtwv] {
    margin-bottom: 0.25rem;
}

/* Bronze field borders. ::deep because the fields are Blazor
   <InputText>/<InputTextArea> whose <input> is rendered by the child. */
.ask-form[b-gxvqx0vtwv]  .form-control {
    border: 1px solid var(--dtz-bronze);
}
.ask-form[b-gxvqx0vtwv]  .form-control:focus {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.18);
}

/* ── Char counter hint ────────────────────────────────────────────────── */
.ask-form-charhint[b-gxvqx0vtwv] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--dtz-neutral);
}
/* Stands out the moment the writer goes over the limit. */
.ask-form-charhint--over[b-gxvqx0vtwv] {
    color: var(--dtz-danger);
    font-weight: 700;
}

/* ── Success message ──────────────────────────────────────────────────── */
.ask-form-success i[b-gxvqx0vtwv] {
    color: var(--dtz-bronze);
}
/* /Components/BackToTop.razor.rz.scp.css */
/* Floating "back to top" FAB. Hidden by default; the .back-to-top--visible
   class is toggled from JS based on scroll position so the button only
   appears once it's actually useful. */
.back-to-top[b-pqvkrri9ao] {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;            /* visually LEFT in the RTL site (RTL trailing corner) */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--dtz-bronze);
    color: #ffffff;
    border: 0;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(var(--dtz-blue-rgb), 0.20);
    cursor: pointer;
    z-index: 1040;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease,
                background 0.15s ease, box-shadow 0.2s ease;
}

.back-to-top.back-to-top--visible[b-pqvkrri9ao] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover[b-pqvkrri9ao] {
    background: var(--dtz-bronze-hover);
    box-shadow: 0 6px 16px rgba(var(--dtz-blue-rgb), 0.28);
    transform: translateY(-2px);
}

.back-to-top:focus-visible[b-pqvkrri9ao] {
    outline: 2px solid var(--dtz-blue);
    outline-offset: 3px;
}

/* Respect users who prefer reduced motion — no lift/fade transitions. */
@media (prefers-reduced-motion: reduce) {
    .back-to-top[b-pqvkrri9ao] {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .back-to-top:hover[b-pqvkrri9ao] {
        transform: none;
    }
}
/* /Components/BookCard.razor.rz.scp.css */
/* Scoped styles for the reusable BookCard component (migrated from the former
   global app-shop.css). Every selector targets markup rendered by BookCard, so
   plain scoped selectors match. .font-book-title and .dtz-book-badge-lg are NOT
   here — they are shared with admin / book-detail and stay global. */

/* Card wrapper surface + body padding (formerly the demo-fold .book .card rules,
   still active because the card sits inside a <div class="book ...">). */
.book[b-rp3xs03ppa] { max-width: 280px; margin-inline: auto; }
.book .card[b-rp3xs03ppa] { background-color: #ffffff; }
.book .card-body[b-rp3xs03ppa] { padding-top: 10px; padding-right: 0; }

/* ===== Book card ===== */
.dtz-book-card[b-rp3xs03ppa] {
    position: relative;
    border: 2px solid var(--dtz-bronze) !important;
    border-radius: 4px;
    /* No overflow:hidden — the circle arrow extends below the bottom border. */
    transition: box-shadow var(--hover-transition-slow), transform var(--hover-transition-slow);
}
@media (hover: hover) {
    .dtz-book-card:hover[b-rp3xs03ppa] {
        box-shadow: var(--hover-shadow-card) !important;
        transform: translateY(-2px);
    }
}
/* Cover keeps a fixed 3:4 (width:height) ratio at every screen width, so the
   card scales as one piece — shrinking the screen shrinks both axes together. */
.dtz-book-img[b-rp3xs03ppa] {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    /* Image rounds itself since the card no longer clips. */
    border-radius: 2px;
    display: block;
}
/* Landscape covers can't fill the 3:4 frame without losing their sides, so the
   JS orientation helper (book-image-orientation.js) marks them and we show the
   whole image letterboxed instead of cropping. The card surface is already
   white, so the letterbox gutters read as natural padding, not visible bars. */
.dtz-book-img--wide[b-rp3xs03ppa] {
    object-fit: contain;
}
.dtz-book-img-placeholder[b-rp3xs03ppa] {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 2px;
}
/* Arrow sits centered on the card's bottom border line. The white box-shadow
   "halo" eats into the bronze border, creating the gap seen in the design. */
.dtz-circle-btn[b-rp3xs03ppa] {
    position: absolute;
    bottom: -19px;
    left: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dtz-bronze);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 0 0 4px #fff;
    z-index: 2;
    transition: background var(--hover-transition);
}
.dtz-circle-btn img[b-rp3xs03ppa] { width: 14px; height: auto; display: block; }
@media (hover: hover) {
    .dtz-book-card:hover .dtz-circle-btn[b-rp3xs03ppa] { background: var(--dtz-blue); }
}
/* Corner badge ("רב מכר", "מלאי מוגבל" …). Colors are inlined per-instance. */
.dtz-book-badge[b-rp3xs03ppa] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    font-family: 'Heebo', Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    white-space: nowrap;
    pointer-events: none;
}
/* Card body (title + price) sits below the bordered card. Small top margin
   leaves just enough air for the arrow that protrudes past the bottom border. */
.dtz-book-card + .card-body[b-rp3xs03ppa] { margin-top: 6px; }

.book-price[b-rp3xs03ppa] {
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--dtz-blue);
    margin-bottom: 0;
    text-align: right;
}

/* Sale: the paid price stays the blue lead; the original sits just after it
   (to its left in RTL), smaller and crossed out in muted gray. */
.book-price-sale[b-rp3xs03ppa] { font-weight: 600; }
.book-price-original[b-rp3xs03ppa] {
    margin-inline-start: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--dtz-text-muted);
    text-decoration: line-through;
}
/* /Components/BookCategoryCard.razor.rz.scp.css */
.dtz-cat-banner[b-18bwl0sco4] {
    border: 2px solid var(--dtz-bronze) !important;
    cursor: pointer;
    transition: box-shadow var(--hover-transition-slow), transform var(--hover-transition-slow);
}
@media (hover: hover) {
    .dtz-cat-banner:hover[b-18bwl0sco4] {
        box-shadow: var(--hover-shadow-card);
        transform: translateY(-2px);
    }
}
.dtz-cat-banner .card-img img[b-18bwl0sco4] {
    width: 100%;
    height: auto;
}
.dtz-cat-banner-title[b-18bwl0sco4] {
    font-size: 26px;
    line-height: 1.2;
    padding: 4px;
}
@media (min-width: 768px) {
    .dtz-cat-banner-title[b-18bwl0sco4] { font-size: 30px; }
}
@media (min-width: 1200px) {
    .dtz-cat-banner-title[b-18bwl0sco4] { font-size: 34px; }
}
.dtz-cat-banner .card-body[b-18bwl0sco4] {
    padding-top: 0;
    padding-bottom: 1.25rem;
}
@media (min-width: 992px) {
    .dtz-cat-banner .card-body[b-18bwl0sco4] { padding-bottom: 1.5rem; }
}
/* /Components/BooksFilterBar.razor.rz.scp.css */
/* ── Search + sort + tag row ────────────────────────────────────────────────
   The whole row is capped and centered so it never stretches edge-to-edge on
   wide screens. Search grows to fill the rest (capped), the two dropdowns keep
   a fixed width; all three share one height and wrap on narrow screens. */
.books-controls[b-77jn5rlz5v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto;
}

.books-search[b-77jn5rlz5v] {
    position: relative;
    flex: 1 1 240px;
    max-width: 320px;
}

.books-search-icon[b-77jn5rlz5v] {
    position: absolute;
    /* inline-start = the RIGHT edge in RTL, where the text begins. */
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dtz-bronze);
    font-size: 14px;
    pointer-events: none;
}

.books-search-input[b-77jn5rlz5v] {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: #fff;
    /* Logical padding: start always leaves room for the search icon; end gets
       the wide 38px only when the × clear button is present. */
    padding-block: 0;
    padding-inline-start: 40px;
    padding-inline-end: 14px;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    color: var(--dtz-blue);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.books-search--clearable .books-search-input[b-77jn5rlz5v] {
    padding-inline-end: 38px;
}

.books-search-input:focus[b-77jn5rlz5v] {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.2);
}

/* Hide the browser's native search clear button — we render our own. */
.books-search-input[b-77jn5rlz5v]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.books-search-clear[b-77jn5rlz5v] {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.books-search-clear:hover[b-77jn5rlz5v] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

/* Sort + tag-filter dropdowns share one look; both sit left of the search. */
.books-select[b-77jn5rlz5v] {
    flex: 0 0 auto;
    width: auto;
    height: 36px;
    box-sizing: border-box;
    padding-block: 0;
    min-width: 170px;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    color: var(--dtz-blue);
    border-color: var(--dtz-bronze);
}

.books-select:focus[b-77jn5rlz5v] {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.2);
}
/* /Components/Breadcrumb.razor.rz.scp.css */
/* Breadcrumb.razor — bare secondary nav under the navbar (no background band).
   Colours + RTL chevron divider live in app-utilities.css (.breadcrumb); here we
   only shrink it to a "secondary" weight and give it breathing room. The scoped
   [b-*] attribute outweighs the global .breadcrumb rule, so these win. */

.dtz-breadcrumb[b-7mrsu8k49s] {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

/* Secondary text size — lighter than the 20px used inside the old band. The
   chevron divider is re-declared smaller here so it stays proportional to the
   shrunk text (the global one is sized for 20px). */
.breadcrumb[b-7mrsu8k49s] {
    font-size: 15px;
    line-height: 1.6;
    flex-wrap: wrap;
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' fill='none' stroke='%234b465c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
}

.breadcrumb-item.active[b-7mrsu8k49s] {
    font-weight: 500;
}

/* No resting underline on the crumb links (browser default) — hover underline
   still comes from app-interactions.css. */
.breadcrumb-item a[b-7mrsu8k49s] {
    text-decoration: none;
}
/* /Components/ChannelPlayer.razor.rz.scp.css */
/* Channel sequence player — "now playing" header, the media stage, and transport. */

.channel-player[b-k72an3xin1] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(var(--dtz-blue-rgb), .10);
}

.cp-now[b-k72an3xin1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.cp-now-label[b-k72an3xin1] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--dtz-bronze-text);
    background: var(--dtz-bronze-bg);
    border-radius: 999px;
    padding: 3px 10px;
}

.cp-now-title[b-k72an3xin1] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--dtz-blue);
    line-height: 1.25;
}

.cp-now-date[b-k72an3xin1] {
    color: var(--dtz-blue-muted);
    font-size: 14px;
}

/* The media surface. In video mode it is a 16:9 box holding the YouTube/Vimeo
   iframe; in audio mode it collapses to the height of the native audio bar. */
.channel-stage[b-k72an3xin1] {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
}

.channel-stage.is-video[b-k72an3xin1] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--dtz-text-dark);
}

/* The JS-created children (::deep — they are not part of this component's markup). */
.channel-stage.is-video[b-k72an3xin1]  .channel-yt,
.channel-stage.is-video[b-k72an3xin1]  .channel-vimeo,
.channel-stage.is-video[b-k72an3xin1]  iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* In video mode the audio element is hidden; in audio mode the video hosts are. */
.channel-stage.is-video[b-k72an3xin1]  .channel-audio { display: none; }
.channel-stage.is-audio[b-k72an3xin1]  .channel-yt,
.channel-stage.is-audio[b-k72an3xin1]  .channel-vimeo,
.channel-stage.is-audio[b-k72an3xin1]  iframe { display: none; }

/* Match the single-lesson page's audio player: a white "well" with a light bronze
   border so it reads clearly as audio (LessonDetailPage.razor.css .lesson-audio-card). */
.channel-stage.is-audio[b-k72an3xin1]  .channel-audio {
    display: block;
    width: 100%;
    height: 44px;
    background-color: #fff;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 8px;
}

.channel-stage.is-audio[b-k72an3xin1]  .channel-audio::-webkit-media-controls-panel {
    background-color: #fff;
}

.cp-novideo[b-k72an3xin1] {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--dtz-blue-muted);
}

.cp-novideo .fa-circle-info[b-k72an3xin1] { margin-inline-end: 6px; color: var(--dtz-bronze); }

.cp-transport[b-k72an3xin1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.cp-btn[b-k72an3xin1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--dtz-bronze-border);
    background: var(--dtz-bg);
    color: var(--dtz-blue);
    font-size: 16px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.cp-btn:hover:not(:disabled)[b-k72an3xin1] {
    background: var(--dtz-bronze-bg);
    border-color: var(--dtz-bronze);
}

.cp-btn:disabled[b-k72an3xin1] { opacity: .4; cursor: default; }

/* The audio/video segmented toggle, pushed to the far (leading-in-RTL) edge. */
.cp-mode[b-k72an3xin1] {
    margin-inline-start: auto;
    display: inline-flex;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 999px;
    overflow: hidden;
}

.cp-mode-btn[b-k72an3xin1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    background: var(--dtz-bg);
    color: var(--dtz-blue-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.cp-mode-btn.active[b-k72an3xin1] {
    background: var(--dtz-blue);
    color: #fff;
}

.cp-empty[b-k72an3xin1] {
    text-align: center;
    color: var(--dtz-blue-muted);
    padding: 24px;
    margin: 0;
}
/* /Components/Layout/AnnouncementCard.razor.rz.scp.css */
/* AnnouncementCard — site-wide promotional slide-in card (e.g. a new-book poster).
   Sits in a bottom corner, slides in shortly after load, and never blocks the page.
   To move it to the right corner, swap `left` for `right` in .ann-card (+ the mobile
   block). The card shows the poster image at its natural aspect ratio, so upload an
   image that already looks the way it should (recommended width ~640px). */

/* Outer card — fixed position, the persistent pulsing glow, and the hover lift.
   Entrance + sheen live on .ann-card-inner so they don't fight the glow/hover. */
.ann-card[b-ks7giudn1x] {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1050;
    width: 200px;
    max-width: calc(100vw - 32px);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(var(--dtz-blue-rgb), .28);
    transition: transform .18s ease;
    animation: ann-glow-b-ks7giudn1x 2.2s ease-in-out infinite;
}

/* Hover affordance for the clickable card — only on real pointers, so it can't
   override the translateX(-50%) centering used on phones. */
@media (hover: hover) {
    .ann-card:hover[b-ks7giudn1x] { transform: translateY(-4px) scale(1.03); }
}

/* Persistent: a soft bronze glow that gently breathes to draw the eye. */
@keyframes ann-glow-b-ks7giudn1x {
    0%, 100% { box-shadow: 0 12px 36px rgba(var(--dtz-blue-rgb), .28), 0 0 0 0 rgba(var(--dtz-bronze-rgb), 0); }
    50%      { box-shadow: 0 12px 36px rgba(var(--dtz-blue-rgb), .28), 0 0 20px 5px rgba(var(--dtz-bronze-rgb), .6); }
}

/* Inner — rounds/clips the poster, fades in on appear, and sweeps a light streak once. */
.ann-card-inner[b-ks7giudn1x] {
    position: relative;
    background: #fff;
    border: 1px solid rgba(var(--dtz-blue-rgb), .12);
    border-radius: 14px;
    overflow: hidden;
    animation: ann-fade-b-ks7giudn1x .45s ease both;
}

.ann-card-inner[b-ks7giudn1x]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
    transform: translateX(-130%);
    animation: ann-sheen-b-ks7giudn1x 1.1s ease .3s 1 both;
}

@keyframes ann-fade-b-ks7giudn1x {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ann-sheen-b-ks7giudn1x {
    to { transform: translateX(130%); }
}

/* The whole poster is a button that opens the large view. */
.ann-trigger[b-ks7giudn1x] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.ann-img[b-ks7giudn1x] {
    display: block;
    width: 100%;
    height: auto;
}

/* Close button — circular, floats over the top corner of the poster. */
.ann-close[b-ks7giudn1x] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ann-close:hover[b-ks7giudn1x] {
    background: rgba(0, 0, 0, .78);
}

/* ===== Large (lightbox) view — opens on click, never on entry ===== */
.ann-overlay[b-ks7giudn1x] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .78);
}

/* The modal hugs the poster (no white frame, no side letterboxing): the image
   defines its size, and the button sits below it on the dark backdrop. */
.ann-modal[b-ks7giudn1x] {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: ann-zoom-b-ks7giudn1x .25s ease both;
}

.ann-modal-img[b-ks7giudn1x] {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 72vh;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

.ann-modal-close[b-ks7giudn1x] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ann-modal-close:hover[b-ks7giudn1x] {
    background: rgba(0, 0, 0, .8);
}

/* Styling comes from the site-wide DTZ button system (.dtz-btn .dtz-btn-secondary).
   Here we only space it off the poster and give it a little presence on the backdrop. */
.ann-cta[b-ks7giudn1x] {
    margin-top: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

@keyframes ann-zoom-b-ks7giudn1x {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* On phones, center a slightly narrower card along the bottom so it doesn't
   crowd one side or cover the whole screen. */
@media (max-width: 575.98px) {
    .ann-card[b-ks7giudn1x] {
        left: 50%;
        right: auto;
        bottom: 12px;
        width: calc(100vw - 24px);
        max-width: 220px;
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ann-card[b-ks7giudn1x],
    .ann-card-inner[b-ks7giudn1x],
    .ann-modal[b-ks7giudn1x] { animation: none; }
    .ann-card-inner[b-ks7giudn1x]::after { animation: none; opacity: 0; }
    .ann-card:hover[b-ks7giudn1x] { transform: none; }
}
/* /Components/Layout/CartFlyout.razor.rz.scp.css */
/* Scoped styles for the mini-cart flyout (migrated from the former global
   app-shop.css). All elements are rendered directly by CartFlyout. The
   .cart-icon-wrapper that anchors this popup lives in app-navbar.css with the
   rest of the header chrome. */

.cart-flyout-overlay[b-tg2rqdjjxl] {
    position: fixed; inset: 0;
    background: transparent;
    z-index: 1080;
}
.cart-flyout[b-tg2rqdjjxl] {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1090;
    width: 300px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    padding: 28px 16px 14px;
    box-shadow: 0 8px 20px rgba(var(--dtz-blue-rgb), 0.18);
    animation: dtzFlyoutPop-b-tg2rqdjjxl 0.18s ease;
    text-align: right;
}
.cart-flyout-empty[b-tg2rqdjjxl] { color: var(--dtz-text-muted); }
.cart-flyout-close[b-tg2rqdjjxl] {
    position: absolute;
    top: 6px;
    left: 8px;
    background: transparent;
    border: none;
    color: var(--dtz-text-muted);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color var(--hover-transition), color var(--hover-transition);
}
.cart-flyout-close:hover[b-tg2rqdjjxl] { background: var(--hover-overlay-blue); color: var(--dtz-blue); }
.cart-flyout-close:focus[b-tg2rqdjjxl] { outline: none; }
.cart-flyout-close:focus-visible[b-tg2rqdjjxl] { box-shadow: var(--focus-ring); }

.cart-flyout-items[b-tg2rqdjjxl] { max-height: 260px; overflow-y: auto; }
.cart-flyout-item[b-tg2rqdjjxl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.cart-flyout-item-remove[b-tg2rqdjjxl] {
    background: transparent;
    border: none;
    color: var(--dtz-text-muted);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: color var(--hover-transition), background-color var(--hover-transition);
}
.cart-flyout-item-remove:hover[b-tg2rqdjjxl] { color: var(--dtz-blue); background: var(--hover-overlay-blue); }
.cart-flyout-item-remove:focus[b-tg2rqdjjxl] { outline: none; }
.cart-flyout-item-remove:focus-visible[b-tg2rqdjjxl] { box-shadow: var(--focus-ring); }

.cart-flyout-item-thumb[b-tg2rqdjjxl] {
    width: 46px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cart-flyout-item-thumb img[b-tg2rqdjjxl] { width: 100%; height: 100%; object-fit: contain; }
.cart-flyout-item-thumb i[b-tg2rqdjjxl]   { color: var(--dtz-bronze); font-size: 18px; }

.cart-flyout-item-info[b-tg2rqdjjxl] { flex: 1; min-width: 0; }
.cart-flyout-item-name[b-tg2rqdjjxl] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dtz-blue);
}
.cart-flyout-item-color[b-tg2rqdjjxl] { font-size: 12px; color: var(--dtz-text-muted); margin-top: 2px; }
.cart-flyout-item-meta[b-tg2rqdjjxl]  { font-size: 13px; color: var(--dtz-text-muted); margin-top: 2px; }
.cart-flyout-more[b-tg2rqdjjxl]       { font-size: 12px; color: var(--dtz-text-muted); padding: 6px 0 0; }

.cart-flyout-sum[b-tg2rqdjjxl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--dtz-bronze-border);
    font-size: 14px;
    color: var(--dtz-text-muted);
}
.cart-flyout-sum-label[b-tg2rqdjjxl]   { font-size: 14px; color: var(--dtz-text-muted); }
.cart-flyout-sum-value[b-tg2rqdjjxl]   { font-size: 14px; color: var(--dtz-text-muted); font-weight: 400; }
.cart-flyout-shipping-note[b-tg2rqdjjxl] { font-size: 13px; color: var(--dtz-text-muted); margin-top: 4px; }

.cart-flyout-actions[b-tg2rqdjjxl] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--dtz-bronze-border);
}
/* The two flyout actions sit side by side, each filling half the row. */
.cart-flyout-actions .dtz-btn[b-tg2rqdjjxl] { flex: 1; }

@keyframes dtzFlyoutPop-b-tg2rqdjjxl {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* /Components/Layout/ChannelDock.razor.rz.scp.css */
/* Site-wide corner channel player. Floats at the bottom-start corner; the embedded
   ChannelPlayer is compacted via ::deep (its elements are scoped to that component). */

.channel-dock[b-gp5ijp2pmr] {
    position: fixed;
    left: 16px;                 /* bottom-left corner (physical, regardless of dir) */
    right: auto;
    bottom: 16px;
    width: min(340px, calc(100vw - 32px));
    z-index: 1050;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 14px;
    box-shadow: 0 14px 44px rgba(var(--dtz-blue-rgb), .30);
    overflow: hidden;
}

/* Minimized: a tiny strip showing just what's playing now — the media keeps playing
   off-screen so audio never stops. */
.channel-dock.is-minimized[b-gp5ijp2pmr] { width: min(280px, calc(100vw - 32px)); }
.channel-dock.is-minimized[b-gp5ijp2pmr]  .channel-stage {
    position: absolute;
    width: 2px;
    height: 2px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.channel-dock.is-minimized[b-gp5ijp2pmr]  .channel-player { padding: 8px 12px; }
.channel-dock.is-minimized[b-gp5ijp2pmr]  .cp-now { margin: 0; }
.channel-dock.is-minimized[b-gp5ijp2pmr]  .cp-now-label,
.channel-dock.is-minimized[b-gp5ijp2pmr]  .cp-now-date,
.channel-dock.is-minimized[b-gp5ijp2pmr]  .cp-transport,
.channel-dock.is-minimized[b-gp5ijp2pmr]  .cp-novideo { display: none; }
.channel-dock.is-minimized[b-gp5ijp2pmr]  .cp-now-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-dock-bar[b-gp5ijp2pmr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--dtz-blue);
    color: #fff;
}

.channel-dock-tag[b-gp5ijp2pmr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 14px;
    margin-inline-end: auto;   /* pushes the buttons to the far (leading) edge */
}

.channel-dock-tag .fa-tower-broadcast[b-gp5ijp2pmr] { color: var(--dtz-bronze); }

.channel-dock-btn[b-gp5ijp2pmr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}

.channel-dock-btn:hover[b-gp5ijp2pmr] { background: rgba(255, 255, 255, .25); }

/* Compact the embedded ChannelPlayer for the corner: no card chrome, tighter padding. */
.channel-dock[b-gp5ijp2pmr]  .channel-player {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 12px 12px;
}

.channel-dock[b-gp5ijp2pmr]  .cp-now-title { font-size: 15px; }
.channel-dock[b-gp5ijp2pmr]  .cp-now { margin-bottom: 8px; }
.channel-dock[b-gp5ijp2pmr]  .cp-transport { margin-top: 10px; }

/* Smaller transport buttons in the corner. */
.channel-dock[b-gp5ijp2pmr]  .cp-btn { width: 38px; height: 38px; font-size: 14px; }
.channel-dock[b-gp5ijp2pmr]  .cp-mode-btn { padding: 6px 12px; font-size: 13px; }
/* /Components/Layout/LiveBanner.razor.rz.scp.css */
/* LiveBanner — site-wide "live now" bar + embedded-player overlay.
   Sits at the very top of the page (above the sticky header) and uses red,
   reserved here for live broadcasts only, to grab attention. */

.live-bar[b-ff3fym8wge] {
    width: 100%;
    background: linear-gradient(90deg, var(--dtz-danger) 0%, var(--dtz-danger) 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    position: relative;
    z-index: 1001;
}

/* The site sets a global dark body text color (html, body { color: var(--dtz-blue) }).
   Force white on the bar's text + icons so it stays legible on the red background. */
.live-bar[b-ff3fym8wge],
.live-text[b-ff3fym8wge],
.live-title[b-ff3fym8wge],
.live-cd-lead[b-ff3fym8wge],
.live-countdown[b-ff3fym8wge],
.live-badge[b-ff3fym8wge],
.live-close[b-ff3fym8wge],
.live-close i[b-ff3fym8wge],
.live-modal-head[b-ff3fym8wge],
.live-modal-title[b-ff3fym8wge],
.live-openpage-btn[b-ff3fym8wge],
.live-openpage-label[b-ff3fym8wge] { color: #fff !important; }

/* Scheduled-but-not-yet-live variant: warm bronze — an on-brand accent that reads as
   "info, coming up" rather than the urgent red of an on-air stream, and is clearly
   distinct from the navy navbar. White text/icons come from the forced-white rule above. */
.live-bar--upcoming[b-ff3fym8wge] {
    background: var(--dtz-bronze-text);
}

.live-bar-inner[b-ff3fym8wge] {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
}

/* The countdown digits sit inside .live-text (white). Tabular figures keep the width
   steady so the surrounding text doesn't jitter as the seconds tick. */
.live-countdown[b-ff3fym8wge] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* The "בקרוב" badge mirrors the LIVE pill but with a steady clock icon (no pulse). */
.live-badge--upcoming .live-dot[b-ff3fym8wge] { display: none; }

.live-badge--upcoming i[b-ff3fym8wge] {
    font-size: 12px;
    color: #fff !important;
}

/* "LIVE" pill with a pulsing dot — the universal live indicator. */
.live-badge[b-ff3fym8wge] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .5px;
}

.live-dot[b-ff3fym8wge] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    animation: live-pulse-b-ff3fym8wge 1.4s infinite;
}

@keyframes live-pulse-b-ff3fym8wge {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.live-text[b-ff3fym8wge] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-title[b-ff3fym8wge] {
    font-weight: 400;
    opacity: .92;
    /* The gap before the "·" separator lives here so it's consistent regardless of
       what precedes it (the "עכשיו" text, a countdown number, or "רגע"). Razor trims
       the whitespace before the @if block that renders this span, so we can't rely
       on markup whitespace. */
    margin-inline-start: 4px;
}

.live-watch-btn[b-ff3fym8wge] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--dtz-danger) !important;
    border: 0;
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease;
}

.live-watch-btn:hover[b-ff3fym8wge] {
    background: var(--dtz-danger-bg);
    transform: translateY(-1px);
}

.live-watch-btn .fa-play[b-ff3fym8wge] {
    font-size: 11px;
    color: var(--dtz-danger) !important;
}

/* Small "watching" cue shown in the bar text while the video is open
   (mirrors the equalizer shown while listening). Inherits white from .live-text. */
.live-watch-indic[b-ff3fym8wge] {
    font-size: 11px;
    margin-inline-end: 6px;
    vertical-align: middle;
}

/* "האזנה" — a ghost/outline button so it reads as the secondary action next to
   the solid white "צפו עכשיו". */
.live-listen-btn[b-ff3fym8wge] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 14px;
    /* Also used as an <a> on the upcoming bar ("הירשמו לתזכורת") — strip the default
       anchor underline so it reads as a button there too. */
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, transform .12s ease;
}

.live-listen-btn:hover[b-ff3fym8wge] {
    background: rgba(255, 255, 255, .26);
    transform: translateY(-1px);
}

.live-listen-btn i[b-ff3fym8wge] {
    font-size: 12px;
    color: #fff !important;
}

/* Tiny equalizer shown in the bar text while audio is playing. */
.live-eq[b-ff3fym8wge] {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
    margin-inline-end: 6px;
    vertical-align: middle;
}

.live-eq span[b-ff3fym8wge] {
    width: 3px;
    background: #fff;
    border-radius: 1px;
    transform-origin: bottom;
    animation: live-eq-b-ff3fym8wge .9s ease-in-out infinite;
}

.live-eq span:nth-child(1)[b-ff3fym8wge] { height: 6px;  animation-delay: 0s;   }
.live-eq span:nth-child(2)[b-ff3fym8wge] { height: 12px; animation-delay: .2s;  }
.live-eq span:nth-child(3)[b-ff3fym8wge] { height: 8px;  animation-delay: .4s;  }

@keyframes live-eq-b-ff3fym8wge {
    0%, 100% { transform: scaleY(.4); }
    50%      { transform: scaleY(1); }
}

/* Hidden audio-only player: rendered at full size but parked off-screen so the
   YouTube embed actually plays. Deliberately NOT display:none — that pauses the
   embed in some browsers. */
.live-audio-host[b-ff3fym8wge] {
    position: fixed;
    left: -9999px;
    bottom: 0;
    width: 320px;
    height: 180px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.live-audio-host iframe[b-ff3fym8wge] {
    width: 100%;
    height: 100%;
    border: 0;
}

.live-close[b-ff3fym8wge] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    opacity: .85;
    font-size: 16px;
    cursor: pointer;
}

.live-close:hover[b-ff3fym8wge] {
    background: rgba(255, 255, 255, .2);
    opacity: 1;
}

/* ===== Embedded player: full-screen dialog + minimised corner player ===== */

/* Dimmed backdrop — shown only in full mode. */
.live-backdrop[b-ff3fym8wge] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .75);
}

/* Full mode: a centred dialog. */
.live-modal[b-ff3fym8wge] {
    position: fixed;
    z-index: 2001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, calc(100% - 32px));
    background: var(--dtz-blue);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* Minimised mode: a small player pinned to the bottom-left corner. It sits on
   top of the back-to-top button (z-index 2001 > 1040) and fully covers it while
   open; the button reappears the moment the player is closed. Physical left/right
   here (not logical) so it stays on the visual left regardless of the RTL layout. */
.live-modal.live-modal--mini[b-ff3fym8wge] {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: auto;
    transform: none;
    width: min(360px, calc(100% - 24px));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

.live-modal-head[b-ff3fym8wge] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: #fff;
}

/* Compact header in the corner player. */
.live-modal--mini .live-modal-head[b-ff3fym8wge] {
    gap: 6px;
    padding: 6px 8px 6px 10px;
}

.live-modal--mini .live-badge[b-ff3fym8wge] { display: none; }
.live-modal--mini .live-modal-title[b-ff3fym8wge] { font-size: 13px; }

/* Round icon button for minimise/expand, matching the close button. */
.live-icon-btn[b-ff3fym8wge] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff !important;
    opacity: .85;
    font-size: 14px;
    cursor: pointer;
}

.live-icon-btn:hover[b-ff3fym8wge] {
    background: rgba(255, 255, 255, .2);
    opacity: 1;
}

.live-icon-btn i[b-ff3fym8wge] { color: #fff !important; }

/* "פתיחה בעמוד השידור" — a labelled ghost pill in full mode. */
.live-openpage-btn[b-ff3fym8wge] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease;
}

.live-openpage-btn:hover[b-ff3fym8wge] {
    background: rgba(255, 255, 255, .26);
    color: #fff !important;
}

.live-openpage-btn i[b-ff3fym8wge] { font-size: 12px; color: #fff !important; }

/* In the corner player there's no room for the label — collapse to a round
   icon button matching minimise/close. */
.live-modal--mini .live-openpage-btn[b-ff3fym8wge] {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    opacity: .85;
    font-size: 14px;
}

.live-modal--mini .live-openpage-btn:hover[b-ff3fym8wge] {
    background: rgba(255, 255, 255, .2);
    opacity: 1;
}

.live-modal--mini .live-openpage-label[b-ff3fym8wge] { display: none; }

.live-modal-title[b-ff3fym8wge] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-modal-body[b-ff3fym8wge] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--dtz-text-dark);
}

.live-modal-body iframe[b-ff3fym8wge] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Compact bar on phones — drop the (long) stream title, keep the CTA. */
@media (max-width: 575.98px) {
    .live-bar-inner[b-ff3fym8wge] { gap: 8px; padding: 7px 10px; }
    .live-text[b-ff3fym8wge] { font-size: 13px; }
    .live-title[b-ff3fym8wge] { display: none; }
    .live-watch-btn[b-ff3fym8wge],
    .live-listen-btn[b-ff3fym8wge] { padding: 6px 11px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot[b-ff3fym8wge] { animation: none; }
    .live-watch-btn[b-ff3fym8wge],
    .live-listen-btn[b-ff3fym8wge] { transition: none; }
    .live-eq span[b-ff3fym8wge] { animation: none; }
}
/* /Components/LessonSearchBox.razor.rz.scp.css */
/* ── Lesson search box (sidebar) ────────────────────────────────────────── */
.lesson-search[b-suhcg4wkv6] {
    width: 100%;
    margin-bottom: 24px;
}

/* Title matches .topic-sidebar-title so the search block aligns with the
   "נושאי שיעורים" heading rendered below it. */
.lesson-search-title[b-suhcg4wkv6] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--dtz-blue);
    text-align: right;
    margin: 0 0 12px 0;
    padding: 0;
}

/* Bordered cream card, identical to the topic-tree card below it. */
.ls-card[b-suhcg4wkv6] {
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    background-color: var(--dtz-bg);
    padding: 14px;
}

.ls-input-wrap[b-suhcg4wkv6] {
    position: relative;
}

.ls-input-icon[b-suhcg4wkv6] {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dtz-bronze);
    font-size: 14px;
    pointer-events: none;
}

.ls-input[b-suhcg4wkv6] {
    width: 100%;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: #fff;
    padding: 10px 12px;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    color: var(--dtz-blue);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Room for the magnifier (start) and the clear button (end). End padding is
   reserved unconditionally so the layout doesn't shift when × appears. */
.ls-input-padded[b-suhcg4wkv6] {
    padding-inline-start: 36px;
    padding-inline-end: 36px;
}

.ls-input:focus[b-suhcg4wkv6] {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.2);
}

/* Clear (×) button — sits at the inline-end, opposite the magnifier. Muted by
   default, fills bronze on hover like the other icon buttons across the site. */
.ls-clear[b-suhcg4wkv6] {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.ls-clear:hover[b-suhcg4wkv6] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

/* Hide the browser's native search clear button so only our styled × shows. */
.ls-input[b-suhcg4wkv6]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
/* /Components/Pages/Admin/AdminAnalyticsPage.razor.rz.scp.css */
.an-head[b-55phzze0o2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.an-title[b-55phzze0o2] {
    color: var(--dtz-primary);
    margin: 0;
}

/* Period + tab buttons */
.an-period[b-55phzze0o2], .an-kind[b-55phzze0o2] {
    display: inline-flex;
    border: 1px solid var(--dtz-border);
    border-radius: 999px;
    overflow: hidden;
}

.an-period-btn[b-55phzze0o2], .an-kind-btn[b-55phzze0o2] {
    border: 0;
    background: transparent;
    color: var(--dtz-text-muted);
    padding: 0.4rem 0.95rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.an-period-btn.is-active[b-55phzze0o2], .an-kind-btn.is-active[b-55phzze0o2] {
    background: var(--dtz-bronze);
    color: #fff;
}

.an-tabs[b-55phzze0o2] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--dtz-border-light);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.an-tab[b-55phzze0o2] {
    border: 0;
    background: transparent;
    color: var(--dtz-text-muted);
    padding: 0.65rem 1.1rem;
    font-size: 1rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.an-tab.is-active[b-55phzze0o2] {
    color: var(--dtz-primary);
    border-bottom-color: var(--dtz-bronze);
    font-weight: 600;
}

/* KPI cards */
.an-kpis[b-55phzze0o2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.an-kpi[b-55phzze0o2] {
    background: var(--dtz-surface-cool);
    border: 1px solid var(--dtz-border-light);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.an-kpi-label[b-55phzze0o2] { color: var(--dtz-text-muted); font-size: 0.85rem; }
.an-kpi-value[b-55phzze0o2] { color: var(--dtz-primary); font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.an-kpi-delta[b-55phzze0o2] { font-size: 0.8rem; font-weight: 600; }
.an-kpi-delta.up[b-55phzze0o2] { color: var(--dtz-success); }
.an-kpi-delta.down[b-55phzze0o2] { color: var(--dtz-danger); }
.an-kpi-delta.flat[b-55phzze0o2] { color: var(--dtz-text-muted); }

/* Cards */
.an-card[b-55phzze0o2] {
    background: #fff;
    border: 1px solid var(--dtz-border-light);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.an-card-head[b-55phzze0o2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.an-card-title[b-55phzze0o2] { color: var(--dtz-primary); font-size: 1.15rem; margin: 0 0 1rem; }
.an-card-head .an-card-title[b-55phzze0o2] { margin: 0; }
.an-card-sub[b-55phzze0o2] { color: var(--dtz-text-muted); font-size: 0.85rem; font-weight: 400; }
.an-empty[b-55phzze0o2] { color: var(--dtz-text-muted); text-align: center; padding: 1.5rem 0; margin: 0; }
.an-note[b-55phzze0o2] { color: var(--dtz-text-muted); font-size: 0.85rem; line-height: 1.6; margin: 0.5rem 0 0; }
.an-note i[b-55phzze0o2] { color: var(--dtz-bronze); margin-inline-end: 0.35rem; }

.an-grid2[b-55phzze0o2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Tables */
.an-table[b-55phzze0o2] { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.an-table th[b-55phzze0o2] {
    text-align: right;
    color: var(--dtz-text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 2px solid var(--dtz-border-light);
}
.an-table td[b-55phzze0o2] { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--dtz-border-light); color: var(--dtz-text-dark); }
.an-table tr:last-child td[b-55phzze0o2] { border-bottom: 0; }
.an-term[b-55phzze0o2] { font-weight: 600; }
.an-ip[b-55phzze0o2] { direction: ltr; unicode-bidi: embed; color: var(--dtz-text-muted); font-size: 0.82rem; }

/* Daily bar chart */
.an-bars[b-55phzze0o2] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 180px;
    padding-top: 0.5rem;
    overflow-x: auto;
}
.an-bar-col[b-55phzze0o2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1 0 14px;
    height: 100%;
    gap: 0.35rem;
}
.an-bar[b-55phzze0o2] {
    width: 70%;
    min-height: 2px;
    background: var(--dtz-bronze);
    border-radius: 3px 3px 0 0;
    transition: height 0.2s;
}
.an-bar-label[b-55phzze0o2] { font-size: 0.68rem; color: var(--dtz-text-muted); white-space: nowrap; }

/* Funnel */
.an-funnel-step[b-55phzze0o2] { margin-bottom: 1rem; }
.an-funnel-row[b-55phzze0o2] { display: flex; justify-content: space-between; margin-bottom: 0.35rem; }
.an-funnel-label[b-55phzze0o2] { color: var(--dtz-text-dark); font-weight: 600; }
.an-funnel-value[b-55phzze0o2] { color: var(--dtz-text-muted); font-size: 0.9rem; }
.an-funnel-bar[b-55phzze0o2] { background: var(--dtz-border-light); border-radius: 6px; height: 14px; overflow: hidden; }
.an-funnel-fill[b-55phzze0o2] { background: var(--dtz-bronze); height: 100%; border-radius: 6px; }

/* Audit badges */
.an-badge[b-55phzze0o2] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--dtz-bg-hover);
    color: var(--dtz-text-dark);
}
.an-badge-2[b-55phzze0o2] { background: var(--dtz-danger-bg); color: var(--dtz-danger); }
.an-badge-5[b-55phzze0o2] { background: var(--dtz-danger-bg); color: var(--dtz-danger); }
.an-badge-3[b-55phzze0o2] { background: var(--dtz-success-bg); color: var(--dtz-success); }
.an-badge-1[b-55phzze0o2] { background: var(--dtz-bronze-bg); color: var(--dtz-bronze-text); }

/* Health tab */
.an-status[b-55phzze0o2] {
    display: inline-block;
    min-width: 2.6rem;
    text-align: center;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.82rem;
    direction: ltr;
}
.an-status-err[b-55phzze0o2] { background: var(--dtz-danger-bg); color: var(--dtz-danger); }
.an-status-warn[b-55phzze0o2] { background: var(--dtz-warning-bg); color: var(--dtz-warning-text); }
.an-mono[b-55phzze0o2] { font-family: var(--bs-font-monospace, monospace); font-size: 0.8rem; direction: ltr; unicode-bidi: embed; }
.an-trace[b-55phzze0o2] {
    color: var(--dtz-text-muted);
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Admin/AdminAnnouncementEditPage.razor.rz.scp.css */
/* Image drop zone: the box shows the preview/placeholder, and a transparent
   file input is stretched over it so the browser handles both drag-and-drop
   and click-to-browse natively. */
.ann-dropzone[b-a1tbcrhiye] {
    position: relative;
    width: 100%;
    max-width: 260px;
    /* Taller, portrait-ish footprint: matches a book-cover aspect (most ads are
       new books) and balances the form against the tall left column. */
    min-height: 340px;
    border: 1px dashed var(--dtz-bronze);
    border-radius: 10px;
    overflow: hidden;
    background: var(--dtz-bg);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Active drag-over feedback. */
.ann-dropzone.is-dragging[b-a1tbcrhiye] {
    border-style: solid;
    border-color: var(--dtz-bronze);
    background: var(--dtz-bronze-bg, var(--dtz-bg));
    box-shadow: inset 0 0 0 2px var(--dtz-bronze-border);
}

.ann-dropzone-img[b-a1tbcrhiye] {
    display: block;
    width: 100%;
    border-radius: 10px;
    /* Let drag/click pass through to the overlay input below (also stops the
       browser's native image-drag from hijacking the gesture). */
    pointer-events: none;
}

.ann-dropzone-empty[b-a1tbcrhiye] {
    /* Fill the whole (taller) box so the prompt stays vertically centred. */
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dtz-bronze);
    font-size: .85rem;
    text-align: center;
    pointer-events: none;
}

/* The actual <input type=file> rendered by InputFile lives in a child
   component, so ::deep is needed to reach it from this scoped sheet. */
.ann-dropzone[b-a1tbcrhiye]  .ann-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Drag-over overlay: dims whatever is in the box and makes it obvious the drop
   will (re)place the image. Sits above the image but below the input so the
   drop still lands on the input. pointer-events:none keeps it from eating the
   drop/dragleave events. */
.ann-dropzone-overlay[b-a1tbcrhiye] {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: .9rem;
    /* Black scrim (the allowed non-token exception) — guarantees the white
       text reads over any image; the bronze accent stays on the border. */
    background: rgba(0, 0, 0, .55);
    pointer-events: none;
}

/* Upload-in-progress overlay; sits above both the image and the input. */
.ann-dropzone-spinner[b-a1tbcrhiye] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .7);
}

/* --- Link target: "book picker" vs "raw URL" tabs --- */
/* Block-level so it drops onto its own line below the (inline) .form-label,
   matching the stacked layout of the other fields; fit-content keeps the
   border hugging the two buttons instead of stretching the full row. */
.link-tabs[b-a1tbcrhiye] {
    display: flex;
    width: fit-content;
    gap: 0;
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    overflow: hidden;
}

.link-tab[b-a1tbcrhiye] {
    background: transparent;
    border: none;
    padding: .35rem .9rem;
    font-size: .9rem;
    color: var(--dtz-bronze);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.link-tab.is-active[b-a1tbcrhiye] {
    background: var(--dtz-bronze);
    color: #fff;
}

/* Selected-book chip: thumbnail + name + resolved link + clear button. */
.book-chip[b-a1tbcrhiye] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem;
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    background: var(--dtz-bg);
}

.book-chip-img[b-a1tbcrhiye] {
    width: 34px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
}

.book-chip-name[b-a1tbcrhiye] {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-chip-link[b-a1tbcrhiye] {
    font-size: .8rem;
    color: var(--dtz-text-muted);
    direction: ltr;
    flex: 0 0 auto;
}

.book-chip-clear[b-a1tbcrhiye] {
    background: transparent;
    border: none;
    color: var(--dtz-text-muted);
    cursor: pointer;
    padding: .2rem .35rem;
    flex: 0 0 auto;
}

.book-chip-clear:hover[b-a1tbcrhiye] {
    color: var(--dtz-danger);
}

/* Live search results list. */
.book-results[b-a1tbcrhiye] {
    margin-top: .4rem;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--dtz-bronze-border, var(--dtz-bronze));
    border-radius: 8px;
}

.book-result[b-a1tbcrhiye] {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .4rem .6rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--dtz-border, rgba(0, 0, 0, .06));
    text-align: start;
    cursor: pointer;
}

.book-result:last-child[b-a1tbcrhiye] {
    border-bottom: none;
}

.book-result:hover[b-a1tbcrhiye] {
    background: var(--dtz-bg);
}

.book-result-img[b-a1tbcrhiye] {
    width: 30px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
}

.book-result-name[b-a1tbcrhiye] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-result-price[b-a1tbcrhiye] {
    color: var(--dtz-text-muted);
    font-size: .85rem;
    flex: 0 0 auto;
}

.book-results-hint[b-a1tbcrhiye] {
    margin-top: .4rem;
    font-size: .85rem;
    color: var(--dtz-text-muted);
}
/* /Components/Pages/Admin/AdminBookEditPage.razor.rz.scp.css */
/* Per-color stock toggle.
   Bootstrap's .form-switch lays out awkwardly in RTL (knob on the wrong side,
   oversized), so this is a small custom switch built on a hidden checkbox. */
.stock-toggle[b-wcmg05nu73] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
}

.stock-toggle input[b-wcmg05nu73] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.stock-toggle .track[b-wcmg05nu73] {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: var(--dtz-danger);          /* off = sold out */
    transition: background .15s ease;
}

.stock-toggle .thumb[b-wcmg05nu73] {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: inset-inline-start .15s ease;
}

.stock-toggle input:checked + .track[b-wcmg05nu73] {
    background: var(--dtz-success);          /* on = in stock */
}

.stock-toggle input:checked + .track .thumb[b-wcmg05nu73] {
    inset-inline-start: 16px;
}

.stock-toggle input:focus-visible + .track[b-wcmg05nu73] {
    box-shadow: 0 0 0 2px var(--dtz-blue);
}

.stock-toggle .lbl[b-wcmg05nu73] {
    font-size: .82rem;
    font-weight: 600;
    color: var(--dtz-text-muted);
}

.stock-toggle.is-off .lbl[b-wcmg05nu73] {
    color: var(--dtz-danger);
}
/* /Components/Pages/Admin/AdminBooksPage.razor.rz.scp.css */
/* ── Live search box: inner magnifier (start) + clear × (end), no external
   button. Mirrors the public LessonSearchBox / QaSearchBox pattern. ─────── */
.admin-search[b-rp19h3eoyi] {
    position: relative;
}

.admin-search-icon[b-rp19h3eoyi] {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dtz-bronze);
    font-size: 14px;
    pointer-events: none;
}

/* Room for the magnifier (start) and the × button (end). End padding is
   reserved unconditionally so the layout doesn't shift when × appears. */
.admin-search-input[b-rp19h3eoyi] {
    padding-inline-start: 36px;
    padding-inline-end: 36px;
}

.admin-search-clear[b-rp19h3eoyi] {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.admin-search-clear:hover[b-rp19h3eoyi] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

/* Hide the browser's native search-clear button so only our styled × shows. */
.admin-search-input[b-rp19h3eoyi]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
/* /Components/Pages/Admin/AdminContactsList.razor.rz.scp.css */
/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.contacts-toolbar[b-i96mittwlj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.new-chip[b-i96mittwlj] {
    /* Same loud "new" blue the dashboard count and order statuses use (--dtz-new). */
    background: var(--dtz-new);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: .15rem .6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

/* Search box with leading icon + trailing clear button (RTL-aware) */
.search-box[b-i96mittwlj] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-i96mittwlj] {
    width: 240px;
    max-width: 60vw;
    padding-inline-start: 2.1rem;
    padding-inline-end: 2rem;
}

.search-icon[b-i96mittwlj] {
    position: absolute;
    inset-inline-start: .75rem;
    color: var(--dtz-text-muted);
    font-size: .85rem;
    pointer-events: none;
}

.search-clear[b-i96mittwlj] {
    position: absolute;
    inset-inline-end: .5rem;
    background: none;
    border: none;
    color: var(--dtz-text-muted);
    padding: .15rem .3rem;
    line-height: 1;
    cursor: pointer;
}
.search-clear:hover[b-i96mittwlj] { color: var(--dtz-danger); }

.filter-select[b-i96mittwlj] { width: 160px; }

/* ── Alert ───────────────────────────────────────────────────────────────── */
.contacts-alert[b-i96mittwlj] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-family: 'Heebo';
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state[b-i96mittwlj] {
    text-align: center;
    color: var(--dtz-text-muted);
    padding: 3.5rem 1rem;
    font-family: 'Heebo';
}
.empty-state i[b-i96mittwlj] {
    font-size: 2.5rem;
    color: var(--dtz-border-light);
    margin-bottom: .75rem;
    display: block;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.contacts-table-wrap[b-i96mittwlj] {
    background: #fff;
    border: 1px solid var(--dtz-border-light);
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.contacts-table[b-i96mittwlj] { font-family: 'Heebo'; }

.contacts-table thead th[b-i96mittwlj] {
    background: var(--dtz-bg);
    border-bottom: 2px solid var(--dtz-bronze);
    color: var(--dtz-text-dark);
    font-weight: 600;
    font-size: .9rem;
    padding: .75rem 1rem;
    white-space: nowrap;
}

.contacts-table td[b-i96mittwlj] { padding: .85rem 1rem; vertical-align: middle; }

.col-status[b-i96mittwlj]   { width: 2.5rem; text-align: center; }
.col-chevron[b-i96mittwlj]  { width: 2.5rem; text-align: center; }
.col-date[b-i96mittwlj]     { width: 6rem; white-space: nowrap; }
.col-dest[b-i96mittwlj]     { width: 7rem; }

/* Summary row.
   Same hover mechanism as the orders admin table (AdminOrdersPage.razor.css): Bootstrap
   paints an opaque --bs-table-bg on every <td> that sits on top of any <tr> background, so
   the hover wash and the open-state tint have to be applied to the CELLS, not the row. */
.summary-row[b-i96mittwlj] { cursor: pointer; border-bottom: 1px solid var(--dtz-border-light); }
.summary-row > td[b-i96mittwlj] { transition: background-color var(--hover-transition); }
.summary-row.open > td[b-i96mittwlj] { background-color: var(--dtz-bg); }
.summary-row:hover > td[b-i96mittwlj] { background-color: var(--dtz-bronze-bg); }

/* New vs handled emphasis. The "new" accent is a persistent inset bar on the inline-start
   (right, in RTL) edge — applied to the first cell so it survives Bootstrap's cell bg — in
   the shared "new" blue (--dtz-new), matching the dashboard count and order statuses. */
.summary-row.is-new > td:first-child[b-i96mittwlj] { box-shadow: inset -3px 0 0 0 var(--dtz-new); }
.summary-row.is-new .cell-name[b-i96mittwlj] { font-weight: 700; color: var(--dtz-text-dark); }
.summary-row.is-handled .cell-name[b-i96mittwlj],
.summary-row.is-handled .cell-subject[b-i96mittwlj],
.summary-row.is-handled .cell-date[b-i96mittwlj] { color: var(--dtz-text-muted); }

.cell-subject[b-i96mittwlj] {
    max-width: 1px;          /* let the cell shrink so ellipsis kicks in */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dtz-text-muted);
}
.cell-name[b-i96mittwlj] { white-space: nowrap; }
.cell-date[b-i96mittwlj] { font-size: .85rem; color: var(--dtz-text-muted); }

.status-dot[b-i96mittwlj] {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
}
.dot-new[b-i96mittwlj] { background: var(--dtz-new); }
.dot-handled[b-i96mittwlj] { background: transparent; border: 1.5px solid var(--dtz-success); }

.chevron[b-i96mittwlj] { color: var(--dtz-text-muted); font-size: .8rem; transition: transform .18s ease; }
.chevron.rotated[b-i96mittwlj] { transform: rotate(180deg); }

/* Destination badge (combined view) */
.dest-badge[b-i96mittwlj] {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 1rem;
    color: #fff;
    white-space: nowrap;
}
.dest-btz[b-i96mittwlj] { background: var(--dtz-blue); }
.dest-dtz[b-i96mittwlj] { background: var(--dtz-bronze); }

/* ── Detail panel (accordion) ────────────────────────────────────────────── */
.detail-row > td[b-i96mittwlj] { border-bottom: 1px solid var(--dtz-border-light); }

.detail-panel[b-i96mittwlj] {
    background: var(--dtz-bg);
    border-inline-start: 3px solid var(--dtz-bronze);
    padding: 1.25rem 1.5rem;
    font-family: 'Heebo';
    animation: slideDown-b-i96mittwlj .16s ease;
}
@keyframes slideDown-b-i96mittwlj {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.detail-head[b-i96mittwlj] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--dtz-border-light);
}
.detail-id[b-i96mittwlj] { font-weight: 700; color: var(--dtz-blue); }
.detail-date[b-i96mittwlj] { color: var(--dtz-text-muted); font-size: .85rem; }
.detail-date i[b-i96mittwlj] { margin-inline-end: .25rem; }

.status-badge[b-i96mittwlj] {
    margin-inline-start: auto;
    font-size: .78rem;
    font-weight: 600;
    padding: .15rem .65rem;
    border-radius: 1rem;
    color: #fff;
}
.badge-new[b-i96mittwlj] { background: var(--dtz-new); }
.badge-handled[b-i96mittwlj] { background: var(--dtz-success); }

/* Label / value grid */
.detail-grid[b-i96mittwlj] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .55rem 1rem;
    align-items: start;
}
.field-label[b-i96mittwlj] { color: var(--dtz-text-muted); font-size: .9rem; white-space: nowrap; }
.field-value[b-i96mittwlj] { color: var(--dtz-text-dark); }
.details-text[b-i96mittwlj] { white-space: pre-wrap; word-break: break-word; line-height: 1.6; }

.email-value[b-i96mittwlj] { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.mini-btn[b-i96mittwlj] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #fff;
    border: 1px solid var(--dtz-border-light);
    border-radius: .4rem;
    padding: .12rem .5rem;
    font-size: .8rem;
    color: var(--dtz-blue);
    text-decoration: none;
    cursor: pointer;
}
.mini-btn:hover[b-i96mittwlj] { border-color: var(--dtz-bronze); color: var(--dtz-bronze); }

/* Actions */
.detail-actions[b-i96mittwlj] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.btn-action[b-i96mittwlj] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: .45rem;
    padding: .35rem .9rem;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
}
.btn-action:disabled[b-i96mittwlj] { opacity: .55; cursor: default; }

.btn-handle[b-i96mittwlj] { color: var(--dtz-success); border-color: var(--dtz-success); }
.btn-handle:hover:not(:disabled)[b-i96mittwlj] { background: var(--dtz-success); color: #fff; }

.btn-reopen[b-i96mittwlj] { color: var(--dtz-new); border-color: var(--dtz-new); }
.btn-reopen:hover:not(:disabled)[b-i96mittwlj] { background: var(--dtz-new); color: #fff; }

.btn-delete[b-i96mittwlj] { color: var(--dtz-danger); border-color: var(--dtz-danger-border); }
.btn-delete:hover:not(:disabled)[b-i96mittwlj] { background: var(--dtz-danger); color: #fff; }

.btn-cancel[b-i96mittwlj] { color: var(--dtz-text-muted); border-color: var(--dtz-border-light); }
.btn-cancel:hover:not(:disabled)[b-i96mittwlj] { background: var(--dtz-bg-hover); }

.confirm-delete[b-i96mittwlj] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    background: var(--dtz-danger-bg);
    border: 1px solid var(--dtz-danger-border);
    border-radius: .5rem;
    padding: .35rem .75rem;
}
.confirm-delete > span[b-i96mittwlj] { color: var(--dtz-danger); font-size: .85rem; }
/* /Components/Pages/Admin/AdminDashboardPage.razor.rz.scp.css */
/* ── "Needs attention" count badge ───────────────────────────────────────
   A loud-blue pill sitting just before the chevron. --dtz-new = "new / waiting
   to be handled" — the same colour "new" carries everywhere else (status badge,
   header chip), and bright enough to actually catch the eye on the card. Red is
   reserved for a genuine problem (see --late below), so the two badges on the
   orders card read apart at a glance. The badge is only rendered when the count
   > 0, so a handled section stays calm. */
.dtz-badge[b-82qg8zb2yx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dtz-new);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    direction: ltr;           /* keep "12" reading left-to-right */
    font-variant-numeric: tabular-nums;
}

/* Inline pill, sits just before the chevron at the leading edge of the card. */
.dtz-badge--pill[b-82qg8zb2yx] {
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .45rem;
    border-radius: 999px;
    font-size: .82rem;
}

/* "Overdue" variant — turns the pill red (red = problem / urgent) and adds a clock
   glyph, so the late count reads apart from the navy "new" count next to it
   (navy number = new; red clock + number = late). */
.dtz-badge--late[b-82qg8zb2yx] {
    background: var(--dtz-danger);
    gap: .28rem;
    padding: 0 .55rem;
}

.dtz-badge--late .fa-clock[b-82qg8zb2yx] {
    font-size: .72rem;
}
/* /Components/Pages/Admin/AdminLessonImportYoutubePage.razor.rz.scp.css */
/* ── YouTube-import candidate list ───────────────────────────────────────── */
.yt-list[b-hobc5s8v3t] {
    overflow: hidden;
    border: 1px solid var(--dtz-border-light);
    border-radius: 6px;
}

.yt-row[b-hobc5s8v3t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--dtz-border-light);
}

.yt-row:last-child[b-hobc5s8v3t] {
    border-bottom: 0;
}

.yt-row-on[b-hobc5s8v3t] {
    background: var(--dtz-bg);
}

/* Brand-tinted native checkboxes: bronze accent, comfortable hit area. */
.yt-check[b-hobc5s8v3t] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    accent-color: var(--dtz-bronze);
    cursor: pointer;
}

/* "Select all" as a pill that echoes the toolbar buttons. */
.yt-selectall[b-hobc5s8v3t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: #fff;
    color: var(--dtz-blue);
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

.yt-selectall:hover[b-hobc5s8v3t] {
    background: var(--dtz-bg);
}

.yt-count[b-hobc5s8v3t] {
    color: var(--dtz-text-muted);
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 16px;
}

.yt-thumb[b-hobc5s8v3t] {
    flex: 0 0 auto;
    width: 96px;
    height: 54px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--dtz-border-light);
}

.yt-fields[b-hobc5s8v3t] {
    flex: 1 1 auto;
    min-width: 0;
}

.yt-meta[b-hobc5s8v3t] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--dtz-text-muted);
    margin-top: 4px;
}

.yt-meta-text[b-hobc5s8v3t] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Clickable thumbnail → opens the YouTube video in a new tab. */
.yt-thumb-link[b-hobc5s8v3t] {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

/* Small "watch" links (YouTube / on-site), inline beside titles and matches. */
.rl-link[b-hobc5s8v3t] {
    flex: 0 0 auto;
    font-size: 0.8rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--dtz-blue);
}

.rl-link:hover[b-hobc5s8v3t] {
    text-decoration: underline;
}

.yt-date[b-hobc5s8v3t] {
    white-space: nowrap;
}

.yt-id[b-hobc5s8v3t] {
    flex: 0 0 auto;
    min-width: 56px;
    text-align: center;
    font-weight: 700;
    color: var(--dtz-blue);
}

/* ── Relink: old re-uploads → existing lesson ────────────────────────────── */
/* Opt-in panel: a full-width toggle that lazily reveals the matches below it. */
.rl-panel[b-hobc5s8v3t] {
    margin-top: 1.5rem;
}

.rl-toggle[b-hobc5s8v3t] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: var(--dtz-bg);
    color: var(--dtz-blue);
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
}

.rl-toggle:hover[b-hobc5s8v3t] {
    background: #fff;
}

.rl-toggle:disabled[b-hobc5s8v3t] {
    opacity: 0.7;
    cursor: default;
}

/* The YouTube title + its length, on one baseline. */
.rl-head[b-hobc5s8v3t] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.rl-yt-title[b-hobc5s8v3t] {
    font-weight: 700;
    color: var(--dtz-blue);
}

.rl-dur[b-hobc5s8v3t] {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--dtz-text-muted);
    white-space: nowrap;
}

/* Suggested existing lessons — one selectable row each, plus a "skip". */
.rl-matches[b-hobc5s8v3t] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-match[b-hobc5s8v3t] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid var(--dtz-border-light);
    border-radius: 5px;
    cursor: pointer;
}

/* The lesson's cover preview — clickable → opens the lesson on our site. Sits
   OUTSIDE the label so clicking it doesn't toggle the radio. */
.rl-match-thumb-link[b-hobc5s8v3t] {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.rl-match-thumb[b-hobc5s8v3t] {
    width: 72px;
    height: 41px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--dtz-border-light);
}

.rl-match-thumb-empty[b-hobc5s8v3t] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dtz-text-muted);
    font-size: 1rem;
}

/* The selectable part of a match (radio + title + meta). */
.rl-match-label[b-hobc5s8v3t] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.rl-match-on[b-hobc5s8v3t] {
    border-color: var(--dtz-bronze);
    background: #fff;
}

.rl-radio[b-hobc5s8v3t] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    accent-color: var(--dtz-bronze);
    cursor: pointer;
}

/* Title over meta, stacked, so a cover + long title still fit one match row. */
.rl-match-body[b-hobc5s8v3t] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rl-match-title[b-hobc5s8v3t] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl-match-meta[b-hobc5s8v3t] {
    font-size: 0.8rem;
    color: var(--dtz-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rl-match-meta > span[b-hobc5s8v3t] {
    margin-inline-start: 4px;
}

/* Highlight an exact length match — the strongest "same lesson" signal. */
.rl-dur-match[b-hobc5s8v3t] {
    color: var(--dtz-success);
    font-weight: 600;
}

.rl-skip[b-hobc5s8v3t] {
    flex: 1 1 auto;
    color: var(--dtz-text-muted);
}

.rl-nomatch[b-hobc5s8v3t] {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--dtz-text-muted);
}
/* /Components/Pages/Admin/AdminLessonsPage.razor.rz.scp.css */
/* ── Reorder mode UI (entry dialog + active-mode banner) ─────────────── */

.al-modal-backdrop[b-eh63njr9un] {
    position: fixed;
    inset: 0;
    background: rgba(var(--dtz-blue-rgb), 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.al-modal[b-eh63njr9un] {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    min-width: 360px;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.al-reorder-banner[b-eh63njr9un] {
    background: var(--dtz-warning-bg);
    border: 1px solid var(--dtz-gold);
    border-right: 6px solid var(--dtz-gold);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.al-reorder-banner .al-banner-icon[b-eh63njr9un] {
    font-size: 1.4rem;
    color: var(--dtz-warning-text);
}

.al-reorder-banner .al-banner-text[b-eh63njr9un] {
    flex: 1;
    min-width: 240px;
}

.al-reorder-banner .al-banner-title[b-eh63njr9un] {
    font-weight: 700;
    color: var(--dtz-blue);
    margin-bottom: 2px;
}

.al-reorder-banner .al-banner-sub[b-eh63njr9un] {
    color: var(--dtz-warning-text);
    font-size: 0.88rem;
}

/* ── Live search box: inner magnifier (start) + clear × (end), no external
   button. Mirrors the public LessonSearchBox / QaSearchBox pattern. ─────── */
.admin-search[b-eh63njr9un] {
    position: relative;
}

.admin-search-icon[b-eh63njr9un] {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dtz-bronze);
    font-size: 14px;
    pointer-events: none;
}

/* Room for the magnifier (start) and the × button (end). End padding is
   reserved unconditionally so the layout doesn't shift when × appears. */
.admin-search-input[b-eh63njr9un] {
    padding-inline-start: 36px;
    padding-inline-end: 36px;
}

.admin-search-clear[b-eh63njr9un] {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.admin-search-clear:hover[b-eh63njr9un] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

/* Hide the browser's native search-clear button so only our styled × shows. */
.admin-search-input[b-eh63njr9un]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
/* /Components/Pages/Admin/AdminLessonTopicsPage.razor.rz.scp.css */
/* ── Tree row ─────────────────────────────────────────────────────────── */
.lt-row[b-t6hgybdgdr] {
    list-style: none;
}

.lt-row-main[b-t6hgybdgdr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--dtz-bronze-bg);
    background: transparent;
    transition: background 0.15s ease;
}

.lt-row-main:hover[b-t6hgybdgdr] {
    background: var(--dtz-bg);
}

/* Indentation per level (start = right in RTL) */
.lt-l1 > .lt-row-main[b-t6hgybdgdr] { padding-inline-start: 14px; font-weight: 600; }
.lt-l2 > .lt-row-main[b-t6hgybdgdr] { padding-inline-start: 40px; font-weight: 500; font-size: 14px; }
.lt-l3 > .lt-row-main[b-t6hgybdgdr] { padding-inline-start: 70px; font-weight: 400; font-size: 13px; color: var(--dtz-blue-muted); }

/* ── Chevron toggle ───────────────────────────────────────────────────── */
.lt-chev[b-t6hgybdgdr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 0;
    color: var(--dtz-bronze);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lt-chev[aria-expanded="true"][b-t6hgybdgdr] {
    transform: rotate(180deg);
}

.lt-chev-empty[b-t6hgybdgdr] {
    cursor: default;
}

/* ── Drag handle ──────────────────────────────────────────────────────── */
.lt-drag[b-t6hgybdgdr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--dtz-bronze);
    font-size: 13px;
    cursor: grab;
    flex-shrink: 0;
}

.lt-drag:active[b-t6hgybdgdr] { cursor: grabbing; }

/* ── Name / rule tag / count ──────────────────────────────────────────── */
.lt-name[b-t6hgybdgdr] {
    flex: 1;
    cursor: pointer;
    user-select: none;
    color: var(--dtz-blue);
}

.lt-name:hover[b-t6hgybdgdr] {
    color: var(--dtz-bronze);
}

.lt-rule-tag[b-t6hgybdgdr] {
    font-size: 11px;
    font-weight: 500;
    color: var(--dtz-bronze);
    background: var(--dtz-bronze-bg);
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
    cursor: help;
}

.lt-count[b-t6hgybdgdr] {
    color: var(--dtz-blue-muted);
    font-weight: 400;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    margin-inline-end: 4px;
}

/* ── Action buttons ───────────────────────────────────────────────────── */
.lt-actions[b-t6hgybdgdr] {
    display: inline-flex;
    gap: 4px;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.lt-row-main:hover .lt-actions[b-t6hgybdgdr] {
    opacity: 1;
}

.lt-action[b-t6hgybdgdr] {
    border: 1px solid var(--dtz-bronze);
    color: var(--dtz-blue);
    background: #fff;
    padding: 2px 8px;
}

.lt-action:hover[b-t6hgybdgdr] {
    background: var(--dtz-bronze);
    color: #fff;
}

.lt-action-danger[b-t6hgybdgdr] {
    border-color: var(--dtz-danger);
    color: var(--dtz-danger);
}

.lt-action-danger:hover[b-t6hgybdgdr] {
    background: var(--dtz-danger);
    color: #fff;
}

/* ── Children list ────────────────────────────────────────────────────── */
.lt-children[b-t6hgybdgdr] {
    background: var(--dtz-bronze-bg);
}

.lt-l3.lt-row .lt-children[b-t6hgybdgdr] {
    background: #fff;
}

/* ── Add-inline form (under row) ──────────────────────────────────────── */
.lt-add-inline[b-t6hgybdgdr] {
    padding: 6px 14px;
    background: #fff;
    border-bottom: 1px solid var(--dtz-bronze-bg);
}

/* ── Sortable.js helper classes (used when D&D wired) ─────────────────── */
.sortable-ghost[b-t6hgybdgdr]  { opacity: 0.35; }
.sortable-chosen[b-t6hgybdgdr] { background: var(--dtz-bronze-bg); }

/* ── Modals ───────────────────────────────────────────────────────────── */
.lt-modal-backdrop[b-t6hgybdgdr] {
    position: fixed;
    inset: 0;
    background: rgba(var(--dtz-blue-rgb), 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.lt-modal[b-t6hgybdgdr] {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    min-width: 360px;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

/* ── Rule editor box ──────────────────────────────────────────────────── */
.lt-rule-box[b-t6hgybdgdr] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 8px;
    padding: 14px;
}

/* Small helper text inside the modal (kept off .font-article, which forces 20px). */
.lt-hint[b-t6hgybdgdr] {
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--dtz-text-muted);
}

.lt-hint-em[b-t6hgybdgdr] {
    color: var(--dtz-blue);
    font-weight: 500;
}

/* ── Hidden-from-sidebar state ────────────────────────────────────────── */
/* The row stays fully clickable/editable — only its label fades, so it's
   obvious which topics won't reach the public sidebar. */
.lt-hidden > .lt-row-main .lt-name[b-t6hgybdgdr] {
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-color: var(--dtz-text-muted);
}

.lt-hidden-tag[b-t6hgybdgdr] {
    font-size: 11px;
    font-weight: 500;
    color: var(--dtz-text-muted);
    background: var(--dtz-border-light);
    border: 1px solid var(--dtz-border-light);
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
    cursor: help;
}

/* ── Visibility toggle inside edit modal footer ──────────────────────── */
.lt-visibility-toggle[b-t6hgybdgdr] {
    color: var(--dtz-blue-muted);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.lt-visibility-toggle .form-check-input[b-t6hgybdgdr] {
    width: 1em;
    height: 1em;
    cursor: pointer;
}
/* /Components/Pages/Admin/AdminOrderDetailPage.razor.rz.scp.css */
/* Admin order-detail page. Scoped redesign that swaps the flat Bootstrap cards for the
   site's bronze/navy card language (see QaAdminRow / AdminQuestionDetailPage), rebalances
   the two columns (the timeline now lives at the foot of the details column), and gives the
   status section a lifecycle stepper. Colours come only from --dtz-* tokens. RTL throughout —
   logical properties only. ::deep is used wherever Bootstrap renders the element (.form-control). */

.aod[b-lrial48cau] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ── Hero: id + date on the start side, live-state pills on the end side ─────── */
.aod-hero[b-lrial48cau] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}

.aod-hero-sub[b-lrial48cau] {
    color: var(--dtz-text-muted);
    font-family: 'Heebo', sans-serif;
    font-size: .9rem;
}

.aod-pills[b-lrial48cau] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Solid pill — white text on the accent supplied inline (--pill-accent).
   Same shape as the orders-table .ohs-chip so the admin speaks one language. */
.aod-pill[b-lrial48cau] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
    color: #fff;
    background: var(--pill-accent, var(--dtz-neutral));
}

.aod-pill i[b-lrial48cau] {
    font-size: 11px;
}

/* Aging pill carries its own soft tint via an inline style (danger-bg / warning-bg),
   so it reads as a warning rather than a solid state chip. */
.aod-pill--soft[b-lrial48cau] {
    background: transparent;
    color: inherit;
}

/* Slim "in history" bar with the restore CTA, shown only for archived orders. */
.aod-archive-bar[b-lrial48cau] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .6rem 1rem;
    border-radius: 12px;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    margin-bottom: 1rem;
}

.aod-archive-icon[b-lrial48cau] {
    color: var(--dtz-neutral);
    margin-inline-end: .4rem;
}

/* ── Alert: coloured by outcome (success / error) ───────────────────────────── */
.aod-alert[b-lrial48cau] {
    font-family: 'Heebo', sans-serif;
    font-size: .95rem;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.aod-alert--success[b-lrial48cau] {
    background: var(--dtz-success-bg);
    border: 1px solid var(--dtz-success);
    color: var(--dtz-success);
}

.aod-alert--error[b-lrial48cau] {
    background: var(--dtz-danger-bg);
    border: 1px solid var(--dtz-danger-border);
    color: var(--dtz-danger);
}

/* ── Card shell — replaces every `card border-0 shadow-sm rounded-3 p-4` ─────── */
.aod-card[b-lrial48cau] {
    background: #fff;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.aod-card-head[b-lrial48cau] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .6rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--dtz-bronze-bg);
}

.aod-card-head i[b-lrial48cau] {
    color: var(--dtz-bronze);
    font-size: .95rem;
}

.aod-card-title[b-lrial48cau] {
    margin: 0;
    color: var(--dtz-blue);
    font-family: 'Heebo', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
}

/* ── Customer key/value rows ────────────────────────────────────────────────── */
.aod-kv[b-lrial48cau] {
    display: flex;
    gap: .5rem;
    margin-bottom: .4rem;
    font-family: 'Heebo', sans-serif;
    font-size: .95rem;
}

.aod-kv:last-child[b-lrial48cau] {
    margin-bottom: 0;
}

.aod-kv-label[b-lrial48cau] {
    min-inline-size: 104px;
    flex-shrink: 0;
    color: var(--dtz-text-muted);
}

.aod-kv-val[b-lrial48cau] {
    white-space: pre-wrap;
    color: var(--dtz-text-dark);
}

/* ── Product line items ─────────────────────────────────────────────────────── */
.aod-line[b-lrial48cau] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--dtz-bronze-bg);
    font-family: 'Heebo', sans-serif;
}

.aod-line:last-child[b-lrial48cau] {
    border-bottom: 0;
    padding-bottom: 0;
}

.aod-line-name[b-lrial48cau] {
    color: var(--dtz-text-dark);
    font-size: .95rem;
}

.aod-line-meta[b-lrial48cau] {
    color: var(--dtz-blue);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.aod-line-x[b-lrial48cau] {
    color: var(--dtz-text-muted);
    font-weight: 400;
}

.aod-empty[b-lrial48cau] {
    color: var(--dtz-text-muted);
    font-family: 'Heebo', sans-serif;
    font-size: .95rem;
}

/* ── Costs ──────────────────────────────────────────────────────────────────── */
.aod-cost-row[b-lrial48cau] {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    font-family: 'Heebo', sans-serif;
    font-size: .95rem;
    color: var(--dtz-text-dark);
    font-variant-numeric: tabular-nums;
}

.aod-cost-row--discount[b-lrial48cau] {
    color: var(--dtz-success);
}

.aod-cost-row--total[b-lrial48cau] {
    margin-top: .5rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    background: var(--dtz-bronze-bg);
    color: var(--dtz-blue);
    font-weight: 800;
}

/* ── Buttons — semantic fills, mirrors the .qedit-btn family ─────────────────── */
.aod-btn[b-lrial48cau] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    cursor: pointer;
    transition: background-color var(--hover-transition),
                border-color var(--hover-transition),
                color var(--hover-transition);
}

.aod-btn:disabled[b-lrial48cau] {
    opacity: .55;
    cursor: default;
}

.aod-btn--sm[b-lrial48cau] {
    min-height: 38px;
    font-size: .9rem;
}

.aod-btn--block[b-lrial48cau] {
    width: 100%;
}

.aod-btn--fill[b-lrial48cau] {
    flex: 1;
}

.aod-btn--success[b-lrial48cau] {
    background: var(--dtz-success);
}

.aod-btn--bronze[b-lrial48cau] {
    background: var(--dtz-bronze);
}

.aod-btn--danger[b-lrial48cau] {
    background: var(--dtz-danger);
}

.aod-btn--ghost[b-lrial48cau] {
    background: #fff;
    color: var(--dtz-blue);
    border-color: var(--dtz-bronze);
}

.aod-btn--danger-outline[b-lrial48cau] {
    background: #fff;
    color: var(--dtz-danger);
    border-color: var(--dtz-danger-border);
}

@media (hover: hover) {
    .aod-btn--ghost:enabled:hover[b-lrial48cau] {
        background: var(--dtz-bronze-bg);
        border-color: var(--dtz-bronze);
    }
    .aod-btn--danger-outline:enabled:hover[b-lrial48cau] {
        background: var(--dtz-danger-bg);
        border-color: var(--dtz-danger);
    }
}

/* ── Payment state row ──────────────────────────────────────────────────────── */
.aod-pay-state[b-lrial48cau] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .85rem;
}

.aod-paid-time[b-lrial48cau] {
    color: var(--dtz-text-muted);
    font-family: 'Heebo', sans-serif;
    font-size: .85rem;
}

/* ── Lifecycle stepper (display-only) ───────────────────────────────────────── */
.aod-stepper[b-lrial48cau] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5rem 0;
    margin-bottom: 1rem;
}

.aod-step[b-lrial48cau] {
    flex: 1;
    min-inline-size: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    position: relative;
    text-align: center;
}

/* Connector to the previous (inline-start-ward) node. In RTL the first node is on the
   right, so the line is anchored at the dot centre (inset-inline-end:50%) and grows toward
   the start. Coloured for steps reached so far. */
.aod-step:not(:first-child)[b-lrial48cau]::before {
    content: '';
    position: absolute;
    top: 14px;
    inset-inline-end: 50%;
    inline-size: 100%;
    block-size: 2px;
    background: var(--dtz-bronze-border);
    z-index: 0;
}

.aod-step--done[b-lrial48cau]::before,
.aod-step--current[b-lrial48cau]::before {
    background: var(--dtz-bronze);
}

.aod-step-dot[b-lrial48cau] {
    position: relative;
    z-index: 1;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    background: #fff;
    border: 2px solid var(--dtz-bronze-border);
    color: var(--dtz-bronze-border);
}

.aod-step--done .aod-step-dot[b-lrial48cau] {
    background: var(--dtz-bronze);
    border-color: var(--dtz-bronze);
    color: #fff;
}

.aod-step--current .aod-step-dot[b-lrial48cau] {
    background: var(--step-accent, var(--dtz-bronze));
    border-color: var(--step-accent, var(--dtz-bronze));
    color: #fff;
    box-shadow: var(--focus-ring);
}

.aod-step-label[b-lrial48cau] {
    font-family: 'Heebo', sans-serif;
    font-size: .78rem;
    color: var(--dtz-text-muted);
}

.aod-step--current .aod-step-label[b-lrial48cau] {
    color: var(--dtz-blue);
    font-weight: 700;
}

.aod-stepper--cancelled .aod-step[b-lrial48cau] {
    opacity: .4;
}

.aod-step-cancelled[b-lrial48cau] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: .5rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--dtz-danger);
    color: #fff;
    font-family: 'Heebo', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Status action grid ─────────────────────────────────────────────────────── */
.aod-actions[b-lrial48cau] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.aod-action[b-lrial48cau] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: 0 .75rem;
    border: 1.5px solid var(--btn-accent, var(--dtz-bronze-border));
    border-radius: 10px;
    background: #fff;
    color: var(--dtz-blue);
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--hover-transition);
}

.aod-action i[b-lrial48cau] {
    color: var(--btn-accent, var(--dtz-bronze));
    width: 1.1rem;
    text-align: center;
}

.aod-action:disabled[b-lrial48cau] {
    opacity: .5;
    cursor: default;
}

@media (hover: hover) {
    .aod-action:enabled:hover[b-lrial48cau] {
        background: var(--dtz-bg);
    }
}

.aod-action--cancel[b-lrial48cau] {
    grid-column: 1 / -1;
}

.aod-cancelbox[b-lrial48cau] {
    grid-column: 1 / -1;
    padding: .75rem;
    border-radius: 10px;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-danger-border);
}

.aod-cancelbox-actions[b-lrial48cau] {
    display: flex;
    gap: .5rem;
}

.aod-cancel-reason[b-lrial48cau] {
    margin-top: .85rem;
    font-family: 'Heebo', sans-serif;
    font-size: .88rem;
}

.aod-cancel-reason-label[b-lrial48cau] {
    color: var(--dtz-text-muted);
    margin-inline-end: .35rem;
}

/* ── Audit timeline ─────────────────────────────────────────────────────────── */
.aod-events[b-lrial48cau] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aod-event[b-lrial48cau] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--dtz-bronze-bg);
}

.aod-event:last-child[b-lrial48cau] {
    border-bottom: 0;
    padding-bottom: 0;
}

.aod-event-icon[b-lrial48cau] {
    color: var(--dtz-bronze);
    inline-size: 1.1rem;
    text-align: center;
    margin-top: .15rem;
    flex-shrink: 0;
}

.aod-event-text[b-lrial48cau] {
    flex: 1;
    min-width: 0;
    font-family: 'Heebo', sans-serif;
    font-size: .92rem;
    color: var(--dtz-text-dark);
}

.aod-event-time[b-lrial48cau] {
    color: var(--dtz-text-muted);
    font-family: 'Heebo', sans-serif;
    font-size: .82rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Danger zone — a quiet footer, not a loud card ──────────────────────────── */
.aod-danger[b-lrial48cau] {
    margin-top: .75rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--dtz-bronze-border);
}

.aod-danger-head[b-lrial48cau] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
    color: var(--dtz-text-muted);
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: .9rem;
}

.aod-danger > .aod-btn--block[b-lrial48cau] {
    margin-bottom: .5rem;
}

.aod-danger-note[b-lrial48cau] {
    margin: 0;
    color: var(--dtz-text-muted);
    font-family: 'Heebo', sans-serif;
    font-size: .85rem;
}

.aod-danger-confirm[b-lrial48cau] {
    margin: 0 0 .5rem;
    color: var(--dtz-danger);
    font-family: 'Heebo', sans-serif;
    font-size: .9rem;
}

/* ── Form controls (Bootstrap-rendered → ::deep) ────────────────────────────── */
.aod-card[b-lrial48cau]  .form-control {
    border: 1px solid var(--dtz-bronze);
    border-radius: var(--bs-border-radius-sm);
    background: #fff;
    padding: .5rem .75rem;
    font-family: 'Heebo', sans-serif;
    font-size: .9rem;
    color: var(--dtz-blue);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aod-card[b-lrial48cau]  .form-control:focus {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.2);
    outline: none;
}

.aod-card[b-lrial48cau]  .form-control::placeholder {
    color: var(--dtz-bronze-light);
    opacity: 1;
}

/* Tracking field stays dir=ltr so the carrier reference types left-to-right, but the
   Hebrew placeholder (and the value) sit on the right like the rest of the RTL page. */
.aod-card[b-lrial48cau]  .aod-tracking-input {
    text-align: right;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .aod-actions[b-lrial48cau] {
        grid-template-columns: 1fr;
    }
    .aod-step-label[b-lrial48cau] {
        font-size: .72rem;
    }
}
/* /Components/Pages/Admin/AdminOrdersPage.razor.rz.scp.css */
/* Orders-admin filter bar. Two pill groups (status + payment) inside one soft cream
   toolbar, matching the rounded-pill / bronze-border / navy-active language used across
   the admin (see .qadmin-pending) and the public scope tabs. */

.orders-filters[b-7ada8ikhqz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;  /* status (start) · sort (centred) · payment (end) */
    gap: 14px 22px;
    padding: 14px 18px;
    margin-bottom: 1.75rem;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 14px;
}

.filter-group[b-7ada8ikhqz] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Fence a group off from the one before it with a leading divider (the right edge,
   in RTL). Applied to both מיון and תשלום so they read as separate sections. */
.filter-group--divided[b-7ada8ikhqz] {
    padding-inline-start: 18px;
    border-inline-start: 1px solid var(--dtz-bronze-border);
}

.filter-label[b-7ada8ikhqz] {
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--dtz-text-muted);
    margin-inline-end: 4px;
}

.filter-pill[b-7ada8ikhqz] {
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--dtz-blue);
    background: #fff;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 999px;
    padding: 5px 12px;   /* tightened so status + sort + payment fit one row */
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--hover-transition),
                color var(--hover-transition),
                border-color var(--hover-transition);
}

.filter-pill:hover[b-7ada8ikhqz] {
    background: var(--dtz-bronze-bg);
    border-color: var(--dtz-bronze);
}

.filter-pill--on[b-7ada8ikhqz],
.filter-pill--on:hover[b-7ada8ikhqz] {
    background: var(--dtz-blue);
    color: #fff;
    border-color: var(--dtz-blue);
}

/* ── Headline stat chips (next to the page title) ──────────────────────────
   Brief "N new / N overdue" mirror of the dashboard counts. Solid filled, same
   fill style as the status badges and the dashboard count pills — new = loud
   blue, overdue = red — so the whole admin speaks one visual language. */
.ohs-chip[b-7ada8ikhqz] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
    color: #fff;
}

.ohs-chip--new[b-7ada8ikhqz] {
    background: var(--dtz-new);
}

.ohs-chip--late[b-7ada8ikhqz] {
    background: var(--dtz-danger);
}

.ohs-chip--late .fa-clock[b-7ada8ikhqz] {
    font-size: 11px;
}

/* ── Smart search field ─────────────────────────────────────────────────────
   Mirrors the Q&A smart-search box: a single live-as-you-type field with a subtle,
   non-interactive magnifier pinned to the start (the right, in RTL) and a × clear
   button at the end (left) that appears only once there's a term. */
.order-search[b-7ada8ikhqz] {
    flex: 0 1 auto;
    width: 320px;
    max-width: 100%;
}

.os-input-wrap[b-7ada8ikhqz] {
    position: relative;
    width: 100%;
}

.os-input-icon[b-7ada8ikhqz] {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dtz-bronze);
    font-size: 14px;
    pointer-events: none;   /* decorative — not a button */
}

.os-input[b-7ada8ikhqz] {
    width: 100%;
    /* type=search gets a native (rounded) WebKit appearance that overrides border-radius —
       strip it so our corners actually apply and match the button. */
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--dtz-bronze);              /* match the "היסטוריה" button's border */
    border-radius: var(--bs-border-radius-sm);        /* exact same radius as the btn-sm button */
    background: #fff;
    /* Height parity with the .btn.btn-sm history button: same vertical padding,
       font-size and line-height (border-box) → identical rendered height. */
    padding-block: .45rem;
    padding-inline-start: 38px;     /* room for the magnifier */
    padding-inline-end: 14px;
    font-family: 'Heebo', sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--dtz-blue);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.os-input--clearable[b-7ada8ikhqz] {
    padding-inline-end: 38px;       /* room for the × only when shown */
}

.os-input:focus[b-7ada8ikhqz] {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.2);
}

.os-input[b-7ada8ikhqz]::placeholder {
    color: var(--dtz-bronze-light);   /* site-standard field placeholder colour */
    opacity: 1;
}

.os-input[b-7ada8ikhqz]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.os-clear[b-7ada8ikhqz] {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.os-clear:hover[b-7ada8ikhqz] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

/* Clickable rows: each data cell hosts a transparent <a> overlay that fills the entire
   cell (inset:0, including its padding), so the WHOLE row reads as one hyperlink — a plain
   click navigates, Ctrl/Cmd/middle-click opens a new tab. (.stretched-link is unreliable
   inside <table>; an overlay positioned against each <td> is not.) The text shows through
   beneath it; the row hover is the click affordance. */
.order-row[b-7ada8ikhqz] {
    cursor: pointer;
}

/* Bootstrap paints an opaque background on every <td> (via --bs-table-bg), which sits on
   TOP of any background set on the <tr> — so the hover highlight has to be applied to the
   cells, not the row. A soft bronze wash on all cells, plus an inset accent bar on the
   row's inline-start edge (the right, in RTL) so the active row is unmistakable. */
.order-row > td[b-7ada8ikhqz] {
    transition: background-color var(--hover-transition);
}

.order-row:hover > td[b-7ada8ikhqz] {
    background-color: var(--dtz-bronze-bg);
}

.order-row:hover > td:first-child[b-7ada8ikhqz] {
    box-shadow: inset -3px 0 0 0 var(--dtz-bronze);
}

.order-td[b-7ada8ikhqz] {
    position: relative;
}

.order-cell[b-7ada8ikhqz] {
    position: absolute;
    inset: 0;
}

/* On narrow screens drop the dividers so the groups stack cleanly. */
@media (max-width: 575.98px) {
    .filter-group--divided[b-7ada8ikhqz] {
        padding-inline-start: 0;
        border-inline-start: none;
    }
}
/* /Components/Pages/Admin/AdminQaCategoriesPage.razor.rz.scp.css */
/* ── Tree row ─────────────────────────────────────────────────────────── */
.qa-cat-row[b-rifjtay6o0] {
    list-style: none;
}

.qa-cat-row-main[b-rifjtay6o0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--dtz-bronze-bg);
    background: transparent;
    transition: background 0.15s ease;
}

.qa-cat-row-main:hover[b-rifjtay6o0] {
    background: var(--dtz-bg);
}

/* Indentation per level (start = right in RTL) */
.qa-cat-l1 > .qa-cat-row-main[b-rifjtay6o0] { padding-inline-start: 14px; font-weight: 600; }
.qa-cat-l2 > .qa-cat-row-main[b-rifjtay6o0] { padding-inline-start: 40px; font-weight: 500; font-size: 14px; }
.qa-cat-l3 > .qa-cat-row-main[b-rifjtay6o0] { padding-inline-start: 70px; font-weight: 400; font-size: 13px; color: var(--dtz-blue-muted); }

/* ── Chevron toggle ───────────────────────────────────────────────────── */
.qa-cat-chev[b-rifjtay6o0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 0;
    color: var(--dtz-bronze);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.qa-cat-chev[aria-expanded="true"][b-rifjtay6o0] {
    transform: rotate(180deg);
}

.qa-cat-chev-empty[b-rifjtay6o0] {
    cursor: default;
}

/* ── Drag handle ──────────────────────────────────────────────────────── */
.qa-cat-drag[b-rifjtay6o0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--dtz-bronze);
    font-size: 13px;
    cursor: grab;
    flex-shrink: 0;
}

.qa-cat-drag:active[b-rifjtay6o0] { cursor: grabbing; }

/* ── Name / count ─────────────────────────────────────────────────────── */
.qa-cat-name[b-rifjtay6o0] {
    flex: 1;
    cursor: pointer;
    user-select: none;
    color: var(--dtz-blue);
}

.qa-cat-name:hover[b-rifjtay6o0] {
    color: var(--dtz-bronze);
}

.qa-cat-count[b-rifjtay6o0] {
    color: var(--dtz-blue-muted);
    font-weight: 400;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    margin-inline-end: 4px;
}

.qa-cat-name-input[b-rifjtay6o0] {
    flex: 1;
    max-width: 320px;
    border-color: var(--dtz-bronze);
}

/* ── Action buttons ───────────────────────────────────────────────────── */
.qa-cat-actions[b-rifjtay6o0] {
    display: inline-flex;
    gap: 4px;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.qa-cat-row-main:hover .qa-cat-actions[b-rifjtay6o0] {
    opacity: 1;
}

.qa-cat-action[b-rifjtay6o0] {
    border: 1px solid var(--dtz-bronze);
    color: var(--dtz-blue);
    background: #fff;
    padding: 2px 8px;
}

.qa-cat-action:hover[b-rifjtay6o0] {
    background: var(--dtz-bronze);
    color: #fff;
}

.qa-cat-action-danger[b-rifjtay6o0] {
    border-color: var(--dtz-danger);
    color: var(--dtz-danger);
}

.qa-cat-action-danger:hover[b-rifjtay6o0] {
    background: var(--dtz-danger);
    color: #fff;
}

/* ── Children list ────────────────────────────────────────────────────── */
.qa-cat-children[b-rifjtay6o0] {
    background: var(--dtz-bronze-bg);
}

.qa-cat-l3.qa-cat-row .qa-cat-children[b-rifjtay6o0] {
    background: #fff;
}

/* ── Add-inline form (under row) ──────────────────────────────────────── */
.qa-cat-add-inline[b-rifjtay6o0] {
    padding: 6px 14px;
    background: #fff;
    border-bottom: 1px solid var(--dtz-bronze-bg);
}

/* ── Sortable.js helper classes (used when D&D wired) ─────────────────── */
.sortable-ghost[b-rifjtay6o0]  { opacity: 0.35; }
.sortable-chosen[b-rifjtay6o0] { background: var(--dtz-bronze-bg); }

/* ── Modal ────────────────────────────────────────────────────────────── */
.qa-cat-modal-backdrop[b-rifjtay6o0] {
    position: fixed;
    inset: 0;
    background: rgba(var(--dtz-blue-rgb), 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.qa-cat-modal[b-rifjtay6o0] {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    min-width: 360px;
    max-width: 520px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
/* /Components/Pages/Admin/AdminQasArchivePage.razor.rz.scp.css */
/* Q&A archive (published + archived). Shares the rav-queue look — same container,
   header, search and tab chrome. The list rows come from the shared QaAdminRow. */

.qadmin[b-3lhyzpcf4w] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    font-size: 19px;
}

/* Compact toolbar: title on the start (right), small icon actions on the end (left).
   position:relative anchors the floating search/settings panels below it. */
.qadmin-toolbar[b-3lhyzpcf4w] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.qadmin-tools[b-3lhyzpcf4w] { display: inline-flex; gap: .5rem; }

.qadmin-iconbtn[b-3lhyzpcf4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1.5px solid var(--dtz-bronze-border);
    background: #fff;
    color: var(--dtz-blue);
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

.qadmin-iconbtn:hover[b-3lhyzpcf4w] { background: var(--dtz-bg); border-color: var(--dtz-bronze); }
.qadmin-iconbtn--on[b-3lhyzpcf4w] { background: var(--dtz-bronze); border-color: var(--dtz-bronze); color: #fff; }

/* Floating panels anchored under the toolbar's end (left in RTL). Out of flow, so
   they don't steal any height from the list/editor when closed. */
.qadmin-float[b-3lhyzpcf4w] {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    margin-top: .5rem;
    z-index: 40;
    background: #fff;
    border: 1.5px solid var(--dtz-bronze);
    border-radius: 12px;
    padding: .75rem 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.qadmin-float--search[b-3lhyzpcf4w] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: min(420px, 90vw);
    color: var(--dtz-bronze-text);
}

.qadmin-float--search input[b-3lhyzpcf4w] {
    border: 0;
    background: transparent;
    flex: 1;
    font-size: 1.05rem;
    outline: none;
}

.qadmin-search-go[b-3lhyzpcf4w] {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 1rem;
    border: 0;
    border-radius: 8px;
    background: var(--dtz-bronze);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

/* Search-mode chip in the list controls row (replaces sort/filter). */
.qarch-search-active[b-3lhyzpcf4w] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--dtz-blue);
    font-size: .9rem;
}

.qarch-search-active > i[b-3lhyzpcf4w] { color: var(--dtz-bronze); }

.qarch-search-clear[b-3lhyzpcf4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--dtz-bg);
    color: var(--dtz-blue);
    cursor: pointer;
}

.qarch-search-clear:hover[b-3lhyzpcf4w] { background: var(--dtz-bronze); color: #fff; }

.qadmin-float--settings[b-3lhyzpcf4w] {
    min-width: min(330px, 88vw);
    max-width: min(360px, 92vw);
    padding: .6rem .8rem;
    color: var(--dtz-blue);
}

.qadmin-limit-row[b-3lhyzpcf4w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    margin-top: .4rem;
}

.qadmin-title[b-3lhyzpcf4w] {
    font-family: 'Heebo', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: var(--dtz-blue);
    margin: 0;
}

/* Published-count badge beside the title (replaces the old "showing X of Y" line). */
.qadmin-title-count[b-3lhyzpcf4w] {
    display: inline-block;
    margin-inline-start: .55rem;
    padding: .1rem .65rem;
    border-radius: 999px;
    background: var(--dtz-bronze);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.qadmin-limit-label[b-3lhyzpcf4w] { font-weight: 700; display: block; font-size: .9rem; line-height: 1.35; }

.qadmin-limit-input[b-3lhyzpcf4w] {
    width: 70px;
    min-height: 32px;
    padding: .2rem .4rem;
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: .95rem;
}

.qadmin-limit-suffix[b-3lhyzpcf4w] { color: var(--dtz-text-muted); font-size: .82rem; }

.qadmin-limit-save[b-3lhyzpcf4w] {
    margin-inline-start: auto;
    min-height: 32px;
    padding: 0 .9rem;
    border: 0;
    border-radius: 8px;
    background: var(--dtz-bronze);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
}

.qadmin-limit-save:disabled[b-3lhyzpcf4w] { opacity: .5; cursor: default; }

.qadmin-limit-msg[b-3lhyzpcf4w] { color: var(--dtz-success); font-weight: 600; }

/* Full search-index rebuild — sits below the pending-limit row in the settings panel. */
.qadmin-reindex[b-3lhyzpcf4w] {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid var(--dtz-border-light);
}

.qadmin-reindex-row[b-3lhyzpcf4w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    margin-top: .4rem;
}


.qadmin-reindex-msg[b-3lhyzpcf4w] {
    color: var(--dtz-text-muted);
    font-weight: 600;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.qadmin-reindex-msg--error[b-3lhyzpcf4w] { color: var(--dtz-danger); }

.qadmin-progress[b-3lhyzpcf4w] {
    margin-top: .6rem;
    height: 8px;
    border-radius: 999px;
    background: var(--dtz-bg);
    overflow: hidden;
}

.qadmin-progress-bar[b-3lhyzpcf4w] {
    height: 100%;
    background: var(--dtz-bronze);
    border-radius: 999px;
    transition: width .3s ease;
}

.qadmin-empty[b-3lhyzpcf4w] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.2rem;
    color: var(--dtz-text-muted);
}

.qadmin-list[b-3lhyzpcf4w] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Published-archive pagination (300K+ rows → load in pages of 50). */
.qadmin-loadmore[b-3lhyzpcf4w] {
    display: block;
    width: 100%;
    margin-top: 16px;
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    background: transparent;
    color: var(--dtz-bronze);
    padding: 12px;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.qadmin-loadmore:hover:not(:disabled)[b-3lhyzpcf4w] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

.qadmin-loadmore:disabled[b-3lhyzpcf4w] {
    opacity: 0.6;
    cursor: default;
}

/* ── Split view: list (start/right in RTL) scrolls internally, editor panel
   (end/left) stays on screen. The split's height is set at runtime (fill-height.js)
   to fill from its top down to the viewport bottom — pure CSS sticky fails here
   because html/body carry overflow-x:hidden. min-height covers the first paint. ── */
.qarch-split[b-3lhyzpcf4w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.5rem;
    align-items: stretch;
    min-height: 480px;
}

.qarch-listcol[b-3lhyzpcf4w] {
    min-width: 0;
    /* min-height:0 is essential: as a grid item with a flex (overflow:visible) body,
       its default min-height:auto would grow to the full list height, blowing past
       the split's fixed height and scrolling the whole page instead of the column. */
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Sort + filter row, pinned above the scrolling list (does not scroll with it). */
.qarch-list-controls[b-3lhyzpcf4w] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-bottom: .6rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--dtz-bronze-border);
}

.qarch-ctl[b-3lhyzpcf4w] {
    min-height: 38px;
    max-width: 100%;
    padding: 0 .6rem;
    border: 1.5px solid var(--dtz-bronze-border);
    border-radius: 8px;
    background: #fff;
    color: var(--dtz-blue);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.qarch-ctl:focus[b-3lhyzpcf4w] { outline: none; border-color: var(--dtz-bronze); }

.qarch-filter-count[b-3lhyzpcf4w] {
    margin-inline-start: auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--dtz-bronze-text);
    white-space: nowrap;
}

.qarch-list-scroll[b-3lhyzpcf4w] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-inline-end: .4rem;   /* keep rows clear of the scrollbar */
}

.qarch-list-loading[b-3lhyzpcf4w] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
}

.qarch-panelcol[b-3lhyzpcf4w] {
    min-height: 0;   /* same grid-item guard as the list column */
    height: 100%;
    overflow-y: auto;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 14px;
    background: #fff;
    padding: 1.1rem 1.25rem;
}

.qarch-placeholder[b-3lhyzpcf4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 280px;
    color: var(--dtz-text-muted);
    text-align: center;
}

.qarch-placeholder i[b-3lhyzpcf4w] { font-size: 1.6rem; color: var(--dtz-bronze); opacity: .7; }
.qarch-placeholder p[b-3lhyzpcf4w] { margin: 0; font-size: 1.05rem; }

/* Narrow screens (portrait tablet / phone): the panel becomes a full-screen overlay
   that only appears once a question is selected; its close (✕) dismisses it. */
@media (max-width: 900px) {
    /* Single column: the page scrolls normally (override the runtime height), and
       the panel becomes a full-screen overlay shown only once a row is selected. */
    .qarch-split[b-3lhyzpcf4w] {
        grid-template-columns: 1fr;
        height: auto !important;
        min-height: 0;
    }

    .qarch-listcol[b-3lhyzpcf4w] { height: auto; }
    .qarch-list-scroll[b-3lhyzpcf4w] { overflow: visible; padding-inline-end: 0; }

    .qarch-panelcol[b-3lhyzpcf4w] {
        display: none;
    }

    .qarch-panelcol--active[b-3lhyzpcf4w] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        margin: 0;
        border: 0;
        border-radius: 0;
        max-height: none;
        height: 100dvh;
        padding: 1rem 1.1rem 2rem;
        box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    }
}
/* /Components/Pages/Admin/AdminQasPinnedPage.razor.rz.scp.css */
/* Pinned-Q&A management page. The list rows themselves come from the shared
   QaAdminRow (its own scoped css); this file styles the page chrome only. */

.qpin[b-wkbwgotxvc] {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    font-size: 19px;
}

.qpin-head[b-wkbwgotxvc] { margin-bottom: 1.25rem; }

.qpin-title[b-wkbwgotxvc] {
    font-family: 'Heebo', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: var(--dtz-blue);
    margin: 0;
}

/* Pinned-count badge beside the title. */
.qpin-count[b-wkbwgotxvc] {
    display: inline-block;
    margin-inline-start: .55rem;
    min-width: 2.1rem;
    padding: .1rem .65rem;
    border-radius: 999px;
    background: var(--dtz-bronze);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    vertical-align: middle;
}

.qpin-sub[b-wkbwgotxvc] {
    margin: .5rem 0 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--dtz-text-muted);
    max-width: 60ch;
}

/* The max-pins control: a single inline row, set off in a soft card. */
.qpin-limit[b-wkbwgotxvc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.1rem;
    margin-bottom: 1.5rem;
    border: 1.5px solid var(--dtz-bronze-border);
    border-radius: 12px;
    background: var(--dtz-bg);
}

.qpin-limit-label[b-wkbwgotxvc] {
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0;
}

.qpin-limit-input[b-wkbwgotxvc] {
    width: 78px;
    min-height: 40px;
    padding: .2rem .4rem;
    border: 1.5px solid var(--dtz-bronze);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.qpin-limit-save[b-wkbwgotxvc] {
    min-height: 40px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 8px;
    background: var(--dtz-bronze);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
}

.qpin-limit-save:disabled[b-wkbwgotxvc] { opacity: .5; cursor: default; }

.qpin-limit-msg[b-wkbwgotxvc] { color: var(--dtz-success); font-weight: 600; }

.qpin-empty[b-wkbwgotxvc] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.2rem;
    color: var(--dtz-text-muted);
}

.qadmin-list[b-wkbwgotxvc] {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* /Components/Pages/Admin/AdminQuestionDetailPage.razor.rz.scp.css */
/* Single-column, full-screen answer editor (requirements §13.4). */

.qedit[b-ifbjr6km5t] {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    font-size: 19px;
}

.qedit-top[b-ifbjr6km5t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.qedit-back[b-ifbjr6km5t] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 56px;
    padding: 0 1.25rem;
    border: 2px solid var(--dtz-bronze);
    background: #fff;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dtz-blue);
    cursor: pointer;
}

.qedit-title[b-ifbjr6km5t] {
    font-family: 'Heebo', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--dtz-blue);
    margin: 0 0 1rem;
}

.qedit-saved[b-ifbjr6km5t] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--dtz-success-bg);
    color: var(--dtz-success);
    border-radius: 8px;
    padding: .5rem 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.qedit-alert[b-ifbjr6km5t] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.qedit-notfound[b-ifbjr6km5t] { padding: 2rem 0; font-size: 1.2rem; }

.qedit-asker[b-ifbjr6km5t] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.qedit-asker .lbl[b-ifbjr6km5t] { font-weight: 800; color: var(--dtz-blue); }

.qedit-section[b-ifbjr6km5t] { margin-bottom: 1.5rem; }

.qedit-h[b-ifbjr6km5t] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--dtz-blue);
    margin: 0 0 .6rem;
}

/* The question is editable in place — no edit button. It reads as plain text
   until the rav hovers/focuses, when a subtle field affordance appears.
   field-sizing:content lets it grow with its text where supported (min-height
   covers the rest). */
.qedit-question[b-ifbjr6km5t] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--dtz-text-dark);
    direction: rtl;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: .5rem .65rem;
    margin: 0 -.65rem;          /* keep the text visually flush despite padding */
    resize: none;
    field-sizing: content;
    min-height: 2.6rem;
    transition: border-color .12s, background .12s, box-shadow .12s;
}

.qedit-question:hover[b-ifbjr6km5t] { border-color: var(--dtz-bronze-border); background: var(--dtz-bg); }

.qedit-question:focus[b-ifbjr6km5t] {
    outline: none;
    border-color: var(--dtz-bronze);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(var(--dtz-bronze-rgb), .18);
}

/* Auto-grows to fit its content (auto-grow.js): starts compact, expands as the
   rav writes so there's never an inner scrollbar — the page scrolls instead. */
.qedit-answer[b-ifbjr6km5t] {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    border: 2px solid var(--dtz-bronze);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.7;
    direction: rtl;
    resize: none;
    overflow: hidden;   /* no scrollbar flash while it grows */
}

/* Pin-on-publish opt-in (pre-publish only). Large, obvious touch target. */
.qedit-pinopt[b-ifbjr6km5t] {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: 0 1.1rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--dtz-bronze);
    border-radius: 12px;
    background: var(--dtz-bg);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dtz-blue);
}

.qedit-pinopt input[type="checkbox"][b-ifbjr6km5t] {
    width: 26px;
    height: 26px;
    accent-color: var(--dtz-bronze);
    cursor: pointer;
    flex-shrink: 0;
}

.qedit-pinopt-text[b-ifbjr6km5t] { display: inline-flex; align-items: center; gap: .5rem; }

.qedit-actions[b-ifbjr6km5t] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
}

.qedit-btn[b-ifbjr6km5t] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 60px;
    padding: 0 1.5rem;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
}

.qedit-btn:disabled[b-ifbjr6km5t] { opacity: .6; cursor: default; }

.qedit-btn--save[b-ifbjr6km5t]      { background: var(--dtz-success); }
.qedit-btn--draft[b-ifbjr6km5t]     { background: #fff; color: var(--dtz-blue); border-color: var(--dtz-bronze); }
.qedit-btn--pin[b-ifbjr6km5t]       { background: var(--dtz-bronze); }
.qedit-btn--delete[b-ifbjr6km5t]    { background: var(--dtz-danger); }
.qedit-btn--ghost[b-ifbjr6km5t]     { background: #fff; color: var(--dtz-blue); border-color: var(--dtz-bronze); }
.qedit-btn--transfer[b-ifbjr6km5t]  { background: #fff; color: var(--dtz-blue); border-color: var(--dtz-blue); }

/* "Not for you?" re-route group — set apart from the primary save/delete row so
   it reads as a secondary action and isn't tapped by reflex. */
.qedit-transfer[b-ifbjr6km5t] {
    border-top: 1px dashed var(--dtz-bronze-border);
    padding-top: 1.25rem;
    margin-bottom: 2rem;
}

.qedit-transfer-label[b-ifbjr6km5t] {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dtz-blue);
    margin-bottom: .75rem;
}

.qedit-transfer-actions[b-ifbjr6km5t] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.qedit-others[b-ifbjr6km5t] {
    border-top: 2px solid var(--dtz-bronze-border);
    padding-top: 1.5rem;
}

.qedit-others-list[b-ifbjr6km5t] { list-style: none; margin: 0; padding: 0; }

.qedit-other[b-ifbjr6km5t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: .75rem 1rem;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 10px;
    margin-bottom: .6rem;
    cursor: pointer;
}

.qedit-other:hover[b-ifbjr6km5t] { background: var(--dtz-bg); border-color: var(--dtz-bronze); }

.qedit-other-q[b-ifbjr6km5t] {
    flex: 1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    font-size: 1.05rem;
}

/* Unsaved-changes prompt (§13.9) */
.qedit-modal-backdrop[b-ifbjr6km5t] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1050;
}

.qedit-modal[b-ifbjr6km5t] {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.qedit-modal-title[b-ifbjr6km5t] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dtz-blue);
    margin: 0 0 1.5rem;
    text-align: center;
}

.qedit-modal-actions[b-ifbjr6km5t] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.qedit-modal-actions .qedit-btn[b-ifbjr6km5t] {
    width: 100%;
    justify-content: center;
}
/* /Components/Pages/Admin/AdminQuestionsPage.razor.rz.scp.css */
/* Accessible, tablet-first admin queue (requirements §13). Large type, high
   contrast, big touch targets (≥48px, primary actions 56px+), single column.
   The list rows themselves live in the shared QaAdminRow component. */

.qadmin[b-onafgjq56m] {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    font-size: 19px;
}

.qadmin-header[b-onafgjq56m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.qadmin-title[b-onafgjq56m] {
    font-family: 'Heebo', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: var(--dtz-blue);
    margin: 0;
}

.qadmin-header-actions[b-onafgjq56m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

/* Secondary action — bronze outline so the blue blessings button stays primary. */
.qadmin-refresh-btn[b-onafgjq56m] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 56px;
    padding: 0 1.25rem;
    border: 2px solid var(--dtz-bronze);
    border-radius: 10px;
    background: transparent;
    color: var(--dtz-bronze-text);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.qadmin-refresh-btn:hover[b-onafgjq56m] { background: var(--dtz-bronze-bg); }
.qadmin-refresh-btn:disabled[b-onafgjq56m] { opacity: .6; cursor: default; }

.qadmin-blessings-btn[b-onafgjq56m] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 56px;
    padding: 0 1.25rem;
    border-radius: 10px;
    background: var(--dtz-blue);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
}

.qadmin-blessings-btn:hover[b-onafgjq56m] { background: var(--dtz-blue-hover); color: #fff; }

/* Transient post-refresh confirmation. The slide-in animation IS the gesture —
   it fires even when the text is unchanged, so a no-op refresh still feels alive. */
.qadmin-refresh-note[b-onafgjq56m] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1.1rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    background: var(--dtz-bronze-bg);
    border: 1px solid var(--dtz-bronze);
    color: var(--dtz-bronze-text);
    font-size: 1.05rem;
    font-weight: 700;
    animation: qadmin-refresh-in-b-onafgjq56m .25s ease-out;
}

/* New questions arrived → success accent to pull the eye. */
.qadmin-refresh-note--new[b-onafgjq56m] {
    background: var(--dtz-success-bg);
    border-color: var(--dtz-success);
    color: var(--dtz-success);
}

@keyframes qadmin-refresh-in-b-onafgjq56m {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qadmin-formtoggle[b-onafgjq56m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
}

.qadmin-pending[b-onafgjq56m] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    color: var(--dtz-blue);
    font-size: 1rem;
}

.qadmin-pending strong[b-onafgjq56m] { font-weight: 800; }

.qadmin-pending--blocked[b-onafgjq56m] {
    background: var(--dtz-danger-bg);
    border-color: var(--dtz-danger);
    color: var(--dtz-danger);
}

.qadmin-pending-tag[b-onafgjq56m] {
    margin-inline-start: .25rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--dtz-danger);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.qadmin-formtoggle-label[b-onafgjq56m] { font-weight: 700; color: var(--dtz-blue); }

.qadmin-toggle[b-onafgjq56m] {
    min-height: 48px;
    min-width: 110px;
    padding: 0 1.25rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
}

.qadmin-toggle.on[b-onafgjq56m]  { background: var(--dtz-success); }
.qadmin-toggle.off[b-onafgjq56m] { background: var(--dtz-danger); }
.qadmin-toggle:disabled[b-onafgjq56m] { opacity: .6; cursor: default; }

.qadmin-search[b-onafgjq56m] {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 2px solid var(--dtz-bronze);
    border-radius: 12px;
    padding: 0 1rem;
    min-height: 56px;
    background: var(--dtz-bg);
    margin-bottom: 1.25rem;
    color: var(--dtz-bronze-text);
}

.qadmin-search input[b-onafgjq56m] {
    border: 0;
    background: transparent;
    flex: 1;
    font-size: 1.1rem;
    outline: none;
}

/* Hide the browser's built-in search clear (✕) — we render our own (.qadmin-search-x)
   so the native one would be a confusing second ✕ that appears only on hover. */
.qadmin-search input[b-onafgjq56m]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.qadmin-search-x[b-onafgjq56m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze-text);
    font-size: 1rem;
    cursor: pointer;
}

.qadmin-search-x:hover[b-onafgjq56m] { background: var(--dtz-bronze-bg); color: var(--dtz-blue); }

/* Search-results header: the active-query chip + a found-count. */
.qadmin-results-head[b-onafgjq56m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.qadmin-search-chip[b-onafgjq56m] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: var(--dtz-bronze-bg);
    border: 1px solid var(--dtz-bronze);
    color: var(--dtz-bronze-text);
    font-size: 1rem;
    font-weight: 700;
}

.qadmin-results-count[b-onafgjq56m] { color: var(--dtz-text-muted); font-size: 1rem; }

.qadmin-search-loading[b-onafgjq56m] {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.qadmin-bulk[b-onafgjq56m] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 56px;
    padding: 0 1.5rem;
    margin-bottom: 1.25rem;
    border: 0;
    border-radius: 12px;
    background: var(--dtz-success);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
}

.qadmin-bulk:disabled[b-onafgjq56m] { opacity: .6; cursor: default; }

.qadmin-alert[b-onafgjq56m] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
}

.qadmin-empty[b-onafgjq56m] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.2rem;
    color: var(--dtz-text-muted);
}

.qadmin-list[b-onafgjq56m] {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* /Components/Pages/Admin/AdminRabbiBlessingsPage.razor.rz.scp.css */
/* Accessible blessings list for the Rabbi (requirements §14.4). Large type,
   FIFO, single column, big "כולם התברכו" action. */

.bless[b-s7p91c9ial] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    font-size: 20px;
}

.bless-top[b-s7p91c9ial] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bless-back[b-s7p91c9ial] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 56px;
    padding: 0 1.25rem;
    border: 2px solid var(--dtz-bronze);
    background: #fff;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dtz-blue);
    cursor: pointer;
}

.bless-title[b-s7p91c9ial] {
    font-family: 'Heebo', sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    color: var(--dtz-blue);
    margin: 0;
    flex: 1;
}

.bless-all[b-s7p91c9ial] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 60px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 12px;
    background: var(--dtz-success);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

.bless-all:disabled[b-s7p91c9ial] { opacity: .6; cursor: default; }

.bless-empty[b-s7p91c9ial] {
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1.3rem;
    color: var(--dtz-text-muted);
}

.bless-list[b-s7p91c9ial] { list-style: none; margin: 0; padding: 0; }

.bless-row[b-s7p91c9ial] {
    padding: 1.25rem 1.25rem;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 12px;
    margin-bottom: .85rem;
    background: #fff;
}

.bless-name[b-s7p91c9ial] {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--dtz-blue);
}

.bless-desc[b-s7p91c9ial] {
    margin-top: .5rem;
    font-size: 1.1rem;
    color: var(--dtz-text-muted);
}
/* /Components/Pages/AskTheRavPage.razor.rz.scp.css */
/* Centered form card. The rabbi image pops up above the card top (negative
   margin), so the wrapper reserves clearance below the breadcrumb. */
.ask-page-card-wrap[b-pxuqn8eqgu] {
    max-width: 560px;
    margin-top: 110px;
}

.ask-page-card[b-pxuqn8eqgu] {
    border: 2px solid var(--dtz-bronze);
    border-radius: 8px;
}

.ask-page-card-header[b-pxuqn8eqgu] {
    background-color: var(--dtz-bronze);
}

.harav-form-header-img[b-pxuqn8eqgu] {
    width: 200px;
    height: auto;
    margin-top: -100px;
}

.ask-page-card-body[b-pxuqn8eqgu] {
    background-color: var(--dtz-bg);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
/* /Components/Pages/BookCategoryPage.razor.rz.scp.css */
/* Scoped styles for the book category page (migrated from the former global
   app-shop.css). The category header band; the book grid below renders
   <BookCard> children, which carry their own scoped styles. */

.category-hero[b-ju3qt13kil] {
    background: var(--dtz-bg);
    padding: 60px 16px 40px;
}
@media (min-width: 768px) {
    .category-hero[b-ju3qt13kil] { padding: 80px 24px 56px; }
}
.category-subtitle[b-ju3qt13kil] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--dtz-blue);
    margin: 0;
}
@media (min-width: 768px) { .category-subtitle[b-ju3qt13kil] { font-size: 26px; } }
@media (min-width: 992px) { .category-subtitle[b-ju3qt13kil] { font-size: 30px; } }

.category-description[b-ju3qt13kil] {
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--dtz-blue);
    margin: 0 auto;
    max-width: 640px;
    white-space: pre-line;
}
@media (min-width: 992px) {
    .category-description[b-ju3qt13kil] { font-size: 18px; line-height: 1.9; }
}
/* /Components/Pages/BookDetailPage.razor.rz.scp.css */
/* Scoped styles for the book detail page (migrated from the former global
   app-shop.css). Covers the quantity stepper, add-to-cart button, color
   swatches, spec chips, the product accordion and the related-books band.
   The related strip renders <BookCard> children (their own scope) — the
   .related-section rule only styles the band itself. */

/* ===== Related-books section (full-width cream band) ===== */
.related-section[b-xe21b7cvdp] {
    background: var(--dtz-bg);
    margin-top: 40px;
}

/* Quantity stepper (- 1 +) and Add-to-cart button. Both share the same height
   via the shared --product-action-height token. */
.qty-stepper[b-xe21b7cvdp],
.add-to-cart-btn[b-xe21b7cvdp] {
    --product-action-height: 48px;
    height: var(--product-action-height);
}
.qty-stepper[b-xe21b7cvdp] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.qty-btn[b-xe21b7cvdp] {
    background: transparent;
    border: none;
    color: var(--dtz-blue);
    padding: 0 6px;
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--hover-transition);
}
.qty-btn:disabled[b-xe21b7cvdp] { color: var(--dtz-text-muted); cursor: not-allowed; }
@media (hover: hover) {
    .qty-btn:not(:disabled):hover[b-xe21b7cvdp] { background: var(--hover-overlay-blue); }
}
.qty-value[b-xe21b7cvdp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--dtz-blue);
}

.add-to-cart-btn[b-xe21b7cvdp] {
    background: var(--dtz-bronze-hover);
    border: none;
    color: #fff;
    padding: 0 28px;
    border-radius: 8px;
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--hover-transition);
}
@media (hover: hover) {
    .add-to-cart-btn:hover:not(:disabled)[b-xe21b7cvdp] { background: var(--dtz-bronze-text); }
}
.add-to-cart-btn:disabled[b-xe21b7cvdp] { opacity: 0.6; cursor: not-allowed; }
.add-to-cart-btn:focus[b-xe21b7cvdp] { outline: none; }
.add-to-cart-btn:focus-visible[b-xe21b7cvdp] { box-shadow: var(--focus-ring); }

/* Small label (e.g. "בחר צבע:"). Own class so .font-article's responsive
   !important rules don't override. */
.product-label[b-xe21b7cvdp] {
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--dtz-blue);
}
/* Selected colour name, shown inline after the "בחר צבע:" label so the
   shopper sees their current choice spelled out, not only on hover. */
.selected-color-name[b-xe21b7cvdp] {
    color: var(--dtz-text-dark);
    font-weight: 600;
}
.selected-color-soldout[b-xe21b7cvdp] {
    color: var(--dtz-danger);
    font-weight: 600;
}

/* Price — Heebo, not the headline serif. */
.product-price[b-xe21b7cvdp] {
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--dtz-blue);
}

/* Sale: original price crossed out, muted, just left of the paid price (RTL). */
.product-price-original[b-xe21b7cvdp] {
    margin-inline-start: 12px;
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--dtz-text-muted);
    text-decoration: line-through;
}

/* ===== Cover + specs ===== */
.book-cover-large[b-xe21b7cvdp] {
    max-width: 100%;
    max-height: 520px;
    object-fit: contain;
}
.book-cover-placeholder[b-xe21b7cvdp] {
    width: 100%;
    min-height: 320px;
    background: var(--dtz-bg);
    border: 1px dashed var(--dtz-bronze);
    border-radius: 8px;
}
/* Attribute chips: stacked icon-over-label, cream bg, bronze hairline border. */
.book-spec[b-xe21b7cvdp] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    color: var(--dtz-blue);
    border-radius: 6px;
    padding: 14px 10px;
    min-width: 96px;
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.book-spec-icon[b-xe21b7cvdp] { width: 28px; height: 28px; object-fit: contain; display: block; }

.color-swatch[b-xe21b7cvdp] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--dtz-bronze);
    padding: 0;
    cursor: pointer;
    transition: transform var(--hover-transition), box-shadow var(--hover-transition);
}
@media (hover: hover) {
    .color-swatch:hover[b-xe21b7cvdp] { transform: scale(1.1); }
}
.color-swatch.active[b-xe21b7cvdp] {
    box-shadow: 0 0 0 2px var(--dtz-blue);
}
.color-swatch:focus[b-xe21b7cvdp] { outline: none; }
.color-swatch:focus-visible[b-xe21b7cvdp] { box-shadow: 0 0 0 2px var(--dtz-blue), var(--focus-ring); }

/* Sold-out color: stays clickable (so the shopper can preview its image), but is
   dimmed and crossed with a diagonal strike so it reads as unavailable. */
.color-swatch.unavailable[b-xe21b7cvdp] {
    position: relative;
    opacity: .5;
}
.color-swatch.unavailable.active[b-xe21b7cvdp] { opacity: .75; }
.color-swatch.unavailable[b-xe21b7cvdp]::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(to top right,
        transparent calc(50% - 1.5px),
        var(--dtz-danger) calc(50% - 1.5px),
        var(--dtz-danger) calc(50% + 1.5px),
        transparent calc(50% + 1.5px));
}
@media (hover: hover) {
    .color-swatch.unavailable:hover[b-xe21b7cvdp] { transform: none; }
}

/* Accordion sits inside a 12px horizontal inset so the dividers don't reach
   the edges (per the designer). No top border above the first item. */
.product-accordion[b-xe21b7cvdp] { padding: 0 12px; }
.product-accordion-toggle[b-xe21b7cvdp] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--dtz-bronze-border);
    padding: 14px 0;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Heebo', Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--dtz-blue);
    cursor: pointer;
    transition: color var(--hover-transition);
}
.product-accordion-toggle i[b-xe21b7cvdp] { color: var(--dtz-blue); font-size: 12px; }
@media (hover: hover) {
    .product-accordion-toggle:hover[b-xe21b7cvdp] { color: var(--dtz-bronze); }
}
.product-accordion-toggle:focus[b-xe21b7cvdp] { outline: none; }
.product-accordion-toggle:focus-visible[b-xe21b7cvdp] { box-shadow: var(--focus-ring); border-radius: 4px; }
.product-accordion-body[b-xe21b7cvdp] {
    padding: 12px 0 18px;
    border-bottom: 1px solid var(--dtz-bronze-border);
    color: var(--dtz-blue);
}
.product-accordion-body .font-article[b-xe21b7cvdp] { font-size: 16px; line-height: 1.6; }
/* /Components/Pages/BooksPage.razor.rz.scp.css */
/* Category banner styles live in BookCategoryCard.razor.css.
   Search/sort/tag toolbar styles live in BooksFilterBar.razor.css (shared). */
/* /Components/Pages/CartPage.razor.rz.scp.css */
/* Scoped styles for the full shopping-cart page (migrated from the former
   global app-shop.css). All elements are rendered directly by CartPage. */

.cart-page[b-m30s34glqp] {
    background: var(--dtz-bg);
    padding: 56px 0 80px;
}
.cart-page-inner[b-m30s34glqp] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}
.cart-page-title[b-m30s34glqp] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin-bottom: 36px;
    text-align: right;
}

.cart-layout[b-m30s34glqp] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    align-items: start;
}

/* --- Items table (CSS Grid, RTL-aware) --- */
.cart-items[b-m30s34glqp] { min-width: 0; }
.cart-headers[b-m30s34glqp],
.cart-row[b-m30s34glqp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 110px 110px 40px;
    align-items: center;
    column-gap: 16px;
    padding: 16px 4px;
}
.cart-headers[b-m30s34glqp] {
    border-bottom: 1px solid var(--dtz-bronze-border);
    padding-top: 0;
    padding-bottom: 10px;
}
.cart-h[b-m30s34glqp] {
    font-size: 14px;
    color: var(--dtz-blue);
    font-weight: 500;
    text-align: right;
}
.cart-h-price[b-m30s34glqp],
.cart-h-qty[b-m30s34glqp],
.cart-h-subtotal[b-m30s34glqp] { text-align: center; }

.cart-row[b-m30s34glqp] { border-bottom: 1px solid var(--dtz-bronze-border); }

.cart-c[b-m30s34glqp] { font-size: 15px; color: var(--dtz-blue); }
.cart-c-price[b-m30s34glqp],
.cart-c-subtotal[b-m30s34glqp] { text-align: center; font-size: 15px; }
.cart-c-qty[b-m30s34glqp]      { display: flex; justify-content: center; }
.cart-c-remove[b-m30s34glqp]   { display: flex; justify-content: center; }

/* Product cell (image + name + color) — entire area clickable.
   In RTL with DOM order [image, text] and default flex-direction:row,
   image lands on the right, name+color on the left — matching the mockup. */
.cart-product-link[b-m30s34glqp] {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}
.cart-product-link:hover[b-m30s34glqp] { text-decoration: none; }
.cart-product-link:hover .cart-product-name[b-m30s34glqp] { color: var(--dtz-bronze); }

.cart-product-thumb[b-m30s34glqp] {
    width: 56px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}
.cart-product-thumb-placeholder[b-m30s34glqp] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dtz-bg);
    color: var(--dtz-bronze);
}
.cart-product-text[b-m30s34glqp] { min-width: 0; }
.cart-product-name[b-m30s34glqp] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dtz-blue);
    transition: color var(--hover-transition);
}
.cart-product-color[b-m30s34glqp] { font-size: 13px; color: var(--dtz-text-muted); margin-top: 4px; }

/* Quantity stepper — minimal text-style controls (no buttons-with-boxes) */
.cart-qty-stepper[b-m30s34glqp] {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cart-qty-step[b-m30s34glqp] {
    background: transparent;
    border: none;
    color: var(--dtz-blue);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--hover-transition);
}
.cart-qty-step:hover:not(:disabled)[b-m30s34glqp] { color: var(--dtz-bronze); }
.cart-qty-step:disabled[b-m30s34glqp] { color: var(--dtz-border-light); cursor: not-allowed; }
.cart-qty-step:focus[b-m30s34glqp] { outline: none; }
.cart-qty-step:focus-visible[b-m30s34glqp] { box-shadow: var(--focus-ring); border-radius: 4px; }
.cart-qty-value[b-m30s34glqp] {
    font-size: 15px;
    color: var(--dtz-blue);
    min-width: 12px;
    text-align: center;
}

/* Trash button */
.cart-remove-btn[b-m30s34glqp] {
    background: transparent;
    border: none;
    color: var(--dtz-text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 50%;
    transition: color var(--hover-transition), background-color var(--hover-transition);
}
.cart-remove-btn:hover[b-m30s34glqp] { color: var(--dtz-blue); background: var(--hover-overlay-blue); }
.cart-remove-btn:focus[b-m30s34glqp] { outline: none; }
.cart-remove-btn:focus-visible[b-m30s34glqp] { box-shadow: var(--focus-ring); }

/* --- Order summary box --- */
.cart-summary[b-m30s34glqp] {
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 6px;
    padding: 22px 22px 18px;
    background: #fff;
    text-align: right;
}
.cart-summary-title[b-m30s34glqp] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0 0 18px;
    text-align: right;
}
.cart-summary-row[b-m30s34glqp],
.cart-summary-total[b-m30s34glqp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--dtz-blue);
}
.cart-summary-row[b-m30s34glqp] { margin-bottom: 6px; }
.cart-summary-note[b-m30s34glqp] {
    font-size: 12px;
    color: var(--dtz-text-muted);
    margin-bottom: 14px;
}
.cart-summary-total[b-m30s34glqp] {
    padding-top: 14px;
    border-top: 1px solid var(--dtz-bronze-border);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 18px;
}
.cart-summary-label[b-m30s34glqp] { color: var(--dtz-blue); }
.cart-summary-value[b-m30s34glqp] { color: var(--dtz-blue); }

.cart-checkout-btn[b-m30s34glqp] {
    width: 100%;
    background: var(--dtz-blue);
    border: 1px solid var(--dtz-blue);
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--hover-transition), border-color var(--hover-transition);
}
.cart-checkout-btn:hover[b-m30s34glqp] { background: var(--dtz-blue-hover); border-color: var(--dtz-blue-hover); }
.cart-checkout-btn:focus[b-m30s34glqp] { outline: none; }
.cart-checkout-btn:focus-visible[b-m30s34glqp] { box-shadow: var(--focus-ring); }

/* Responsive: stack summary below items on small screens */
@media (max-width: 991.98px) {
    .cart-layout[b-m30s34glqp] { grid-template-columns: 1fr; gap: 24px; }
    .cart-summary[b-m30s34glqp] { max-width: 420px; }
}
@media (max-width: 575.98px) {
    .cart-page[b-m30s34glqp] { padding: 32px 16px 56px; }
    .cart-page-title[b-m30s34glqp] { font-size: 32px; margin-bottom: 24px; }
    .cart-headers[b-m30s34glqp] { display: none; }
    .cart-row[b-m30s34glqp] {
        grid-template-columns: 1fr 32px;
        grid-template-areas:
            "product remove"
            "price   remove"
            "qty     subtotal";
        row-gap: 8px;
    }
    .cart-c-product[b-m30s34glqp]  { grid-area: product; }
    .cart-c-price[b-m30s34glqp]    { grid-area: price; text-align: right; }
    .cart-c-qty[b-m30s34glqp]      { grid-area: qty; justify-content: flex-start; }
    .cart-c-subtotal[b-m30s34glqp] { grid-area: subtotal; text-align: left; }
    .cart-c-remove[b-m30s34glqp]   { grid-area: remove; align-self: start; }
}
/* /Components/Pages/CheckoutPage.razor.rz.scp.css */
/* Scoped styles for the checkout page (migrated from the former global
   app-shop.css). Most elements are rendered directly by CheckoutPage; the one
   exception is Blazor's <ValidationMessage>, whose .validation-message output is
   rendered by that child component and so needs ::deep to be reachable. */

.checkout-page[b-nhumq14ppc] {
    background: var(--dtz-bg);
    padding: 48px 0 80px;
    min-height: calc(100vh - 100px);
}
.checkout-page-inner[b-nhumq14ppc] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

.checkout-layout[b-nhumq14ppc] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}

/* --- Form column header --- */
.checkout-header[b-nhumq14ppc] { margin-bottom: 28px; text-align: right; }
.checkout-page-title[b-nhumq14ppc] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0 0 6px;
    line-height: 1.1;
}
.checkout-page-subtitle[b-nhumq14ppc] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0;
}
.checkout-section-title[b-nhumq14ppc] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 28px 0 14px;
    text-align: right;
}

/* --- Form labels & inputs --- */
.checkout-fields .col-4[b-nhumq14ppc],
.checkout-fields .col-6[b-nhumq14ppc] { text-align: right; }

.checkout-label[b-nhumq14ppc] {
    display: block;
    font-size: 14px;
    color: var(--dtz-blue);
    margin-bottom: 6px;
    font-weight: 500;
}
/* The inputs are Blazor <InputText> components — their rendered <input> lives
   inside the child component, so it is reached via ::deep from the page-scoped
   .checkout-layout ancestor rather than a plain scoped selector. */
.checkout-layout[b-nhumq14ppc]  .checkout-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--dtz-bronze);
    border-radius: 4px;
    color: var(--dtz-blue);
    font-size: 14px;
    transition: border-color var(--hover-transition), box-shadow var(--hover-transition);
}
.checkout-layout[b-nhumq14ppc]  .checkout-input:focus {
    outline: none;
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.18);
}
.checkout-layout[b-nhumq14ppc]  .checkout-input.invalid { border-color: var(--dtz-danger); }

/* Multi-line note field — overrides the fixed input height to grow with content. */
.checkout-notes[b-nhumq14ppc] { margin-top: 16px; }
.checkout-layout[b-nhumq14ppc]  .checkout-textarea {
    height: auto;
    min-height: 84px;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.5;
}
.checkout-notes[b-nhumq14ppc]  .validation-message {
    color: var(--dtz-danger);
    font-size: 12px;
    margin-top: 4px;
    text-align: right;
}

/* Page-rendered inline error messages. */
.checkout-field-error[b-nhumq14ppc] {
    color: var(--dtz-danger);
    font-size: 12px;
    margin-top: 4px;
    text-align: right;
}
/* Blazor <ValidationMessage> output lives inside that child component, so it is
   reached with ::deep rather than a plain scoped descendant selector. */
.checkout-fields[b-nhumq14ppc]  .validation-message {
    color: var(--dtz-danger);
    font-size: 12px;
    margin-top: 4px;
    text-align: right;
}

/* --- Custom checkbox ("ברצוני שהשם לחשבונית יהיה שונה") --- */
.checkout-checkbox[b-nhumq14ppc] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin-top: 8px;
    font-size: 14px;
    color: var(--dtz-blue);
}
.checkout-checkbox input[type="checkbox"][b-nhumq14ppc] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.checkout-checkbox-mark[b-nhumq14ppc] {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--dtz-blue);
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: background-color var(--hover-transition), border-color var(--hover-transition);
}
.checkout-checkbox input[type="checkbox"]:checked + .checkout-checkbox-mark[b-nhumq14ppc] {
    background: var(--dtz-blue);
}
.checkout-checkbox input[type="checkbox"]:checked + .checkout-checkbox-mark[b-nhumq14ppc]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}
.checkout-checkbox input[type="checkbox"]:focus-visible + .checkout-checkbox-mark[b-nhumq14ppc] {
    box-shadow: var(--focus-ring);
}
.checkout-checkbox-text[b-nhumq14ppc] { line-height: 1.2; font-weight: 700; }

/* --- Shipping method tiles --- */
.checkout-shipping-title[b-nhumq14ppc] {
    font-size: 42px;
    text-align: right;
    margin-top: 40px;
    margin-bottom: 18px;
    line-height: 1.1;
}

.shipping-tiles[b-nhumq14ppc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.shipping-tile[b-nhumq14ppc] {
    background: transparent;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--hover-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: inherit;
}
.shipping-tile:hover:not(.is-selected)[b-nhumq14ppc] { background: rgba(255, 255, 255, 0.4); }
.shipping-tile.is-selected[b-nhumq14ppc] { background: #fff; }
.shipping-tile:focus[b-nhumq14ppc] { outline: none; }
.shipping-tile:focus-visible[b-nhumq14ppc] { box-shadow: var(--focus-ring); }

.shipping-tile-title[b-nhumq14ppc] {
    font-size: 16px;
    font-weight: 700;
    color: var(--dtz-blue);
    line-height: 1.3;
}
.shipping-tile-price[b-nhumq14ppc] {
    font-size: 22px;
    font-weight: 400;
    color: var(--dtz-blue);
}

/* --- Conditional notice below tiles --- */
.shipping-notice[b-nhumq14ppc] {
    background: #fff;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    padding: 22px 26px;
    margin-bottom: 24px;
    color: var(--dtz-blue);
    text-align: right;
}
.shipping-notice p[b-nhumq14ppc] {
    margin: 0 0 6px;
    line-height: 1.6;
}
.shipping-notice p:last-child[b-nhumq14ppc] { margin-bottom: 0; }
.shipping-notice strong[b-nhumq14ppc] { font-weight: 700; }

.shipping-notice-intro[b-nhumq14ppc] { font-size: 13px; font-weight: 400; }
.shipping-notice-key[b-nhumq14ppc]   { font-size: 16px; }
.shipping-notice-warn[b-nhumq14ppc]  { font-size: 16px; font-weight: 400; margin-top: 10px !important; }

.shipping-same-checkbox[b-nhumq14ppc] { margin: 0; }

/* Combined card holding the "same as billing" toggle, the optional shipping
   address form, and the delivery-time note — all on one white surface. */
.shipping-delivery-card[b-nhumq14ppc] {
    background: #fff;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    padding: 22px 26px;
    margin-bottom: 24px;
}
.shipping-delivery-note[b-nhumq14ppc] {
    font-size: 12px;
    color: var(--dtz-text-muted);
    text-align: right;
    margin: 16px 0 0;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .shipping-tiles[b-nhumq14ppc] { grid-template-columns: 1fr; }
}

/* --- Order summary panel (left column in RTL) --- */
.checkout-summary[b-nhumq14ppc] {
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    padding: 22px 22px 18px;
    background: transparent;
    text-align: right;
    /* Push the panel down so its top lines up with the start of the first
       form field, rather than with the page title in the right column. */
    margin-top: 90px;
}
@media (max-width: 991.98px) {
    .checkout-summary[b-nhumq14ppc] { margin-top: 0; }
}
.checkout-summary-title[b-nhumq14ppc] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0 0 12px;
    text-align: right;
}
.checkout-summary-items[b-nhumq14ppc] {
    border-bottom: 1px solid var(--dtz-bronze-border);
    padding-bottom: 6px;
    margin-bottom: 12px;
}
.checkout-summary-item[b-nhumq14ppc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.checkout-summary-item-remove[b-nhumq14ppc] {
    background: transparent;
    border: none;
    color: var(--dtz-text-muted);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: color var(--hover-transition), background-color var(--hover-transition);
}
.checkout-summary-item-remove:hover[b-nhumq14ppc] { color: var(--dtz-blue); background: var(--hover-overlay-blue); }
.checkout-summary-item-remove:focus[b-nhumq14ppc] { outline: none; }
.checkout-summary-item-remove:focus-visible[b-nhumq14ppc] { box-shadow: var(--focus-ring); }
.checkout-summary-item-info[b-nhumq14ppc] { flex: 1; min-width: 0; }
.checkout-summary-item-name[b-nhumq14ppc] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dtz-blue);
}
.checkout-summary-item-color[b-nhumq14ppc] {
    font-size: 12px;
    color: var(--dtz-text-muted);
    margin-top: 2px;
}
.checkout-summary-item-meta[b-nhumq14ppc] {
    font-size: 13px;
    color: var(--dtz-text-muted);
    margin-top: 2px;
}
.checkout-summary-item-thumb[b-nhumq14ppc] {
    width: 42px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.checkout-summary-item-thumb img[b-nhumq14ppc] { width: 100%; height: 100%; object-fit: contain; }
.checkout-summary-item-thumb i[b-nhumq14ppc]   { color: var(--dtz-bronze); font-size: 16px; }

.checkout-summary-lines[b-nhumq14ppc] { margin-bottom: 14px; }
.checkout-summary-row[b-nhumq14ppc],
.checkout-summary-total[b-nhumq14ppc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--dtz-blue);
}
.checkout-summary-row[b-nhumq14ppc] { margin-bottom: 4px; }
.checkout-summary-total[b-nhumq14ppc] {
    padding-top: 10px;
    border-top: 1px solid var(--dtz-bronze-border);
    margin-top: 8px;
    font-weight: 500;
}

/* Responsive: stack summary below form on small screens */
@media (max-width: 991.98px) {
    .checkout-layout[b-nhumq14ppc] { grid-template-columns: 1fr; gap: 24px; }
    .checkout-summary[b-nhumq14ppc] { max-width: 420px; }
}
@media (max-width: 575.98px) {
    .checkout-page[b-nhumq14ppc] { padding: 32px 16px 56px; }
    .checkout-page-title[b-nhumq14ppc] { font-size: 32px; }
}
/* /Components/Pages/DonatePage.razor.rz.scp.css */
/* Scoped styles for the donate page (migrated from the former global
   app-home.css): the donate boxes and their circular action button. */

.box-donate[b-04kpehtvms] {
    padding: 30px;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    position: relative;
}
.donate-button-wrapper[b-04kpehtvms] {
    display: flex;
    justify-content: end;
    align-items: center;
    position: absolute;
    bottom: 10px;
    left: 10px;
}
.donate-button-wrapper a[b-04kpehtvms],
.donate-button-wrapper a:hover[b-04kpehtvms],
.donate-button-wrapper a:focus[b-04kpehtvms] {
    text-decoration: none;
}
.donate-button[b-04kpehtvms] {
    width: 50px;
    height: 50px;
    border-radius: 30px;
    background: var(--dtz-bronze);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border: 6px solid var(--dtz-bg);
}
.donate-box[b-04kpehtvms] {
    padding: 30px;
    background-color: var(--dtz-bg) !important;
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    margin-bottom: 130px;
    height: 200px;
}
.donate-row[b-04kpehtvms] {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.donate-box[b-04kpehtvms] {
    margin-bottom: 80px;
    height: 200px;
    width: 100%;
    margin-bottom: 35px;
    position: relative;
    border-width: '1px' !important;
}
@media (max-width: 575px) {
  .donate-row[b-04kpehtvms] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
@media (min-width: 576px) {
  .donate-row[b-04kpehtvms] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
@media (min-width: 768px) {
  .donate-row[b-04kpehtvms] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
  .donate-box[b-04kpehtvms] {
        margin-bottom: 80px;
        height: 200px;
        width: 48%;
        margin-bottom: 35px;
        position: relative;
        border-width: '1px' !important;
    }
}

.donate-qa-link[b-04kpehtvms] {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.15s ease;
}
.donate-qa-link:hover[b-04kpehtvms] {
    text-decoration-color: var(--dtz-bronze);
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-r16ab3p9ps] {
    max-width: 32rem;
    margin: 4rem auto;
    padding: 0 1.25rem;
    text-align: center;
}

.error-page h1[b-r16ab3p9ps] {
    color: var(--dtz-primary);
    margin-bottom: 1rem;
}

.error-page p[b-r16ab3p9ps] {
    color: var(--dtz-text-muted);
    line-height: 1.7;
}

.error-trace[b-r16ab3p9ps] {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.error-trace code[b-r16ab3p9ps] {
    direction: ltr;
    unicode-bidi: embed;
    word-break: break-all;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Scoped styles for the home page (migrated from the former global
   app-home.css). Shared widgets were extracted out: the Q&A answer card
   (QaAnswerCard), book cards (BookCard), lesson action buttons
   (app-buttons.css), the lesson audio block (LessonDetailPage), the
   mini search (app-navbar.css) and the donate boxes (DonatePage). The
   ask-the-rav field borders use ::deep because they target Blazor inputs. */

/* app-home.css — DoreshTzion site CSS (split from app.css): gallery, hero, weekly lesson, Q&A, ask-the-rav, topics. @split-marker */

/* ===== Folded in from the former demo.css ===== */

@media (max-width: 575px) {
    .book .dtz.circle-button[b-n1rp7jwrgd] {
        width: 34px;
        height: 34px;
        border-radius: 30px;
        background: var(--dtz-bronze);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 15px;
        bottom: -15px;
        color: white;
        border: 6px solid #ffffff;
    }
}
@media (min-width: 1200px) {
  .book h5.card-title[b-n1rp7jwrgd] {
        font-size: 1.2rem;
    }
}
@media (min-width: 1400px) {
  .book h5.card-title[b-n1rp7jwrgd] {
        font-size: 1.4rem;
    }
}
.answer .card-body[b-n1rp7jwrgd] {
    padding: 10px;
    padding-bottom: 0px;
    overflow: hidden;
    position: relative;
    border-radius: 0.5rem;
    border: 2px solid var(--dtz-bronze);
    background: var(--dtz-bg);
}
.answer .card-footer[b-n1rp7jwrgd] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.answer p.card-text[b-n1rp7jwrgd] {
    margin-bottom: 0px;
    font-weight: 300;
}
/* Single-lesson media controls: round buttons, left-aligned, no enclosing box. */
.lesson-detail-actions[b-n1rp7jwrgd] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.questions-answers .answer-button-container[b-n1rp7jwrgd] {
    left: 10px;
    bottom: 10px;
    /* width: 80px; */
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
}
.questions-answers .answer-button[b-n1rp7jwrgd] {
    width: 40px;
    height: 40px;
    border-radius: 30px;
    background: var(--dtz-bronze);
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10px;
    bottom: 10px;
    color: white;
    /* border: 6px solid var(--dtz-bg); */
}
.lesson-group-buttons[b-n1rp7jwrgd] {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 100%;
}
.lesson-button[b-n1rp7jwrgd] {
    width: 50px;
    height: 50px;
    border-radius: 30px;
    background: var(--dtz-bronze);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--lesson-card-background);
    border: 6px solid var(--lesson-card-background);
}
.lesson-button a[b-n1rp7jwrgd],
.lesson-button a:hover[b-n1rp7jwrgd],
.lesson-button a:active[b-n1rp7jwrgd],
.lesson-button a:visited[b-n1rp7jwrgd] {
    line-height: 0;
    color: white;
}
.lesson-button.lesson-button-2[b-n1rp7jwrgd],
.lesson-button.lesson-button-3[b-n1rp7jwrgd] {
    background: var(--dtz-blue);
}
.ask-the-rav-btn-container button[b-n1rp7jwrgd] {
    background-color: var(--dtz-bronze);
    opacity: 0px;
    font-size: 35px;
    font-weight: 700;
    line-height: 30px;
    font-family: 'BANiflaot', sans-serif !important;
}
.ask-the-rav form[b-n1rp7jwrgd] {
    background-color: var(--bs-dtz-bg);
    border: 1px solid var(--dtz-text-muted);
    border-radius: 8px;
}
.ask-the-rav .sidebar-menu[b-n1rp7jwrgd] {
    /* border: 1px solid var(--dtz-text-muted); */
    border-radius: 8px;
    padding: 0;
}
.ask-the-rav .cat-level-1-toggle[b-n1rp7jwrgd] {
    width: 100% !important;
    font-family: Heebo !important;; 
    font-weight: 600;
    border-radius: 0px !important;
    background-color: var(--dtz-bg);
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-right: 10px;
    border-bottom: 1px solid var(--dtz-bronze);
}
.ask-the-rav .cat-level-2-toggle[b-n1rp7jwrgd] {
    width: 100% !important;
    font-family: Heebo !important;; 
    font-weight: 600;
    border-radius: 0px !important;
    /* background-color: var(--dtz-bg); */
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-right: 10px;
    border-bottom: 1px solid var(--dtz-bronze);
}
.ask-the-rav .cat-level-3-toggle[b-n1rp7jwrgd] {
    width: 100% !important;
    font-family: Heebo !important;; 
    font-weight: 600;
    border-radius: 0px !important;
    /* background-color: var(--dtz-bg); */
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-right: 10px;
    /* border-bottom: 1px solid var(--dtz-text-muted); */
}
/* .topic-item / .all-topics-item sizing + img sizing are fully defined by the
   app rules below (60-90px responsive); the demo versions were dead and removed. */
.topic-item .topic-item-image-container[b-n1rp7jwrgd] {
    padding: 15px;
}
.all-topics-item .all-topics-image-container[b-n1rp7jwrgd] {
    padding: 13px;
}
.topic-item-container[b-n1rp7jwrgd] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.home-slider[b-n1rp7jwrgd] {
    flex-shrink: 0;
    background-image: linear-gradient(
        to left,
        rgba(var(--dtz-hero-peach-rgb), 0.8) 0%,
        var(--dtz-hero-terracotta) 64.5%,
        var(--dtz-hero-terracotta) 100%
    ),
    url('../assets/img/bg/bg.jpeg');
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
    background-blend-mode: plus-darker;
    position: relative;
}
.donate-description[b-n1rp7jwrgd] {
    text-align: center;
    font-weight: 400;
    font-size: 22px;
    line-height: 38px;
}
#home-slider-content[b-n1rp7jwrgd] {
    text-align: center;
}
#home-questions-answers[b-n1rp7jwrgd] {
    padding-left: 6.5%;
    padding-right: 6.5%;
}
#home-all-answers[b-n1rp7jwrgd],
#home-lesson-topics[b-n1rp7jwrgd] {
    padding-left: 6.5%;
    padding-right: 6.5%;
}
#home-donate-banner .main-title[b-n1rp7jwrgd] {
    font-size: 75px;
}
#home-books[b-n1rp7jwrgd] {
    padding-left: 6.5%;
    padding-right: 6.5%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#home-books > div[b-n1rp7jwrgd] {
    width: 87%;
}
#home-books-content[b-n1rp7jwrgd] {
    width: 87%;
}
/* Category banner styles live in BookCategoryCard.razor.css */
@media (max-width: 575px) {
  .home-qa-bef-space[b-n1rp7jwrgd] {
        height: 15px;
    }
  .home-qa-inner-space[b-n1rp7jwrgd] {
        height: 15px;
    }
  .pl-sm-30px[b-n1rp7jwrgd] {
        padding-left: 'none' !important;
    }
  #home-slider-content[b-n1rp7jwrgd] {
        margin-top: 20px;
        height: 50%;
    }
  .text-xs-center[b-n1rp7jwrgd] {
        text-align: center !important;
    }
  .hamekubal[b-n1rp7jwrgd] {
        padding: 20px !important;
    }
  .hamekubal.content-section-1[b-n1rp7jwrgd] {
        padding: 20px !important;
    }
  #home-slider-figure[b-n1rp7jwrgd] {
        width: 40%;
    }
  .home-slider[b-n1rp7jwrgd] {
        flex-shrink: 0;
        background-image: linear-gradient(
            to top,
            rgba(var(--dtz-hero-peach-rgb), 0.8) 0%,
            var(--dtz-hero-terracotta) 40%,
            var(--dtz-hero-terracotta) 100%
        ),
        url('../assets/img/bg/bg.jpeg');
        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
        background-blend-mode: plus-darker;
        position: relative;
        min-height: 55vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
  #home-slider-harav-mutzafi-wrapper[b-n1rp7jwrgd] {
        position: relative;
        overflow: visible;
    }
  #home-slider-harav-mutzafi-wrapper img[b-n1rp7jwrgd] {
        height: 200px;
        opacity: 0.8;
        position: absolute;
        bottom: 0px;
        right: 0;
        left: auto;
    }
  .home-qa-search-btn[b-n1rp7jwrgd] {
        width: 47% !important;
    }
  #ask-the-rav-container[b-n1rp7jwrgd] {
        margin-top: 50px;
        height: 570px;
    }
  .card-img[b-n1rp7jwrgd] {
        width: 30% !important;
    }
  .card-img img.card-img-top[b-n1rp7jwrgd] {
        width: 100%;
        height: auto;
    }
  .book .card-body[b-n1rp7jwrgd] {
        width: 100%;
    }
}
@media (max-height: 490px) {
  #home-slider-harav-mutzafi-wrapper img[b-n1rp7jwrgd] {
       display: none;
    }
}
@media (min-width: 576px) {
  .home-qa-bef-space[b-n1rp7jwrgd] {
        height: 15px;
    }
  .home-qa-inner-space[b-n1rp7jwrgd] {
        height: 15px;
    }
  .pl-sm-30px[b-n1rp7jwrgd] {
        padding-left: 30px !important;
    }
  .text-xs-center[b-n1rp7jwrgd] {
        text-align: center !important;
    }
  .hamekubal[b-n1rp7jwrgd] {
        padding: 20px !important;
    }
  .hamekubal.content-section-1[b-n1rp7jwrgd] {
        padding: 20px !important;
    }
  #home-slider-figure[b-n1rp7jwrgd] {
        width: 40%;
    }
  .home-slider[b-n1rp7jwrgd] {
        flex-shrink: 0;
        background-image: linear-gradient(
            to top,
            rgba(var(--dtz-hero-peach-rgb), 0.8) 0%,
            var(--dtz-hero-terracotta) 40%,
            var(--dtz-hero-terracotta) 100%
        ),
        url('../assets/img/bg/bg.jpeg');
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
        background-blend-mode: plus-darker;
        position: relative;
    }
  #home-slider-harav-mutzafi-wrapper[b-n1rp7jwrgd] {
        position: relative;
        overflow: visible;
    }
  #home-slider-harav-mutzafi-wrapper.wrapper-sm[b-n1rp7jwrgd] {
        height: 300px;
    }
  #home-slider-harav-mutzafi-wrapper img[b-n1rp7jwrgd] {
        max-height: 100%;
        opacity: 0.8;
        position: absolute;
        bottom: 0px;
        right: 0;
        left: auto;
    }
  .home-qa-search-btn[b-n1rp7jwrgd] {
        width: 47% !important;
    }
  #ask-the-rav-container[b-n1rp7jwrgd] {
        margin-top: 50px;
        height: 570px;
    }
  .card-img img.card-img-top[b-n1rp7jwrgd] {
        width: 100%;
        height: auto;
    }
  .book .card-body[b-n1rp7jwrgd] {
        width: 100%;
    }
  #ask-the-rav-container[b-n1rp7jwrgd] {
        margin-top: 0px;
        height: 735px;
    }
}
/* Below md: drop the hero search box so the logo can fill the freed space.
   Scoped to #home-slider-content so the header's toggle search stays unaffected. */
@media (max-width: 767.98px) {
    #home-slider-content .home-search-container[b-n1rp7jwrgd] {
        display: none;
    }
    /* Stack the hero vertically across the whole below-md range (it already
       stacks under 576px) so the rabbi image can be centred against the full
       screen width instead of being squeezed into a side column. The
       min-height/centering mirror the xs rules so the s range behaves the same:
       without a min-height the image wrapper (a flex-grow column) collapses and
       the absolutely-positioned image disappears. */
    .home-slider[b-n1rp7jwrgd] {
        flex-direction: column;
        justify-content: center;
        min-height: 55vh;
    }
    /* Centre the rabbi image, nudged slightly left of the screen centre, and
       give it the same fixed height as xs (instead of max-height:100% of a
       wrapper that has no height in this layout). Higher specificity than
       app.css's `left: 10px`, so it wins regardless of file order; scoped to
       .wrapper-sm so the desktop image is untouched. */
    #home-slider .wrapper-sm img[b-n1rp7jwrgd] {
        height: 200px;
        max-height: none;
        left: 45%;
        right: auto;
        transform: translateX(-50%);
    }
}
@media (min-width: 768px) {
  .home-qa-bef-space[b-n1rp7jwrgd] {
        height: 35px;
    }
  .home-qa-header[b-n1rp7jwrgd] {
        height: 100px;
    }
  /* Pull the title 8px inward so its right edge lines up with the right edge
     of the answer cards below (the card columns carry p-2 = 8px). */
  .home-qa-header .home-qa-title[b-n1rp7jwrgd] {
        margin-right: 8px;
    }
  .home-qa-buttons[b-n1rp7jwrgd] {
        margin-top: 15px;
    }
  .home-qa-col-left[b-n1rp7jwrgd] {
        padding-right: 10px;
    }
  .home-qa-col-right[b-n1rp7jwrgd] {
        padding-left: 10px;
    }
  #home-slider-figure[b-n1rp7jwrgd] {
        width: 40%;
    }
  .card-img img.card-img-top[b-n1rp7jwrgd] {
        width: 100% !important;
    }
  .home-slider[b-n1rp7jwrgd] {
        flex-shrink: 0;
        background-image: linear-gradient(
            to left,
            rgba(var(--dtz-hero-peach-rgb), 0.8) 0%,
            var(--dtz-hero-terracotta) 64.5%,
            var(--dtz-hero-terracotta) 100%
        ),
        url('../assets/img/bg/bg.jpeg');
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;
        background-blend-mode: plus-darker;
        position: relative;
    }
  #home-slider-content[b-n1rp7jwrgd] {
        min-height: 320px;
    }
  #home-slider-harav-mutzafi-wrapper img[b-n1rp7jwrgd] {
        max-height: 100%;
        opacity: 0.8;
        position: absolute;
        bottom: 0px;
        right: 0;
        left: auto;
    }
  #home-slider-harav-mutzafi-wrapper.wrapper-sm[b-n1rp7jwrgd] {
        height: 300px;
    }
}
@media (min-width: 992px) {
  #home-slider-figure[b-n1rp7jwrgd] {
        width: 40%;
    }
  #home-questions-answers[b-n1rp7jwrgd] {
        padding-left: 2%;
        padding-right: 2%;
    }
  #home-donate-banner .main-title[b-n1rp7jwrgd] {
        font-size: 48px;
    }
  #home-books[b-n1rp7jwrgd] {
        padding-left: 2%;
        padding-right: 2%;
    }
  #home-books .book-title[b-n1rp7jwrgd] {
        font-size: 20px;
    }
  #home-books .book-price[b-n1rp7jwrgd] {
        font-size: 18px;
    }
  #ask-the-rav-container > div[b-n1rp7jwrgd] {
        margin-top: 100px
    }
  #questions-answers-board[b-n1rp7jwrgd] {
        padding-right: '0px'
    }
  .text-lg-right[b-n1rp7jwrgd] {
        text-align: right !important;
    }
  .col-lg-1.col-custom-1[b-n1rp7jwrgd] {
        width: 14.28%;
    }
  .home-slider[b-n1rp7jwrgd] {
        flex-shrink: 0;
        background-image: linear-gradient(
            to left,
            rgba(var(--dtz-hero-peach-rgb), 0.8) 0%,
            var(--dtz-hero-terracotta) 64.5%,
            var(--dtz-hero-terracotta) 100%
        ),
        url('../assets/img/bg/bg.jpeg');
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;
        background-blend-mode: plus-darker;
        position: relative;
    }
  #home-slider-content[b-n1rp7jwrgd] {
        min-height: 350px;
    }
  #home-slider-harav-mutzafi-wrapper img[b-n1rp7jwrgd] {
        max-height: 100%;
        opacity: 0.8;
        position: absolute;
        bottom: 0px;
        right: 0;
        left: auto;
    }
  #home-slider-harav-mutzafi-wrapper.wrapper-sm[b-n1rp7jwrgd] {
        height: 350px;
    }
}
@media (min-width: 1200px) {
  #home-questions-answers[b-n1rp7jwrgd] {
        padding-left: 4%;
        padding-right: 4%;
    }
  #home-books[b-n1rp7jwrgd] {
        padding-left: 4%;
        padding-right: 4%;
    }
  #home-donate-banner .main-title[b-n1rp7jwrgd] {
        font-size: 75px;
    }
  #home-questions-answers .col-qa.p-0[b-n1rp7jwrgd] {
        padding-left: 40px !important;
    }
  #ask-the-rav-container > div[b-n1rp7jwrgd] {
        margin-top: 0px
    }
  #questions-answers-board[b-n1rp7jwrgd] {
        padding-right: 100px
    }
  #cart-subtotal[b-n1rp7jwrgd] {
        width: 20% !important;
    }
  .pr-xl-0[b-n1rp7jwrgd] {
        padding-right: 0px !important;
    }
  .home-slider[b-n1rp7jwrgd] {
        flex-shrink: 0;
        background-image: linear-gradient(
            to left,
            rgba(var(--dtz-hero-peach-rgb), 0.8) 0%,
            var(--dtz-hero-terracotta) 64.5%,
            var(--dtz-hero-terracotta) 100%
        ),
        url('../assets/img/bg/bg.jpeg');
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;
        background-blend-mode: plus-darker;
        position: relative;
    }
  #home-slider-content[b-n1rp7jwrgd] {
        min-height: 400px;
    }
  #home-slider-harav-mutzafi-wrapper.wrapper-sm[b-n1rp7jwrgd] {
        height: 400px;
    }
}
@media (min-width: 1400px) {
  #home-questions-answers[b-n1rp7jwrgd] {
        padding-left: 6%;
        padding-right: 6%;
    }
  #home-books[b-n1rp7jwrgd] {
        padding-left: 6%;
        padding-right: 6%;
    }
  #home-questions-answers .col-qa.p-0[b-n1rp7jwrgd] {
        padding-left: 40px !important;
    }
  #ask-the-rav-container > div[b-n1rp7jwrgd] {
        margin-top: 0px
    }
  #questions-answers-board[b-n1rp7jwrgd] {
        padding-right: '100px'
    }
  #home-slider-content[b-n1rp7jwrgd] {
        min-height: 450px;
    }
  #home-slider-harav-mutzafi-wrapper.wrapper-sm[b-n1rp7jwrgd] {
        height: 450px;
    }
}
@media (min-width: 1600px) {
  #home-questions-answers[b-n1rp7jwrgd] {
        padding-left: 6.5%;
        padding-right: 6.5%;
    }
  #home-books[b-n1rp7jwrgd] {
        padding-left: 6.5%;
        padding-right: 6.5%;
    }
  #home-questions-answers .col-qa.p-0[b-n1rp7jwrgd] {
        padding-left: 40px !important;
    }
  #ask-the-rav-container > div[b-n1rp7jwrgd] {
        margin-top: 0px
    }
  #home-slider-content[b-n1rp7jwrgd] {
        min-height: 500px;
    }
  #home-slider-harav-mutzafi-wrapper.wrapper-sm[b-n1rp7jwrgd] {
        height: 500px;
    }
}
/* Sit the rabbi hero image a touch lower at every breakpoint so a little more
   of its base is clipped by the slider. overflow-y:hidden makes the slider clip
   the overflow (overflow-x is already hidden via the .overflow-x-hidden utility).
   Targets both image wrappers — .wrapper-sm (below md) and .wrapper-md (md+) —
   with higher specificity than the per-breakpoint `bottom: 0` rules so it wins
   at every size regardless of source order. */
.home-slider[b-n1rp7jwrgd] {
    overflow-y: hidden;
}
#home-slider .wrapper-sm img[b-n1rp7jwrgd],
#home-slider .wrapper-md img[b-n1rp7jwrgd] {
    bottom: -15px;
}
/* ===== end demo.css fold ===== */


/* ===== Hero slider ===== */
/* .home-slider background/gradient is defined in css/demo.css */
#home-slider-harav-mutzafi-wrapper img[b-n1rp7jwrgd] { display: block !important; left: 10px; right: auto; }
.wrapper-sm[b-n1rp7jwrgd], .wrapper-md[b-n1rp7jwrgd] { overflow: visible; }
.answer-button[b-n1rp7jwrgd] { display: inline-flex; align-items: center; justify-content: center;
                        width: 32px; height: 32px; border-radius: 50%;
                        background-color: var(--dtz-bronze); color: white; }
/* ===== Ask the Rav rabbi image ===== */
.harav-form-header-img[b-n1rp7jwrgd] { width: 200px; height: auto; margin-top: -100px; }
/* The ask-the-rav form itself (fields, borders, success) lives in the shared
   AskQuestionForm component; only its surrounding card chrome is styled here. */
@media (max-width: 991.98px) {
  #ask-the-rav-container[b-n1rp7jwrgd] { margin-top: 140px; }
}
/* On the wide (xl) two-column layout the form sits beside the question
   columns. The columns get a 0.5rem inset from .p-2, so inset the form by
   the same amount to line its card top and bottom up with the question cards. */
@media (min-width: 1200px) {
    /* Match the question columns beside it: the same 0.5rem inset (.p-0 needs
       !important to override) plus the 750px height the boxes container gets
       from its inline min-height, so the form card lines up at both top and
       bottom with the question cards. */
    #ask-the-rav-container[b-n1rp7jwrgd] {
        padding-block: 0.5rem !important;
        min-height: 750px;
    }
}
/* ===== Category topics (Answer archive) ===== */
.topic-item-container[b-n1rp7jwrgd] { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.topic-item[b-n1rp7jwrgd], .all-topics-item[b-n1rp7jwrgd] {
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.topic-item[b-n1rp7jwrgd] { background-color: var(--dtz-bronze); }
.all-topics-item[b-n1rp7jwrgd] { background-color: #ffffff; border: 2px solid var(--dtz-bronze); }
.topic-item-image-container img[b-n1rp7jwrgd],
.all-topics-image-container img[b-n1rp7jwrgd] { width: 34px; height: 34px; object-fit: contain; }
.topic-item-image-container img[b-n1rp7jwrgd] { filter: brightness(10); }
@media (min-width: 768px) {
  .topic-item[b-n1rp7jwrgd], .all-topics-item[b-n1rp7jwrgd] { width: 66px; height: 66px; }
  .topic-item-image-container img[b-n1rp7jwrgd],
    .all-topics-image-container img[b-n1rp7jwrgd] { width: 38px; height: 38px; }
}
@media (min-width: 992px) {
  .topic-item[b-n1rp7jwrgd], .all-topics-item[b-n1rp7jwrgd] { width: 74px; height: 74px; }
  .topic-item-image-container img[b-n1rp7jwrgd] { width: 42px; height: 42px; }
  .all-topics-image-container img[b-n1rp7jwrgd] { width: 45px; height: 45px; }
}
@media (min-width: 1200px) {
  .topic-item[b-n1rp7jwrgd], .all-topics-item[b-n1rp7jwrgd] { width: 84px; height: 84px; }
  .topic-item-image-container img[b-n1rp7jwrgd] { width: 46px; height: 46px; }
  .all-topics-image-container img[b-n1rp7jwrgd] { width: 50px; height: 50px; }
}
@media (min-width: 1400px) {
  .topic-item[b-n1rp7jwrgd], .all-topics-item[b-n1rp7jwrgd] { width: 90px; height: 90px; }
  .topic-item-image-container img[b-n1rp7jwrgd] { width: 50px; height: 50px; }
  .all-topics-image-container img[b-n1rp7jwrgd] { width: 54px; height: 54px; }
}
#home-all-answers .topic-item-container .font-subtitle[b-n1rp7jwrgd],
#home-lesson-topics .topic-item-container .font-subtitle[b-n1rp7jwrgd] {
    font-size: 18px; line-height: 22px; margin-top: 6px;
}
@media (min-width: 768px) {
  #home-all-answers .topic-item-container .font-subtitle[b-n1rp7jwrgd],
  #home-lesson-topics .topic-item-container .font-subtitle[b-n1rp7jwrgd] { font-size: 22px; line-height: 26px; }
}
@media (min-width: 992px) {
  #home-all-answers .topic-item-container .font-subtitle[b-n1rp7jwrgd],
  #home-lesson-topics .topic-item-container .font-subtitle[b-n1rp7jwrgd] { font-size: 28px; line-height: 32px; }
}
@media (min-width: 1200px) {
  #home-all-answers .topic-item-container .font-subtitle[b-n1rp7jwrgd],
  #home-lesson-topics .topic-item-container .font-subtitle[b-n1rp7jwrgd] { font-size: 34px; line-height: 38px; }
}
@media (min-width: 1400px) {
  #home-all-answers .topic-item-container .font-subtitle[b-n1rp7jwrgd],
  #home-lesson-topics .topic-item-container .font-subtitle[b-n1rp7jwrgd] { font-size: 40px; line-height: 44px; }
}
/* ===== Q&A section ===== */
.home-qa-bef-space[b-n1rp7jwrgd] { height: 40px; }
/* breathing room above the Q&A section */
@media (min-width: 768px) {
    /* Title + buttons sit at the row's bottom (align-items-end), so the spacing
       lives below the row to separate it from the questions. */
    .home-qa-header[b-n1rp7jwrgd]   { height: 100px; margin-bottom: 20px; }
    /* Nudge the buttons row in by the question columns' .p-2 inset so the
       left button (תשובות אחרונות) lines up with the left column's card. */
    .home-qa-buttons[b-n1rp7jwrgd]  { padding-left: 0.5rem; }
    .home-qa-col-left[b-n1rp7jwrgd] { padding-right: 10px; }
    .home-qa-col-right[b-n1rp7jwrgd]{ padding-left: 10px; }
}
/* Narrow screens (below md): the section stacks with the ask-the-rav form first
   (order-first), and the md+ header/button spacing rules above don't apply — so
   tighten the band→form gap and add the spacing the stacked layout otherwise
   lacks. Placed after the base rule so the bef-space height override wins. */
@media (max-width: 767.98px) {
    .home-qa-bef-space[b-n1rp7jwrgd]     { height: 18px; }          /* smaller band → form gap */
    #ask-the-rav-container[b-n1rp7jwrgd] { margin-bottom: 28px; }   /* gap: form → "שאלות ותשובות" title */
    .home-qa-buttons[b-n1rp7jwrgd]       { margin-top: 14px; }      /* gap: title → buttons */
}
/* ===== Lesson buttons ===== */
.lesson-group-buttons[b-n1rp7jwrgd] { gap: 6px; }
.lesson-button[b-n1rp7jwrgd] { width: 32px; height: 32px; border-radius: 50%;
                        background-color: var(--dtz-bronze); color: white;
                        display: flex; align-items: center; justify-content: center; font-size: 13px; }
.lesson-button-1[b-n1rp7jwrgd] { background-color: var(--dtz-blue); }
.lesson-button-2[b-n1rp7jwrgd] { background-color: var(--dtz-bronze); }
.lesson-button-3[b-n1rp7jwrgd] { background-color: var(--dtz-text-muted); }
/* ===== Home hero logo image ===== */
#home-slider-logo-img[b-n1rp7jwrgd] {
    display: block;
    width: 400px;
    max-width: 100%;
    height: auto;
}
@media (max-width: 575px) {
    #home-slider-logo-img[b-n1rp7jwrgd] {
        width: 280px;
    }
}
@media (min-width: 992px) {
    #home-slider-logo-img[b-n1rp7jwrgd] {
        width: 460px;
    }
}
@media (min-width: 1400px) {
    #home-slider-logo-img[b-n1rp7jwrgd] {
        width: 540px;
    }
}

/* Books-section heading only — enlarged beyond the shared .font-subtitle scale
   (which also drives ארכיון התשובות / נושאי השיעורים, left untouched). */
#home-books .home-books-title[b-n1rp7jwrgd] { font-size: 32px; line-height: 36px; }
@media (min-width: 768px)  { #home-books .home-books-title[b-n1rp7jwrgd] { font-size: 32px; line-height: 36px; } }
@media (min-width: 992px)  { #home-books .home-books-title[b-n1rp7jwrgd] { font-size: 44px; line-height: 48px; } }
@media (min-width: 1200px) { #home-books .home-books-title[b-n1rp7jwrgd] { font-size: 48px; line-height: 52px; } }
@media (min-width: 1400px) { #home-books .home-books-title[b-n1rp7jwrgd] { font-size: 52px; line-height: 56px; } }
/* /Components/Pages/LessonDetailPage.razor.rz.scp.css */
/* Scoped styles for the lesson detail page (migrated from the former global
   app-home.css): the single-lesson audio player block. The base .lesson-link
   button lives in app-buttons.css; the rule below only resets its offsets for
   the download icon that sits inside the audio card head. */

/* Single-lesson audio: an always-open player framed as its own block so it
   reads clearly as "audio" and is never mistaken for the video player above it.
   The head labels it and carries the download action; the native player below. */
.lesson-audio-card[b-buhzp422c9] {
    border: 1px solid var(--dtz-bronze);
    background-color: var(--dtz-bg);
    border-radius: 8px;
    padding: 14px 16px;
}

.lesson-audio-card-head[b-buhzp422c9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.lesson-audio-label[b-buhzp422c9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dtz-blue);
    font-weight: 700;
}

/* Inline SVG so the icon is drawn in the brand navy (currentColor) and stays
   crisp — the shared PNG icon is white, made for the dark circular buttons. */
.lesson-audio-ico[b-buhzp422c9] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Reset the round-button offsets so the download icon sits inside the head. */
.lesson-audio-card-head .lesson-link[b-buhzp422c9] {
    margin: 0;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

/* White "well" with a light bronze border so the native player stands out
   against the cream card instead of blending into it. */
.lesson-audio-card audio[b-buhzp422c9] {
    display: block;
    width: 100%;
    height: 44px;
    background-color: #fff;
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 8px;
}

.lesson-audio-card audio[b-buhzp422c9]::-webkit-media-controls-panel {
    background-color: #fff;
}

/* Buffering hint: hidden until lesson-audio.js adds .is-loading to the card
   (the gap between pressing play and the first sound on a cold file). */
.lesson-audio-loading[b-buhzp422c9] {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--dtz-blue-muted);
}

.lesson-audio-card.is-loading .lesson-audio-loading[b-buhzp422c9] {
    display: flex;
}
/* /Components/Pages/LessonsPage.razor.rz.scp.css */
/* Page header + title styles live in app-utilities.css as .listing-page-header /
   .listing-page-title (shared with QasPage and the detail pages). The header
   row + active filter chip below mirror /qas (QasPage.razor.css) so the lessons
   topic filter looks and behaves identically. */

/* The shared .listing-page-header reserves an 82px slot at ≥992px and pins its
   content to the BOTTOM (flex-end). Pin the title to the TOP of that slot
   instead: the title rises, a gap opens beneath it, and the first card stays
   put (the 82px reservation — and thus the card's Y — is unchanged). */
@media (min-width: 992px) {
    .listing-page-header[b-12ksfwy521] {
        justify-content: flex-start;
        padding-top: 14px;
    }
}

/* ── Title row: page title (right in RTL) + active filter chip (far left) ──
   The title and the filter chip share one row; the chip is pushed to the
   opposite end. Wraps to a second line on narrow viewports. */
.lessons-header-row[b-12ksfwy521] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* The title carries an 8px bottom margin for the stacked layout; inside the
   flex row that would throw off vertical centering against the chip. */
.lessons-header-row .listing-page-title[b-12ksfwy521] {
    margin-bottom: 0;
}

/* ── Active filter chip (when arriving via ?topic=X) ──────────────────── */
.lessons-active-chip[b-12ksfwy521] {
    /* Keep the pill at its content width: inside the column flex
       .listing-page-header the default `stretch` would blow inline-flex up to
       full width (blockified flex item). */
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 20px;
    padding: 5px 14px 5px 6px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--dtz-blue);
    white-space: nowrap;
}

.lessons-active-chip-icon[b-12ksfwy521] {
    font-size: 11px;
    color: var(--dtz-bronze);
}

.lessons-active-chip-name[b-12ksfwy521] {
    line-height: 1.4;
}

.lessons-active-chip-x[b-12ksfwy521] {
    border: 0;
    background: var(--dtz-bronze);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* /Components/Pages/LivePage.razor.rz.scp.css */
/* /live page — inline broadcast player + countdown + "no live" empty state. */

.live-page-player[b-jq1nwc8hsa] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--dtz-text-dark);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(var(--dtz-blue-rgb), .18);
}

.live-page-player iframe[b-jq1nwc8hsa] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Shown when nothing is broadcasting. */
.live-page-empty[b-jq1nwc8hsa] {
    text-align: center;
    padding: 48px 24px;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 12px;
}

/* Big standalone icon — scoped to the direct child so it doesn't hit icons
   inside the buttons. */
.live-page-empty > i[b-jq1nwc8hsa] {
    display: block;
    font-size: 48px;
    color: var(--dtz-bronze);
    margin-bottom: 16px;
}

.live-page-empty p[b-jq1nwc8hsa] {
    color: var(--dtz-blue-muted);
    margin-bottom: 24px;
}

.live-page-empty .btn-dtz .fa-youtube[b-jq1nwc8hsa],
.live-page-empty .btn-dtz .fa-bell[b-jq1nwc8hsa] {
    margin-inline-start: 8px;
}

/* Channel entry button — mirrors the home-page "צדיק בא לעיר" channel pill: a solid
   bronze pill with a pulsing red "on-air" dot. Primary action of the "no live" state. */
.live-channel-btn[b-jq1nwc8hsa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--dtz-bronze);
    color: var(--dtz-blue);
    font-family: 'Heebo', Arial, sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    padding: 9px 18px;
    border-radius: 11px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    transition: background .18s ease, transform .18s ease;
}

.live-channel-btn:hover[b-jq1nwc8hsa] {
    background: #fff;
    color: var(--dtz-blue);
    transform: translateY(-1px);
}

/* Pulsing red dot — the universal "channel / on-air" cue. Purely decorative. */
.live-channel-btn .dot[b-jq1nwc8hsa] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: var(--dtz-danger);
    box-shadow: 0 0 0 0 rgba(var(--dtz-danger-rgb), .6);
    animation: live-channel-pulse-b-jq1nwc8hsa 1.6s infinite;
}

@keyframes live-channel-pulse-b-jq1nwc8hsa {
    0%   { box-shadow: 0 0 0 0 rgba(var(--dtz-danger-rgb), .55); }
    70%  { box-shadow: 0 0 0 8px rgba(var(--dtz-danger-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--dtz-danger-rgb), 0); }
}

/* Scheduled-but-not-yet-live state: same card as the empty state, but the icon
   and prominent countdown use the brand blue to read as "coming up". */
.live-page-upcoming > i[b-jq1nwc8hsa] {
    color: var(--dtz-blue);
}

.live-page-countdown[b-jq1nwc8hsa] {
    margin: 8px 0 20px;
    font-size: 44px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--dtz-blue);
    line-height: 1.1;
}

.live-page-upcoming-title[b-jq1nwc8hsa] {
    color: var(--dtz-blue-muted);
    font-size: 18px;
    margin-bottom: 24px;
}

/* Secondary link to the always-available recorded-lessons channel, shown under the
   primary action on the scheduled state. */
.live-page-vod-link[b-jq1nwc8hsa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--dtz-blue-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

.live-page-vod-link:hover[b-jq1nwc8hsa] { color: var(--dtz-blue); }
/* /Components/Pages/LoginPage.razor.rz.scp.css */
.login-page[b-qe1z4uv1a8] {
    min-height: 100vh;
    width: 100%;
    background-color: var(--dtz-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card[b-qe1z4uv1a8] {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 2.5rem 2.25rem;
    width: 100%;
    max-width: 460px;
}

.login-logo-wrap[b-qe1z4uv1a8] {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.login-logo[b-qe1z4uv1a8] {
    width: 220px;
    max-width: 80%;
    height: auto;
}

.login-required[b-qe1z4uv1a8] {
    color: var(--dtz-danger);
}
/* /Components/Pages/QaDetailPage.razor.rz.scp.css */
/* Page title styles live in app-utilities.css as .listing-page-title (shared
   with QasPage and LessonsPage). */

/* ── Page header: title (right) + nav buttons (left) ───────────────────── */
/* On wide screens, give the row the same min-height (82px) as the /qas
   listing header so the sidebar's "ask the rav" CTA banner aligns with the
   start of the body content below. On narrow screens, stack the buttons
   below the title. */
.qa-detail-header[b-j8pgzmsd7w] {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

@media (min-width: 992px) {
    .qa-detail-header[b-j8pgzmsd7w] {
        /* min-height of 82px so the category badge that follows lines up
           with the sidebar's "ask the rav" CTA banner top (image height
           120px - 38px overlap = 82px). align-items: flex-start keeps the
           title and buttons at the top of the reserved space rather than
           pinned to its bottom — the empty room below them becomes the
           natural gap before the category.
           padding-bottom keeps a guaranteed gap before the category even
           when the buttons wrap onto multiple rows and the natural content
           height exceeds 82px (the min-height stops applying once content
           overflows). */
        min-height: 82px;
        margin-bottom: 0;
        padding-bottom: 1rem;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }
}

/* ── Nav buttons: outlined, brown border, dark navy text ───────────────── */
.qa-detail-nav[b-j8pgzmsd7w] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.qa-detail-nav-btn[b-j8pgzmsd7w] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 16px;
    text-decoration: none;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.qa-detail-nav-btn:disabled[b-j8pgzmsd7w] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Cream-filled — prev/next navigation. */
.qa-detail-nav-btn--cream[b-j8pgzmsd7w] {
    background: var(--dtz-bg);
    color: var(--dtz-blue);
}

.qa-detail-nav-btn--cream:hover:not(:disabled)[b-j8pgzmsd7w] {
    background: var(--dtz-bronze-bg);
    color: var(--dtz-blue);
    text-decoration: none;
}

/* Brown-filled — "jump to latest" link. */
.qa-detail-nav-btn--brown[b-j8pgzmsd7w] {
    background: var(--dtz-bronze);
    border-color: var(--dtz-bronze);
    color: #ffffff;
}

.qa-detail-nav-btn--brown:hover:not(:disabled)[b-j8pgzmsd7w] {
    background: var(--dtz-bronze-hover);
    border-color: var(--dtz-bronze-hover);
    color: #ffffff;
    text-decoration: none;
}

/* ── Category chips — one per linked category, each the full path ──────── */
.qa-detail-category-row[b-j8pgzmsd7w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

/* Keeps the original navy pill, now per-category and carrying the full path:
   white text, ancestors faded, leaf prominent, small faded chevron separators. */
.qa-detail-cat-chip[b-j8pgzmsd7w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 43px;
    background: var(--dtz-blue);
    color: #ffffff;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 0 22px;
    border-radius: 6px;
    line-height: 1.1;
}

/* Explicit white on the inner spans — a global "span { color: var(--dtz-blue) }"
   (app-utilities) directly targets spans and beats the white INHERITED from the
   chip, which would otherwise render navy text on the navy chip (invisible). */
.qa-detail-cat-parent[b-j8pgzmsd7w] {
    color: #ffffff;
    font-weight: 500;
    opacity: 0.85;
}

.qa-detail-cat-sep[b-j8pgzmsd7w] {
    font-size: 11px;
    opacity: 0.7;
}

.qa-detail-cat-leaf[b-j8pgzmsd7w] {
    color: #ffffff;
    font-weight: 700;
}

/* ── Question / Answer body — plain text on the page background ────────── */
.qa-detail-body[b-j8pgzmsd7w] {
    direction: rtl;
}

.qa-detail-label[b-j8pgzmsd7w] {
    font-family: 'Heebo', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0 0 4px;
    text-align: right;
    line-height: 1.2;
}

/* The second-and-onward labels (e.g. תשובה: after the question's text) need
   breathing room above; the first label sits flush under the category. */
.qa-detail-text + .qa-detail-label[b-j8pgzmsd7w] {
    margin-top: 28px;
}

.qa-detail-text[b-j8pgzmsd7w] {
    font-family: 'Heebo', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--dtz-blue);
    line-height: 1.7;
    margin: 0;
    text-align: right;
    /* Preserve hand-typed line breaks in the asker's question and the
       answer text — same treatment as on the listing cards. */
    white-space: pre-line;
}

/* ── Related questions ("תשובות באותו נושא") section ────────────────────── */
/* Sits well below the answer text — needs visible breathing room so the
   reader registers it as a new region, not a continuation of the answer. */
.qa-related[b-j8pgzmsd7w] {
    margin-top: 72px;
}

.qa-related-header[b-j8pgzmsd7w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Title — same family as the page title "שאלות ותשובות" (BANiflaot brand
   display face) but a step smaller so it reads as a secondary heading. */
.qa-related-title[b-j8pgzmsd7w] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0;
    letter-spacing: 0.3px;
    line-height: 1.15;
}
/* /Components/Pages/QasPage.razor.rz.scp.css */
/* Page header + title styles live in app-utilities.css as .listing-page-header /
   .listing-page-title (shared with QaDetailPage and LessonsPage). */

/* Breathing room between the title/filter row and the first Q&A card.
   The shared .listing-page-header reserves an 82px slot at ≥992px and pins its
   content to the BOTTOM (flex-end) so the first card lines up with the sidebar.
   Here we pin the title to the TOP of that same slot instead: the title rises,
   the gap opens beneath it, and the first card stays exactly where it was
   (the 82px reservation — and thus the card's Y — is unchanged). */
@media (min-width: 992px) {
    .listing-page-header[b-btbpeoxi26] {
        justify-content: flex-start;
        padding-top: 14px;
    }
}

/* ── Title row: page title (right in RTL) + active filter chip (far left) ──
   The title and the filter chip share one baseline-aligned row; the chip is
   pushed to the opposite end. Wraps to a second line on narrow viewports. */
.qas-header-row[b-btbpeoxi26] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* The title carries an 8px bottom margin for the stacked layout; inside the
   flex row that would throw off vertical centering against the chip. */
.qas-header-row .listing-page-title[b-btbpeoxi26] {
    margin-bottom: 0;
}

/* ── Active filter chip (when arriving via ?category=X) ───────────────── */
.qas-active-chip[b-btbpeoxi26] {
    /* align-self keeps the pill at its content width: inside the column flex
       .listing-page-header the default `stretch` would blow inline-flex up to
       full width (blockified flex item), which is what made it a giant near-
       empty box. Here it lives in .qas-header-row, but we keep this explicit
       so the pill never stretches regardless of container alignment. */
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 20px;
    padding: 5px 14px 5px 6px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--dtz-blue);
    white-space: nowrap;
}

.qas-active-chip-icon[b-btbpeoxi26] {
    font-size: 11px;
    color: var(--dtz-bronze);
}

.qas-active-chip-name[b-btbpeoxi26] {
    line-height: 1.4;
}

.qas-active-chip-x[b-btbpeoxi26] {
    border: 0;
    background: var(--dtz-bronze);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ── Q&A card ─────────────────────────────────────────────────────────── */
.qas-card[b-btbpeoxi26] {
    display: block;
    position: relative;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    /* Symmetric, tight box. The QID rides inline next to the "שאלה" label and
       the category chips flow above the question (see .qas-card-tags), so no
       corner reserves space — any number of chips just push the text down. */
    padding: 22px 32px 22px;
    margin-bottom: 18px;
    color: var(--dtz-blue);
    text-decoration: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.qas-card:hover[b-btbpeoxi26] {
    box-shadow: 0 6px 20px rgba(var(--dtz-bronze-rgb), 0.28);
    color: var(--dtz-blue);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── Top tag row (category + pinned) ──────────────────────────────────────
   In normal flow above the question (not absolute) so any number of chips
   wrap onto new lines and push the text down instead of overlapping it.
   Aligned to the end (LEFT in RTL), opposite the "שאלה" label on the right. */
.qas-card-tags[b-btbpeoxi26] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    position: relative;   /* keep chips painting above the stretched cover */
    z-index: 2;
}

/* ── Chip (category) ──────────────────────────────────────────────────── */
.qas-card-chip[b-btbpeoxi26] {
    background: var(--dtz-bronze);
    color: var(--dtz-blue);
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 4px;
    line-height: 1.4;
}

/* Two-level topic chip: parent ‹ leaf, rendered inline (RTL: parent on the
   right, leaf on the left). The parent level is muted so the leaf stays the
   focus, while still giving the broader context. */
.qas-card-chip-cat[b-btbpeoxi26] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.qas-cat-parent[b-btbpeoxi26] {
    font-weight: 500;
    /* 0.8, not lower: at 0.6 the navy fades to ~3:1 over the gold chip (below
       WCAG AA 4.5:1). 0.8 clears AA while the weight gap (500 vs the leaf's
       700) still marks it as the muted ancestor. */
    opacity: 0.8;
}

.qas-cat-sep[b-btbpeoxi26] {
    font-size: 10px;
    opacity: 0.55;
}

.qas-cat-leaf[b-btbpeoxi26] {
    font-weight: 700;      /* keep the most-specific level prominent */
}

/* ── Pinned badge — sits in the tag row, right beside the category ─────── */
.qas-card-pin[b-btbpeoxi26] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dtz-bronze);
    color: #fff;
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Highlight the pinned card itself (gold accent, §4.4). */
.qas-card--pinned[b-btbpeoxi26] {
    border-width: 2px;
    box-shadow: 0 2px 14px rgba(var(--dtz-bronze-rgb), 0.25);
}

/* Question/Answer blocks */
.qas-card-block[b-btbpeoxi26] {
    margin-bottom: 14px;
}

.qas-card-block:last-of-type[b-btbpeoxi26] {
    margin-bottom: 0;
}

.qas-card-label[b-btbpeoxi26] {
    display: block;
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--dtz-blue);
    margin-bottom: 2px;
    text-align: right;
    direction: rtl;
    line-height: 1.2;
}

.qas-card-text[b-btbpeoxi26] {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    color: var(--dtz-blue);
    margin: 0;
    text-align: right;
    direction: rtl;
    /* Preserve manual line breaks typed by the asker (or in the answer)
       while still wrapping long lines. Without this, `\n` collapses to a
       single space. */
    white-space: pre-line;
    /* Full text — no line clamp. The main Q&A listing card shows the whole
       question and answer (cards vary in height accordingly). */
}

/* Search-match highlight. <mark> is injected via MarkupString (the server's
   _formatted field), so it carries no scope attribute — ::deep is required.
   Soft yellow background; text keeps the normal colour but turns bold. */
.qas-card-text[b-btbpeoxi26]  mark {
    background-color: var(--dtz-highlight);
    color: inherit;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── QID — inline beside the "שאלה" label (no arrow; the whole card links).
   Shares the label's navy + font; lighter weight & slightly smaller so it
   reads as the question's identifier without competing with the word. ── */
.qas-card-qid-num[b-btbpeoxi26] {
    margin-inline-start: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dtz-blue);
    font-variant-numeric: tabular-nums;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.qas-empty[b-btbpeoxi26] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
}

.qas-empty-title[b-btbpeoxi26] {
    margin: 0;
    font-weight: 600;
    color: var(--dtz-blue);
}

.qas-empty-hint[b-btbpeoxi26] {
    max-width: 32rem;
    margin: 10px auto 0;
    color: var(--dtz-blue);
    line-height: 1.6;
}

/* "search the whole שו"ת" CTA in the category-scoped empty state */
.qas-search-all-btn[b-btbpeoxi26] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    border: 0;
    border-radius: 8px;
    background-color: var(--dtz-bronze);
    color: #fff;
    padding: 9px 20px;
    font-family: 'Heebo', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.qas-search-all-btn:hover[b-btbpeoxi26] {
    background-color: var(--dtz-bronze-hover);
}

.qas-tips[b-btbpeoxi26] {
    max-width: 32rem;
    margin: 18px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--dtz-bronze-rgb), 0.35);
    text-align: start;
}

.qas-tips-title[b-btbpeoxi26] {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dtz-bronze);
}

.qas-tips-list[b-btbpeoxi26] {
    margin: 0;
    padding-inline-start: 1.2rem;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--dtz-blue);
}

.qas-tips-list li[b-btbpeoxi26] {
    margin-bottom: 4px;
}
/* /Components/Pages/RabenuSalmanMotsafiPage.razor.rz.scp.css */
/* Scoped styles for the Rabenu Salman Motsafi page: the photo carousel + the
   fullscreen lightbox. Migrated here from the former global app-gallery.css —
   every element below is rendered directly by RabenuSalmanMotsafiPage.razor,
   so plain (non-::deep) scoped selectors match correctly. */

/* ===== Running body text =====
   Page-local override that decouples this page from the global
   .font-article.font-small rule (15px in app-base.css). Here the running text
   is bumped to 16px. The scoped [b-*] attribute selector raises specificity
   above the global rule, so this wins even against its !important.
   Other pages using .font-article.font-small (Q&A cards, Takanon) are untouched. */
.font-article.font-small[b-hteqlyt7mn] {
    font-size: 16px !important;
}

/* ===== Gallery slider ===== */
.rabenu-gallery[b-hteqlyt7mn] { position: relative; padding: 0; }

.rabenu-viewport[b-hteqlyt7mn] {
    width: 100%;
    overflow: hidden;
}

.rabenu-carousel-track[b-hteqlyt7mn] {
    --gap: 18px;
    --visible: 4;
    --cidx: 0;
    display: flex;
    gap: var(--gap);
    /* RTL: positive translateX advances the carousel */
    transform: translateX(calc((100% + var(--gap)) / var(--visible) * var(--cidx)));
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.rabenu-gallery-item[b-hteqlyt7mn] {
    flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
    min-width: 0;
    text-align: center;
    margin: 0;
}

.rabenu-gallery-img-wrap[b-hteqlyt7mn] {
    position: relative;
    display: block;
    width: 100%;
    height: 220px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: zoom-in;
}
.rabenu-gallery-img-wrap:focus[b-hteqlyt7mn] { outline: none; }
.rabenu-gallery-img-wrap:focus-visible[b-hteqlyt7mn] { outline: 2px solid var(--dtz-bronze); outline-offset: 3px; border-radius: 8px; }

.rabenu-gallery-img-wrap img[b-hteqlyt7mn] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.35s ease, filter 0.35s ease;
}
@media (hover: hover) {
    .rabenu-gallery-img-wrap:hover img[b-hteqlyt7mn] {
        transform: scale(1.04);
        filter: drop-shadow(0 6px 14px rgba(var(--dtz-blue-rgb), 0.25));
    }
}

.rabenu-gallery-item figcaption[b-hteqlyt7mn] {
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 8px;
    color: var(--dtz-blue);
    direction: rtl;
}

/* Nav arrows positioned OUTSIDE the gallery width on desktop */
.rabenu-gallery-nav[b-hteqlyt7mn] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 2px solid var(--dtz-bronze);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--dtz-blue-rgb), 0.12);
    transition: background-color var(--hover-transition), transform var(--hover-transition), opacity var(--hover-transition);
}
.rabenu-gallery-nav img[b-hteqlyt7mn] { width: 16px; height: 16px; transition: filter var(--hover-transition); }
.rabenu-nav-right[b-hteqlyt7mn] { right: -64px; }
.rabenu-nav-left[b-hteqlyt7mn]  { left: -64px; }
.rabenu-gallery-nav:disabled[b-hteqlyt7mn] { opacity: 0.3; cursor: not-allowed; }
@media (hover: hover) {
    .rabenu-gallery-nav:not(:disabled):hover[b-hteqlyt7mn] { background-color: var(--dtz-bronze); transform: translateY(-50%) scale(1.08); }
    .rabenu-gallery-nav:not(:disabled):hover img[b-hteqlyt7mn] { filter: brightness(0) invert(1); }
}
.rabenu-gallery-nav:focus[b-hteqlyt7mn] { outline: none; }
.rabenu-gallery-nav:focus-visible[b-hteqlyt7mn] { outline: 2px solid var(--dtz-blue); outline-offset: 3px; }

/* Responsive: arrows move inside on tablet/mobile (no outside room),
   visible count shrinks. */
@media (max-width: 991.98px) {
    .rabenu-gallery[b-hteqlyt7mn] { padding: 0 52px; }
    .rabenu-nav-right[b-hteqlyt7mn] { right: 0; }
    .rabenu-nav-left[b-hteqlyt7mn]  { left: 0; }
    .rabenu-carousel-track[b-hteqlyt7mn] { --visible: 3; --gap: 14px; }
}
@media (max-width: 767.98px) {
    .rabenu-carousel-track[b-hteqlyt7mn] { --visible: 2; }
}
@media (max-width: 575.98px) {
    .rabenu-gallery[b-hteqlyt7mn] { padding: 0 42px; }
    .rabenu-gallery-nav[b-hteqlyt7mn] { width: 38px; height: 38px; }
    .rabenu-gallery-nav img[b-hteqlyt7mn] { width: 14px; height: 14px; }
    .rabenu-carousel-track[b-hteqlyt7mn] { --visible: 1; --gap: 12px; }
}

/* ----- Lightbox ----- */
.rabenu-lightbox[b-hteqlyt7mn] {
    position: fixed;
    inset: 0;
    background: rgba(var(--dtz-blue-rgb), 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    direction: rtl;
    /* NOTE: rabenuFade is not defined anywhere (it never was), so this is a
       no-op today — the lightbox appears without a fade. Left as-is to preserve
       behavior; define a @keyframes rabenuFade here if a fade-in is wanted. */
    animation: rabenuFade 0.2s ease;
}
.rabenu-lightbox-figure[b-hteqlyt7mn] {
    margin: 0;
    max-width: min(90vw, 1100px);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
}
.rabenu-lightbox-figure img[b-hteqlyt7mn] {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.rabenu-lightbox-figure figcaption[b-hteqlyt7mn] {
    color: var(--dtz-bg);
    text-align: center;
    margin-top: 16px;
    font-family: 'Heebo', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
.rabenu-lightbox-close[b-hteqlyt7mn] {
    position: absolute;
    top: 20px;
    inset-inline-start: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--hover-transition), transform var(--hover-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rabenu-lightbox-close:hover[b-hteqlyt7mn] { background: rgba(255, 255, 255, 0.25); transform: scale(1.08); }
.rabenu-lightbox-close:focus[b-hteqlyt7mn] { outline: none; }
.rabenu-lightbox-close:focus-visible[b-hteqlyt7mn] { outline: 2px solid var(--dtz-bronze); outline-offset: 2px; }

.rabenu-lightbox-nav[b-hteqlyt7mn] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--hover-transition), transform var(--hover-transition);
}
.rabenu-lightbox-nav img[b-hteqlyt7mn] { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.rabenu-lightbox-prev[b-hteqlyt7mn] { right: 24px; }
.rabenu-lightbox-next[b-hteqlyt7mn] { left: 24px; }
.rabenu-lightbox-nav:hover[b-hteqlyt7mn] { background: rgba(255, 255, 255, 0.25); transform: translateY(-50%) scale(1.08); }
.rabenu-lightbox-nav:focus[b-hteqlyt7mn] { outline: none; }
.rabenu-lightbox-nav:focus-visible[b-hteqlyt7mn] { outline: 2px solid var(--dtz-bronze); outline-offset: 2px; }

@media (max-width: 575.98px) {
    .rabenu-lightbox-nav[b-hteqlyt7mn] { width: 40px; height: 40px; }
    .rabenu-lightbox-prev[b-hteqlyt7mn] { right: 12px; }
    .rabenu-lightbox-next[b-hteqlyt7mn] { left: 12px; }
}
/* /Components/Pages/SearchPage.razor.rz.scp.css */
/* Page header + title styles live in app-utilities.css as .listing-page-header /
   .listing-page-title (shared with QasPage / LessonsPage). */

.search-term[b-f502bygl1q] {
    color: var(--dtz-bronze);
    font-weight: 700;
}

/* ── Result sections (שו״ת first, then שיעורים) ───────────────────────── */
.search-section[b-f502bygl1q] {
    margin-bottom: 40px;
}

.search-section:last-child[b-f502bygl1q] {
    margin-bottom: 0;
}

.search-section-title[b-f502bygl1q] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--dtz-blue);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(var(--dtz-bronze-rgb), 0.35);
}

.search-section-icon[b-f502bygl1q] {
    color: var(--dtz-bronze);
    font-size: 20px;
}

.search-section-count[b-f502bygl1q] {
    font-size: 15px;
    font-weight: 600;
    color: var(--dtz-blue);
    opacity: 0.7;
}

/* ── "See all N results" link ─────────────────────────────────────────── */
.search-see-all[b-f502bygl1q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--dtz-bronze);
    text-decoration: none;
    transition: gap 0.15s ease, color 0.15s ease;
}

.search-see-all:hover[b-f502bygl1q] {
    color: var(--dtz-bronze-hover);
    gap: 12px;
    text-decoration: none;
}

/* ── Empty / no-query state ───────────────────────────────────────────── */
.search-noresults[b-f502bygl1q] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
}

.search-noresults-title[b-f502bygl1q] {
    margin: 0;
    font-weight: 600;
    color: var(--dtz-blue);
}

.search-noresults-hint[b-f502bygl1q] {
    max-width: 32rem;
    margin: 10px auto 0;
    color: var(--dtz-blue);
    line-height: 1.6;
}
/* /Components/Pages/TakanonPage.razor.rz.scp.css */
/* Terms-of-service page. Cream page background (set inline) hosts a single
   white, bronze-bordered content card — the site's established "content box"
   look (cf. .content-section-1). Sections auto-number via a CSS counter. */

.takanon-title[b-vsmojsrp7t] {
    color: var(--dtz-blue);
}

.takanon-org[b-vsmojsrp7t] {
    font-family: 'Heebo', Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--dtz-neutral);
}

.takanon-card[b-vsmojsrp7t] {
    background: #fff;
    border: 2px solid var(--dtz-bronze);
    border-radius: 8px;
    padding: 1.75rem 1.5rem;
    counter-reset: takanon-sec;
}

@media (min-width: 768px) {
    .takanon-card[b-vsmojsrp7t] {
        padding: 3rem;
    }
}

.takanon-section[b-vsmojsrp7t] {
    margin-bottom: 2.25rem;
}

.takanon-section:last-child[b-vsmojsrp7t] {
    margin-bottom: 0;
}

/* Section heading: bronze number badge + navy title, with a hairline divider. */
.takanon-section-title[b-vsmojsrp7t] {
    counter-increment: takanon-sec;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--dtz-blue);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--dtz-bronze-bg);
}

.takanon-section-title[b-vsmojsrp7t]::before {
    content: counter(takanon-sec);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--dtz-bronze);
    color: #fff;
    font-family: 'Heebo', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
}

.takanon-text[b-vsmojsrp7t] {
    color: var(--dtz-blue);
    text-align: justify;
    margin-bottom: 0.75rem;
}

/* Bullet list — diamond bronze markers on the inline-start (right, in RTL). */
.takanon-list[b-vsmojsrp7t] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.takanon-list li[b-vsmojsrp7t] {
    position: relative;
    padding-inline-start: 1.5rem;
    margin-bottom: 0.7rem;
    color: var(--dtz-blue);
    text-align: justify;
}

.takanon-list li:last-child[b-vsmojsrp7t] {
    margin-bottom: 0;
}

.takanon-list li[b-vsmojsrp7t]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.6em;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--dtz-bronze);
    border-radius: 2px;
    transform: rotate(45deg);
}
/* /Components/Pages/VodPage.razor.rz.scp.css */
/* /vod page — "שיעורי הרב ברצף": the recorded-lessons channel (always available). */

.channel-wrap[b-h5thx5k976] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Station switcher — recent + topic chips; the active one is filled navy. */
.channel-stations[b-h5thx5k976] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.channel-station-chip[b-h5thx5k976] {
    border: 1px solid var(--dtz-bronze-border);
    background: var(--dtz-bg);
    color: var(--dtz-blue-muted);
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.channel-station-chip:hover[b-h5thx5k976] { background: var(--dtz-bronze-bg); color: var(--dtz-blue); }

.channel-station-chip.active[b-h5thx5k976] {
    background: var(--dtz-blue);
    color: #fff;
    border-color: var(--dtz-blue);
}

.channel-queue[b-h5thx5k976] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 12px;
    padding: 12px 8px;
}

.channel-queue-title[b-h5thx5k976] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 20px;
    color: var(--dtz-blue);
    margin: 4px 12px 8px;
}

.channel-queue-list[b-h5thx5k976] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.channel-queue-item[b-h5thx5k976] { margin: 0; }

.channel-queue-btn[b-h5thx5k976] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: start;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--dtz-blue);
    transition: background .15s;
}

.channel-queue-btn:hover[b-h5thx5k976] { background: var(--dtz-bronze-bg); }

.channel-queue-item.current .channel-queue-btn[b-h5thx5k976] {
    background: var(--dtz-bronze-bg);
}

.cq-index[b-h5thx5k976] {
    flex: 0 0 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--dtz-blue-muted);
    font-size: 14px;
}

.cq-icon[b-h5thx5k976] {
    flex: 0 0 28px;
    text-align: center;
    color: var(--dtz-bronze);
}

.cq-text[b-h5thx5k976] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cq-title[b-h5thx5k976] {
    font-weight: 600;
    line-height: 1.3;
}

.cq-date[b-h5thx5k976] {
    font-size: 13px;
    color: var(--dtz-blue-muted);
}

.channel-foot[b-h5thx5k976] {
    text-align: center;
}

.channel-yt-link[b-h5thx5k976] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dtz-blue-muted);
    text-decoration: none;
    font-size: 14px;
}

.channel-yt-link:hover[b-h5thx5k976] { color: var(--dtz-blue); }
.channel-yt-link .fa-youtube[b-h5thx5k976] { color: #ff0000; }
/* /Components/QaAnswerCard.razor.rz.scp.css */
/* Scoped styles for QaAnswerCard (migrated from the former global app-home.css,
   where the rules were split across the demo-fold and a later "Q&A cards"
   override block — merged here into their effective values). */

.answer-wrap-home[b-vtsf2j3fkd] {
    position: relative;
    height: 170px;
    font-weight: 300 !important;
    border-radius: 8px;
    border: 2px solid var(--dtz-bronze);
    background-color: var(--dtz-bg);
    padding-bottom: 36px;
}

.answer-wrap-home .answer-content[b-vtsf2j3fkd] {
    height: 134px;
}
.answer-wrap-home .answer-content:last-child[b-vtsf2j3fkd] {
    height: 0;
    padding: 0 !important;
}

/* Scrollable answer text with top/bottom shadow cues. */
.answer-wrap-home .answer-content-scroll[b-vtsf2j3fkd] {
    overflow-y: auto;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--dtz-bronze) transparent;
    background-image:
        linear-gradient(0deg, var(--dtz-bg), var(--dtz-bg)),
        linear-gradient(0deg, var(--dtz-bg), var(--dtz-bg)),
        linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
    background-position: bottom, top, bottom, top;
    background-color: var(--dtz-bg);
    background-repeat: no-repeat;
    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
    background-attachment: local, local, scroll, scroll;
}
.answer-wrap-home .answer-content-scroll > p:last-child[b-vtsf2j3fkd] { margin-bottom: 0; }
.answer-wrap-home .answer-content-scroll[b-vtsf2j3fkd]::-webkit-scrollbar { width: 6px; }
.answer-wrap-home .answer-content-scroll[b-vtsf2j3fkd]::-webkit-scrollbar-thumb { background-color: var(--dtz-bronze); border-radius: 3px; }
.answer-wrap-home .answer-content-scroll[b-vtsf2j3fkd]::-webkit-scrollbar-track { background: transparent; }

/* QID label (bottom-start). */
.answer-id-home[b-vtsf2j3fkd] {
    position: absolute;
    left: 40px;
    bottom: 0;
    height: 30px;
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 13px;
    font-family: Heebo;
    font-weight: 400;
    color: var(--dtz-bronze);
}

/* Pinned badge (§4.4 — gold accent), shown at the top of the answer text. */
.qa-pin-badge[b-vtsf2j3fkd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--dtz-bronze);
    color: #fff;
    font-family: 'Heebo', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 4px;
    margin-bottom: 5px;
}

/* Circular arrow button (bottom-start). Hover/scale comes from the global
   interaction layer (.answer-button-home in app-interactions.css). */
.answer-button-home[b-vtsf2j3fkd] {
    position: absolute;
    left: 5px;
    bottom: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--dtz-bronze);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--dtz-bg);
    font-size: 12px;
}
/* Arrow glyph: same asset as the BookCard circle arrow (assets/.../arrow.png). */
.answer-button-home img[b-vtsf2j3fkd] { width: 11px; height: auto; display: block; }
/* /Components/QaHitCard.razor.rz.scp.css */
/* Q&A search-hit card. Mirrors the card shell in QasPage.razor.css (browse
   cards), kept here so the component owns its own styles (scoped-first). */

.qas-card[b-ndsxvn98mk] {
    display: block;
    position: relative;
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    /* Symmetric, tight box. The QID rides inline next to the "שאלה" label and
       the category chip flows above the question (see .qas-card-tags), so no
       corner reserves space — any number of chips just push the text down. */
    padding: 22px 32px 22px;
    margin-bottom: 18px;
    color: var(--dtz-blue);
    text-decoration: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.qas-card:hover[b-ndsxvn98mk] {
    box-shadow: 0 6px 20px rgba(var(--dtz-bronze-rgb), 0.28);
    color: var(--dtz-blue);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── Category chip row (single pre-joined breadcrumb string) ──────────────
   In normal flow above the question (not absolute) so any number of chips
   wrap onto new lines and push the text down instead of overlapping it.
   Aligned to the end (LEFT in RTL), opposite the "שאלה" label on the right. */
.qas-card-tags[b-ndsxvn98mk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    position: relative;   /* keep chips painting above the stretched cover */
    z-index: 2;
}

.qas-card-chip[b-ndsxvn98mk] {
    background: var(--dtz-bronze);
    color: var(--dtz-blue);
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 4px;
    line-height: 1.4;
}

.qas-card-chip-cat[b-ndsxvn98mk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Ancestor levels muted so the leaf stays the focus (matches the browse card
   in QasPage.razor.css). A multi-category hit now renders parent ‹ leaf, so
   these must live in THIS component's scope too — scoped CSS doesn't cross
   component boundaries. */
.qas-cat-parent[b-ndsxvn98mk] {
    font-weight: 500;
    /* 0.8, not lower: at 0.6 the navy fades to ~3:1 over the gold chip (below
       WCAG AA 4.5:1). 0.8 clears AA while the weight gap (500 vs the leaf's
       700) still marks it as the muted ancestor. */
    opacity: 0.8;
}

.qas-cat-sep[b-ndsxvn98mk] {
    font-size: 10px;
    opacity: 0.55;
}

.qas-cat-leaf[b-ndsxvn98mk] {
    font-weight: 700;      /* keep the most-specific level prominent */
}

/* ── Question/Answer blocks ───────────────────────────────────────────── */
.qas-card-block[b-ndsxvn98mk] {
    margin-bottom: 14px;
}

.qas-card-block:last-of-type[b-ndsxvn98mk] {
    margin-bottom: 0;
}

.qas-card-label[b-ndsxvn98mk] {
    display: block;
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--dtz-blue);
    margin-bottom: 2px;
    text-align: right;
    direction: rtl;
    line-height: 1.2;
}

.qas-card-text[b-ndsxvn98mk] {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    color: var(--dtz-blue);
    margin: 0;
    text-align: right;
    direction: rtl;
    white-space: pre-line;
}

/* <mark> is injected via MarkupString (the server's _formatted field), so it
   carries no scope attribute — ::deep is required. */
.qas-card-text[b-ndsxvn98mk]  mark {
    background-color: var(--dtz-highlight);
    color: inherit;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── QID — inline beside the "שאלה" label (no arrow; the whole card links).
   Shares the label's navy + font; lighter weight & slightly smaller so it
   reads as the question's identifier without competing with the word. ── */
.qas-card-qid-num[b-ndsxvn98mk] {
    margin-inline-start: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--dtz-blue);
    font-variant-numeric: tabular-nums;
}
/* /Components/QaSearchBox.razor.rz.scp.css */
/* ── Q&A search box (sidebar) ───────────────────────────────────────────────
   Mirrors LessonSearchBox so the search block aligns with the topic tree below. */
.qa-search[b-elqi7idaxx] {
    width: 100%;
    margin-bottom: 24px;
}

.qa-search-title[b-elqi7idaxx] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--dtz-blue);
    text-align: right;
    margin: 0 0 12px 0;
    padding: 0;
}

.qs-card[b-elqi7idaxx] {
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    background-color: var(--dtz-bg);
    padding: 14px;
}

/* ── Smart field ─────────────────────────────────────────────────────────── */
.qs-input-wrap[b-elqi7idaxx] {
    position: relative;
}

.qs-input-icon[b-elqi7idaxx] {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dtz-bronze);
    font-size: 14px;
    pointer-events: none;
}

.qs-input[b-elqi7idaxx] {
    width: 100%;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: #fff;
    padding: 10px 12px;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    color: var(--dtz-blue);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qs-input-padded[b-elqi7idaxx] {
    /* start: always room for the search icon. end: only 12px by default — the wide
       36px is reserved for the × clear button and applied only when it's present
       (.qs-input--clearable), so a long placeholder/term uses the full box width. */
    padding-inline-start: 36px;
    padding-inline-end: 12px;
}

.qs-input-padded.qs-input--clearable[b-elqi7idaxx] {
    padding-inline-end: 36px;
}

.qs-input:focus[b-elqi7idaxx] {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.2);
}

.qs-clear[b-elqi7idaxx] {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.qs-clear:hover[b-elqi7idaxx] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

.qs-input[b-elqi7idaxx]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Dimmed/locked while the advanced accordion is open (precise search ignores this
   field). No layout shift — only the field's own appearance changes, so the
   "חיפוש מתקדם" toggle below stays put when opening/closing. */
.qs-input-wrap.is-disabled .qs-input[b-elqi7idaxx] {
    opacity: 0.5;
    background: #f3eee9;
    filter: grayscale(0.3);
    cursor: not-allowed;
}

.qs-input-wrap.is-disabled .qs-input-icon[b-elqi7idaxx] {
    opacity: 0.5;
}

/* ── Advanced accordion ──────────────────────────────────────────────────── */
.qs-adv-toggle[b-elqi7idaxx] {
    width: 100%;
    margin-top: 10px;
    border: 0;
    background: transparent;
    color: var(--dtz-bronze);
    padding: 6px 2px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.qs-adv-toggle:hover[b-elqi7idaxx] {
    color: var(--dtz-bronze-hover);
}

.qs-adv[b-elqi7idaxx] {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--dtz-bronze-rgb), 0.35);
}

.qs-adv-head[b-elqi7idaxx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.qs-adv-label[b-elqi7idaxx] {
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--dtz-blue);
}

.qs-help-btn[b-elqi7idaxx] {
    width: 22px;
    height: 22px;
    border: 1px solid var(--dtz-bronze);
    border-radius: 50%;
    background: transparent;
    color: var(--dtz-bronze);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.qs-help-btn:hover[b-elqi7idaxx] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

.qs-help[b-elqi7idaxx] {
    background: rgba(var(--dtz-bronze-rgb), 0.08);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.qs-help p[b-elqi7idaxx] {
    font-family: 'Heebo', sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dtz-blue);
    margin: 0 0 6px 0;
}

.qs-help p:last-child[b-elqi7idaxx] {
    margin-bottom: 0;
}

/* ── Word inputs ─────────────────────────────────────────────────────────── */
.qs-word[b-elqi7idaxx] {
    width: 100%;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: #fff;
    padding: 8px 10px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    color: var(--dtz-blue);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qs-word:focus[b-elqi7idaxx] {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.2);
}

/* ── או / וגם segmented toggle ────────────────────────────────────────────── */
.qs-op[b-elqi7idaxx] {
    display: flex;
    gap: 6px;
    margin: 8px 0;
    justify-content: center;
}

.qs-op-btn[b-elqi7idaxx] {
    flex: 1 1 0;
    max-width: 90px;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: #fff;
    color: var(--dtz-bronze);
    padding: 6px 0;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.qs-op-btn:hover[b-elqi7idaxx] {
    background: rgba(var(--dtz-bronze-rgb), 0.1);
}

.qs-op-on[b-elqi7idaxx] {
    background-color: var(--dtz-bronze);
    color: #fff;
}

.qs-op-on:hover[b-elqi7idaxx] {
    background-color: var(--dtz-bronze);
}

.qs-add-word[b-elqi7idaxx] {
    width: 100%;
    margin-top: 8px;
    border: 1px dashed var(--dtz-bronze);
    border-radius: 6px;
    background: transparent;
    color: var(--dtz-bronze);
    padding: 7px;
    font-family: 'Heebo', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.qs-add-word:hover[b-elqi7idaxx] {
    background: rgba(var(--dtz-bronze-rgb), 0.08);
}

.qs-sep[b-elqi7idaxx] {
    border: 0;
    border-top: 1px solid rgba(var(--dtz-bronze-rgb), 0.35);
    /* <hr> inherits Bootstrap's opacity: .25, which washes the line out far below
       the .qs-adv section divider (a <div> border at the same 0.35 colour).
       Reset to 1 so the rule renders at its intended strength and matches it. */
    opacity: 1;
    margin: 12px 0;
}

.qs-exclude-label[b-elqi7idaxx] {
    display: block;
    margin-bottom: 6px;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.qs-adv-actions[b-elqi7idaxx] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.qs-clear-adv[b-elqi7idaxx] {
    flex: 0 0 auto;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: transparent;
    color: var(--dtz-bronze);
    padding: 8px 16px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.qs-clear-adv:hover[b-elqi7idaxx] {
    color: #fff;
    background-color: var(--dtz-bronze);
}

.qs-run[b-elqi7idaxx] {
    flex: 1 1 auto;
    border: 0;
    border-radius: 6px;
    background-color: var(--dtz-bronze);
    color: #fff;
    padding: 8px;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.qs-run:hover[b-elqi7idaxx] {
    background-color: var(--dtz-bronze-hover);
}

/* ── Go to responsum number ──────────────────────────────────────────────── */
.qs-goto[b-elqi7idaxx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.qs-goto-label[b-elqi7idaxx] {
    font-family: 'Heebo', sans-serif;
    font-size: 13.5px;
    color: var(--dtz-blue);
    white-space: nowrap;
}

.qs-goto-input[b-elqi7idaxx] {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    background: #fff;
    padding: 7px 10px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    color: var(--dtz-blue);
    text-align: center;
    outline: none;
}

.qs-goto-input:focus[b-elqi7idaxx] {
    border-color: var(--dtz-bronze);
    box-shadow: 0 0 0 2px rgba(var(--dtz-bronze-rgb), 0.2);
}

.qs-goto-btn[b-elqi7idaxx] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background-color: var(--dtz-bronze);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.qs-goto-btn:hover[b-elqi7idaxx] {
    background-color: var(--dtz-bronze-hover);
}
/* /Components/QaSidebar.razor.rz.scp.css */
/* ── Sidebar wrapper ──────────────────────────────────────────────────── */
.qa-sidebar[b-9wv4tm988f] {
    width: 100%;
}

.qa-sidebar[b-9wv4tm988f]  .harav-form-header-img {
    height: 90px;
    width: auto;
    object-fit: contain;
}

/* ── Ask the Rav ─────────────────────────────────────────────────────── */
.qa-ask-card[b-9wv4tm988f] {
    background: #ffffff;
}

/* The whole header is the accordion toggle — image + overlapping CTA. */
.qa-ask-header[b-9wv4tm988f] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;     /* let image place itself via text-align/auto-margin */
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Wrapper aligns image to the right (RTL-aware) without flex-direction tricks.
   In RTL: padding-inline-start = right side, which pushes the image leftward. */
.qa-ask-img-wrap[b-9wv4tm988f] {
    width: 100%;
    text-align: right;
    padding-inline-start: 24px;
}

.qa-ask-img[b-9wv4tm988f] {
    /* Fixed height so the CTA banner's top edge sits at a predictable
       offset from the column top (= 100px - 18px overlap = 82px), allowing
       the main column's first card to align with it via min-height. */
    height: 100px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transform: scaleX(-1);    /* flip horizontally so the Rav faces inward */
    display: inline-block;
}

/* CTA banner overlaps the bottom of the image via negative margin.
   Forced to exactly 43px tall (matching the navy category badge on the
   QA detail page). image_height (100px) − overlap (18px) keeps the
   banner top pinned at 82px from the column top, which is the reference
   Y that the listing/detail headers align against. */
.qa-ask-cta[b-9wv4tm988f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 43px;
    background: var(--dtz-bronze);
    color: #ffffff;
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    padding: 0 16px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    margin-top: -18px;        /* slides up onto the image */
    position: relative;
    z-index: 2;
    transition: background 0.15s ease;
}

.qa-ask-header:hover .qa-ask-cta[b-9wv4tm988f] {
    background: var(--dtz-bronze-hover);
}

/* Form area — slides open below the banner like an accordion body.
   The fields, borders and success message live in the shared AskQuestionForm
   component; this only styles the box that frames it. */
.qa-ask-form[b-9wv4tm988f] {
    background: var(--dtz-bg);
    border: 1px solid var(--dtz-bronze);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    padding: 14px 16px 18px;
    margin-top: -4px;          /* visually fuses with the banner above */
    text-align: right;
    direction: rtl;
}

/* On success the banner is gone, so the box stands on its own: full border
   and rounding, no fusing offset. */
.qa-ask-form--done[b-9wv4tm988f] {
    border-top: 1px solid var(--dtz-bronze);
    border-radius: 6px;
    margin-top: 0;
}
/* /Components/SearchScopeTabs.razor.rz.scp.css */
/* Underline-style scope tabs. RTL: first tab (הכל) sits on the right. */
.scope-tabs[b-71tem258qf] {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid rgba(var(--dtz-bronze-rgb), 0.35);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.scope-tab[b-71tem258qf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--dtz-blue);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;            /* overlap the container border */
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.scope-tab:hover[b-71tem258qf] {
    color: var(--dtz-bronze);
    text-decoration: none;
}

.scope-tab--active[b-71tem258qf] {
    color: var(--dtz-bronze);
    border-bottom-color: var(--dtz-bronze);
}

/* Result count beside the label — muted pill. */
.scope-tab-count[b-71tem258qf] {
    font-size: 13px;
    font-weight: 700;
    color: var(--dtz-blue);
    background: rgba(var(--dtz-bronze-rgb), 0.18);
    border-radius: 999px;
    padding: 1px 9px;
    font-variant-numeric: tabular-nums;
}

.scope-tab--active .scope-tab-count[b-71tem258qf] {
    background: var(--dtz-bronze);
    color: #fff;
}
/* /Components/SearchTips.razor.rz.scp.css */
.search-tips[b-4vyvh721jw] {
    max-width: 32rem;
    margin: 18px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--dtz-bronze-rgb), 0.35);
    text-align: start;
}

.search-tips-title[b-4vyvh721jw] {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dtz-bronze);
}

.search-tips-list[b-4vyvh721jw] {
    margin: 0;
    padding-inline-start: 1.2rem;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--dtz-blue);
}

.search-tips-list li[b-4vyvh721jw] {
    margin-bottom: 4px;
}
/* /Components/TopicSidebar.razor.rz.scp.css */
/* ── Topic-tree sidebar (generic) ──────────────────────────────────────── */
.topic-sidebar[b-77v78h0y7r] {
    width: 100%;
}

/* Section title sits above the bordered list card (no card / no dark bg). */
.topic-sidebar-title[b-77v78h0y7r] {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--dtz-blue);
    text-align: right;
    margin: 0 0 12px 0;
    padding: 0;
}

/* Bordered card that contains the L1/L2/L3 list. */
.topic-sidebar-card[b-77v78h0y7r] {
    border: 1px solid var(--dtz-bronze);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--dtz-bg);
}

/* ── Shared row styles ────────────────────────────────────────────────── */
.topic-sidebar-row[b-77v78h0y7r] {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    color: var(--dtz-blue);
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-decoration: none;
}

.topic-sidebar-row:hover[b-77v78h0y7r] {
    background-color: var(--dtz-bronze-bg);
    color: var(--dtz-blue);
    text-decoration: none;
}

.topic-sidebar-name[b-77v78h0y7r] {
    flex: 1;
    text-align: right;
}

/* Plain bronze chevron (no background), rotates 180° when the row is open. */
.topic-sidebar-chevron[b-77v78h0y7r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dtz-bronze);
    font-size: 14px;
    margin-inline-start: 12px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.topic-sidebar-chevron-sm[b-77v78h0y7r] {
    font-size: 12px;
}

.topic-sidebar-row[aria-expanded="true"] .topic-sidebar-chevron[b-77v78h0y7r] {
    transform: rotate(180deg);
}

/* ── Level 1 (top categories) ─────────────────────────────────────────── */
.topic-sidebar-l1-item + .topic-sidebar-l1-item > .topic-sidebar-l1-row[b-77v78h0y7r] {
    border-top: 1px solid var(--dtz-bronze-border);
}

/* Reserved 3px on start side so closed/open rows align identically; turns
   into a bronze accent bar when the L1 is open. */
.topic-sidebar-l1-row[b-77v78h0y7r] {
    font-size: 16px;
    font-weight: 600;
    padding-block: 10px;
    border-inline-start: 3px solid transparent;
}

.topic-sidebar-l1-item.open > .topic-sidebar-l1-row[b-77v78h0y7r] {
    background-color: var(--dtz-bronze-bg);
    font-weight: 700;
    border-inline-start-color: var(--dtz-bronze);
}

/* ── Level 2 ──────────────────────────────────────────────────────────── */
.topic-sidebar-l2-list[b-77v78h0y7r] {
    position: relative;
    background-color: var(--dtz-bronze-bg);
    border-top: 1px solid var(--dtz-bronze-border);
}

/* 1px guide line at low opacity — present only inside the currently-open
   branch (the list itself is only rendered when L1 is open). */
.topic-sidebar-l2-list[b-77v78h0y7r]::before {
    content: '';
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 26px;
    width: 1px;
    background-color: rgba(var(--dtz-bronze-rgb), 0.35);
}

.topic-sidebar-l2-item + .topic-sidebar-l2-item > .topic-sidebar-l2-row[b-77v78h0y7r] {
    border-top: 1px solid var(--dtz-bronze-border);
}

.topic-sidebar-l2-row[b-77v78h0y7r] {
    padding-block: 9px;
    padding-inline-start: 56px;
    padding-inline-end: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dtz-blue-hover);
}

.topic-sidebar-l2-row:hover[b-77v78h0y7r] {
    background-color: var(--dtz-bronze-bg);
}

.topic-sidebar-l2-item.open > .topic-sidebar-l2-row[b-77v78h0y7r] {
    background-color: var(--dtz-bronze-border);
    font-weight: 700;
}

/* ── Level 3 ──────────────────────────────────────────────────────────── */
.topic-sidebar-l3-list[b-77v78h0y7r] {
    position: relative;
    background-color: #ffffff;
    border-top: 1px solid var(--dtz-bronze-border);
}

.topic-sidebar-l3-list[b-77v78h0y7r]::before {
    content: '';
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 54px;
    width: 1px;
    background-color: rgba(var(--dtz-bronze-rgb), 0.22);
}

.topic-sidebar-l3-list > li + li > .topic-sidebar-l3-row[b-77v78h0y7r] {
    border-top: 1px solid var(--dtz-bronze-bg);
}

.topic-sidebar-l3-row[b-77v78h0y7r] {
    padding-block: 7px;
    padding-inline-start: 78px;
    padding-inline-end: 16px;
    font-size: 13px;
    font-weight: 400;
    color: var(--dtz-blue-muted);
}

.topic-sidebar-l3-row:hover[b-77v78h0y7r] {
    background-color: var(--dtz-bg);
    color: var(--dtz-blue);
}
/* /Components/VisibilityToggle.razor.rz.scp.css */
/* Delicate visibility toggle — small checkbox + eye icon + muted label.
   Lifted from the lesson-topics edit modal, now shared across admin forms. */
.vis-toggle[b-9hie0dp28r] {
    color: var(--dtz-blue-muted);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.vis-toggle .form-check-input[b-9hie0dp28r] {
    width: 1em;
    height: 1em;
    cursor: pointer;
}
/* /Components/ZadikBairBand.razor.rz.scp.css */
/* New "צדיק בא לעיר" band — ported from docs/mockups/zadik-bair-mockup.html
   (option D + fixed-lesson variant 1). Scoped to this component. Colour tokens
   come from app-base.css (:root). */

.band[b-2kvyiyz7mk] { background: var(--dtz-blue); color: #fff; }
/* Vertical padding trimmed to 12px so the closed band lands back on ~100px now
   that the action column holds a TWO-row stacked pair (channel + toggle) rather
   than the old single inline row — the taller stack is what drives the height. */
.band-inner[b-2kvyiyz7mk] { max-width: 1200px; margin: 0 auto; padding: 12px 24px; text-align: center; }

/* The global `span { color:var(--dtz-blue) }` (app-utilities.css) paints every inline
   <span> dark navy — invisible on this dark band. Title/details/toggle text all
   live in spans, so without this they vanish. Make band spans inherit their
   container's (white) colour; the bronze accents below re-assert via higher
   specificity. */
.band span[b-2kvyiyz7mk] { color: inherit; }

/* Three columns 1fr|auto|1fr: title pinned to the right edge, action stack to the
   left edge, details dead-centre regardless of the title's width.
   Closed-band height = band-inner's 12+12px padding + this row. The action stack
   (~76px) is the tallest column and drives the row height, landing the closed band
   on ~100px. min-height 56px is just a floor — the stacked mobile layout and the
   open accordion below can grow further. */
.dz-row[b-2kvyiyz7mk] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 56px; }
.dz-col-title[b-2kvyiyz7mk] { justify-self: start; text-align: right; }      /* RTL: start = right */
.dz-col-details[b-2kvyiyz7mk] { justify-self: center; text-align: center; }
.dz-col-action[b-2kvyiyz7mk] { justify-self: end; }
/* Channel button stacked ABOVE the accordion toggle — a primary/secondary pair
   sharing the same pill geometry so they read as one unit. align-items:stretch
   makes both buttons the width of the wider (channel) one. */
.dz-stack[b-2kvyiyz7mk] { display: inline-flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* Title — "צדיק בא לעיר – {city}", one size, one line; the city is the hero. */
.dz-title[b-2kvyiyz7mk] { font-family: 'BANiflaot', Arial, sans-serif; font-weight: 700; color: #fff; font-size: clamp(32px, 4vw, 46px); line-height: 1.05; letter-spacing: 0; margin: 0; white-space: nowrap; }
/* Separator inherits everything from .dz-title (font, 700 weight, size,
   letter-spacing) — only the colour differs (bronze accent); margin adds the
   breathing room around the dash. */
.dz-title .sep[b-2kvyiyz7mk] { color: var(--dtz-bronze); margin: 0 .25em; }

/* Details — minimal, icon-free, two lines, both white. Title-matching display
   font (BANiflaot), sized in vw like the title (clamp: min, vw, max) so it
   scales with the viewport. Tight line-heights keep the closed band compact. */
.dz-min .line1[b-2kvyiyz7mk] { font-family: 'BANiflaot', Arial, sans-serif; color: #fff; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.05; letter-spacing: 0; white-space: nowrap; }
.dz-min .line1 .mid[b-2kvyiyz7mk] { color: var(--dtz-bronze); margin: 0 .5em; }
.dz-min .line1 .greg[b-2kvyiyz7mk] { margin-inline-start: .4em; font-size: 1.12em; }   /* full dd.MM.yyyy, sized to match the time */
/* Time reads small as a bare numeral next to the Hebrew text — nudge it up a
   touch (em, so it still scales with line1's clamp). */
.dz-min .line1 .time[b-2kvyiyz7mk] { font-size: 1.12em; }
.dz-min .line2[b-2kvyiyz7mk] { font-family: 'BANiflaot', Arial, sans-serif; color: #fff; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.05; letter-spacing: 0; white-space: nowrap; margin-top: 6px; }
.dz-empty[b-2kvyiyz7mk] { color: var(--dtz-blue-border); font-size: 17px; }

/* Accordion toggle — the SECONDARY of the stacked pair: same pill shape & padding
   as the channel button but a quiet bronze outline instead of a fill. Keeps the
   rotating chevron that signals the fixed-lessons panel opening below. */
.dz-toggle[b-2kvyiyz7mk] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1px solid rgba(var(--dtz-bronze-rgb), .45);
  border-radius: 11px; color: #fff; font-family: 'Heebo', Arial, sans-serif;
  font-weight: 600; font-size: 14px; padding: 6px 13px; cursor: pointer; white-space: nowrap;
  filter: none; transition: background .18s ease, border-color .18s ease;
}
.dz-toggle:hover[b-2kvyiyz7mk] { background: rgba(var(--dtz-bronze-rgb), .12); border-color: var(--dtz-bronze); }
.dz-toggle .chev[b-2kvyiyz7mk] { font-size: 11px; color: var(--dtz-bronze); transition: transform .3s ease; }
.dz-toggle.open .chev[b-2kvyiyz7mk] { transform: rotate(180deg); }

/* Collapsible panel — smooth, like the donations page. */
.dz-panel[b-2kvyiyz7mk] { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .4s ease; }
.dz-panel.open[b-2kvyiyz7mk] { max-height: 1200px; opacity: 1; transition: max-height .7s ease, opacity .5s ease .1s; }
.dz-panel-inner[b-2kvyiyz7mk] { padding-top: 24px; margin-top: 20px; border-top: 1px solid rgba(var(--dtz-bronze-rgb), .3); }

/* Fixed-lesson cards — variant 1: weekday hero, time in bronze, hairline, place.
   Icon-free and title-free; built from weekday/time/synagogue/address only. */
.fl-grid[b-2kvyiyz7mk] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fl-empty[b-2kvyiyz7mk] { color: var(--dtz-blue-border); font-size: 16px; text-align: center; }
.fl-grid .place[b-2kvyiyz7mk] { color: var(--dtz-blue-border); font-size: 15.5px; line-height: 1.5; }
.fl-grid .addr[b-2kvyiyz7mk]  { color: var(--dtz-text-muted); font-size: 13.5px; margin-top: 3px; }

.fl-v1[b-2kvyiyz7mk] {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(var(--dtz-bronze-rgb), .28);
  border-radius: 14px; padding: 22px 20px; text-align: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.fl-v1:hover[b-2kvyiyz7mk] { background: rgba(var(--dtz-bronze-rgb), .10); border-color: rgba(var(--dtz-bronze-rgb), .6); transform: translateY(-2px); }
.fl-v1 .day[b-2kvyiyz7mk]  { font-family: 'BANiflaot', Arial, sans-serif; font-weight: 400; font-size: 25px; line-height: 1; color: #fff; }
.fl-v1 .time[b-2kvyiyz7mk] { color: var(--dtz-bronze); font-weight: 700; font-size: 18px; margin-top: 8px; }
.fl-v1 .rule[b-2kvyiyz7mk] { height: 1px; background: rgba(var(--dtz-bronze-rgb), .3); margin: 14px 0; }

/* Channel entry — the PRIMARY of the stacked pair: a solid bronze pill leading to
   /live. The global `.band span { color:inherit }` keeps its label the button's
   dark-navy text. The leading red dot is a decorative "channel" cue (see .dot). */
.dz-channel-btn[b-2kvyiyz7mk] {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--dtz-bronze); color: var(--dtz-blue);
  font-family: 'Heebo', Arial, sans-serif; font-weight: 700; font-size: 15.5px;
  padding: 6px 13px; border-radius: 11px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: background .18s ease, transform .18s ease;
}
.dz-channel-btn:hover[b-2kvyiyz7mk] { background: #fff; transform: translateY(-1px); }
/* Pulsing red dot — the universal "channel / on-air" cue. Red + fading ring use
   the danger token (not a hardcoded colour). Purely decorative; not live status. */
.dz-channel-btn .dot[b-2kvyiyz7mk] {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--dtz-danger);
  box-shadow: 0 0 0 0 rgba(var(--dtz-danger-rgb), .6);
  animation: dz-channel-pulse-b-2kvyiyz7mk 1.6s infinite;
}
@keyframes dz-channel-pulse-b-2kvyiyz7mk {
  0%   { box-shadow: 0 0 0 0 rgba(var(--dtz-danger-rgb), .55); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--dtz-danger-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--dtz-danger-rgb), 0); }
}

/* responsive */
@media (max-width: 900px) { .fl-grid[b-2kvyiyz7mk] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .dz-row[b-2kvyiyz7mk] { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .dz-col-title[b-2kvyiyz7mk], .dz-col-details[b-2kvyiyz7mk], .dz-col-action[b-2kvyiyz7mk] { justify-self: center; text-align: center; }
  /* Stacked/centred layout: bump the title and details up toward (but not past)
     the large-screen sizes — the clamp() would otherwise pin them to their small
     min on narrow viewports. Title max is 46px, details max 28px. */
  .dz-title[b-2kvyiyz7mk] { white-space: normal; font-size: 40px; }
  .dz-min .line1[b-2kvyiyz7mk], .dz-min .line2[b-2kvyiyz7mk] { white-space: normal; font-size: 24px; }
}
@media (max-width: 520px) { .fl-grid[b-2kvyiyz7mk] { grid-template-columns: 1fr; } }