/* =====================================================================================
   OneNation UI — public module (auth forms, status screens, FAQs, contact, privacy, errors).
   Built only from the tokens in onenation.css. Logical properties everywhere (RTL).
   ===================================================================================== */

/* ---------- Auth form pieces -------------------------------------------------------- */
.on-auth-form .inner:has(.on-register) { max-width: 500px; }

/* input with a leading icon and an optional trailing button */
.on-input { position: relative; }
.on-input > [data-lucide], .on-input > svg.lucide {
    position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: .9rem;
    color: var(--on-muted); pointer-events: none;
}
.on-input > .form-control { padding-inline-start: 2.6rem; }
.on-input.has-toggle > .form-control { padding-inline-end: 2.9rem; }
.on-input .on-input-btn { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: .4rem; }
.on-input .on-input-btn:active { transform: translateY(-50%) scale(.97); }
.on-input:focus-within > [data-lucide], .on-input:focus-within > svg.lucide { color: var(--on-brand-strong); }

/* invalid state (no Bootstrap background icon — it collides with our trailing buttons) */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--on-red); background-image: none; padding-inline-end: .9rem; }
.on-input.has-toggle > .form-control.is-invalid { padding-inline-end: 2.9rem; }
.form-control.is-invalid:focus { border-color: var(--on-red); box-shadow: 0 0 0 4px var(--on-red-soft); }

/* field error (keeps the data-valmsg-for hook) */
.field-validation-error[data-valmsg-for] { display: flex; align-items: flex-start; gap: .4rem; font-weight: 500; }
.field-validation-error[data-valmsg-for] [data-lucide], .field-validation-error[data-valmsg-for] svg { width: 14px; height: 14px; margin-top: .2rem; }
.field-validation-valid[data-valmsg-for]:empty { display: none; }

/* validation summary */
.on-alert {
    display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--on-radius);
    font-size: .875rem; border: 1px solid transparent; margin-bottom: 1.25rem;
}
.on-alert ul { margin: 0; padding-inline-start: 1rem; }
.on-alert ul:has(> li:only-child) { list-style: none; padding: 0; }
.on-alert > [data-lucide], .on-alert > svg { margin-top: .1rem; }
.on-alert-error { background: var(--on-red-soft); color: var(--on-red); }
.on-alert-success { background: var(--on-green-soft); color: var(--on-green); }
.on-alert-info { background: var(--on-brand-soft); color: var(--on-brand-strong); }

/* numbered form sections */
.on-form-step { display: flex; align-items: center; gap: .6rem; margin: 1.75rem 0 1rem; }
.on-form-step:first-of-type { margin-top: 0; }
.on-form-step .num {
    width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--on-brand-soft); color: var(--on-brand-strong); font-size: .75rem; font-weight: 800;
}
.on-form-step h2 { font-size: .95rem; margin: 0; }
.on-form-step .hint { margin-inline-start: auto; font-size: .76rem; color: var(--on-muted); }

/* role cards — extends .on-role-card from onenation.css */
.on-role-card .box { align-items: flex-start; padding: 1rem .95rem; background: var(--on-surface); }
.on-role-card .box .on-icon-tile { width: 40px; height: 40px; border-radius: 12px; }
.on-role-card .box small { display: block; line-height: 1.4; margin-top: .15rem; }
.on-role-card:hover .box { border-color: var(--on-brand); }
.on-role-card .tick {
    position: absolute; top: .6rem; inset-inline-end: .6rem; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; background: var(--on-brand-strong); color: #fff;
    opacity: 0; transform: scale(.6); transition: all .2s var(--on-ease);
}
.on-role-card .tick [data-lucide], .on-role-card .tick svg { width: 12px; height: 12px; stroke-width: 3; }
.on-role-card input:checked ~ .tick { opacity: 1; transform: none; }
.on-role-card input:focus-visible + .box { box-shadow: var(--on-ring); }
[data-bs-theme="dark"] .on-role-card .tick { color: #04262b; }

/* language picker (radio = native language, checkbox = other languages) */
.on-lang-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.on-lang-opt { position: relative; cursor: pointer; margin: 0; }
.on-lang-opt input { position: absolute; opacity: 0; pointer-events: none; }
.on-lang-opt .opt {
    display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem .4rem .45rem; border-radius: 99px;
    border: 1.5px solid var(--on-border-strong); background: var(--on-surface); color: var(--on-ink);
    font-weight: 600; font-size: .85rem; transition: all .18s var(--on-ease); user-select: none;
}
html[dir="rtl"] .on-lang-opt .opt { padding: .4rem .45rem .4rem .75rem; }
.on-lang-opt .opt .on-lang { height: 22px; border-radius: 99px; }
.on-lang-opt .opt .chk { width: 0; opacity: 0; transition: all .18s var(--on-ease); color: var(--on-brand-strong); }
.on-lang-opt:hover .opt { border-color: var(--on-brand); }
.on-lang-opt input:checked + .opt { border-color: var(--on-brand); background: var(--on-brand-soft); color: var(--on-brand-strong); }
.on-lang-opt input:checked + .opt .on-lang { background: var(--on-brand-strong); color: #fff; border-color: transparent; }
[data-bs-theme="dark"] .on-lang-opt input:checked + .opt .on-lang { color: #04262b; }
.on-lang-opt input:checked + .opt .chk { width: 14px; opacity: 1; }
.on-lang-opt input:focus-visible + .opt { box-shadow: var(--on-ring); }
.on-lang-opt input:disabled + .opt { opacity: .45; cursor: not-allowed; border-style: dashed; }
.on-lang-opt.is-native .opt::after { content: attr(data-native); font-size: .68rem; font-weight: 700; color: var(--on-muted); }
.on-lang-opt[hidden] { display: none !important; }
.on-picker-box { border: 1px solid var(--on-border); background: var(--on-surface-2); border-radius: var(--on-radius); padding: .9rem; }
.on-picker-box.is-invalid { border-color: var(--on-red); background: var(--on-red-soft); }
.on-picker-search { position: relative; margin-bottom: .75rem; }
.on-picker-search input { height: 38px; padding-block: 0; padding-inline-start: 2.3rem; font-size: .85rem; }
.on-picker-search [data-lucide], .on-picker-search svg { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: .8rem; width: 15px; height: 15px; color: var(--on-muted); }
.on-picker-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; font-size: .76rem; color: var(--on-muted); }
.on-picker-meta .count { font-weight: 700; color: var(--on-brand-strong); }

/* translator-only block (collapses for writers) */
.on-reveal-block { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s var(--on-ease), opacity .3s; }
.on-reveal-block > div { min-height: 0; overflow: hidden; }
.on-reveal-block.is-collapsed { grid-template-rows: 0fr; opacity: 0; }
.on-writer-note { display: flex; gap: .6rem; align-items: center; font-size: .82rem; color: var(--on-muted); padding: .7rem .85rem; border-radius: var(--on-radius-sm); background: var(--on-surface-2); border: 1px dashed var(--on-border-strong); }

/* password strength */
.on-pw-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: .6rem; }
.on-pw-meter span { height: 4px; border-radius: 4px; background: var(--on-border); transition: background .25s; }
.on-pw-meter[data-score="1"] span:nth-child(-n+1),
.on-pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--on-red); }
.on-pw-meter[data-score="3"] span:nth-child(-n+3),
.on-pw-meter[data-score="4"] span:nth-child(-n+4) { background: var(--on-amber-fill); }
.on-pw-meter[data-score="5"] span { background: var(--on-green); }
.on-pw-rules { list-style: none; padding: 0; margin: .55rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; font-size: .76rem; color: var(--on-muted); }
.on-pw-rules li { display: flex; align-items: center; gap: .35rem; transition: color .2s; }
.on-pw-rules li::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--on-border-strong);
    background: var(--on-surface) center / 9px no-repeat; transition: all .2s;
}
.on-pw-rules li.ok { color: var(--on-green); }
.on-pw-rules li.ok::before {
    border-color: var(--on-green); background-color: var(--on-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.on-match { font-size: .76rem; margin-top: .4rem; display: none; align-items: center; gap: .35rem; }
.on-match.show { display: flex; }
.on-match.ok { color: var(--on-green); } .on-match.bad { color: var(--on-red); }
.on-match [data-lucide], .on-match svg { width: 14px; height: 14px; }

.on-terms { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--on-radius); background: var(--on-surface-2); border: 1px solid var(--on-border); }
.on-terms .form-check-input { margin: .15rem 0 0; flex-shrink: 0; }
.on-terms label { font-size: .85rem; cursor: pointer; }

/* ---------- Status screens (confirmations, logout, access denied…) ------------------- */
.on-status-screen { text-align: center; }
.on-status-icon {
    --c: var(--on-brand-strong); --b: var(--on-brand-soft);
    position: relative; width: 96px; height: 96px; margin: 0 auto 1.75rem; border-radius: 30px;
    display: grid; place-items: center; background: var(--b); color: var(--c);
}
.on-status-icon::before, .on-status-icon::after {
    content: ""; position: absolute; inset: -12px; border-radius: 38px; border: 1.5px solid var(--b);
    animation: on-status-ring 3.2s var(--on-ease) infinite;
}
.on-status-icon::after { inset: -26px; border-radius: 48px; opacity: .6; animation-delay: .4s; }
.on-status-icon [data-lucide], .on-status-icon svg { width: 40px; height: 40px; stroke-width: 1.7; }
.on-status-icon .badge-dot {
    position: absolute; bottom: -6px; inset-inline-end: -6px; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; background: var(--on-surface); color: var(--c); box-shadow: var(--on-shadow-md);
}
.on-status-icon .badge-dot [data-lucide], .on-status-icon .badge-dot svg { width: 16px; height: 16px; stroke-width: 2.4; }
.on-status-icon.blue { --c: var(--on-blue); --b: var(--on-blue-soft); }
.on-status-icon.amber { --c: var(--on-amber); --b: var(--on-amber-soft); }
.on-status-icon.green { --c: var(--on-green); --b: var(--on-green-soft); }
.on-status-icon.violet { --c: var(--on-violet); --b: var(--on-violet-soft); }
.on-status-icon.red { --c: var(--on-red); --b: var(--on-red-soft); }
.on-status-screen h1 { margin-bottom: .6rem; }
.on-status-screen .lead { font-size: 1rem; color: var(--on-muted); margin: 0 auto 1.75rem; max-width: 380px; }
.on-status-screen .actions { display: grid; gap: .6rem; }
.on-status-tip { margin-top: 1.5rem; padding: .85rem 1rem; border-radius: var(--on-radius); background: var(--on-surface-2); border: 1px solid var(--on-border); font-size: .84rem; color: var(--on-muted); text-align: start; display: flex; gap: .7rem; align-items: flex-start; }
.on-status-tip [data-lucide], .on-status-tip svg { color: var(--on-brand-strong); margin-top: .1rem; }
@keyframes on-status-ring { 0% { transform: scale(.92); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.06); opacity: 0; } }

/* ---------- Public sub-pages hero ---------------------------------------------------- */
.on-subhero { position: relative; overflow: hidden; padding: 4rem 0 3rem; text-align: center; }
.on-subhero::before {
    content: ""; position: absolute; inset: -40% -10% auto; height: 150%; pointer-events: none;
    background:
        radial-gradient(36rem 20rem at 75% 20%, rgba(58, 195, 204, .20), transparent 60%),
        radial-gradient(30rem 18rem at 15% 10%, rgba(47, 111, 214, .12), transparent 60%);
}
.on-subhero > .container { position: relative; z-index: 1; }
.on-subhero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; margin: .7rem 0 .8rem; }
html[lang="ar"] .on-subhero h1 { letter-spacing: 0; line-height: 1.3; }
.on-subhero p.lead { color: var(--on-muted); max-width: 600px; margin: 0 auto; font-size: clamp(1rem, .95rem + .3vw, 1.12rem); }
.on-subhero .on-breadcrumb { justify-content: center; margin-bottom: 1rem; }
.on-page-body { padding: 1rem 0 5rem; }

/* big search field (FAQs) */
.on-big-search { position: relative; max-width: 560px; margin: 2rem auto 0; }
.on-big-search input {
    width: 100%; height: 56px; border-radius: 18px; border: 1px solid var(--on-border-strong); background: var(--on-surface);
    padding-inline: 3.1rem 6.5rem; color: var(--on-ink); font-size: 1rem; box-shadow: var(--on-shadow-md); transition: all .2s;
}
.on-big-search input::placeholder { color: var(--on-faint); }
.on-big-search input:focus { outline: none; border-color: var(--on-brand); box-shadow: var(--on-ring), var(--on-shadow-md); }
.on-big-search > [data-lucide], .on-big-search > svg { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 1.15rem; color: var(--on-muted); width: 20px; height: 20px; }
.on-big-search .count { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 1rem; font-size: .76rem; font-weight: 700; color: var(--on-muted); }
.on-faq-list .accordion-item[hidden] { display: none !important; }
.on-faq-list mark { background: rgba(58, 195, 204, .28); color: inherit; padding: 0 .1em; border-radius: 4px; }

/* help / contact side cards */
.on-help-card { position: sticky; top: 100px; }
.on-contact-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; color: var(--on-text); height: 100%; }
.on-contact-card .label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--on-muted); }
html[lang="ar"] .on-contact-card .label { letter-spacing: 0; }
.on-contact-card .value { font-weight: 700; color: var(--on-ink); font-size: .95rem; word-break: break-word; }
.on-contact-card .go { margin-inline-start: auto; color: var(--on-faint); transition: transform .2s var(--on-ease), color .2s; }
a.on-contact-card:hover .go { color: var(--on-brand-strong); transform: translateX(3px); }
html[dir="rtl"] a.on-contact-card:hover .go { transform: scaleX(-1) translateX(3px); }
.on-map-card { position: relative; overflow: hidden; border-radius: var(--on-radius-lg); min-height: 150px; background: var(--on-gradient); color: #fff; padding: 1.3rem; display: flex; flex-direction: column; justify-content: flex-end; }
.on-map-card::before {
    content: ""; position: absolute; inset: 0; opacity: .35;
    background-image: linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
    background-size: 28px 28px;
}
.on-map-card .pin { position: absolute; top: 1.2rem; inset-inline-end: 1.4rem; width: 46px; height: 46px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: #fff; display: grid; place-items: center; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .35); }
.on-map-card .pin > * { transform: rotate(45deg); color: var(--on-brand-deep); }
.on-map-card > div, .on-map-card > a { position: relative; }
.on-map-card .btn { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.on-map-card .btn:hover { background: #fff; color: var(--on-brand-deep); }

/* privacy / long-form */
.on-toc { position: sticky; top: 100px; }
.on-toc a { display: flex; gap: .6rem; align-items: center; padding: .5rem .75rem; border-radius: 10px; color: var(--on-muted); font-weight: 600; font-size: .86rem; }
.on-toc a:hover { background: var(--on-surface-2); color: var(--on-ink); }
.on-toc a .n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--on-surface-2); border: 1px solid var(--on-border); font-size: .7rem; font-weight: 800; color: var(--on-ink); flex-shrink: 0; }
.on-prose section { scroll-margin-top: 100px; }
.on-prose section + section { border-top: 1px solid var(--on-border); margin-top: 1.75rem; padding-top: 1.75rem; }
.on-prose h2 { font-size: 1.2rem; display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.on-prose h2 .on-icon-tile { width: 36px; height: 36px; border-radius: 11px; }
.on-prose h2 .on-icon-tile [data-lucide], .on-prose h2 .on-icon-tile svg { width: 17px; height: 17px; }
.on-prose p, .on-prose li { color: var(--on-text); }
.on-prose ul { padding-inline-start: 1.1rem; display: grid; gap: .35rem; }
.on-prose li::marker { color: var(--on-brand); }

/* ---------- Error pages ------------------------------------------------------------- */
.on-error { position: relative; overflow: hidden; padding: 4.5rem 0 5rem; text-align: center; }
.on-error::before {
    content: ""; position: absolute; inset: -30% -10% auto; height: 140%; pointer-events: none;
    background: radial-gradient(38rem 22rem at 50% 25%, rgba(58, 195, 204, .20), transparent 60%), radial-gradient(28rem 18rem at 15% 10%, rgba(47, 111, 214, .12), transparent 60%);
}
.on-error > .container { position: relative; z-index: 1; }
.on-error-code {
    font-family: var(--on-font-display); font-weight: 800; line-height: .9; letter-spacing: -.06em;
    font-size: clamp(6rem, 4rem + 9vw, 11rem); display: inline-flex; align-items: center; gap: .04em;
    background: var(--on-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    user-select: none; padding-inline: .08em;
}
.on-error-code > span:not(.globe) { padding-inline-end: .04em; }
.on-error-code .globe {
    width: .82em; height: .82em; border-radius: 50%; display: inline-grid; place-items: center; position: relative;
    background: var(--on-gradient); box-shadow: 0 24px 50px -20px rgba(42, 167, 201, .8); -webkit-text-fill-color: initial;
    animation: on-float 6s ease-in-out infinite;
}
.on-error-code .globe [data-lucide], .on-error-code .globe svg { width: 52%; height: 52%; color: #fff; stroke-width: 1.5; }
.on-error h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 1.25rem 0 .7rem; }
html[lang="ar"] .on-error h1 { letter-spacing: 0; }
.on-error .lead { color: var(--on-muted); max-width: 520px; margin: 0 auto 2rem; font-size: 1.05rem; }
.on-error-links { max-width: 760px; margin: 3rem auto 0; text-align: start; }
.on-error-links a { display: flex; gap: .85rem; align-items: center; padding: 1rem 1.1rem; color: var(--on-text); height: 100%; }
.on-error-links a strong { display: block; color: var(--on-ink); font-size: .92rem; }
.on-error-links a small { color: var(--on-muted); font-size: .8rem; }
.on-error-standalone { min-height: 100vh; display: flex; flex-direction: column; background: var(--on-surface); }
.on-error-standalone .on-error { flex: 1; display: flex; align-items: center; }
.on-error-standalone .top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1rem, 4vw, 2.5rem); position: relative; z-index: 2; }

@media (max-width: 575.98px) {
    .on-role-card .box { flex-direction: column; gap: .65rem; }
    .on-pw-rules { grid-template-columns: minmax(0, 1fr); }
    .on-subhero { padding: 2.5rem 0 2rem; }
    .on-big-search input { height: 52px; padding-inline-end: 1rem; }
    .on-big-search .count { display: none; }
    .on-error { padding: 3rem 0 4rem; }
}
@media (prefers-reduced-motion: reduce) { .on-status-icon::before, .on-status-icon::after { animation: none; opacity: .6; } }

/* long forms (register): keep the brand art in view while the form scrolls */
@media (min-width: 992px) {
    .on-auth:has(.on-register) .on-auth-art { position: sticky; top: .9rem; height: calc(100vh - 1.8rem); align-self: start; }
}
.on-map-card .label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
html[lang="ar"] .on-map-card .label { letter-spacing: 0; }
/* LTR values (emails, phones) inside RTL pages: keep the icon gap on the right, align text to the start of the page */
html[dir="rtl"] .on-input > .form-control[dir="ltr"] { padding-left: .9rem; padding-right: 2.6rem; text-align: right; }