/* ================================================================
   DESIGN IMPROVEMENTS — All public pages
   ================================================================
   Compact cards, better alignment, tighter spacing,
   footer polish, sidebar refinements.
   Dashboard (/myaccount) uses account-dashboard-* classes
   from frontend-polish.css.
   ================================================================ */

/* ---- PAGE-WIDE OVERFLOW FIX ---- */
.is-public-viewport .account-page-grid { max-width: 100%; overflow: hidden; }
.is-public-viewport .account-page-main { min-width: 0; overflow: hidden; overflow-wrap: break-word; }
.is-public-viewport .account-page-main h1,
.is-public-viewport .account-page-main h2 { overflow-wrap: break-word; word-break: break-word; }

/* ---- DIRECTORY HEAD & SEARCH — Compact ---- */
.is-public-viewport .account-directory-head { padding: 14px 18px; border-radius: 16px; }
.is-public-viewport .account-directory-head h1 { font-size: 1.15rem; margin: 0; }
.is-public-viewport .account-directory-head p { font-size: 0.82rem; margin: 2px 0 0; }
.is-public-viewport .account-search-box { padding: 14px 18px; border-radius: 16px; }
.is-public-viewport .account-search-grid { gap: 8px; }
.is-public-viewport .account-search-grid label { font-size: 0.82rem; }
.is-public-viewport .account-search-grid select,
.is-public-viewport .account-search-grid input { padding: 8px 10px; font-size: 0.88rem; border-radius: 8px; }

/* ---- NOTIFICATION CARDS — Compact ---- */
.is-public-viewport .notifications-stack { display: grid; gap: 6px; }
.is-public-viewport .notification-card { padding: 10px 14px !important; gap: 10px !important; border-radius: 10px !important; }
.is-public-viewport .notification-card-icon { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; border-radius: 8px !important; }
.is-public-viewport .notification-card h2 { font-size: 0.85rem !important; margin: 0; }
.is-public-viewport .notification-card p { font-size: 0.78rem !important; margin: 2px 0 0; }
.is-public-viewport .notification-card-meta { display: flex; align-items: center; gap: 8px; }
.is-public-viewport .notification-status-chip { font-size: 0.7rem !important; padding: 2px 6px !important; }
.is-public-viewport .notification-time { font-size: 0.7rem !important; }
.is-public-viewport .notification-card-actions { margin-top: 4px; gap: 4px; }
.is-public-viewport .notification-card-actions .btn { font-size: 0.72rem !important; padding: 3px 8px !important; min-height: 26px !important; }

/* Notifications header */
.is-public-viewport .notifications-head { flex-wrap: wrap; gap: 10px; }
.is-public-viewport .notifications-head h1 { font-size: 1.2rem; margin: 0; }
.is-public-viewport .notifications-head .eyebrow { font-size: 0.76rem; }
.is-public-viewport .notifications-head p { font-size: 0.82rem; margin: 2px 0 0; }
.is-public-viewport .notifications-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.is-public-viewport .notifications-total-pill { font-size: 0.82rem; padding: 4px 10px; }
.is-public-viewport .notifications-bulk-btn { font-size: 0.78rem !important; padding: 4px 10px !important; min-height: 30px !important; }
.is-public-viewport .notifications-page-shell { align-items: start; }

/* ---- INBOX / CHAT — Compact rows ---- */
.is-public-viewport .account-match-row { padding: 10px 14px; gap: 12px; border-radius: 10px; }
.is-public-viewport .account-match-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.is-public-viewport .chat-row-content { min-width: 0; gap: 4px; }
.is-public-viewport .chat-row-top { gap: 6px; }
.is-public-viewport .chat-row-top strong { font-size: 0.88rem; }
.is-public-viewport .chat-row-content p { font-size: 0.82rem; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-public-viewport .chat-row-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.is-public-viewport .chat-row-footer small { font-size: 0.72rem; }
.is-public-viewport .chat-actions-inline { display: flex; gap: 6px; }
.is-public-viewport .chat-actions-inline .btn { font-size: 0.76rem; padding: 4px 10px; min-height: 28px; }
.is-public-viewport .account-feed-list { gap: 6px; }

/* ---- MEMBER CARDS GRID — Better density ---- */
.is-public-viewport .dashboard-members-grid,
.is-public-viewport .directory-members-grid { gap: 12px; }
.is-public-viewport .directory-member-card { border-radius: 14px; padding: 14px; }

/* ---- SIDEBAR — Refined & compact ---- */
.is-public-viewport .account-user-banner { min-height: 72px; }
.is-public-viewport .account-user-body { margin-top: -32px; padding: 0 14px 12px; }
.is-public-viewport .account-user-avatar-shell { width: 64px; height: 64px; padding: 3px; }
.is-public-viewport .account-user-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.is-public-viewport .account-user-intro { gap: 1px; }
.is-public-viewport .account-user-kicker { font-size: 0.65rem; letter-spacing: 0.04em; }
.is-public-viewport .account-user-intro strong { font-size: 0.92rem; }
.is-public-viewport .account-user-intro p { font-size: 0.74rem; }
.is-public-viewport .account-sidebar-badges { gap: 4px; margin-top: 6px; }
.is-public-viewport .badge-inline,
.is-public-viewport .ghost-badge { font-size: 0.68rem; padding: 2px 8px; }

/* Sidebar links — cleaner active state, tighter */
.is-public-viewport .account-side-links { gap: 0; }
.is-public-viewport .account-side-link {
    padding: 7px 14px;
    font-size: 0.82rem;
    border-radius: 0;
    transition: background-color .12s ease, color .12s ease, padding-inline .12s ease;
}
.is-public-viewport .account-side-link:hover {
    background: rgba(var(--primary-rgb), 0.04);
}
.is-public-viewport .account-side-link[aria-current="page"] {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-weight: 700;
    border-inline-start: 3px solid var(--primary);
    padding-inline-start: 11px;
}
.is-public-viewport .account-side-link .menu-icon { font-size: 0.9rem; width: 20px; text-align: center; }
.is-public-viewport .account-side-link-badge {
    font-size: 0.65rem;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
}

/* Sidebar stats — more compact */
.is-public-viewport .account-side-stats { gap: 0; }
.is-public-viewport .account-side-stat { padding: 10px 8px; }
.is-public-viewport .account-side-stat strong { font-size: 1rem; }
.is-public-viewport .account-side-stat span { font-size: 0.68rem; }

/* Sidebar account status note — minimal */
.is-public-viewport .account-side-note { padding: 10px 14px; }
.is-public-viewport .account-side-note h4 { font-size: 0.78rem; margin: 0 0 4px; }
.is-public-viewport .account-side-note p { font-size: 0.72rem; margin: 1px 0; }

/* ---- PAGINATION — Compact ---- */
.is-public-viewport .pagination-shell { margin-top: 10px; }

/* ---- FOOTER — Lighter, modern ---- */
.is-public-viewport .footer-shell,
.is-public-viewport .footer-cms-shell {
    background: var(--surface-strong, #fff);
    border-top: 1px solid var(--border);
    padding-block: 28px 16px;
    color: var(--text-soft);
    font-size: 0.85rem;
}
.is-public-viewport .footer-cms-inner {
    max-width: 1100px;
    margin-inline: auto;
}
.is-public-viewport .footer-cms-grid {
    gap: 24px;
    padding-block-end: 20px;
}
.is-public-viewport .footer-cms-section__title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-block-end: 10px;
}
.is-public-viewport .footer-cms-description {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-soft);
    margin-block-end: 12px;
    max-width: 52ch;
}
.is-public-viewport .footer-cms-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.is-public-viewport .footer-cms-link {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.84rem;
    transition: color .12s ease;
    padding: 2px 0;
}
.is-public-viewport .footer-cms-link:hover {
    color: var(--primary);
}
.is-public-viewport .footer-cms-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-block-start: 16px;
    border-top: 1px solid var(--border);
    margin-block-start: 8px;
}
.is-public-viewport .footer-cms-copy {
    font-size: 0.78rem;
    color: var(--text-faint);
}
.is-public-viewport .footer-cms-locale {
    font-size: 0.72rem;
    color: var(--text-faint);
    padding: 3px 8px;
    background: var(--bg-soft);
    border-radius: 6px;
    font-weight: 700;
}

/* ---- DASHBOARD HERO — additional tweaks ---- */
.account-home-dashboard .account-dashboard-hero {
    margin-block-end: 14px;
}
.account-home-dashboard .account-dashboard-hero h1 {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
}

/* ---- DASHBOARD GRID — tighter gaps ---- */
.account-home-dashboard .account-dashboard-grid {
    gap: 12px;
    margin-block-end: 12px;
}
.account-home-dashboard .account-dashboard-grid-main {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
.account-home-dashboard .account-dashboard-grid-secondary {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---- PROFILE VISIT CARDS — Compact ---- */
.profile-visit-card {
    padding: 10px 14px !important;
    gap: 10px !important;
}
.profile-visit-card__identity img {
    width: 40px !important;
    height: 40px !important;
}
.profile-visit-card__meta strong { font-size: 0.85rem; }
.profile-visit-card__meta span { font-size: 0.78rem; }
.profile-visit-card__actions { gap: 6px; flex-wrap: wrap; }
.profile-visit-card__actions .btn { font-size: 0.78rem; padding: 4px 10px; }

/* ---- SEARCH BOX INSIDE DASHBOARD — Always visible, clean grid ---- */
.account-dashboard-search-panel {
    margin-block-end: 12px;
}
.account-search-grid--dashboard {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-items: end;
}
.account-search-submit--dashboard {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-top: 1px solid var(--border);
}
.account-search-submit--dashboard .btn-primary {
    order: -1;
}

/* Placeholder styling for number inputs */
.is-public-viewport input[type="number"]::placeholder {
    color: var(--text-faint);
    opacity: 1;
    direction: ltr;
    text-align: start;
}
html[dir="rtl"] .is-public-viewport input[type="number"]::placeholder {
    text-align: right;
}

/* Responsive: 5→2→1 columns */
@media (max-width: 900px) {
    .account-search-grid--dashboard {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    .account-search-grid--dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    .account-search-submit--dashboard {
        flex-direction: column;
    }
    .account-search-submit--dashboard .btn {
        width: 100%;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .account-search-grid--dashboard {
        grid-template-columns: 1fr;
    }
}

/* ---- MOBILE RESPONSIVE ---- */
@media (max-width: 1024px) {
    .is-public-viewport .account-page-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 900px) {
    .account-home-dashboard .account-dashboard-grid-main {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .is-public-viewport .account-user-banner { min-height: 56px; }
    .is-public-viewport .account-user-avatar-shell { width: 56px; height: 56px; }
    .is-public-viewport .account-user-body { margin-top: -28px; padding: 0 12px 10px; }
    .is-public-viewport .notification-card { padding: 10px 12px !important; }
    .is-public-viewport .account-match-row { padding: 10px 12px; }
    .is-public-viewport .account-search-grid:not(.account-search-grid--dashboard) { grid-template-columns: 1fr !important; }

    /* Footer on mobile */
    .is-public-viewport .footer-cms-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .is-public-viewport .footer-cms-section--brand {
        grid-column: span 2;
    }
    .is-public-viewport .footer-shell,
    .is-public-viewport .footer-cms-shell {
        padding-block: 20px 12px;
    }
}
@media (max-width: 480px) {
    .is-public-viewport .notifications-head-actions { width: 100%; justify-content: flex-start; }
    .is-public-viewport .footer-cms-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .is-public-viewport .footer-cms-section--brand {
        grid-column: span 1;
    }
    .is-public-viewport .footer-cms-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
}

/* ---- NUMBER INPUTS — Fix invisible values in RTL ---- */
/* Ensure numeric values are always visible regardless of direction.
   Numbers are LTR by nature; the field keeps RTL label alignment
   but renders the value left-to-right so digits don't get clipped
   by the browser spinner or reversed by RTL. */
.is-public-viewport input[type="number"] {
    direction: ltr;
    text-align: start;
    color: var(--text);
    -moz-appearance: textfield;
}
/* Hide spinners for cleaner look — users can still type */
.is-public-viewport input[type="number"]::-webkit-inner-spin-button,
.is-public-viewport input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* RTL: keep the input value LTR but align label normally */
html[dir="rtl"] .is-public-viewport input[type="number"] {
    text-align: right;
}
/* Search grid age fields — ensure enough width */
.is-public-viewport .account-search-grid input[type="number"] {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 0.92rem;
    box-sizing: border-box;
}
/* Dashboard collapsible search age fields */
.account-dashboard-search-panel input[type="number"] {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
}

/* ---- RTL ---- */
[dir="rtl"] .is-public-viewport .notification-card-main { text-align: right; }
[dir="rtl"] .is-public-viewport .chat-row-footer { flex-direction: row-reverse; }
[dir="rtl"] .is-public-viewport .footer-cms-bottom { flex-direction: row-reverse; }

/* ================================================================
   AUTH PAGES — Contrast / visibility fix
   ================================================================
   Certain old template residues or a stale app.min.css can inherit
   white text from .auth-copy (the dark left panel) into the form area.
   These explicit rules guarantee readability on all auth pages
   (login, register, password reset, email verification) regardless
   of which CSS bundle is active or which template is selected.

   Selector weight is kept deliberately high (no :where()) so these
   win over any low-specificity rule from the base CSS.
   The arabesque template layer still overrides correctly because it
   loads AFTER this file.
   ================================================================ */

/* — Right-hand form wrapper — */
.auth-form-wrap {
    color: var(--text, #17322b);
}

/* — The card inside the form wrapper — */
.auth-form-wrap .form-card {
    color: var(--text, #17322b);
    background: rgba(var(--surface-rgb, 255,255,255), 0.97);
}

/* — Headings — */
.auth-form-wrap .form-card h1,
.auth-form-wrap .form-card h2,
.auth-form-wrap .form-card h3 {
    color: var(--text, #17322b) !important;
}

/* — Body copy & intro paragraph — */
.auth-form-wrap .form-card p,
.auth-form-wrap .form-card li,
.auth-form-wrap .form-card small,
.auth-form-wrap .form-card .auth-foot {
    color: var(--text-soft, #607068) !important;
}

/* — Labels (including the checkbox "remember me" row) — */
.auth-form-wrap .form-card label,
.auth-form-wrap .form-card .check-row {
    color: var(--text, #17322b) !important;
}

/* — Text inputs and select — */
.auth-form-wrap .form-card input[type="text"],
.auth-form-wrap .form-card input[type="email"],
.auth-form-wrap .form-card input[type="password"],
.auth-form-wrap .form-card input[type="tel"],
.auth-form-wrap .form-card input[type="number"],
.auth-form-wrap .form-card select,
.auth-form-wrap .form-card textarea {
    color: var(--text, #17322b) !important;
    background: var(--surface-strong, #fff) !important;
    border-color: var(--border, #d0d9d3);
}

/* — Placeholder text — */
.auth-form-wrap .form-card input::placeholder,
.auth-form-wrap .form-card textarea::placeholder {
    color: var(--text-faint, #a0b0a8) !important;
    opacity: 1;
}

/* — Password toggle button (the "Show/Hide" inline button) — */
.auth-form-wrap .form-card .password-toggle {
    color: var(--text-soft, #607068) !important;
    background: transparent;
}

/* — Links inside the form (forgot password, create account) — */
.auth-form-wrap .form-card a,
.auth-form-wrap .form-card .stack-link {
    color: var(--primary, #2e7d5e) !important;
}
.auth-form-wrap .form-card a:hover,
.auth-form-wrap .form-card .stack-link:hover {
    opacity: 0.82;
}

/* — Social login secondary buttons — */
.auth-form-wrap .form-card .btn-secondary {
    color: var(--text, #17322b) !important;
}

/* — Inline notice card (verification required, etc.) — */
.auth-form-wrap .form-card .stack-card {
    color: var(--text, #17322b) !important;
    background: var(--surface-strong, #f9f9f7);
}
.auth-form-wrap .form-card .stack-card strong {
    color: var(--text, #17322b) !important;
}
.auth-form-wrap .form-card .stack-card p {
    color: var(--text-soft, #607068) !important;
}

/* — Form alerts (success / danger) keep their own colours — */
.auth-form-wrap .form-card .form-alert {
    /* let the original alert colours stand; only prevent white-on-white */
    color: inherit;
}

/* — Left panel (auth-copy) stays white-text — this is correct, just make explicit — */
.auth-copy,
.auth-copy h1,
.auth-copy h2,
.auth-copy p,
.auth-copy .eyebrow {
    color: #fff !important;
}

/* — Arabesque template overrides load after this file, so they win automatically — */