﻿section.cbf-basket {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 44px 15px;
}

.cbf-basket .container-fluid {
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
}

.cbf-basket h1 {
    margin: 0 0 44px 0 !important;
    font-family: Montserrat !important;
    font-weight: 900 !important;
    line-height: 85px !important;
    text-align: center;
}

.cbf-basket .login-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 44px auto;
    border-radius: var(--cbf-border-radius);
    background: var(--cbf-purple-200);
    min-height: 129px;
    padding: 10px;
}

.cbf-basket .login-box p {
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 23px;
    font-weight: 700;
}

.cbf-basket .login-box a {
    text-align: center !important;
    font-family: "Roboto Condensed" !important;
    font-size: 23px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    text-decoration: underline !important;
}

.cbf-basket .items {
    display: flex;
    flex-direction: column;
    border-radius: var(--cbf-border-radius);
    border: 1px solid #808080;
    background: var(--cbf-white-1000);
    margin-bottom: 44px;
}

.cbf-basket .items .item {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.cbf-basket .items .item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cbf-basket .items .item:not(:last-child) {
    border-bottom: 1px solid #808080;
}

.cbf-basket .items .item .details {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.cbf-basket .items .item .details svg path {
    fill: #9844BA;
}

.cbf-basket .items .item .details img {
    width: 100px;
    height: 100px;
    border-radius: var(--cbf-border-radius);
}

.cbf-basket .items .item .details .title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cbf-basket .items .item .details .title h3 {
    margin: 0;
}

.cbf-basket .items .item .details .title h3[data-toggle=collapse].collapsed:after {
    content: '';
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2213%22%20viewBox%3D%220%200%2016%2013%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M9.73205%2012C8.96225%2013.3333%207.03775%2013.3333%206.26795%2012L1.0718%203C0.301995%201.66667%201.26424%201.46309e-06%202.80385%201.32849e-06L13.1961%204.19966e-07C14.7358%202.8537e-07%2015.698%201.66667%2014.9282%203L9.73205%2012Z%22%20fill%3D%22%239844BA%22%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-inline: 10px;
    background-size: contain;
    transform: rotateX(0deg);
}

.cbf-basket .items .item .details .title h3[data-toggle=collapse]:after {
    content: '';
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2213%22%20viewBox%3D%220%200%2016%2013%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M9.73205%2012C8.96225%2013.3333%207.03775%2013.3333%206.26795%2012L1.0718%203C0.301995%201.66667%201.26424%201.46309e-06%202.80385%201.32849e-06L13.1961%204.19966e-07C14.7358%202.8537e-07%2015.698%201.66667%2014.9282%203L9.73205%2012Z%22%20fill%3D%22%239844BA%22%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    transform: rotateX(180deg);
    margin-inline: 10px;
    background-size: contain;
    transition: transform linear 0.2s;
}

.cbf-basket  .items .item .details .title .action {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.cbf-basket .items .item .footer {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 30px;
}

.cbf-basket .items .item.gift-item .footer .counter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.cbf-basket .items .item.gift-item .footer .counter button {
    color: var(--cbf-black-1000) !important;
    text-align: center !important;
    font-family: Roboto !important;
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 30px !important;
    background: transparent;
    border: none;
}

.cbf-basket .items .item.gift-item .footer .counter .gift-count {
    width: 74px;
    height: 59px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    border-radius: var(--cbf-border-radius);
    text-align: center;
}

.cbf-basket .items .item .footer .details {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 185px;
}

.cbf-basket .items .item .footer .details h3 {
    margin: 0!important;
    font-size: 27px !important;
    border-bottom: 1px solid black;
    text-align: right;
    padding: 10px;
}

.cbf-basket .items .item .footer .details p {
    margin: 0!important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
}

.cbf-basket .items .item .footer .details p a {
    width: 24px;
    height: 24px;
}

.cbf-basket .items .item .footer .delete {
    margin-top: 15px;
}

.cbf-basket .items .item.donation-item .footer .details input,
.cbf-basket .items .item.child-gift-item .footer .details input {
    padding: 10px;
    border-radius: var(--cbf-border-radius);
    border: 1px solid var(--cbf-black-1000);
    color: var(--cbf-black-1000);
    text-align: right;
    font-family: Roboto;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.cbf-basket .items .item.child-item .details img {
    border-radius: 50%;
}

.cbf-basket .basket-box .basket-total {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
}

.cbf-basket .basket-box .basket-total .transaction-fee {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.cbf-basket .basket-box .basket-total .transaction-fee .checkbox-transactionfee {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--cbf-black-1000);
    flex-shrink: 0;
}

.cbf-basket .basket-box .basket-total .transaction-fee .checkbox-transactionfee:has(+#chkTransactionFee:checked) { 
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.2292%2037.8219C21.6708%2037.8219%2024.0885%2037.341%2026.3442%2036.4066C28.5999%2035.4722%2030.6496%2034.1027%2032.376%2032.3763C34.1025%2030.6498%2035.472%2028.6002%2036.4064%2026.3444C37.3407%2024.0887%2037.8216%2021.671%2037.8216%2019.2294C37.8216%2016.7878%2037.3407%2014.3701%2036.4064%2012.1144C35.472%209.85865%2034.1025%207.80904%2032.376%206.08257C30.6496%204.3561%2028.5999%202.98659%2026.3442%202.05223C24.0885%201.11787%2021.6708%200.636963%2019.2292%200.636963C14.2981%200.636963%209.56908%202.5958%206.08232%206.08257C2.59556%209.56933%200.636719%2014.2984%200.636719%2019.2294C0.636719%2024.1604%202.59556%2028.8895%206.08232%2032.3763C9.56908%2035.863%2014.2981%2037.8219%2019.2292%2037.8219ZM18.7499%2026.749L29.079%2014.3541L25.9059%2011.7098L17.0229%2022.3674L12.4264%2017.7689L9.50532%2020.69L15.7028%2026.8874L17.3018%2028.4864L18.7499%2026.749Z%22%20fill%3D%22%2332B081%22%2F%3E%0A%3C%2Fsvg%3E'); 
    background-position: center;
    border: 0 !important;
}

.cbf-basket .basket-box .basket-total .transaction-fee #chkTransactionFee {
    width: 38px;
    height: 38px;
    /*border: 1px solid #808080;*/
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    margin: 0 !important;
    opacity: 0;
    position: absolute;
    left: 0;
}

.cbf-basket .basket-box .basket-total .transaction-fee #chkTransactionFee:checked {
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: #32B081;
    clip-path: circle(50% at 50% 50%);
}

.cbf-basket .basket-box .basket-total .transaction-fee label {
    margin: 0 !important;
    color: var(--cbf-black-1000) !important;
    text-align: right !important;
    font-family: Roboto !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 30px !important;
}

.cbf-basket .basket-box .basket-total hr {
    border: 1px solid #808080;
    margin: 0 !important;
}

.cbf-basket .basket-box .basket-total .totals {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cbf-basket .basket-box .basket-total h3 {
    color: var(--cbf-black-100) !important;
    text-align: right !important;
    font-family: Roboto !important;
    font-size: 27px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /*gap: 100px;*/
    margin: 0 !important;
    /*padding-right: 65px;*/
}

.cbf-basket .basket-box .basket-total h3 span {
    margin-left: 100px;
}

.cbf-basket .basket-box .basket-total h5 {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /*gap: 100px;*/
    margin: 0 !important;
    /*padding-right: 65px;*/
}

.cbf-basket .basket-box .basket-total h5 span {
    margin-left: 100px;
    color: var(--cbf-black-1000) !important;
    text-align: right !important;
    font-family: Roboto !important;
    font-size: 27px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
}

.cbf-basket .basket-box .basket-actions {
    max-width: 857px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 70px;
}

.cbf-basket .basket-box .basket-actions a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: var(--cbf-border-radius);
    border: 3px solid var(--cbf-purple-1000);
    color: var(--cbf-purple-1000) !important;
    text-align: center !important;
    font-family: "Roboto Condensed" !important;
    font-size: 23px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    white-space: nowrap;
}

.cbf-basket .basket-box .basket-actions .review-order {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.cbf-basket .basket-box .basket-actions .review-order .btn.btn-primary {
    font-style: normal !important;
    line-height: normal !important;
}

.cbf-basket .basket-box .basket-actions .review-order .btn-primary {
    color: #000 !important;
    text-align: center !important;
    font-family: 'Roboto Condensed' !important;
    font-size: 23px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 0 !important;
    outline: 0 !important;
}

.cbf-basket .basket-box .basket-actions .review-order .btn-primary:hover {
    background: var(--cbf-gold-800) !important;
}

.cbf-basket .basket-box .basket-actions .review-order .btn-primary:active {
    background: var(--cbf-gold-1200) !important;
}

.cbf-basket .basket-box .items .child-gifts:not(:last-child) {
    border-bottom: 1px solid #808080;
}

.cbf-basket .basket-box .items .child-gifts .item {
    /*padding-inline: 40px;*/
}

.cbf-basket .child-designated-gift-item:has(.title h3:is(:not(.collapsed))) .footer .details {
    display: none;
}

/*.cbf-basket .child-designated-gift-item:has(h3:is(.collapsed)) {
    outline: 1px solid red;
}*/

@media (min-width: 300px) and (max-width: 1000px) {

    .cbf-basket .items .item {
        gap: 60px;
    }

    .cbf-basket .items .item .footer {
        justify-content: flex-end;
    }

    .cbf-basket .basket-box .basket-total p {
        gap: 50px;
    }

}

@media (min-width: 1000px) {

    .cbf-basket .basket-box {
        max-width: 963px;
        margin: 0 auto;
    }

    .cbf-basket .items .item {
        flex-direction: row;
        justify-content: space-between;
    }

    .cbf-basket .items .item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .cbf-basket .items .item .details {
        flex-direction: row;
    }

    .cbf-basket .basket-box .basket-actions {
        flex-direction: row;
        gap: 300px;
    }

    .cbf-basket .basket-box .basket-total h3 {
        padding-right: 65px;
    }

    .cbf-basket .basket-box .basket-total h5 {
        padding-right: 65px;
    }

}