/* =====================================================================
   Floating form labels (loaded after main.css from components/meta.php)
   ---------------------------------------------------------------------
   The theme hides a field's .cf-label as soon as the field is focused or
   filled. Instead, the label now sits in the field like a placeholder and
   moves above it while the field is focused or has a value, so the visitor
   always sees what the field is for.

   "Has a value" is the .has-value class that components/footer-scripts.php
   keeps in sync on every .form-input. :focus-within (rather than
   input:focus ~ label) also covers the phone field, whose input
   intl-tel-input wraps in a .iti element.

   The !important flags override the theme's hide rules
   (input:focus ~ .cf-label, .has-value .cf-label, input[value] ~ .cf-label),
   which are more specific than anything sensible here.
   ===================================================================== */

/* Resting state: inside the field, like a placeholder. */
.contact-form:not(.style-3) .form-input .cf-label {
    visibility: visible !important;
    opacity: 1 !important;
    top: 10px;
    inset-inline-start: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: top .2s ease, font-size .2s ease, color .2s ease, inset-inline-start .2s ease;
}

/* Phone: clear the country flag while the label rests in the field. */
.contact-form:not(.style-3) .form-input .iti ~ .cf-label {
    inset-inline-start: 52px;
}

/* Raised state: focused, filled, or filled in by the browser's autofill. */
.contact-form:not(.style-3) .form-input:focus-within .cf-label,
.contact-form:not(.style-3) .form-input.has-value .cf-label,
.contact-form:not(.style-3) .form-input input:-webkit-autofill ~ .cf-label {
    top: -14px;
    inset-inline-start: 0;
    font-size: 12.5px;
    letter-spacing: .2px;
}

.contact-form:not(.style-3) .form-input:focus-within .cf-label {
    color: var(--primary-color);
}

/* Forms that already show the label above the field (style-3: service /
   solution / product pages) — keep it there after the visitor types. */
.contact-form.style-3 .form-input .cf-label {
    visibility: visible !important;
    opacity: 1 !important;
}

.iti{width:100%}