/* us-clean-pakiet 2026-11-05.2 — krok 1 (kafle pakietu, COMFORT), cennik,
   błędy pól, kosmetyka kroku 1 i 3, 390 px. */

/* ---------- 1. Krok 1: stan zaznaczonego pakietu (wzorzec tagów objawów) ---------- */
html body #us-cf7-czyszczenie .us-cl-packages input:checked + .wpcf7-list-item-label {
    border: 1.5px solid #6169D6 !important;
    background: #6169D6 !important;
    color: #fff !important;
    font-weight: 600 !important;
}
html body #us-cf7-czyszczenie .us-cl-packages input:checked + .wpcf7-list-item-label::before {
    content: "✓";
    margin-right: 6px;
    font: inherit;
    font-weight: inherit;
    color: inherit;
}
html body #us-cf7-czyszczenie .us-cl-packages input:not(:checked) + .wpcf7-list-item-label::before {
    content: "";
}
html body #us-cf7-czyszczenie .us-cl-packages input:checked + .wpcf7-list-item-label::after {
    color: #fff;
}
html body #us-cf7-czyszczenie .us-cl-packages .wpcf7-list-item-label {
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
html body #us-cf7-czyszczenie .us-cl-packages input:focus-visible + .wpcf7-list-item-label {
    outline: 2px solid #6169D6;
    outline-offset: 2px;
}

/* ---------- 2. COMFORT: wyszarzony, nieklikalny, etykieta „Pakiet podstawowy" ---------- */
html body #us-cf7-czyszczenie .us-cl-packages .wpcf7-list-item.is-disabled label {
    cursor: default;
    pointer-events: none;
}
html body #us-cf7-czyszczenie .us-cl-packages .wpcf7-list-item.is-disabled .wpcf7-list-item-label {
    background: #f4f4f6 !important;
    border-color: #dcdce2 !important;
    color: #8d8d96 !important;
}
html body #us-cf7-czyszczenie .us-cl-packages input[value="COMFORT"] + .wpcf7-list-item-label::after {
    content: "99 zł\A Pakiet podstawowy" !important;
    color: #8d8d96 !important;
}
/* Nota o COMFORT zostaje widoczna — tłumaczy, dlaczego kafel jest nieaktywny. */
html body #us-cf7-czyszczenie p.us-cl-note.us-cl-comfort {
    display: block !important;
    margin: -8px 0 24px;
}

/* ---------- 3. Błąd pola: czerwona ramka (pola i kafle pakietu) ---------- */
html body #us-cf7-czyszczenie input.wpcf7-not-valid:not([type="checkbox"]):not([type="radio"]),
html body #us-cf7-czyszczenie select.wpcf7-not-valid,
html body #us-cf7-czyszczenie textarea.wpcf7-not-valid,
html body #us-cf7-czyszczenie input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
html body #us-cf7-czyszczenie select[aria-invalid="true"],
html body #us-cf7-czyszczenie textarea[aria-invalid="true"] {
    border-color: #B42318 !important;
}
html body #us-cf7-czyszczenie .us-phone-field:has(input.wpcf7-not-valid) .us-phone-frame,
html body #us-cf7-czyszczenie .us-phone-field:has(input[aria-invalid="true"]) .us-phone-frame {
    border-color: #B42318 !important;
}
html body #us-cf7-czyszczenie .us-cl-packages input.wpcf7-not-valid + .wpcf7-list-item-label,
html body #us-cf7-czyszczenie .us-cl-packages input[aria-invalid="true"] + .wpcf7-list-item-label {
    border-color: #B42318 !important;
}

/* ---------- 4. Puste kontenery przycisków (krok 1: ~200 px pustki) ---------- */
html body #us-cf7-czyszczenie .cf7mls-btns:empty,
html body #us-cf7-czyszczenie .cf7mls-btns:not(:has(button, input[type="submit"])) {
    display: none !important;
}

/* ---------- 5. Krok 3: „Wstecz" i „Zamów czyszczenie" obok siebie, równa wysokość ---------- */
html body #us-cf7-czyszczenie .cf7mls-btns-last-step {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    margin: 16px 0;
}
html body #us-cf7-czyszczenie .cf7mls-btns-last-step .cf7mls_back {
    order: 1;
    width: auto;
    min-width: 0;
    height: 50px;
    min-height: 50px;
    padding: 0 24px;
    line-height: 48px;
    float: none;
    margin: 0;
}
html body #us-cf7-czyszczenie .cf7mls-btns-last-step input[type="submit"] {
    order: 2;
    width: auto;
    height: 50px;
    min-height: 50px;
    padding: 0 24px;
    margin: 0;
}
html body #us-cf7-czyszczenie .cf7mls-btns-last-step .wpcf7-spinner,
html body #us-cf7-czyszczenie .cf7mls-btns-last-step .wpcf7-form-control-wrap {
    display: none !important;
}

/* ---------- 6. Cennik: kafel COMFORT (etykieta „Pakiet podstawowy") ---------- */
.section_pricing21 .pricing21_top-row-content.is-disabled .pricing21_top-row-wrapper > div:last-child {
    color: #8d8d96;
}
.section_pricing21 a.is-pricing21-button[aria-pressed="true"]::before {
    content: "✓";
    margin-right: 6px;
    font: inherit;
    font-weight: inherit;
    color: inherit;
}
.section_pricing21 a.is-pricing21-button[aria-pressed="true"] {
    background-color: #6169D6 !important;
    border-color: #6169D6 !important;
    color: #fff !important;
}
.section_pricing21 a.is-pricing21-button[aria-pressed="false"] {
    background-color: transparent;
    color: #1c1c1c;
}
.section_pricing21 .pricing21_top-row-content.is-disabled {
    opacity: .55;
    filter: grayscale(1);
}
.section_pricing21 .pricing21_top-row-content.is-disabled .is-pricing21-button {
    pointer-events: none;
    cursor: default;
    background-color: #ededed !important;
    border-color: #d1d1d1 !important;
    color: #5a5a5a !important;
    opacity: 1;
}

/* ---------- 7. Podsumowanie: tylko oczyszczona wartość (bez „—") ---------- */
html body #us-cf7-czyszczenie .us-cl-summary dd[data-joined="1"] > :not(.us-sum__val) {
    display: none !important;
}
html body #us-cf7-czyszczenie .us-cl-summary dd .us-sum__val {
    display: block;
}

/* ---------- 8. 390 px: kafle cennika w pionie, przycisk jedną linią ---------- */
@media screen and (max-width: 479px) {
    .section_pricing21 .pricing21_top-row {
        grid-template-columns: 1fr !important;
        row-gap: 12px;
    }
    .section_pricing21 .pricing21_top-row .pricing21_empty-space {
        display: none !important;
    }
    .section_pricing21 .pricing21_top-row-content {
        width: 100%;
    }
    .section_pricing21 .pricing21_row,
    .section_pricing21 .pricing21_heading-row {
        grid-template-columns: minmax(0, 1.6fr) repeat(3, 34px) !important;
        column-gap: 4px;
    }
    .section_pricing21 .pricing21_feature {
        font-size: 13px;
        line-height: 1.3;
    }
    .section_pricing21 .pricing21_row-content img,
    .section_pricing21 .pricing21_row-content .pricing21_icon-wrapper {
        width: 16px;
        height: 16px;
    }
    .section_pricing21 a.is-pricing21-button {
        white-space: nowrap;
        font-size: 15px;
    }
    html body #us-cf7-czyszczenie .cf7mls-btns-last-step .cf7mls_back,
    html body #us-cf7-czyszczenie .cf7mls-btns-last-step input[type="submit"] {
        width: 100%;
    }
}

/* ---------- 9. Scalone pola na pełną szerokość siatki (bez ucinania wartości) ---------- */
html body #us-cf7-czyszczenie .us-cl-field.us-cl-full {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
}
html body #us-cf7-czyszczenie .us-cl-field.us-cl-full .wpcf7-form-control-wrap,
html body #us-cf7-czyszczenie .us-cl-field.us-cl-full input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}