/**
 * webapp.css — World Wow web app design system
 *
 * Layered on top of Bootstrap 5 (RTL or LTR, swapped by locale). Only the
 * tokens and components the app actually needs; Bootstrap does the rest.
 *
 * Typography matches the existing Mazon provider portal (El Messiri) so the
 * web app, the provider portals and the dashboard read as one product.
 *
 * All spacing uses LOGICAL properties (inline-start/end) so the same rules
 * mirror correctly in Arabic and English without an RTL override sheet.
 */

:root {
    /* ---- Brand ------------------------------------------------------- */
    /* Sampled from the mobile mockups and reconciled with the existing
       provider portal tokens (--svc-gold #C59B6C, --svc-cream #F5F2ED). */
    --ww-gold: #C59B6C;
    --ww-gold-dark: #A97F4F;
    --ww-champagne: #D9B380;
    --ww-cream: #F5F2ED;
    --ww-soft: #F7F1E8;

    /* ---- Ink --------------------------------------------------------- */
    --ww-ink: #1B1B1B;
    --ww-ink-2: #4A4340;
    --ww-ink-3: #8A817B;

    /* ---- Surfaces ---------------------------------------------------- */
    --ww-surface: #FFFFFF;
    --ww-field: #E9E6E2;
    --ww-line: #E6E0D9;

    /* ---- Semantic (separate from the brand accent) -------------------- */
    --ww-like: #E23B3B;
    --ww-success: #2F6B45;
    --ww-danger: #A3302A;
    --ww-expired: #F7B6B6;

    /* ---- Type -------------------------------------------------------- */
    --ww-font: 'El Messiri', 'Tajawal', 'Segoe UI', sans-serif;

    /* ---- Shape ------------------------------------------------------- */
    /* The mockups use fully-rounded controls throughout. */
    --ww-radius-pill: 999px;
    --ww-radius-card: 16px;

    /* ---- Layout ------------------------------------------------------ */
    --ww-form-max: 32rem;      /* forms are unusable full-width on desktop */
    --ww-tabbar-h: 4.25rem;
}

/* ====================================================================== */
/* Base                                                                    */
/* ====================================================================== */

body {
    font-family: var(--ww-font);
    background: var(--ww-cream);
    color: var(--ww-ink);
    /* Bottom tab bar is fixed on mobile — keep content clear of it. */
    padding-bottom: var(--ww-tabbar-h);
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* Latin names and numerals sit inline inside Arabic text. Keeping them
   LTR prevents digits and names from reordering in an RTL paragraph. */
.ww-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Numbers that line up in columns (prices, counts, ages). */
.ww-tabular {
    font-variant-numeric: tabular-nums;
}

/* ====================================================================== */
/* Controls                                                                */
/* ====================================================================== */

.ww-btn {
    /* inline-flex so an <a> and a <button> side by side match in height and
       centre their label the same way — an inline <a> would sit shorter. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--ww-radius-pill);
    padding: .7rem 1.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.ww-btn-primary {
    background: var(--ww-champagne);
    color: #fff;
}

.ww-btn-primary:hover,
.ww-btn-primary:focus-visible {
    background: var(--ww-gold-dark);
    color: #fff;
}

.ww-btn-outline {
    background: transparent;
    border-color: var(--ww-line);
    color: var(--ww-ink);
}

.ww-btn-outline:hover,
.ww-btn-outline:focus-visible {
    border-color: var(--ww-gold);
    color: var(--ww-gold-dark);
}

/* Inputs are pill-shaped and flat, matching the mockups. */
.ww-input {
    background: var(--ww-field);
    border: 1px solid transparent;
    border-radius: var(--ww-radius-pill);
    padding: .75rem 1.25rem;
    width: 100%;
    font-family: inherit;
}

.ww-input:focus {
    outline: none;
    border-color: var(--ww-gold);
    background: var(--ww-surface);
}

/* ====================================================================== */
/* Chip grid — used for every multi-select answer in onboarding & filters  */
/* ====================================================================== */

.ww-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ww-chip {
    background: var(--ww-field);
    border: 1px solid transparent;
    border-radius: var(--ww-radius-pill);
    padding: .45rem 1rem;
    cursor: pointer;
    font-size: .92rem;
}

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

/* The real control is a visually-hidden input, so the chip stays
   keyboard-accessible and announces its checked state to screen readers. */
.ww-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ww-chip:has(input:checked) {
    background: var(--ww-gold);
    color: #fff;
}

.ww-chip:has(input:focus-visible) {
    outline: 2px solid var(--ww-gold-dark);
    outline-offset: 2px;
}

/* ====================================================================== */
/* Cards & lists                                                           */
/* ====================================================================== */

.ww-card {
    background: var(--ww-surface);
    border-radius: var(--ww-radius-card);
    border: 1px solid var(--ww-line);
    padding: 1rem;
}

/* Subscriber row — the discovery list. One column on phones, grid above. */
.ww-list {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ww-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .ww-list { grid-template-columns: repeat(3, 1fr); }
}

.ww-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    /* Without this the row cannot shrink below its content and a long name
       pushes the action buttons outside the card. */
    min-width: 0;
}

/* The text column is the only part allowed to shrink; everything else keeps
   its natural size. `min-width: 0` is what actually permits the truncation —
   a flex item defaults to min-width:auto and refuses to shrink past its
   content. */
.ww-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ww-row-text > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-row-actions {
    display: flex;
    gap: .5rem;
    margin-inline-start: auto;
    /* Never squashed or wrapped out of the card by a long name. */
    flex-shrink: 0;
}

/* Four actions plus a name is tight on a narrow phone, so the buttons step
   down a size below 400px rather than pushing the name out. */
@media (max-width: 400px) {
    .ww-row { gap: .6rem; }
    .ww-row-actions { gap: .3rem; }
    .ww-action { width: 2.1rem; height: 2.1rem; font-size: .8rem; }
}

.ww-action {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--ww-line);
    background: var(--ww-surface);
    color: var(--ww-gold);
    display: grid;
    place-items: center;
}

.ww-action:hover,
.ww-action:focus-visible {
    border-color: var(--ww-gold);
    background: var(--ww-soft);
}

.ww-action.is-active {
    background: var(--ww-like);
    border-color: var(--ww-like);
    color: #fff;
}

/* ====================================================================== */
/* Navigation — bottom tab bar on mobile, top navbar from md up            */
/* ====================================================================== */

.ww-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--ww-surface);
    border-top: 1px solid var(--ww-line);
    display: flex;
    justify-content: space-around;
    padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
}

.ww-tabbar a {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    font-size: .68rem;
    line-height: 1.2;
    color: var(--ww-ink-3);
    text-decoration: none;
    padding: .25rem .15rem;
    /* "طلبات الزواج" is two words and wraps onto a second line, which
       pushes the row out of alignment and makes the bar taller than the
       space reserved for it. Keep every label on one line and let the
       longest shrink instead. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The longest label still needs room on a narrow phone. */
@media (max-width: 400px) {
    .ww-tabbar a { font-size: .62rem; }
}

/* Every tab icon gets the SAME box, whatever it is drawn with — an icon
   font glyph, an inline SVG or the brand PNG. Without this each renders at
   its own natural width and the row looks ragged: fa-users is far wider
   than fa-heart, and the logo smaller than both. */
.ww-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    margin-bottom: .15rem;
    font-size: 1.15rem;   /* icon fonts ignore the .72rem label size */
    line-height: 1;
    /* A belt-and-braces bound: nothing inside may escape the box, however
       it is drawn. */
    overflow: hidden;
}

/* The mark is portrait (451x740), so constrain the HEIGHT and let the width
   follow rather than squashing it into a square.
   An explicit height, not 100%: a percentage height on a grid item resolves
   against the image's own intrinsic size rather than the 1.5rem box, so the
   logo overflowed the tab entirely. */
.ww-tab-logo {
    height: 1.5rem;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    /* Muted to sit with the inactive tabs; full colour when current. */
    opacity: .5;
    transition: opacity .15s ease;
}

.ww-tabbar a.is-active .ww-tab-logo { opacity: 1; }

.ww-tabbar a.is-active {
    color: var(--ww-gold-dark);
    font-weight: 600;
}

@media (min-width: 768px) {
    .ww-tabbar { display: none; }
}

/* Confirmation screens (block, report): a large icon over centred copy. */
.ww-confirm-icon {
    font-size: 4.5rem;
    color: var(--ww-champagne);
}

.ww-confirm .ww-btn-primary { margin-top: 2rem; }

/* ====================================================================== */
/* Profile view (another member)                                           */
/* ====================================================================== */

.ww-profile-photo {
    position: relative;
    border-radius: var(--ww-radius-card);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--ww-field);
}

.ww-profile-img { border-radius: 0 !important; }

/* The action row sits over the bottom of the photo, as in the app. */
.ww-profile-actions {
    position: absolute;
    inset-inline: 0;
    bottom: .9rem;
    display: flex;
    justify-content: center;
    gap: .6rem;
}

.ww-profile-actions .ww-action {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
    backdrop-filter: blur(4px);
}

.ww-profile-actions .ww-action:hover:not(:disabled),
.ww-profile-actions .ww-action:focus-visible {
    background: rgba(255, 255, 255, .3);
}

.ww-profile-actions .ww-action:disabled { opacity: .55; }

/* Six buttons across a 360px phone would overflow at the default size. */
@media (max-width: 400px) {
    .ww-profile-actions { gap: .4rem; }
}

.ww-profile-actions .ww-action.is-active {
    background: var(--ww-like);
    border-color: var(--ww-like);
}

/* Tabs overflow on a phone; scroll them rather than wrapping. */
.ww-tabs-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

.ww-tabs-scroll::-webkit-scrollbar { display: none; }

.ww-tabs-scroll .ww-tab {
    flex: 0 0 auto;
    padding-inline: 1rem;
    white-space: nowrap;
}

/* ====================================================================== */
/* Tabs (wallet history)                                                   */
/* ====================================================================== */

.ww-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--ww-line);
}

.ww-tab {
    flex: 1;
    text-align: center;
    padding: .7rem .5rem;
    text-decoration: none;
    color: var(--ww-ink-3);
    font-size: .92rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ww-tab:hover { color: var(--ww-ink); }

.ww-tab.is-active {
    color: var(--ww-gold-dark);
    border-bottom-color: var(--ww-gold);
    font-weight: 600;
}

.ww-wallet-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--ww-gold-dark);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* ====================================================================== */
/* Plan cards                                                              */
/* ====================================================================== */

.ww-plan {
    display: block;
    background: var(--ww-soft);
    border: 1px solid var(--ww-line);
    border-radius: var(--ww-radius-card);
    padding: 1.1rem 1.25rem;
    margin-bottom: .9rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

/* The radio is the real control; hiding it visually keeps the card
   keyboard accessible and announced correctly. */
.ww-plan input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ww-plan:hover { border-color: var(--ww-gold); }

/* Selected: solid gold with white text, as in the app. */
.ww-plan:has(input:checked) {
    background: var(--ww-champagne);
    border-color: var(--ww-champagne);
    color: #fff;
}

.ww-plan:has(input:checked) .ww-plan-feature i { color: #fff; }

.ww-plan:has(input:focus-visible) {
    outline: 2px solid var(--ww-gold-dark);
    outline-offset: 2px;
}

.ww-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.ww-plan-feature {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .3rem 0;
    font-size: .92rem;
}

.ww-plan-feature i { color: var(--ww-gold); width: 1.25rem; }

/* The pay button sits at the bottom of the screen, as in the app. */
.ww-plan-footer { margin-top: 2rem; }

/* ====================================================================== */
/* Menu list (the "More" screen)                                           */
/* ====================================================================== */

.ww-menu {
    background: var(--ww-surface);
    border: 1px solid var(--ww-line);
    border-radius: var(--ww-radius-card);
    overflow: hidden;
}

.ww-menu-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1rem;
    color: var(--ww-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ww-line-2, var(--ww-line));
}

.ww-menu-item:last-child { border-bottom: 0; }

.ww-menu-item:hover,
.ww-menu-item:focus-visible { background: var(--ww-soft); color: var(--ww-ink); }

.ww-menu-item.is-disabled { color: var(--ww-ink-3); pointer-events: none; }

/* Admin-authored page content (terms, privacy, about). Quill emits bare
   <p>/<ul>/<h*>, so give them readable rhythm inside the card. */
.ww-prose { line-height: 1.8; }
.ww-prose > *:last-child { margin-bottom: 0; }
.ww-prose p { margin-bottom: .9rem; }
.ww-prose h1, .ww-prose h2, .ww-prose h3, .ww-prose h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 .6rem;
}
.ww-prose ul, .ww-prose ol { padding-inline-start: 1.25rem; margin-bottom: .9rem; }
.ww-prose a { color: var(--ww-gold-dark); }
.ww-prose blockquote {
    border-inline-start: 3px solid var(--ww-line);
    padding-inline-start: .9rem;
    color: var(--ww-ink-2);
    margin: 0 0 .9rem;
}

/* Segmented control — the Ar/En language switch on the settings screen. */
.ww-segment {
    display: inline-flex;
    border: 1px solid var(--ww-gold);
    border-radius: var(--ww-radius-pill);
    overflow: hidden;
    flex-shrink: 0;
}

.ww-segment-item {
    padding: .3rem 1rem;
    font-size: .85rem;
    text-decoration: none;
    color: var(--ww-gold-dark);
    background: var(--ww-surface);
}

.ww-segment-item.is-active {
    background: var(--ww-gold);
    color: #fff;
}

/* ====================================================================== */
/* Pagination                                                              */
/* ====================================================================== */

.ww-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
}

.ww-page {
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ww-line);
    border-radius: var(--ww-radius-pill);
    background: var(--ww-surface);
    color: var(--ww-ink-2);
    text-decoration: none;
    font-size: .9rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.ww-page:hover,
.ww-page:focus-visible {
    border-color: var(--ww-gold);
    color: var(--ww-gold-dark);
}

.ww-page.is-current {
    background: var(--ww-gold);
    border-color: var(--ww-gold);
    color: #fff;
    font-weight: 600;
}

.ww-page.is-disabled {
    opacity: .4;
    pointer-events: none;
}

.ww-page.is-gap {
    border-color: transparent;
    background: none;
    pointer-events: none;
}

.ww-pagination-summary {
    text-align: center;
    font-size: .8rem;
    color: var(--ww-ink-3);
    margin: .75rem 0 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 400px) {
    .ww-page { min-width: 2.1rem; height: 2.1rem; font-size: .82rem; }
}

/* ====================================================================== */
/* Layout helpers                                                          */
/* ====================================================================== */

.ww-form-wrap {
    max-width: var(--ww-form-max);
    margin-inline: auto;
}

/* Wide content must scroll inside its own container, never the page body. */
.ww-scroll-x {
    overflow-x: auto;
}

/* ====================================================================== */
/* Accessibility                                                           */
/* ====================================================================== */

:focus-visible {
    outline: 2px solid var(--ww-gold-dark);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Discovery filter groups. Ten filters do not fit on a phone screen open,
   so each choice group collapses; a group with an active selection is
   rendered open and shows how many values are picked. */
.ww-filter-group {
    border-top: 1px solid var(--ww-line);
}

.ww-filter-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem 0;
    background: none;
    border: 0;
    color: var(--ww-ink);
    font-size: .9rem;
    font-weight: 600;
}

/* The chevron points down when closed, up when open, so the control reads
   the same way regardless of text direction. */
.ww-filter-toggle .fa-chevron-down {
    transition: transform .15s ease;
    color: var(--ww-ink-3);
}

.ww-filter-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.ww-filter-count {
    min-width: 1.25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--ww-gold);
    color: #fff;
    font-size: .7rem;
    line-height: 1.25rem;
    text-align: center;
}

/* شبيهي gallery — a 2x2 grid of square thumbnails, each with a delete
   badge, matching the mobile screen. */
.ww-shabehe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.ww-shabehe-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ww-radius, 12px);
    overflow: hidden;
    background: var(--ww-cream);
}

.ww-shabehe-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Centres the fallback caption when the file is gone. */
.ww-shabehe-missing {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    text-align: center;
}

/* Pinned to the corner nearest the reader in both directions. */
.ww-shabehe-delete {
    position: absolute;
    top: .5rem;
    inset-inline-end: .5rem;
}

.ww-shabehe-delete button {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #E5484D;
    color: #fff;
    font-size: .8rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.ww-shabehe-delete button:hover {
    background: #C93B3F;
}

/* معاينة ملفي — the eye button beside the greeting, as in the app. */
.ww-preview-link {
    color: var(--ww-ink-2);
    line-height: 1.2;
}

.ww-preview-link i {
    font-size: 1.25rem;
    margin-bottom: .25rem;
    color: var(--ww-ink);
}

.ww-preview-link:hover {
    color: var(--ww-gold);
}

/* An admin's reason for rejecting a field, rendered inside that field's own
   row so it is unambiguous which field it refers to. */
.ww-reject-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .625rem .75rem;
    margin-bottom: .5rem;
    border-radius: var(--ww-radius, 12px);
    border-inline-start: 3px solid #E5484D;
    background: #FDECEE;
    color: #7A1F23;
    font-size: .875rem;
}

.ww-reject-note i {
    margin-top: .15rem;
    color: #E5484D;
}

/* Locked primary fields, read-only. Label above value rather than beside it:
   the Arabic labels are long enough to collide in a two-column row. */
.ww-locked-fields {
    display: grid;
    gap: .75rem;
    font-size: .875rem;
}

.ww-locked-fields > div {
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--ww-line);
}

.ww-locked-fields > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* A locked row whose field the admin rejected. */
.ww-locked-fields > div.has-note {
    padding: .75rem;
    margin: 0 -.25rem;
    border-radius: var(--ww-radius, 12px);
    background: #FEF7F7;
}

/* A locked field inside an otherwise editable form. Rendered as text with a
   padlock rather than a disabled input, so it is unmistakably not editable
   and carries no name attribute to submit. */
.ww-input-locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--ww-cream);
    color: var(--ww-ink-2);
    cursor: not-allowed;
}

.ww-input-locked i {
    color: var(--ww-ink-3);
    font-size: .8rem;
}

/* Account-review notice on the discovery screen. */
.ww-review-notice {
    border: 0;
    border-radius: var(--ww-radius-card);
    padding: .5rem;
}

.ww-review-icon {
    font-size: 3.5rem;
    color: var(--ww-ink-2);
    margin: 1rem 0 1.25rem;
}

/* No underlines anywhere in the web app.
   Bootstrap underlines links by default, which meant every link needed its
   own text-decoration-none. A single rule covers the whole app, including
   links added later — and :hover, which Bootstrap re-underlines separately.
   This stylesheet is only loaded on web-app pages, so the dashboard keeps
   its own link styling. */
a,
a:hover,
a:focus,
.ww-btn,
.ww-btn:hover,
.ww-chip,
.ww-menu-item,
.ww-tab,
button {
    text-decoration: none;
}

/* Icons must never inherit an underline from a link that wraps them. */
a i,
button i,
.fa,
.fas,
.far,
.fab {
    text-decoration: none;
}

/* Reactivation prompt for a self-suspended account. */
.ww-reactivate-modal {
    border: 0;
    border-radius: var(--ww-radius-card);
    padding: .5rem;
}

.ww-reactivate-logo {
    margin: .5rem 0 1rem;
}

/* Green, as in the app: reactivating is a restorative action, visually
   distinct from the gold used for ordinary primary buttons. */
.ww-reactivate-title {
    color: #1E9E63;
}

.ww-btn-confirm {
    background: #1E9E63;
    color: #fff;
}

.ww-btn-confirm:hover {
    background: #17804F;
    color: #fff;
}

/* طلب بيانات ولي الأمر — withheld state. The panel is blurred rather than
   hidden so a member can see the data exists without reading it. */
.ww-guardian-locked {
    position: relative;
    border-radius: var(--ww-radius, 12px);
    background: var(--ww-cream);
    padding: 1.5rem 1rem;
    overflow: hidden;
}

.ww-guardian-blur {
    display: grid;
    gap: .75rem;
    filter: blur(5px);
}

.ww-guardian-blur span {
    display: block;
    height: .7rem;
    border-radius: 999px;
    background: var(--ww-ink-3);
    opacity: .45;
}

.ww-guardian-blur span:nth-child(1) { width: 60%; }
.ww-guardian-blur span:nth-child(2) { width: 45%; }
.ww-guardian-blur span:nth-child(3) { width: 70%; }

.ww-guardian-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ww-guardian-btn {
    background: #fff;
    color: var(--ww-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    gap: .5rem;
}

.ww-guardian-modal {
    border: 0;
    border-radius: var(--ww-radius-card);
    padding: .5rem;
}

.ww-guardian-ring {
    display: block;
    color: var(--ww-ink);
    margin: 1rem 0 1.25rem;
}

/* Stated in red in the app: the fee is not refunded. */
.ww-guardian-warning {
    color: #E5484D;
}

/* Free-text profile sections (عن نفسي / عن الشريك).
   These are author-written paragraphs, often mixing Arabic and English in one
   block. Three things matter:
   - pre-line keeps the author's own line breaks and blank lines, which the
     default collapsing turned into one run-on wall of text;
   - overflow-wrap breaks a long unbroken token instead of widening the card;
   - the text is NOT forced to the page direction. A paragraph written in
     English inside an RTL page reads correctly only when the browser picks
     the direction from the content itself. */
.ww-prose-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
    line-height: 1.9;
    unicode-bidi: plaintext;
    text-align: start;
}

/* أدع صديق واكسب نقاط */
.ww-invite-icon {
    font-size: 2.75rem;
    color: var(--ww-gold);
    margin-bottom: .75rem;
}

.ww-invite-code {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-align: center;
    padding: .85rem;
    border-radius: var(--ww-radius, 12px);
    border: 1px dashed var(--ww-gold);
    background: var(--ww-cream);
    user-select: all;
}

/* المحادثات — conversation list. */
.ww-empty-icon {
    font-size: 2.5rem;
    color: var(--ww-ink-3);
    display: block;
    margin-bottom: .75rem;
}

.ww-conv-status {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    white-space: nowrap;
    background: var(--ww-cream);
    color: var(--ww-ink-2);
}

/* Accepted is the live state, so it is the one that stands out. */
.ww-conv-status-4 {
    background: #E8F5EE;
    color: #1E7A4C;
}

/* Rejected and cancelled read as closed rather than active. */
.ww-conv-status-5,
.ww-conv-status-7 {
    background: #FDECEE;
    color: #9B2C31;
}

/* Chat thread. */
/* The thread fills the screen between the header and the tab bar, with the
   message list taking the slack, so the composer sits directly above the tab
   bar rather than floating in the middle of a short page.

   A fixed max-height on the list left everything below it as dead space on a
   tall screen. Sizing the PAGE instead and letting the list flex means the
   composer lands in the same place whatever the message count. */
.ww-chat-page {
    display: flex;
    flex-direction: column;
    /* 100dvh, not 100vh: on mobile browsers vh includes the retractable
       address bar, which would push the composer under the tab bar. */
    min-height: calc(100dvh - var(--ww-tabbar-h));
}

.ww-chat {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* The composer is the last thing on the page, hard against the tab bar. */
.ww-chat-page .ww-chat-form,
.ww-chat-page > .text-muted:last-child {
    margin-top: auto;
    padding-bottom: 0;
    /* The body reserves --ww-tabbar-h for the fixed bar, but the bar measures
       about 3.8rem — icon, one-line label and padding — so the reservation
       leaves slack under the composer. Pulled back by the difference here
       rather than changing the variable, which every other screen relies on. */
    margin-bottom: -0.4rem;
}

@supports not (height: 100dvh) {
    .ww-chat-page {
        min-height: calc(100vh - var(--ww-tabbar-h));
    }
}

/* On desktop the tab bar is hidden, so no space is reserved for it. */
@media (min-width: 768px) {
    .ww-chat-page {
        min-height: calc(100dvh - 2rem);
    }
}

.ww-msg {
    display: flex;
    justify-content: flex-start;
}

.ww-msg.is-mine {
    justify-content: flex-end;
}

.ww-msg-bubble {
    max-width: 78%;
    padding: .55rem .8rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid var(--ww-line);
}

.ww-msg.is-mine .ww-msg-bubble {
    background: var(--ww-gold);
    border-color: var(--ww-gold);
    color: #fff;
}

/* Messages mix Arabic and English, so each takes its direction from its own
   content rather than from the page. */
.ww-msg-text {
    unicode-bidi: plaintext;
    text-align: start;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.ww-msg-photo {
    display: block;
    max-width: 100%;
    border-radius: .75rem;
    margin-bottom: .35rem;
}

.ww-msg-time {
    font-size: .7rem;
    opacity: .65;
    margin-top: .15rem;
    text-align: end;
}

.ww-chat-form {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .75rem;
}

/* min-width:0 lets the input shrink inside the flex row. Without it its
   default minimum keeps it at its content width, which overflows the row and
   pushes the send button onto a line of its own. */
.ww-chat-form .ww-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* flex: 0 0 auto keeps it at its natural width — it must never be squeezed
   away or pushed onto its own row by a long message. */
.ww-chat-send {
    flex: 0 0 auto;
    padding: .7rem 1.1rem;
}

/* Chat conduct notices. */
.ww-notice-modal {
    border: 0;
    border-radius: var(--ww-radius-card);
    padding: .5rem;
}

.ww-notice-icon {
    font-size: 2.5rem;
    color: var(--ww-ink);
    margin: 1rem 0 1.25rem;
}

/* The notices carry their own line breaks and mix Arabic with quoted
   English, so each paragraph takes direction from its own content. */
.ww-notice-body {
    white-space: pre-line;
    unicode-bidi: plaintext;
    text-align: center;
    line-height: 1.9;
    color: var(--ww-ink-2);
}

.ww-notice-warning {
    unicode-bidi: plaintext;
    line-height: 1.8;
    font-weight: 600;
}

/* الأسئلة الشائعة — suggested questions, as a bottom sheet. */
.ww-chat-questions {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--ww-ink);
    color: #fff;
    font-size: .95rem;
}

.ww-chat-questions:hover {
    background: var(--ww-ink-2);
}

/* Anchored to the bottom, as in the app, rather than centred. */
.ww-sheet-dialog {
    align-items: flex-end;
    min-height: 100%;
    margin: 0 auto;
}

.ww-sheet {
    border: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    max-height: 75vh;
}

.ww-question-list {
    display: grid;
    gap: .25rem;
}

.ww-question {
    display: block;
    width: 100%;
    text-align: start;
    padding: .85rem .25rem;
    border: 0;
    border-bottom: 1px solid var(--ww-line);
    background: none;
    color: var(--ww-ink);
    font-size: .95rem;
    line-height: 1.7;
    /* The questions may be Arabic or English; each takes its own direction. */
    unicode-bidi: plaintext;
}

.ww-question:last-child {
    border-bottom: 0;
}

.ww-question:hover {
    color: var(--ww-gold);
}

/* Digits are not allowed in chat; the warning sits under the input. */
.ww-chat-warning {
    flex: 1 0 100%;
    margin-top: .4rem;
    font-size: .8rem;
    color: #E5484D;
}

/* The warning takes a row of its own, but the input and the send button must
   NOT wrap apart — a blanket flex-wrap on the form dropped the button below
   the input whenever the row ran short of space. */
.ww-chat-form {
    flex-wrap: wrap;
}

.ww-chat-form > .ww-input,
.ww-chat-form > .ww-chat-send,
.ww-chat-form > .ww-chat-questions {
    /* Everything except the warning stays on the first row. */
    flex-basis: auto;
}

.ww-chat-warning {
    order: 99;
}

.ww-chat-send:disabled {
    opacity: .5;
}

/* Attach a photo. Styled as a round control like the others rather than a
   browser file picker, which the hidden input drives. */
.ww-chat-attach {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ww-cream);
    border: 1px solid var(--ww-line);
    color: var(--ww-ink-2);
    cursor: pointer;
    margin: 0;
}

.ww-chat-attach:hover {
    color: var(--ww-gold);
    border-color: var(--ww-gold);
}

/* The chosen file, on its own row under the composer. */
.ww-chat-attached {
    flex: 1 0 100%;
    order: 98;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--ww-ink-2);
}

.ww-chat-attached span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ww-chat-attached button {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--ww-ink-3);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .25rem;
}

/* Photo messages: the bubble is the image, so it needs no text padding. */
.ww-msg-bubble:has(.ww-msg-photo:only-child) {
    padding: .25rem;
}

/* Payment result. */
.ww-payment-icon {
    font-size: 3.25rem;
    margin: 1rem 0 1.25rem;
}

.ww-payment-icon.is-paid { color: #1E9E63; }
.ww-payment-icon.is-failed { color: #E5484D; }

/* Guardian step: the phone is entered without its country code, which is
   shown beside the field rather than submitted with it. */
.ww-phone-group {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ww-phone-prefix {
    flex: 0 0 auto;
    padding: .7rem .85rem;
    border-radius: var(--ww-radius, 12px);
    background: var(--ww-cream);
    border: 1px solid var(--ww-line);
    font-size: .9rem;
    color: var(--ww-ink-2);
}

.ww-phone-group .ww-input {
    flex: 1 1 auto;
    min-width: 0;
}

.ww-guardian-note {
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

/* Identity undertakings: a checkbox and its wrapping text. */
.ww-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .85rem;
    font-size: .875rem;
    line-height: 1.7;
    color: var(--ww-ink-2);
}

.ww-check input {
    flex: 0 0 auto;
    margin-top: .35rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--ww-gold);
}

/* Email verification. */
.ww-verify-icon {
    font-size: 2.75rem;
    color: var(--ww-gold);
    margin-bottom: .75rem;
}

/* A member with an accepted proposal: shown, but nothing can be done with
   them, so the row reads as inactive rather than merely unresponsive. */
.ww-row-engaged {
    opacity: .72;
}

.ww-row-engaged .ww-avatar,
.ww-engaged-avatar img {
    filter: grayscale(1);
}

.ww-engaged-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--ww-gold-dark);
}

/* The locked marker replaces the action row, at the same size so the layout
   does not shift between an open row and a locked one. */
.ww-row-actions-locked {
    cursor: not-allowed;
}

.ww-action.is-locked {
    color: var(--ww-ink-3);
    opacity: .8;
    cursor: not-allowed;
}

/* ====================================================================== */
/* Discovery member card                                                  */
/* ====================================================================== */

/* The card is a column: identity on top, actions on their own row beneath.
   Previously the actions shared the row with the name and competed with it
   for width, which is what forced the name to truncate. */
.ww-member-card {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem 1.1rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ww-member-card:hover,
.ww-member-card:focus-within {
    border-color: var(--ww-champagne);
    box-shadow: 0 6px 18px rgba(27, 27, 27, .07);
}

/* The cards are stacked directly in the page with no grid wrapper, so the
   gap between them belongs to the card itself. This replaces the `mb-2`
   utility the old markup carried. */
.ww-member-card {
    margin-bottom: .75rem;
}

/* Should the list ever move into the .ww-list grid, equal heights keep the
   action rows aligned across a row regardless of how much meta each has. */
.ww-list > .ww-member-card {
    height: 100%;
    margin-bottom: 0;
}

.ww-member-card .ww-row {
    align-items: flex-start;
}

/* The name is the one thing that must stay readable in full, so it wraps to
   a second line instead of truncating. Capped at two lines so a pathological
   nickname cannot push the card to an absurd height.

   This overrides the blanket `.ww-row-text > *` nowrap/ellipsis rule, which
   is what clipped the name before. */
.ww-member-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--ww-ink);
    text-decoration: none;
    word-break: break-word;
}

a.ww-member-name:hover,
a.ww-member-name:focus-visible {
    color: var(--ww-gold-dark);
}

/* Age / nationality / place. Wraps freely — these are short chips and a
   narrow card should stack them rather than cut them off. */
.ww-member-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    margin-top: .4rem;
    /* Beats `.ww-row-text > *`, which would force one clipped line. */
    overflow: visible;
    white-space: normal;
}

.ww-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--ww-ink-2);
    white-space: nowrap;
}

.ww-meta-item i {
    color: var(--ww-gold);
    font-size: .78rem;
    /* A fixed box keeps the three icons optically aligned despite differing
       glyph widths. */
    width: .9rem;
    text-align: center;
}

/* Emoji flags render in the system colour font, so no colour is set here. */
.ww-flag {
    line-height: 1;
}

/* Actions get the full card width now that they are on their own row. The
   top rule separates them from the identity block. */
.ww-member-card .ww-row-actions {
    margin-inline-start: 0;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ww-line);
}

/* Each action shares the row equally, giving comfortably large tap targets
   instead of four small circles bunched at one end. */
.ww-member-card .ww-row-actions > * {
    flex: 1 1 0;
}

.ww-member-card .ww-action {
    width: 100%;
    height: 2.6rem;
    border-radius: var(--ww-radius-pill);
}

.ww-member-card .ww-action:disabled {
    color: var(--ww-ink-3);
    opacity: .55;
}

/* The locked row holds a single marker, which should not stretch across the
   whole card the way four actions do. */
.ww-member-card .ww-row-actions-locked {
    justify-content: center;
}

.ww-member-card .ww-row-actions-locked > * {
    flex: 0 0 auto;
}

.ww-member-card .ww-action.is-locked {
    width: 2.6rem;
}

/* The narrow-phone step-down from the old layout shrank these buttons. Here
   they are full-width pills, so only the gap needs tightening. */
@media (max-width: 400px) {
    .ww-member-card { padding: .9rem; }
    .ww-member-card .ww-action { height: 2.45rem; font-size: .9rem; }
}

/* ====================================================================== */
/* Notifications — bell, badge, and the list                              */
/* ====================================================================== */

.ww-bell {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: var(--ww-ink-2);
    text-decoration: none;
    flex-shrink: 0;
}

.ww-bell:hover,
.ww-bell:focus-visible {
    background: var(--ww-soft);
    color: var(--ww-gold-dark);
}

/* The count sits on the bell's upper-outer corner. `inset-inline-end`
   rather than `right`, so it flips with the RTL layout. */
.ww-bell-badge {
    position: absolute;
    top: -.1rem;
    inset-inline-end: -.1rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .28rem;
    border-radius: var(--ww-radius-pill);
    background: var(--ww-like);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    /* Keeps the badge legible where it overlaps the icon. */
    box-shadow: 0 0 0 2px var(--ww-surface);
}

/* Phone-only header, carrying the bell the tab bar has no room for. */
.ww-mobile-header {
    gap: .75rem;
    padding: .6rem 1rem;
    background: var(--ww-surface);
    border-bottom: 1px solid var(--ww-line);
}

/* Each row is a submit button, so the button chrome has to be undone before
   it can look like a card. */
.ww-notification {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .6rem;
    padding: .9rem 1rem;
    background: var(--ww-surface);
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ww-notification:hover,
.ww-notification:focus-visible {
    border-color: var(--ww-champagne);
    background: var(--ww-soft);
}

/* Unread rows are tinted and carry a dot; read rows show neither, so the
   difference survives without relying on colour alone. */
.ww-notification.is-unread {
    background: var(--ww-cream);
    border-color: var(--ww-champagne);
}

.ww-notification-dot {
    width: .5rem;
    height: .5rem;
    margin-top: .45rem;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
}

.ww-notification.is-unread .ww-notification-dot {
    background: var(--ww-gold);
}

.ww-notification-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ww-notification-title {
    font-weight: 700;
    line-height: 1.4;
    color: var(--ww-ink);
    /* Titles carry emoji and can run long; wrapping beats truncation here
       because the title is the whole message on most notifications. */
    word-break: break-word;
}

.ww-notification-body {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ww-ink-2);
    white-space: pre-line;
    word-break: break-word;
}

.ww-notification-time {
    margin-top: .1rem;
    font-size: .75rem;
    color: var(--ww-ink-3);
}

/* ====================================================================== */
/* Account status — why an action is refused and what to do about it      */
/* ====================================================================== */

.ww-status {
    text-align: center;
}

.ww-status-icon {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--ww-soft);
    color: var(--ww-gold);
    font-size: 1.8rem;
}

.ww-status-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ww-ink);
    margin-bottom: .6rem;
}

/* The reason the rule applies, which is the part that was missing: it reads
   as explanation, so it is set slightly larger than the instruction. */
.ww-status-why {
    max-width: 30rem;
    margin: 0 auto .5rem;
    font-size: .95rem;
    line-height: 1.9;
    color: var(--ww-ink-2);
}

.ww-status-next {
    max-width: 30rem;
    margin: 0 auto 1.25rem;
    font-size: .9rem;
    line-height: 1.85;
    color: var(--ww-ink-3);
}

/* The sequence, so progress is visible rather than being met one refusal at
   a time. */
.ww-status-steps {
    max-width: 22rem;
    margin: 0 auto 1.5rem;
    padding: 0;
    list-style: none;
    text-align: start;
}

.ww-status-steps li {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: var(--ww-radius-pill);
    font-size: .9rem;
    color: var(--ww-ink-3);
}

.ww-status-steps li.is-current {
    background: var(--ww-cream);
    color: var(--ww-ink);
    font-weight: 700;
}

.ww-status-steps li.is-done {
    color: var(--ww-ink-3);
}

/* The number, or a tick once the step is behind them. */
.ww-status-step-mark {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--ww-line);
    background: var(--ww-surface);
    font-size: .78rem;
    font-weight: 700;
}

.ww-status-steps li.is-current .ww-status-step-mark {
    border-color: var(--ww-gold);
    background: var(--ww-gold);
    color: #fff;
}

.ww-status-steps li.is-done .ww-status-step-mark {
    border-color: var(--ww-success);
    color: var(--ww-success);
}

.ww-status-action {
    min-width: 12rem;
}

/* Shown only while waiting on the admin, where there is nothing to press. */
.ww-status-hint {
    max-width: 26rem;
    margin: 1rem auto 0;
    font-size: .82rem;
    line-height: 1.8;
    color: var(--ww-ink-3);
}

/* ====================================================================== */
/* Identity document — preview and settled acknowledgements               */
/* ====================================================================== */

/* The document the client actually sent, so they can check it rather than
   trusting a line of text that says it arrived. */
.ww-identity-preview {
    margin: 0 0 1rem;
    padding: .5rem;
    border: 1px solid var(--ww-line);
    border-radius: var(--ww-radius-card);
    background: var(--ww-soft);
}

.ww-identity-preview img {
    display: block;
    width: 100%;
    max-height: 22rem;
    /* contain, not cover: an identity document cropped to fill the box could
       hide the very details the client is being asked to check. */
    object-fit: contain;
    border-radius: calc(var(--ww-radius-card) - 6px);
    background: var(--ww-surface);
}

.ww-identity-preview figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding-top: .6rem;
    font-size: .85rem;
    color: var(--ww-success);
}

/* An acknowledgement already given: ticked, disabled, and dimmed so it reads
   as settled rather than as a control the client failed to use. */
.ww-check-done {
    color: var(--ww-ink-3);
}

.ww-check-done input:disabled {
    /* The browser's own disabled styling makes a checked box look empty at a
       glance; restoring full opacity keeps the tick legible. */
    opacity: 1;
    cursor: default;
}