/**
 * ============================================
 * TEMPLATE FACTORY — COMPONENTS: PHASE 2 FORMS
 * ============================================
 * 
 * Complete form system with:
 * - 10 input styles
 * - 6 select styles  
 * - 6 checkbox styles
 * - 4 radio styles
 * - Toggle switches
 * - Range sliders
 * - File inputs
 * - Validation states
 * - Form layouts
 * 
 * Uses tokens from tokens.css:
 * --input-bg, --input-fg, --input-placeholder
 * --input-border, --input-hover-border, --input-focus-border
 * --input-focus-ring, --input-disabled-bg, --input-disabled-fg
 * --control-track, --control-thumb, --control-on-track, --control-on-thumb
 * 
 * @version 1.0
 * @updated February 2026
 */

/* ============================================
   TABLE OF CONTENTS — FORMS
   ============================================
   
   2.1  Form Reset & Base Styles
   2.2  Input Base & Sizes
   2.3  Input Styles (10 variants)
   2.4  Input States & Validation
   2.5  Textarea
   2.6  Select Styles (6 variants)
   2.7  Checkbox Styles (6 variants)
   2.8  Radio Styles (4 variants)
   2.9  Toggle Switch
   2.10 Range Slider
   2.11 File Input
   2.12 Special Inputs (date, time, color, search)
   2.13 Form Layout Components
   2.14 Input Groups & Addons
   2.15 Form Accessibility
   
   ============================================ */


/* ============================================
   2.1 FORM RESET & BASE STYLES
   ============================================ */

/* Base reset for all form elements */
:where(.input,
    .select,
    .textarea,
    .checkbox,
    .radio,
    .toggle,
    .range,
    .file-input,
    input[class*="input"],
    select[class*="select"],
    textarea[class*="textarea"]) {
    /* Reset */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;

    /* Box model */
    box-sizing: border-box;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

/* Remove clear button from search inputs */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* Remove default date/time icons in webkit */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duration-fast) var(--ease-in-out);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}


/* ============================================
   2.2 INPUT BASE & SIZES
   ============================================ */

/* Base input structure */
.input {
    /* Layout */
    display: block;
    width: 100%;

    /* Default sizing (md) */
    height: 44px;
    padding: 0 var(--space-4);
    font-size: 16px;
    line-height: 1.5;

    /* Appearance */
    background-color: var(--input-bg, var(--bg-surface));
    color: var(--input-fg, var(--text-primary));
    border: 1px solid var(--input-border, var(--border));
    border-radius: var(--radius-lg);

    /* Transitions */
    transition:
        border-color var(--duration-fast) var(--ease-in-out),
        box-shadow var(--duration-fast) var(--ease-in-out),
        background-color var(--duration-fast) var(--ease-in-out);
}

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

/* Focus state */
.input:focus {
    border-color: var(--input-focus-border, var(--primary));
    box-shadow: 0 0 0 3px var(--input-focus-ring, var(--primary-soft));
}

/* Hover state (only when not focused) */
.input:hover:not(:focus):not(:disabled) {
    border-color: var(--input-hover-border, var(--border-strong, var(--border)));
}

/* --------------------------------------------
   Input Sizes
   -------------------------------------------- */

.input--xs {
    height: 32px;
    padding: 0 var(--space-3);
    font-size: 12px;
    border-radius: var(--radius-default);
}

.input--sm {
    height: 36px;
    padding: 0 var(--space-3);
    font-size: 14px;
    border-radius: var(--radius-md);
}

.input--md {
    height: 44px;
    padding: 0 var(--space-4);
    font-size: 16px;
    border-radius: var(--radius-lg);
}

.input--lg {
    height: 52px;
    padding: 0 var(--space-5);
    font-size: 18px;
    border-radius: var(--radius-xl);
}

.input--xl {
    height: 60px;
    padding: 0 var(--space-6);
    font-size: 20px;
    border-radius: var(--radius-xl);
}


/* ============================================
   2.3 INPUT STYLES (10 VARIANTS)
   ============================================ */

/* --------------------------------------------
   inp-01: Classic (default)
   Label сверху, border вокруг
   -------------------------------------------- */
.input--classic,
.input {
    background-color: var(--input-bg, var(--bg-surface));
    border: 1px solid var(--input-border, var(--border));
    border-radius: var(--radius-lg);
}

/* --------------------------------------------
   inp-02: Floating Label
   Label внутри, поднимается при focus/filled
   -------------------------------------------- */
.input-floating {
    position: relative;
    display: block;
}

.input-floating .input {
    padding-top: var(--space-5);
    padding-bottom: var(--space-1);
    height: 56px;
}

.input-floating .input--sm {
    padding-top: var(--space-4);
    padding-bottom: var(--space-1);
    height: 48px;
}

.input-floating .input--lg {
    padding-top: var(--space-6);
    padding-bottom: var(--space-2);
    height: 64px;
}

.input-floating__label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--input-placeholder, var(--text-muted));
    pointer-events: none;
    transition:
        top var(--duration-fast) var(--ease-in-out),
        font-size var(--duration-fast) var(--ease-in-out),
        color var(--duration-fast) var(--ease-in-out),
        transform var(--duration-fast) var(--ease-in-out);
    transform-origin: left center;
    background: transparent;
    padding: 0 var(--space-1);
    margin-left: -4px;
}

/* Floating label active state */
.input-floating .input:focus~.input-floating__label,
.input-floating .input:not(:placeholder-shown)~.input-floating__label,
.input-floating .input.is-filled~.input-floating__label,
.input-floating.is-active .input-floating__label {
    top: 12px;
    transform: translateY(0);
    font-size: 12px;
    color: var(--primary);
}

/* When focused, label gets background to cover border */
.input-floating .input:focus~.input-floating__label {
    background: var(--input-bg, var(--bg-surface));
}

/* --------------------------------------------
   inp-03: Underline Only
   Только нижняя линия
   -------------------------------------------- */
.input--underline {
    border: none;
    border-bottom: 2px solid var(--input-border, var(--border));
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

.input--underline:focus {
    border-bottom-color: var(--primary);
    box-shadow: none;
}

.input--underline:hover:not(:focus):not(:disabled) {
    border-bottom-color: var(--border-strong, var(--text-muted));
}

/* Underline with animated fill */
.input-underline-animated {
    position: relative;
}

.input-underline-animated .input--underline {
    border-bottom: 2px solid var(--input-border, var(--border));
}

.input-underline-animated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width var(--duration-normal) var(--ease-in-out), left var(--duration-normal) var(--ease-in-out);
}

.input-underline-animated:focus-within::after {
    left: 0;
    width: 100%;
}

/* --------------------------------------------
   inp-04: Filled Background
   Серый/цветной фон, без border
   -------------------------------------------- */
.input--filled {
    background-color: var(--bg-surface-alt, #f5f5f5);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
}

.input--filled:hover:not(:focus):not(:disabled) {
    background-color: var(--bg-surface-alt, #ebebeb);
}

.input--filled:focus {
    background-color: var(--bg-surface);
    border-color: var(--primary);
    box-shadow: none;
}

/* Filled with accent tint */
.input--filled-accent {
    background-color: var(--primary-soft, rgba(var(--primary-rgb), 0.1));
    border: 2px solid transparent;
}

.input--filled-accent:focus {
    background-color: var(--bg-surface);
    border-color: var(--primary);
}

/* --------------------------------------------
   inp-05: With Icon Left
   Иконка внутри слева
   -------------------------------------------- */
.input-icon {
    position: relative;
    display: block;
}

.input-icon .input {
    padding-left: 44px;
}

.input-icon .input--sm {
    padding-left: 36px;
}

.input-icon .input--lg {
    padding-left: 52px;
}

.input-icon__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    transition: color var(--duration-fast) var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-icon .input--sm~.input-icon__icon {
    left: 10px;
    font-size: 16px;
}

.input-icon .input--lg~.input-icon__icon {
    left: 18px;
    font-size: 20px;
}

/* Icon color on focus */
.input-icon .input:focus~.input-icon__icon {
    color: var(--primary);
}

/* --------------------------------------------
   inp-06: With Icon Right
   Иконка внутри справа
   -------------------------------------------- */
.input-icon--right .input {
    padding-left: 16px;
    padding-right: 44px;
}

.input-icon--right .input--sm {
    padding-right: 36px;
}

.input-icon--right .input--lg {
    padding-right: 52px;
}

.input-icon--right .input-icon__icon {
    left: auto;
    right: 14px;
}

.input-icon--right .input--sm~.input-icon__icon {
    right: 10px;
}

.input-icon--right .input--lg~.input-icon__icon {
    right: 18px;
}

/* Both icons */
.input-icon--both .input {
    padding-left: 44px;
    padding-right: 44px;
}

.input-icon--both .input-icon__icon--left {
    left: 14px;
    right: auto;
}

.input-icon--both .input-icon__icon--right {
    right: 14px;
    left: auto;
}

/* --------------------------------------------
   inp-07: Pill Shape
   Скруглённые концы
   -------------------------------------------- */
.input--pill {
    border-radius: var(--radius-full);
    padding-left: 20px;
    padding-right: 20px;
}

.input--pill.input--sm {
    padding-left: 16px;
    padding-right: 16px;
}

.input--pill.input--lg {
    padding-left: 24px;
    padding-right: 24px;
}

/* Pill with icon */
.input-icon .input--pill {
    padding-left: 48px;
}

.input-icon--right .input--pill {
    padding-left: 20px;
    padding-right: 48px;
}

/* --------------------------------------------
   inp-08: Minimal
   Минимальный, border только при focus
   -------------------------------------------- */
.input--minimal {
    border: 1px solid transparent;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.input--minimal:hover:not(:focus):not(:disabled) {
    border-color: transparent;
    background: var(--bg-surface-alt, rgba(0, 0, 0, 0.03));
    padding-left: 12px;
    padding-right: 12px;
    border-radius: var(--radius-md);
}

.input--minimal:focus {
    border-color: var(--input-border, var(--border));
    background: var(--bg-surface);
    padding-left: 12px;
    padding-right: 12px;
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* --------------------------------------------
   inp-09: Search Input
   С иконкой поиска + clear button
   -------------------------------------------- */
.input-search {
    position: relative;
    display: block;
}

.input-search .input {
    padding-left: 44px;
    padding-right: 44px;
}

.input-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
    pointer-events: none;
    transition: color var(--duration-fast) var(--ease-in-out);
}

.input-search .input:focus~.input-search__icon {
    color: var(--primary);
}

.input-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast) var(--ease-in-out);
    padding: 0;
}

.input-search__clear:hover {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
}

/* Show clear button when input has value */
.input-search .input:not(:placeholder-shown)~.input-search__clear,
.input-search .input.has-value~.input-search__clear,
.input-search.has-value .input-search__clear {
    opacity: 1;
    visibility: visible;
}

/* Search with submit button */
.input-search--with-button .input {
    padding-right: 100px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-search--with-button .input-search__submit {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 0 var(--space-5);
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-in-out);
}

.input-search--with-button .input-search__submit:hover {
    background: var(--primary-hover);
}

/* --------------------------------------------
   inp-10: Input Group
   Input + кнопка/addon в одной строке
   -------------------------------------------- */
.input-group {
    display: flex;
    width: 100%;
}

.input-group .input {
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-group__addon {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    background: var(--bg-surface-alt);
    border: 1px solid var(--input-border, var(--border));
    border-left: none;
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
}

.input-group__addon:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Addon before input */
.input-group__addon:first-child {
    border-left: 1px solid var(--input-border, var(--border));
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-group__addon:first-child+.input {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Both addons */
.input-group__addon:first-child+.input:not(:last-child) {
    border-radius: 0;
}

/* Button in group */
.input-group .btn {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    flex-shrink: 0;
}

.input-group .btn:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* Focus state - bring input to front */
.input-group .input:focus {
    position: relative;
    z-index: 1;
}

/* Input group sizes */
.input-group--sm .input {
    height: 36px;
    font-size: 14px;
}

.input-group--sm .input-group__addon {
    padding: 0 var(--space-3);
    font-size: 13px;
}

.input-group--lg .input {
    height: 52px;
    font-size: 18px;
}

.input-group--lg .input-group__addon {
    padding: 0 var(--space-5);
    font-size: 16px;
}


/* ============================================
   2.4 INPUT STATES & VALIDATION
   ============================================ */

/* --------------------------------------------
   Disabled State
   -------------------------------------------- */
.input:disabled,
.input[disabled],
.input.is-disabled {
    background-color: var(--input-disabled-bg, var(--bg-surface-alt));
    color: var(--input-disabled-fg, var(--text-disabled, var(--text-muted)));
    border-color: var(--input-disabled-border, var(--border));
    cursor: not-allowed;
    opacity: 0.7;
}

.input:disabled::placeholder {
    color: var(--text-disabled, var(--text-muted));
}

/* --------------------------------------------
   Read-only State
   -------------------------------------------- */
.input:read-only,
.input[readonly],
.input.is-readonly {
    background-color: var(--bg-surface-alt);
    cursor: default;
}

.input:read-only:focus {
    border-color: var(--input-border, var(--border));
    box-shadow: none;
}

/* --------------------------------------------
   Valid State
   -------------------------------------------- */
.input.is-valid,
.input[data-valid="true"],
.input:valid:not(:placeholder-shown):not([type="email"]):not([type="url"]) {
    border-color: var(--success);
}

.input.is-valid:focus,
.input[data-valid="true"]:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft, rgba(34, 197, 94, 0.15));
}

/* Valid icon */
.input-icon .input.is-valid~.input-icon__icon,
.input-icon .input[data-valid="true"]~.input-icon__icon {
    color: var(--success);
}

/* Validation with icon indicator */
.input-validation {
    position: relative;
}

.input-validation .input {
    padding-right: 44px;
}

.input-validation__icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-in-out);
}

.input-validation__icon--valid {
    color: var(--success);
}

.input-validation__icon--invalid {
    color: var(--error);
}

.input-validation .input.is-valid~.input-validation__icon--valid,
.input-validation .input[data-valid="true"]~.input-validation__icon--valid {
    opacity: 1;
}

.input-validation .input.is-invalid~.input-validation__icon--invalid,
.input-validation .input[data-invalid="true"]~.input-validation__icon--invalid {
    opacity: 1;
}

/* --------------------------------------------
   Invalid State
   -------------------------------------------- */
.input.is-invalid,
.input[data-invalid="true"],
.input[aria-invalid="true"],
.form-group.has-error .input {
    border-color: var(--error);
}

.input.is-invalid:focus,
.input[data-invalid="true"]:focus,
.input[aria-invalid="true"]:focus {
    border-color: var(--error);
    box-shadow: 0 0 0 3px var(--error-soft, rgba(239, 68, 68, 0.15));
}

/* Invalid icon */
.input-icon .input.is-invalid~.input-icon__icon {
    color: var(--error);
}

/* Shake animation for invalid */
@keyframes input-shake {

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

    20%,
    60% {
        transform: translateX(-4px);
    }

    40%,
    80% {
        transform: translateX(4px);
    }
}

.input.is-invalid.shake,
.input[data-shake="true"] {
    animation: input-shake 0.4s ease;
}

/* --------------------------------------------
   Warning State
   -------------------------------------------- */
.input.is-warning,
.input[data-warning="true"] {
    border-color: var(--warning);
}

.input.is-warning:focus,
.input[data-warning="true"]:focus {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px var(--warning-soft, rgba(245, 158, 11, 0.15));
}


/* ============================================
   2.5 TEXTAREA
   ============================================ */

.textarea {
    /* Inherit input styles */
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: 16px;
    line-height: 1.6;

    /* Appearance */
    background-color: var(--input-bg, var(--bg-surface));
    color: var(--input-fg, var(--text-primary));
    border: 1px solid var(--input-border, var(--border));
    border-radius: var(--radius-lg);

    /* Textarea specific */
    min-height: 120px;
    resize: vertical;

    /* Transitions */
    transition:
        border-color var(--duration-fast) var(--ease-in-out),
        box-shadow var(--duration-fast) var(--ease-in-out);
}

.textarea::placeholder {
    color: var(--input-placeholder, var(--text-muted));
}

.textarea:focus {
    outline: none;
    border-color: var(--input-focus-border, var(--primary));
    box-shadow: 0 0 0 3px var(--input-focus-ring, var(--primary-soft));
}

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

/* Textarea sizes */
.textarea--sm {
    padding: var(--space-3) var(--space-3);
    font-size: 14px;
    min-height: 80px;
    border-radius: var(--radius-md);
}

.textarea--lg {
    padding: var(--space-4) var(--space-5);
    font-size: 18px;
    min-height: 160px;
    border-radius: var(--radius-xl);
}

/* No resize */
.textarea--no-resize {
    resize: none;
}

/* Horizontal resize only */
.textarea--resize-x {
    resize: horizontal;
}

/* Auto-grow textarea wrapper */
.textarea-auto {
    display: grid;
}

.textarea-auto::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}

.textarea-auto>.textarea,
.textarea-auto::after {
    grid-area: 1 / 1 / 2 / 2;
    padding: var(--space-3) var(--space-4);
    font: inherit;
    line-height: 1.6;
}

.textarea-auto>.textarea {
    resize: none;
    overflow: hidden;
}

/* Character counter */
.textarea-counter {
    position: relative;
}

.textarea-counter__count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-default);
    pointer-events: none;
}

.textarea-counter__count.is-warning {
    color: var(--warning);
}

.textarea-counter__count.is-error {
    color: var(--error);
}

/* Textarea validation states */
.textarea.is-valid {
    border-color: var(--success);
}

.textarea.is-valid:focus {
    box-shadow: 0 0 0 3px var(--success-soft);
}

.textarea.is-invalid {
    border-color: var(--error);
}

.textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--error-soft);
}

.textarea:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-fg);
    cursor: not-allowed;
    opacity: 0.7;
    resize: none;
}


/* ============================================
   2.6 SELECT STYLES (6 VARIANTS)
   ============================================ */

/* Base select */
.select {
    /* Layout */
    display: block;
    width: 100%;

    /* Sizing */
    height: 44px;
    padding: 0 var(--space-10) 0 var(--space-4);
    font-size: 16px;
    line-height: 1.5;

    /* Appearance */
    background-color: var(--input-bg, var(--bg-surface));
    color: var(--input-fg, var(--text-primary));
    border: 1px solid var(--input-border, var(--border));
    border-radius: var(--radius-lg);
    cursor: pointer;

    /* Ensure browser renders native option list matching page color scheme */
    color-scheme: light;

    /* Custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;

    /* Transitions */
    transition:
        border-color var(--duration-fast) var(--ease-in-out),
        box-shadow var(--duration-fast) var(--ease-in-out),
        background-color var(--duration-fast) var(--ease-in-out);
}

.select:focus {
    outline: none;
    border-color: var(--input-focus-border, var(--primary));
    box-shadow: 0 0 0 3px var(--input-focus-ring, var(--primary-soft));
}

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

/* Select sizes */
.select--sm {
    height: 36px;
    padding: 0 36px 0 var(--space-3);
    font-size: 14px;
    border-radius: var(--radius-md);
    background-position: right 10px center;
    background-size: 14px;
}

.select--lg {
    height: 52px;
    padding: 0 48px 0 var(--space-5);
    font-size: 18px;
    border-radius: var(--radius-xl);
    background-position: right 16px center;
    background-size: 18px;
}

/* --------------------------------------------
   sel-01: Classic (default)
   Стандартный с chevron
   -------------------------------------------- */
.select--classic {
    /* Same as base */
}

/* --------------------------------------------
   sel-02: Filled
   С фоном
   -------------------------------------------- */
.select--filled {
    background-color: var(--bg-surface-alt);
    border: 2px solid transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.select--filled:hover:not(:focus):not(:disabled) {
    background-color: var(--bg-surface-alt);
    border-color: transparent;
}

.select--filled:focus {
    background-color: var(--bg-surface);
    border-color: var(--primary);
    box-shadow: none;
}

/* --------------------------------------------
   sel-03: Underline
   Только линия снизу
   -------------------------------------------- */
.select--underline {
    border: none;
    border-bottom: 2px solid var(--input-border, var(--border));
    border-radius: 0;
    padding-left: 0;
    background-color: var(--input-bg, var(--bg-surface));
    background-position: right 0 center;
    color-scheme: light;
}

.dark .select--underline {
    color-scheme: dark;
}

.select--underline:focus {
    border-bottom-color: var(--primary);
    box-shadow: none;
}

.select--underline:hover:not(:focus):not(:disabled) {
    border-bottom-color: var(--border-strong);
}

/* --------------------------------------------
   sel-04: Pill
   Скруглённый
   -------------------------------------------- */
.select--pill {
    border-radius: var(--radius-full);
    padding-left: 20px;
    padding-right: 44px;
    background-position: right 16px center;
}

/* --------------------------------------------
   sel-05: With Icon
   С иконкой слева
   -------------------------------------------- */
.select-icon {
    position: relative;
    display: block;
}

.select-icon .select {
    padding-left: 44px;
}

.select-icon .select--sm {
    padding-left: 36px;
}

.select-icon .select--lg {
    padding-left: 52px;
}

.select-icon__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 18px;
    pointer-events: none;
    transition: color var(--duration-fast) var(--ease-in-out);
}

.select-icon .select:focus~.select-icon__icon {
    color: var(--primary);
}

/* --------------------------------------------
   sel-06: Native (minimal styling)
   Нативный select для мобильных
   -------------------------------------------- */
.select--native {
    /* Let browser handle most styling */
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    background-image: none;
    padding-right: 16px;
}

/* Select states */
.select:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-fg);
    cursor: not-allowed;
    opacity: 0.7;
}

.select.is-invalid {
    border-color: var(--error);
}

.select.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--error-soft);
}

.select.is-valid {
    border-color: var(--success);
}

.select.is-valid:focus {
    box-shadow: 0 0 0 3px var(--success-soft);
}

/* Dark mode arrow adjustment + color-scheme for native dropdown */
.dark .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    color-scheme: dark;
}


/* ============================================
   2.7 CHECKBOX STYLES (6 VARIANTS)
   ============================================ */

/* Base checkbox wrapper */
.checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Hide native checkbox */
.checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom checkbox box */
.checkbox__box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border, var(--border));
    border-radius: var(--radius-default);
    background: var(--input-bg, var(--bg-surface));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-in-out);
    position: relative;
}

/* Checkmark icon */
.checkbox__box::after {
    content: '';
    width: 6px;
    height: 10px;
    border: 2px solid transparent;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) scale(0);
    transition: transform var(--duration-fast) var(--ease-in-out);
    margin-top: -2px;
}

/* Label text */
.checkbox__label {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-primary);
    padding-top: 1px;
}

/* Hover state */
.checkbox:hover .checkbox__box {
    border-color: var(--primary);
}

/* Focus state */
.checkbox__input:focus-visible~.checkbox__box {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Checked state */
.checkbox__input:checked~.checkbox__box {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox__input:checked~.checkbox__box::after {
    border-color: var(--on-primary, white);
    transform: rotate(45deg) scale(1);
}

/* Indeterminate state */
.checkbox__input:indeterminate~.checkbox__box {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox__input:indeterminate~.checkbox__box::after {
    width: 10px;
    height: 2px;
    border: none;
    background: var(--on-primary, white);
    transform: rotate(0) scale(1);
    margin-top: 0;
}

/* Disabled state */
.checkbox__input:disabled~.checkbox__box {
    background: var(--input-disabled-bg);
    border-color: var(--border);
    cursor: not-allowed;
}

.checkbox__input:disabled~.checkbox__label {
    color: var(--text-disabled, var(--text-muted));
    cursor: not-allowed;
}

.checkbox__input:disabled:checked~.checkbox__box {
    background: var(--text-muted);
    border-color: var(--text-muted);
}

/* Checkbox sizes */
.checkbox--sm .checkbox__box {
    width: 16px;
    height: 16px;
}

.checkbox--sm .checkbox__box::after {
    width: 5px;
    height: 8px;
}

.checkbox--sm .checkbox__label {
    font-size: 14px;
}

.checkbox--lg .checkbox__box {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
}

.checkbox--lg .checkbox__box::after {
    width: 8px;
    height: 12px;
}

.checkbox--lg .checkbox__label {
    font-size: 18px;
}

/* --------------------------------------------
   chk-01: Classic (default)
   Стандартный квадрат
   -------------------------------------------- */
.checkbox--classic .checkbox__box {
    border-radius: var(--radius-default);
}

/* --------------------------------------------
   chk-02: Rounded
   Скруглённый квадрат
   -------------------------------------------- */
.checkbox--rounded .checkbox__box {
    border-radius: var(--radius-md);
}

/* --------------------------------------------
   chk-03: Circle
   Круглый чекбокс
   -------------------------------------------- */
.checkbox--circle .checkbox__box {
    border-radius: 50%;
}

.checkbox--circle .checkbox__box::after {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background: var(--on-primary, white);
    transform: scale(0);
    margin-top: 0;
}

.checkbox--circle .checkbox__input:checked~.checkbox__box::after {
    transform: scale(1);
}

/* --------------------------------------------
   chk-04: Card
   Вся карточка кликабельна
   -------------------------------------------- */
.checkbox-card {
    display: block;
    cursor: pointer;
    position: relative;
}

.checkbox-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-card__content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.checkbox-card__box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius-default);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.checkbox-card__box::after {
    content: '';
    width: 6px;
    height: 10px;
    border: 2px solid transparent;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) scale(0);
    transition: transform var(--duration-fast) var(--ease-in-out);
    margin-top: -2px;
}

.checkbox-card__body {
    flex: 1;
}

.checkbox-card__title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.checkbox-card__description {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Hover */
.checkbox-card:hover .checkbox-card__content {
    border-color: var(--primary);
}

/* Focus */
.checkbox-card__input:focus-visible~.checkbox-card__content {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Checked */
.checkbox-card__input:checked~.checkbox-card__content {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.checkbox-card__input:checked~.checkbox-card__content .checkbox-card__box {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox-card__input:checked~.checkbox-card__content .checkbox-card__box::after {
    border-color: var(--on-primary, white);
    transform: rotate(45deg) scale(1);
}

/* Disabled */
.checkbox-card__input:disabled~.checkbox-card__content {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --------------------------------------------
   chk-05: Switch (Toggle)
   Toggle switch style
   -------------------------------------------- */
.checkbox--switch {
    gap: var(--space-3);
}

.checkbox--switch .checkbox__box {
    width: 44px;
    height: 24px;
    border-radius: var(--radius-full);
    padding: 2px;
    background: var(--control-track, var(--bg-surface-alt));
    border: none;
    justify-content: flex-start;
}

.checkbox--switch .checkbox__box::after {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateX(0);
    margin: 0;
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.checkbox--switch .checkbox__input:checked~.checkbox__box {
    background: var(--control-on-track, var(--primary));
}

.checkbox--switch .checkbox__input:checked~.checkbox__box::after {
    transform: translateX(20px);
    background: var(--control-on-thumb, white);
}

/* Switch sizes */
.checkbox--switch.checkbox--sm .checkbox__box {
    width: 36px;
    height: 20px;
}

.checkbox--switch.checkbox--sm .checkbox__box::after {
    width: 16px;
    height: 16px;
}

.checkbox--switch.checkbox--sm .checkbox__input:checked~.checkbox__box::after {
    transform: translateX(16px);
}

.checkbox--switch.checkbox--lg .checkbox__box {
    width: 56px;
    height: 30px;
}

.checkbox--switch.checkbox--lg .checkbox__box::after {
    width: 26px;
    height: 26px;
}

.checkbox--switch.checkbox--lg .checkbox__input:checked~.checkbox__box::after {
    transform: translateX(26px);
}

/* Switch with icons */
.checkbox--switch-icons .checkbox__box {
    position: relative;
}

.checkbox--switch-icons .checkbox__box::before {
    content: '☀️';
    position: absolute;
    left: 6px;
    font-size: 12px;
    opacity: 1;
    transition: opacity var(--duration-fast) var(--ease-in-out);
}

.checkbox--switch-icons .checkbox__box::after {
    z-index: 1;
}

.checkbox--switch-icons .checkbox__input:checked~.checkbox__box::before {
    content: '🌙';
    left: auto;
    right: 6px;
}

/* Switch with labels */
.checkbox--switch-labels {
    gap: 0;
}

.checkbox--switch-labels .checkbox__box {
    width: auto;
    padding: 0;
    background: transparent;
    gap: var(--space-2);
}

.checkbox--switch-labels .checkbox__label-off,
.checkbox--switch-labels .checkbox__label-on {
    font-size: 14px;
    font-weight: 500;
    transition: color var(--duration-fast) var(--ease-in-out);
}

.checkbox--switch-labels .checkbox__label-off {
    color: var(--text-primary);
}

.checkbox--switch-labels .checkbox__label-on {
    color: var(--text-muted);
}

.checkbox--switch-labels .checkbox__input:checked~.checkbox__box .checkbox__label-off {
    color: var(--text-muted);
}

.checkbox--switch-labels .checkbox__input:checked~.checkbox__box .checkbox__label-on {
    color: var(--primary);
}

/* --------------------------------------------
   chk-06: Button Style
   Кнопка-переключатель
   -------------------------------------------- */
.checkbox--button {
    gap: 0;
}

.checkbox--button .checkbox__box {
    display: none;
}

.checkbox--button .checkbox__label {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-weight: 500;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.checkbox--button:hover .checkbox__label {
    border-color: var(--primary);
}

.checkbox--button .checkbox__input:focus-visible~.checkbox__label {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.checkbox--button .checkbox__input:checked~.checkbox__label {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* Button checkbox group */
.checkbox-button-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.checkbox-button-group .checkbox--button .checkbox__label {
    border-radius: var(--radius-lg);
}

/* Joined button group */
.checkbox-button-group--joined {
    gap: 0;
}

.checkbox-button-group--joined .checkbox--button .checkbox__label {
    border-radius: 0;
    margin-left: -2px;
}

.checkbox-button-group--joined .checkbox--button:first-child .checkbox__label {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    margin-left: 0;
}

.checkbox-button-group--joined .checkbox--button:last-child .checkbox__label {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}


/* ============================================
   2.8 RADIO STYLES (4 VARIANTS)
   ============================================ */

/* Base radio wrapper */
.radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Hide native radio */
.radio__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom radio circle */
.radio__circle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border, var(--border));
    border-radius: 50%;
    background: var(--input-bg, var(--bg-surface));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-in-out);
}

/* Inner dot */
.radio__circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-in-out);
}

/* Label text */
.radio__label {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-primary);
    padding-top: 1px;
}

/* Hover state */
.radio:hover .radio__circle {
    border-color: var(--primary);
}

/* Focus state */
.radio__input:focus-visible~.radio__circle {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Checked state */
.radio__input:checked~.radio__circle {
    border-color: var(--primary);
}

.radio__input:checked~.radio__circle::after {
    transform: scale(1);
}

/* Disabled state */
.radio__input:disabled~.radio__circle {
    background: var(--input-disabled-bg);
    border-color: var(--border);
    cursor: not-allowed;
}

.radio__input:disabled~.radio__label {
    color: var(--text-disabled, var(--text-muted));
    cursor: not-allowed;
}

.radio__input:disabled:checked~.radio__circle::after {
    background: var(--text-muted);
}

/* Radio sizes */
.radio--sm .radio__circle {
    width: 16px;
    height: 16px;
}

.radio--sm .radio__circle::after {
    width: 8px;
    height: 8px;
}

.radio--sm .radio__label {
    font-size: 14px;
}

.radio--lg .radio__circle {
    width: 24px;
    height: 24px;
}

.radio--lg .radio__circle::after {
    width: 12px;
    height: 12px;
}

.radio--lg .radio__label {
    font-size: 18px;
}

/* Radio group */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.radio-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-6);
}

/* --------------------------------------------
   rad-01: Classic (default)
   Стандартный круг
   -------------------------------------------- */
.radio--classic {
    /* Same as base */
}

/* --------------------------------------------
   rad-02: Card
   Карточка выбора
   -------------------------------------------- */
.radio-card {
    display: block;
    cursor: pointer;
    position: relative;
}

.radio-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card__content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.radio-card__circle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.radio-card__circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    transform: scale(0);
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.radio-card__body {
    flex: 1;
}

.radio-card__title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.radio-card__description {
    font-size: 14px;
    color: var(--text-secondary);
}

.radio-card__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin-top: var(--space-2);
}

/* Hover */
.radio-card:hover .radio-card__content {
    border-color: var(--primary);
}

/* Focus */
.radio-card__input:focus-visible~.radio-card__content {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Checked */
.radio-card__input:checked~.radio-card__content {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.radio-card__input:checked~.radio-card__content .radio-card__circle {
    border-color: var(--primary);
}

.radio-card__input:checked~.radio-card__content .radio-card__circle::after {
    transform: scale(1);
}

/* Disabled */
.radio-card__input:disabled~.radio-card__content {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Radio card grid */
.radio-card-group {
    display: grid;
    gap: var(--space-3);
}

.radio-card-group--2 {
    grid-template-columns: repeat(2, 1fr);
}

.radio-card-group--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {

    .radio-card-group--2,
    .radio-card-group--3 {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------
   rad-03: Button Style
   Кнопка в группе
   -------------------------------------------- */
.radio--button {
    gap: 0;
}

.radio--button .radio__circle {
    display: none;
}

.radio--button .radio__label {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    font-weight: 500;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.radio--button:hover .radio__label {
    border-color: var(--primary);
}

.radio--button .radio__input:focus-visible~.radio__label {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.radio--button .radio__input:checked~.radio__label {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* Button radio group */
.radio-button-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Joined button group */
.radio-button-group--joined {
    gap: 0;
}

.radio-button-group--joined .radio--button .radio__label {
    border-radius: 0;
    margin-left: -2px;
}

.radio-button-group--joined .radio--button:first-child .radio__label {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    margin-left: 0;
}

.radio-button-group--joined .radio--button:last-child .radio__label {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* --------------------------------------------
   rad-04: Tabs Style
   Tab-style selection
   -------------------------------------------- */
.radio-tabs {
    display: flex;
    background: var(--bg-surface-alt);
    padding: var(--space-1);
    border-radius: var(--radius-xl);
    gap: var(--space-1);
}

.radio-tabs .radio {
    flex: 1;
    gap: 0;
}

.radio-tabs .radio__circle {
    display: none;
}

.radio-tabs .radio__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border-radius: var(--radius-md);
    font-weight: 500;
    text-align: center;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.radio-tabs .radio:hover .radio__label {
    background: rgba(0, 0, 0, 0.05);
}

.radio-tabs .radio__input:checked~.radio__label {
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    color: var(--primary);
}

.radio-tabs .radio__input:focus-visible~.radio__label {
    box-shadow: 0 0 0 2px var(--primary);
}

/* Tabs with icons */
.radio-tabs .radio__label i {
    font-size: 18px;
}

/* Vertical tabs */
.radio-tabs--vertical {
    flex-direction: column;
}


/* ============================================
   2.9 TOGGLE SWITCH (Standalone)
   ============================================ */

/* Standalone toggle component */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
}

.toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle__track {
    position: relative;
    width: 48px;
    height: 26px;
    background: var(--control-track, var(--bg-surface-alt));
    border-radius: var(--radius-full);
    transition: background var(--duration-fast) var(--ease-in-out);
}

.toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--control-thumb, white);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--duration-fast) var(--ease-in-out);
}

.toggle__label {
    font-size: 16px;
    color: var(--text-primary);
}

/* Hover */
.toggle:hover .toggle__track {
    background: var(--border-strong, var(--text-muted));
}

/* Focus */
.toggle__input:focus-visible~.toggle__track {
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Checked */
.toggle__input:checked~.toggle__track {
    background: var(--control-on-track, var(--primary));
}

.toggle__input:checked~.toggle__track .toggle__thumb {
    transform: translateX(22px);
    background: var(--control-on-thumb, white);
}

/* Disabled */
.toggle__input:disabled~.toggle__track {
    background: var(--control-disabled, var(--bg-surface-alt));
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle__input:disabled~.toggle__label {
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* Toggle sizes */
.toggle--sm .toggle__track {
    width: 40px;
    height: 22px;
}

.toggle--sm .toggle__thumb {
    width: 16px;
    height: 16px;
}

.toggle--sm .toggle__input:checked~.toggle__track .toggle__thumb {
    transform: translateX(18px);
}

.toggle--lg .toggle__track {
    width: 60px;
    height: 32px;
}

.toggle--lg .toggle__thumb {
    width: 26px;
    height: 26px;
}

.toggle--lg .toggle__input:checked~.toggle__track .toggle__thumb {
    transform: translateX(28px);
}

/* Toggle with icons inside */
.toggle--icons .toggle__track {
    width: 56px;
}

.toggle--icons .toggle__track::before,
.toggle--icons .toggle__track::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition: opacity var(--duration-fast) var(--ease-in-out);
}

.toggle--icons .toggle__track::before {
    content: '✓';
    left: 8px;
    color: var(--on-primary, white);
    opacity: 0;
}

.toggle--icons .toggle__track::after {
    content: '✕';
    right: 8px;
    color: var(--text-muted);
    opacity: 1;
}

.toggle--icons .toggle__input:checked~.toggle__track::before {
    opacity: 1;
}

.toggle--icons .toggle__input:checked~.toggle__track::after {
    opacity: 0;
}

.toggle--icons .toggle__input:checked~.toggle__track .toggle__thumb {
    transform: translateX(30px);
}


/* ============================================
   2.10 RANGE SLIDER
   ============================================ */

.range {
    width: 100%;
    height: 6px;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-full);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
}

/* Track */
.range::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-full);
}

.range::-moz-range-track {
    height: 6px;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-full);
    border: none;
}

/* Thumb */
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    border: 3px solid var(--bg-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    margin-top: -7px;
    cursor: grab;
    transition: transform var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}

.range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    border: 3px solid var(--bg-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: grab;
    transition: transform var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}

/* Hover */
.range:hover::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.range:hover::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Focus */
.range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--primary-soft), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--primary-soft), 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Active */
.range:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.15);
}

.range:active::-moz-range-thumb {
    cursor: grabbing;
    transform: scale(1.15);
}

/* Disabled */
.range:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.range:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
    background: var(--text-muted);
}

.range:disabled::-moz-range-thumb {
    cursor: not-allowed;
    background: var(--text-muted);
}

/* Range with value display */
.range-wrapper {
    position: relative;
}

.range-wrapper .range {
    width: 100%;
}

.range-wrapper__value {
    position: absolute;
    top: -30px;
    left: var(--range-value-position, 50%);
    transform: translateX(-50%);
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-default);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

/* Range with labels */
.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: 12px;
    color: var(--text-muted);
}

/* Range sizes */
.range--sm {
    height: 4px;
}

.range--sm::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
}

.range--sm::-moz-range-thumb {
    width: 16px;
    height: 16px;
}

.range--lg {
    height: 8px;
}

.range--lg::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -8px;
}

.range--lg::-moz-range-thumb {
    width: 24px;
    height: 24px;
}


/* ============================================
   2.11 FILE INPUT
   ============================================ */

/* Basic file input wrapper */
.file-input {
    position: relative;
    display: inline-block;
}

.file-input__native {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.file-input__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

.file-input__label i {
    font-size: 20px;
    color: var(--text-muted);
}

/* Hover */
.file-input:hover .file-input__label {
    border-color: var(--primary);
    background: var(--primary-soft);
}

/* Focus */
.file-input__native:focus+.file-input__label {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* File selected */
.file-input.has-file .file-input__label {
    border-style: solid;
    border-color: var(--success);
    background: var(--success-soft);
}

/* Dropzone style */
.file-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-10);
    border: 2px dashed var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    text-align: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
}

/* Hidden native input — covers entire dropzone for click and drag */
.file-dropzone__native {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.file-dropzone__icon {
    font-size: 48px;
    color: var(--text-muted);
}

.file-dropzone__text {
    color: var(--text-secondary);
}

.file-dropzone__text strong {
    color: var(--primary);
}

.file-dropzone__hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* Dropzone hover / dragover */
.file-dropzone:hover,
.file-dropzone.is-dragover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.file-dropzone.is-dragover .file-dropzone__icon {
    color: var(--primary);
    transform: scale(1.1);
}

/* File preview list */
.file-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.file-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    background: var(--bg-surface-alt);
    border-radius: var(--radius-lg);
}

.file-item__icon {
    font-size: 24px;
    color: var(--text-muted);
}

.file-item__info {
    flex: 1;
    min-width: 0;
}

.file-item__name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-item__size {
    font-size: 12px;
    color: var(--text-muted);
}

.file-item__remove {
    padding: var(--space-1);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-default);
    transition: all var(--duration-fast) var(--ease-in-out);
}

.file-item__remove:hover {
    background: var(--error-soft);
    color: var(--error);
}


/* ============================================
   2.12 SPECIAL INPUTS (date, time, color, search)
   ============================================ */

/* Date input */
.input[type="date"],
.input[type="datetime-local"] {
    /* Consistent height across browsers */
    line-height: 1.5;
}

/* Time input */
.input[type="time"] {
    line-height: 1.5;
}

/* Color input */
.input-color {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.input-color__native {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    overflow: hidden;
}

.input-color__native::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.input-color__native::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius-default);
}

.input-color__native::-moz-color-swatch {
    border: none;
    border-radius: var(--radius-default);
}

.input-color__value {
    font-family: monospace;
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Number input with stepper */
.input-number {
    display: inline-flex;
    align-items: stretch;
}

.input-number .input {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    text-align: center;
    width: 80px;
    -moz-appearance: textfield;
}

.input-number .input::-webkit-inner-spin-button,
.input-number .input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.input-number__btn {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border);
    border-left: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    font-size: 18px;
    font-weight: 600;
}

.input-number__btn:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.input-number__btn:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.input-number__btn:active {
    background: var(--primary);
    color: var(--on-primary);
}


/* ============================================
   2.13 FORM LAYOUT COMPONENTS
   ============================================ */

/* Form group - wraps label + input + help/error */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group+.form-group {
    margin-top: var(--space-5);
}

/* Form label */
.form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Required indicator */
.form-label--required::after {
    content: ' *';
    color: var(--error);
}

/* Optional indicator */
.form-label__optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 13px;
}

/* Help text */
.form-help {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.form-help i {
    margin-right: 4px;
}

/* Error message */
.form-error {
    font-size: 13px;
    color: var(--error);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.form-error i {
    font-size: 14px;
}

/* Success message */
.form-success {
    font-size: 13px;
    color: var(--success);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* Form row - horizontal layout */
.form-row {
    display: flex;
    gap: var(--space-4);
}

.form-row>.form-group {
    flex: 1;
    margin-top: 0;
}

.form-row>.form-group+.form-group {
    margin-top: 0;
}

/* Responsive form row */
@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
    }
}

/* Form section */
.form-section {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--border);
}

.form-section:first-child {
    padding-top: 0;
}

.form-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-section__description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Inline form */
.form-inline {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.form-inline .form-group {
    margin-top: 0;
}

.form-inline .form-group+.form-group {
    margin-top: 0;
}

/* Form grid */
.form-grid {
    display: grid;
    gap: var(--space-5);
}

.form-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {

    .form-grid--2,
    .form-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* Fieldset */
.fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin: 0;
}

.fieldset__legend {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 var(--space-2);
    margin-left: -8px;
}

/* Form actions */
.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.form-actions--right {
    justify-content: flex-end;
}

.form-actions--between {
    justify-content: space-between;
}

.form-actions--center {
    justify-content: center;
}

/* Form divider with text */
.form-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-6) 0;
    color: var(--text-muted);
    font-size: 13px;
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}


/* ============================================
   2.14 INPUT GROUPS & ADDONS
   ============================================ */

/* Already defined in 2.3 inp-10 */

/* Additional input group patterns */

/* Icon addon */
.input-group__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--input-border, var(--border));
    color: var(--text-muted);
    font-size: 18px;
}

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

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

/* Stacked input group (vertical) */
.input-group--stacked {
    flex-direction: column;
}

.input-group--stacked .input {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.input-group--stacked .input+.input {
    border-radius: 0;
    margin-top: -1px;
}

.input-group--stacked .input:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.input-group--stacked .input:only-child {
    border-radius: var(--radius-lg);
}

/* Phone input with country code */
.input-phone {
    display: flex;
}

.input-phone__country {
    flex-shrink: 0;
    width: 100px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: none;
}

.input-phone__number {
    flex: 1;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Price input with currency */
.input-price {
    display: flex;
}

.input-price__currency {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    background: var(--bg-surface-alt);
    border: 1px solid var(--input-border, var(--border));
    border-right: none;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    font-weight: 600;
    color: var(--text-secondary);
}

.input-price .input {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}


/* ============================================
   2.15 FORM ACCESSIBILITY
   ============================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .input,
    .select,
    .textarea,
    .checkbox__box,
    .checkbox__box::after,
    .radio__circle,
    .radio__circle::after,
    .toggle__track,
    .toggle__thumb,
    .range::-webkit-slider-thumb,
    .range::-moz-range-thumb,
    .input-floating__label,
    .input-underline-animated::after {
        transition: none;
    }

    @keyframes input-shake {

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

/* High contrast mode */
@media (prefers-contrast: high) {

    .input,
    .select,
    .textarea {
        border-width: 2px;
    }

    .checkbox__box,
    .radio__circle {
        border-width: 3px;
    }

    .input:focus,
    .select:focus,
    .textarea:focus {
        outline: 3px solid var(--primary);
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* Focus visible - keyboard only focus */
.input:focus:not(:focus-visible) {
    box-shadow: none;
}

.input:focus-visible {
    border-color: var(--input-focus-border, var(--primary));
    box-shadow: 0 0 0 3px var(--input-focus-ring, var(--primary-soft));
}

/* Screen reader only labels */
.form-label--sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Error announcements for screen readers */
.form-error[role="alert"] {
    /* Will be announced immediately by screen readers */
}

/* Ensure touch targets are at least 44x44 */
@media (pointer: coarse) {
    .checkbox__box {
        min-width: 44px;
        min-height: 44px;
    }

    .radio__circle {
        min-width: 44px;
        min-height: 44px;
    }

    .toggle__track {
        min-height: 44px;
    }
}

/* Auto-fill styling */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset;
    -webkit-text-fill-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
}

/* Dark mode autofill */
.dark .input:-webkit-autofill,
.dark .input:-webkit-autofill:hover,
.dark .input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset;
    -webkit-text-fill-color: var(--text-primary);
}


/* ============================================
   END OF PHASE 2: FORMS
   ============================================ */