/*
 * Form fields — THE shared input component. Figma master COMPONENT_SET "Input" (2623:9529), pinned
 * by the designer in Design-QA 2026-07-27: every sitewide field follows its state system, not just
 * the default look. Variants → implementation:
 *
 *   Input (default)      empty, unfocused: 46px pill, white, 1px --neutrali-pilka, label 14/17.92
 *                        w400 centred at the 24px inset.
 *   Aktyvus (focus)      border #07c881; label shrinks to 8/10.24 at the field top, value 14/17.92
 *                        w600 --juoda below it.
 *   Sekmingas (success)  same as focus, unfocused — wired to :user-valid (valid AFTER the user
 *                        edited + left the field; a server-prefilled value stays "Irasytas").
 *   Irasytas (filled)    border stays --neutrali-pilka, small label + w600 value.
 *   Error                border --ryski-raudona + an 8/10.24 message under the field; wired to
 *                        :user-invalid (native constraint validation) and .pv-field--error
 *                        (server-side/Symfony validation).
 *   Neaktyvus (disabled) bg --neutrali, border --neutrali-pilka, label + value --sub.
 *   Drop neparinktas /   same pill + an 8x4 chevron 20px from the right edge; the select keeps its
 *   Drop pasirinktas     value CENTRED (no floating label) — w400 --sub-pilka while the empty
 *                        option is selected, w600 --juoda once a real value is picked.
 *
 * Geometry is measured from the variant set: field 46x r48, 24px left inset, label cap-band at
 * y11–17 (floated) / vertically centred (resting), value cap-band at y25–35. The paddings below
 * land those cap bands with Inter's metrics (cap height .727em).
 *
 * A11y deltas from the comp, per the tokens.css precedent (PLAN §12 deferred #33): the label is a
 * real text node, so --sub-pilka (#969696, 2.8:1 on white) becomes --sub-pilka-shade and the error
 * message --ryski-raudona (3.9:1) becomes --ryski-raudona-shade. Border/stroke colours are the
 * comp's exact values (no text contrast rule applies to them).
 */

/* ---- The pill ----------------------------------------------------------- */
.input {
    width: 100%;
    height: 46px;
    padding: 0 24px;
    border: 1px solid var(--neutrali-pilka);
    border-radius: var(--radius-pill);
    background: var(--balta);
    font-size: 14px;
    line-height: 17.92px;
    color: var(--juoda);
    transition: border-color .2s ease;
}

.input::placeholder {
    color: var(--sub-pilka);
}

.input:disabled {
    background: var(--neutrali);
    border-color: var(--neutrali-pilka);
    color: var(--sub);
}

/* ---- Field wrapper (floating label) ------------------------------------- */
/* The wrapper is the <label>, so the title span labels the control natively (no `for`/id pair). */
.pv-field {
    position: relative;
    display: block;
}

/* Value sits low in the pill (cap band y25–35), leaving room for the floated title above it. */
.pv-field > input.input {
    padding-top: 14px;
    padding-bottom: 0;
    font-weight: 600;
}

.pv-field__label {
    position: absolute;
    /* (46 − 17.92) / 2 — vertically centred in the pill. A fixed top (not 50% + translate) keeps the
       float a single smooth interpolation. */
    top: 14.04px;
    left: 24px;
    font-size: 14px;
    line-height: 17.92px;
    font-weight: 400;
    color: var(--sub-pilka-shade);
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, line-height .15s ease;
}

/* Focused or filled → the title becomes the 8px line at the top of the field. */
.pv-field > input.input:focus + .pv-field__label,
.pv-field > input.input:not(:placeholder-shown) + .pv-field__label {
    top: 9px;
    font-size: 8px;
    line-height: 10.24px;
}

/* ---- States ------------------------------------------------------------- */
/* Aktyvus + Sekmingas. The comp draws focus as the green border only — no extra ring. */
.pv-field > .input:focus,
.pv-field > .input:user-valid {
    outline: none;
    border-color: var(--taskas-online);
}

/* Error last so it wins over focus/success. :user-invalid = native constraint validation after the
   field was left or the form submitted; .pv-field--error = server-side validation. */
.pv-field > .input:user-invalid,
.pv-field--error > .input {
    border-color: var(--ryski-raudona);
}

.pv-field__error {
    display: block;
    /* Comp: message cap band 6px below the 46px field. */
    margin-top: 4px;
    margin-left: 24px;
    font-size: 8px;
    line-height: 10.24px;
    color: var(--ryski-raudona-shade);
}

.pv-field:has(> .input:disabled) .pv-field__label {
    color: var(--sub);
}

/* ---- Password reveal ---------------------------------------------------- */
.pv-field--password > .input {
    padding-right: 52px;
}

.pv-field__eye {
    position: absolute;
    top: 23px;
    right: 20px;
    transform: translateY(-50%);
    display: inline-flex;
    padding: 4px;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.pv-field__eye img {
    display: block;
    width: 16px;
    height: 16px;
}

/* darker tint for the "visible" state */
.pv-field__eye[aria-pressed='true'] img {
    filter: brightness(0.5);
}

/* ---- Selects ------------------------------------------------------------ */
.pv-field > select.input {
    appearance: none;
    padding-right: 40px;
    font-weight: 600;
    background-image: url("../../images/figma/account/icon-chevron-down-1e1e1e-8x4-AgwYfMs.svg");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 8px 4px;
}

/* "Drop neparinktas" — nothing picked yet. */
.pv-field > select.input:has(option[value='']:checked) {
    font-weight: 400;
    color: var(--sub-pilka-shade);
}

/* ---- Mobile ------------------------------------------------------------- */
/* iOS Safari zooms the viewport whenever a focused control is under 16px, so the comp's 14/17.92
   value type is raised to 16/20.48 here. The pill keeps its 46px height: the top padding is
   re-derived so the value cap band lands back on the comp's y25–35 band (13px + the 4.42px cap
   inset of a 16px Inter line ≈ the 14px + 3.87px it replaces), and the label — never focusable,
   so never a zoom trigger — keeps its measured 14/8px sizes and offsets. */
@media (max-width: 900px) {
    .input {
        font-size: 16px;
        line-height: 20.48px;
    }

    .pv-field > input.input {
        padding-top: 13px;
    }

    /* 16×16 icon in a 36×36 target; the 10px padding replaces the 4px one-for-one against the
       inset so the icon itself does not move. */
    .pv-field__eye {
        right: 14px;
        padding: 10px;
    }
}