/* Телефон UA: одно поле +380 (XX) XXX XX-XX */
.phone-field {
    display: block;
    width: 100%;
}

.phone-field__input {
    width: 100%;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.phone-field__input::placeholder {
    color: var(--text-gray, #94a3b8);
    opacity: 0.85;
}

.checkout-box .form-group .phone-field,
.info-box .form-group .phone-field,
.auth-form .phone-field,
.topline-contact-form .phone-field,
.admin-form-grid .phone-field,
.ttn-prom-field .phone-field {
    margin: 0;
}

.checkout-box .phone-field__input {
    width: 100%;
    padding: 14px 15px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    color: var(--text-white);
    outline: none;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-box .phone-field__input:focus {
    border-color: var(--accent-blue);
    box-shadow: var(--ui-focus-ring, 0 0 0 3px rgba(31, 100, 183, 0.18));
}

.profile-layout .phone-field__input {
    width: 100%;
    padding: 14px 15px;
    background: #ffffff;
    border: 1px solid #c9d8ea;
    border-radius: 10px;
    color: var(--text-white);
    outline: none;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-layout .phone-field__input:focus {
    border-color: var(--accent-blue);
    box-shadow: var(--ui-focus-ring, 0 0 0 3px rgba(31, 100, 183, 0.18));
}

.checkout-addr-modal-form .phone-field {
    margin: 0;
}

.checkout-addr-modal-form .phone-field__input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--ui-control-radius-lg);
    color: var(--text-white);
    outline: none;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.checkout-addr-modal-form .phone-field__input:focus {
    border-color: var(--accent-blue);
    box-shadow: var(--ui-focus-ring, 0 0 0 3px rgba(31, 100, 183, 0.18));
}

.topline-contact-form .phone-field {
    margin-bottom: 10px;
}

.topline-contact-form .phone-field__input {
    font-size: 14px;
}

.admin-app .phone-field__input {
    font-size: 14px;
}
