/**
 * Powermail Advanced Form Styles
 * 
 * Usage: Add one of the following classes to the Powermail form:
 * - Positioning: .form-label-top (Standard), .form-label-left, .form-label-floating, .form-label-inline
 * - Style: .form-style-bordered (Standard), .form-style-underline, .form-style-filled, .form-style-outlined, .form-style-flat
 */

/* ====================================================================
   Powermail-Formulare Header
   ==================================================================== */
.element-powermail_pi1 > header {display: none;}

/* ====================================================================
   Basics
   ==================================================================== */

.tx-powermail > .container-fluid {
  padding: 0;
}
.powermail_field {
    margin-bottom: calc(var(--bs-gutter-y) * 1);
}
.powermail_description {
  font-size: var(--bs-font-size-small);
  color: var(--bs-muted);    
}
.mandatory {
  opacity: .25;
}
.powermail_group_checkwrap,
.powermail_group_radiowrap {
    column-count: 1;
    column-gap: var(--bs-gutter-x);
}
.powermail_fieldwrap_reset .powermail_field {
    border: none !important;
    display: inline-block;
}

/* ====================================================================
   Layouts
   ==================================================================== */



/* ====================================================================
 Layout 1: Felder nebeneinander (50% Breite)
==================================================================== */

.powermail_fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--bs-gutter-y) ;
}

.powermail_fieldwrap {
    width: 100%; /* Default: Volle Breite */
}

/* Layout 1: Nur 50% Breite → 2 nebeneinander */
.powermail_fieldwrap.layout1 {
    width: calc(50% - calc(var(--bs-gutter-x) * .5));
}

/* Auf Mobile: Alle 100% */
@media (max-width: 767px) {
    .powermail_fieldwrap.layout1 {
        width: 100%;
    }
}


.powermail_fieldwrap_type_check.layout2 .powermail_group_checkwrap,
.powermail_fieldwrap_type_radio.layout3 .powermail_group_radiowrap {
    column-count: 2;
}
.powermail_fieldwrap_type_check.layout3 .powermail_group_checkwrap,
.powermail_fieldwrap_type_radio.layout3 .powermail_group_radiowrap {
    column-count: 3;
}


/* ====================================================================
   Powermail Error
   ==================================================================== */
/* 
.powermail_field_error,
.powermail_field_error input[type=radio],
.powermail_field_error input[type=checkbox],
:user-invalid,
:user-invalid input[type=radio],
:user-invalid input[type=checkbox] {
  background-color: var(--pm-input-invalid-background-color);
  border-color: var(--pm-input-invalid-border-color);
  color: var(--pm-input-invalid-color);
}
*/
.powermail_field_error {
    border-color: var(--bs-danger-base);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='red' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3e%3cpath d='M12 9v4'/%3e%3cpath d='M12 17h.01'/%3e%3c/svg%3e");  background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}
.powermail_field_error:focus-visible,
:user-invalid:focus-visible {
  border-color: var(--bs-danger-base);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-danger-base), transparent 80%);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='red' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3e%3cpath d='M12 9v4'/%3e%3cpath d='M12 17h.01'/%3e%3c/svg%3e");  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.powermail-errors-list {
  color: var(--bs-danger-base);
  list-style-type: "";
  padding: 0;
  margin-bottom: 0 !important;
  font-size: var(--bs-font-size-small);
}

.powermail-errors-list:not(.filled) {
  display: none;
}



/* ====================================================================
 Top labels for all Powermail fields
==================================================================== */
.form-label-top .powermail_field { 
    padding-top: calc(var(--bs-gutter-y) * 0);
    margin-bottom: calc(var(--bs-gutter-y) * .5);
    border-top: 0px solid var(--bs-border-hr); 
}

/* ====================================================================
 Left labels for all Powermail fields
==================================================================== */

/* Basislayout: unter md (Label oben, Feld darunter) */
.form-label-left .powermail_field {
    padding-top: calc(var(--bs-gutter-y) * .5);
    margin-bottom: calc(var(--bs-gutter-y) * .5);
    border-top: 1px solid var(--bs-border-hr);
}


/* Ab md: Label links (1/3), Feld rechts (2/3) */
@container (min-width: 768px) {
    .form-label-left .powermail_field {
        align-items: top;

    }

    .form-label-left .powermail_label {
        width: 33.3333%;
        margin-bottom: 0;
        margin-right: calc(var(--bs-gutter-x) * .5);
        text-align: left;
        float: left;
        padding-top: 0.375rem;
    }

    .form-label-left .powermail_input,
    .form-label-left .powermail_field .form-control{
        width: calc(66.6667% - calc(var(--bs-gutter-x) * .5));
    }
    .form-label-left .powermail_description,
    .form-label-left .powermail-errors-list,
    .form-label-left .powermail_fieldwrap_type_text .powermail_field,
    .form-label-left .powermail_fieldwrap_type_html .powermail_field,
    .form-label-left .powermail_fieldwrap_type_submit .powermail_field,
    .form-label-left .powermail_fieldwrap_type_reset .powermail_field {
        padding-left: calc(33.3333% + calc(var(--bs-gutter-x) * .5));
    }

    .form-label-left .powermail_field .choices {
        width: calc(66.6667% - calc(var(--bs-gutter-x) * .5));
        margin-left: calc(33.3333% + calc(var(--bs-gutter-x) * .5))
    }


}


/* ====================================================================
 Floating labels for all Powermail fields
==================================================================== */

.form-label-floating .powermail_field {
    position: relative;
}

.form-label-floating .powermail_field > .powermail_label {
    position: absolute;
    top: .875rem;
    left: 0.5rem;
    z-index: 2;
    max-width: 100%;
    padding: 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.65;

    transform-origin: 0 0;
    transition: all 0.15s ease-in-out;
}

.form-label-floating .powermail_field > .form-control {
    padding: 1.5rem 0.75rem 0.25rem 0.75rem;
}

.form-label-floating .powermail_field > .form-control::placeholder {
    color: transparent;
}

.form-label-floating .powermail_field:has(> .form-control:focus) > .powermail_label,
.form-label-floating .powermail_field:has(> .form-control:not(:placeholder-shown)) > .powermail_label {
    top: 0.25rem;
    font-size: var(--bs-font-size-extra-small);
    opacity: 1;
    transform: translateY(0);
    font-weight: var(--bs-font-weight-bold);
    color: var(--bs-primary-base);
  }

.form-label-floating .powermail_field:has(> .form-control:disabled) > .powermail_label {
    opacity: 0.5;
}

/* ====================================================================
 Madlibs labels für Powermail - Inline-Layout
==================================================================== */

.form-label-madlibs .powermail_fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 calc(var(--bs-gutter-x) * .75);
}

.form-label-madlibs .powermail_fieldwrap {
    width: auto !important;
    flex: 0 0 auto;
}

.form-label-madlibs .powermail_field {
    display: inline-block;
    vertical-align: top;
}

/* Innerer Flex-Container nur für Label + Input */
.form-label-madlibs .powermail_field > :not(.powermail_description) {
    display: inline-flex;
    align-items: center;
}

.form-label-madlibs .powermail_label {
    margin-bottom: 0;
    white-space: nowrap;
    padding-right: calc(var(--bs-gutter-x) * .75);
}

.form-label-madlibs .form-control {
    width: 12.5rem;
    flex-shrink: 0;
}

/* Choices.js Dropdown */
.form-label-madlibs .choices {
    width: 12.5rem;
}

/* Description unter dem Feld */
.form-label-madlibs .powermail_description {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

.form-label-madlibs .powermail_fieldwrap_type_submit {
    width: 100% !important;
}

/* ====================================================================
Form Style Underline
==================================================================== */

.form-style-underline .form-control,
.form-style-underline .choices__inner {
    border-width: 0 0 2px 0;
    border-radius: 0;
    padding-left: 0;
}

.form-style-underline .powermail_field_error:focus-visible,
.form-style-underline :user-invalid:focus-visible,
.form-style-filled .powermail_field_error:focus-visible,
.form-style-filled :user-invalid:focus-visible {
  border-width: 0 0 1px 0;
  box-shadow: 0 .25rem 0 0 color-mix(in srgb, var(--bs-danger-base), transparent 80%);
}

.form-style-underline .form-control:focus,
.form-style-underline .form-control:focus-visible,
.form-style-underline .is-focused .choices__inner,
.form-style-underline .is-open .choices__inner,
.form-style-filled .form-control:focus,
.form-style-filled .form-control:focus-visible,
.form-style-filled .is-focused .choices__inner,
.form-style-filled .is-open .choices__inner   {
    box-shadow: 0 0.25rem 0 0  color-mix(in srgb, var(--bs-primary-base), transparent 75%);
}

.form-style-underline .powermail_field,
.form-style-filled .powermail_field {
    border-top: none !important;
}

.form-style-underline .choices[data-type*='select-one'] .choices__list--dropdown .choices__input
 {
    padding-left: 0;
}


/* ---------------------------------------------------------------------
   Filled (Hintergrund-basiert wie Google)
   --------------------------------------------------------------------- */


.form-style-filled  .form-control,
.form-style-filled .choices__inner {
    border-width: 0 0 1px 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: hsl(from var(--bs-overlay) h s l / 0.05);
}




/* ---------------------------------------------------------------------
   Flat (Minimalist without borders)
   --------------------------------------------------------------------- */

.form-style-flat .form-control,
.form-style-flat .choices__inner {
    border: none;
    background-color: hsl(from var(--bs-overlay) h s l / 0.05);
}