/* =========================================================
   NANCYS CHECKOUT V1 - V0.9.0
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Legacy
|--------------------------------------------------------------------------
*/

.checkout-legacy-preview {
    display: none !important;
}


.checkout-native-fulfilment {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/*
|--------------------------------------------------------------------------
| Formular-Shell
|--------------------------------------------------------------------------
*/

#nancys-order-form {
    padding: 0 !important;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    border: 0;
}


.checkout-v1 {
    display: grid;
    gap: 18px;
}


/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.checkout-progress {
    display: flex;
    gap: 8px;

    padding: 4px 4px 10px;

    overflow-x: auto;
    scrollbar-width: none;
}


.checkout-progress::-webkit-scrollbar {
    display: none;
}


.checkout-progress-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;

    padding: 8px 12px;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.10);

    color:
        rgba(255,255,255,0.80);

    font-size: 13px;
    font-weight: 700;
}


.checkout-progress-item b {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background:
        var(--nancys-yellow);

    color:
        var(--nancys-blue-deep);

    font-size: 12px;
}


/*
|--------------------------------------------------------------------------
| Schritte
|--------------------------------------------------------------------------
*/

.checkout-step {
    border:
        1px solid
        rgba(20, 32, 45, 0.08);

    border-radius:
        28px;

    background:
        rgba(255,255,255,0.985);

    box-shadow:
        0 18px 50px
        rgba(7,63,120,0.09);

    overflow:
        hidden;
}


.checkout-step[hidden] {
    display: none !important;
}


.checkout-step-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding:
        24px 26px 18px;

    border-bottom:
        1px solid
        #eee7dd;
}


.checkout-step-number {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background:
        var(--nancys-blue);

    color:
        #fff;

    font-size: 14px;
    font-weight: 800;
}


.checkout-step-header h3 {
    margin: 0;

    color:
        var(--nancys-ink);

    font-size: 21px;
    line-height: 1.2;
}


.checkout-step-header p {
    margin: 4px 0 0;

    color:
        var(--nancys-muted);

    font-size: 14px;
    line-height: 1.45;
}


.checkout-step-body {
    padding:
        24px 26px 28px;
}


/*
|--------------------------------------------------------------------------
| Form-Abstände
|--------------------------------------------------------------------------
*/

.checkout-step-body
.form-field,
.checkout-step-body
.nancys-form-field {
    margin-bottom: 20px !important;
}


.checkout-step-body
.form-field:last-child,
.checkout-step-body
.nancys-form-field:last-child {
    margin-bottom: 0 !important;
}


/*
|--------------------------------------------------------------------------
| Abholung / Lieferung
|--------------------------------------------------------------------------
*/

.checkout-choice-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 14px;

    margin-bottom: 22px;
}


.checkout-choice-card {
    appearance: none;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: 150px;

    padding: 20px;

    border:
        2px solid
        #e6dfd5;

    border-radius:
        22px;

    background:
        #fff;

    color:
        var(--nancys-ink);

    text-align: left;

    font: inherit;

    cursor: pointer;

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}


.checkout-choice-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #cabda9;
}


.checkout-choice-card.is-selected {
    border-color:
        var(--nancys-blue);

    background:
        linear-gradient(
            145deg,
            rgba(7,63,120,0.055),
            rgba(245,189,33,0.08)
        );

    box-shadow:
        0 10px 28px
        rgba(7,63,120,0.10);
}


.checkout-choice-kicker {
    margin-bottom: 10px;

    color:
        var(--nancys-red);

    font-size: 12px;
    font-weight: 900;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.checkout-choice-card strong {
    margin-bottom: 7px;

    color:
        var(--nancys-blue);

    font-size: 18px;
    line-height: 1.25;
}


.checkout-choice-card small {
    color:
        var(--nancys-muted);

    font-size: 14px;
    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| Kontakt
|--------------------------------------------------------------------------
*/

.checkout-contact-grid {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 14px;
}


.checkout-confirmation-channel {
    margin-top: 8px;
}


.checkout-confirmation-channel
fieldset {
    margin: 0;
    padding: 0;

    border: 0;
}


.checkout-confirmation-channel
legend {
    margin-bottom: 12px;

    color:
        var(--nancys-ink);

    font-size: 16px;
    font-weight: 800;
}


.checkout-mini-choice-grid {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 12px;
}


.checkout-mini-choice {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 16px;

    border:
        1px solid
        #e1d8cb;

    border-radius:
        18px;

    cursor: pointer;

    background: #fff;
}


.checkout-mini-choice:has(input:checked) {
    border-color:
        var(--nancys-blue);

    box-shadow:
        0 0 0 3px
        rgba(7,63,120,0.08);
}


.checkout-mini-choice
input {
    margin-top: 4px;
}


.checkout-mini-choice
strong {
    display: block;

    color:
        var(--nancys-blue);

    font-size: 15px;
}


.checkout-mini-choice
small {
    display: block;

    margin-top: 3px;

    color:
        var(--nancys-muted);

    font-size: 13px;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Zahlung
|--------------------------------------------------------------------------
*/

.checkout-payment-options {
    display: grid;
    gap: 12px;
}


.checkout-payment-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 18px;

    border:
        1px solid
        #e1d8cb;

    border-radius:
        20px;

    background:
        #fff;
}


.checkout-payment-card.is-active {
    border-color:
        var(--nancys-blue);

    background:
        rgba(7,63,120,0.035);
}


.checkout-payment-card.is-coming {
    opacity: 0.58;
}


.checkout-payment-card
input {
    flex: 0 0 auto;
}


.checkout-payment-card > span {
    flex: 1 1 auto;
}


.checkout-payment-card
strong {
    display: block;

    color:
        var(--nancys-blue);

    font-size: 16px;
}


.checkout-payment-card
small {
    display: block;

    margin-top: 3px;

    color:
        var(--nancys-muted);

    font-size: 13px;
}


.checkout-payment-card em {
    flex: 0 0 auto;

    padding: 5px 9px;

    border-radius: 999px;

    background:
        #f1ece4;

    color:
        #726b61;

    font-size: 11px;
    font-style: normal;
    font-weight: 800;

    text-transform:
        uppercase;
}


.checkout-cash-agreement {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 18px;

    padding: 16px 18px;

    border-radius: 18px;

    background:
        #fff8e7;

    color:
        var(--nancys-ink);

    font-size: 14px;
    line-height: 1.5;
}


.checkout-cash-agreement input {
    margin-top: 3px;
}


/*
|--------------------------------------------------------------------------
| Zusammenfassung
|--------------------------------------------------------------------------
*/

.checkout-step
.order-price-summary {
    margin: 0 0 16px;

    padding: 20px;

    border-radius: 20px;
}


.checkout-review-notice {
    margin-bottom: 18px;

    padding: 16px 18px;

    border-radius: 18px;

    background:
        rgba(245,189,33,0.13);
}


.checkout-review-notice strong {
    color:
        var(--nancys-blue);

    font-size: 14px;
}


.checkout-review-notice p {
    margin:
        5px 0 0;

    color:
        var(--nancys-muted);

    font-size: 13px;
    line-height: 1.45;
}


.checkout-review-notice-list {
    margin:
        6px 0 0;

    padding: 0;

    list-style: none;

    color:
        var(--nancys-ink);

    font-size: 13px;
    line-height: 1.5;
}


.checkout-confirmation-error {
    margin-top: 8px;
}


.checkout-final-button {
    width: 100%;

    min-height: 64px !important;

    margin-top: 6px;

    font-size: 17px !important;

    box-shadow:
        0 14px 34px
        rgba(9,134,63,0.20);
}


/*
|--------------------------------------------------------------------------
| Referral im Step
|--------------------------------------------------------------------------
*/

.checkout-step
.nancys-referral-panel {
    margin:
        4px 0 0;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .checkout-step {
        border-radius: 22px;
    }


    .checkout-step-header {
        padding:
            20px 18px 16px;
    }


    .checkout-step-body {
        padding:
            20px 18px 22px;
    }


    .checkout-choice-grid,
    .checkout-contact-grid,
    .checkout-mini-choice-grid {
        grid-template-columns:
            1fr;
    }


    .checkout-choice-card {
        min-height: 0;
    }


    .checkout-progress {
        padding-left: 0;
        padding-right: 0;
    }

}


/* =========================================================
   NANCYS CHECKOUT POLISH V0.9.3
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Hidden muss Hidden bleiben
|--------------------------------------------------------------------------
*/

.checkout-step [hidden],
.checkout-step[hidden],
#order-price-summary[hidden],
.order-price-summary[hidden] {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Kontaktfelder exakt wie übrige Inputs
|--------------------------------------------------------------------------
*/

#nancys-order-form
.checkout-contact-grid
input[type="email"],

#nancys-order-form
.checkout-contact-grid
input[type="tel"] {

    box-sizing: border-box;

    display: block;

    width: 100%;

    min-height: 64px;

    margin: 0;

    padding: 14px 18px;

    border:
        1px solid #ddd5c8;

    border-radius: 18px;

    background: #fff;

    color:
        var(--nancys-ink);

    font-family: inherit;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.3;
}


#nancys-order-form
.checkout-contact-grid
input[type="email"]:focus,

#nancys-order-form
.checkout-contact-grid
input[type="tel"]:focus {

    border-color:
        var(--nancys-yellow);

    outline: none;

    box-shadow:
        0 0 0 4px
        rgba(245, 189, 33, 0.22);
}


/*
|--------------------------------------------------------------------------
| Placeholder
|--------------------------------------------------------------------------
*/

#nancys-order-form
.checkout-contact-grid
input::placeholder {

    color: #9299a4;

    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Zahlungsbereich
|--------------------------------------------------------------------------
*/

.checkout-payment-options {
    margin-bottom: 0;
}


.checkout-payment-card.is-active {
    cursor: default;
}


/*
|--------------------------------------------------------------------------
| Barzahlungsbestätigung
|--------------------------------------------------------------------------
*/

.checkout-cash-agreement {
    margin-bottom: 0;

    font-weight: 600;
}


.checkout-cash-agreement span {
    display: block;
}


/*
|--------------------------------------------------------------------------
| Zusammenfassung
|--------------------------------------------------------------------------
*/

.checkout-step
#order-price-summary:empty {
    display: none !important;
}


.checkout-step
.order-price-summary[hidden] {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Finaler CTA
|--------------------------------------------------------------------------
*/

.checkout-final-button {
    margin-bottom: 0;
}


.checkout-step
.whatsapp-help {

    position: static !important;

    display: block;

    width: 100%;

    margin:
        12px 0 0 !important;

    padding: 0 !important;

    color:
        var(--nancys-muted);

    text-align: center;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.45;

    transform: none !important;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    #nancys-order-form
    .checkout-contact-grid
    input[type="email"],

    #nancys-order-form
    .checkout-contact-grid
    input[type="tel"] {

        min-height: 58px;

        padding: 13px 16px;

        font-size: 17px;
    }

}