/* PrefaHome — formularz wyceny / kontakt
   Fonty: CELOWO nieustawione — dziedziczą z globalnych stylów motywu WP
   (nagłówki/tekst wyglądają tak samo jak reszta strony, niezależnie od tego,
   jaki krój wybierzecie w Site Editor).
   Kolory: wyłącznie z globalnej palety motywu (--global-palette1…9), żeby
   zmiana palety w Site Editor automatycznie odświeżała formularz — bez
   osobnych, twardo wpisanych hexów. */

.pwf-wrap {
    /* mapowanie na Waszą globalną paletę — zmień tu, jeśli numeracja slotów się zmieni */
    --pwf-accent: var(--global-palette1, #ae742e);
    --pwf-accent-deep: var(--global-palette2, #8a5a22);
    --pwf-ink: var(--global-palette6, #282828);
    --pwf-surface: var(--global-palette9, #ffffff);
    --pwf-surface-soft: var(--global-palette8, #f9f7f7);
    --pwf-bg-tint: var(--global-palette7, #f2f1ef);

    /* wartości pochodne — liczone WYŁĄCZNIE z powyższych zmiennych, żadnych nowych kolorów */
    --pwf-ink-soft: color-mix(in srgb, var(--pwf-ink) 62%, var(--pwf-surface));
    --pwf-ink-faint: color-mix(in srgb, var(--pwf-ink) 40%, var(--pwf-surface));
    --pwf-border: color-mix(in srgb, var(--pwf-ink) 16%, var(--pwf-surface));
    --pwf-border-strong: color-mix(in srgb, var(--pwf-ink) 55%, var(--pwf-surface));
    --pwf-red: #B3413A;
    --pwf-red-bg: rgba(179, 65, 58, 0.08);
    --pwf-green: #4C7A4F;
    --pwf-green-bg: rgba(76, 122, 79, 0.08);

    --pwf-radius: 0px;
    --pwf-radius-sm: 0px;

    /* brak deklaracji font-family: dziedziczy z motywu */
    color: var(--pwf-ink);
    width: 100%;
}

.pwf-wrap *, .pwf-wrap *::before, .pwf-wrap *::after { box-sizing: border-box; }

.pwf-form { display: flex; flex-direction: column; gap: 0; }

.pwf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .pwf-row { grid-template-columns: 1fr; } }

.pwf-field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.pwf-row .pwf-field { margin-bottom: 0; }
.pwf-row + .pwf-field,
.pwf-field + .pwf-row,
.pwf-row + .pwf-row { margin-top: 24px; }

.pwf-label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pwf-ink);
}

.pwf-opt { color: var(--pwf-ink-faint); font-weight: 400; font-size: .92em; }
.pwf-required { color: var(--pwf-red); }

.pwf-control {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--pwf-border);
    border-radius: var(--pwf-radius);
    background: var(--pwf-surface);
    color: var(--pwf-ink);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pwf-control::placeholder { color: var(--pwf-ink-faint); }
.pwf-control:focus { border-color: var(--pwf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pwf-accent) 18%, transparent); }
.pwf-control.is-invalid,
.pwf-control:invalid:focus { border-color: var(--pwf-red); box-shadow: none; }

.pwf-textarea { height: auto; min-height: 110px; padding: 13px 16px; resize: vertical; }

/* upload pliku — spójny z resztą pól, dashed tylko dla samego drop-inputu */
.pwf-file {
    height: auto;
    padding: 26px 16px;
    text-align: center;
    cursor: pointer;
    border-style: dashed;
    background: var(--pwf-bg-tint);
    color: var(--pwf-ink-soft);
}
.pwf-file-name { margin: 8px 0 0; font-size: 13px; color: var(--pwf-ink-soft); min-height: 1em; }

.pwf-field-hint { margin: 8px 0 0; font-size: 13px; color: var(--pwf-ink-faint); }

.pwf-consent--toggle {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--pwf-bg-tint);
    border-left: 3px solid var(--pwf-border-strong);
}
.pwf-consent--toggle .pwf-consent__text { font-weight: 600; }
.pwf-consent--toggle:has(input:checked) { border-left-color: var(--pwf-accent); }

.pwf-field--nested { margin: 0; padding: 16px 0 0; }

.pwf-field--checkbox { margin-top: 8px; }

/* płynne rozwijanie/zwijanie (upload pliku <-> pole linku) — bez skoku układu,
   ruch dodatkowo zwraca uwagę, że coś się zmieniło po zaznaczeniu checkboxa */
.pwf-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s ease;
}
.pwf-reveal.is-open { grid-template-rows: 1fr; }
.pwf-reveal__inner { overflow: hidden; min-height: 0; }

.pwf-consent {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 12px;
    cursor: pointer;
    color: var(--pwf-ink);
    font-size: 13.5px;
    line-height: 1.5;
}

.pwf-consent input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.pwf-consent__box {
    position: relative;
    width: 20px; height: 20px; margin-top: 1px;
    border: 1.5px solid var(--pwf-border-strong);
    border-radius: var(--pwf-radius-sm);
    background: var(--pwf-surface);
    transition: background .15s ease, border-color .15s ease;
    flex-shrink: 0;
}
.pwf-consent__box::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.8335 9L5.8335 12L13.1668 4' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .15s ease, transform .15s ease;
}
.pwf-consent input:checked + .pwf-consent__box { background: var(--pwf-accent); border-color: var(--pwf-accent); }
.pwf-consent input:checked + .pwf-consent__box::after { opacity: 1; transform: scale(1); }
.pwf-consent input:focus-visible + .pwf-consent__box { outline: 2px solid var(--pwf-accent); outline-offset: 2px; }
.pwf-consent__text a { color: inherit; text-decoration: underline; }

.pwf-status {
    display: none;
    margin-top: 16px;
    padding: 13px 16px;
    border: 1px solid var(--pwf-border);
    border-radius: var(--pwf-radius);
    background: var(--pwf-surface);
    font-size: 14px;
}
.pwf-status.is-ok { display: block; border-color: var(--pwf-green); background: var(--pwf-green-bg); color: #2E4A30; }
.pwf-status.is-err { display: block; border-color: var(--pwf-red); background: var(--pwf-red-bg); color: #7A2B26; }

.pwf-actions { margin-top: 26px; }

.pwf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 17px 24px;
    border: 0;
    border-radius: var(--pwf-radius);
    /* najpierw próbujemy realnych zmiennych przycisku z motywu (Kadence: Customizer → Buttons),
       dopiero jeśli ich nie ma — spadamy na naszą paletę */
    background: var(--global-palette-btn-bg, var(--pwf-accent));
    color: var(--global-palette-btn, var(--pwf-surface));
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}
.pwf-btn:hover { background: var(--pwf-accent-deep); }
.pwf-btn:active { transform: translateY(1px); }
.pwf-btn[disabled] { opacity: .6; cursor: not-allowed; }

.pwf-btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--global-palette-btn, var(--pwf-surface)) 35%, transparent);
    border-top-color: var(--global-palette-btn, var(--pwf-surface));
    border-radius: 50%;
    animation: pwf-spin .7s linear infinite;
    flex-shrink: 0;
}
.pwf-btn.is-loading .pwf-btn__spinner { display: inline-block; }

@keyframes pwf-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pwf-btn__spinner { animation-duration: 1.4s; }
}

/* podziękowanie po wysłaniu — podmienia formularz */
.pwf-thankyou { text-align: center; padding: 36px 10px; }
.pwf-thankyou[hidden] { display: none; }
.pwf-thankyou h3 { font-size: 22px; font-weight: 700; margin: 0 0 10px; color: var(--pwf-ink); }
.pwf-thankyou p { margin: 0 auto; max-width: 42ch; color: var(--pwf-ink-soft); font-size: 15px; line-height: 1.6; }

/* formularz osadzony na ciemnym tle — motyw odwrócony, klasa dodawana ręcznie w szablonie WP */
.pwf-wrap--dark { color: var(--pwf-surface); }
.pwf-wrap--dark .pwf-label { color: var(--pwf-surface); }
.pwf-wrap--dark .pwf-opt { color: color-mix(in srgb, var(--pwf-surface) 65%, transparent); }
.pwf-wrap--dark .pwf-control { background: color-mix(in srgb, var(--pwf-ink) 85%, black); border-color: color-mix(in srgb, var(--pwf-surface) 20%, transparent); color: var(--pwf-surface); }
.pwf-wrap--dark .pwf-control::placeholder { color: color-mix(in srgb, var(--pwf-surface) 45%, transparent); }
.pwf-wrap--dark .pwf-file { background: color-mix(in srgb, var(--pwf-ink) 70%, black); }
.pwf-wrap--dark .pwf-consent { color: color-mix(in srgb, var(--pwf-surface) 82%, transparent); }
.pwf-wrap--dark .pwf-consent__box { border-color: color-mix(in srgb, var(--pwf-surface) 40%, transparent); background: transparent; }
.pwf-wrap--dark .pwf-thankyou h3 { color: var(--pwf-surface); }

@media (prefers-reduced-motion: reduce) {
    .pwf-control, .pwf-btn, .pwf-consent__box, .pwf-consent__box::after, .pwf-reveal { transition: none; }
}