/* ============================================================
   Campuri de formular reutilizabile:
   - input cu iconita SVG in stanga (.field-icon-wrap + .field-icon)
   - camp de telefon cu dropdown de prefix de tara (_PhoneField)
   Folosite pe toate formularele (Contact, Comanda, Demo, Migrare).
   ============================================================ */

/* ─── Input cu iconita SVG in stanga ─────────────────────────── */
/* Wrapper peste input; iconita e pozitionata absolut in stanga,
   iar input-ul primeste padding-left ca sa nu se suprapuna. */
.field-icon-wrap {
    position: relative;
    display: block;
}

.field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-icon);
    pointer-events: none;
    z-index: 1;
}

/* Input-ul din wrapper face loc iconitei (padding-left mai mare) si umple wrapper-ul. */
.field-icon-wrap > input,
.field-icon-wrap > textarea {
    width: 100%;
    padding-left: 42px !important;
}

/* Pentru textarea, iconita sta sus (nu centrat vertical). */
.field-icon-wrap--top .field-icon {
    top: 16px;
    transform: none;
}

/* ─── Iconita SVG in stanga la dropdown-urile ui-select ──────── */
/* Wrapper-ul .ui-select primeste iconita ca prim copil (absolut, in stanga);
   trigger-ul face loc prin padding-left. Iconita se adauga in view cu clasa
   .field-icon in interiorul .ui-select, iar .ui-select capata .ui-select--with-icon. */
.ui-select--with-icon {
    /* pozitionarea iconitei foloseste .ui-select ca referinta */
}

    .ui-select--with-icon > .field-icon {
        left: 15px;
        z-index: 2;
    }

    .ui-select--with-icon .ui-select__trigger {
        padding-left: 42px;
    }

    /* In starea deschisa/focus trigger-ul are border 2px si padding recalculat;
       pastram padding-left-ul marit pentru iconita. */
    .ui-select--with-icon .ui-select__trigger[aria-expanded="true"],
    .ui-select--with-icon .ui-select__trigger:focus-visible {
        padding-left: 41px;
    }

/* ─── Camp de telefon cu prefix ──────────────────────────────── */
.phone-field {
    width: 100%;
}

.phone-field__row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Selectorul de prefix (buton + meniu). */
.phone-prefix {
    position: relative;
    flex-shrink: 0;
}

.phone-prefix__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-height: 48px;
    padding: 0 12px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    color: var(--color-text-primary);
    transition: border-color var(--transition-base);
}

    .phone-prefix__trigger:hover {
        border-color: var(--color-icon);
    }

    .phone-prefix.is-open .phone-prefix__trigger {
        border-color: var(--color-cta);
    }

.phone-prefix__flag {
    font-size: 18px;
    line-height: 1;
}

.phone-prefix__code {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.phone-prefix__caret {
    font-size: 20px;
    color: var(--color-icon);
    transition: transform var(--transition-base);
}

.phone-prefix.is-open .phone-prefix__caret {
    transform: rotate(180deg);
}

/* Meniul de prefixe (lista de tari). */
.phone-prefix__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

    .phone-prefix__menu[hidden] {
        display: none;
    }

.phone-prefix__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-base);
}

    .phone-prefix__option:hover {
        background-color: var(--color-bg-subtle);
    }

    .phone-prefix__option .phone-prefix__country {
        flex: 1;
        font-size: var(--font-size-sm);
        color: var(--color-text-primary);
    }

    .phone-prefix__option .phone-prefix__code {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

/* Numarul (input vizibil). Ocupa restul latimii. */
.phone-field__number {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    font: inherit;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

    .phone-field__number:focus {
        outline: none;
        border-color: var(--color-cta);
        box-shadow: 0 0 0 3px rgba(34, 173, 1, 0.12);
    }

    .phone-field__number::placeholder {
        color: var(--color-icon);
    }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .phone-prefix__trigger {
        padding: 0 8px;
    }

    .phone-prefix__menu {
        min-width: 200px;
    }
}