/* Stadtwaldhaus: Formular-Popups im Footer (theModule1-6).
   Liegt im Child-Theme, geladen per functions.php (wp_enqueue_scripts).
   Ausgelagert aus dem Divi-Footer-Code-Modul, weil Divi-Speichern an Stratos POST-Limit 128 KB scheitert. */
.theModule {
    display: none;
    width: 80%;
    height: 80vh;
    margin: auto;
    position: fixed;
    z-index: 99999;
    transition: opacity 1s;
    overflow-y: scroll !important;
    border-radius: 25px;
}

.theModule-active {
    display: block !important;
    transition: opacity 1s;
}

.theModule2 {
    display: none;
    width: 80%;
    height: 80vh;
    margin: auto;
    position: fixed;
    z-index: 99999;
    transition: opacity 1s;
    overflow-y: scroll !important;
    border-radius: 25px;
}

.theModule2-active {
    display: block !important;
    transition: opacity 1s;
}

.theModule3 {
    display: none;
    width: 80%;
    height: 80vh;
    margin: auto;
    position: fixed;
    z-index: 99999;
    transition: opacity 1s;
    overflow-y: scroll !important;
    border-radius: 25px;
}

.theModule3-active {
    display: block !important;
    transition: opacity 1s;
}

.theModule4 {
    display: none;
    width: 80%;
    height: 80vh;
    margin: auto;
    position: fixed;
    z-index: 99999;
    transition: opacity 1s;
    overflow-y: scroll !important;
    border-radius: 25px;
}

.theModule4-active {
    display: block !important;
    transition: opacity 1s;
}
.theModule5 {
    display: none;
    width: 80%;
    height: 80vh;
    margin: auto;
    position: fixed;
    z-index: 99999;
    transition: opacity 1s;
    overflow-y: scroll !important;
    border-radius: 25px;
}

.theModule5-active {
    display: block !important;
    transition: opacity 1s;
}
.theModule6 {
    display: none;
    width: 80%;
    height: 80vh;
    margin: auto;
    position: fixed;
    z-index: 99999;
    transition: opacity 1s;
    overflow-y: scroll !important;
    border-radius: 25px;
}

.theModule6-active {
    display: block !important;
    transition: opacity 1s;
}

.formOsterbrunch,
input[type=text],
input[type=number],
input[type=email] {
    background-color: #f5f5f5 !important;
    border: 0px solid #bbb !important;
    padding: 11px !important;
    color: #006a3b !important;
    margin-bottom: 5px;
}

.erw {
    width: 100%;
    float: left;
    padding: 0 0 5px 0;
    font-size: 16px;
    display: flex;
}

.erw span {
    font-size: 13px;
}

.bis6 {
    width: 50%;
    float: left;
    padding: 0 0 25px 0;
    font-size: 16px;
    display: flex;
}

.bis6 span {
    font-size: 13px;
}

.ab7 {
    width: 50%;
    float: right;
    padding: 0 0 10px 0;
    font-size: 16px;
    display: flex;
}

.ab7 span {
    font-size: 13px;
}

#day {
    background-color: #f2f2f2;
    border: 0px solid #bbb;
    padding: 10px;
    color: #4e4e4e;
    width: 49%;
}
#place {
    background-color: #f2f2f2;
    border: 0px solid #bbb;
    padding: 10px;
    color: #4e4e4e;
    width: 49%;
}
#place2 {
    background-color: #f2f2f2;
    border: 0px solid #bbb;
    padding: 10px;
    color: #4e4e4e;
    width: 49%;
}

#myButton {
    font-size: 18px;
    background-color: #006a3b;
    left: 50%;
    transform: translateX(-50%);
}

#myButton2 {
    font-size: 18px;
    background-color: #006a3b;
    left: 50%;
    transform: translateX(-50%);
}

#myButton3 {
    font-size: 18px;
    background-color: #006a3b;
    left: 50%;
    transform: translateX(-50%);
}
#myButton4 {
    font-size: 18px;
    background-color: #006a3b;
    left: 50%;
    transform: translateX(-50%);
}
#myButton5 {
    font-size: 18px;
    background-color: #006a3b;
    left: 50%;
    transform: translateX(-50%);
}
#myButton6 {
    font-size: 18px;
    background-color: #006a3b;
    left: 50%;
    transform: translateX(-50%);
}

#myField1,
#myField1b,
#myField1c,
#myField1d,
#myField1e,
#myField1f,
#myField2,
#myField2c,
#myField2d,
#myField2e,
#myField2f,
#myField3,
#myField3c,
#myField3d,
#myField3e,
#myField3f {
    text-align: center;
    width: 60px;
    margin: 0 15px 10px 0;
}

#myField4,
#myField4b,
#myField4c,
#myField4d,
#myField4e,
#myField4f,
#myField6,
#myField6b,
#myField6c,
#myField6d,
#myField6e,
#myField6f,
#myField8,
#myField8b,
#myField8c,
#myField8d,
#myField8e,
#myField8f {
    width: 98% !important;
}

#myField5,
#myField5b,
#myField5c,
#myField5d,
#myField5e,
#myField5f,
#myField7,
#myField7b,
#myField7c,
#myField7d,
#myField7e,
#myField7f,
#myField9,
#myField9b,
#myField9c,
#myField9d,
#myField9e,
#myField9f {
    width: 100%;
}

#myField10 {
    background-color: #f5f5f5 !important;
    border: 0px solid #bbb !important;
    padding: 11px !important;
    color: #006a3b !important;
    width: 100%;
    height: 85px;
}

#myField10b {
    background-color: #f5f5f5 !important;
    border: 0px solid #bbb !important;
    padding: 11px !important;
    color: #006a3b !important;
    width: 100%;
    height: 85px;
}

#myField10c {
    background-color: #f5f5f5 !important;
    border: 0px solid #bbb !important;
    padding: 11px !important;
    color: #006a3b !important;
    width: 100%;
    height: 85px;
}
#myField10d {
    background-color: #f5f5f5 !important;
    border: 0px solid #bbb !important;
    padding: 11px !important;
    color: #006a3b !important;
    width: 100%;
    height: 85px;
}
#myField10e {
    background-color: #f5f5f5 !important;
    border: 0px solid #bbb !important;
    padding: 11px !important;
    color: #006a3b !important;
    width: 100%;
    height: 85px;
}
#myField10f {
    background-color: #f5f5f5 !important;
    border: 0px solid #bbb !important;
    padding: 11px !important;
    color: #006a3b !important;
    width: 100%;
    height: 85px;
}

.wpcf7 form .wpcf7-response-output {
    margin: -5em 0.5em 1em !important;
    border: 0px solid #00a0d2 !important;
    padding: 0.2em 1em !important;
    text-align: center;
    font-weight: bold;
    position: absolute;
    width: 100%;
    left: 50%;
    color: #FF0000;
    transform: translate(-50%);
}

.swh-popup-x {
    position: sticky;
    top: 10px;
    z-index: 5;
    display: block;
    margin: 10px 10px -54px auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #006935;
    color: #ffffff;
    font-size: 28px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
}
.swh-popup-x:hover,
.swh-popup-x:focus {
    background: #3a3a3a;
}

@media only screen and (max-width: 1170px) {
    .bis6 {
        width: 100%;
        float: left;
        padding: 0 0 5px 0;
    }

    .ab7 {
        width: 100%;
        float: right;
        padding: 0 0 5px 0;
    }
}
  
  @media only screen and (max-width: 767px) {
    .et_pb_section_1_tb_footer,
    .et_pb_section_2_tb_footer,
    .et_pb_section_3_tb_footer,
    .et_pb_section_4_tb_footer,
    .et_pb_section_5_tb_footer,
    .et_pb_section_6_tb_footer {
        width: 94vw !important;
        min-height: 0 !important;
        top: calc(var(--swh-header-h, 90px) + 8px) !important;
        bottom: 12px !important;
        height: auto !important;
        transform: translateX(-50%) !important;
        border-radius: 15px;
    }

    /* Weniger Luft bis zur Ueberschrift (Divi-Standard: 50px Sektion + 30px Zeile) */
    .theModule.et_pb_section,
    .theModule2.et_pb_section,
    .theModule3.et_pb_section,
    .theModule4.et_pb_section,
    .theModule5.et_pb_section,
    .theModule6.et_pb_section {
        padding-top: 10px !important;
    }
    .theModule > .et_pb_row:first-of-type,
    .theModule2 > .et_pb_row:first-of-type,
    .theModule3 > .et_pb_row:first-of-type,
    .theModule4 > .et_pb_row:first-of-type,
    .theModule5 > .et_pb_row:first-of-type,
    .theModule6 > .et_pb_row:first-of-type {
        padding-top: 10px !important;
    }

    /* Halbe Spalten (Vorname/Nachname usw.) untereinander, sonst verrutschen sie bei Fehlertexten */
    .et-l--footer .wpcf7-form div[style*="width:50%"] {
        float: none !important;
        width: 100% !important;
    }

    /* Fehlermeldung normal unter den Button statt darueber */
    .wpcf7 form .wpcf7-response-output {
        position: static !important;
        margin: 1em 0 0 !important;
        width: auto !important;
        left: auto !important;
        transform: none !important;
    }
}

/* Produktzeilen auf dem Handy: Anzahl als schmale 2. Spalte neben Name/Preis statt darunter */
@media only screen and (max-width: 768px) {
    .et-l--footer .product-item {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .et-l--footer .product-info {
        flex: 1 1 auto;
        width: auto;
        margin-bottom: 0;
        padding-right: 10px;
    }
    .et-l--footer .product-options {
        flex: 0 0 auto;
        width: auto;
    }
    /* Inhaltszeilen im Popup breiter, damit neben Plus/Minus genug Platz fuer den Text bleibt */
    .theModule > .et_pb_row,
    .theModule2 > .et_pb_row,
    .theModule3 > .et_pb_row,
    .theModule4 > .et_pb_row,
    .theModule5 > .et_pb_row,
    .theModule6 > .et_pb_row {
        width: 92% !important;
        max-width: 92% !important;
    }
}

/* Plus/Minus um die Anzahl-Felder (per Skript erzeugt) */
.swh-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.swh-stepper button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #006935;
    color: #ffffff;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    flex: 0 0 auto;
}
.swh-stepper button:disabled {
    opacity: 0.3;
    cursor: default;
}
.swh-stepper input[type=number] {
    width: 48px !important;
    margin: 0 !important;
    padding: 11px 4px !important;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.swh-stepper input[type=number]::-webkit-outer-spin-button,
.swh-stepper input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Bestelluebersicht ueber dem Absende-Button (per Skript erzeugt) */
.swh-summary {
    clear: both;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 12px 15px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.4em;
    color: #333333;
}
.swh-summary-title {
    font-weight: bold;
    color: #006935;
    margin-bottom: 8px;
}
.swh-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}
.swh-summary-row span:last-child {
    white-space: nowrap;
}
.swh-summary-total {
    border-top: 1px solid #cccccc;
    margin-top: 6px;
    padding-top: 6px;
    font-weight: bold;
}
.swh-summary-empty,
.swh-summary-note {
    font-size: 12px;
    color: #666666;
}
.swh-summary-note {
    margin-top: 6px;
}