/* ==========================================================================
   Karibu Mgeni auth design system
   --------------------------------------------------------------------------
   Standalone stylesheet for the signed-out authentication screens
   (login, register, verify, forgot password, reset password, confirm password).

   Ported from the Vizitor auth reference
   (/home/projects/vizitorapp/login.html and verify_forgot_email.html) so the
   two-panel layout, spacing, radii and orange accent read identically.

   Every selector is namespaced with `az-`. That is deliberate: the auth layout
   also loads the compiled TailAdmin build, and generic names taken from the
   reference (`.title`, `.subtitle`, `.input-box`, `.divider`) would collide
   with TailAdmin utilities. Namespacing keeps both stylesheets independent
   and means auth.css can be cached and changed on its own.

   Dark mode keeps the TailAdmin contract: the `dark` class on <html>,
   toggled from the `darkMode` localStorage key. Only the colour tokens are
   overridden, so the layout geometry is identical in both themes.
   ========================================================================== */

:root {
    --az-navy-1: #1b2c48;
    --az-navy-2: #0e1f36;
    --az-navy-3: #111827;
    --az-accent: #f37a4f;
    --az-accent-soft: #f26a38;
    --az-accent-deep: #ed5c18;

    --az-ink: #1a2a45;
    --az-muted: #8a96a3;
    --az-faint: #c5cdd6;
    --az-line: #e8e8ee;
    --az-line-soft: #f0f2f7;
    --az-surface: #f6f8fb;
    --az-card: #ffffff;
    --az-on-accent: #ffffff;
    --az-danger: #d92d20;
    --az-success: #12b76a;
    --az-danger-soft: #fef3f2;
    --az-success-soft: #ecfdf3;
}

html.dark {
    --az-ink: #e8edf5;
    --az-muted: #93a1b2;
    --az-faint: #64748b;
    --az-line: #263043;
    --az-line-soft: #1e2736;
    --az-surface: #0e1621;
    --az-card: #151d2b;
    --az-danger-soft: #2a1614;
    --az-success-soft: #0f2a1d;
}

/* ---------- shell ---------- */

/* The .az-page covers the viewport, but <body> still paints behind it - and it
   paints *above* it in the scrollbar gutter and during the pre-paint frame.
   TailAdmin's default body colour is a light grey, which would flash white in
   dark mode, so bind it to the same token as the page shell. */
body {
    background: var(--az-card);
}

.az-page {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--az-card);
    /* Nunito is TailAdmin's choice for the brand panel only (see .az-brand), not
       for the whole screen: the form column follows the app-wide Outfit. Kept here
       rather than in layouts/auth so every page loading auth.css - login, register,
       reset and the check-in frontend pages - resolves the same pair of fonts
       without repeating an override. */
    font-family: var(--font-outfit, Outfit, sans-serif);
    -webkit-font-smoothing: antialiased;
}

.az-page *,
.az-page *::before,
.az-page *::after {
    box-sizing: border-box;
}

/* ---------- brand panel (left, desktop only) ---------- */

.az-brand {
    position: relative;
    width: 50%;
    flex-shrink: 0;
    font-family: Nunito, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(155deg, #1b2c48 0%, #0e1f36 55%, #111827 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 52px 48px 48px;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    animation: azBrandIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.az-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
}

.az-blob--1 {
    width: 420px;
    height: 420px;
    background: rgba(243, 122, 79, 0.38);
    top: -140px;
    right: -100px;
    animation: azBlob1 14s ease-in-out infinite;
}

.az-blob--2 {
    width: 300px;
    height: 300px;
    background: rgba(201, 83, 42, 0.3);
    bottom: -80px;
    left: -80px;
    animation: azBlob2 18s ease-in-out infinite;
}

.az-blob--3 {
    width: 180px;
    height: 180px;
    background: rgba(243, 122, 79, 0.18);
    bottom: 180px;
    right: 24px;
    border-radius: 38% 62% 55% 45% / 45% 55% 60% 40%;
    filter: blur(40px);
    animation: azBlob3 11s ease-in-out infinite;
}

.az-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    z-index: 0;
}

.az-brand__logo {
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.az-brand__logo img {
    height: 36px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* Solid-colour wordmarks do not survive brightness(0) invert(1); the layout
   marks the logo with data-az-logo="color" when the uploaded asset is already
   meant for dark backgrounds. */
.az-brand__logo img[data-az-logo="color"] {
    filter: none;
}

.az-brand__hero-icon {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: rgba(243, 122, 79, 0.15);
    border: 1px solid rgba(243, 122, 79, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    animation: azShieldPulse 3s ease-in-out infinite;
}

.az-brand__hero-icon svg {
    width: 40px;
    height: 40px;
    color: #f37a4f;
}

.az-brand__hero {
    position: relative;
    z-index: 1;
    margin-bottom: 36px;
    width: 100%;
}

.az-brand__headline {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.8px;
    margin: 0 0 14px;
}

.az-brand__desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 320px;
}

.az-features {
    list-style: none;
    padding: 0;
    margin: 0 0 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    position: relative;
    z-index: 1;
    width: 100%;
}

.az-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.az-feat__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(243, 122, 79, 0.15);
    border: 1px solid rgba(243, 122, 79, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.az-feat__icon svg {
    width: 22px;
    height: 22px;
    color: #f37a4f;
}

.az-feat__text {
    text-align: center;
}

.az-feat__title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
}

.az-feat__desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    line-height: 1.5;
}

.az-brand__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: relative;
    z-index: 1;
}

.az-trust__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f37a4f;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(243, 122, 79, 0.6);
}

.az-trust__text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.3px;
}

/* ---------- form panel (right) ---------- */

.az-form {
    width: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--az-surface);
    overflow-y: auto;
    padding: 40px 32px;
    box-sizing: border-box;
    position: relative;
}

/* Corner motif. TailAdmin's own sign-in/sign-up screens frame their form
   column with two copies of src/images/shape/grid-01.svg - one anchored
   top-right, one rotated 180 degrees in the bottom-left, both behind the
   content. Drawn here as pseudo-elements on .az-form so every auth screen
   picks it up from one place instead of duplicating markup in each panel.
   The URL arrives as --az-grid-deco, resolved with asset() in the layout. */
.az-form::before,
.az-form::after {
    content: "";
    position: absolute;
    width: 100%;
    max-width: 250px;
    height: auto;
    aspect-ratio: 450 / 254;
    background-image: var(--az-grid-deco);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
    opacity: 0.55;
}

.az-form::before {
    top: 0;
    right: 0;
}

.az-form::after {
    bottom: 0;
    left: 0;
    transform: rotate(180deg);
}

/* The motif is positioned, so it would paint over the in-flow form column
   unless the column is lifted above it. */
.az-form__inner {
    position: relative;
    z-index: 1;
}

@media (min-width: 1280px) {
    .az-form::before,
    .az-form::after {
        max-width: 330px;
    }
}

/* The SVG strokes are grey at 8-30% alpha, which reads too hot on the near
   black dark surface. */
html.dark .az-form::before,
html.dark .az-form::after {
    opacity: 0.3;
}

.az-form__inner {
    width: 100%;
    max-width: 400px;
    animation: azFormIn 0.55s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The register form is taller than the reference screens; widening the
   column keeps two-column field pairs from collapsing into a very tall stack. */
.az-form--wide .az-form__inner {
    max-width: 460px;
}

.az-form__mobile-logo {
    display: none;
    margin-bottom: 32px;
    text-align: center;
}

.az-form__mobile-logo img {
    height: 32px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* ---------- header ---------- */

.az-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

.az-header--start {
    align-items: flex-start;
    text-align: left;
}

.az-header--start .az-title,
.az-header--start .az-subtitle {
    text-align: left;
}

.az-form-favicon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--az-card);
    border: 1.5px solid var(--az-line-soft);
    box-shadow: 0 4px 16px rgba(243, 122, 79, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
}

.az-form-favicon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.az-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--az-ink);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.az-subtitle {
    font-size: 13px;
    color: var(--az-muted);
    margin: 0;
    font-weight: 400;
    line-height: 1.55;
}

/* Accent pill used to call out the address a reset/verify mail went to
   (the reference's .email-pill). */
.az-highlight {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--az-accent);
    background: rgba(243, 122, 79, 0.08);
    border-radius: 6px;
    padding: 1px 7px;
    margin: 4px 0 0;
}

/* ---------- form controls ---------- */

.az-form-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.az-group {
    display: flex;
    flex-direction: column;
}

.az-group--error .az-label,
.az-group--error .az-input-box {
    color: var(--az-danger);
}

.az-group--error .az-input-box {
    border-color: var(--az-danger);
}

.az-field-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--az-muted);
    letter-spacing: 1.6px;
    margin-bottom: 8px;
}

.az-input-box {
    display: flex;
    align-items: center;
    background: var(--az-card);
    border: 1.5px solid var(--az-line);
    border-radius: 12px;
    padding: 0 14px;
    height: 50px;
    margin-bottom: 18px;
    gap: 10px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.az-input-box:focus-within {
    border-color: var(--az-accent);
    box-shadow: 0 0 0 3px rgba(243, 122, 79, 0.12);
}

/* Keep the danger border on a field that failed validation. */
.az-group--error .az-input-box:focus-within {
    border-color: var(--az-danger);
}

.az-input-box input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--az-ink);
    font-family: inherit;
    height: 100%;
    padding: 0;
}

.az-input-box input:focus {
    /* TailAdmin's @layer base rule
         [type="text"], input:where(:not([type])), [type="email"], ... &:focus
       (public/backend/assets/css/style.css, "@layer base") sets a 1px ring on
       the input itself via --tw-ring-color: oklch(0.546 0.245 262.881), plus a
       matching border-color. Because .az-input-box input is border:none the
       border-color is inert, but the ring still paints a blue outline inside
       the shell, which is the blue "focus border" seen on the field. Drop both
       so the input contributes no focus colour of its own; the .az-input-box
       shell owns the visible focus treatment. */
    border-color: transparent;
    box-shadow: none;
}

.az-input-box input::placeholder {
    color: var(--az-faint);
}

.az-input-box input:read-only {
    color: var(--az-muted);
}

.az-input-box input::-webkit-outer-spin-button,
.az-input-box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- select ---------- */

/* appearance:none drops the native arrow, so .az-caret supplies one. */
.az-input-box select {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--az-ink);
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* appearance:none also drops the native focus box; the .az-input-box shell owns
   the focus treatment, exactly as the input branch does above. */
.az-input-box select:focus,
.az-input-box textarea:focus {
    box-shadow: none;
}

.az-input-box select option {
    background: var(--az-card);
    color: var(--az-ink);
}

/* The caret is a flex sibling inside .az-input-box rather than an absolutely
   positioned overlay. The box already reserves right padding, so the caret can
   never overlap the selected text, and there is no per-field relative wrapper to
   position wrong. */
.az-caret {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    pointer-events: none;
    color: var(--az-faint);
}

/* ---------- textarea ---------- */

.az-input-box textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    resize: vertical;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    color: var(--az-ink);
    padding: 0;
}

.az-input-box textarea::placeholder {
    color: var(--az-faint);
}

.az-input-box--area {
    height: auto;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
}

.az-input-box--area .az-icon-left {
    margin-top: 1px;
}

/* ---------- intlTelInput ---------- */

/* intlTelInput wraps the input it is attached to in a .iti div. Inside
   .az-input-box (display:flex) that wrapper has to claim the free space or the
   nested input collapses to zero width. */
.az-input-box .iti {
    flex: 1;
    min-width: 0;
    display: block;
}

/* init.js uses dropdownContainer:document.body, so .az-page overflow:hidden
   cannot clip the country list; only the trigger arrow needs the auth palette.
   The names here are intlTelInput v17's - the plugin renamed
   .iti__selected-country to .iti__selected-flag and no longer adds
   .iti__tel-input to the input (it positions .iti__flag-container absolutely
   inside .iti and pads the input itself instead). */
.az-input-box .iti__selected-flag .iti__arrow {
    border-top-color: var(--az-faint);
}

/* ---------- layout helpers ---------- */

/* ---------- action row ---------- */

/* auth.css's .az-row is a space-between row tuned for a checkbox plus a text
   link, so the Cancel/Continue pair gets its own spacing. */
.az-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 4px;
}

.az-actions .az-btn {
    width: 100%;
}

@media (min-width: 480px) {
    .az-actions {
        flex-direction: row;
        align-items: center;
    }

    /* Cancel keeps its share of the row so the pair reads as a matched set
       rather than one wide button beside a narrow one. */
    .az-actions .az-btn {
        width: auto;
        flex: 1;
    }
}

.az-icon-left,
.az-icon-right {
    width: 18px;
    height: 18px;
    color: var(--az-faint);
    flex-shrink: 0;
    transition: color 0.2s;
    display: block;
}

.az-input-box:focus-within .az-icon-left {
    color: var(--az-accent);
}

.az-icon-right.az-toggle {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.az-icon-right.az-toggle:hover {
    color: var(--az-accent);
}

/* The two eye icons are both rendered and swapped from the button's
   aria-pressed state, so the visible icon always describes what a click will
   do: "eye" while the value is masked, "eye-off" once it is revealed. */
.az-eye-hidden {
    display: none;
}

.az-icon-right.az-toggle[aria-pressed="true"] .az-eye-shown {
    display: none;
}

.az-icon-right.az-toggle[aria-pressed="true"] .az-eye-hidden {
    display: block;
}

.az-help {
    font-size: 12px;
    color: var(--az-muted);
    margin: -8px 0 18px;
    line-height: 1.5;
}

.az-help--center {
    margin: 0 0 18px;
    text-align: center;
}

.az-error {
    font-size: 12px;
    color: var(--az-danger);
    margin: -8px 0 18px;
    line-height: 1.5;
}

/* Visual-only "this is mandatory" marker. auth.partials.field renders it from
   $requiredMark rather than the HTML `required` attribute, because the longer
   forms rely on server-side validation and need the submit to actually go out
   so the per-field errors are visible. */
.az-required {
    color: var(--az-danger);
    margin-left: 3px;
}

/* ---------- checkbox ---------- */

.az-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--az-muted);
    cursor: pointer;
    line-height: 1.5;
}

/* Inline link inside a checkbox label (e.g. the Terms and Conditions link on
   the register screen). */
/* .az-group--error reaches the tick through .az-input-box on text fields; a
   checkbox has no input shell, so the row and its border are targeted here. */
.az-group--error .az-checkbox {
    color: var(--az-danger);
}

.az-group--error .az-checkbox input {
    border-color: var(--az-danger);
}

.az-checkbox .az-check__link {
    color: var(--az-accent);
    font-weight: 600;
    text-decoration: none;
}

.az-checkbox .az-check__link:hover {
    text-decoration: underline;
}

/* The role picker on the register screen carries the same control styling as
   the checkbox row, so both selectors are listed everywhere. Leaving the radio
   unstyled would let the compiled TailAdmin form defaults win and render it in
   TailAdmin's blue instead of the orange accent. */
.az-checkbox input,
.az-choice input {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin: 1px 0 0;
    border: 1.5px solid var(--az-line);
    border-radius: 5px;
    background: var(--az-card);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
}

.az-checkbox input[type="radio"],
.az-choice input[type="radio"] {
    border-radius: 50%;
}

.az-checkbox input:checked,
.az-choice input:checked {
    background: var(--az-accent);
    border-color: var(--az-accent);
}

.az-checkbox input:checked::after,
.az-choice input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.az-checkbox input[type="radio"]:checked::after,
.az-choice input[type="radio"]:checked::after {
    left: 4.5px;
    top: 4.5px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 50%;
    background: #fff;
    transform: none;
}

.az-checkbox input:focus-visible,
.az-choice input:focus-visible {
    outline: 2px solid var(--az-accent);
    outline-offset: 2px;
}

/* ---------- role picker ---------- */

/* The role picker is a <fieldset> only for semantics; the browser's default
   border/padding/margin would otherwise indent it. */
.az-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.az-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.az-choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 12px;
    border: 1.5px solid var(--az-line);
    border-radius: 12px;
    cursor: pointer;
    background: var(--az-card);
    transition: border-color 0.2s, background 0.2s;
}

.az-choice:hover {
    border-color: var(--az-faint);
}

.az-choice-selected {
    border-color: var(--az-accent) !important;
    background: rgba(243, 122, 79, 0.05);
}

.az-choice__text {
    min-width: 0;
}

.az-choice__title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--az-ink);
    line-height: 1.35;
}

.az-choice__desc {
    display: block;
    font-size: 11px;
    color: var(--az-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* ---------- row helpers ---------- */

.az-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -10px 0 18px;
}

.az-row--end {
    justify-content: flex-end;
}

.az-link {
    font-size: 12px;
    color: var(--az-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.az-link:hover {
    color: var(--az-accent);
}

.az-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

/* ---------- buttons ---------- */

.az-btn {
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 12px;
    background: var(--az-accent-deep);
    color: var(--az-on-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(243, 122, 79, 0.3);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

/* Sheen sweep on hover, matching the reference button. */
.az-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transition: left 0.5s ease;
}

.az-btn:hover:not([disabled]) {
    transform: translateY(-2px);
    box-shadow: 0 6px 32px rgba(243, 122, 79, 0.55);
}

.az-btn:hover:not([disabled])::after {
    left: 100%;
}

.az-btn:active:not([disabled]) {
    transform: translateY(0);
}

.az-btn[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* The reset pages use the gradient treatment from the reference instead of
   the solid sign-in button. */
.az-btn--gradient {
    background: linear-gradient(135deg, #f48f6a 0%, #f26a38 100%);
    animation: azBtnPulse 3s ease-in-out infinite;
}

.az-btn--secondary {
    background: var(--az-card);
    color: var(--az-ink);
    border: 1.5px solid var(--az-line);
    box-shadow: none;
    font-weight: 600;
}

.az-btn--secondary:hover:not([disabled]) {
    border-color: var(--az-accent);
    background: rgba(243, 122, 79, 0.04);
    color: var(--az-accent);
    box-shadow: none;
}

.az-btn--secondary::after {
    display: none;
}

.az-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.az-btn--sso svg {
    color: var(--az-accent);
}

/* ---------- testimonial ---------- */

.az-testimonial {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.az-testimonial__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.az-stars {
    display: flex;
    gap: 1px;
    color: var(--az-accent);
}

.az-stars svg {
    width: 12px;
    height: 12px;
}

.az-testimonial__quote {
    font-size: 11px;
    line-height: 1.45;
    color: var(--az-muted);
    margin: 2px 0 0;
}

/* ---------- divider ---------- */

.az-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
}

.az-divider__line {
    flex: 1;
    height: 1px;
    background: var(--az-line);
}

.az-divider__text {
    font-size: 11px;
    color: var(--az-faint);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* ---------- demo login ---------- */

.az-demo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.az-demo__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 10px;
    border: 1.5px solid var(--az-line);
    border-radius: 12px;
    background: var(--az-card);
    color: var(--az-ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.az-demo__btn svg {
    width: 15px;
    height: 15px;
    color: var(--az-accent);
    flex-shrink: 0;
}

.az-demo__btn:hover {
    border-color: var(--az-accent);
    background: rgba(243, 122, 79, 0.05);
    color: var(--az-accent);
    transform: translateY(-1px);
}

/* ---------- footer links ---------- */

.az-footer-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* The reference footer only ever holds a single link, so it ships without a
       gap. Our rows pair a muted prompt with the accent link ("No account yet?"
       / "Create account"), which leaves the two flush against each other
       without this. 12px matches the gap on the "Remember me / Forgot
       password?" row so the two stacked rows read with one rhythm. */
    gap: 12px;
    margin-top: 24px;
}

.az-footer-links.az-footer-links--center {
    justify-content: center;
}

/* Muted lead-in text sitting beside a footer link ("No account yet?"). */
.az-footer-note {
    font-size: 12px;
    color: var(--az-muted);
}

/* Tightens the terms checkbox row so it does not add to the field rhythm. */
.az-terms {
    margin: -2px 0 18px;
}

.az-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--az-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.az-footer-link svg {
    width: 15px;
    height: 15px;
}

/* <button> elements carrying the link class need the UA button chrome
   stripped so they render identically to their <a> counterparts. */
.az-footer-link--button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.az-footer-link:hover {
    color: var(--az-accent);
}

.az-footer-link.is-accent {
    color: #6b7280;
    font-weight: 600;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    padding: 6px 14px;
    transition: background 0.2s, color 0.2s;
}

html.dark .az-footer-link.is-accent {
    color: var(--az-muted);
    background: rgba(255, 255, 255, 0.08);
}

.az-footer-link.is-accent:hover {
    background: rgba(243, 122, 79, 0.14);
    color: var(--az-accent);
}

/* ---------- security screens (forgot password / reset / verify) ----------

   The reference ships two tuning blocks: the sign-in screen and a slightly
   tighter one for the "account security" screens. The differences are small
   but visible - a larger favicon badge, a smaller headline, more compact
   feature tiles and lighter trust copy. `.az-page--security` switches a whole
   screen over to that second set so the two halves always agree. */
.az-page--security .az-grid {
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.az-page--security .az-brand__logo {
    margin-bottom: 32px;
}

.az-page--security .az-brand__logo img {
    height: 34px;
    opacity: 0.88;
}

.az-page--security .az-brand__desc {
    color: rgba(255, 255, 255, 0.5);
    max-width: 310px;
}

.az-page--security .az-features {
    margin-bottom: 44px;
    gap: 20px;
}

.az-page--security .az-feat {
    max-width: 110px;
}

.az-page--security .az-feat__title {
    font-size: 12px;
}

.az-page--security .az-feat__desc {
    color: rgba(255, 255, 255, 0.4);
}

.az-page--security .az-trust__text {
    color: rgba(255, 255, 255, 0.35);
}

.az-page--security .az-form__mobile-logo {
    margin-bottom: 28px;
}

.az-page--security .az-form-favicon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

.az-page--security .az-title {
    font-size: 24px;
    letter-spacing: -0.4px;
}

.az-page--security .az-subtitle {
    line-height: 1.6;
}

.az-page--security .az-footer-link {
    font-size: 13px;
    font-weight: 500;
}

.az-page--security .az-footer-link svg {
    width: 16px;
    height: 16px;
}

.az-resend-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 14px;
    color: var(--az-accent);
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.az-resend-link:hover {
    text-decoration: underline;
}

/* ---------- alerts ---------- */

.az-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 12.5px;
    line-height: 1.55;
}

.az-alert svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}

.az-alert--success {
    background: var(--az-success-soft);
    border: 1px solid rgba(18, 183, 106, 0.32);
    color: var(--az-success);
}

.az-alert--error {
    background: var(--az-danger-soft);
    border: 1px solid rgba(217, 45, 32, 0.3);
    color: var(--az-danger);
}

.az-alert ul {
    margin: 5px 0 0;
    padding-left: 16px;
    list-style: disc;
}

.az-alert__title {
    font-weight: 700;
}

/* ---------- theme toggle ---------- */

/* The reference screens carry no footer, so this bar holds only the theme
   toggle (which the admin shell exposes on every page). TailAdmin sets
   `body { position: relative }`, so it is laid out against <body>; the top-right
   of the form column is the one region the design leaves empty on every
   breakpoint, and a 34px control cannot collide with the centred form column
   the way a footer strip does on a tall screen such as /register. */
.az-corner {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
}

.az-corner__btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--az-line);
    background: var(--az-card);
    color: var(--az-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.az-corner__btn:hover {
    color: var(--az-accent);
    border-color: var(--az-accent);
}

.az-corner__btn svg {
    width: 17px;
    height: 17px;
}

html:not(.dark) .az-icon-moon,
html.dark .az-icon-sun {
    display: none;
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
    .az-brand {
        padding: 40px 28px;
    }

    .az-brand__headline {
        font-size: 26px;
    }

    .az-feat__desc {
        display: none;
    }
}

@media (max-width: 700px) {
    .az-page {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .az-brand {
        display: none;
    }

    .az-form {
        width: 100%;
        height: 100vh;
        padding: 0;
        background: var(--az-card);
    }

    /* Below 700px the form column is the whole page, so the corner framing is
       gone and the motif would just read as noise behind the stacked fields -
       which is also how TailAdmin drops its motif on small screens. */
    .az-form::before,
    .az-form::after {
        display: none;
    }

    .az-form__inner {
        width: 100%;
        max-width: 100%;
        padding: 40px 28px 64px;
    }

    /* The form column is a full-height scroller on small screens; the toggle is
       pinned so it stays reachable, and the inner column's 64px bottom padding
       keeps the last field clear of it. */
    .az-corner {
        top: 14px;
        right: 14px;
    }

    .az-form__mobile-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 28px;
    }

    .az-form__mobile-logo img {
        height: 34px;
    }

    .az-form-favicon {
        display: none;
    }

    .az-title {
        font-size: 24px;
    }

    .az-input-box {
        height: 52px;
        border-radius: 14px;
        margin-bottom: 16px;
    }

    .az-btn {
        height: 52px;
        font-size: 15px;
        border-radius: 14px;
    }

    .az-divider {
        margin: 20px 0;
    }

    .az-footer-links {
        justify-content: center;
        margin-top: 28px;
    }

    .az-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .az-choices {
        grid-template-columns: minmax(0, 1fr);
    }

    .az-demo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The register column is wider than the reference screens; undo it on
       small screens so the single-column stack uses the full width. */
    .az-form--wide .az-form__inner {
        max-width: 100%;
    }
}

/* ---------- motion ---------- */

@keyframes azBrandIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes azFormIn {
    0% {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes azBlob1 {

    0%,
    to {
        transform: scale(1) translate(0);
    }

    50% {
        transform: scale(1.12) translate(20px, -20px);
    }
}

@keyframes azBlob2 {

    0%,
    to {
        transform: scale(1) translate(0);
    }

    50% {
        transform: scale(0.9) translate(-15px, 25px);
    }
}

@keyframes azBlob3 {

    0%,
    to {
        transform: scale(1) rotate(0);
    }

    50% {
        transform: scale(1.1) rotate(40deg);
    }
}

@keyframes azShieldPulse {

    0%,
    to {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes azBtnPulse {

    0%,
    to {
        box-shadow: 0 4px 20px rgba(243, 122, 79, 0.3);
    }

    50% {
        box-shadow: 0 6px 32px rgba(243, 122, 79, 0.55);
    }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

    .az-brand,
    .az-form__inner,
    .az-blob,
    .az-brand__hero-icon,
    .az-btn--gradient {
        animation: none !important;
    }

    .az-btn:hover:not([disabled]),
    .az-demo__btn:hover {
        transform: none;
    }
}