/* ==========================================================
   CET crew shared Ukrainian phone input
   ========================================================== */

.phone-field {
    position: relative;

    width: 100%;
    min-width: 0;

    border-radius: 12px;
    background: var(--background);
}

.phone-field .form-control,
.phone-field .quick-contact-form__control {
    position: relative;
    z-index: 2;

    background: transparent;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.025em;
}

.phone-mask-preview {
    position: absolute;
    z-index: 1;
    inset: 0;

    display: flex;
    align-items: center;

    min-width: 0;
    padding: 13px 15px;

    overflow: hidden;

    color: var(--text-muted);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
    font-size: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.025em;
    line-height: normal;

    pointer-events: none;
    white-space: pre;
}

.phone-mask-preview__entered {
    /*
     * Введена частина вже відображається самим input.
     * Цей span потрібен лише для точного зміщення
     * напівпрозорої невведеної частини маски.
     */
    visibility: hidden;
    white-space: pre;
}

.phone-mask-preview__missing {
    color: var(--text-muted);
    opacity: 0.3;
    white-space: pre;
}