/**
 * Even if we create multiple shop theme in futur, cart and checkout global
 * layout should remain the same. So we create a separate file.
 */

/* Consolidated cart and checkout page styles */
.cart-page main,
.checkout-page main {
    & section {
        display: grid;
    }

    & h1 {
        text-align: center;
    }

    h2 a {
        font-size: var(--root-font-size);
    }
}

.contact-zone {
    .contact-card {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-sm);
    }

    .contact-line {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        @media (min-width: 768px) {
            flex-direction: row;
            justify-content: space-between;
        }
    }

    .contact-line .label {
        margin-right: var(--spacer-default);
        min-width: 140px;
    }

    .contact-line .value {
        color: var(--primary-color);
    }
}

.delivery-zone {
    form table {
        margin-bottom: var(--spacer-default);
    }
    .linkalt {
        width: 100%;
    }

    .read-only .shipping-option {
        border-color: transparent;
        cursor: default;
        pointer-events: none;
        border-radius: var(--default-radius);
    }
    .read-only .shipping-content {
        padding-left: 0;
    }

    .shipping-options {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-default);
        margin-bottom: 2rem;
    }

    .shipping-option {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        gap: var(--spacer-default);
        padding: var(--spacer-default);
        box-shadow: 0 0 0 0 transparent;
        transition:
            box-shadow 0.2s ease,
            border-color 0.2s ease;

        border: 1px solid var(--text-color);
        border-radius: var(--default-radius);
        cursor: pointer;
        position: relative;
    }

    .shipping-radio {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .shipping-options.read-only .shipping-option,
    .shipping-option:has(.shipping-radio:checked),
    .shipping-radio:checked {
        box-shadow: 0 0 0 2px var(--primary-color);
        border-color: var(--primary-color);
    }

    .shipping-content {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-xs);
    }

    .shipping-title {
        font-weight: bold;
    }

    .shipping-description {
        font-size: var(--spacer-default);
    }

    .shipping-price {
        font-weight: bold;
    }
}

.cart-item {
    border-radius: var(--default-radius);
    border: 1px solid var(--text-color);
    display: flex;
    flex-direction: column;
    gap: var(--spacer-default);
    padding: var(--spacer-default);
}

.cart-items-summary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;

    width: 100%;
}

.cart-page main {
    & .empty-cart {
        text-align: center;
    }
    .cart-item-header {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .item-image {
        width: 100px;
        height: auto;
        flex-shrink: 0;

        a {
            display: block;
        }

        img {
            display: block;
            width: 100%;
            border-radius: var(--default-radius);
            object-fit: cover;
        }

        .item-caption {
            display: none;
        }
    }

    .item-name {
        font-size: var(--spacer-default);
        font-weight: 600;
    }

    .variant {
        font-size: var(--spacer-default);
    }

    .item-details-row {
        display: flex;
        justify-content: space-between;
        gap: var(--spacer-sm);
        flex-wrap: wrap;
    }

    .item-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: var(--spacer-default);

        @include respond-from(tablet) {
            min-width: 100px;
        }
    }

    .label {
        margin-bottom: var(--spacer-xs);
    }

    .qty-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .qty-controls i {
        font-style: normal;
        font-weight: bold;
        width: 2ch;
        text-align: center;
    }

    /* Price Summary */
    .cart-price-summary {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;

    &.total {
        font-weight: bold;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--text-color);
    }
}

.checkout-page main {
    & h2 {
        display: flex;
        gap: 20px;
        flex-direction: column;

        @media (min-width: 768px) {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
    }

    & .item-meta {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
    }
}

.payment-page {
    .payment-gateways {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-xl);
        margin-top: 2rem;
    }

    .payment-description,
    .payment-stop {
        text-align: center;
    }

    .payment-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacer-default);
        padding: var(--spacer-default);
        border-radius: var(--default-radius);
        border: 2px solid var(--primary-color);
        flex: 1;

        .icon {
            width: 48px;
            height: 48px;
            img {
                width: 100%;
                height: auto;
            }
        }

        .info {
            flex: 1;
            h3 {
                margin-top: 0;
            }
        }
    }

    .success-payment,
    .success-message {
        padding: $spacer-default;
        border-radius: var(--default-radius);
    }

    .success-message {
        margin-top: var(--spacer-default);
        margin-bottom: var(--spacer-default);
    }

    .success-message {
        text-align: center;
    }
    .success-contact,
    .success-cart h2 {
        text-align: center;
    }

    .success-contact {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-default);
        flex-wrap: nowrap;
    }
}
.icon-payment::before {
    background-color: var(--primary-color);
}

/* // We use this for icons set(sf) https://tabler.io/ */
/* // svg to background : */
/* // https://yoksel.github.io/url-encoder/ */
/* // https://www.svgbackgrounds.com/tools/svg-to-css/ */

.icon-paypal::before,
.icon-paypal::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-brand-paypal'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 13l2.5 0c2.5 0 5 -2.5 5 -5c0 -3 -1.9 -5 -5 -5h-5.5c-.5 0 -1 .5 -1 1l-2 14c0 .5 .5 1 1 1h2.8l1.2 -5c.1 -.6 .4 -1 1 -1zm7.5 -5.8c1.7 1 2.5 2.8 2.5 4.8c0 2.5 -2.5 4.5 -5 4.5h-2.6l-.6 3.6a1 1 0 0 1 -1 .8l-2.7 0a.5 .5 0 0 1 -.5 -.6l.2 -1.4' /%3E%3C/svg%3E")
        no-repeat 50% 50%;
}

.icon-stripe::before,
.icon-stripe::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-brand-stripe'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12.5 2c2.45 0 4.543 .44 5.928 1.096a1 1 0 0 1 .564 1.028l-.5 4a1 1 0 0 1 -1.429 .776c-1.047 -.509 -2.618 -.823 -4.168 -.823q -.206 .001 -.332 .026l.028 .024l.07 .047c.314 .207 .832 .437 1.672 .746c3.824 1.351 5.667 3.24 5.667 6.58c0 2.13 -.758 3.732 -2.295 4.924c-1.293 1.023 -3.422 1.576 -5.705 1.576c-2.4 0 -4.72 -.644 -6.486 -1.626a1 1 0 0 1 -.506 -.998l.5 -4a1 1 0 0 1 1.494 -.741c1.292 .75 3.64 1.365 4.998 1.365c.39 0 .704 -.147 .87 -.295l.035 -.035l-.09 -.035c-.167 -.06 -1.583 -.493 -2.153 -.694c-3.626 -1.304 -5.662 -3.609 -5.662 -6.941c0 -1.887 .882 -3.563 2.37 -4.777c1.22 -.987 2.517 -1.223 5.13 -1.223' /%3E%3C/svg%3E")
        no-repeat 50% 50%;
}

.icon-sumUp::before,
.icon-sumUp::after {
    mask: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns:x='ns_extend;' xmlns:i='ns_ai;' xmlns:graph='ns_graphs;' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 129.1 128' style='enable-background:new 0 0 129.1 128;' xml:space='preserve'%3E%3Cmetadata%3E%3Csfw xmlns='ns_sfw;'%3E%3Cslices%3E%3C/slices%3E%3CsliceSourceBounds bottomLeftOrigin='true' height='128' width='129.1' x='0' y='0'%3E%3C/sliceSourceBounds%3E%3C/sfw%3E%3C/metadata%3E%3Cpath d='M119.9,0H9.2C4.1,0,0,4.1,0,9.1v109.7c0,5,4.1,9.1,9.2,9.1h110.7c5.1,0,9.2-4.1,9.2-9.1V9.1C129.1,4.1,125,0,119.9,0z M81.1,96.4c-11.3,11.2-29.3,11.7-41.1,1.5c0,0-0.1-0.1-0.2-0.2c-0.7-0.7-0.7-1.9,0-2.6l40-39.7c0.7-0.7,1.9-0.7,2.6,0 C92.9,67.1,92.4,85.1,81.1,96.4z M89.4,32.9l-40,39.7c-0.7,0.7-1.9,0.7-2.6,0c-10.5-11.7-10.1-29.7,1.3-41 C59.3,20.5,77.3,20,89.2,30.2c0,0,0.1,0.1,0.2,0.2C90.1,31,90.1,32.2,89.4,32.9z'%3E%3C/path%3E%3C/svg%3E")
        no-repeat 50% 50%;
}

.icon-payment::before {
    width: 54px;
    height: 34px;
    display: inline-block;
    content: "";
    mask-size: 1.8rem;
    vertical-align: sub;
    background-color: $black;
}