/* STORE 13.09.2024
Developer: t.me/moretheme
Screen resolution: 460, 860, 1440, 1920 */
.modal-store {
     display: none;
     position: fixed;
     max-width: 500px;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
     background: var(--bg);
     border-radius: 20px;
     padding: 60px;
     text-align: center;
     z-index: 9;
}

.modal-store h2 + span {
     display: block;
     color: #747474;
     margin-top: -20px;
     margin-bottom: 30px;
     font-size: 14px;
     line-height: 1.5;
}

.modal-store .fa-xmark {
     position: absolute;
     width: 40px;
     height: 40px;
     line-height: 40px;
     top: -60px;
     right: 0;
     border: 1px solid var(--light2);
     border-radius: 50%;
     color: rgb(255 255 255 / 80%);
     text-align: center;
     cursor: pointer;
}

.modal-store > .fa-chevron-left {
     position: absolute;
     top: 30px;
     left: 40px;
     font-size: 20px;
}

.modal-store > label {
     display: block;
     border: 1px solid #e9e1e5;
     padding: 8px 10px;
     border-radius: var(--radius);
     font-size: 14px;
     font-weight: bold;
     text-align: left;
}

.modal-store > label + label {
     margin-top: 5px;
}

.modal-store > label:hover {
     background: #e9e1e5;
}

.modal-store > ul li {
     display: flex;
     align-items: center;
     grid-gap: 10px;
     border: 1px solid #e9e1e5;
     padding: 15px 20px;
     border-radius: var(--radius);
     font-size: 14px;
     font-weight: bold;
     line-height: 1.5;
     text-align: left;
     margin-bottom: 15px;
}

.modal-store > ul li #del-addr {
     display: inline-block;
     background: #f44336;
     border-radius: 50%;
     color: #fff;
     min-width: 30px;
     width: 30px;
     height: 30px;
     line-height: 30px;
     text-align: center;
}

.modal-store > ul li #select-addr {
     background: var(--color1);
     color: #fff;
     padding: 5px 12px;
     border-radius: var(--radius);
}

/* MODAL DEVIL */
.modal-deliv {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
     z-index: 9;
}

.modal-deliv .fa-xmark {
     position: absolute;
     width: 40px;
     height: 40px;
     line-height: 40px;
     top: -60px;
     right: 0;
     border: 1px solid var(--light2);
     border-radius: 50%;
     color: rgb(255 255 255 / 80%);
     text-align: center;
     cursor: pointer;
}

.modal-deliv_grid {
     display: grid;
     grid-gap: 20px 20px;
     grid-auto-rows: max-content;
     grid-template-columns: 450px 1fr;
     background: var(--bg);
     border-radius: 20px;
     overflow: hidden;
}

@media (max-width: 860px) {
     .modal-deliv_grid {
          grid-template-columns: 1fr;
          grid-gap: 0;
          min-width: 400px;
     }
}

.modal-deliv_content {
     padding: 30px;
}

@media (max-width: 860px) {
     .modal-deliv_content .e-grid3 {
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
     }
}

.modal-deliv_maps {
     position: relative;
     width: 600px;
     height: 100%;
     overflow: hidden;
}

@media (max-width: 860px) {
     .modal-deliv_maps {
          width: 100%;
          height: 210px;
          order: -1;
     }
}

.modal-deliv_maps:before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
     background: #000;
     width: 2px;
     height: 15px;
     z-index: 9;
}

.modal-deliv_maps:after {
     content: "";
     position: absolute;
     top: 46%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
     background: var(--color1);
     width: 30px;
     height: 30px;
     border-radius: 50%;
     z-index: 9;
}

/* BASKET */
.basket-content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
}

.basket-list {
     max-height: 400px;
     height: 100%;
     overflow: hidden;
     overflow-y: auto;
     margin-bottom: 30px;
}

.basket-list > li {
     display: grid;
     grid-gap: 10px;
     grid-auto-rows: max-content;
     grid-template-columns: auto 1fr 30px;
     background: var(--dropdown-item-hover);
     padding: 10px;
     border-radius: 10px;
}

.basket-list > li + li {
     margin-top: 10px;
     border-top: 1px dotted var(--dark);
}
.basket-list > li span {
     font-size: 14px;
     color: var(--color-text);
}
.basket-list > li img {
     width: 50px;
     height: auto;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: 5px;
}

.basket-list_title {
     display: block;
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 5px;
     color: var(--color-black-white);
}

.basket-list_title > span {
     display: inline-block;
     background: var(--color1);
     border-radius: 8px;
     padding: 3px 8px;
     font-size: 14px;
     margin: 5px 0;
}

.basket-item + span {
     font-size: 14px;
     color: var(--text2);
}

.basket-list_count {
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--light2);
     color: var(--color1);
     border-radius: var(--radius);
     font-weight: bold;
}

.basket-list_count > a {
     display: block;
     min-width: 30px;
     width: 30px;
     height: 30px;
     line-height: 30px;
     text-align: center;
}

.basket-list_count > input {
     background: transparent;
     border: none;
     width: 15px;
     height: 30px;
     padding: 0;
     font-weight: bold;
     text-align: center;
}

.basket-list li .fa-trash {
     display: inline-block;
     width: 40px;
     height: 40px;
     line-height: 40px;
     border-radius: 50%;
     color: #f44336;
     font-size: 18px;
     text-align: center;
     cursor: pointer;
}

.basket-delivfree {
     display: flex;
     align-items: center;
     grid-gap: 20px;
     background: var(--color1);
     color: #fff;
     padding: 20px;
     border-radius: var(--radius);
     margin: 20px 0;
     font-weight: bold;
}

.basket-delivfree_count {
     display: inline-block;
     width: 40px;
     height: 40px;
     line-height: 40px;
     border: 2px solid #fff;
     border-radius: 50%;
     color: #fff;
     text-align: center;
     cursor: pointer;
}

.basket-delivfree_title span:last-child {
     display: block;
     font-size: 12px;
     font-weight: 300;
     margin-top: 3px;
}

.basket-mincount {
     display: flex;
     align-items: center;
     grid-gap: 20px;
     background: var(--color1);
     color: #fff;
     padding: 20px;
     border-radius: var(--radius);
     margin: 20px 0;
     font-weight: bold;
}

.basket-mincount_count {
     display: inline-block;
     width: 40px;
     height: 40px;
     line-height: 40px;
     border: 2px solid #fff;
     border-radius: 50%;
     color: #fff;
     text-align: center;
     cursor: pointer;
}

.basket-mincount_title span:last-child {
     display: block;
     font-size: 12px;
     font-weight: 300;
     margin-top: 3px;
}

.basket-total li {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     grid-gap: 20px;
     font-size: 18px;
     font-weight: bold;
     padding-bottom: 20px;
     border-top: 1px solid var(--color-diviver);
     padding-top: 20px;
     color: var(--color-black-white);
}

.basket-total li + li,
.basket-total div + li {
     border: none;
     margin-top: 0;
     padding-top: 0;
}

.basket-total .basket-total_delivoffice,
.basket-total .basket-total_delivkm {
     font-size: 12px;
     opacity: 0.8;
     margin-top: 10px;
     padding-top: 0;
     border-top: 0;
}

.basket-total_sale {
     display: block;
     text-align: right;
     margin: 10px 0 15px;
     color: #4caf50;
     font-weight: bold;
}

.basket-total .basket-total_bonus,
.basket-total .basket-total_bonus span {
     display: block;
     font-size: 16px;
     text-align: right;
}

.basket-total .basket-total_bonus span:first-child {
     color: #8bc34a;
}

.basket-total .basket-total_bonus span:nth-child(2) {
     color: #ff5722;
}

.basket-total .basket-total_bonus span:last-child {
     color: #a1a1a1;
     font-size: 14px;
}

/* BASKET ORDER */
.basket-order_grid {
     display: grid;
     grid-gap: 80px;
     grid-auto-rows: max-content;
     grid-template-columns: 1fr 400px;
}

@media (max-width: 860px) {
     .basket-order_grid {
          grid-template-columns: 1fr;
          grid-gap: 30px;
     }
}

.basket-order {
     background: var(--bg2);
     color: #fff;
     box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);
     padding: 30px;
     border-radius: var(--radius);
     height: max-content;
}

@media (max-width: 860px) {
     .basket-order {
          order: -1;
          overflow: hidden;
     }
}

/* BASKET FORM */
.basket-form_deliv {
}

.basket-form_deliv > span {
     display: block;
     color: #7f7f7f;
     font-size: 14px;
     margin-bottom: 9px;
}

.basket-form_deliv > span b {
     color: var(--color1);
}

.basket-form_deliv > div {
     display: flex;
     align-items: center;
     justify-content: space-between;
     grid-gap: 20px;
}

.basket-form_deliv > div > a {
     display: inline-block;
     min-width: max-content;
     background: var(--color1);
     color: #fff;
     padding: 15px 20px;
     border-radius: var(--radius);
}

.basket-promo input {
     background: var(--form-bg);
}

.basket-form_promo {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     grid-gap: 20px;
}

.basket-form_promo button {
     display: inline-block;
     min-width: max-content;
     background: var(--btn-dark-bg);
     color: var(--btn-dark-color);
     padding: 15px 20px;
     border-radius: 10px;
     cursor: pointer;
}

.basket-promo #promoresult {
     display: block;
     color: var(--text2);
     font-size: 12px;
     margin-top: 10px;
}

.basket-bonus h2 a {
     font-size: 14px;
     color: #a1aab9;
}

.basket-bonus > div h2 {
     margin-bottom: 10px;
}

.basket-bonus_count {
     color: #8bc34a;
}

.basket-form_payment {
}

h2 + .basket-form_payment > span {
     display: block;
     margin-top: -20px;
     margin-bottom: 25px;
}

.basket-form_payment > span {
     display: block;
     color: #7f7f7f;
     font-size: 14px;
     margin-bottom: 9px;
}

.basket-form_payment label {
     position: relative;
     color: var(--color-black-white);
     font-weight: 500;
     overflow: hidden;
}

.basket-form_payment label input {
     position: absolute;
     margin: 12px;
}

.basket-order_price {
     display: block;
     font-size: 20px;
     font-weight: bold;
}

.basket-order_price > span {
     color: var(--text2);
     font-size: 16px;
     font-weight: 300;
     margin-right: 5px;
}

/* BASKET CHECK */
.basket-check {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     margin-top: 60px;
}
.basket-check h2 {
     color: var(--color-black-white);
}
.basket-check p {
     color: var(--color-text);
}
.basket-check .e-btn {
     color: var(--color-black-white);
}
/* ORDER */
.store-order {
     max-width: 800px;
}

.store-order_items {
}

.store-order_items li + li {
     margin-top: 20px;
}

/* STORE RECEP */
.store-recep {
     background: #fff;
     color: #000;
     padding: 20px;
     border-radius: 15px;
}

.store-recep_head {
     display: grid;
     grid-gap: 15px;
     grid-auto-rows: max-content;
     grid-template-columns: repeat(2, 1fr);
}

.store-recep_head span {
     font-weight: bold;
}

.store-recep table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 30px;
}

.store-recep th,
.store-recep td {
     border: 1px solid #ddd;
     padding: 8px;
     text-align: left;
}

.store-recep th {
     background-color: #f2f2f2;
}

.store-recep tr:nth-child(even) {
     background-color: #f2f2f2;
}

.store-recep tr:hover {
     background-color: #ddd;
}

.store-recep_sign {
     display: grid;
     grid-gap: 15px;
     grid-auto-rows: max-content;
     grid-template-columns: repeat(2, 1fr);
}

.store-recep_sign > div {
     display: flex;
     align-items: flex-end;
     grid-gap: 20px;
}

.store-recep_sign > div span {
     border-bottom: 1px solid #000;
}

/* STORE BIND */
.store-bind {
     position: relative;
     margin: 20px 0;
}

.store-bind > div {
     display: grid;
     grid-gap: 20px 20px;
     grid-auto-rows: max-content;
     grid-template-columns: repeat(3, 1fr);
}

.store-bind > span {
     display: block;
     color: #525252;
     margin-bottom: 10px;
}

.store-bind > div a {
     display: inline-block;
     background: #fff;
     border-radius: 10px;
     padding: 10px 5px;
     width: 100%;
     height: 100%;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     overflow: hidden;
}

.store-bind > div a img {
     width: 100%;
     height: auto;
     aspect-ratio: 1/1;
     object-fit: contain;
     margin-bottom: 5px;
}

/* ALERT */
.alert {
     position: fixed;
     width: 300px;
     right: 20px;
     top: 20px;
     font-size: 14px;
     text-align: center;
     z-index: 9999;
}

@media (max-width: 860px) {
     .alert {
          right: 15px;
          top: 15px;
          font-size: 12px;
          width: 200px;
     }
}

.alert-block {
     position: relative;
     display: block;
     background: #4caf50;
     border-radius: 10px;
     color: #fff;
     box-shadow: 3px 5px 8px rgba(0, 55, 76, 0.31);
     padding: 15px 40px 15px 15px;
     margin-bottom: 15px;
     overflow: hidden;
}

.alert-block.danger {
     background: #f49336;
}

.alert-block.error {
     background: #f44336;
}

.alert-block_bar {
     position: absolute;
     background: var(--light2);
     left: 0;
     bottom: 0;
     height: 2px;
}

.alert-block_close {
     position: absolute;
     top: 10px;
     right: 20px;
     cursor: pointer;
}