/* ============================================================
   Section: Contact Form (.section-contact-form)
   ============================================================ */

.section-contact-form > .container {
    padding-block: var(--size-v-pad-md) var(--size-v-pad-sm);
}

/* ── Header block ─────────────────────────────────────────── */

.cf-header {
    max-width: 60rem;
    margin-inline: auto;
}

.cf-header .title {
    max-width: var(--size-max-heading-center);
    margin-inline: auto;
}

.cf-header .desc {
    max-width: var(--size-max-text);
    margin-inline: auto;
    margin-top: var(--size-section-title-mb);
    font-size: var(--fs-body-l);
    line-height: var(--lh-base);
    color: var(--color-text-pri-dark);
}

/* ── Form block ───────────────────────────────────────────── */

.cf-form {
    max-width: 48rem;
    margin-inline: auto;
    margin-top: var(--size-section-subcontent-mt);
}

/* CF7 structural reset */
.section-contact-form .wpcf7-form p {
    margin-block: 0 var(--size-section-stack-mt);
}

.section-contact-form .wpcf7-form p:last-of-type {
    margin-bottom: 0;
}

/* Labels */
.section-contact-form .wpcf7-form label {
    display: block;
    font-size: var(--fs-body-m);
    font-weight: var(--fw-medium);
    color: var(--color-text-sec-dark);
    margin-top: var(--size-section-stack-mt);
    margin-bottom: 0.4rem;
}

/* CF7 injects <br> between label and input — collapse it */
.section-contact-form .wpcf7-form label + br {
    display: none;
}

/* Text / email / tel inputs */
.section-contact-form .wpcf7-form input[type="text"],
.section-contact-form .wpcf7-form input[type="email"],
.section-contact-form .wpcf7-form input[type="tel"],
.section-contact-form .wpcf7-form textarea {
    display: block;
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: var(--fs-body-m);
    line-height: var(--lh-base);
    color: var(--color-text-pri-dark);
    background-color: var(--color-bg-light-200);
    border: 1px solid var(--color-border-light-100);
    border-radius: var(--radius-btn);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.section-contact-form .wpcf7-form input[type="text"]:focus,
.section-contact-form .wpcf7-form input[type="email"]:focus,
.section-contact-form .wpcf7-form input[type="tel"]:focus,
.section-contact-form .wpcf7-form textarea:focus {
    border-color: var(--color-border-light-300);
    box-shadow: 0 0 0 3px var(--color-overlay-gray-10);
}

.section-contact-form .wpcf7-form textarea {
    min-height: 9rem;
    resize: vertical;
}

/* Placeholder text */
.section-contact-form .wpcf7-form input::placeholder,
.section-contact-form .wpcf7-form textarea::placeholder {
    color: var(--color-text-ter-dark);
    opacity: 1;
}

/* Submit container — center aligned */
.section-contact-form .wpcf7-submit-container,
.section-contact-form .wpcf7-form p:has(input[type="submit"]) {
    text-align: center;
    margin-top: var(--size-section-cta-mt);
}

/* Submit button */
.section-contact-form .wpcf7-form input[type="submit"] {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding: var(--btn-pad-v) var(--btn-pad-h);
    font-size: var(--fs-body-m);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--color-text-pri-light);
    background-color: var(--color-bg-button-pri);
    border: var(--size-border-button-border) solid var(--color-border-button-pri);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.section-contact-form .wpcf7-form input[type="submit"]:hover {
    opacity: 0.85;
}

@media only screen and (max-width: 991.98px) {
    .section-contact-form .wpcf7-form input[type="submit"] {
        width: 100%;
    }
}

/* ── Country phone picker ─────────────────────────────────── */

/* Dropdown list — may be appended to body so no section scope */
.intl-tel-input ul.country-list {
    background-color: var(--color-bg-light-50) !important;
    border: 1px solid var(--color-border-light-100) !important;
    box-shadow: 0 4px 16px var(--color-shadow-card) !important;
    color: var(--color-text-pri-dark) !important;
}

.intl-tel-input .country-list .country-name {
    color: var(--color-text-pri-dark) !important;
}

.intl-tel-input .country-list .dial-code {
    color: var(--color-text-sec-dark) !important;
}

.intl-tel-input .country-list .country.highlight,
.intl-tel-input .country-list .country:hover {
    background-color: var(--color-bg-light-200) !important;
}

.intl-tel-input .country-list .divider {
    border-bottom-color: var(--color-border-light-100) !important;
}