/* Shared candidate phone field, views/partials/_phoneField.ejs.
   One skin, adapted to the two places it is used: the settings card and the
   public application form. Nothing here is page specific except the two
   override blocks at the bottom, which only align the metrics with the fields
   sitting next to the component. */

.phone-field {
    display: block;
}

.phone-field__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    margin: 0 0 6px;
}

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

.phone-field__control {
    padding: 11px 12px;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background-color: var(--white);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* The option text is just the dial code ("+352" at its longest), so the
   selector only needs room for that plus the chevron. Everything else goes
   to the number itself. */
.phone-field__select {
    flex: 0 0 96px;
    width: 96px;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.phone-field__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.phone-field__control:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px var(--violet-glow);
}

.phone-field__control.is-invalid {
    border-color: var(--danger-dark);
    box-shadow: none;
}

/* Only a real error earns a line under the field. The expected format is the
   placeholder of the number input, so the form carries no permanent prose. */
.phone-field__error {
    margin: 8px 0 0;
    color: var(--danger-dark);
    font-size: .82rem;
    line-height: 1.6;
    font-weight: 600;
}

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

/* Public application form: same metrics as the inputs around it. */
.application-form .phone-field__label {
    font-weight: bold;
    font-size: .9rem;
    color: var(--ink);
    margin-bottom: 8px;
}

.application-form .phone-field__control {
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-family: 'IBM Plex Sans', sans-serif;
}

.application-form .phone-field__control:focus {
    box-shadow: 0 0 0 3px var(--violet-ring);
}

/* A dial code is short enough to stay beside the number even on a phone:
   stacking them would waste a whole row for four characters. */
@media (max-width: 640px) {
    .phone-field__select {
        flex: 0 0 84px;
        width: 84px;
    }
}