/* MY BASKET HTML */

.my-basket-section{ width: 100%;background-color: var(--main-blue-bg);}
.my-basket-section > div{ width: 100%; min-height: calc(100vh - 61px); max-width: 1200px; margin: 0 auto; padding: 20px 10px 0;}
.my-basket-section > div > h3{ font-size: 25px; font-weight: 300; margin-bottom: 20px;}
.my-basket-section > div > h3 a{ display: none;}
.my-basket-section > div > div{ display: flex; gap: 20px;}
.my-basket-section > div > div > .products-in-basket{ width: 100%; display: flex; flex-direction: column; gap: 20px; margin-bottom: 80px;}
.my-basket-section > div > div > .products-in-basket .seller-products{ border-radius: 3px; overflow: hidden; border: 1px solid #e1e1e1;}
.my-basket-section > div > div > .products-in-basket .seller-products .header{ position: relative; background-color: #f8f8f8; height: 50px; display: flex; align-items: center; padding-left: 20px; border-bottom: 1px solid var(--main-blue-border);}
.my-basket-section > div > div > .products-in-basket .seller-products .header .check-all-seller-product{ position: relative; width: 16px; height: 16px; border-radius: 2px; outline: 1px solid #7c7c7c; background-color: var(--white-bg); margin-right: 15px; cursor: pointer;}
.my-basket-section > div > div > .products-in-basket .seller-products .header .check-all-seller-product.chckd::before{ content: '\f00c'; display: flex; align-items: center; justify-content: center; position: absolute; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; width: 100%; height: 100%; background-color: var(--main-blue-txt); color: var(--white-txt); top: 0; left: 0; outline: 1px solid var(--main-blue-txt); border-radius: 2px; font-size: 13px;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > span{ color: #919191; font-size: 14px; font-weight: 300;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > a{ text-decoration: none; margin-left: 5px;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > a .seller-name{ color: var(--black-txt); font-weight: 600; font-size: 14px;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > a .store-rating{ padding: 1px 5px; border-radius: 3px; margin-left: 6px; color: var(--white-txt); font-size: 11px;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > a i{ font-size: 13px;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > .free-cargo{ position: absolute; right: 0; height: 100%; padding: 0 30px; background-color: rgb(171, 255, 171); display: flex; align-items: center;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > .free-cargo i{ color: rgb(0, 141, 0); margin-right: 3px;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > .free-cargo span{ color: rgb(0, 12, 0); font-weight: 600; font-size: 13px;}
.my-basket-section > div > div > .products-in-basket .seller-products .header > {}
.my-basket-section > div > div > .products-in-basket .seller-products .body{}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div{ display: flex; align-items: center; background-color: var(--white-bg);}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div > span{ display: none;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div:not(div:last-child){ border-bottom: 1px solid var(--main-blue-border);}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .check-area{ display: flex; align-items: center; justify-content: flex-end; min-width: 37px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .check-area .check-seller-product{ position: relative; width: 16px; height: 16px; border-radius: 2px; outline: 1px solid #7c7c7c; background-color: var(--white-bg); cursor: pointer;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .check-area .check-seller-product.chckd::before{ content: '\f00c'; display: flex; align-items: center; justify-content: center; position: absolute; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; width: 100%; height: 100%; background-color: var(--main-blue-txt); color: var(--white-txt); top: 0; left: 0; outline: 1px solid var(--main-blue-txt); border-radius: 2px; font-size: 13px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-img{ width: 43px; height: 64px; min-width: 43px; min-height: 64px; margin-left: 12px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-img img{ width: 100%;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area{ width: 100%; display: flex;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area{ display: flex; align-items: center; gap: 10px; padding: 20px 15px 20px 10px; text-decoration: none; width: 100%;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail{ display: flex; flex-direction: column; /*width: calc(100% - 43px);*/}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p{ display: flex; width: 100%; height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; font-size: 14px; color: var(--black-txt);}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p b{ white-space: nowrap;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p span{ white-space: nowrap; width: 100%; width: 100%; background-color: var(--main-blue-txt);}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > div{ font-size: 13px; color: #7c7c7c;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > div b{ color: var(--black-txt); font-size: 12px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control{ display: flex;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area{ display: flex; align-items: center; justify-content: center; min-width: 136px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div{ display: flex; width: 150px; border-radius: 5px; width: fit-content; outline: 1px solid #e0e0e0; position: relative;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div > span{ position: absolute; font-size: 10px; color: #8d0000; font-weight: 700; top: -6px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; opacity: 0; transition: all .1s ease-in  ;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div > span.full{ opacity: 1; top: -16px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div button{ width: 25px; height: 35px; pointer-events: none; background-color: #f9f9f9; border: none; font-size: 17px; color: #d0d0d0; transition: all .1s;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div button.active{ color: var(--main-blue-txt); pointer-events: all;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div button.active:hover{ background-color: #f1f1f1; cursor: pointer;}
/* .my-basket-section > div > div > .products-in-basket .seller-products .body > div .count-area > div button.active:hover{ background-color: var(--main-blue-txt); color: var(--white-txt); cursor: pointer;} */
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div .down{ border-right: 1px solid #e0e0e0; font-size: 14px; padding-top: 2px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div .down i{ pointer-events: none;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div .up{ border-left: 1px solid #e8e8e8;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div input{ width: 45px; height: 35px; border: none; text-align: center; padding: 0 6px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div input::-webkit-outer-spin-button,.my-basket-section > div > div > .products-in-basket .seller-products .body > div .count-area > div input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div input[type=number] { -moz-appearance: textfield;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .price-area{ color: var(--main-blue-txt); font-weight: 500; font-size: 15px; display: flex; align-items: center; justify-content: center; min-width: 102px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area{ display: flex; align-items: center; justify-content: center; min-width: 51px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area span{ color: rgb(151, 0, 0); font-size: 18px;}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area span:hover{ animation: shake 1s normal 1; cursor: pointer;}

.my-basket-section > div > div > .products-in-basket .empty-basket{ width: 100%; padding: 60px 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--white-bg); border-radius: 3px; border: 1px solid var(--main-blue-border);}
.my-basket-section > div > div > .products-in-basket .empty-basket > div{ width: 55px; height: 55px; margin-bottom: 10px; border-radius: 50%; border: 4px solid var(--main-blue-txt); color: var(--main-blue-txt); padding: 10px 0 0 11px; font-size: 20px;}
.my-basket-section > div > div > .products-in-basket .empty-basket > b{  font-size: 15px; margin-bottom: 5px; color: var(--main-blue-txt);}
.my-basket-section > div > div > .products-in-basket .empty-basket > span{ font-size: 13px; color: var(--main-blue-txt); text-align: center;}
.my-basket-section > div > div > .products-in-basket .empty-basket > a{ font-size: 12px; font-weight: 700; margin-top: 10px; color: var(--main-red); text-align: center; transition: all .1s;}
.my-basket-section > div > div > .products-in-basket .empty-basket > a:hover{ opacity: .8;}

@keyframes shake{
    0%{ transform: rotate(-15deg);}
    25%{ transform: rotate(15deg);}
    50%{ transform: rotate(-15deg);}
    75%{ transform: rotate(15deg);}
    100%{ transform: rotate(0deg);}
}

/* .my-basket-section > div > div > .products-in-basket .seller-products .body > div > div:nth-child(odd){background-color: rgba(102, 51, 153, 0.118);}
.my-basket-section > div > div > .products-in-basket .seller-products .body > div > div:nth-child(even){background-color: rgba(0, 0, 0, 0.396);} */
/* .my-basket-section > div > div > .products-in-basket .seller-products .body > div > div{ padding: 20px 0;} */

.my-basket-section > div > div .basket-price{ width: 235px; min-width: 235px; height: fit-content; position: sticky; top: 20px;}
.my-basket-section > div > div .basket-price > div{ position: relative; overflow: hidden; border: 1px solid var(--main-blue-border); border-radius: 3px; padding: 20px 15px; background-color: rgba(var(--white-o), 1); transition: all .3s;}
.my-basket-section > div > div .basket-price > div h4{ font-weight: 100; font-size: 20px; margin-bottom: 10px;}
.my-basket-section > div > div .basket-price > div .products-price{ }
.my-basket-section > div > div .basket-price > div .products-price > div{ display: grid; grid-template-columns: 1fr 1fr; font-size: 12px; padding: 3px 0;}
.my-basket-section > div > div .basket-price > div .products-price > div span{ text-align: end; font-size: 13px; font-weight: 500;}
.my-basket-section > div > div .basket-price > div hr{ margin: 10px 0; border-top: .1px solid rgb(187, 187, 187);}
.my-basket-section > div > div .basket-price > div .total-price{ display: grid; grid-template-columns: 1fr 1fr;}
.my-basket-section > div > div .basket-price > div .total-price b{ font-size: 14px;}
.my-basket-section > div > div .basket-price > div .total-price span{ text-align: end; color: var(--main-blue-txt); font-weight: 700; font-size: 16px;}
.my-basket-section > div > div .basket-price > .btn{ position: relative; overflow: hidden; width: 100%; height: 40px; transition: all .3s; font-size: 15px; border-radius: 3px; font-weight: 600; margin-top: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;}

.my-basket-section > div .mobile-order-summary-container{ display: none; width: 100%; height: 80px; position: fixed; bottom: 0; left: 0; z-index: 10;}
.my-basket-section > div .mobile-order-summary-container .mobile-order-summary{ display: flex; width: 100%; height: 80px; background-color: var(--white-bg); border-top: 1px solid var(--main-blue-border); align-items: center; justify-content: space-between; padding: 0 10px 0 15px; flex-direction: row;}
.my-basket-section > div .mobile-order-summary-container .mobile-order-summary > button{ width: 200px; height: 45px; background-color: var(--main-blue-txt); border: 2px solid var(--main-blue-txt); color: var(--white-txt); font-size: 15px; font-weight: 600; border: 1px solid var(--main-blue-txt); border-radius: 3px; transition: all .2s;}
.my-basket-section > div .mobile-order-summary-container .mobile-order-summary > button:hover{ background-color: var(--white-bg); color: var(--main-blue-txt);}
.my-basket-section > div .mobile-order-summary-container .mobile-order-summary > .order-price{ display: flex; align-items: center; gap: 10px; z-index: 10;}
.my-basket-section > div .mobile-order-summary-container .mobile-order-summary > .order-price > span{ color: var(--main-blue-txt); transition: all .2s; display: inline-block;}
.my-basket-section > div .mobile-order-summary-container .mobile-order-summary > .order-price > div{ display: flex; flex-direction: column;}
.my-basket-section > div .mobile-order-summary-container .mobile-order-summary > .order-price > div h5{ font-size: 15px; font-weight: 400; color: #4e4e4e;}
.my-basket-section > div .mobile-order-summary-container .mobile-order-summary > .order-price > div > span{ color: var(--main-blue-txt); font-weight: 600;}
.my-basket-section > div .mobile-order-summary-container .order-detail-area{ height: calc(100vh - 80px); width: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(.5px); position: absolute; top: calc(-100vh + 80px); left: 0; opacity: 0; pointer-events: none; transition: all .2s ease-in; z-index: -1;}
.my-basket-section > div .mobile-order-summary-container .order-detail-area .order-detail{ width: 100%; background-color: var(--white-bg); position: absolute; bottom: 0; padding: 15px 10px; transform: translateY(100%); transition: all .2s ease; z-index: 1;}
.my-basket-section > div .mobile-order-summary-container .order-detail-area .order-detail > div{ display: grid; grid-template-columns: 1fr 1fr; font-size: 15px; padding: 3px 0;}
.my-basket-section > div .mobile-order-summary-container .order-detail-area .order-detail > div span{ text-align: end; font-size: 16px; font-weight: 700;}

.my-basket-section > div .mobile-order-summary-container.open .mobile-order-summary > .order-price > span{ transform: rotate(-180deg);}
.my-basket-section > div .mobile-order-summary-container.open .order-detail-area{ opacity: 1; pointer-events: all;}
.my-basket-section > div .mobile-order-summary-container.open .order-detail-area .order-detail{ transform: translateY(0);}


/* .my-basket-section > div > div .basket-price > button::after{ content: 'Sepeti Onayla'; position: absolute; color: var(--white-txt); top: 0; left: 0; transform: translateY(200%) rotate(20deg); border-radius: 3px; display: inline-block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #04b622;  transition: all .3s ease;}
.my-basket-section > div > div .basket-price > button:hover::after{ transform: translateY(0) rotate(0deg)}
.my-basket-section > div > div .basket-price > button:hover::before{ transform: translateY(-200%) rotate(-20deg)} */


@media screen and (max-width: 768px) {
    .my-basket-section > div .mobile-order-summary-container{ display: block;}

    .my-basket-section > div{ padding: 0 0 50px; margin-top: 0; height: 100vh; overflow-y: auto; background-color: #efefef;}
    .navbar .navbar-container .navbar-detail{ display: none;}
    .my-basket-section > div > h3{ background-color: var(--white-bg); border-bottom: 1px solid #d0d0d0; text-align: center; font-size: 16px; font-weight: 600; position: relative; padding: 10px 0;}
    .my-basket-section > div > h3 a{ display: inline-block; position: absolute; left: 10px; font-size: 23px; top: 50%; transform: translateY(-50%); color: var(--black-txt);}
    .basket-price{ display: none;}
    .my-basket-section > div > div > .products-in-basket .seller-products .header{ background-color: var(--white-bg);}
    .my-basket-section > div > div > .products-in-basket .seller-products .header > a i{ display: none;}
    .my-basket-section > div > div > .products-in-basket .seller-products .header > a .store-rating{ display: none;}
    .my-basket-section > div > div > .products-in-basket .seller-products .header > .free-cargo{ background-color: var(--white-bg); padding: 0 10px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .header > .free-cargo i{ font-size: 12px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .header > .free-cargo span{ font-size: 12px; color: #006d16;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div{ padding: 15px 10px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .check-area{ min-width: 26px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-img{ width: 65px; min-width: 65px; height: 100px; min-height: 100px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area{ flex-direction: column; width: 100%; position: relative;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area{ padding: 0 0 0 10px; justify-content: start;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p{ font-size: 13px; height: 36px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > p b{ display: block;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > div{ font-size: 12px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-area .product-detail > div b{ font-size: 10px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control{ margin-top: 15px; margin-bottom: 6px; justify-content: space-between; padding-left: 10px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area{ min-width: 95px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area{ position: absolute; right: 0; top: -8px; min-width: 16px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .delete-area span{ font-size: 15px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div input{ height: 27px; font-size: 13px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div button{ height: 27px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div .down{ padding-top: 4px; padding-bottom: 0; font-size: 14px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div > span{ top: unset; bottom: -6px;}
    .my-basket-section > div > div > .products-in-basket .seller-products .body > div .product-detail-area .product-control .count-area > div > span.full{ top: unset; bottom: -16px;}
}
@media screen and (max-width: 830px) {
    .my-basket-section > div > div{ flex-direction: column-reverse;}
    .my-basket-section > div > div > .products-in-basket{ padding: 0 10px;}

    .basket-price{ min-width: 100% !important; margin-bottom: 30px;}
}