/* Contact Form 7 forms whose body is written as Tailwind markup and embedded
 * through a shortcode (the contact page). wpautop() wraps that body in <p> and
 * turns every newline into a <br>, so the input lands on a second line while
 * the "+374" prefix stays centred on the whole two-line box — on top of the
 * placeholder. Dropping those breaks puts the field back on the prefix's line.
 *
 * Scoped to .phone-input on purpose: other CF7 forms on the site do rely on
 * wpautop's breaks to separate their fields.
 */

.wpcf7-form .phone-input p {
    margin: 0;
    padding: 0;
}

.wpcf7-form .phone-input br {
    display: none;
}

.wpcf7-form .phone-input .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* The form's Tailwind utilities never reach these inputs: the parent theme
 * styles them as input[type="tel"] and Contact Form 7 as
 * .wpcf7 input:not([type="submit"]):not(…), both of which outrank a single
 * utility class whatever the source order. So pl-16 — the room the "+374"
 * prefix needs — was dropped, and the prefix sat on the placeholder.
 *
 * The 20px gap below the field moves to the wrapper: while it belonged to the
 * input, the absolutely positioned prefix centred itself on a box 20px taller
 * than the field and hung 10px too low.
 */

.wpcf7-form .phone-input input[type="tel"] {
    padding-left: 4rem;
    margin-bottom: 0 !important;
}

.wpcf7-form .phone-input {
    margin-bottom: 20px;
}