/**
 * Contact Form 7 - Floating labels
 * PRODUCTION-SAFE - działa we wszystkich przeglądarkach
 * Logika "filled" oparta o JavaScript (nie :placeholder-shown)
 * 
 * @package Storefront Child
 * @version 4.0.2 FINAL
 */

.wpcf7 p br {
    display: none;
}

.wpcf7 p {
    position: relative;
    margin-bottom: 1.5em;
}

.wpcf7 .wpcf7-form-control-wrap {
    position: relative;
    display: block;
}

/* ===================================
   FLOATING LABELS - POZYCJA DOMYŚLNA
   =================================== */

.wpcf7 p > label,
.wpcf7 .wpcf7-form-control-wrap > label {
    color: #757575;
    cursor: text;
    font-family: inherit;
    font-size: 16px;
    font-style: inherit;
    font-weight: inherit;
    left: 10px;
    letter-spacing: inherit;
    line-height: 22px;
    margin: 0;
    max-width: calc(100% - 24px);
    overflow: hidden;
    position: absolute;
    text-decoration: inherit;
    text-overflow: ellipsis;
    text-transform: inherit;
    top: 25px;
    transform: translateY(-50%);
    transform-origin: top left;
    transition: none;
    z-index: 2;
    pointer-events: none;
    
    /* WCAG - kontrast */
    background: var(--light, #E5E4E2);
    padding: 0 4px;
}

.has-dark-controls .wpcf7 p > label,
.has-dark-controls .wpcf7 .wpcf7-form-control-wrap > label {
    color: hsla(0, 0%, 100%, 0.6);
    background: var(--dark, #35332F);
}

/* ===================================
   LOGIKA FLOATING - FOCUS
   Działa natywnie bez JS
   =================================== */

.wpcf7 p:has(input:focus) > label,
.wpcf7 p:has(textarea:focus) > label,
.wpcf7 .wpcf7-form-control-wrap:has(input:focus) > label,
.wpcf7 .wpcf7-form-control-wrap:has(textarea:focus) > label {
    top: 6px;
    transform: scale(0.82);
}

/* ===================================
   LOGIKA FLOATING - WYPEŁNIONE (KLASA .is-filled)
   Dodawana przez JavaScript - stabilna we wszystkich przeglądarkach
   =================================== */

.wpcf7 p.is-filled > label,
.wpcf7 .wpcf7-form-control-wrap.is-filled > label {
    top: 6px;
    transform: scale(0.82);
}

/* ===================================
   FIREFOX ESR FALLBACK
   =================================== */

@supports not(selector(:has(*))) {
    /* Firefox ESR nie obsługuje :has() */
    .wpcf7 p > label,
    .wpcf7 .wpcf7-form-control-wrap > label {
        top: 6px;
        transform: scale(0.82);
    }
    
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="url"],
    .wpcf7 textarea {
        padding: 24px 9px 8px;
    }
}

/* ===================================
   POLA - JAK WOOCOMMERCE
   =================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"] {
    background-color: #fff;
    border: 1px solid hsla(0, 0%, 7%, 0.8);
    border-radius: 4px;
    box-sizing: border-box;
    color: #2b2d2f;
    font-family: inherit;
    font-size: 16px;
    font-style: inherit;
    font-weight: inherit;
    height: 50px;
    letter-spacing: inherit;
    line-height: 25px;
    margin: 0;
    min-height: 0;
    padding: 16px 12px;
    text-decoration: inherit;
    text-transform: inherit;
    width: 100%;
}

.wpcf7 textarea {
    background-color: #fff;
    border: 1px solid hsla(0, 0%, 7%, 0.8);
    border-radius: 4px;
    box-sizing: border-box;
    color: #2b2d2f;
    font-family: inherit;
    font-size: 16px;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1.5;
    margin: 0;
    min-height: 120px;
    padding: 16px 12px;
    text-decoration: inherit;
    text-transform: inherit;
    width: 100%;
    resize: vertical;
}

/* Padding zmienia się gdy focus LUB .is-filled */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 p.is-filled input,
.wpcf7 p.is-filled textarea,
.wpcf7 .wpcf7-form-control-wrap.is-filled input,
.wpcf7 .wpcf7-form-control-wrap.is-filled textarea {
    padding: 24px 9px 8px;
}

/* Border gdy focus */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    background-color: #fff;
    border: 1.5px solid;
    color: #2b2d2f;
}

/* Dark controls */
.has-dark-controls .wpcf7 input,
.has-dark-controls .wpcf7 textarea {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: hsla(0, 0%, 100%, 0.4);
    color: #fff;
}

.has-dark-controls .wpcf7 input:focus,
.has-dark-controls .wpcf7 textarea:focus {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1.5px solid;
    color: #fff;
}

/* Placeholder niewidoczny */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    opacity: 0;
}

/* ===================================
   VALIDATION
   =================================== */

.wpcf7 .wpcf7-not-valid {
    border-color: #cc1818 !important;
}

.wpcf7 .wpcf7-not-valid-tip {
    color: #cc1818;
    display: block;
    font-size: 13px;
    line-height: 16px;
    margin-top: 8px;
}

/* ===================================
   PARAGRAF Z PRZYCISKIEM – MNIEJSZY MARGINES
   =================================== */

.wpcf7 p:has(input[type="submit"]) {
    margin-bottom: 0.5em !important;
}

/* ===================================
   RESPONSE MESSAGE – JAK WOOCOMMERCE
   =================================== */

.wpcf7 .wpcf7-response-output {
    background-color: var(--accent-green) !important;
    color: #fff !important;
    border: none !important;
    border-left: .6180469716em solid rgba(0, 0, 0, .15) !important;
    border-radius: 2px !important;
    padding: 1em 2em 1em 3.5em !important;
    margin: 0 0 2.617924em 0 !important;
    position: relative !important;
    list-style: none outside !important;
    font-size: 14px;
    line-height: 1.618;
    clear: both;
}

.wpcf7 .wpcf7-validation-errors {
    background-color: var(--accent-red) !important;
    color: #fff !important;
    border: none !important;
    border-left: .6180469716em solid rgba(0, 0, 0, .15) !important;
    border-radius: 2px !important;
    padding: 1em 2em 1em 3.5em !important;
    margin: 0 0 2.617924em 0 !important;
    position: relative !important;
    list-style: none outside !important;
    font-size: 14px;
    line-height: 1.618;
    clear: both;
}

.wpcf7 .wpcf7-mail-sent-ok {
    background-color: var(--accent-green) !important;
    color: #fff !important;
    border-color: rgba(0, 0, 0, .15) !important;
}

/* ===================================
   BUTTON – IDENTYCZNY JAK WC (CZERWONY)
   =================================== */

.wpcf7 input[type="submit"] {
    background: var(--accent-red) !important;
    color: #ffffff !important;
    border: 1px solid var(--accent-red) !important;
    border-radius: 3px !important;
    padding: 10px 20px !important;

    font-family: var(--font-menu) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;

    cursor: pointer;
    transition: all var(--transition-normal) !important;

    box-shadow: none !important;
    text-decoration: none !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    line-height: 1.618;
    box-sizing: border-box;
    min-height: 3em;

    transform: none !important;
    transform-origin: center center !important;
    will-change: transform !important;

    letter-spacing: normal;
    text-transform: none;
    
    overflow: hidden !important;
}

/* Hover / Focus / Active – IDENTYCZNE JAK WC */
.wpcf7 input[type="submit"]:is(:hover, :focus, :active):not(:disabled) {
    background: var(--accent-red-dark) !important;
    border-color: var(--accent-red-dark) !important;
    color: #ffffff !important;

    transform: scale(1.03) !important;
    backface-visibility: hidden !important;
}

/* Disabled – bez hover */
.wpcf7 input[type="submit"]:disabled {
    background: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    color: #ffffff !important;

    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
}

/* Loading (AJAX CF7) */
.wpcf7 form.submitting input[type="submit"] {
    opacity: 0.7;
    cursor: wait;
}

/* ===================================
   CHECKBOX - POZYCJA OBOK TEKSTU
   =================================== */

/* Wrapper checkboxa – inline-block z wyrównaniem do tekstu */
.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-acceptance) {
    display: inline-block;
    vertical-align: baseline;
    margin-right: 8px;
    line-height: 1.618;
}

.wpcf7 .wpcf7-acceptance label {
    color: var(--light, #E5E4E2) !important;
    display: inline-flex !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    gap: 8px;
    pointer-events: all !important;
    position: static !important;
}

.wpcf7 input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
    width: 20px;
    height: 20px;
    vertical-align: baseline;
    position: relative;
    top: 2px;
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 textarea {
        font-size: 16px;
    }
    
    .wpcf7 input[type="submit"] {
        width: 100%;
    }
    
    /* Paragraf z przyciskiem - jeszcze mniejszy margines */
    .wpcf7 p:has(input[type="submit"]) {
        margin-bottom: 0.25em !important;
    }
}

.wpcf7 .ajax-loader {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

/* ===================================
   CF7 – TŁO PÓL JAK NAGŁÓWKI
   =================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
    background-color: var(--light) !important;
    color: var(--dark) !important;
    border-color: var(--dark) !important;
}

/* Focus – bez zmiany koloru tła */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    background-color: var(--light) !important;
    border-color: var(--dark) !important;
}

/* Floating label – kontrast na jasnym tle */
.wpcf7 p > label,
.wpcf7 .wpcf7-form-control-wrap > label {
    color: var(--dark) !important;
    background: var(--light) !important;
}

/* Dark controls – zostają spójne */
.has-dark-controls .wpcf7 input,
.has-dark-controls .wpcf7 textarea {
    background-color: var(--light) !important;
    color: var(--dark) !important;
}

.has-dark-controls .wpcf7 p > label,
.has-dark-controls .wpcf7 .wpcf7-form-control-wrap > label {
    background: var(--light) !important;
    color: var(--dark) !important;
}