.wniosek__grid {
    --layout-bg-right: var(--Backgrounds-Bg-grey-25, #F5F6F6);
}

/* --- Naglowek (grid-area: form-header) ------------------------------------ */
.wniosek__header {
    display: flex;
    flex-direction: column;
    padding: var(--margin-lg) var(--margin-lg) 0 0;
    gap: var(--space-2xl);
}

.wniosek__title {
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-semibold);
    font-style: normal;
}

.wniosek__login-hint {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text-muted);
}

.wniosek__login-hint a {
    color: var(--color-link);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

/* --- Ukrycie wewnetrznego kalkulatora formularza CF7 ----------------------
   Wybor kwoty/okresu odbywa sie na stronie glownej; tutaj pokazujemy go tylko
   jako podglad w Kolumnie B. Pola pok-amount / pok-financingPeriod pozostaja
   w DOM (ukryte) - JS wypelnia ich wartosci, dzieki czemu wysylka do API
   dziala bez zmian.

   Ta regula musi zostac aktywna: na produkcji formularz CF7 (baza) ma pelny
   markup slidera/boksow. Lokalnie (dev/cf7-form-3397.local.html) ten markup
   jest zakomentowany, wiec regula po klasach jest tam no-op - dlatego druga
   regula ponizej chowa dodatkowo same pola po "name" (dziala w obu wariantach).
--------------------------------------------------------------------------- */
.wniosek .contract-amount,
.wniosek .contract-slider,
.wniosek .mini-form-btn,
.wniosek .period-boxes,
.wniosek .form-ctn > .form-title:first-child {
    display: none !important;
}

.wniosek input[name="pok-amount"],
.wniosek input[name="pok-financingPeriod"] {
    display: none !important;
}

.wniosek-form__section {
    padding: 0 var(--margin-sm);
}

/* Pierwszy wiersz: na mobilce kod pocztowy i miejscowość jedno pod drugim*/
.form-section-address .loan-form__row:nth-of-type(1) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
}

@media screen and (min-width: 720px) {
    .form-section-address .loan-form__row:nth-of-type(1) {
        grid-template-columns: 1fr 2fr;
        gap: var(--space-md);
    }
}

/* Drugi wiersz: ulica (100%) oraz numer budynku/lokalu (100%) */
.form-section-address .loan-form__row:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Ulica na pełną szerokość */
.form-section-address .loan-form__row:nth-of-type(2) .loan-form__cell:nth-child(1) {
    width: 100%;
}

/* Kontener dla numeru budynku i lokalu (50/50) */
.form-section-address .loan-form__row:nth-of-type(2) .loan-form__cell:nth-child(2) .layout-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    width: 100%;
}

/* Reset starych stylów flexa dla numerów */
.form-section-address .loan-form__row:nth-of-type(2) .layout-flex-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}


.wniosek-form__section:first-of-type {
    margin-top: 0;
}

.wniosek .form-ctn > .loan-form__button {
    margin-top: calc(0px - var(--space-2xl));
}

.wniosek .form-title,
.wniosek-form__section-title {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-sans);
    font-size: var(--fs-h4); /* H4/H4-Semibold: 22px / 29px */
    line-height: var(--lh-h4);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.wniosek-form__section-title > span.special-etique {
    display: block;
    font-size: var(--fs-sm);
    margin-left: 0;
}

.wniosek .form-title:after {
    display: none;
}

/* Karta "zrodlo dochodu" - tlo pod polami typu dochodu / stanowiska / kwoty */
.wniosek-income-card {
    display: flex;
    flex-direction: column;
    gap: max(0px, calc(var(--space-md) - var(--form-error-reserve)));
    padding: var(--card-padding);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
}

.wniosek-income-card.additionalIncomeForm.hidden {
    display: none !important;
}

/* "+ Kolejne zrodlo dochodu (opcjonalnie)" - checkbox wpcf7 wizualnie
   ukryty (zostaje funkcjonalny), caly wiersz ikona+tekst wyglada jak link
   (Figma: ikona 24x24, gap 8px, tekst Button Label/Medium, 100% szer., padding 12px).
   Zasieg tylko przez .wniosek-add-income - nie dotyka innych checkboxow wpcf7. */
.wniosek-add-income {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: var(--margin-sm);
    margin-bottom: var(--space-md);
    cursor: pointer;
    color: var(--kok-text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-base);
}

.wniosek-add-income.hidden {
    display: none;
}

.wniosek-add-income:has(input:focus-visible) {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    border-radius: var(--input-radius);
}

.wniosek-add-income .wpcf7-form-control-wrap,
.wniosek-add-income .wpcf7-acceptance,
.wniosek-add-income .wpcf7-list-item,
.wniosek-add-income .wpcf7-list-item-label,
.wniosek-add-income label:not(.error) {
    display: contents !important;
}

/* main.css rysuje wizualny checkbox (kwadrat + checkmark) pseudoelementami
   na kazdym <label> potomnym .wpcf7-acceptance - tutaj go nie chcemy. */
.wniosek-add-income label:before,
.wniosek-add-income label:after {
    content: none !important;
}

.wniosek-add-income input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wniosek-add-income svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* .loan-form__cell dzieli mechanike z .layout-flex-item (oba to "komorki"
   pola formularza) - wspolne wlasciwosci sa w assets/form-fields.css
   (.loan-form-styled .loan-form__cell), tu tylko odpowiednik dla wariantu
   uzywanego w kartach dochodu (Nr budynku/Nr lokalu itp.). */
.wniosek .layout-flex-item {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-2xs);
    margin: 0;
}

.wniosek .layout-flex-item.hidden {
    display: none;
}

.wniosek .layout-flex-item#form-employerName {
    flex: auto;
}

.wniosek-income-card > .layout-flex:not(:has(> :not(.hidden))) {
    display: none !important;
}

.btn-remove-income {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 8px;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
}

.btn-remove-income svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* .loan-form__label, .loan-form__field, .loan-form__icons, .loan-form__row -
   wspolny wyglad pol formularza (input/label/ikony walidacji) jest teraz w
   assets/form-fields.css (.loan-form-styled ...), wspoldzielony z /kontakt. */

.wniosek .layout-flex {
    column-gap: var(--space-md);
    row-gap: max(0px, calc(var(--space-md) - var(--form-error-reserve)));
}

/* --- Kolumna B: podglad --------------------------------------------------- */
.wniosek__col--summary {
    background-color: var(--layout-bg-right);
    padding: var(--margin-2xl) var(--margin-md);
    margin-left: calc(var(--inner-margin-x) * -1);
    margin-right: calc(var(--inner-margin-x) * -1);
}

.wniosek__summary {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.wniosek__summary-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: var(--margin-lg);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--color-text);
}

.wniosek__summary-lead {
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.wniosek__summary-detail {
    padding: 0 var(--margin-lg);
}

.wniosek__summary-value {
    font-weight: var(--fw-medium);
    color: var(--color-text);
    white-space: nowrap;
    text-align: right;

    font-size: var(--fs-sm);
    font-style: normal;
    line-height: var(--lh-sm);
}

.wniosek__summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wniosek__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacings-spacing-lg, 24px);
    padding: var(--margin-margin-xs, 8px);
    border-bottom: 1px solid var(--color-border);
    align-self: stretch;
}

.wniosek__summary-row--total {
    border-bottom: none;
    font-weight: var(--fw-semibold);
    font-size: 1.9rem;
}

.wniosek__summary-label {
    color: var(--color-text-muted);

    font-size: var(--fs-sm);
    font-style: normal;
    font-weight: var(--fw-regular);
    line-height: var(--lh-sm);
}

.wniosek__summary-disclaimer {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--color-text-muted);
    font-feature-settings: 'liga' off, 'clig' off;
    font-style: normal;
    font-weight: 400;
    display: flex;
    padding: 0 var(--margin-lg);
}

/* Przycisk "Podsumowanie pożyczki" - tylko mobile; szczegóły domyślnie zwinięte */
.wniosek__summary-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin: .5rem 0 0;
    padding: var(--margin-sm) 0;
    background: none;
    border: none;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    cursor: pointer;
}

.wniosek__summary-toggle:after {
    content: "";
    width: .6rem;
    height: .6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition);
}

.wniosek__summary-toggle[aria-expanded="true"]:after {
    transform: rotate(-135deg);
}

.wniosek__summary-detail {
    display: none;
}

.wniosek__summary-detail.is-open {
    display: block;
}

/* --- Desktop: grid 50/50 [ (naglowek / formularz)  |  podglad ] --------- */
@media screen and (min-width: 720px) {
    /* Naglowek dochodzi jako dodatkowy wiersz nad kolumna lewa - reszta
       siatki (kolumny, gutter, breakpoint) zostaje z .layout__grid. */
    .wniosek__grid {
        grid-template-areas:
            ". form-header right ."
            ". left         right .";
    }

    .wniosek__header {
        /* usuń: justify-self: end; */
        width: 100%;
        box-sizing: border-box;
        padding-right: var(--space-2xl);
        margin: 0 var(--inner-margin-x);
        grid-area: form-header;
        margin-bottom: 0;
        padding-top: var(--margin-5xl);
    }

    /* Pola sekcji: 2 kolumny (Figma), row-full jednokolumnowe -
       patrz .loan-form-styled .loan-form__row w assets/form-fields.css. */
    .wniosek__col--summary {
        padding: 153px 0 var(--margin-7xl) var(--space-2xl);
        margin-left: 0;
        margin-right: 0;
    }

    .wniosek__summary {
        position: sticky;
        top: calc(var(--header-height) + var(--space-lg));
    }

    /* na desktopie caly podglad jest widoczny, bez przycisku "Podsumowanie pożyczki" */
    .wniosek__summary-toggle {
        display: none;
    }

    .wniosek__summary-detail {
        display: block;
    }

    dialog#login-redirect-modal .app-modal-container .app-card .app-card-body button.loan-form__button {
        justify-self: center;
        width: unset;
    }
}

.visual-hide {
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Styl dla samego przycisku dodawania, żeby przejście było ładne */
#isAdditionalIncomeForm {
    transition: opacity 0.15s ease, height 0.15s ease;
}

.bottom-navs {
    border-top: none !important;
}

.wniosek .form-checkbox .terms-desc,
.wniosek .form-checkbox .terms-desc small {
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-caption);
}

/* Komunikat bledu zgod (#pok-terms-error) laduje pod trescia zgody
   (grid-column: 1/-1, order: 99 - patrz main.css). Dokladamy odstep pod
   trescia labelki, zeby error nie przyklejal sie do dlugiego tekstu. */
.wniosek .form-checkbox .terms-desc {
    margin-bottom: 1rem;
}

.wniosek .form-checkbox .terms-desc strong {
    color: var(--color-text-body);
    font-weight: var(--fw-medium);
}

body.high-contrast .wniosek .form-checkbox .terms-desc,
body.high-contrast .wniosek .form-checkbox .terms-desc small,
body.high-contrast .wniosek .form-checkbox .terms-desc strong {
    color: var(--kok-white);
}

dialog#login-redirect-modal .app-modal-container .app-card .app-card-title {
    position: unset;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0 30px 20px 30px;
    box-sizing: border-box;
}

dialog#login-redirect-modal .app-modal-container .app-card .app-card-body {
    text-align: center;
    font-weight: var(--fw-medium);
    line-height: var(--lh-base);
    font-size: var(--fs-base);
}

dialog#login-redirect-modal .app-modal-container .app-card .app-card-body small {
    font-weight: var(--fw-regular);
    line-height: var(--lh-sm);
    font-size: var(--fs-sm);
}

dialog#clock-modal .app-modal-container .app-card .app-card-title {
    position: unset;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0 30px 20px 30px;
    box-sizing: border-box;
}

@keyframes rotateClock {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

dialog#clock-modal .clock-content svg {
    display: none;
    animation: rotateClock 2s linear infinite;
}

dialog#clock-modal .clock-content svg#hourglass {
    display: block;
}

dialog#clock-modal .repr-card {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-sm);
    font-size: var(--fs-sm);
    border-bottom-left-radius: 0;
}

dialog#clock-modal .repr-card ol {
    list-style-type: decimal;
    margin-inline: var(--space-md);
}


/* --- DODATEK DLA WCAG / DOSTĘPNOŚCI --- */
/* Jeśli użytkownik włączył w systemie opcję "Ogranicz ruch",
   wyłączamy animację, aby nie powodować dyskomfortu. */
@media (prefers-reduced-motion: reduce) {
    dialog#clock-modal .clock-content svg {
        animation: none;
        opacity: 1;
    }
}