.epiano-contact-form {
    background-color: var(--bg-primary, #fcfbf9);
    border: 1px solid var(--border-color, #e3decb);
    padding: var(--space-lg, 2rem);
}

@media (min-width: 768px) {
    .epiano-contact-form {
        padding: var(--space-xl, 3rem);
    }
}

.epiano-contact-form__title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: var(--fz-xl, 2rem);
    color: var(--bg-dark, #191614);
    margin-bottom: var(--space-lg, 2rem);
    padding-bottom: var(--space-xs, 0.5rem);
    border-bottom: 1px solid var(--border-color, #e3decb);
}

.epiano-contact-form__intro {
    margin-bottom: var(--space-lg, 2rem);
    color: var(--text-light, #524e4c);
    font-size: 0.95em;
    line-height: 1.6;
}

/* ── CF7 form overrides ─────────────────────────────────────── */

/*
 * CF7 wpautop owija grupy pól w <p> i rozdziela labele przez <br>.
 * Traktujemy każdy <p> jako "form-group" i każdy <label> jako pole.
 */

.epiano-contact-form__form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1.5rem);
}

/* <p> = kontener grupy pól — zero margines, display flex kolumna */
.epiano-contact-form__form p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1.5rem);
}

/* <br> dodawane przez CF7 — ukryć, spacing robi gap */
.epiano-contact-form__form p br {
    display: none;
}

/* 2-kolumnowy rząd (email + telefon) */
.epiano-contact-form__form .form-row p {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm, 1rem);
}

.epiano-contact-form__form label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light, #524e4c);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.epiano-contact-form__form input[type="text"],
.epiano-contact-form__form input[type="email"],
.epiano-contact-form__form input[type="tel"],
.epiano-contact-form__form textarea {
    width: 100%;
    background-color: var(--bg-primary, #fcfbf9);
    border: 1px solid var(--border-color, #e3decb);
    padding: 0.875rem 1rem;
    color: var(--text-main, #2b2624);
    font-family: inherit;
    font-size: var(--fz-md, 1rem);
    transition: border-color 0.2s ease;
    border-radius: 0;
    box-sizing: border-box;
}

.epiano-contact-form__form input[type="text"]:focus,
.epiano-contact-form__form input[type="email"]:focus,
.epiano-contact-form__form input[type="tel"]:focus,
.epiano-contact-form__form textarea:focus {
    outline: none;
    border-color: var(--accent-gold, #c59b27);
}

.epiano-contact-form__form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Wysoka specificity (0,3,1) + !important na kluczowych prop
   żeby bić Kadence: button selector (0,0,1) z !important */
.epiano-contact-form .epiano-contact-form__form input[type="submit"],
.epiano-contact-form .epiano-contact-form__form .wpcf7-submit {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    width:            100% !important;
    padding:          0.875rem 2rem !important;
    background-color: var(--accent-gold, #c59b27) !important;
    color:            var(--text-inverse, #fcfbf9) !important;
    font-family:      inherit !important;
    font-weight:      500 !important;
    font-size:        0.85rem !important;
    letter-spacing:   1px !important;
    text-transform:   uppercase !important;
    border:           1px solid transparent !important;
    border-radius:    0 !important;
    cursor:           pointer !important;
    transition:       background-color 0.3s ease, color 0.3s ease !important;
    box-shadow:       none !important;
}

.epiano-contact-form .epiano-contact-form__form input[type="submit"]:hover,
.epiano-contact-form .epiano-contact-form__form .wpcf7-submit:hover {
    background-color: var(--bg-dark, #191614) !important;
    color:            var(--text-inverse, #fcfbf9) !important;
}

/* ── Spinner absolute na przycisku ──────────────────────────── */

/* <p> zawierające submit = positioning context */
.epiano-contact-form__form p:has(> input[type="submit"]) {
    position: relative;
}

/* Spinner wsuwa się w prawy róg przycisku */
.epiano-contact-form__form .wpcf7-spinner {
    position: absolute;
    right:   1rem;
    bottom:  0.875rem; /* = padding-top przycisku → centruje w osi Y */
    width:   20px;
    height:  20px;
    margin:  0;
}

/* ── Walidacja pól ───────────────────────────────────────────── */

.epiano-contact-form__form .wpcf7-not-valid {
    border-color: #c0392b !important;
}

.epiano-contact-form__form .wpcf7-not-valid-tip {
    display:      flex;
    align-items:  center;
    gap:          0.3rem;
    color:        #c0392b;
    font-size:    0.75rem;
    font-weight:  400;
    text-transform: none;
    letter-spacing: 0;
    margin-top:   0.3rem;
}

.epiano-contact-form__form .wpcf7-not-valid-tip::before {
    content:         '!';
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           14px;
    height:          14px;
    border-radius:   50%;
    background:      #c0392b;
    color:           #fff;
    font-size:       0.6rem;
    font-weight:     700;
}

/* ── Response output (sukces / błąd) ────────────────────────── */

/* Reset domyślnych stylów CF7 (żółta ramka #ffb900) */
.epiano-contact-form__form .wpcf7-response-output {
    margin-top:    var(--space-md, 1.5rem);
    padding:       0.875rem 1rem;
    font-size:     0.875rem;
    line-height:   1.5;
    border:        none !important;
    border-left:   3px solid var(--border-color, #e3decb) !important;
    border-radius: 0 !important;
    background:    transparent !important;
    color:         var(--text-light, #524e4c);
}

.wpcf7-form.invalid   .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam      .wpcf7-response-output {
    border-left-color: #a93226 !important;
    background:        rgba(169, 50, 38, 0.05) !important;
    color:             #a93226 !important;
}

.wpcf7-form.sent .wpcf7-response-output {
    border-left-color: #1e8449 !important;
    background:        rgba(30, 132, 73, 0.05) !important;
    color:             #1e8449 !important;
}