/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/** Design Style **/

:root {
    --rewe-rot: #cc071e;
    --clr-white: #fbfaf9;
    --brd-clr: #7e7167;
    --brd-color-reg: #e4e0dd;
    --clean-white: #fff;
    --card-bg-clr: #e6f2f1;
    --card-bg-clr-2: #efedeb;
    --bg-clr: #faf8f9;
    --bg-clr-reg: #f6f6f3;
    --color-bg: #faf8f9;

    --clr-check: #008f1f;
    --clr-check-bg: rgb(0 163 35 / 13%);

    --hl-clr: #3b322b;
    --color-text: #3b322b;
    --color-text-1: #b8aca0;
    
    --clr-green: #00a323;

    --box-shadow: 0 0 5px 5px rgb(126 113 103 / 11%);
    --border-reg: 2px solid var(--brd-color-reg);

    --border-radius-l: 20px;

    --section-space: 70px auto;

    --rewe-lieferart-icon: 50px;
}

/** Resets **/
/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}


/** Styles **/
body {
    background-color: var(--bg-clr);
}

.prozessbar {
    margin-top: 70px;
}
.brxe-jet-form-builder-form {
    width: 100%;

    .rewe-step.rewe-step-1.is-active,
    .rewe-step.rewe-step-2.is-active {
        padding: 10rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        [class*="__inner-container"] {
            display: flex;
            flex-direction: column;
            align-items: center;
            row-gap: 3rem;
            margin: 0 auto;
            text-align: center;
            width: min(100%, 1100px);

            .datum {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                column-gap: 8rem;
                text-align: left;
                width: auto;
                padding: 0 5rem;
                border: 1px solid var(--brd-clr);
                border-radius: 50px;
                background-color: var(--clean-white);
                box-shadow: var(--box-shadow);
            }
        }

        button.rewe-step-next,
        button.rewe-step-prev {
            text-align: left;
            display: flex;
            flex-direction: row;
            background-color: transparent;
            margin: 3rem 0 2rem;
			
			&.rewe-zeitraum-neu {
				max-width: 280px;
				width: 100%;
			}

            .icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 15px;
                border-radius: 60px;
                width: 60px;
                margin: 0 2rem 1rem 0;
                background-color: var(--rewe-rot);
                color: var(--clr-white);

                svg {
                    fill: var(--clr-white);
                    height: 30px;
                }
            }
        }
    }
    :is(
        .rewe-step.rewe-step-2.is-active,
        .rewe-step.rewe-step-3.is-active,
        .rewe-step.rewe-step-4.is-active,
        .rewe-step.rewe-step-5.is-active
        ) {

        button.rewe-step-next,
        button.rewe-step-prev,
        .jet-form-builder-row.field-type-submit-field button
        {
            display: inline-flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
            letter-spacing: 0.5px;
            padding: 0.5em 1em;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            background-color: var(--rewe-rot);
            border: 2px solid var(--rewe-rot);
            color: var(--clr-white);
            border-radius: 10px;

            svg {
                fill: var(--clr-white)
            }

            &:hover, &:hover svg {
                background-color: var(--clr-white);
                color: var(--rewe-rot);
                fill: var(--rewe-rot)
            }
        }
        button.rewe-step-prev {
            margin-left: 0;
            margin-right: auto;

            &.rewe-zeitraum-neu {
				max-width: 280px;
				width: 100%;
                background-color: transparent;
                border: none;
                color: #000;
                text-align: left;

                .icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 60px;
                height: 60px;
                padding: 15px;
                border-radius: 60px;
                margin: 0 2rem 1rem 0;
                background-color: var(--rewe-rot);
                color: var(--clr-white);

                svg {
                        fill: var(--clr-white);
                        height: 30px;
                        max-width: 30px;
                    }
                }
                &:hover {
                    color: #000;
                }
                &:hover svg {
                    background-color: transparent;
                }
			}
        }
        .jet-form-builder-row.field-type-submit-field,
        button.rewe-step-next {
            margin-left: auto;
            margin-right: 0;

            &.none {
                opacity: 0;
            }
        }
    }
}

[class*="__inner-container"] .add-card-available {
    display: flex;
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 2rem;
    align-items: start;
    justify-content: center;
    background-color: var(--card-bg-clr);
    border-radius: var(--border-radius-l);

    &.is-ausgebucht {
        background-color: var(--card-bg-clr-2);

        img {
            filter: grayscale(1);
        }

        .artikel-availability {
            color: var(--rewe-rot)!important;
            font-weight: 400!important;
        }

        .artikel-nicht-verfuegbar {
            font-size: 16px;
            font-weight: 700;
            border-width: 2px;

            .artikel-nicht-verfuegbar-icon {
                font-style: normal;
                font-size: 14px;
                font-weight: 900;
            }
        }
    }

    img {
        width: 220px;
        height: 220px;
        flex: 0 0 220px;
        aspect-ratio: auto 220 / 220;
        border-radius: var(--border-radius-l);
    }

    .mietartikel-content {
        row-gap: 1rem;

        .artikel-title {
            font-size: 1.8em;
            line-height: 1.4;
            color: var(--hl-clr);
        }

        .artikel-info-label,
        .artikel-description {
            text-align: left;
            font-size: 16px;
            line-height: 1.7;
            color: var(--brd-clr);
        }

        .artikel-description {
            display: flex;
            flex-direction: column;
            gap: 1.2em;
            margin-block-end: 1.5em;
        }

        .artikel-availability {
            font-size: 16px;
            color: var(--clr-green);
        }

        .artikel-price :is(.artikel-price-wert, .artikel-price-einheit) {
            font-size: 2rem;
            font-weight: 700;
            color: var(--hl-clr);
        }

        .qty-wrapper {
            background-color: var(--clr-white);
            border: 2px solid var(--rewe-rot);
            border-radius: 50px;
            padding: 5px 15px;
            gap: 0;

            .qty-btn, input {
                border: none;
                background-color: transparent;
                font-weight: 700;
                padding: 0;
            }
            input {
                width: 20px;
            }
        }
        .artikel-aktionen .add-to-cart-btn {
            display: inline-flex;
            gap: 10px;
            justify-content: center;
            letter-spacing: 0.5px;
            padding: 0.5em 1em;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            background-color: var(--rewe-rot);
            border: 2px solid var(--rewe-rot);
            color: var(--clr-white);
            border-radius: 10px;

            &:hover {
                background-color: var(--clr-white);
                color: var(--rewe-rot);
            }
        }
    }
}

.warenkorb-wrapper {
    align-items: flex-start;
}
.is-layout-flex.wrapper-title {
    width: 100%;
    text-align: center;
    row-gap: 30px;
    margin-bottom: 30px;
}
.rewe-kauf-tabs {
    margin: 0 auto 70px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 5rem;

    button {
        display: flex;
        flex-direction: column;
        row-gap: 0.25rem;
        background-color: transparent;
        &.is-active .rewe-kauf-tab-bild {
            border-color: var(--rewe-rot)
        }
        .rewe-kauf-tab-bild {
            width: 150px;
            height: 150px;
            background-color: var(--clean-white);
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid transparent;

            img {
                object-fit: cover;
            }
        }
        .rewe-kauf-tab-name {
            font-size: 20px;
            width: 100%;
            text-align: center;
        }
    }
}
.rewe-kauf-panel {
    row-gap: 1.3rem;
    flex-direction: column;
    &.is-active {
        display: flex !important;
    }
}
.rewe-kauf-karte {
    display: flex;
    width: min(1100px, 100%);
    margin: 1rem auto;
    padding: 2rem;
    align-items: start;
    justify-content: center;
    background-color: var(--card-bg-clr);
    border-radius: var(--border-radius-l);
    gap: 5rem;

    &.is-ausgebucht {
        background-color: var(--card-bg-clr-2);

        img {
            filter: grayscale(1);
        }

        .artikel-availability {
            color: var(--rewe-rot)!important;
            font-weight: 400!important;
        }

        .artikel-nicht-verfuegbar {
            font-size: 16px;
            font-weight: 700;
            border-width: 2px;

            .artikel-nicht-verfuegbar-icon {
                font-style: normal;
                font-size: 14px;
                font-weight: 900;
            }
        }
    }

    .rewe-kauf-karte-bild {
        flex: 0 0 220px;
        width: 220px;
        height: 220px;
        border-radius: var(--border-radius-l);
        overflow: hidden;

        img {
            object-fit: cover;
        }
    }

    .rewe-kauf-karte-inhalt {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 2rem;

        [class*="rewe-kauf-karte-"] {
            width: 100%;
            flex: 1 1 auto;
            color: var(--hl-clr);
        }
        .rewe-kauf-karte-titel {
            font-size: 28px;
        }
        details[open] .rewe-kauf-karte-beschreibung {
            display: flex;
            flex-direction: column;
            gap: 1.2em;
            margin-block-start: 1em;
            margin-block-end: 1.5em;

            summary {
                font-size: 16px;
            }
        }
        .rewe-kauf-karte-preis {
            font-size: 20px;
            font-weight: 700;
        }
        .qty-wrapper {
            background-color: var(--clr-white);
            border: 2px solid var(--rewe-rot);
            border-radius: 50px;
            padding: 5px 15px;
            gap: 0;

            .qty-btn, input {
                border: none;
                background-color: transparent;
                font-weight: 700;
                padding: 0;
                text-align: center;
            }
            input {
                width: 20px;
            }
        }
        .add-to-cart-btn {
            display: inline-flex;
            gap: 10px;
            justify-content: center;
            letter-spacing: 0.5px;
            padding: 0.5em 1em;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            background-color: var(--rewe-rot);
            border: 2px solid var(--rewe-rot);
            color: var(--clr-white);
            border-radius: 10px;

            &:hover {
                background-color: var(--clr-white);
                color: var(--rewe-rot);
            }
        }
    }
}
.nav-wrapper {
    margin-top: 20px;
    margin-bottom: 70px;
}


/** Warenkorb **/
.warenkorb-wrapper {
    margin: var(--section-space);
}
.rewe-warenkorb-toggle.rewe-warenkorb-widget-outer {
    --warenkorb-spalte: 350px;
    --warenkorb-gap: 20px;
    --rewe-warenkorb-bild: 72px;

    background-color: var(--card-bg-clr);

    

    width: min(var(--warenkorb-spalte), 100%);
    summary {
        width: min(var(--warenkorb-spalte), 100%);
        display: inline-flex;
        justify-content: center;
        svg.rewe-warenkorb-titel-icon {
            width: 30px;
            height: 30px;
        }
        span {
            font-size: 20px;
        }
        svg.rewe-warenkorb-titel-pfeil {
            width: 20px;
            height: 20px;
            font-size: 30px;
        }
    }
    &:has(.rewe-warenkorb-gruppe + .rewe-warenkorb-gruppe),
    &:has(.rewe-warenkorb-gruppe + .rewe-warenkorb-gruppe) > summary {
        width: min(calc(30px + var(--warenkorb-spalte) * 2 + var(--warenkorb-gap) + 30px), 100%);
    }
    .rewe-warenkorb-item-bild {
        border-radius: var(--border-radius-l);
    }
    .rewe-warenkorb-gruppe h4 {
        text-transform: uppercase;
        font-weight: 600;
        color: var(--color-text-1);
        font-size: 16px;
        text-align: start;
    }
    .rewe-warenkorb-item {
        padding: 15px 20px 15px 0;
        border-bottom: 2px solid var(--color-text-1)
    }
    .rewe-warenkorb-item-text {
        align-items: flex-start;
        font-size: 16px;
        font-weight: 400;
        color: var(--color-text);
        .rewe-warenkorb-item-name {
            font-weight: 700;
        }
        .rewe-warenkorb-item-qty-zahl {
            font-weight: 400;
        }
    }
}
.rewe-warenkorb-widget {
    width: max-content;

    .rewe-warenkorb-panel {
        display: inline-grid;
        grid-template-columns: min(var(--warenkorb-spalte), 100%);
        gap: var(--warenkorb-gap);
        padding: 20px 30px;

        .rewe-warenkorb-aktionen {
            grid-column: 1 / -1;
            width: 100%;
            order: 10;
        }
        &:has(> .rewe-warenkorb-gruppe + .rewe-warenkorb-gruppe) {
            grid-template-columns: repeat(2, var(--warenkorb-spalte));
        }
    }
    @media (max-width: 760px) {
        .rewe-warenkorb-panel,
        .rewe-warenkorb-panel:has(
            > .rewe-warenkorb-gruppe + .rewe-warenkorb-gruppe
        ) {
            grid-template-columns: minmax(0, var(--warenkorb-spalte));
        }
    }
}

/** Step 4 **/

.rewe-lieferart .radio-wrap.checkradio-wrap .for-radio {
    padding-bottom: 50px;
    padding-top: 50px;
    .rewe-lieferart-text {
        font-size: 19px;
        &::before {
            width: 30px;
            height: 30px;
            margin-top: 10px;
        }
    }

}
.kontakt-wrapper, .liefer-wrapper, .liefer-container, .abhol-container {
    width: 100%;
    border: var(--border-reg);
    border-radius: var(--border-radius-l);
    background-color: var(--bg-clr-reg);
    padding: 30px;
    margin: var(--section-space);


    & > div {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: start;

        & > div {
            width: 100%;

            .jet-form-builder-row {
                flex: 1 1 0;
            }
        }
    }

    h2, p, .info-box {
        margin-bottom: 20px;
    }
}

.liefer-wrapper {
    border: none;
    background-color: transparent;

    & > div {
        align-items: center;
    }

    fieldset {
        width: 100%;

        legend {
            display: none;
        }
    } 
    

    .jet-form-builder__fields-group.checkradio-wrap {
        flex-direction: row !important;

        & > .jet-form-builder__field-wrap.radio-wrap.checkradio-wrap {
            flex: 1 1 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .jet-form-builder__field-label {

                input, span {
                    width: 100%;
                }
            }
        }
    }
}

.info-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    column-gap: 20px;
    padding: 20px;
    border: var(--border-reg);
    border-radius: var(--border-radius-l);
    background-color: rgb(230 242 241 / 58%);

    div.wp-block-icon {
        width: auto;
        margin-left: 15px;

        svg {
            font-size: 40px;
            color: var(--color-text-1);
        }
    }

    p {
        margin-bottom: 0;
    }
}

:is(.liefer-container, .abhol-container) > div {
    display: flex;
    flex-direction: row;
    gap: 20px;

    .lieferdatum {
        display: grid;
        grid-template-areas: 
        'icon headline'
        'icon zeitraum';
        column-gap: 40px;

        div.wp-block-icon {
            grid-area: icon;
            display: flex;
            align-items: center;

            svg {
                font-size: 40px;
                width: 40px;
                height: auto;
                color: var(--rewe-rot);
            }
        }
        h3, .rewe-zeitraum {
            width: 100%;
        }
        h3 {
            grid-area: headline;
        }
        .rewe-zeitraum {
            grid-area: zeitraum;
        }
    }
}
.liefer-container hr {
    border-top: 1px solid #dddedf;
}

fieldset.field-type-checkbox-field {
    border: none;
    /* background-color: red; */
    label {
        color: var(--color-text);
    }
}

.lieferdatum-wrapper {
    flex: 2 1 0 !important;
    min-width: 340px;
}

.lieferkosten-wrapper {
    flex: 1 1 0 !important;
    min-width: 340px;
    background-color: var(--clean-white);
    border: var(--border-reg);
    border-radius: var(--border-radius-l);
    padding: 30px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;

    

    .lieferkosten-output {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }
    hr {
        width: 100%;
        height: 2px;
    }

    .zusatz-info {
        font-size: 12px;
        color: var(--color-text-1);
        padding-top: 20px;
    }
}

:is(.lieferkosten-wrapper, .lieferdatum) h3 {
    font-size: 19px;
}
.lieferdatum .rewe-zeitraum-wert {
    font-size: 20px;
    font-weight: 400;
}
.lieferkosten-wrapper p {
    font-size: 16px;
    font-weight: 400;
}

.abhol-container {
    gap: 20px;

    > * {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }

    :is(.abholzeitraum, .abholadresse) {
        background-color: var(--clean-white);
        border: var(--border-reg);
        border-radius: var(--border-radius-l);
        padding: 30px;
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        h3 {
            font-size: 19px;
        }
        p, .rewe-zeitraum-wert {
            font-size: 20px;
            font-weight: 400;
        }
    }
    .abholzeitraum {
        display: flex;

        .wp-block-icon {
            flex: 1 1 0;
            svg {
                font-size: 40px;
                color: var(--rewe-rot);
            }
        }
        .abholtag, .abholzeit {
            flex: 7 1 0;
        }
        
    }
    .abholadresse {
        display: flex;
        padding-bottom: 10px;
        padding-top: 10px;

        > * {
            flex: 1 1 0;
            margin: 0 !important;
        }
    }
}

.rechtliche-info {}

/******************************************************************************/

/** Step 1 **/
.rewe-nur-step-1 {

    .container .brxe-button {
        border: 2px solid var(--clr-white);
        background-color: var(--clr-white);
        color: var(--rewe-rot);

        &:hover {
            background-color: var(--rewe-rot);
            color: var(--clr-white);
        }
    }

    .brxe-button {
        border: 2px solid var(--rewe-rot);
        background-color: var(--rewe-rot);
        color: var(--clr-white);
        font-size: 16px;
        font-weight: 600;
        border-radius: 10px;
        transition: .375s all ease-in-out;

        svg {
            fill: var(--clr-white);
            transition: .375s all ease-in-out;
        }
        &:hover {
            background-color: var(--clr-white);
            color: var(--rewe-rot);

            svg {
                fill: var(--rewe-rot);
            }
        }
    }
}
.step-1-hero {
    background-image: url(/wp-content/uploads/2026/09/Header-Kukki-Shop.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    &::before {
        background-image: linear-gradient(90deg, rgb(59 50 43 / 50%), rgb(59 50 43 / 0%));
        position: absolute;
        content: "";
        inset: 0;
        pointer-events: none;
    }

    .container {
        margin: 200px auto 200px 0;
        width: min(500px, 100%);
        row-gap: 30px;
        z-index: 1;

        .brxe-text-basic {
            font-size: 20px;
            margin-block: 0 1.2em;

            &:nth-of-type(1) {
                --clr-p-1: #f07f85;
                color: var(--clr-p-1);
            }
            &:nth-of-type(2) {
                color: var(--clr-white);
            }
        }

        h1 {
            font-size: 80px;
            line-height: 1.2;
            color: var(--clr-white);
        }
    }
}
.step-1-intro {
    width: min(600px, 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 50px;

    h2, .brxe-text-basic {
        text-align: center;
    }
    h2 {
        font-size: 38px;
        color: var(--hl-clr);
        line-height: 1.4;

        span {
            font-size: 28px;
        }
    }
    .brxe-text-basic {
        font-size: 16px;
    }
}

.step-1-outro {
    width: min(1140px, 100%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
    margin-bottom: 70px;

    .brxe-container:nth-of-type(1), .brxe-container:nth-of-type(3) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .brxe-container:nth-of-type(2) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 20px;
        margin-top: 20px;
        margin-bottom: 50px;

        .p-img-wrapper:nth-of-type(1){
            order: 4;
            grid-column: span 2 / span 2;
            grid-row: span 2 / span 2;
            grid-column-start: 3;
            grid-row-start: 2;
        }
        .p-img-wrapper:nth-of-type(2){
            order: 3;
            grid-column-start: 4;
            grid-row-start: 1;
        }
        .p-img-wrapper:nth-of-type(3){
            order: 2;
            grid-column-start: 3;
            grid-row-start: 1;
        }
        .p-img-wrapper:nth-of-type(4){
            order: 1;
            grid-column: span 2 / span 2;
            grid-row: span 2 / span 2;
            grid-column-start: 1;
            grid-row-start: 1;
        }
    }
}

/******************************************************************************/

/** Step 4 **/
.iti input[type="tel"]::placeholder {
       color: transparent;
   }

/******************************************************************************/

/** Step 5 **/
.step-5-intro {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center !important;
    row-gap: 30px;
    margin-bottom: 30px;
}
.rewe-step-5 .nav-wrapper-top {
    margin-top: 70px;
}
.step-5-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;

    .left {
        display: flex;
        flex: 3 1 0;
        max-width: 770px;

        > * {
            display: flex;
            align-items: flex-start;
            width: 100%;

            > * {
                width: 100%;
                align-items: flex-start;
                width: 100%;
            }

            .rewe-uebersicht {
                flex: 1 1 0;

                .rewe-ue-block-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 30px;
                }
                svg.rewe-icon {
                    height: 30px;
                    width: auto;
                }
            }
        }
    }
    .right {
        display: flex;
        flex: 1 1 0;
        max-width: 330px;
    }

    h3 {
        font-size: 19px;
        color: var(--color-text);
    }
}

.agb-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 70px auto 50px;
}
.step-5-container {
    background-color: var(--clean-white);
    border: var(--border-reg);
    border-radius: var(--border-radius-l);
    padding: 30px;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;

    &.kosten > *, &.kaution > * {
        width: 100%;
    }
}

/******************************************************************************/

/** Step 6 **/

.tel-box svg path {
    fill: inherit !important;
}

.step-6.nav-wrapper .brxe-button {
    border: 2px solid var(--rewe-rot);
    background-color: var(--rewe-rot);
    color: var(--clr-white);
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    transition: .375s all ease-in-out;

    &:hover {
        background-color: var(--clr-white);
        color: var(--rewe-rot);
    }
}

.kosten-wrapper {}