/*
 * PLUGINS OVERRIDES
 */

/* ============================================================
   Design-Tokens des Formular-Layers
   ============================================================ */
:root {
    --uni-form-inset: 12px;
    --uni-form-gap: var(--wp--preset--spacing--24);
    --uni-form-height: 48px;
    --uni-form-radius: 0;

    --uni-form-bg: var(--wp--preset--color--schnee-white);
    --uni-form-bg-disabled: var(--wp--preset--color--karbon-5);
    --uni-form-text: var(--wp--preset--color--karbon);
    --uni-form-placeholder: var(--wp--preset--color--karbon-40);
    --uni-form-hint: var(--wp--preset--color--karbon-40);

    --uni-form-border: var(--wp--preset--color--karbon-20);
    --uni-form-border-hover: var(--wp--preset--color--karbon-40);
    --uni-form-border-focus: var(--wp--preset--color--saphir-500);
    --uni-form-error: var(--wp--preset--color--feuer-500);
    /* Aktivfarbe von Checkbox/Radio (Fuellung bzw. Ring), wie im Warenkorb */
    --uni-form-accent: var(--wp--preset--color--saphir-500);

    /* Eigener Pfeil, weil beide Markups <select class="form-control"> ausgeben
       und damit NICHT Bootstrap-5-.form-select mit dessen Pfeil treffen. */
    --uni-form-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0.086 5.086 23.828 14.743'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m11.9998 14.1717 9.0858 -9.08576 2.8285 2.82842L11.9998 19.8286 0.0856358 7.91436 2.91406 5.08593l9.08574 9.08577Z' fill='%23222222'/%3E%3C/svg%3E");
}

.container-fluid {
    padding: 0  ;
}

@media (max-width: 1024px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
    }
}

.margin-top-header {
    margin-top: 200px;
}

.site-content {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--wp--preset--spacing--64);
}

.uni-inline-icon.bi {
    vertical-align: baseline;
}

/* ============================================================
   Formularwesen v2
   ============================================================ */

/* Ohne vertikalen Bootstrap-Gutter (.g-3 zieht die .row sonst 16px hoch) ist margin-top der sichtbare Abstand */
.uni-form-v2 > .row {
    --bs-gutter-y: 0;
}

/* Erste .row: kein Abstand nach oben (vor ihr steht der Honeypot-Div, daher kein :first-of-type) */
.uni-form-v2 > .row:not(.row ~ .row) {
    margin-top: calc(-1 * var(--uni-form-gap));
}

.uni-fv2-field,
.form-group[class*="col-"] {
    padding: 0;
    padding-inline: var(--uni-form-inset);
    margin-top: var(--uni-form-gap);
}

.form-spacer {
    margin-top: 40px;
}

.form-label,
.control-label-uni-form,
.control-label {
    display: block;
    margin-bottom: var(--wp--preset--spacing--8);
    color: var(--uni-form-text);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.uni-fv2-required {
    color: var(--uni-form-text);
    font-weight: 700;
}

.form-control,
.form-control-file {
    display: block;
    box-sizing: border-box;
    width: 100%;
    /* 48px inkl. Rand wie im Warenkorb: 24px Zeile + 2 * 11px + 2 * 1px */
    height: var(--uni-form-height);
    padding: 11px var(--wp--preset--spacing--12);
    border: 1px solid var(--uni-form-border);
    border-radius: var(--uni-form-radius);
    background-color: var(--uni-form-bg);
    color: var(--uni-form-text);
    font-family: var(--wp--preset--font-family--satoshi), sans-serif;
    /* 16px verhindert das Auto-Zoom von iOS-Safari beim Fokus */
    font-size: 16px;
    line-height: 150%;
    box-shadow: none;
    transition: border-color var(--uni-hover-transition, 220ms ease-in-out);
}

.form-control::placeholder {
    color: var(--uni-form-placeholder);
    opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-control-file:hover:not(:disabled) {
    border-color: var(--uni-form-border-hover);
}

.form-control:focus,
.form-control-file:focus {
    border-color: var(--uni-form-border);
    outline: 2px solid var(--uni-form-border-focus);
    outline-offset: -1px;
    background-color: var(--uni-form-bg);
    box-shadow: none;
}

.form-control:disabled,
.form-control[readonly],
.form-control-file:disabled {
    background-color: var(--uni-form-bg-disabled);
    color: var(--wp--preset--color--karbon-40);
    cursor: not-allowed;
}

textarea.form-control {
    height: auto;
    min-height: 180px;
    padding: var(--wp--preset--spacing--12);
    resize: vertical;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: var(--uni-form-select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--uni-form-inset) center;
    background-size: 12px 8px;
    cursor: pointer;
}

select.form-control[multiple] {
    height: auto;
    padding-right: var(--wp--preset--spacing--12);
    background-image: none;
}

.form-control-file,
input[type="file"].form-control {
    padding: 10px var(--wp--preset--spacing--12);
    cursor: pointer;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.form-control.is-invalid,
.form-control.has-error,
.form-control.invalid,
.uni-fv2-field-error .form-control {
    border-color: var(--uni-form-error);
    background-image: none;
}

.form-control.is-invalid:focus,
.form-control.has-error:focus,
.form-control.invalid:focus,
.uni-fv2-field-error .form-control:focus {
    border-color: var(--uni-form-error);
    outline-color: var(--uni-form-error);
}

select.form-control.is-invalid,
select.form-control.has-error,
select.form-control.invalid,
.uni-fv2-field-error select.form-control {
    background-image: var(--uni-form-select-arrow);
}

.uni-fv2-subtitle,
.form-text,
.uni-fv2-field small,
.form-group[class*="col-"] small {
    display: block;
    margin-top: 4px;
    color: var(--uni-form-hint);
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
}

.invalid-feedback,
.uni-fv2-field small.text-danger,
.form-group[class*="col-"] small.text-danger,
.text-danger {
    color: var(--uni-form-error);
    font-size: 12px;
    line-height: 150%;
}

.form-check,
.uni-fv2-field .form-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 0;
    margin: 0 0 8px;
}

.form-check .form-check-input,
.uni-fv2-field .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    float: none;
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 4px 8px 0 0;
    padding: 0;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    /* identisch zu .form-control */
    border: 1px solid var(--uni-form-border);
    background-color: var(--uni-form-bg);
    background-image: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--uni-hover-transition, 220ms ease-in-out), border-color var(--uni-hover-transition, 220ms ease-in-out);
}

.form-check input[type="checkbox"].form-check-input,
.uni-fv2-field input[type="checkbox"].form-check-input {
    width: 16px;
    height: 16px;
    border-radius: var(--uni-form-radius);
}

.form-check input[type="radio"].form-check-input,
.uni-fv2-field input[type="radio"].form-check-input {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.form-check .form-check-input:hover:not(:disabled),
.uni-fv2-field .form-check-input:hover:not(:disabled) {
    border-color: var(--uni-form-border-hover);
}

.form-check input[type="checkbox"].form-check-input::before,
.uni-fv2-field input[type="checkbox"].form-check-input::before {
    content: "\f633"; /* bi-check-lg, wie im Warenkorb */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: bootstrap-icons !important;
    font-size: 12px;
    line-height: 1;
    color: var(--uni-form-bg);
    transform: scale(0);
    transition: transform 120ms ease-in-out;
}

.form-check input[type="checkbox"].form-check-input:checked,
.uni-fv2-field input[type="checkbox"].form-check-input:checked {
    background-color: var(--uni-form-accent);
    border-color: var(--uni-form-accent);
    /* Bootstrap legt hier sein eigenes Haken-SVG als background-image ab. */
    background-image: none;
}

.form-check input[type="checkbox"].form-check-input:checked::before,
.uni-fv2-field input[type="checkbox"].form-check-input:checked::before {
    transform: scale(1);
}

.form-check input[type="checkbox"].form-check-input::after,
.form-check input[type="checkbox"].form-check-input:checked::after,
.uni-fv2-field input[type="checkbox"].form-check-input::after,
.uni-fv2-field input[type="checkbox"].form-check-input:checked::after {
    content: none;
}

.form-check input[type="radio"].form-check-input:checked,
.uni-fv2-field input[type="radio"].form-check-input:checked {
    border-color: var(--uni-form-border);
    background-color: var(--uni-form-bg);
    background-image: none;
    box-shadow: inset 0 0 0 4px var(--uni-form-accent);
}

/* Punkt aus form-v2.css des Plugins aus, der Ring kommt per box-shadow */
.form-check input[type="radio"].form-check-input:checked::before,
.uni-fv2-field input[type="radio"].form-check-input:checked::before {
    content: none;
}

/* Bootstrap-Fokusschatten aus; der Ring des aktiven Radios (spezifischer) bleibt */
.form-check .form-check-input:focus,
.uni-fv2-field .form-check-input:focus {
    box-shadow: none;
    border-color: var(--uni-form-border);
}

.form-check .form-check-input:focus-visible,
.uni-fv2-field .form-check-input:focus-visible {
    outline: 2px solid var(--uni-form-border-focus);
    outline-offset: 2px;
}

.form-check .form-check-input:disabled,
.uni-fv2-field .form-check-input:disabled {
    background-color: var(--uni-form-bg-disabled);
    opacity: 0.6;
    cursor: not-allowed;
}

.uni-fv2-field-error .form-check-input,
.uni-fv2-field-error .form-check-input:focus {
    border-color: var(--uni-form-error);
}

.uni-fv2-field-error .form-check-input:focus-visible {
    outline-color: var(--uni-form-error);
}

.form-check .form-check-label,
.uni-fv2-field .form-check-label,
.form-check-label {
    margin: 6px 0 0;
    padding: 0;
    color: var(--uni-form-text);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
    cursor: pointer;
}

.uni-fv2-group .uni-fv2-fieldset > legend.form-label {
    margin-bottom: 0;
}

.uni-fv2-group .uni-fv2-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
    margin-top: var(--wp--preset--spacing--16);
    margin-bottom: var(--wp--preset--spacing--16);
}

.uni-fv2-checkbox + .uni-fv2-checkbox {
    margin-top: var(--wp--preset--spacing--20);
}

.uni-fv2-checkbox .form-check {
    margin-bottom: 0;
}

/* Input (16px) mittig zur ersten Label-Zeile (12px * 150% = 18px) */
.uni-fv2-checkbox .form-check .form-check-input {
    margin-top: 1px;
}

.uni-fv2-checkbox .form-check .form-check-label {
    margin-top: 0;
}

.uni-fv2-group .form-check {
    align-items: center;
    margin: 0;
}

.uni-fv2-group .form-check .form-check-input,
.uni-fv2-group .form-check .form-check-label {
    margin-top: 0;
}

.uni-radiogroup {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
    margin-top: 12px;
}

.uni-radiogroup .form-check {
    align-items: center;
    margin: 0;
}

.uni-radiogroup .form-check .form-check-input {
    margin: 0 8px 0 0;
}

.uni-radiogroup .form-check .form-check-label {
    margin: 0;
    font-size: 16px;
    line-height: 150%;
}

.uni-radiogroup.is-invalid .form-check .form-check-input {
    border-color: var(--uni-form-error);
}

@media (prefers-reduced-motion: reduce) {
    .form-check .form-check-input,
    .form-check .form-check-input::before,
    .uni-fv2-field .form-check-input,
    .uni-fv2-field .form-check-input::before {
        transition: none;
    }
}

.uni-fv2-actions {
    margin-top: var(--wp--preset--spacing--48);
    text-align: left !important;
}

.uni-fv2-notice {
    background-color: var(--wp--preset--color--karbon-5);
    border: 1px solid var(--wp--preset--color--karbon-10);
    color: var(--uni-form-text);
    padding: var(--wp--preset--spacing--16);
    margin-top: var(--uni-form-gap);
    margin-bottom: 0;
    margin-inline: var(--uni-form-inset);
    width: calc(100% - 2 * var(--uni-form-inset));
    text-wrap: pretty;
}

.uni-fv2-notice__title {
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 4px;
}

.uni-fv2-notice__title::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: -3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0s6.2348 1.26428 8.4853 3.51472C22.7357 5.76516 24 8.8174 24 12s-1.2643 6.2348 -3.5147 8.4853C18.2348 22.7357 15.1826 24 12 24c-3.1826 0 -6.23484 -1.2643 -8.48528 -3.5147C1.26428 18.2348 0 15.1826 0 12c0 -3.1826 1.26428 -6.23484 3.51472 -8.48528ZM13.5 5v3h-3V5h3ZM8 12.5h2.5V15H8v3h8v-3h-2.5V9.5H8v3Z' fill='%233356B0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.uni-fv2-notice__content {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* Font Awesome lädt das Theme nicht, daher als Bootstrap-.spinner-border. */
.fas.fa-spinner.fa-spin,
.fas.fa-circle-notch.fa-spin {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: 0.75s linear infinite spinner-border;
}

.uni_warenkorb_buy_form > button[type="submit"],
.rtba-wk-checkout__submit {
    justify-content: center;
}