/* plg_system_phonesms — login form (UIkit-native, no border-radius). */

/* PT Sans Narrow — used only for the pill-tab labels. Lets us cram three
   pill captions into a narrow card without the longest one getting clipped
   to "Email…". The JS auto-fitter still sweeps font-size after fonts load. */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');

/* Card sizing — equalize top/bottom padding (UIkit's stock card-body
   default is uneven once a uk-card-title is the first child). */
.phonesms-loginbox {
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    /* Hidden until JS finishes:
     *   1. inline pre-paint tab restore (right tab active before first paint)
     *   2. webfont swap (PT Sans Narrow takes over from Arial Narrow)
     *   3. fitTabs() — final font-size for the pills
     * Then `.is-ready` triggers the fade-in. The user never sees the
     * intermediate states, so no flicker.
     */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease, transform 400ms ease;
}
.phonesms-loginbox.is-ready {
    opacity: 1;
    transform: none;
}
.phonesms-loginbox.uk-card-body { padding: 20px; }
.phonesms-loginbox h2.uk-card-title {
    margin-top: 0;
    margin-bottom: 14px;
}

/* (Joomla's #system-message-container is intentionally NOT hidden — the
   plg_system_webauthn login flow injects messages into it (e.g. "введите
   имя пользователя") and Joomla's messages.min.js reads it back. Hiding
   it would silently swallow webauthn UX and crash some flows. The login
   form's own pre-existing flash messages are still relocated into the
   active panel by relocateJoomlaMessagesIntoActivePanel() in JS.) */

/* Unlock-success overlay — appears for ~1.2s after a verified email-code
   or phone-call login, just before form.submit() actually navigates away.
   Lock shackle pops out, keyhole pulses, "Добро пожаловать" fades in,
   then the whole card fades out so the next page (usually the profile)
   takes over smoothly. */
.phonesms-unlock {
    position: absolute;
    inset: 0;
    background: var(--uk-card-default-background, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.phonesms-loginbox.is-unlocking .phonesms-unlock {
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms ease, visibility 0s;
}

/* Whole-card fade-out starts immediately after the lock pops open,
   no idle pause: lock opens (0–600ms) → "Добро пожаловать" fades in
   (300–700ms) → card eases away (600–1000ms) → next page. */
.phonesms-loginbox.is-unlocking {
    transition: opacity 400ms ease 600ms, transform 400ms ease 600ms;
    opacity: 0;
    transform: translateY(-4px);
}

.phonesms-unlock__svg {
    width: 80px;
    height: 80px;
    overflow: visible;
}
.phonesms-unlock__shackle,
.phonesms-unlock__keyhole,
.phonesms-unlock__keyhole-stem,
.phonesms-unlock__body {
    transform-box: fill-box;
    transform-origin: center;
}

/* Shackle pops up & rotates open. */
.phonesms-loginbox.is-unlocking .phonesms-unlock__shackle {
    animation: phonesms-shackle-open 600ms cubic-bezier(.22,.9,.4,1.2) forwards;
}
@keyframes phonesms-shackle-open {
    0%   { transform: translateY(0) rotate(0); }
    50%  { transform: translateY(-2px) rotate(0); }
    100% { transform: translate(-2px, -10px) rotate(-30deg); }
}

/* Keyhole flashes once when the lock opens. */
.phonesms-loginbox.is-unlocking .phonesms-unlock__keyhole,
.phonesms-loginbox.is-unlocking .phonesms-unlock__keyhole-stem {
    animation: phonesms-keyhole-flash 500ms ease 150ms forwards;
}
@keyframes phonesms-keyhole-flash {
    0%   { opacity: 0.6; transform: scale(1); }
    35%  { opacity: 1;   transform: scale(1.4); }
    100% { opacity: 0.9; transform: scale(1); }
}

.phonesms-unlock__label {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
}
.phonesms-loginbox.is-unlocking .phonesms-unlock__label {
    animation: phonesms-welcome-fade 400ms ease 300ms forwards;
}
@keyframes phonesms-welcome-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* No rounded corners anywhere inside the loginbox — UIkit defaults are
   rounded; user wants squared. Spinner is the only intentional exception. */
.phonesms-loginbox,
.phonesms-loginbox .uk-card,
.phonesms-loginbox .uk-input,
.phonesms-loginbox .uk-button,
.phonesms-loginbox .uk-checkbox,
.phonesms-loginbox .uk-alert,
.phonesms-loginbox .phonesms-callbox,
.phonesms-loginbox .uk-subnav-pill > * > a {
    border-radius: 0 !important;
}

/* Pill-tab list — UIkit's stock `uk-subnav` puts a `padding-left: 20px` on
   each <li> (its way of doing inter-item gap) and a matching negative
   margin on the <ul>. That breaks `flex: 1` (each pill ends up offset
   right of where its share of the row begins). We zero those out and use
   a real `gap` between items, then let each pill stretch equally. The
   font-size is fluid via clamp() so labels keep fitting on narrow cards. */
.phonesms-loginbox .phonesms-tabs__list {
    margin: 0 0 12px !important;
    padding-left: 0;
    gap: 4px;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
}
.phonesms-loginbox .phonesms-tabs__list > * {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.phonesms-loginbox .phonesms-tabs__list > * > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    /* Size set by the JS auto-fitter (see login-form.js → fitTabs()).
       Same value applied to all three pills via the CSS variable on
       .phonesms-loginbox; falls back to 14px if JS hasn't run yet. */
    font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif;
    font-size: var(--phonesms-tab-fs, 14px);
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}
.phonesms-loginbox .phonesms-tab__label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Inline-SVG tab icons. Sized in em so they scale with the clamp()'d
   font-size on the pill — never so big they push the label out. */
.phonesms-loginbox .phonesms-tab__svg {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    overflow: visible;
}

/* Panels */
.phonesms-loginbox .phonesms-panel { display: none; }
.phonesms-loginbox .phonesms-panel.is-active { display: block; }
.phonesms-loginbox .phonesms-panel[hidden]   { display: none !important; }

/* (The pre-paint guard is now handled by the .phonesms-loadscreen overlay,
   which sits above the card body until the inline script removes the
   data-phonesms-pending attribute.) */

/* Code-input visual treatment — typography only, no colors. */
.phonesms-loginbox .phonesms-code-input {
    text-align: center;
    letter-spacing: 0.4em;
    font-feature-settings: "tnum";
    font-weight: 600;
    font-size: 1.05rem;
}

/* Remember-me checkbox label spacing */
.phonesms-loginbox .phonesms-remember > span { margin-left: 6px; }

/* Classic-tab links row — colors come from .uk-text-meta on the <p>. */
.phonesms-loginbox .phonesms-classic-links a {
    color: inherit;
    text-decoration: none;
}
.phonesms-loginbox .phonesms-classic-links a:hover { text-decoration: underline; }
.phonesms-loginbox .phonesms-classic-links__sep {
    margin: 0 6px;
    opacity: 0.5;
}

/* Inline meta row (resend timer + button) */
.phonesms-loginbox .phonesms-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

/* Phone callbox — UIkit muted background via utility class on the element
   would mean adding it in PHP; here we keep it self-contained but reuse the
   global muted token if the theme provides it (UIkit defaults to a light
   neutral; YOOtheme themes override it). */
.phonesms-loginbox .phonesms-callbox {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--uk-background-muted, #f8f8f8);
    border: 1px solid currentColor;
    border-color: rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.phonesms-loginbox .phonesms-callbox__phone {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    /* color comes from inherited theme; uk-text-emphasis on the element if
       a stronger contrast is needed. */
    color: inherit;
}
.phonesms-loginbox .phonesms-callbox__phone:hover { text-decoration: underline; }
.phonesms-loginbox .phonesms-callbox__waiting {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Spinner — uses currentColor so theme primary inherits via uk-text-primary
   class on the element. */
.phonesms-loginbox .phonesms-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: currentColor;
    border-radius: 50%; /* spinner needs a circle — explicit allowed */
    animation: phonesms-spin 0.8s linear infinite;
}
@keyframes phonesms-spin { to { transform: rotate(360deg); } }

/* Passkey button — small icon spacing */
.phonesms-loginbox .phonesms-passkey-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.phonesms-loginbox .phonesms-passkey-btn .phonesms-passkey-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    overflow: visible;
}

/* Error alert spacing override (uk-alert default has more padding) */
.phonesms-loginbox .phonesms-error {
    padding: 8px 12px;
    margin: 8px 0 0;
    text-align: center;
}


/* Universal phone mask — applied by media/.../js/phone-mask.js to login,
   profile and registration phone inputs. No padding-shifting overlay; just
   a wrapper that lets a 🇷🇺 flag fade in to the right when the number is
   complete (validity cue). */
.phonesms-phone-mask-wrap {
    position: relative;
    display: block;
}
.phonesms-phone-mask-wrap > input {
    width: 100%;
    box-sizing: border-box;
}
.phonesms-phone-mask-flag {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    font-size: 1.15em;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
}
.phonesms-phone-mask-wrap.is-valid > .phonesms-phone-mask-flag {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.phonesms-phone-mask-wrap.is-valid > input {
    padding-right: 36px;
}