/* =========================================================
   NANCYS MODERN FOOD COMMERCE UI V0.8.0
   ========================================================= */

:root {
    --nancys-cream: #fffaf0;
    --nancys-paper: #ffffff;
    --nancys-ink: #14202d;
    --nancys-blue: #073f78;
    --nancys-blue-deep: #052f5c;
    --nancys-red: #d8262e;
    --nancys-yellow: #f5bd21;
    --nancys-green: #09863f;
    --nancys-muted: #697386;

    --nancys-radius-xl: 32px;
    --nancys-radius-lg: 24px;
    --nancys-radius-md: 16px;

    --nancys-shadow:
        0 20px 60px
        rgba(7, 63, 120, 0.11);
}


/*
|--------------------------------------------------------------------------
| Grundfläche
|--------------------------------------------------------------------------
*/

body {
    background:
        var(--nancys-cream);
    color:
        var(--nancys-ink);
}


body.home main {
    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header,
body > header {
    position: sticky;
    top: 0;
    z-index: 100;

    background:
        rgba(255, 250, 240, 0.94);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(20, 32, 45, 0.08);
}


/*
|--------------------------------------------------------------------------
| Sections
|--------------------------------------------------------------------------
*/

body.home section {
    position: relative;
}


#produkte,
#bestellen,
#haendler {
    scroll-margin-top: 100px;
}


/*
|--------------------------------------------------------------------------
| Bestellbereich
|--------------------------------------------------------------------------
*/

#bestellen {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(245, 189, 33, 0.18),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            var(--nancys-blue-deep),
            var(--nancys-blue)
        );
}


/*
|--------------------------------------------------------------------------
| Formular = moderne Checkout Card
|--------------------------------------------------------------------------
*/

#nancys-order-form {
    position: relative;

    border-radius:
        var(--nancys-radius-xl);

    box-shadow:
        var(--nancys-shadow);

    border:
        1px solid
        rgba(255,255,255,0.8);

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


/*
|--------------------------------------------------------------------------
| Formfelder
|--------------------------------------------------------------------------
*/

#nancys-order-form select,
#nancys-order-form input[type="text"],
#nancys-order-form input[type="number"],
#nancys-order-form input[type="date"],
#nancys-order-form input[type="email"],
#nancys-order-form input[type="tel"] {

    border:
        1px solid
        #ddd5c8;

    border-radius:
        18px;

    background:
        #fff;

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


#nancys-order-form select:hover,
#nancys-order-form input:hover {
    border-color:
        #c9bca8;
}


#nancys-order-form select:focus,
#nancys-order-form input:focus {
    border-color:
        var(--nancys-yellow);

    outline: none;

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


/*
|--------------------------------------------------------------------------
| Empfehlungs-/Promocode
|--------------------------------------------------------------------------
*/

.nancys-referral-panel {
    margin:
        -4px 0 24px;

    border:
        1px solid #e4ded4;

    border-radius:
        18px;

    background:
        #fbf8f2;

    overflow:
        hidden;
}


.nancys-referral-panel summary {
    position: relative;

    padding:
        17px 20px;

    cursor:
        pointer;

    list-style:
        none;

    color:
        var(--nancys-blue);

    font-weight:
        700;

    font-size:
        15px;
}


.nancys-referral-panel summary::-webkit-details-marker {
    display: none;
}


.nancys-referral-panel summary::after {
    content: "+";

    position:
        absolute;

    right:
        20px;

    top:
        50%;

    transform:
        translateY(-50%);

    font-size:
        22px;

    font-weight:
        400;
}


.nancys-referral-panel[open]
summary::after {
    content: "–";
}


.nancys-referral-content {
    padding:
        0 20px 20px;
}


.nancys-referral-input-row {
    display:
        grid;

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

    gap:
        10px;
}


#order-referral-code {
    min-height:
        54px !important;

    font-size:
        16px !important;

    text-transform:
        uppercase;
}


.referral-apply-button {
    min-height:
        54px;

    padding:
        0 20px;

    border:
        0;

    border-radius:
        16px;

    background:
        var(--nancys-blue);

    color:
        #fff;

    font:
        inherit;

    font-weight:
        700;

    cursor:
        pointer;
}


.referral-apply-button:hover {
    background:
        var(--nancys-blue-deep);
}


.referral-status {
    margin-top:
        10px;

    font-size:
        14px;

    line-height:
        1.45;
}


.referral-status.is-success {
    color:
        #087238;

    font-weight:
        700;
}


.referral-status.is-error {
    color:
        var(--nancys-red);

    font-weight:
        700;
}


.referral-summary-bonus {
    margin-top:
        10px;

    padding:
        10px 12px;

    border-radius:
        12px;

    background:
        rgba(245,189,33,0.18);

    color:
        var(--nancys-blue);

    font-weight:
        800;
}


/*
|--------------------------------------------------------------------------
| Lieferroute
|--------------------------------------------------------------------------
*/

.route-suggestions {
    border:
        0;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            rgba(245,189,33,0.17),
            rgba(245,189,33,0.08)
        );
}


.route-date-button {
    border:
        1px solid
        rgba(7,63,120,0.20);

    border-radius:
        999px;

    background:
        #fff;

    box-shadow:
        0 4px 16px
        rgba(7,63,120,0.06);
}


/*
|--------------------------------------------------------------------------
| Preisbox
|--------------------------------------------------------------------------
*/

.order-price-summary {
    border:
        1px solid
        #ebe4da;

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #fffaf3,
            #f8f3eb
        );
}


.order-price-summary
.order-total {
    color:
        var(--nancys-blue) !important;
}


/*
|--------------------------------------------------------------------------
| Bestellvorschau
|--------------------------------------------------------------------------
*/

.order-preview {
    border:
        1px solid
        #e2d8c9;

    border-radius:
        22px;

    background:
        #fffdf9;
}


/*
|--------------------------------------------------------------------------
| Hauptbutton
|--------------------------------------------------------------------------
*/

#nancys-order-form
.button-whatsapp {
    border:
        0;

    box-shadow:
        0 12px 28px
        rgba(9,134,63,0.20);

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


#nancys-order-form
.button-whatsapp:hover {
    transform:
        translateY(-1px);

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


/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

@media (min-width: 900px) {

    #nancys-order-form {
        padding:
            36px;
    }

}


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

@media (max-width: 600px) {

    #nancys-order-form {
        border-radius:
            24px;
    }


    .nancys-referral-input-row {
        grid-template-columns:
            1fr;
    }


    .referral-apply-button {
        width:
            100%;
    }

}


/* =========================================================
   HERO SERVICE HINT V0.10.1
   ========================================================= */

.hero-service-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin:
        18px 0 0;

    color:
        var(--nancys-muted);

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.45;
}


.hero-service-hint
:first-child {
    color:
        var(--nancys-ink);
}


.hero-service-divider {
    color:
        var(--nancys-yellow);

    font-weight:
        900;
}


@media (max-width: 600px) {

    .hero-service-hint {
        gap: 5px 7px;

        margin-top: 16px;

        font-size: 13px;
    }

}