/* ==============================================
   CF7 integration — make CF7 output match
   the original contacts.html design exactly.
   ============================================== */

/* CF7 wraps in .wpcf7 > form — add contacts-form__body class via shortcode html_class */
.contacts-form .wpcf7 {
    width: 100%;
}

/* CF7 generates <p> wrappers around fields — reset them */
.contacts-form .wpcf7-form p {
    margin: 0;
    padding: 0;
}

/* Restore policy paragraph margins from original design */
.contacts-form .wpcf7-form p.contacts-form__policy {
    margin: 33px 0 60px;
}

/* CF7 <br> tags inside field wrappers — hide */
.contacts-form .wpcf7-form .contacts-form__grid br,
.contacts-form .wpcf7-form > br {
    display: none;
}

/* ==============================================
   Submit button — CF7 uses <input type="submit">
   instead of <button>. Override to match design.
   ============================================== */

.contacts-form .wpcf7-form input[type="submit"].contacts-form__submit,
.contacts-form .wpcf7-form input[type="submit"].wpcf7-submit {
    width: 272px;
    height: 53px;
    background-color: #212121;
    color: #fff;
    border: none;
    border-radius: 6px;
    text-transform: uppercase;
    font-family: Gilroy, sans-serif;
    font-weight: 400;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.contacts-form .wpcf7-form input[type="submit"].contacts-form__submit:hover,
.contacts-form .wpcf7-form input[type="submit"].wpcf7-submit:hover {
    background-color: #333;
}

/* ==============================================
   intl-tel-input — phone field with flag
   Match original design: flag + small arrow + input
   No dial code shown.
   ============================================== */

/* Container — force flex layout so flag and input sit side by side */
.contacts-form__phone .iti {
    width: 100%;
    display: flex !important;
    align-items: center;
    --iti-path-flags-1x: url('https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/img/flags.webp');
    --iti-path-flags-2x: url('https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/img/flags@2x.webp');
    --iti-path-globe-1x: url('https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/img/globe.webp');
    --iti-path-globe-2x: url('https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/img/globe@2x.webp');
}

/* The actual tel input */
.contacts-form__phone .iti input[type="tel"],
.contacts-form__phone .iti .iti__tel-input {
    width: 100% !important;
    flex: 1;
    padding-left: 48px !important;
}

/* Country container (v24: iti__country-container, v23: iti__flag-container) */
.contacts-form__phone .iti .iti__country-container,
.contacts-form__phone .iti .iti__flag-container {
    flex: none;
    display: flex;
    align-items: center;
    z-index: 2;
}

/* Country selector button — match design (flag ~20px + arrow ~10px + gap) */
.contacts-form__phone .iti .iti__selected-country-primary {
    background: transparent;
    border: none;
    padding: 0 !important;
    height: auto;
    display: flex;
    align-items: center;
}

.contacts-form__phone .iti .iti__selected-country {
    background: transparent;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

/* Arrow — small triangle matching original design */
.contacts-form__phone .iti .iti__arrow {
    margin-left: 6px;
    margin-right: 10px;
    border: none;
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.946 5.376c-.52.746-1.372.746-1.892 0l-3.42-4.25C.19.487.55 0 1.266 0h7.468c.716 0 1.075.487.632 1.126l-3.42 4.25z' fill='%23000' fill-opacity='.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: none;
}

.contacts-form__phone .iti .iti__arrow--up {
    transform: rotate(180deg);
}

/* Hide dial code — design shows only flag + arrow */
.contacts-form__phone .iti .iti__selected-dial-code {
    display: none;
}

/* Dropdown */
.iti__dropdown-content {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.iti__search-input {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.iti__country {
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.iti__country:hover,
.iti__country--highlight {
    background-color: #f5f5f5;
}

.iti__dial-code {
    color: #888;
}

/* ==============================================
   CF7 validation & response messages
   ============================================== */

.contacts-form .wpcf7-not-valid-tip {
    display: block;
    color: #d32f2f;
    font-size: 12px;
    margin-top: 4px;
    letter-spacing: 0.03em;
}

.contacts-form .wpcf7-response-output {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0.03em;
}

/* Show response block only after form submission */
.contacts-form .wpcf7 form.sent .wpcf7-response-output,
.contacts-form .wpcf7 form.invalid .wpcf7-response-output,
.contacts-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contacts-form .wpcf7 form.failed .wpcf7-response-output {
    margin: 16px 0 0;
    border: 1px solid;
}

/* Only show padding when there is actual content */
.contacts-form .wpcf7 form.sent .wpcf7-response-output,
.contacts-form .wpcf7 form.invalid .wpcf7-response-output,
.contacts-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contacts-form .wpcf7 form.failed .wpcf7-response-output {
    padding: 12px 16px;
}

.contacts-form .wpcf7 form.sent .wpcf7-response-output {
    border-color: #4caf50;
    color: #1b5e20;
    background: #e8f5e9;
}

.contacts-form .wpcf7 form.invalid .wpcf7-response-output,
.contacts-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contacts-form .wpcf7 form.failed .wpcf7-response-output {
    border-color: #f5c6cb;
    color: #611a15;
    background: #fdecea;
}

.contacts-form .wpcf7-not-valid {
    border-color: #d32f2f !important;
}

/* Textarea — match design height (113px) */
.contacts-form .wpcf7-form .contacts-form__control--message {
    min-height: 113px;
    max-height: 113px;
}

/* CF7 spinner — center below submit button */
.contacts-form .wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
}