.contact-embed__code {
    width: 100%;
}

.contact-embed__code iframe,
.contact-embed__code #sp-container-standard {
    min-height: 800px;
    width: 100%;
    border: 0;
}
/* ----------------------------------------------------------------------------
 * Contact Form 7 form embedded via this component (e.g. on the contact section).
 * Without this, CF7 renders raw browser-default inputs that overflow the row.
 * -------------------------------------------------------------------------- */
.contact-embed__code .wpcf7-form {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-embed__code .contact-form__row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.contact-embed__code label {
    display: block;
    width: 100%;
    font-family: var(--font-body-medium);
    color: var(--color-text);
}

.contact-embed__code .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
}

.contact-embed__code input[type="text"],
.contact-embed__code input[type="email"],
.contact-embed__code input[type="tel"],
.contact-embed__code select,
.contact-embed__code textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-3);
    /* Neutral, NOT the accent: a form field's boundary is an interactive
       control (WCAG 1.4.11 wants 3:1) and #FFC107 is 1.63:1 on this
       background - yellow outlines would make the fields hard to find.
       The accent appears on focus instead, where it reads as feedback. */
    border: 1px solid var(--color-border-neutral);
    border-radius: var(--border-radius);
    background: var(--color-bg-white);
    color: var(--color-text);
    box-sizing: border-box;
}

.contact-embed__code input[type="text"]:focus,
.contact-embed__code input[type="email"]:focus,
.contact-embed__code input[type="tel"]:focus,
.contact-embed__code select:focus,
.contact-embed__code textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
}

.contact-embed__code textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-embed__code .wpcf7-submit {
    font-family: var(--font-heading-medium);
    /* Primary conversion action: carries the accent, like .cta-component.
       Slate text, never white - #FFC107 is 1.63:1 against white. */
    background: var(--color-accent);
    color: var(--color-text);
    border: none;
    border-radius: var(--border-radius);  /* 4px per Direction A, not a pill */
    padding: var(--btn-padding-y) var(--btn-padding-x);
    height: var(--btn-height);
    cursor: pointer;
}

.contact-embed__code .wpcf7-submit:hover {
    opacity: 0.9;
}

.contact-embed__code .wpcf7-response-output {
    border-radius: var(--border-radius);
    margin: var(--space-4) 0 0;
}