/* ============================================
   FORM INPUTS V2 - Custom Design System
   ============================================ */

/* ============================================
   FIELD WRAPPER
   ============================================ */
.fi-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1rem;
}

.fi-field:last-child {
    margin-bottom: 0;
}

/* ============================================
   LABEL
   ============================================ */
.fi-label {
    font-size: 13px;
    font-weight: 400;
    color: #7A756E;
    letter-spacing: 0.01em;
    user-select: none;
    line-height: 1.3;
    display: block;
    padding-left: 1rem;
    margin-bottom: 0.3rem;
}

.fi-required {
    color: #E5534B;
    margin-left: 3px;
}

/* ============================================
   INPUT WRAPPER (for icons / suffix)
   ============================================ */
.fi-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* ============================================
   BASE INPUT
   ============================================ */
.fi-input {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    background: #FAFAF7;
    border: 1.5px solid rgba(0, 0, 0, 0.123);
    border-radius: 999px;
    font-size: 15px;
    color: #1A1A1A;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
}

.fi-input::placeholder {
    color: rgba(26, 26, 26, 0.35);
}

/* Focus */
.fi-input:focus,
.fi-input:focus-visible {
    background: #FFFFFF;
    border: 1.5px solid #C4BFB6;
    box-shadow: 0 0 0 4px rgba(156, 149, 137, 0.12);
}

/* Filled */
.fi-input:not(:placeholder-shown) {
    background: #FFFFFF;
}

/* Disabled */
.fi-input:disabled {
    background: #EAEAEA;
    color: rgba(26, 26, 26, 0.38);
    cursor: not-allowed;
    pointer-events: none;
}

/* Readonly */
.fi-input[readonly] {
    background: #EAEAEA;
    color: rgba(26, 26, 26, 0.38);
    cursor: default;
}

/* ============================================
   ERROR STATE
   ============================================ */
.fi-input.fi-input--is-invalid {
    border: 1.5px solid #E5534B;
    background: #FEF2F2;
}

.fi-input.fi-input--is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(229, 83, 75, 0.10);
}

/* ============================================
   SIZE VARIANTS
   ============================================ */
.fi-input--sm .fi-input {
    height: 38px;
    padding: 0 0.875rem;
    font-size: 14px;
    border-radius: 999px;
}

.fi-input--lg .fi-input {
    height: 56px;
    padding: 0 1.25rem;
    font-size: 16px;
    border-radius: 999px;
}

/* ============================================
   ICON LEFT
   ============================================ */
.fi-input-wrap--icon-left .fi-input {
    padding-left: 2.75rem;
}

.fi-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: #B8B2A9;
    pointer-events: none;
    font-size: 14px;
}

.fi-input-icon--left {
    left: 1rem;
}

/* ============================================
   PASSWORD TOGGLE BUTTON
   ============================================ */
.fi-input-toggle-password {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #B8B2A9;
    transition: color 0.15s ease;
    border-radius: 0 999px 999px 0;
}

.fi-input-toggle-password:hover {
    color: #7A746C;
}

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

input[type="file"].fi-input {
    display: none;
}

.fi-file-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 1.5rem 1rem;
    border: 1.5px dashed rgba(0, 0, 0, 0.18);
    border-radius: 16px;
    background: #FAFAF7;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s, background 0.18s;
}

.fi-file-zone:hover {
    border-color: #7F77DD;
    background: #EEEDFE;
}

.fi-file-zone-icon {
    font-size: 22px;
    color: #9A9693;
}

.fi-file-zone-title {
    font-size: 14px;
    font-weight: 500;
    color: #1A1A1A;
}

.fi-file-zone-sub {
    font-size: 12px;
    color: rgba(26, 26, 26, 0.45);
}

.fi-file-zone.fi-file-zone--error {
    border-color: #E5534B;
    background: #FEF2F2;
}

/* ============================================
   TEXTAREA
   ============================================ */
.fi-textarea {
    height: auto;
    padding: 0.75rem 1rem;
    resize: vertical;
    line-height: 1.6;
    min-height: 96px;
    border-radius: 20px;
}

/* ============================================
   SELECTIZE
   ============================================ */
.fi-field .selectize-control {
    width: 100%;
}
.fi-field .selectize-input {
    position: relative;
    height: 48px;
    padding: 0 1rem !important;
    background: #FAFAF7 !important;
    border: 1.5px solid rgba(0, 0, 0, 0.123) !important;
    border-radius: 999px !important;
    font-size: 15px;
    color: #1A1A1A;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    cursor: pointer;
    line-height: 1 !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.fi-field .selectize-input::after {
    display: none !important;
}
.fi-field .selectize-input.focus {
    background: #FFFFFF !important;
    border-color: #C4BFB6 !important;
    box-shadow: 0 0 0 4px rgba(156, 149, 137, 0.12) !important;
}
.fi-field .selectize-input.input-active {
    background: #FFFFFF !important;
}

.fi-field .selectize-input .fi-select-chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #9A9693;
    pointer-events: none;
    flex-shrink: 0;
    transition: transform .18s, color .18s;
}
.fi-selectize-open .selectize-input .fi-select-chevron {
    transform: translateY(-50%) rotate(180deg);
    color: #2D2D2D;
}

/* Dropdown */
.fi-field .selectize-dropdown {
    border: 1.5px solid #C4BFB6;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-top: 4px;
    overflow: hidden;
    font-size: 15px;
}
.fi-field .selectize-dropdown-content .option {
    padding: 10px 1rem;
    color: #1A1A1A;
}
.fi-field .selectize-dropdown-content .option:hover,
.fi-field .selectize-dropdown-content .option.active {
    background: #FAFAF7;
    color: #1A1A1A;
}

/* sizes */
.fi-input--sm .selectize-input {
    height: 38px !important;
    font-size: 14px !important;
}
.fi-input--lg .selectize-input {
    height: 56px !important;
    font-size: 16px !important;
}

/* Error */
.fi-input--error .selectize-input {
    border-color: #E5534B !important;
    background: #FEF2F2 !important;
}

/* Disabled */
.fi-field .selectize-control.disabled .selectize-input {
    background: #EAEAEA !important;
    color: rgba(26, 26, 26, 0.38) !important;
    cursor: not-allowed;
}

/* ============================================
   GOOGLE PLACES AUTOCOMPLETE
   ============================================ */

.pac-container {
    border: 1.5px solid #C4BFB6;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-top: 4px;
    overflow: hidden;
    font-size: 15px;
    font-family: inherit;
    padding: 4px 0;
}

.pac-item {
    padding: 10px 1rem;
    color: #1A1A1A;
    border-top: none;
    cursor: pointer;
    line-height: 1.4;
}

.pac-item:hover,
.pac-item-selected {
    background: #FAFAF7;
}

.pac-item-query {
    font-size: 15px;
    color: #1A1A1A;
}

.pac-matched {
    font-weight: 600;
}

.pac-icon {
    display: none;
}

.pac-logo::after {
    margin: 4px 1rem 6px;
}

/* ============================================
   NUMBER INPUT — hide native spin buttons
   ============================================ */
input[type="number"].fi-input:not(.fi-input--spinnable)::-webkit-inner-spin-button,
input[type="number"].fi-input:not(.fi-input--spinnable)::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].fi-input:not(.fi-input--spinnable) {
    -moz-appearance: textfield;
}

/* ============================================
   DATE / TIME
   ============================================ */
input[type="date"].fi-input,
input[type="time"].fi-input,
input[type="datetime-local"].fi-input {
    color-scheme: light;
}

input[type="date"].fi-input::-webkit-calendar-picker-indicator,
input[type="time"].fi-input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].fi-input::-webkit-calendar-picker-indicator {
    opacity: 0.4;
    filter: sepia(30%) saturate(0%) hue-rotate(0deg);
    cursor: pointer;
}

/* ============================================
   FILE INPUT
   ============================================ */
input[type="file"].fi-input {
    padding: 0.55rem 1rem;
    cursor: pointer;
    height: auto;
    min-height: 48px;
}

/* ============================================
   ERROR MESSAGE
   ============================================ */
.fi-field-error {
    font-size: 12.5px;
    color: #C0392B;
    line-height: 1.4;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.fi-field-error-icon {
    margin-top: 1px;
    font-size: 12px;
    flex-shrink: 0;
}

/* ============================================
   HINT MESSAGE
   ============================================ */
.fi-field-hint {
    font-size: 12.5px;
    color: rgba(74, 74, 74, 0.65);
    line-height: 1.4;
    margin: 0;
}

/* ============================================
   SUCCESS STATE
   ============================================ */
.fi-input--success .fi-input {
    border: 1.5px solid #22A06B;
}

/* ============================================
   BOOTSTRAP INPUT-GROUP COMPAT
   ============================================ */
.fi-field .input-group {
    display: contents;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .fi-input--lg .fi-input {
        height: 52px;
        font-size: 15px;
    }

    .fi-input {
        font-size: 14px;
    }
}

/* ============================================
   SELECTIZE — MODE MULTIPLE
   ============================================ */
.fi-field .selectize-control.multi .selectize-input {
    height: auto !important;
    padding: 6px 2.5rem 6px 0.75rem !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 20px !important;
    gap: 4px;
}
.fi-field .selectize-control.multi .selectize-input .item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    background: #EEECEA;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    padding: 4px 10px 4px 12px;
    font-size: 13.5px;
    color: #1A1A1A;
    line-height: 1.4;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   RADIO SEGMENTED CONTROL
   ============================================ */
.fi-radio-segment {
    display: inline-flex;
    flex-wrap: wrap;
    background: #FAFAF7;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    padding: 3px;
    gap: 3px;
}
.fi-radio-segment input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.fi-radio-segment label {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 20px;
    font-size: 13.5px;
    color: #7A756E;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.fi-radio-segment label:hover {
    color: #1A1A1A;
}
.fi-radio-segment input[type="radio"]:checked + label {
    background: #1A1A1A;
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.fi-radio-segment input[type="radio"]:focus-visible + label {
    box-shadow: 0 0 0 4px rgba(156, 149, 137, 0.25);
}

/* ============================================
   SWITCH
   ============================================ */

.fi-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.fi-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.fi-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 0.18s ease;
}

.fi-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease;
}

/* Checked */
.fi-switch input[type="checkbox"]:checked ~ .fi-switch-track {
    background: #1A1A1A;
}

.fi-switch input[type="checkbox"]:checked ~ .fi-switch-track .fi-switch-thumb {
    transform: translateX(18px);
}

/* Focus */
.fi-switch input[type="checkbox"]:focus-visible ~ .fi-switch-track {
    box-shadow: 0 0 0 4px rgba(156, 149, 137, 0.25);
}

/* Disabled */
.fi-switch input[type="checkbox"]:disabled ~ .fi-switch-track {
    background: rgba(0, 0, 0, 0.07);
    cursor: not-allowed;
}

.fi-switch input[type="checkbox"]:disabled ~ .fi-switch-track .fi-switch-thumb {
    background: #E0DDD9;
}

.fi-switch input[type="checkbox"]:disabled ~ .fi-switch-label {
    color: rgba(26, 26, 26, 0.35);
    cursor: not-allowed;
}

.fi-switch:has(input:disabled) {
    cursor: not-allowed;
}

/* Label */
.fi-switch-label {
    font-size: 14px;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 1.3;
    cursor: pointer;
}

.fi-switch-label small {
    font-weight: 400;
    color: rgba(26, 26, 26, 0.45);
    margin-left: 4px;
}