/* =========================================================
   MentorMe — Kasse

   Gilt ausschließlich für die Kasse. `.mm-checkout` stammt aus
   woocommerce/checkout/form-checkout.php und existiert auf der Danke-Seite
   nicht: `order-received` ist zwar derselbe Post, rendert aber thankyou.php.
   Eine Abgrenzung gegen `.woocommerce-order-received` ist deshalb unnötig.

   Aufbau
     1  Seitenrahmen
     2  Raster            — sämtliche Positionen, an einer Stelle
     3  Seitentitel
     4  Login-Box
     5  Rechnungsdetails
     6  Konto & Newsletter
     7  Gutschein
     8  Warenkorb-Link
     9  Bestellübersicht
    10  Zahlungsbereich
    11  Fehlermeldungen
    12  Schmale Viewports
   ========================================================= */

body.woocommerce-checkout {

/* =========================================================
   1  Seitenrahmen
   ========================================================= */

.mm-checkout-page {
    width: 100%;
    float: none;

    padding-bottom: 58px;
}

> .select2-container {
    width: auto;
}

> .select2-container--open:has(#select2-billing_title-results) .select2-search--dropdown {
    display: none;
}

> .select2-container {

    .select2-dropdown {
        border: 1px solid var(--checkout-bg-form);
        border-radius: 0 0 5px 5px;
    }

    .select2-results__option {
        color: var(--checkout-text);
        font-size: 15px;
    }

    .select2-results__option[aria-selected="true"] {
        background-color: var(--checkout-bg-field);
        color: var(--checkout-text);
    }

    .select2-results__option--highlighted[aria-selected] {
        background-color: var(--checkout-green);
        color: #fff;
    }
}

> .select2-container--above .select2-dropdown {
    border-radius: 5px 5px 0 0;
}

.mm-checkout {

/* =========================================================
   2  Raster
   ========================================================= */

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto 1fr;

    column-gap: 40px;
    row-gap: 26px;
    align-items: start;

    form.checkout { display: contents; }

    /* Reihenfolge links: Rechnungsdetails (mit Newsletter am Ende) →
       Gutschein → Kontofelder → Warenkorb-Link. */
    .mm-checkout-title    { grid-area: 1 / 1 / auto / -1; }

    /* JS (checkout.js, submit_error) hängt Formularfehler als ersten
       Kindknoten in <form> ein. Weil das Formular `display: contents` ist,
       wird die Fehlerbox trotzdem zu einem eigenständigen Rasterelement —
       explizite grid-row-Platzierung ist unabhängig von der DOM-Reihenfolge,
       deshalb landet sie hier über der Login-Box, obwohl sie im Markup erst
       viel später (innerhalb des Formulars) steht. */
    .woocommerce-NoticeGroup-checkout { grid-area: 2 / 1 / auto / -1; }

    .mm-checkout__login   { grid-area: 3 / 1 / auto / -1; }
    .mm-checkout__left    { grid-area: 4 / 1; }
    .mm-coupon            { grid-area: 5 / 1; }
    .mm-checkout__account { grid-area: 6 / 1; }

    .mm-back-to-cart {
        grid-area: 7 / 1;
        align-self: start;
    }

    /* Spannt über die restlichen Zeilen der linken Spalte, damit Gutschein,
       Kontofelder und Warenkorb-Link darunter passen statt unter die gesamte
       rechte Spalte. */
    .mm-checkout__right {
        grid-area: 4 / 2 / span 4;

        display: grid;
        width: 100%;
        row-gap: 26px;

        /* Hebt die Box des Payment-Wrappers auf, damit Zahlungskarte und
           Button eigene Rasterzeilen bekommen. */
        #payment { display: contents; }

        .mm-order   { grid-row: 1; }
        .mm-payment { grid-row: 2; }
        .wc-gzd-checkbox-placeholder-legal { grid-row: 3; }

        /* Germanized verschiebt den Bestellbutton in einen eigenen Container —
           dieser ist das Rasterelement, nicht .place-order aus payment.php. */
        > .wc-gzd-order-submit { grid-row: 4; }

        /* Germanized legt mehrere Checkbox-Platzhalter an; nur der für den
           Rechtstext wird benutzt. Die übrigen belegten sonst Zeilen. */
        > .wc-gzd-checkbox-placeholder:not(.wc-gzd-checkbox-placeholder-legal) {
            display: none !important;
        }

        /* Shiptastic legt einen Container für DHL-Wunschzustellung an. Ohne
           Versand bleibt er leer, belegte als Rasterelement aber eine eigene
           Zeile und kostete zweimal row-gap. */
        > .dhl-preferred-service-content:empty { display: none; }
    }

/* =========================================================
   3  Seitentitel
   ========================================================= */

.mm-checkout-title {
    margin: 0;
    padding: 0;

    color: var(--checkout-text);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

/* =========================================================
   4  Login-Box
   ========================================================= */

.mm-login {
    display: flex;
    align-items: center;
    gap: 24px;

    padding: 22px 24px;

    border: 1px solid var(--checkout-bg-form);
    border-radius: 8px;
    background: #fff;
}

.mm-login__icon {
    flex: 0 0 auto;

    width: 64px;
    height: 64px;

    background: url("../../icons/user-grey.svg") center / contain no-repeat;
}

.mm-login__body { flex: 1 1 auto; }

.mm-login__title {
    margin: 0;
    padding-bottom: 8px;
    color: var(--checkout-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.mm-login__text {
    margin: 4px 0 0;

    color: var(--checkout-text-grey);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

.mm-login__button {
    flex: 0 0 auto;

    padding: 15px 30px;

    border-radius: 5px;
    background: var(--checkout-green);

    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
        background: var(--checkout-text);
        color: #fff;
    }
}

/* =========================================================
   5  Rechnungsdetails
   ========================================================= */

.woocommerce-billing-fields {

    > h3 {
        margin: 0 0 18px;
        color: var(--checkout-text);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.25;
    }

    label {
        display: block;
        margin: 0 0 7px;

        color: var(--checkout-text);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.4;
    }

    .required { color: var(--checkout-button); }

    input.input-text,
    textarea,
    select {
        width: 100% !important;
        min-height: 50px;
        padding: 11px 14px;

        border: 1px solid var(--checkout-bg-form);
        border-radius: 5px;
        background: #fff;

        color: var(--checkout-text);
        font-size: 15px;
        box-shadow: none;
    }

    input.input-text:focus,
    textarea:focus {
        border-color: var(--checkout-green);
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--checkout-green) 10%, transparent);
    }

    .select2-container { width: 100% !important; }

    .select2-container .select2-selection--single {
        height: 50px;
        padding: 0 !important;

        border: 1px solid var(--checkout-bg-form);
        border-radius: 5px;
        background: #fff;
    }

    .select2-selection__rendered {
        height: 48px;
        padding: 0 42px 0 14px !important;
        line-height: 48px !important;
        color: var(--checkout-text) !important;
    }

    .select2-selection__arrow {
        top: 0 !important;
        right: 10px !important;
        height: 48px !important;
    }
}

.woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px;

    > .form-row {
        float: none !important;
        clear: none !important;
        width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
    }
}

.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-billing-fields__field-wrapper > .form-row-last,
#billing_city_field,
#billing_postcode_field,
#billing_phone_field,
#billing_email_field {
    width: calc(50% - 14px) !important;
}

/* =========================================================
   5.1 Additional Ticket Information
   ========================================================= */

.woocommerce-additional-fields {
    .evotx_checkout_additional_names {
        margin-top: 24px;

        h3 {
            margin: 0 0 18px;
            color: var(--checkout-text);
            font-size: 21px;
            font-weight: 700;
            line-height: 1.25;
        }

        .evotx_ticket_additional_info {
            border: 0;
            padding: 0;

            .evo_event_information {
                margin-bottom: 20px;
            }

            .evotx_tai_oneholder {
                margin-bottom: 20px;

                .evotx_tai_oneholder_title {
                    display: block;
                    margin: 0 0 7px;
                    color: var(--checkout-text);
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.4;
                }

                .form-row {
                    padding: 0;

                    label {
                        display: block;
                        margin: 0 0 7px;
                        color: var(--checkout-text);
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.4;
                    }

                    input.input-text, textarea, select {
                        width: 100% !important;
                        min-height: 50px;
                        padding: 11px 14px;
                        border: 1px solid var(--checkout-bg-form);
                        border-radius: 5px;
                        background: #fff;
                        color: var(--checkout-text);
                        font-size: 15px;
                        box-shadow: none;
                    }
                }
            }
        }
    }
}

/* =========================================================
   6  Konto & Newsletter
   ========================================================= */

.woocommerce-account-fields { margin: 0; }

.mm-account {
    margin: 0 !important;
    padding: 22px 24px !important;

    border: 1px solid var(--checkout-bg-form);
    border-radius: 8px;
    background: #fff;
}

.mm-account__row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
}

.mm-account__checkbox {
    flex: 0 0 auto;
    margin: 2px 0 0 !important;

    width: 19px;
    height: 19px;

    accent-color: var(--checkout-green);
}

.mm-account__body { flex: 1 1 auto; }

.mm-account__title {
    display: block;

    color: var(--checkout-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.mm-account__optional {
    color: var(--checkout-text-grey);
    font-weight: 400;
}

.mm-account__hint {
    display: block;
    margin-top: 2px;

    color: var(--checkout-text-grey);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.woocommerce-account-fields .create-account,
.mailchimp-newsletter {
    float: none !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;

    label {
        display: flex !important;
        align-items: flex-start;
        gap: 14px;
        margin: 0 !important;

        color: var(--checkout-text);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.55;
        cursor: pointer;
    }

    input[type="checkbox"] {
        flex: 0 0 auto;

        width: 19px;
        height: 19px;
        margin: 1px 0 0 !important;

        accent-color: var(--checkout-green);
    }
}

/* =========================================================
   7  Gutschein
   ========================================================= */

.mm-coupon__trigger {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 16px 18px;

    border: 1px solid var(--checkout-bg-form);
    border-radius: 5px;
    background: #fff;

    text-decoration: none;
}

.mm-coupon__icon {
    flex: 0 0 auto;

    width: 26px;
    height: 26px;

    background: url("../../icons/tag.svg") center / contain no-repeat;
}

.mm-coupon__body { flex: 1 1 auto; }

.mm-coupon__title {
    display: block;

    color: var(--checkout-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.mm-coupon__hint {
    display: block;
    margin-top: 2px;

    color: var(--checkout-text-grey);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.mm-coupon__chevron {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;
    margin-right: 4px;

    border-right: 1.5px solid var(--checkout-text);
    border-bottom: 1.5px solid var(--checkout-text);
    transform: rotate(45deg) translate(-2px, -2px);
}

.mm-coupon {

    .checkout_coupon {
        margin: -1px 0 0;
        padding: 18px;

        border: 1px solid var(--checkout-bg-form);
        border-radius: 0 0 5px 5px;
        background: #fff;

        .form-row {
            float: none !important;
            width: 100% !important;
            margin: 0 0 10px !important;
        }
    }

    #coupon_code {
        width: 100%;
        min-height: 48px;
        padding: 10px 14px;

        border: 1px solid var(--checkout-bg-form);
        border-radius: 5px;
        background: #fff;
    }

    button[name="apply_coupon"] {
        width: 100%;
        min-height: 48px;

        border: 0;
        border-radius: 5px;
        background: var(--checkout-green);
        color: #fff;

        &:hover {
            background: var(--checkout-text) !important;
            color: #fff;
        }
    }
}


.mm-coupon {

    .mm-coupon__notice:empty { display: none; }

    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        margin: 10px 0 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: transparent !important;

        color: var(--checkout-green) !important;
        font-size: 14px !important;
        font-weight: 400;
        line-height: 1.5;

        &::before { display: none !important; }
    }

    .woocommerce-message {
        padding: 8px 0 12px 0!important;
    }

    .woocommerce-error {
        color: var(--checkout-button) !important;
    }

    .mm-coupon__notice .button {
        display: none !important;
    }
}

/* =========================================================
   8  Warenkorb-Link
   ========================================================= */

.mm-back-to-cart {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--checkout-text-grey);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;

    &::before {
        content: "";

        width: 7px;
        height: 7px;

        border-left: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
    }

    &:hover { color: var(--checkout-text); }
}

/* =========================================================
   9  Bestellübersicht

   Kartenrahmen und Überschrift kommen aus functions.php, nicht aus
   review-order.php: Dessen Ausgabe ist zugleich das AJAX-Fragment, mit dem
   WooCommerce die Tabelle bei jedem update_checkout ersetzt.
   ========================================================= */

.mm-order,
.mm-payment {
    padding: 28px 26px !important;

    border: 1px solid var(--checkout-bg-form);
    border-radius: 6px;
    background: #fff;
}

.custom-checkout-order-title {
    margin: 0 0 25px;
    padding: 0;

    color: var(--checkout-text);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    margin: 0 !important;

    border: 0 !important;
    border-collapse: collapse;
    background: transparent;

    thead { display: none; }

    tbody,
    tfoot {
        display: block;
        width: 100%;
    }

    td {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    tr.cart_item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 22px;

        width: 100%;
        padding: 12px 0 28px !important;

        border-bottom: 1px solid var(--checkout-bg-form);

        a {
            color: var(--checkout-green);
        }
    }

    td.product-name {
        color: var(--checkout-text);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.55;
    }

    td.product-total {
        white-space: nowrap;
        text-align: right;

        color: var(--checkout-text);
        font-size: 15px;
    }

    .wc-gzd-cart-item-name-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .wc-gzd-cart-item-thumbnail {
        flex: 0 0 auto;

        img {
            display: block;

            width: 60px;
            height: 60px;
            margin: 0;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    .wc-gzd-cart-info,
    dl.variation {
        margin: 14px 0 0 88px;
        color: var(--checkout-text);
        font-size: 13px !important;
        font-weight: 400;
        line-height: 1.5;

        p {
            margin: 0;
            font-size: 13px;
        }
    }

    tfoot tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;

        width: 100%;
        padding: 18px 0 !important;

        border-bottom: 1px solid var(--checkout-bg-form);
    }

    tfoot th,
    tfoot td {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    tfoot th {
        color: var(--checkout-text);
        font-size: 15px;
        font-weight: 400;
        text-align: left;
    }

    tfoot td {
        white-space: nowrap;
        text-align: right;

        color: var(--checkout-text);
        font-size: 15px;
    }

    tr.order-total {
        padding-top: 22px;
        border-bottom: 0;

        th {
            font-size: 21px;
            font-weight: 700;
        }

        td,
        .amount {
            color: var(--checkout-green);
            font-size: 24px;
            font-weight: 700;
        }
    }
}

/* =========================================================
   10  Zahlungsbereich
   ========================================================= */

.mm-payment__title {
    margin: 0 0 8px;
    padding: 0;

    color: var(--checkout-text);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.mm-payment__hint {
    margin: 0;
    padding: 0 0 20px;

    color: var(--checkout-text-grey);
    font-size: 14px;
    font-weight: 400;
}

#order_payment_heading { display: none !important; }

.wc_payment_methods {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    list-style: none;

    > li {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: 15px;

        margin: 0 !important;
        padding: 18px 0 !important;

        border-bottom: 1px solid var(--checkout-bg-form);
        background: transparent !important;

        &:last-child {
            padding-bottom: 0 !important;
            border-bottom: 0;
        }

        > input[type="radio"] {
            width: 20px;
            height: 20px;
            margin: 2px 0 0 !important;

            accent-color: var(--checkout-green);
        }

        > label {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            gap: 15px;

            width: 100%;
            margin: 0 !important;

            color: var(--checkout-text);
            font-size: 15px;
            font-weight: 400;
            cursor: pointer;
        }
    }

    label img {
        width: auto !important;
        max-width: 100px;
        max-height: 25px;
        margin: 0 0 0 auto !important;
        object-fit: contain;
    }
}

#payment ul.payment_methods > li::before,
#payment ul.payment_methods > li::after {
    content: none;
    display: none;
}

.about_paypal { display: none !important; }

.payment_box {
    grid-column: 1 / -1;

    margin: 15px 0 0 !important;
    padding: 16px !important;

    border-radius: 5px;
    background: var(--checkout-bg-field) !important;

    color: var(--checkout-text);
    font-size: 13px;
    line-height: 1.5;

    &::before { display: none !important; }
}

.wc-gzd-checkbox-placeholder-legal {
    margin: 10px 0;
    padding: 0;
}

.checkbox-legal {
    margin: 0 !important;
    padding: 0 !important;

    label {
        display: block !important;
        position: relative;

        margin: 0 !important;
        padding-left: 33px;

        color: var(--checkout-text);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.7;

        .required { color: var(--checkout-button); }
    }

    input[type="checkbox"] {
        position: absolute;
        top: 5px;
        left: 0;

        width: 19px;
        height: 19px;
        margin: 0 !important;

        accent-color: var(--checkout-green);
    }

    a {
        color: var(--checkout-green);
        text-decoration: none;
    }
}

.checkout-inline-error-message {
    margin: 8px 0 0 0;

    color: var(--checkout-button);
    font-size: 13px;
    line-height: 1.5;
}

.place-order {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

#place_order {
    float: none !important;
    width: 100%;
    min-height: 64px;
    margin: 0 !important;
    padding: 14px 25px !important;

    border: 0 !important;
    border-radius: 5px;
    background: var(--checkout-green) !important;

    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;

    box-shadow: none !important;

    &:hover { background: var(--checkout-text) !important; }
}



}   /* Ende .mm-checkout */

/* =========================================================
   11  Fehlermeldungen
   ========================================================= */

.woocommerce-NoticeGroup-checkout .woocommerce-error {
    margin: 0 0 22px !important;
    padding: 15px 18px 15px 42px !important;

    border: 1px solid var(--checkout-button);
    border-radius: 5px;
    background: color-mix(in srgb, var(--checkout-button) 8%, white);

    color: var(--checkout-button) !important;
}

/* =========================================================
   12 Mobile
   ========================================================= */

@media (max-width: 980px) {
    .mm-checkout {
        grid-template-columns: minmax(0, 1fr);

        .mm-checkout-title                { grid-area: 1 / 1; }
        .woocommerce-NoticeGroup-checkout { grid-area: 2 / 1; }
        .mm-checkout__login               { grid-area: 3 / 1; }
        .mm-checkout__left                { grid-area: 4 / 1; }
        .mm-coupon                        { grid-area: 5 / 1; }
        .mm-checkout__account             { grid-area: 6 / 1; }
        .mm-checkout__right               { grid-area: 7 / 1; }
        .mm-back-to-cart                  { grid-area: 8 / 1; }
    }
}

@media (max-width: 768px) {
    .mm-checkout .mm-login {
        flex-wrap: wrap;
        gap: 16px;

        .mm-login__body   { flex: 1 1 calc(100% - 88px); }
        .mm-login__button { flex: 1 1 100%; text-align: center; }
    }

        .mm-checkout {
            & .woocommerce-checkout-review-order-table {
                tfoot tr {
                    padding: 14px 0 !important;
                }
            }
        }
}

@media (max-width: 600px) {
    .mm-checkout {
        .woocommerce-billing-fields__field-wrapper > .form-row-first,
        .woocommerce-billing-fields__field-wrapper > .form-row-last,
        #billing_city_field,
        #billing_postcode_field,
        #billing_phone_field,
        #billing_email_field {
            width: 100% !important;
        }

        .mm-order,
        .mm-payment { padding: 22px 18px !important; }

        .woocommerce-checkout-review-order-table {
            tr.cart_item {
                grid-template-columns: minmax(0, 1fr);
                gap: 10px;
            }

            td.product-total { text-align: left; }
        }
    }
}

}   /* Ende body.woocommerce-checkout */