/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ WS Form - Kontakt / Anmeldung ~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Plain CSS (bez webpacka). Formularz ma klasę "wsf-achtsamkeit" (Form → Styling → Wrapper classes). */

.wsf-form.wsf-achtsamkeit {
    --ach-body: #407089;
    --ach-body-rgb: 64, 112, 137;
    --ach-primary: #959e16;
    --ach-error: #d64545;
    --ach-error-rgb: 214, 69, 69;

    --ach-field-fs: clamp(1.0625rem, calc(1.0625rem + (100vw - 36rem) * .00325), 1.25rem);
    --ach-field-px: clamp(1rem, calc(1rem + (100vw - 36rem) * .00866), 1.5rem);
    --ach-field-py: clamp(.8125rem, calc(.8125rem + (100vw - 36rem) * .00541), 1.125rem);
    --ach-field-border: rgba(var(--ach-body-rgb), .22);
    --ach-field-shadow: 0 .125rem .5rem rgba(var(--ach-body-rgb), .08);
    --ach-focus-ring: inset 0 0 0 1px var(--ach-body), 0 0 0 .25rem rgba(var(--ach-body-rgb), .14);
    --ach-arrow-w: clamp(3rem, calc(3rem + (100vw - 36rem) * .01299), 3.75rem);

    --ach-gap-y: clamp(.875rem, calc(.875rem + (100vw - 36rem) * .00649), 1.25rem);
    --ach-gap-x: clamp(1rem, calc(1rem + (100vw - 36rem) * .00866), 1.5rem);
    --ach-section-gap: clamp(1.75rem, calc(1.75rem + (100vw - 36rem) * .01299), 2.5rem);
    --ach-transition: .25s ease;

    /* Zmienne stylu WS Form – bez tego przy focusie pojawia się niebieska obwódka #205493 */
    --wsf-form-color-primary: var(--ach-body);
    --wsf-form-color-accent: var(--ach-body);
    --wsf-field-color: var(--ach-body);
    --wsf-field-color-focus: var(--ach-body);
    --wsf-field-color-placeholder: rgba(var(--ach-body-rgb), .7);
    --wsf-field-color-background: #fff;
    --wsf-field-color-background-focus: #fff;
    --wsf-field-color-background-invalid: #fff;
    --wsf-field-border-color: var(--ach-field-border);
    --wsf-field-border-color-hover: rgba(var(--ach-body-rgb), .5);
    --wsf-field-color-background-hover: #fff;
    --wsf-field-border-color-focus: var(--ach-body);
    --wsf-field-border-color-invalid: var(--ach-error);
    --wsf-field-box-shadow: var(--ach-field-shadow);
    --wsf-field-box-shadow-color-focus: rgba(var(--ach-body-rgb), .14);
    --wsf-field-box-shadow-width-focus: .25rem;

    margin-top: clamp(1.25rem, calc(1.25rem + (100vw - 36rem) * .00866), 1.75rem);
    font-family: inherit;
    color: var(--ach-body);
    position: relative;
}

/* ~~~~~~~~~~ Grid ~~~~~~~~~~ */

.wsf-form.wsf-achtsamkeit .wsf-sections {
    margin-left: 0;
    margin-right: 0;
}

.wsf-form.wsf-achtsamkeit fieldset.wsf-section {
    margin: 0;
    padding: 0;
    border: 0;
}

.wsf-form.wsf-achtsamkeit .wsf-fields {
    margin-left: calc(var(--ach-gap-x) / -2);
    margin-right: calc(var(--ach-gap-x) / -2);
    row-gap: 0;
}

.wsf-form.wsf-achtsamkeit .wsf-fields > .wsf-field-wrapper {
    padding-left: calc(var(--ach-gap-x) / 2);
    padding-right: calc(var(--ach-gap-x) / 2);
    margin: var(--ach-gap-y) 0 0;
}

.wsf-form.wsf-achtsamkeit .wsf-fields > .wsf-field-wrapper:first-child {
    margin-top: 0;
}

/* ~~~~~~~~~~ * Pflichtfelder ~~~~~~~~~~ */

.wsf-form.wsf-achtsamkeit .wsf-fields > .wsf-required-fields {
    margin-bottom: calc(var(--ach-gap-y) * -.35);
    font-size: .8125rem;
    line-height: 1.4;
    letter-spacing: .03em;
    color: rgba(var(--ach-body-rgb), .75);
}

/* ~~~~~~~~~~ Inputs / Textarea / Select ~~~~~~~~~~ */

.wsf-form.wsf-achtsamkeit input[type="text"].wsf-field,
.wsf-form.wsf-achtsamkeit input[type="email"].wsf-field,
.wsf-form.wsf-achtsamkeit input[type="tel"].wsf-field,
.wsf-form.wsf-achtsamkeit textarea.wsf-field,
.wsf-form.wsf-achtsamkeit select.wsf-field {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: var(--ach-field-py) var(--ach-field-px);
    font-family: inherit;
    font-size: var(--ach-field-fs);
    font-weight: 400;
    line-height: 1.4;
    color: var(--ach-body);
    background-color: #fff;
    border: 1px solid var(--ach-field-border);
    border-radius: .1875rem;
    box-shadow: var(--ach-field-shadow);
    outline: none;
    transition: border-color var(--ach-transition), box-shadow var(--ach-transition), background-color var(--ach-transition);
}

.wsf-form.wsf-achtsamkeit input[type].wsf-field::placeholder,
.wsf-form.wsf-achtsamkeit textarea.wsf-field::placeholder {
    color: rgba(var(--ach-body-rgb), .7);
    opacity: 1;
    line-height: normal;
}

.wsf-form.wsf-achtsamkeit input[type].wsf-field:hover,
.wsf-form.wsf-achtsamkeit textarea.wsf-field:hover,
.wsf-form.wsf-achtsamkeit select.wsf-field:hover {
    border-color: rgba(var(--ach-body-rgb), .5);
}

.wsf-form.wsf-achtsamkeit input[type].wsf-field:focus,
.wsf-form.wsf-achtsamkeit textarea.wsf-field:focus,
.wsf-form.wsf-achtsamkeit select.wsf-field:focus {
    color: var(--ach-body);
    border-color: var(--ach-body);
    box-shadow: var(--ach-focus-ring);
}

.wsf-form.wsf-achtsamkeit textarea.wsf-field {
    display: block;
    resize: vertical;
    min-height: clamp(9rem, calc(9rem + (100vw - 36rem) * .06926), 13rem);
}

/* Select – strzałka w kolorowym polu po prawej, tło rysowane na samym selekcie (zawsze pełna wysokość) */

.wsf-form.wsf-achtsamkeit select.wsf-field {
    padding-right: calc(var(--ach-arrow-w) + var(--ach-field-px));
    background-image:
        url("../images/icon__angle-down--white-color.svg"),
        linear-gradient(var(--ach-body), var(--ach-body)) !important;
    background-repeat: no-repeat, no-repeat;
    background-position: right calc(var(--ach-arrow-w) / 2 - .4375rem) center, right center;
    background-size: .875rem auto, var(--ach-arrow-w) 100%;
    cursor: pointer;
    text-overflow: ellipsis;
}

.wsf-form.wsf-achtsamkeit select.wsf-field:hover {
    background-image:
        url("../images/icon__angle-down--white-color.svg"),
        linear-gradient(#35607a, #35607a) !important;
}

.wsf-form.wsf-achtsamkeit select.wsf-field:has(option[data-placeholder]:checked) {
    color: rgba(var(--ach-body-rgb), .7);
}

.wsf-form.wsf-achtsamkeit select.wsf-field option {
    color: var(--ach-body);
}

.wsf-form.wsf-achtsamkeit .wsf-course select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow {
    display: none !important; /* własna strzałka WS Form – mamy swoją w tle selecta */
}

/* ~~~~~~~~~~ Checkbox (Einwilligung) ~~~~~~~~~~ */

.wsf-form.wsf-achtsamkeit .wsf-fields > .wsf-acceptance {
    margin-top: var(--ach-section-gap);
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance [data-row-checkbox] {
    position: relative;
    padding: 0;
    margin: 0;
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: .375rem; /* górna krawędź = początek tekstu */
    z-index: 1;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance input[type="checkbox"] + label.wsf-label {
    display: block;
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 2.625rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .02em;
    color: var(--ach-body);
    cursor: pointer;
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance label.wsf-label::before,
.wsf-form.wsf-achtsamkeit .wsf-acceptance label.wsf-label::after {
    content: "";
    position: absolute;
    left: 0;
    top: .375rem; /* górna krawędź = początek tekstu */
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    border-radius: .1875rem;
    transform: none;
    mask: none;
    -webkit-mask: none;
    transition: background-color var(--ach-transition), border-color var(--ach-transition), box-shadow var(--ach-transition), opacity var(--ach-transition);
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance label.wsf-label::before {
    background: #fff;
    border: 1px solid rgba(var(--ach-body-rgb), .5);
    box-shadow: var(--ach-field-shadow);
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance label.wsf-label::after {
    border: 0;
    background: url("../images/icon__tick-bold--body-color.svg") no-repeat center / 55%;
    filter: brightness(0) invert(1);
    box-shadow: none;
    opacity: 0;
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance input[type="checkbox"]:hover + label.wsf-label::before {
    border-color: var(--ach-body);
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance input[type="checkbox"]:focus-visible + label.wsf-label::before {
    border-color: var(--ach-body);
    box-shadow: var(--ach-focus-ring);
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance input[type="checkbox"]:checked + label.wsf-label::before {
    background-color: var(--ach-body);
    border-color: var(--ach-body);
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance input[type="checkbox"]:checked + label.wsf-label::after {
    opacity: 1;
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance label.wsf-label a {
    color: var(--ach-body);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--ach-body-rgb), .4);
    transition: border-color var(--ach-transition), color var(--ach-transition);
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance label.wsf-label a:hover,
.wsf-form.wsf-achtsamkeit .wsf-acceptance label.wsf-label a:focus {
    color: var(--ach-primary);
    border-color: var(--ach-primary);
}

/* ~~~~~~~~~~ Submit ~~~~~~~~~~ */

.wsf-form.wsf-achtsamkeit .wsf-fields > .wsf-submit-wrapper {
    margin-top: var(--ach-section-gap);
}

.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: clamp(10rem, calc(10rem + (100vw - 36rem) * .02165), 11.25rem);
    height: auto;
    margin: 0;
    padding:
        clamp(.625rem, calc(.625rem + (100vw - 36rem) * .00216), .75rem)
        clamp(2.5rem, calc(2.5rem + (100vw - 36rem) * .00866), 3rem)
        clamp(.6875rem, calc(.6875rem + (100vw - 36rem) * .00216), .8125rem)
        clamp(1.75rem, calc(1.75rem + (100vw - 36rem) * .00866), 2.25rem);
    font-family: inherit;
    font-size: clamp(1rem, calc(1rem + (100vw - 36rem) * .00216), 1.125rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    background-color: transparent;
    border: 1px solid var(--ach-primary);
    border-radius: 999rem;
    box-shadow: 0 .25rem .75rem rgba(149, 158, 22, .25);
    cursor: pointer;
    transition: color .4s ease, box-shadow .4s ease, opacity .3s ease;
}

.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button::before,
.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button::after {
    content: "";
    position: absolute;
}

.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button::before {
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: var(--ach-primary);
    transition: width .4s cubic-bezier(.42, 0, .58, 1);
}

.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button::after {
    top: calc(50% - .375rem);
    right: clamp(1.125rem, calc(1.125rem + (100vw - 36rem) * .00216), 1.25rem);
    width: .5rem;
    height: .75rem;
    background: url("../images/icon__angle-right--white-color.svg") no-repeat center / contain;
    transition: transform .3s ease;
}

.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button:hover,
.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button:focus-visible {
    color: var(--ach-primary);
    background-color: transparent;
    border-color: var(--ach-primary);
    box-shadow: none;
    outline: none;
}

.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(149, 158, 22, .2);
}

.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button:hover::before,
.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button:focus-visible::before {
    width: 0;
}

.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button:hover::after,
.wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button:focus-visible::after {
    background-image: url("../images/icon__angle-right--primary-color.svg");
    transform: translateX(.1875rem);
}

/* Cloudflare Turnstile – kontener dokładnie na wysokość widżetu (bez odstępu linii pod iframe) */

.wsf-form.wsf-achtsamkeit .wsf-field-wrapper[data-type="turnstile"] .wsf-field {
    line-height: 0;
}

.wsf-form.wsf-achtsamkeit .wsf-field-wrapper[data-type="turnstile"] iframe {
    display: block;
}

/* Przycisk nieaktywny, dopóki zgoda nie jest zaznaczona */

.wsf-form.wsf-achtsamkeit:has(.wsf-acceptance input[type="checkbox"]:not(:checked)) .wsf-submit-wrapper {
    cursor: not-allowed;
}

.wsf-form.wsf-achtsamkeit:has(.wsf-acceptance input[type="checkbox"]:not(:checked)) .wsf-submit-wrapper button.wsf-button {
    opacity: .45;
    box-shadow: none;
    pointer-events: none;
}

@media (min-width: 768px) {
    .wsf-form.wsf-achtsamkeit .wsf-fields > .wsf-submit-wrapper {
        text-align: right;
    }

    /* Cloudflare Turnstile i przycisk w jednej linii (--wsf-c = liczba kolumn siatki WS Form) */
    .wsf-form.wsf-achtsamkeit .wsf-fields > .wsf-field-wrapper[data-type="turnstile"] {
        --wsf-c: 6;
        margin-top: var(--ach-section-gap);
    }

    .wsf-form.wsf-achtsamkeit .wsf-fields > .wsf-field-wrapper[data-type="turnstile"] ~ .wsf-submit-wrapper {
        --wsf-c: 6;
        margin-top: var(--ach-section-gap);
        align-self: center !important; /* WS Form dodaje .wsf-bottom (wyrównanie do dołu) */
    }

    .wsf-form.wsf-achtsamkeit .wsf-submit-wrapper button.wsf-button {
        width: auto;
    }
}

/* ~~~~~~~~~~ Walidacja ~~~~~~~~~~ */

.wsf-form.wsf-achtsamkeit .wsf-invalid-feedback {
    margin-top: .375rem;
    font-size: .8125rem;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--ach-error);
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance [data-row-checkbox] > .wsf-invalid-feedback {
    display: none;
}

.wsf-form.wsf-achtsamkeit .wsf-acceptance > .wsf-invalid-feedback {
    padding-left: 2.625rem;
}

.wsf-form.wsf-achtsamkeit.wsf-validated .wsf-field:invalid,
.wsf-form.wsf-achtsamkeit .wsf-field.wsf-invalid {
    border-color: var(--ach-error);
}

.wsf-form.wsf-achtsamkeit.wsf-validated .wsf-field:invalid:focus,
.wsf-form.wsf-achtsamkeit .wsf-field.wsf-invalid:focus {
    box-shadow: inset 0 0 0 1px var(--ach-error), 0 0 0 .25rem rgba(var(--ach-error-rgb), .12);
}

.wsf-form.wsf-achtsamkeit.wsf-validated input[type].wsf-field:invalid::placeholder,
.wsf-form.wsf-achtsamkeit.wsf-validated textarea.wsf-field:invalid::placeholder,
.wsf-form.wsf-achtsamkeit input[type].wsf-field.wsf-invalid::placeholder {
    color: rgba(var(--ach-error-rgb), .8);
}

.wsf-form.wsf-achtsamkeit.wsf-validated .wsf-acceptance input[type="checkbox"]:invalid + label.wsf-label::before {
    border-color: var(--ach-error);
}

/* ~~~~~~~~~~ Komunikaty WS Form (np. błąd wysyłki) ~~~~~~~~~~ */

.wsf-form.wsf-achtsamkeit .wsf-alert {
    margin-bottom: var(--ach-gap-y);
    padding: .875rem 1.25rem;
    font-size: .9375rem;
    border-radius: .1875rem;
    border-left: .25rem solid var(--ach-body);
    background: rgba(var(--ach-body-rgb), .06);
    color: var(--ach-body);
}

.wsf-form.wsf-achtsamkeit .wsf-alert.wsf-alert-danger {
    border-left-color: var(--ach-error);
    background: rgba(var(--ach-error-rgb), .06);
}