/* ── Powermail: Dark Theme Overrides ── */
:root {
    --clr-primary: #0081c3;
    --clr-primary-dark: #006fa8;
    --clr-white: #ffffff;
}

.tx-powermail {
    .row + .row {
        margin-block-start: 0 !important;
    }

    .powermail_fieldset .powermail_fieldwrap {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    .powermail_fieldwrap_type_input,
    .powermail_fieldwrap_type_textarea,
    .powermail_fieldwrap_type_select,
    .powermail_fieldwrap_type_date {
        margin-bottom: 0.75rem !important;

        & input,
        & textarea,
        & select {
            border-color: var(--clr-primary) !important;

            &:focus {
                border-color: var(--clr-white) !important;
            }
        }

        & label {
            color: rgb(255 255 255 / 0.55) !important;
            transition: font-size 0.2s ease, top 0.2s ease !important;
        }
    }

    .powermail_fieldwrap_type_input,
    .powermail_fieldwrap_type_textarea {
        &:focus-within label,
        &.filled label,
        &.focus label {
            font-size: 0.5em !important;
            top: 3px !important;
        }
    }

    .powermail_fieldwrap_type_submit {
        & input,
        & button {
            background-color: var(--clr-primary) !important;
            width: auto !important;
            display: inline-block !important;
            padding: 0.75rem 2.5rem !important;

            &:hover {
                background-color: var(--clr-primary-dark) !important;
            }
        }
    }
}

/* ── Checkbox & Radio: Dark Theme ── */
.tx-powermail {
    --pm-check-background-color: transparent;
    --pm-check-border-color: var(--clr-primary);
    --pm-check-color: var(--clr-primary);
    --pm-radio-background-color: transparent;
    --pm-radio-border-color: var(--clr-primary);
    --pm-radio-color: var(--clr-primary);

    .powermail_fieldwrap_type_check label,
    .powermail_fieldwrap_type_radio label {
        color: var(--clr-white) !important;
    }

    input[type="checkbox"] {
        border-color: var(--clr-primary) !important;
        border-width: 2px !important;
        border-radius: 3px !important;

        &::before {
            block-size: 0.75rem !important;
            inline-size: 0.75rem !important;
            box-shadow: inset 1em 1em var(--clr-white) !important;
        }

        &:checked {
            background-color: var(--clr-primary) !important;
        }
    }

    input[type="radio"] {
        border-color: var(--clr-primary) !important;
        border-width: 2px !important;

        &::before {
            box-shadow: inset 1em 1em var(--clr-white) !important;
        }

        &:checked {
            border-color: var(--clr-primary) !important;
        }
    }
}

/* ── Fix: Less-Altlasten überschreiben (font-size: 2rem + scale auf Checkbox) ── */
.tx-powermail .powermail_form input[type="checkbox"],
.tx-powermail input[type="checkbox"] {
    font-size: 1rem !important;
    transform: none !important;
    -webkit-transform: none !important;
    block-size: 1.25rem !important;
    inline-size: 1.25rem !important;
}

/* Falls checkboxindicator-SVG noch im DOM ist (altes Template): ausblenden */
.tx-powermail .checkboxindicator {
    display: none !important;
}

/* ── Fix: Checkbox inside label (label ist einziges Grid-Kind → crushed in 1.25rem column) ── */
.tx-powermail .powermail_checkwrap {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
}

.tx-powermail .powermail_checkwrap > label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    flex: 1 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    cursor: pointer;
}

.tx-powermail .powermail_checkwrap label input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin-top: 0.15rem !important;
    align-self: flex-start !important;
}