/* ==========================================================================
   GPI app stylesheet — the application-wide design system for every page
   (home, login, registration, OTP, profile, password, errors, …).
   Loaded globally via _CssPartial.

   Conventions
   -----------
   - Namespace: every class is prefixed `app-`. BEM-style: block `app-x`,
     element `app-x__y`, modifier `app-x--z`.
   - Self-contained: does NOT rely on any legacy stylesheet. Brand colours come
     from tokens.css (:root); the font family comes from the --app-font token
     (Google "Noto Sans Georgian", loaded in _CssPartial). The password eye-toggle
     (`.eye` / `.pass-eye*`, driven by site.js) lives in this file too.
   ========================================================================== */

.app-shell {
    /* local scale — single source of truth for spacing / radii in auth */
    --app-gap: 16px;
    --app-card-pad: 40px;
    --app-radius-card: 16px;
    --app-radius-input: 12px;
    --app-radius-btn: 8px;
    --app-input-h: 56px;
    --app-btn-h: 52px;
    --app-border: rgba(41, 37, 98, 0.3);
    --app-text: #292562;
    --app-muted: rgba(41, 37, 98, 0.6);
    --app-line: #d9d9d9;
    --app-link: #1000f6;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 24px 32px 64px;
    background: #f3f4f7;
}

    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        box-sizing: border-box;
    }

/* Header (Figma: white pill bar) ----------------------------------------- */
.app-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 32px;
    background: #fff;
    border-radius: 64px;
    box-shadow: 2px 4px 6px rgba(14, 33, 94, 0.08);
}

/* Hamburger — hidden on desktop, shown on mobile */
.app-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
}

    .app-header__burger img {
        width: 24px;
        height: 24px;
        display: block;
    }

.app-header__logo {
    display: flex;
    align-items: center;
    height: 40px;
}

    .app-header__logo img {
        height: 100%;
        width: auto;
        display: block;
    }

.app-header__actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.app-header__login,
.app-header__login:hover,
.app-header__login:focus,
.app-header__login:visited,
.app-header__login:active {
    padding: 10px 16px;
    background: var(--color-brand-primary);
    border-radius: 38px;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-decoration: none !important;
    white-space: nowrap;
}

.app-header__langform {
    margin: 0;
}

.app-header__lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--color-brand-secondary);
    border-radius: 48px;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--app-text);
    cursor: pointer;
}

    .app-header__lang svg {
        display: block;
        flex-shrink: 0;
    }

/* Body wrapper centring the card ----------------------------------------- */
.app-auth {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding-top: 40px;
}

/* Notifications (TempData) ----------------------------------------------- */
.app-alerts {
    width: 100%;
    max-width: 560px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-alert {
    padding: 12px 16px;
    border-radius: var(--app-radius-input);
    font-family: var(--app-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.app-alert--success {
    background: #e6f4ec;
    color: #1a7f43;
}

.app-alert--danger {
    background: #fdecec;
    color: #c0341d;
}

.app-alert--warning {
    background: #fef6e6;
    color: #9a6700;
}

.app-alert--info {
    background: #eef1f8;
    color: var(--app-text);
}

.app-alert--icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

    /* Bare inline icon (stroke svg, no circle chip) + text, e.g. the modal success note */
    .app-alert--icon > svg {
        flex: 0 0 auto;
    }

.app-alert__text {
    margin: 0;
}

.app-alert__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-success);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

    /* Per-variant icon background (default is success green, used by the password-change banner). */
    .app-alert__icon--danger { background: #c0341d; }
    .app-alert__icon--warning { background: #9a6700; }

    .app-alert__icon img {
        display: block;
        width: 11px;
        height: auto;
    }

/* Card -------------------------------------------------------------------- */
.app-card {
    width: 100%;
    max-width: 560px;
    padding: var(--app-card-pad);
    background: #fff;
    border-radius: var(--app-radius-card);
    box-shadow: 2px 4px 6px rgba(14, 33, 94, 0.08);
}

.app-card__title {
    margin: 0 0 24px;
    font-family: var(--app-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--app-text);
}

.app-card__title--centered {
    text-align: center;
}

/* Secondary text link centered under a primary action button (e.g. "back to home page"
   beneath the MyGPI button on the password-change success page). */
.app-card__sublink {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-family: var(--app-font);
    font-size: 14px;
    color: var(--app-link);
    text-decoration: underline;
}

/* Form layout ------------------------------------------------------------- */
.app-form {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap);
}

/* Pull a block tight to the field above it (e.g. password checklist) */
.app-form__tight {
    margin-top: calc(var(--app-gap) * -1 + 8px);
}

/* Reset native fieldset chrome (used to disable a whole form section at once) */
.app-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap);
    margin: 0;
    padding: 0;
    border: 0;
}

/* Field (floating-label text input) -------------------------------------- */
.app-field {
    position: relative;
}

.app-field__input {
    width: 100%;
    height: var(--app-input-h);
    padding: 18px 48px 18px 16px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-input);
    background: #fff;
    font-family: var(--app-font);
    font-weight: 400;
    font-size: 14px;
    color: var(--app-text);
    outline: none;
    transition: border-color 0.15s ease;
}

    .app-field__input::placeholder {
        color: var(--app-muted);
        opacity: 1;
    }

    .app-field__input:focus {
        border-color: var(--app-text);
    }

/* OTP code: the same standard input, just centered with wider letter spacing */
.app-field__input--otp {
    padding-right: 16px;
    text-align: center;
    letter-spacing: 6px;
    font-family: var(--app-font);
    font-weight: 600;
}

/* Password show/hide toggle — moved here from legacy main.css.
   site.js swaps the .pass-eye / .pass-eye-hide classes on the <i>. */
.eye {
    position: absolute;
    cursor: pointer;
}

.pass-eye {
    content: url(../svg/eye.svg);
}

.pass-eye-hide {
    content: url(../svg/closed_eye.svg);
}

/* Repositioned for the auth field */
.app-field .eye {
    right: 16px;
    top: 16px;
}

/* Suppress the browser autofill yellow background inside inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}

.app-field__error {
    display: block;
    margin-top: 4px;
    font-family: var(--app-font);
    font-weight: 400;
    font-size: 12px;
    color: var(--color-error);
}

/* Icon docked inside the field (dropdown chevron, calendar, clear) */
.app-field__icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--app-muted);
}

button.app-field__icon {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.app-field__icon img,
.app-field__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

select.app-field__input {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Buttons ----------------------------------------------------------------- */
.app-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: var(--app-btn-h);
    border: none;
    border-radius: var(--app-radius-btn);
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
}

    .app-btn img,
    .app-btn svg {
        width: 24px;
        height: 24px;
    }

.app-btn--primary {
    background: var(--color-brand-primary);
    color: #fff;
    text-transform: uppercase;
}

    .app-btn--primary:hover {
        background: var(--color-brand-primary-dark);
    }

    .app-btn--primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--color-brand-primary);
    }

.app-btn--outline {
    background: #fff;
    color: var(--app-text);
    border: 1px solid var(--app-text);
}

    .app-btn--outline[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Divider ("or") ---------------------------------------------------------- */
.app-divider {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .app-divider::before,
    .app-divider::after {
        content: "";
        flex: 1 1 0;
        height: 1px;
        background: var(--app-line);
    }

.app-divider__text {
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-brand-secondary);
}

/* Social sign-in group — side by side on desktop, stacked on mobile -------- */
.app-social {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    /* Full-width provider button; fixed height that never collapses on narrow viewports. */
    .app-social .app-btn {
        width: 100%;
        height: var(--app-btn-h);
        min-height: var(--app-btn-h);
        flex-shrink: 0;
        white-space: nowrap;
    }

/* Horizontal rule + footer link ------------------------------------------ */
.app-rule {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--app-line);
}

.app-foot {
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-brand-secondary);
}

.app-link {
    color: var(--app-link);
    text-decoration: underline;
    cursor: pointer;
}

/* Password rules checklist (runtime-validated) ---------------------------- */
.app-pwdrules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-pwdrule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-text-muted);
    transition: color 0.2s ease;
}

.app-pwdrule__icon {
    position: relative;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-text-muted);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.app-pwdrule--valid {
    color: var(--color-success);
}

    .app-pwdrule--valid .app-pwdrule__icon {
        background: var(--color-success);
        border-color: var(--color-success);
    }

        .app-pwdrule--valid .app-pwdrule__icon::after {
            content: "";
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

/* OTP confirmation screen ------------------------------------------------- */
.app-cardhead {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

    .app-cardhead .app-card__title {
        margin: 0;
    }

.app-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--app-link);
    text-decoration: none;
    cursor: pointer;
}

    .app-back img {
        width: 16px;
        height: 16px;
    }

.app-desc {
    margin: 0;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-brand-secondary);
}

    .app-desc strong {
        font-family: var(--app-font);
        font-weight: 600;
    }

.app-resend {
    align-self: flex-start;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--app-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--app-link);
    text-decoration: underline;
    cursor: pointer;
}

/* Verified-contact check icon (the locked, already-confirmed primary identifier on the profile step) */
.app-field__icon--ok {
    color: var(--color-success);
}

/* Segmented control (by personal number / by policy number) */
.app-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 999px;
}

.app-seg__btn {
    flex: 1 1 0;
    padding: 10px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-brand-secondary);
    cursor: pointer;
}

.app-seg__btn--active {
    background: var(--color-brand-secondary);
    color: #fff;
}

/* Found-person card */
.app-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--info-bg, #f1f0ff);
    border-radius: 12px;
}

.app-person__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.app-person__name {
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--app-text);
}

.app-person__status {
    font-family: var(--app-font);
    font-weight: 400;
    font-size: 12px;
    color: var(--app-muted);
}

.app-note {
    margin: 0;
    font-family: var(--app-font);
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: #6b6f8a;
}

/* In-card explanatory note shown in place of a form (e.g. external-provider users
   who have no password to change): centered, roomier, slightly larger than the default. */
.app-note--centered {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
}

/* Read-only field showing the masked on-file secondary contact: visually distinct (muted, no caret) and
   padded on the right to make room for the in-field "შეცვლა" action. */
.app-field__input--readonly {
    background: #f4f4f8;
    color: var(--app-muted);
    padding-right: 84px;
    cursor: default;
}

/* Link-style action docked inside a field (e.g. "შეცვლა" on the masked contact), like .app-field .eye. */
.app-field__action {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    background: none;
    border: 0;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 13px;
    color: var(--app-link);
    cursor: pointer;
}

    .app-field__action:hover {
        text-decoration: underline;
    }

/* Icon-only variant (the X that restores the masked contact); sits within the input's 48px right padding. */
.app-field__action--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
}

    .app-field__action--icon:hover {
        background: #f4f4f8;
    }

/* Lightweight busy indicator while the person lookup is in flight. */
@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid var(--app-border);
    border-top-color: var(--app-text);
    border-radius: 50%;
    animation: app-spin 0.6s linear infinite;
}

/* Consent checkbox row */
.app-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    /* Custom-styled checkbox: brand-coloured box with a CSS checkmark (no icon asset). */
    .app-check input[type="checkbox"] {
        flex-shrink: 0;
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        margin: 0;
        border: 1.5px solid var(--app-border);
        border-radius: 6px;
        background: #fff;
        cursor: pointer;
        position: relative;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

        .app-check input[type="checkbox"]:hover {
            border-color: var(--color-brand-primary);
        }

        .app-check input[type="checkbox"]:checked {
            background-color: var(--color-brand-primary);
            border-color: var(--color-brand-primary);
        }

        .app-check input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .app-check input[type="checkbox"]:focus-visible {
            outline: 2px solid var(--color-brand-primary);
            outline-offset: 2px;
        }

    .app-check label {
        font-family: var(--app-font);
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: var(--color-brand-secondary);
        cursor: pointer;
    }

.app-check__req {
    color: #eb001e;
}

/* Mobile (Figma: white background, full-width form, hamburger menu) -------- */
@media (max-width: 600px) {
    .app-shell {
        padding: 0 0 32px;
        background: #fff;
        min-height: 100vh;
    }

    /* Header becomes a flat white bar: logo + hamburger */
    .app-header {
        border-radius: 0;
        padding: 16px;
    }

    .app-header__logo {
        height: 32px;
    }

    .app-header__burger {
        display: flex;
    }

    /* Log In + language collapse into a dropdown panel toggled by the burger */
    .app-header__actions {
        display: none;
        position: absolute;
        top: 100%;
        right: 16px;
        left: 16px;
        z-index: 30;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 8px;
        padding: 16px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 2px 8px 20px rgba(14, 33, 94, 0.12);
    }

    .app-header--open .app-header__actions {
        display: flex;
    }

    .app-header__login {
        text-align: center;
    }

    .app-header__lang {
        justify-content: center;
    }

    /* Form fills the screen — no card chrome */
    .app-auth {
        padding-top: 0;
    }

    .app-card {
        max-width: none;
        padding: 24px 16px;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .app-card__title {
        font-size: 20px;
    }

    .app-social {
        flex-direction: column;
    }
}

/* ==========================================================================
   Unified header extras (auth-aware) + Home page (side panel + app cards)
   ========================================================================== */


/* Authenticated user menu (desktop dropdown) */
.app-usermenu {
    position: relative;
}

.app-usermenu__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--color-brand-secondary);
    border-radius: 48px;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--app-text);
    cursor: pointer;
}

.app-usermenu__arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.app-usermenu--open .app-usermenu__arrow {
    transform: rotate(180deg);
}

.app-usermenu__panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    z-index: 30;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 2px 8px 20px rgba(14, 33, 94, 0.12);
}

.app-usermenu--open .app-usermenu__panel {
    display: block;
}

/* Shared account nav (side panel + user menu + mobile burger) */
.app-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-nav__item {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--app-text);
    text-decoration: none;
    white-space: nowrap;
}

    .app-nav__item:hover {
        background: rgba(41, 37, 98, 0.06);
    }

.app-nav__item--active {
    background: rgba(41, 37, 98, 0.08);
    color: var(--color-brand-primary);
}

.app-nav__item--logout {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #eb001e;
}

    .app-nav__item--logout svg {
        flex-shrink: 0;
    }

/* Logout is a POST form (antiforgery); the button dresses as a regular nav item */
.app-nav__logoutform {
    margin: 0;
}

    .app-nav__logoutform .app-nav__item {
        width: 100%;
        background: none;
        border: 0;
        text-align: left;
        cursor: pointer;
    }

        .app-nav__logoutform .app-nav__item:hover {
            background: rgba(41, 37, 98, 0.06);
        }

/* Account area layout — one centered content column, no side menu */
.app-account {
    display: flex;
    width: 100%;
    margin-top: 24px;
}

.app-account__main {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 840px;
    min-width: 0;
    margin: 0 auto;
}

/* ==========================================================================
   Account console (Home) — profile head + hero cards + info + security
   ========================================================================== */
.app-console {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.app-console__card {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(17, 23, 34, 0.06), 0 1px 3px rgba(17, 23, 34, 0.1);
}

.app-console__card-title {
    margin: 0 0 8px;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 18px;
    color: var(--app-text);
}

/* Profile head — avatar with initials + full name */
.app-console__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0 8px;
    text-align: center;
}

.app-console__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: #f1f0ff;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 32px;
    color: #423a80;
    user-select: none;
}

.app-console__name {
    margin: 0;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 24px;
    color: var(--app-text);
}

/* Application hero card — text left, CTA right */
.app-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.app-hero__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.app-hero__title {
    margin: 0;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 18px;
    color: var(--app-text);
}

.app-hero__desc {
    margin: 0;
    font-family: var(--app-font);
    font-size: 14px;
    color: #6b7280;
}

.app-hero__cta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 48px;
    padding: 0 20px;
    background: var(--color-brand-primary);
    border-radius: 12px;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

    .app-hero__cta:hover {
        background: var(--color-brand-primary-dark);
    }

/* Personal information — label/value rows + read-only note */
.app-pinfo__rows {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.app-pinfo__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f1f4;
}

    .app-pinfo__row:last-child {
        border-bottom: none;
    }

.app-pinfo__label {
    margin: 0;
    font-family: var(--app-font);
    font-size: 14px;
    color: #6b7280;
}

.app-pinfo__value {
    margin: 0;
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    color: #111722;
    text-align: right;
    word-break: break-word;
}

.app-pinfo__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 16px;
    background: #f1f0ff;
    border-radius: 12px;
    font-family: var(--app-font);
    font-size: 14px;
    color: var(--app-text);
}

    .app-pinfo__note svg {
        flex-shrink: 0;
        margin-top: 2px;
    }

.app-pinfo__note-text {
    margin: 0;
}

/* Account-link offer — "link your email/phone as a second login" card */
.app-linkbox.app-console__card {
    background: #f1f0ff;
}

.app-linkbox__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 16px;
    color: var(--app-text);
}

    .app-linkbox__title svg {
        flex-shrink: 0;
        color: #423a80;
    }

.app-linkbox__body {
    margin: 0 0 16px;
    font-family: var(--app-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--app-text);
    word-break: break-word;
}

.app-linkbox__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .app-linkbox__actions form {
        margin: 0;
    }

.app-linkbox__btn {
    width: auto;
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
    cursor: pointer;
}

.app-linkbox__btn--ghost {
    background: transparent;
    color: var(--app-muted);
}

    .app-linkbox__btn--ghost:hover {
        color: var(--app-text);
    }

/* Green "linked to the account" badge on personal-info contact rows */
.app-pinfo__linked {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 4px;
    color: #1a7f43;
}

/* Security — full-width row-button opening the password modal */
.app-security.app-console__card {
    padding: 0;
}

.app-security__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 24px;
    background: none;
    border: 0;
    border-radius: 24px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .app-security__btn:hover {
        background: #fafafd;
    }

.app-security__ic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #f1f0ff;
    border-radius: 8px;
    color: #423a80;
}

.app-security__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.app-security__title {
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    color: #111722;
}

.app-security__sub {
    font-family: var(--app-font);
    font-size: 12px;
    color: #6b7280;
}

.app-security__arrow {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

/* Modal — centered dialog on desktop, bottom sheet on mobile */
.app-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 23, 34, 0.45);
}

.app-modal--open {
    display: flex;
}

.app-modal__panel {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(17, 23, 34, 0.08), 0 16px 32px rgba(17, 23, 34, 0.14);
}

.app-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 0;
}

.app-modal__title {
    margin: 0;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 18px;
    color: var(--app-text);
}

.app-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-radius: 12px;
    font-size: 18px;
    line-height: 1;
    color: var(--app-text);
    cursor: pointer;
}

    .app-modal__close:hover {
        background: #f4f4f8;
    }

.app-modal__body {
    padding: 16px 24px 24px;
}

/* Footer note */
.app-console__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 0 16px;
    text-align: center;
    font-family: var(--app-font);
    font-size: 13px;
    color: #6b7280;
}

    .app-console__footer a {
        color: var(--color-brand-primary);
    }

/* Mobile */
@media (max-width: 600px) {
    .app-account {
        margin-top: 16px;
    }

    .app-console__card {
        padding: 20px;
        border-radius: 20px;
    }

    .app-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .app-hero__cta {
        justify-content: center;
    }

    .app-console__name {
        font-size: 20px;
    }

    /* Bottom sheet: full-width panel pinned to the bottom edge */
    .app-modal {
        padding: 0;
        align-items: flex-end;
    }

    .app-modal__panel {
        max-width: none;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }

    .app-usermenu {
        width: 100%;
    }

    .app-usermenu__btn {
        display: none;
    }

    .app-usermenu__panel {
        display: block;
        position: static;
        min-width: 0;
        padding: 0;
        box-shadow: none;
    }
}

/* ==========================================================================
   Login (form card + promo carousel; carousel drops below on narrow screens)
   ========================================================================== */
.app-login {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1040px;
    margin: 32px auto 0;
    align-items: stretch;
    /* Promo carousel is commented out in the view — center the lone form card. */
    justify-content: center;
}

.app-login__form.app-card {
    flex: 0 0 540px;
    max-width: 540px;
}

.app-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Row with only the "forgot password" link (the remember-me checkbox is gone —
   sessions are always persistent) */
.app-login__row--right {
    justify-content: flex-end;
}

.app-login__register {
    margin: 4px 0 0;
    font-family: var(--app-font);
    font-weight: 400;
    font-size: 14px;
    color: var(--app-muted);
    text-align: center;
}

.app-login__legal {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--app-line);
}

    .app-login__legal a {
        font-family: var(--app-font);
        font-weight: 500;
        font-size: 13px;
        color: var(--app-link);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .app-login__legal a:hover {
            color: var(--app-text);
        }

.app-login__promo {
    flex: 1 1 0;
    min-width: 0;
    /* Floor so the carousel keeps a pleasant landscape size even when the form card is
       short (e.g. external login disabled) — otherwise stretch squashes it into a thin strip. */
    min-height: 540px;
    border-radius: var(--app-radius-card);
    overflow: hidden;
    box-shadow: 2px 4px 6px rgba(14, 33, 94, 0.08);
}

.app-promo,
.app-promo .carousel-inner,
.app-promo__item {
    height: 100%;
}

.app-promo__item {
    position: relative;
}

.app-promo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-promo__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px;
    color: #fff;
    background: linear-gradient(to top, rgba(20, 17, 70, 0.85), rgba(20, 17, 70, 0));
}

.app-promo__title {
    margin: 0;
    font-family: var(--app-font);
    font-weight: 600;
    font-size: 22px;
}

.app-promo__dash {
    display: block;
    width: 56px;
    height: 3px;
    margin: 16px 0;
    border-radius: 10px;
    background: var(--color-brand-accent, #ee2a7b);
}

.app-promo__text {
    margin: 0 0 20px;
    font-family: var(--app-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
}

.app-promo__btn {
    padding: 10px 20px;
    border: none;
    border-radius: 38px;
    background: #fff;
    color: var(--color-brand-primary);
    font-family: var(--app-font);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}

/* Carousel indicator dots (was a global bootstrap override in main.css) */
.app-promo .carousel-indicators li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.5;
    transition: width 0.3s ease, opacity 0.3s ease;
}

    /* Active slide → a wider brand-accent pill */
    .app-promo .carousel-indicators li.active {
        width: 22px;
        border-radius: 5px;
        opacity: 1;
        background-color: var(--color-brand-accent, #ee2a7b);
    }

/* Stack: form on top, carousel drops below */
@media (max-width: 900px) {
    .app-login {
        flex-direction: column;
        margin-top: 16px;
    }

    .app-login__form.app-card {
        flex: 0 0 auto;
        max-width: none;
    }

    /* In a column flex, flex-basis:0 would collapse the promo to 0 height — pin it explicitly
       and drop the desktop min-height floor so it doesn't force a tall strip on phones. */
    .app-login__promo {
        flex: 0 0 auto;
        order: 2;
        min-height: 0;
        height: 300px;
    }
}