/* NailsMade — checkout phone field. Replaces the <style> block nm_phone_input.js used to
   inject from JS after first paint (see links.post.tpl for why that shifted the layout).

   Horizontal padding is deliberately NOT set here: with separateDialCode, intl-tel-input
   computes the input's padding-left itself from the rendered width of the flag + dial-code
   chip (which differs between "+1" and "+380"). Overriding it would clip or float the text. */

.litecheckout__field .iti {
    width: 100%;
    display: block;
}

.litecheckout__field .iti .iti__selected-flag {
    padding-left: 12px;
}

/* Pin the vertical padding. NAILSMADE.css:197 sets padding-top:32px/padding-bottom:17px only
   on :not(:placeholder-shown), so the row was 40px empty and 51px filled — it grew 11px the
   moment anything appeared in the field. Constant height, always. */
.litecheckout__field .iti input.litecheckout__input {
    padding-top: 32px !important;
    padding-bottom: 17px !important;
}

/* The floating label. intl-tel-input's _createWrapper does
   parentNode.insertBefore(wrapper, input); wrapper.appendChild(input) — so the input's
   nextElementSibling becomes null and every `input + .litecheckout__label` rule in the theme
   stops matching, freezing the label. We drive it from state classes that the JS toggles on
   the field container instead. `left` is set inline by the JS to match iti's computed
   padding-left, so it tracks the dial code's width. No :has() dependency. */
.litecheckout__field .iti + .litecheckout__label {
    top: 7px;
    font-size: 11px;
    transition: top 0.1s ease, font-size 0.1s ease;
}

.litecheckout__field.nm-phone-field:not(.nm-phone--filled):not(.nm-phone--focus) .iti + .litecheckout__label {
    top: 16px;
    font-size: 14px;
}

/* Reserve the validation line so an error never grows the grid row (the container is
   display:flex/column and data-ca-error-message-target-method="append" inserts into it). */
.litecheckout__field.nm-phone-field {
    min-height: 70px;
}

.litecheckout__field.nm-phone--invalid input.litecheckout__input {
    border-color: #c0392b;
}