/* ================================================================
   APPLE HIG UI — INPUT COMPONENT SYSTEM
   input.css · Atom layer

   Design language: Apple Human Interface Guidelines
   ----------------------------------------------------------------
   Light + Dark mode. Self-contained token layer (no external
   colors.css dependency required — every token is defined below
   and can be overridden by loading a colors.css AFTER this file,
   or by setting `color-scheme` / `data-theme="dark"` on a
   container).

   Every existing class name and selector from the prior version
   is preserved — this is a refinement pass, not a rewrite. New
   size variants, `:has()`-driven states, `:is()/:where()`
   grouping, container queries, and `color-mix()` derived tints
   are layered on top.

   Behaviour (OTP auto-advance, password reveal, char counters,
   number steppers, tag input, floating labels, clear buttons,
   search interactions, paste + validation) is handled by the
   companion input.js — this file is styling only.
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   00. DESIGN TOKENS
   Apple system materials, SF-style type scale, HIG geometry.
   Change --color-primary in ONE place to re-theme every component.
════════════════════════════════════════════════════════════════ */
:root {
    color-scheme: light dark;
    /* ---- Brand / primary accent (your call-out color) ---- */
    --color-primary: #FF385C;
    --color-primary-hover: #E31C5F;
    --color-primary-active: #C7124F;
    --color-primary-alpha-sm: rgba(255, 56, 92, 0.08);
    --color-primary-alpha: rgba(255, 56, 92, 0.12);
    --color-primary-border: rgba(255, 56, 92, 0.35);

    /* ---- Apple system palette (light mode) ---- */
    --color-system-blue: #007AFF;
    --color-system-green: #34C759;
    --color-system-red: #FF3B30;
    --color-system-orange: #FF9500;
    --color-system-gray: #8E8E93;

    /* ---- Surfaces & text (Apple light-mode semantics) ---- */
    --color-surface: #FFFFFF;
    --color-bg-secondary: #F2F2F7;
    /* systemGroupedBackground */
    --color-surface-inset: #E5E5EA;
    --color-surface-disabled: #F2F2F7;

    --color-text-primary: #1D1D1F;
    --color-text-secondary: #3C3C43;
    /* at 60% used below */
    --color-text-secondary-60: rgba(60, 60, 67, 0.6);
    --color-text-tertiary-30: rgba(60, 60, 67, 0.3);
    --color-text-placeholder: rgba(60, 60, 67, 0.45);
    --color-text-muted: rgba(60, 60, 67, 0.5);
    --color-text-disabled: rgba(60, 60, 67, 0.35);
    --color-text-inverse: #FFFFFF;

    /* ---- Borders / separators (Apple hairlines) ---- */
    --color-border: rgba(60, 60, 67, 0.16);
    --color-border-light: rgba(60, 60, 67, 0.1);
    --color-border-dark: rgba(60, 60, 67, 0.29);
    --color-border-hover: rgba(60, 60, 67, 0.29);
    --color-border-focus: var(--color-primary);
    --color-border-disabled: rgba(60, 60, 67, 0.08);
    --color-separator: rgba(60, 60, 67, 0.16);

    /* ---- Semantic states ---- */
    --color-error: var(--color-system-red);
    --color-error-text: #D70015;
    --color-error-bg: rgba(255, 59, 48, 0.12);
    --color-success: var(--color-system-green);
    --color-success-text: #248A3D;
    --color-success-bg: rgba(52, 199, 89, 0.12);
    --color-warning-text: #C25E00;

    /* ---- Glass / translucent materials (Apple "materials") ---- */
    --color-glass-bg: rgba(255, 255, 255, 0.6);
    --color-glass-bg-thick: rgba(255, 255, 255, 0.78);
    --color-glass-bg-thin: rgba(255, 255, 255, 0.42);
    --color-glass-border: rgba(255, 255, 255, 0.5);
    --color-glass-tint: rgba(255, 56, 92, 0.08);
    --color-fill-primary: rgba(120, 120, 128, 0.2);
    --color-ghost-hover-bg: rgba(60, 60, 67, 0.06);
    --color-ghost-pressed-bg: rgba(60, 60, 67, 0.1);

    /* ---- Focus rings (Apple uses a soft 4px halo, not a hard blue ring) ---- */
    --focus-ring: 0 0 0 4px var(--color-primary-alpha-sm);
    --focus-ring-dark: 0 0 0 4px rgba(29, 29, 31, 0.08);

    /* ---- Elevation — Apple shadows are soft, low-contrast, diffuse ---- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Field-role aliases */
    --input-bg: var(--color-surface);
    --input-bg-glass: var(--color-glass-bg);
    --input-text: var(--color-text-primary);
    --input-placeholder: var(--color-text-placeholder);
    --input-border: var(--color-border);
    --input-border-hover: var(--color-border-hover);
    --input-border-focus: var(--color-border-focus);
    --input-disabled-bg: var(--color-surface-disabled);
    --input-disabled-text: var(--color-text-disabled);
    --input-disabled-border: var(--color-border-disabled);
    --input-error-border: var(--color-error);
    --input-error-ring: var(--color-error-bg);
    --input-success-border: var(--color-success);
    --input-success-ring: var(--color-success-bg);
    --input-focus-ring: var(--focus-ring);
    --input-focus-ring-red: 0 0 0 4px var(--color-error-bg);

    /* OTP accent */
    --otp-active-border: var(--color-primary);
    --otp-active-bg: var(--color-primary-alpha-sm);
    --otp-caret: var(--color-primary);

    --input-shadow: var(--shadow-sm);
    --input-shadow-focus: var(--shadow-md);

    /* ---- Apple HIG geometry — continuous "squircle" corner radii ---- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    /* Apple's standard control radius */
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Sizing — Apple's 44pt minimum hit target, applied to control heights */
    --input-h-sm: 36px;
    --input-h-md: 44px;
    /* HIG minimum tappable height */
    --input-h-lg: 50px;

    /* Horizontal padding */
    --input-px-sm: 12px;
    --input-px-md: 14px;
    --input-px-lg: 18px;

    /* Typography — SF Pro system stack, HIG type scale (Body = 17pt) */
    --font-system:
        -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Helvetica Neue", Arial, sans-serif;
    --input-fs-sm: 13px;
    --input-fs-md: 15px;
    --input-fs-lg: 17px;
    /* HIG Body */

    /* Apple fields use a consistent hairline border; emphasis comes from
       the focus ring + tint, not from border thickening. */
    --input-bw: 1px;
    --input-bw-focus: 1px;

    /* Motion — Apple's standard easing: quick, no bounce for functional UI */
    --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --input-transition:
        border-color 200ms var(--ease-standard),
        box-shadow 200ms var(--ease-standard),
        background 200ms var(--ease-standard),
        opacity 200ms var(--ease-standard),
        transform 200ms var(--ease-standard);

    /* ---- Extra size step used by -xs / -xl variants ---- */
    --input-h-xs: 30px;
    --input-h-xl: 56px;
    --input-px-xs: 10px;
    --input-px-xl: 20px;
    --input-fs-xs: 12px;
    --input-fs-xl: 19px;

    /* ---- Clear button (search fields / text fields with data-clearable) ---- */
    --clear-btn-size: 20px;
    --clear-btn-bg: var(--color-fill-primary);
    --clear-btn-bg-hover: rgba(120, 120, 128, 0.32);
    --clear-btn-fg: var(--color-text-inverse);

    /* Glass inner top highlight + control "thumb" surfaces — white in
       light mode, a soft light-gray in dark mode (pure white on a
       near-black sheet reads as a blown highlight, not a material). */
    --color-glass-highlight: rgba(255, 255, 255, 0.6);
    --color-thumb-surface: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════════
   00b. DARK MODE TOKENS
   Apple's dark-mode semantics: elevated surfaces get *lighter* as
   you go up the z-axis, hairlines get more opaque (not less), and
   the accent stays identical — only its alpha washes shift.
   Applies automatically via `prefers-color-scheme: dark`, or force
   it explicitly with `[data-theme="dark"]` / `.dark` on <html> or
   any ancestor (and reverse it with `[data-theme="light"]`).
════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #FF4D6D;
        --color-primary-hover: #FF6B85;
        --color-primary-active: #E8395A;
        --color-primary-alpha-sm: rgba(255, 77, 109, 0.16);
        --color-primary-alpha: rgba(255, 77, 109, 0.22);
        --color-primary-border: rgba(255, 77, 109, 0.4);

        --color-system-blue: #0A84FF;
        --color-system-green: #30D158;
        --color-system-red: #FF453A;
        --color-system-orange: #FF9F0A;
        --color-system-gray: #98989D;

        --color-surface: #1C1C1E;
        --color-bg-secondary: #000000;
        --color-surface-inset: #2C2C2E;
        --color-surface-disabled: #232325;

        --color-text-primary: #F5F5F7;
        --color-text-secondary: #EBEBF5;
        --color-text-secondary-60: rgba(235, 235, 245, 0.6);
        --color-text-tertiary-30: rgba(235, 235, 245, 0.3);
        --color-text-placeholder: rgba(235, 235, 245, 0.45);
        --color-text-muted: rgba(235, 235, 245, 0.5);
        --color-text-disabled: rgba(235, 235, 245, 0.35);
        --color-text-inverse: #1C1C1E;

        --color-border: rgba(235, 235, 245, 0.16);
        --color-border-light: rgba(235, 235, 245, 0.1);
        --color-border-dark: rgba(235, 235, 245, 0.29);
        --color-border-hover: rgba(235, 235, 245, 0.29);
        --color-border-disabled: rgba(235, 235, 245, 0.08);
        --color-separator: rgba(235, 235, 245, 0.16);

        --color-error-text: #FF6961;
        --color-error-bg: rgba(255, 69, 58, 0.18);
        --color-success-text: #32D74B;
        --color-success-bg: rgba(48, 209, 75, 0.18);
        --color-warning-text: #FFB340;

        --color-glass-bg: rgba(28, 28, 30, 0.6);
        --color-glass-bg-thick: rgba(44, 44, 46, 0.78);
        --color-glass-bg-thin: rgba(28, 28, 30, 0.42);
        --color-glass-border: rgba(255, 255, 255, 0.12);
        --color-glass-tint: rgba(255, 77, 109, 0.14);
        --color-fill-primary: rgba(120, 120, 128, 0.32);
        --color-ghost-hover-bg: rgba(235, 235, 245, 0.08);
        --color-ghost-pressed-bg: rgba(235, 235, 245, 0.13);

        --focus-ring: 0 0 0 4px var(--color-primary-alpha-sm);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.28);
        --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.56), 0 4px 12px rgba(0, 0, 0, 0.34);

        --clear-btn-bg: var(--color-fill-primary);
        --clear-btn-bg-hover: rgba(120, 120, 128, 0.44);

        --color-glass-highlight: rgba(255, 255, 255, 0.14);
        --color-thumb-surface: #E4E4E6;
    }
}

/* Explicit dark override (data-theme="dark") — same values, applied
   regardless of OS-level scheme so a manual in-app toggle works. */
:root[data-theme="dark"] {
    --color-primary: #FF4D6D;
    --color-primary-hover: #FF6B85;
    --color-primary-active: #E8395A;
    --color-primary-alpha-sm: rgba(255, 77, 109, 0.16);
    --color-primary-alpha: rgba(255, 77, 109, 0.22);
    --color-primary-border: rgba(255, 77, 109, 0.4);

    --color-system-blue: #0A84FF;
    --color-system-green: #30D158;
    --color-system-red: #FF453A;
    --color-system-orange: #FF9F0A;
    --color-system-gray: #98989D;

    --color-surface: #1C1C1E;
    --color-bg-secondary: #000000;
    --color-surface-inset: #2C2C2E;
    --color-surface-disabled: #232325;

    --color-text-primary: #F5F5F7;
    --color-text-secondary: #EBEBF5;
    --color-text-secondary-60: rgba(235, 235, 245, 0.6);
    --color-text-tertiary-30: rgba(235, 235, 245, 0.3);
    --color-text-placeholder: rgba(235, 235, 245, 0.45);
    --color-text-muted: rgba(235, 235, 245, 0.5);
    --color-text-disabled: rgba(235, 235, 245, 0.35);
    --color-text-inverse: #1C1C1E;

    --color-border: rgba(235, 235, 245, 0.16);
    --color-border-light: rgba(235, 235, 245, 0.1);
    --color-border-dark: rgba(235, 235, 245, 0.29);
    --color-border-hover: rgba(235, 235, 245, 0.29);
    --color-border-disabled: rgba(235, 235, 245, 0.08);
    --color-separator: rgba(235, 235, 245, 0.16);

    --color-error-text: #FF6961;
    --color-error-bg: rgba(255, 69, 58, 0.18);
    --color-success-text: #32D74B;
    --color-success-bg: rgba(48, 209, 75, 0.18);
    --color-warning-text: #FFB340;

    --color-glass-bg: rgba(28, 28, 30, 0.6);
    --color-glass-bg-thick: rgba(44, 44, 46, 0.78);
    --color-glass-bg-thin: rgba(28, 28, 30, 0.42);
    --color-glass-border: rgba(255, 255, 255, 0.12);
    --color-glass-tint: rgba(255, 77, 109, 0.14);
    --color-fill-primary: rgba(120, 120, 128, 0.32);
    --color-ghost-hover-bg: rgba(235, 235, 245, 0.08);
    --color-ghost-pressed-bg: rgba(235, 235, 245, 0.13);

    --focus-ring: 0 0 0 4px var(--color-primary-alpha-sm);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.56), 0 4px 12px rgba(0, 0, 0, 0.34);

    --clear-btn-bg: var(--color-fill-primary);
    --clear-btn-bg-hover: rgba(120, 120, 128, 0.44);

    --color-glass-highlight: rgba(255, 255, 255, 0.14);
    --color-thumb-surface: #E4E4E6;
}


/* ════════════════════════════════════════════════════════════════
   01. FIELD WRAPPER
════════════════════════════════════════════════════════════════ */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    font-family: var(--font-system);
}

.field-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.field-row .field {
    flex: 1;
    min-width: 200px;
}


/* ════════════════════════════════════════════════════════════════
   02. LABEL
   Apple: 13pt caption weight, secondary-label color, tight tracking.
════════════════════════════════════════════════════════════════ */
.field-label {
    display: block;
    font-family: var(--font-system);
    font-size: 13px;
    font-weight: 590;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--color-text-secondary);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

.field-label .required {
    color: var(--color-primary);
    margin-left: 3px;
}


/* ════════════════════════════════════════════════════════════════
   03. HELPER / ERROR / SUCCESS TEXT
════════════════════════════════════════════════════════════════ */
.field-helper {
    font-family: var(--font-system);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-secondary-60);
    -webkit-font-smoothing: antialiased;
}

.field-helper.is-error {
    color: var(--color-error-text);
}

.field-helper.is-success {
    color: var(--color-success-text);
}

.field-helper.is-warn {
    color: var(--color-warning-text);
}


/* ════════════════════════════════════════════════════════════════
   04. BASE INPUT — .input
   Apple signature: 44pt height, hairline border, soft focus halo
   (no color-shifted border on focus — the ring does the work),
   continuous corner radius, SF Pro Text at 15–17pt.
════════════════════════════════════════════════════════════════ */
.input {
    display: block;
    width: 100%;
    height: var(--input-h-md);
    padding-inline: var(--input-px-md);

    font-size: var(--input-fs-md);
    font-family: var(--font-system);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--input-text);
    -webkit-font-smoothing: antialiased;

    background: var(--input-bg);
    border: var(--input-bw) solid var(--input-border);
    border-radius: var(--radius-md);
    outline: none;
    box-shadow: var(--shadow-xs);

    transition: var(--input-transition);
    -webkit-appearance: none;
    appearance: none;
}

.input::placeholder {
    color: var(--input-placeholder);
    font-weight: 400;
    opacity: 1;
}

/* Hover — Apple barely changes hover state on fields; subtle border firm-up only */
.input:hover:is(:not(:disabled):not(.is-error):not(.is-success)) {
    border-color: var(--input-border-hover);
}

/* Focus — soft halo + primary-tinted hairline, the HIG way.
   :focus-visible keeps the ring for keyboard/AT users while still
   showing the plain :focus state (background swap only) for a mouse
   click, matching how macOS text fields behave. */
.input:focus:is(:not(.is-error):not(.is-success)) {
    background: var(--color-surface);
}

.input:focus-visible:is(:not(.is-error):not(.is-success)) {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}

.input:focus:is(:not(.is-error):not(.is-success)):not(:focus-visible) {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}

/* Disabled */
.input:disabled {
    background: var(--input-disabled-bg);
    color: var(--input-disabled-text);
    border-color: var(--input-disabled-border);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .6;
}

/* Error */
.input.is-error {
    border-color: var(--input-error-border);
    box-shadow: 0 0 0 4px var(--input-error-ring);
}

.input.is-error:focus {
    border-color: var(--input-error-border);
    box-shadow: 0 0 0 4px var(--input-error-ring);
}

/* Success */
.input.is-success {
    border-color: var(--input-success-border);
    box-shadow: 0 0 0 4px var(--input-success-ring);
}

/* Remove browser spinners */
.input[type="number"]::-webkit-inner-spin-button,
.input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.input[type="number"] {
    -moz-appearance: textfield;
}

/* Date / time — the native picker UI (calendar flyout, wheel) follows
   whichever scheme the page is in, so it never looks like a light-mode
   popover glued onto a dark-mode field. */
.input[type="date"],
.input[type="time"],
.input[type="datetime-local"],
.input[type="month"],
.input[type="week"] {
    color-scheme: light dark;
}


/* ════════════════════════════════════════════════════════════════
   05. SIZE MODIFIERS
   Four steps, smallest to largest. `-sm` / `-md` (implicit, the
   base `.input`) / `-lg` ship in the original file; `-xs` (compact,
   inline-table-style rows) and `-xl` (hero / marketing forms) are
   new, same naming convention, so existing markup is untouched.
════════════════════════════════════════════════════════════════ */
.input-xs {
    height: var(--input-h-xs);
    padding-inline: var(--input-px-xs);
    font-size: var(--input-fs-xs);
    border-radius: var(--radius-xs);
}

.input-sm {
    height: var(--input-h-sm);
    padding-inline: var(--input-px-sm);
    font-size: var(--input-fs-sm);
    border-radius: var(--radius-sm);
}

.input-lg {
    height: var(--input-h-lg);
    padding-inline: var(--input-px-lg);
    font-size: var(--input-fs-lg);
    border-radius: var(--radius-lg);
}

.input-xl {
    height: var(--input-h-xl);
    padding-inline: var(--input-px-xl);
    font-size: var(--input-fs-xl);
    border-radius: var(--radius-lg);
}


/* ════════════════════════════════════════════════════════════════
   06. ICON WRAP — .input-wrap
════════════════════════════════════════════════════════════════ */
.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    container-type: inline-size;
}

.input-wrap .input {
    padding-inline-start: 42px;
}

.input-wrap.icon-sm .input {
    padding-inline-start: 34px;
}

.input-wrap.icon-lg .input {
    padding-inline-start: 48px;
}

.input-wrap.icon-right .input {
    padding-inline-start: var(--input-px-md);
    padding-inline-end: 42px;
}

.input-wrap.icon-both .input {
    padding-inline-start: 42px;
    padding-inline-end: 42px;
}

/* A clearable field needs extra end-padding so typed text never
   runs under the × button — added automatically by input.js via
   [data-clearable], no markup changes required beyond that attribute. */
.input-wrap:has(.input-clear-btn) .input {
    padding-inline-end: 38px;
}

.input-wrap.icon-both:has(.input-clear-btn) .input,
.input-wrap.icon-right:has(.input-clear-btn) .input {
    padding-inline-end: 68px;
}

.input-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 180ms var(--ease-standard);
}

.input-wrap.icon-right .input-icon,
.input-wrap .input-icon-right {
    inset-inline-start: auto;
    inset-inline-end: 14px;
}

.input-wrap:focus-within .input-icon {
    color: var(--color-primary);
}

/* ---- Clear ("×") button — appended by input.js to any element
   carrying [data-clearable] once it has a non-empty value. ---- */
.input-clear-btn {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%) scale(1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--clear-btn-size);
    height: var(--clear-btn-size);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--clear-btn-bg);
    color: var(--clear-btn-fg);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 140ms var(--ease-standard),
        background 140ms var(--ease-standard),
        transform 120ms var(--ease-standard);
}

.input-clear-btn svg {
    width: 60%;
    height: 60%;
}

/* Only visible once the field actually has content — input.js
   toggles `.is-visible`; kept as a class (not display:none) so the
   fade transition can play in both directions. */
.input-clear-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.input-clear-btn:hover {
    background: var(--clear-btn-bg-hover);
}

.input-clear-btn:active {
    transform: translateY(-50%) scale(0.88);
}

.input-clear-btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.input-wrap.icon-right .input-clear-btn,
.input-wrap.icon-both .input-clear-btn {
    inset-inline-end: 42px;
}


/* ════════════════════════════════════════════════════════════════
   07. SEARCH INPUT
   Apple: pill-shaped, systemGray6 fill, no border until focused —
   this is the exact Spotlight / Settings search-bar treatment.
════════════════════════════════════════════════════════════════ */
.input-search {
    border-radius: var(--radius-pill);
    padding-inline-start: 40px;
    height: var(--input-h-md);
    background: var(--color-bg-secondary);
    border: var(--input-bw) solid transparent;
    box-shadow: none;
    text-align: start;
    transition: var(--input-transition), padding 160ms var(--ease-standard);
}

/* Apple's search field centers its placeholder+icon when idle and
   empty, then left-aligns once focused or filled — the exact
   Spotlight / macOS Settings search behaviour. */
.input-search:not(:focus):placeholder-shown {
    text-align: center;
    padding-inline-start: 40px;
    padding-inline-end: 40px;
}

.input-search:hover:not(:focus) {
    background: var(--color-surface-inset);
}

.input-search:focus {
    background: var(--color-surface);
    text-align: start;
}

.input-search:focus-visible {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring), var(--shadow-sm);
}

.input-search:focus:not(:focus-visible) {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring), var(--shadow-sm);
}

/* Size variants for the search pill, matching the -xs/-sm/-lg/-xl scale. */
.input-search.input-xs {
    padding-inline-start: 32px;
}

.input-search.input-sm {
    padding-inline-start: 34px;
}

.input-search.input-lg {
    padding-inline-start: 46px;
}

.input-search.input-xl {
    padding-inline-start: 52px;
}


/* ════════════════════════════════════════════════════════════════
   08. PASSWORD TOGGLE — .pw-toggle
════════════════════════════════════════════════════════════════ */
.pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard);
    -webkit-font-smoothing: antialiased;
}

.pw-toggle:hover {
    background: var(--color-ghost-hover-bg);
    color: var(--color-text-primary);
}

.pw-toggle:active {
    background: var(--color-ghost-pressed-bg);
    transform: translateY(-50%) scale(0.94);
}

.pw-toggle:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}


/* ════════════════════════════════════════════════════════════════
   09. TEXTAREA — .textarea
════════════════════════════════════════════════════════════════ */
.textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 12px var(--input-px-md);
    font-size: var(--input-fs-md);
    font-family: var(--font-system);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--input-text);
    background: var(--input-bg);
    border: var(--input-bw) solid var(--input-border);
    border-radius: var(--radius-md);
    outline: none;
    resize: vertical;
    box-shadow: var(--shadow-xs);
    -webkit-font-smoothing: antialiased;
    transition: var(--input-transition);
}

.textarea::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

.textarea:hover:not(:disabled) {
    border-color: var(--input-border-hover);
}

.textarea:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}

.textarea:disabled {
    background: var(--input-disabled-bg);
    color: var(--input-disabled-text);
    border-color: var(--input-disabled-border);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .6;
    resize: none;
}

.textarea.is-error {
    border-color: var(--input-error-border);
    box-shadow: 0 0 0 4px var(--input-error-ring);
}

.textarea.is-success {
    border-color: var(--input-success-border);
    box-shadow: 0 0 0 4px var(--input-success-ring);
}

.textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.textarea-count {
    font-size: 11px;
    font-family: var(--font-system);
    color: var(--color-text-muted);
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.textarea-count.is-near {
    color: var(--color-warning-text);
}

.textarea-count.is-max {
    color: var(--color-error-text);
}


/* ════════════════════════════════════════════════════════════════
   10. NUMBER STEPPER — .number-wrap
   Apple: the classic "stepper" — two chevrons, hairline divider.
════════════════════════════════════════════════════════════════ */
.number-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.number-wrap .input {
    padding-right: 48px;
}

.number-stepper {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border-light);
    overflow: hidden;
    border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
}

.stepper-btn {
    flex: 1;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    transition: background 140ms var(--ease-standard), color 140ms var(--ease-standard);
}

.stepper-btn:first-child {
    border-bottom: 1px solid var(--color-border-light);
}

.stepper-btn:hover {
    background: var(--color-surface-inset);
}

.stepper-btn:active {
    background: var(--color-border-dark);
    color: var(--color-text-inverse);
}

.stepper-btn:focus-visible {
    box-shadow: inset var(--focus-ring);
    outline: none;
}


/* ════════════════════════════════════════════════════════════════
   11. PHONE COMPOUND — .phone-wrap + .country-select
════════════════════════════════════════════════════════════════ */
.phone-wrap {
    display: flex;
    width: 100%;
}

.country-select {
    height: var(--input-h-md);
    padding: 0 30px 0 14px;
    font-size: var(--input-fs-md);
    font-family: var(--font-system);
    font-weight: 400;
    color: var(--input-text);
    background-color: var(--color-bg-secondary);
    border: var(--input-bw) solid var(--input-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233C3C43' stroke-opacity='0.6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px;
    transition: var(--input-transition);
}

.country-select:hover {
    border-color: var(--input-border-hover);
}

.country-select:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
    z-index: 1;
}

.phone-wrap .input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}


/* ════════════════════════════════════════════════════════════════
   12. SELECT — .select-wrap + .select-native
════════════════════════════════════════════════════════════════ */
.select-wrap {
    position: relative;
    width: 100%;
}

.select-native {
    height: var(--input-h-md);
    padding: 0 42px 0 var(--input-px-md);
    font-size: var(--input-fs-md);
    font-family: var(--font-system);
    font-weight: 400;
    color: var(--input-text);
    background: var(--input-bg);
    border: var(--input-bw) solid var(--input-border);
    border-radius: var(--radius-md);
    outline: none;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: var(--shadow-xs);
    transition: var(--input-transition);
}

.select-native:hover:not(:disabled) {
    border-color: var(--input-border-hover);
}

.select-native:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}

.select-native:disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
}

.select-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    transition: transform 220ms var(--ease-standard);
}

.select-wrap:focus-within .select-caret {
    transform: translateY(-50%) rotate(180deg);
    color: var(--color-primary);
}


/* ════════════════════════════════════════════════════════════════
   13. RANGE SLIDER
   Apple: thin track, primary-filled progress, plain white thumb
   with a soft drop shadow — the exact iOS/macOS slider anatomy.
════════════════════════════════════════════════════════════════ */
.range-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.range-val {
    font-family: var(--font-system);
    font-size: 15px;
    font-weight: 590;
    color: var(--color-text-primary);
    min-width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right,
            var(--color-primary) 0%,
            var(--color-primary) var(--pct, 0%),
            var(--color-fill-primary) var(--pct, 0%),
            var(--color-fill-primary) 100%);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--color-thumb-surface);
    border: none;
    box-shadow: var(--shadow-md);
    cursor: grab;
    will-change: transform, box-shadow;
    transition: transform 140ms var(--ease-standard), box-shadow 140ms var(--ease-standard);
}

input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: var(--shadow-lg);
}

input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.12);
    box-shadow: var(--shadow-lg);
}

input[type="range"]::-moz-range-thumb {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--color-thumb-surface);
    border: none;
    box-shadow: var(--shadow-md);
    cursor: grab;
    transition: transform 140ms var(--ease-standard), box-shadow 140ms var(--ease-standard);
}

input[type="range"]::-moz-range-thumb:hover {
    box-shadow: var(--shadow-lg);
}

input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.12);
    box-shadow: var(--shadow-lg);
}

input[type="range"]:focus-visible {
    outline: none;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--focus-ring), var(--shadow-md);
}


/* ════════════════════════════════════════════════════════════════
   14. OTP / PIN — .otp-wrap + .otp-input
════════════════════════════════════════════════════════════════ */
.otp-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}

.otp-sep {
    font-family: var(--font-system);
    font-size: 20px;
    font-weight: 300;
    color: var(--color-text-muted);
    padding: 0 4px;
    line-height: 1;
    user-select: none;
}

.otp-input {
    width: 50px;
    height: 56px;
    font-size: 22px;
    font-weight: 590;
    font-family: var(--font-system);
    text-align: center;
    letter-spacing: 0;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: var(--input-bw) solid transparent;
    border-radius: var(--radius-md);
    outline: none;
    caret-color: var(--otp-caret);
    box-shadow: none;
    -webkit-font-smoothing: antialiased;
    transition:
        border-color 180ms var(--ease-standard),
        box-shadow 180ms var(--ease-standard),
        transform 160ms var(--ease-spring),
        background 180ms var(--ease-standard);
}

.otp-input:focus {
    border-color: var(--otp-active-border);
    box-shadow: var(--focus-ring);
    transform: scale(1.05);
    background: var(--color-surface);
}

.otp-input.is-filled {
    border-color: transparent;
    background: var(--otp-active-bg);
    color: var(--color-primary);
}

.otp-input.is-error {
    border-color: var(--input-error-border);
    box-shadow: 0 0 0 4px var(--input-error-ring);
    background: var(--color-surface);
}

.otp-input-lg {
    width: 60px;
    height: 68px;
    font-size: 28px;
    border-radius: var(--radius-lg);
}

.otp-input-sm {
    width: 42px;
    height: 48px;
    font-size: 18px;
    border-radius: var(--radius-sm);
}


/* ════════════════════════════════════════════════════════════════
   15. CHECKBOX — .checkbox-wrap
   Apple: rounded square, primary fill + white checkmark when on.
════════════════════════════════════════════════════════════════ */
.checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-system);
}

.checkbox-wrap input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 21px;
    height: 21px;
    min-width: 21px;
    border: var(--input-bw) solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    cursor: pointer;
    position: relative;
    margin-top: 1px;
    transition: border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard), transform 160ms var(--ease-spring);
    outline: none;
    box-shadow: var(--shadow-xs);
}

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

.checkbox-wrap input[type="checkbox"]:focus-visible {
    box-shadow: var(--focus-ring);
}

.checkbox-wrap input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
    transform: scale(1.04);
}

.checkbox-wrap input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6.5px;
    width: 5px;
    height: 10px;
    border: 2px solid var(--color-text-inverse);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.checkbox-wrap input[type="checkbox"]:indeterminate {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}

.checkbox-wrap input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4.5px;
    right: 4.5px;
    height: 2px;
    background: var(--color-text-inverse);
    transform: translateY(-50%);
    border: none;
}

.checkbox-label {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.checkbox-sub {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary-60);
    margin-top: 2px;
}


/* ════════════════════════════════════════════════════════════════
   16. RADIO — .radio-wrap
════════════════════════════════════════════════════════════════ */
.radio-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-system);
}

.radio-wrap input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 21px;
    height: 21px;
    min-width: 21px;
    border: var(--input-bw) solid var(--input-border);
    border-radius: 50%;
    background: var(--input-bg);
    cursor: pointer;
    position: relative;
    margin-top: 1px;
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 160ms var(--ease-standard), background 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}

.radio-wrap input[type="radio"]:hover {
    border-color: var(--color-primary);
}

.radio-wrap input[type="radio"]:focus-visible {
    box-shadow: var(--focus-ring);
}

.radio-wrap input[type="radio"]:checked {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: none;
}

.radio-wrap input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius: 50%;
    background: var(--color-primary);
}

.radio-label {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.radio-sub {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary-60);
    margin-top: 2px;
}


/* ════════════════════════════════════════════════════════════════
   17. GLASSMORPHISM SET — .glass-* variants
   Apple's "Materials": frosted, saturated backdrop blur, hairline
   inner highlight — the exact language of Control Center / Sheets.
════════════════════════════════════════════════════════════════ */
.glass-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    font-family: var(--font-system);
}

.glass-label {
    display: block;
    font-size: 11px;
    font-weight: 590;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-secondary-60);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

.input-glass {
    display: block;
    width: 100%;
    height: var(--input-h-lg);
    padding: 0 var(--input-px-lg);
    font-size: var(--input-fs-lg);
    font-family: var(--font-system);
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--color-text-primary);
    background: var(--color-glass-bg);
    border: var(--input-bw) solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    outline: none;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow:
        0 1px 0 var(--color-glass-highlight) inset,
        0 0 0 1px var(--color-glass-border),
        var(--shadow-md);
    transition:
        border-color 200ms var(--ease-standard),
        box-shadow 200ms var(--ease-standard),
        background 200ms var(--ease-standard);
    -webkit-font-smoothing: antialiased;
}

.input-glass::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.input-glass:hover:not(:disabled) {
    background: var(--color-glass-bg-thick);
    box-shadow:
        0 1px 0 var(--color-glass-highlight) inset,
        0 0 0 1px var(--color-separator),
        var(--shadow-md);
}

.input-glass:focus {
    background: var(--color-glass-bg-thick);
    border-color: var(--color-primary);
    box-shadow:
        0 1px 0 var(--color-glass-highlight) inset,
        0 0 0 1px var(--color-primary),
        var(--focus-ring),
        var(--shadow-lg);
}

.input-glass:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.textarea-glass {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 14px var(--input-px-lg);
    font-size: var(--input-fs-md);
    font-family: var(--font-system);
    line-height: 1.5;
    letter-spacing: -.01em;
    color: var(--color-text-primary);
    background: var(--color-glass-bg);
    border: var(--input-bw) solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    outline: none;
    resize: vertical;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow:
        0 1px 0 var(--color-glass-highlight) inset,
        var(--shadow-sm);
    transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), background 200ms var(--ease-standard);
    -webkit-font-smoothing: antialiased;
}

.textarea-glass::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.textarea-glass:focus {
    background: var(--color-glass-bg-thick);
    border-color: var(--color-primary);
    box-shadow:
        0 1px 0 var(--color-glass-highlight) inset,
        0 0 0 1px var(--color-primary),
        var(--focus-ring),
        var(--shadow-lg);
}

.select-glass {
    height: var(--input-h-lg);
    padding: 0 42px 0 var(--input-px-lg);
    font-size: var(--input-fs-md);
    font-family: var(--font-system);
    color: var(--color-text-primary);
    background: var(--color-glass-bg);
    border: var(--input-bw) solid var(--color-glass-border);
    border-radius: var(--radius-lg);
    outline: none;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), background 200ms var(--ease-standard);
}

.select-glass:focus {
    background: var(--color-glass-bg-thick);
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 1px var(--color-primary),
        var(--focus-ring),
        var(--shadow-lg);
}

.otp-glass .otp-input {
    background: var(--color-glass-bg);
    border-color: var(--color-glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
}

.otp-glass .otp-input:focus {
    background: var(--color-glass-tint);
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 1px var(--color-primary),
        var(--focus-ring),
        var(--shadow-md);
}

.otp-glass .otp-input.is-filled {
    background: var(--color-glass-tint);
    border-color: var(--color-primary);
}

.input-glass-search {
    border-radius: var(--radius-pill);
    padding-left: 44px;
    height: var(--input-h-md);
    font-size: var(--input-fs-md);
    background: var(--color-glass-bg-thin);
    border: var(--input-bw) solid var(--color-glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
}

.input-glass-search:focus {
    background: var(--color-glass-bg-thick);
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 1px var(--color-primary),
        var(--focus-ring),
        var(--shadow-md);
}

.input-glass-tinted {
    background: var(--color-glass-tint);
    border-color: var(--color-primary-border);
}

.input-glass-tinted:focus {
    background: var(--color-glass-tint);
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 1px var(--color-primary),
        var(--focus-ring),
        var(--shadow-lg);
}

.glass-panel {
    background: var(--color-glass-bg);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-xl);
    padding: 32px;
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    box-shadow:
        0 1px 0 var(--color-glass-highlight) inset,
        var(--shadow-xl);
}

.glass-panel-sm {
    padding: 22px 24px;
    border-radius: var(--radius-lg);
}


/* ════════════════════════════════════════════════════════════════
   18. FLOATING LABEL — .float-field
   Apple-flavoured: label rests inline, lifts to a small caption on
   focus/fill; accent color echoes on focus (subtle, not shouty).
════════════════════════════════════════════════════════════════ */
.float-field {
    position: relative;
    width: 100%;
}

.float-input {
    height: 58px;
    padding: 22px var(--input-px-md) 8px;
    font-size: var(--input-fs-md);
    font-family: var(--font-system);
    font-weight: 400;
    color: var(--input-text);
    background: var(--input-bg);
    border: var(--input-bw) solid var(--input-border);
    border-radius: var(--radius-md);
    outline: none;
    width: 100%;
    box-shadow: var(--shadow-xs);
    transition: var(--input-transition);
    -webkit-font-smoothing: antialiased;
}

.float-input::placeholder {
    opacity: 0;
}

.float-input:hover:not(:disabled) {
    border-color: var(--input-border-hover);
}

.float-input:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}

.float-label {
    position: absolute;
    left: var(--input-px-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--input-fs-md);
    font-family: var(--font-system);
    font-weight: 400;
    color: var(--input-placeholder);
    pointer-events: none;
    transform-origin: left top;
    transition:
        top 180ms var(--ease-standard),
        transform 180ms var(--ease-standard),
        font-size 180ms var(--ease-standard),
        color 180ms var(--ease-standard),
        font-weight 180ms var(--ease-standard);
    -webkit-font-smoothing: antialiased;
}

.float-input:focus~.float-label,
.float-input:not(:placeholder-shown)~.float-label {
    top: 13px;
    transform: translateY(0) scale(0.72);
    font-size: var(--input-fs-md);
    font-weight: 590;
    color: var(--color-text-secondary-60);
    letter-spacing: .01em;
}

.float-input:focus~.float-label {
    color: var(--color-primary);
}


/* ════════════════════════════════════════════════════════════════
   19. INPUT GROUP — prefix / suffix addons
════════════════════════════════════════════════════════════════ */
.input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.input-addon {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 14px;
    font-family: var(--font-system);
    font-weight: 590;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border: var(--input-bw) solid var(--input-border);
    white-space: nowrap;
    flex-shrink: 0;
}

.input-addon:first-child {
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-addon:last-child {
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .input {
    border-radius: 0;
    flex: 1;
}

.input-group .input:focus {
    position: relative;
    z-index: 1;
}

.input-group .input-addon:first-child+.input {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .input+.input-addon:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}


/* ════════════════════════════════════════════════════════════════
   20. TAG INPUT — .tag-input-wrap
════════════════════════════════════════════════════════════════ */
.tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: var(--input-h-md);
    padding: 7px 10px;
    background: var(--input-bg);
    border: var(--input-bw) solid var(--input-border);
    border-radius: var(--radius-md);
    cursor: text;
    box-shadow: var(--shadow-xs);
    transition: var(--input-transition);
}

.tag-input-wrap:focus-within {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 13px;
    font-family: var(--font-system);
    font-weight: 590;
    color: var(--color-primary);
    background: var(--color-primary-alpha);
    border: none;
    border-radius: var(--radius-pill);
}

.tag-pill-remove {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary);
    padding: 0;
    line-height: 1;
    opacity: .6;
    transition: opacity 140ms var(--ease-standard);
}

.tag-pill-remove:hover {
    opacity: 1;
}

.tag-input-inner {
    flex: 1;
    min-width: 80px;
    font-size: 14px;
    font-family: var(--font-system);
    color: var(--input-text);
    background: none;
    border: none;
    outline: none;
}

.tag-input-inner::placeholder {
    color: var(--input-placeholder);
}


/* ════════════════════════════════════════════════════════════════
   21. LOADING SHIMMER
════════════════════════════════════════════════════════════════ */
.input-loading {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.input-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--color-fill-primary) 50%,
            transparent 100%);
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}


/* ════════════════════════════════════════════════════════════════
   22. REDUCED MOTION
   Apple HIG explicitly requires respecting Reduce Motion.
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .input,
    .textarea,
    .select-native,
    .otp-input,
    .float-label,
    .checkbox-wrap input,
    .radio-wrap input,
    .pw-toggle,
    .stepper-btn,
    input[type="range"]::-webkit-slider-thumb {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }

    .otp-input:focus,
    .checkbox-wrap input[type="checkbox"]:checked {
        transform: none;
    }
}


/* ════════════════════════════════════════════════════════════════
   23. RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .otp-input {
        width: 42px;
        height: 48px;
        font-size: 18px;
    }

    .otp-input-lg {
        width: 52px;
        height: 58px;
        font-size: 22px;
    }

    .field-row {
        flex-direction: column;
    }

    .phone-wrap {
        flex-direction: column;
    }

    .phone-wrap .country-select {
        border-right: 1px solid var(--input-border);
        border-bottom: none;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        width: 100%;
    }

    .phone-wrap .input {
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }
}