.modal {
   position: fixed;
   width: 100%;
   height: 100%;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow-y: auto;
   padding: 20px;
   z-index: 9999;
   background: rgba(0, 0, 0, 0.5);
}
.modal {scrollbar-width: none;}
.modal::-webkit-scrollbar {height: 0; width: 0; display: none;}
.modal::-webkit-scrollbar-track {background: transparent;}
.modal::-webkit-scrollbar-thumb {background-color: transparent; border-radius: 0px; border: transparent;}
.modal.open {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
}
.modal-bg {
   position: fixed;
   background: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: -1;
}
.modal-container {
   background: #fff;
   position: relative;
   padding: 30px;
   width: 100%;
   max-width: 500px;
   margin: auto;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   z-index: 1;
}

.modal#header-burger .modal-container {
   max-width: 100%;
   max-height: 100%;
   overflow: auto;
   margin-top: 0;

}

.modal#watch-all-reviews .modal-container {
  max-width: 80%;
}

.modal#personal-burger .modal-container {
   max-width: 100%;
   max-height: 100%;
   overflow: auto;
   margin-top: 0;
   background-color: var(--color-creamy-beige);
}

.modal#write-review .modal-container, .modal#card-auth .modal-container {
   max-width: 895px;
}

.modal#filter-mobile .modal-container {
   position: fixed;
   left: 0;
   top: 0;
   height: 100%;
   width: 300px;
   background-color: #fff;
   color: white;
   transition: left 0.3s ease;
   padding: 20px;
   box-sizing: border-box;
   box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.45);
   z-index: 1;
}

/* Специальные стили для модального окна подтверждения возраста */
.modal#consent-age .modal-container {
   background: transparent;
   padding: 0;
   max-width: 840px;
   box-shadow: none;
}

.modal#consent-age .modal-bg {
   background: rgba(0, 0, 0, 0.5);
}

.modal-container h2 {
   margin-bottom: 40px;
   text-transform: none;
   color: #000;
   font-size: 32px;
   font-weight: 500;
   line-height: 1.2;
}
.modal-close {
   position: absolute;
   right: 15px;
   top: 15px;
   outline: none;
   appearance: none;
   background: transparent;
   border: none;
   cursor: pointer;
   width: 30px;
   height: 30px;
   transition: all 0.3s ease;
   padding: 0;
   z-index: 10;
}

.modal-close::before,
.modal-close::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 20px;
   height: 2px;
   background: #666;
   transform-origin: center;
   transition: background-color 0.3s ease;
}

.modal-close::before {
   transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
   transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close:hover::before,
.modal-close:hover::after {
   background: #333;
}

/* Стили для модального окна добавления покупателя */
.modal#add-buyer .modal-container {
   max-width: 1200px;
}

.modal-container .form-styled .alert {
   position: absolute;
   width: 100%;
   box-sizing: border-box;
}
.modal-container .buttons {
   display: flex;
   gap: 20px;
   margin-top: 50px;
}
.modal-container button[type="submit"] {
   width: 100%;
}

.modal-container .age-popup {
   background: #fff;
   padding: 50px;
   gap: 50px;
   display: flex;
   align-items: center;
   width: 100%;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.modal-container .age-popup__age {
   font-size: 120px;
   font-weight: bold;
   color: #906E50;
   margin-bottom: auto;
   line-height: 1;
   flex-shrink: 0;
}
.modal-container .age-popup__content {
   flex-grow: 1;
}
.modal-container .age-popup__title {
   font-size: 32px;
   font-weight: 500;
   color: #000;
   margin: 0 0 10px;
   line-height: 1.2;
}
.modal-container .age-popup__text {
   font-size: 14px;
   color: #000;
   margin: 0 0 20px;
   line-height: 1.4;
}
.modal-container .age-popup .btn{
   text-transform: inherit;

}

.mask-layer {display: none;position: fixed;width: 100%;height: 100%;left: 0;z-index: 1000;}
.mask-layer-black {width: 100%;height: 100%;opacity: .85;position: absolute;top: 0;left: 0;opacity: .85;}
.mask-layer-container {display: flex;justify-content: center;height: 100%;align-items: center;}
.sample-name {font-size: 28px;margin-bottom: 45px;color: #fff;}
.mask-layer-container .sample-item {margin-bottom: 0;color: #fff;font-size: 22px;line-height: 34px;max-width: 758px;}
.mask-layer-container .mask-left {margin-right: 4%;width: 700px;}
.mask-layer-container .sample-info {display: flex;}
.mask-layer-container .sample-title {margin-right: 25px;}
.mask-layer-container .sample-more {width: 220px;font-size: 22px;margin-top: 50px;height: 42px;color: #a42220;border-radius: 21px;line-height: 42px;background: #fff;display: inline-block;text-align: center;}
.fancybox-content {background: none;}
.fancybox-can-pan .fancybox-content, .fancybox-can-swipe .fancybox-content {cursor: default;}

/* Стили для полей ввода */
.modal-container input[type="text"],
.modal-container input[type="tel"],
.modal-container input[type="email"],
.modal-container input[type="hidden"],
.modal-container textarea {
   border: 1px solid #E0E0E0;
   width: 100%;
   padding: 15px;
   font-size: 14px;
   background: #fff;
   box-sizing: border-box;
   outline: none;
   transition: border-color 0.3s ease;
}

.modal-container input[type="text"]:focus,
.modal-container input[type="tel"]:focus,
.modal-container input[type="email"]:focus,
.modal-container textarea:focus {
   border-color: #906E50;
}

.modal-container textarea {
   resize: vertical;
   min-height: 120px;
   font-family: inherit;
}

.modal-container input::placeholder,
.modal-container textarea::placeholder {
   color: #999;
}

/* Стили для кнопок */
.modal-container button[type="submit"],
.modal-container .btn,
.modal-container .site-btn {
   background: #906E50;
    color: #FFF;
    border: none;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 10px 30px;
    min-width: 138px;
    max-width: 252px;
    min-height: 40px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.modal-container:has(form[data-action="add-buyer"]) .site-btn{
   max-width: 138px;
}
.modal-container .file-styled .file-label:hover,
.modal-container button[type="submit"]:hover,
.modal-container .btn:hover,
.modal-container .site-btn:hover {
   background: #7a5a42;
}

/* Стили для формы */
.modal-container .form-styled {
   width: 100%;
}

.modal-container .form-styled .form-row {
   margin-bottom: 20px;
}

.modal-container .form-styled .form-row.last {
   margin-bottom: 0;
   text-align: center;
   margin-top: 30px;
}

/* Стили для загрузки файлов */
.modal-container .file-styled {
   position: relative;
   display: block;
   width: 100%;
}

.modal-container .file-styled input[type="file"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
   pointer-events: none;
}

.modal-container .file-styled .file-label {
   display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 32px;
    border: 1px solid #E0E0E0;
    background: #906E50;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 183px;
    box-sizing: border-box;
    text-decoration: none;
    color: #FFF;
}

.attach-file-review, .attach-file-buyer{
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

}



.modal-container .file-styled .file-icon {
   font-size: 16px;
   color: #906E50;

}

.modal-container .file-styled .text {
   color: #FFF;
   font-size: 14px;
}

/* Стили для инструкций */
.modal-container .instructions-toggle {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   cursor: pointer;
   user-select: none;
   font-size: 14px;
   color: #000;
   transition: color 0.3s ease;
   position: relative;
   gap: 15px;
}
.modal-container .instructions-toggle span{
   text-decoration: underline;
}
.modal-container .toggle-arrow {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.modal-container .toggle-arrow::before,
.modal-container .toggle-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 2px;
    background: #666;
    transition: all 0.3s ease;
}

.modal-container .toggle-arrow::before {
    left: 0;
    width: 12px;
    transform: translateY(-50%) rotate(-45deg);
}

.modal-container .toggle-arrow::after {
    right: 0;
    width: 12px;
    transform: translateY(-50%) rotate(45deg);
}

.modal-container .toggle-arrow.open::before {
    transform: translateY(-50%) rotate(45deg);
}

.modal-container .toggle-arrow.open::after {
    transform: translateY(-50%) rotate(-45deg);
}

.modal-container .instructions-toggle:hover .toggle-arrow::before,
.modal-container .instructions-toggle:hover .toggle-arrow::after {
   background: #906E50;
}

.modal-container .instructions-content {
   margin-top: 0 !important;
}

.modal-container .instructions-text {
   padding: 20px;
   font-size: 14px;
   line-height: 150%;
   color: #000;
   font-weight: 500;
   background-color: #F5F2E680;
}

.modal-container .instructions-text p {
   margin-bottom: 15px;
}

.modal-container .instructions-text ul {
   margin: 15px 0;
   padding-left: 20px;
}

.modal-container .instructions-text li {
   margin-bottom: 10px;
}

.modal-container .instructions-text strong {
   color: #000;
}

/* Стили для персональных данных */
.modal-container .wrap-personal-data {
   margin-top: 20px;
   text-align: center;
}

.modal-container .wrap-personal-data p {
   font-size: 12px;
   color: #666;
   margin: 0;
   line-height: 1.4;
}

.modal-container .wrap-personal-data a {
   color: #906E50;
   text-decoration: underline;
}

.modal-container .wrap-personal-data a:hover {
   text-decoration: none;
}

/* Стили для модального окна корзины */
.modal#basket {
   background: transparent;
   align-items: flex-start;
   justify-content: flex-end;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: auto;
   height: auto;
   pointer-events: none;
   /* Убираем ограничения по высоте для абсолютного позиционирования */
   min-height: 100vh;
}

.modal#basket.open {
   pointer-events: auto;
}

.modal#basket .modal-container {
   max-width: 415px;
   width: 415px;
   max-height: 80vh;
   overflow-y: hidden;
   margin: 0;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.15);
   border: 1px solid #E0E0E0;
   position: relative;
   pointer-events: auto;
   padding: 0;
   z-index: 10001;
}

/* Стили для стрелочки с абсолютным позиционированием */
.modal#basket .basket-arrow {
   position: absolute;
   width: 0;
   height: 0;
   z-index: 10002;
   pointer-events: none;
}

/* Убираем старые стили стрелочки */
.modal#basket .modal-container::before,
.modal#basket .modal-container::after {
   display: none;
}

.modal#basket .basket-arrow::before {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #FFF;
   filter: drop-shadow(0 -4px 4px rgba(0, 0, 0, 0.15));
}

.modal#basket .basket-arrow::after {
   content: '';
   position: absolute;
   top: 1px;
   left: 0px;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #fff;
}

/* Стрелочка снизу (когда модальное окно показывается сверху) */
.modal#basket .basket-arrow.arrow-bottom {
   filter: drop-shadow(0 -4px 8px rgba(0, 0, 0, 0.15)) drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
}

.modal#basket .basket-arrow.arrow-bottom::before {
   border-bottom: none;
   border-top: 10px solid #E0E0E0;
   filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.15));
}

.modal#basket .basket-arrow.arrow-bottom::after {
   top: -11px;
   border-bottom: none;
   border-top: 10px solid #fff;
}

.alert {
   padding: 10px 15px;
   font-size: 14px;
   font-weight: 500;
   border: 1px solid transparent;
   text-align: center;
}
.alert.alert-error {
   background-color: #fff5f3;
   border-color: #f0863a;
}
.alert.alert-success {
   background-color: #f6fff9;
   border-color: #48c1b5;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
   .modal#basket {
      justify-content: center;
      padding: 20px;
      align-items: center;
   }
   
   .modal#basket .modal-container {
      width: calc(100% - 40px);
      max-width: 415px;
      position: relative !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
   }
   
   /* Скрываем стрелочку на мобильных */
   .modal#basket .basket-arrow {
      display: none;
   }

   .modal#watch-all-reviews .modal-container {
      max-width: 100%;
   }
}

@media (max-width: 576px) {
   .modal#watch-all-reviews .modal-container {
      padding: 30px 0;
   }
}

.modal#basket .modal-container h2 {
   font-weight: 500;
   font-size: 18px;
   color: #111;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0px;
   padding: 9.5px 22px;
   position: relative;
}

.modal#basket .personal__title-btn{
   padding-right: 0px;
}
/* Убираем кнопку закрытия для корзины */
.modal#basket .modal-close {
   display: none;
}

.modal#basket .modal-bg {
   display: none;
}

.modal#basket .modal-container {
   max-width: 415px;
   width: 415px;
   max-height: 80vh;
   margin: 0;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.15);
   border: 1px solid #E0E0E0;
}

.basket-modal {
   width: 100%;
   display: flex;
   flex-direction: column;
   max-height: 70vh;
}
.modal#basket .modal-container .basket__item{
   gap: 15px;
}
.basket__item--modal {
   position: relative;
}

.basket__image--modal {
   width: 116px;
   height: 120px;
   flex-shrink: 0;
   overflow: hidden;
}

.basket__image--modal img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.basket__image-placeholder {
   width: 100%;
   height: 100%;
   background: #f8f8f8;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   color: #999;
   text-align: center;
}
.modal#basket .basket__info {
   gap: 0px;
   max-width: 280px;
}
.basket__info--modal {
   flex-grow: 1;
   min-width: 0;
   padding-right: 13px;
}

.modal#basket .basket__title--modal {
   font-size: 14px;
   color: #111;
   text-decoration: none;
   display: block;
   line-height: 1.3;
   margin-bottom: 5px;
}

.modal#basket .basket__title--modal:hover {
   color: #906E50;
}

.basket__props--modal {
   display: flex;
   gap: 8px;
   margin-bottom: 5px;
}
.modal#basket .basket__props{
   flex-wrap: nowrap;
   gap: 8px;
}
.modal#basket .basket__article,
.basket__props--modal .basket__prop {
   font-size: 14px;
   color: #888;
}
.modal#basket .modal-container .site-btn{
   max-width: 100%;
}

.modal#basket .basket__items{
    overflow: auto;
   border-bottom: 0px;
}
.modal#basket .basket__prices--modal {
   margin-bottom: 0;
}
.modal#basket .basket__prices{
   padding-top: 35px;
}
.modal#basket .basket__prices-base {
   font-weight: 600;
   color: #000;
   font-size: 14px;
}

.quantities--modal {
   max-height: 40px;
   position: absolute;
   bottom: 15px;
   right: 15px;
   display: flex;
   align-items: center;
   gap: 5px;
   max-width: 100px;
   background: #F5F2E6;
   border: 1px solid #E0E0E0;
   padding: 2px;
}
.modal#basket .basket__remove-modal{
   background-image: none;
}
.quantities--modal .basket__quantities-control {
   width: 24px;
   height: 24px;
   border: none;
   background: #F5F2E6;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   line-height: 1;
   color: #111;
   transition: all 0.3s ease;
   border-radius: 2px;
}

.quantities--modal .basket__quantities-control--minus::before {
   content: '−';
}

.quantities--modal .basket__quantities-control--plus::before {
   content: '+';
}

.quantities--modal .basket__quantities-wrapper {
   display: flex;
   align-items: center;
   gap: 2px;
   font-size: 15px;
   flex-grow: 1;
   justify-content: center;
}

.quantities--modal .basket__quantities-value {
   width: 20px;
   border: none;
   background: transparent;
   text-align: center;
   font-size: 15px;
   padding: 0;
   outline: none;
   transition: all 0.2s ease;
}

.basket__remove-modal {
   width: 16px;
   height: 16px;
   background: transparent;
   border: none;
   cursor: pointer;
   position: absolute;
   top: 10px;
   right: 10px;
   flex-shrink: 0;
}

.basket__remove-modal::before,
.basket__remove-modal::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 10px;
   height: 1px;
   background: #999;
   transform-origin: center;
   transition: background-color 0.3s ease;
}

.basket__remove-modal::before {
   transform: translate(-50%, -50%) rotate(45deg);
}

.basket__remove-modal::after {
   transform: translate(-50%, -50%) rotate(-45deg);
}

.basket__remove-modal:hover::before,
.basket__remove-modal:hover::after {
   background: #333;
}


.basket-modal__total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 15px;
}

.basket-modal__buttons {
   margin-top: 25px;
   display: flex;
   justify-content: center;
}

.basket-modal__buttons .site-btn {
   width: 100%;
   text-align: center;
   padding: 12px 20px;
   font-size: 13px;
}

.basket-empty {
   text-align: center;
   padding: 40px 20px;
}

.basket-empty p {
   margin-bottom: 20px;
   color: #666;
   font-size: 14px;
}

/* Анимация для изменения количества */
.basket__quantities-value {
   transition: all 0.2s ease;
}

.basket__quantities-value.updating {
   background: #f0f0f0;
   color: #999;
}

/* Анимация для удаления товара */
.basket__item--modal.removing {
   opacity: 0.5;
   transform: scale(0.95);
   transition: all 0.3s ease;
}

/* Стили для состояния загрузки */
.basket-modal.loading {
   position: relative;
}

.basket-modal.loading::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.8);
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
}

.basket-modal.loading::after {
   content: 'Обновление...';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 101;
   color: #666;
   font-size: 14px;
}

/* Стили для модального окна добавления в корзину */
.modal#add-basket {
   background: transparent;
   align-items: flex-start;
   justify-content: flex-end;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   width: auto;
   height: auto;
   pointer-events: none;
   /* Убираем ограничения по высоте для абсолютного позиционирования */
   min-height: 100vh;
}

.modal#add-basket.open {
   /* pointer-events: auto; */
}

.modal#add-basket .modal-container {
   max-width: 415px;
   width: 415px;
   max-height: 80vh;
   overflow-y: auto;
   margin: 0;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.15);
   border: 1px solid #E0E0E0;
   position: relative;
   pointer-events: auto;
   padding: 0;
   z-index: 10001;
}

/* Стили для стрелочки с абсолютным позиционированием */
.modal#add-basket .basket-arrow {
   position: absolute;
   width: 0;
   height: 0;
   z-index: 10002;
   pointer-events: none;
}

/* Убираем кнопку закрытия для модального окна добавления в корзину */
.modal#add-basket .modal-close {
   display: none;
}

.modal#add-basket .modal-bg {
   display: none;
}

.modal#add-basket .modal-container h2 {
   font-weight: 500;
   font-size: 18px;
   color: #111;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0px;
   padding: 9.5px 22px;
   position: relative;
}

.modal#add-basket .personal__title-btn{
   padding-right: 0px;
}

.modal#add-basket .basket-modal {
   width: 100%;
}

.modal#add-basket .basket__item--modal {
   position: relative;
}

.modal#add-basket .basket__image--modal {
   width: 116px;
   height: 120px;
   flex-shrink: 0;
   overflow: hidden;
}

.modal#add-basket .basket__image--modal img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.modal#add-basket .basket__image-placeholder {
   width: 100%;
   height: 100%;
   background: #f8f8f8;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   color: #999;
   text-align: center;
}

.modal#add-basket .basket__info {
   gap: 0px;
   max-width: 280px;
}

.modal#add-basket .basket__info--modal {
   flex-grow: 1;
   min-width: 0;
   padding-right: 13px;
}

.modal#add-basket .basket__title--modal {
   font-size: 14px;
   color: #111;
   text-decoration: none;
   display: block;
   line-height: 1.3;
   margin-bottom: 5px;
}

.modal#add-basket .basket__title--modal:hover {
   color: #906E50;
}

.modal#add-basket .basket__props--modal {
   display: flex;
   gap: 8px;
   margin-bottom: 5px;
}

.modal#add-basket .basket__props{
   flex-wrap: nowrap;
   gap: 8px;
}

.modal#add-basket .basket__article,
.modal#add-basket .basket__props--modal .basket__prop {
   font-size: 14px;
   color: #888;
}

.modal#add-basket .modal-container .site-btn{
   max-width: 100%;
}

.modal#add-basket .basket__items{
    overflow: auto;
   border-bottom: 0px;
}

.modal#add-basket .basket__prices--modal {
   margin-bottom: 0;
}

.modal#add-basket .basket__prices{
   padding-top: 35px;
}

.modal#add-basket .basket__prices-base {
   font-weight: 600;
   color: #000;
   font-size: 14px;
}

.modal#add-basket .quantities--modal {
   max-height: 40px;
   position: absolute;
   bottom: 15px;
   right: 15px;
   display: flex;
   align-items: center;
   gap: 5px;
   max-width: 100px;
   background: #F5F2E6;
   border: 1px solid #E0E0E0;
   padding: 2px;
}

.modal#add-basket .basket__remove-modal{
   background-image: none;
}

.modal#add-basket .quantities--modal .basket__quantities-control {
   width: 24px;
   height: 24px;
   border: none;
   background: #F5F2E6;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   line-height: 1;
   color: #111;
   transition: all 0.3s ease;
   border-radius: 2px;
}

.modal#add-basket .quantities--modal .basket__quantities-control--minus::before {
   content: '−';
}

.modal#add-basket .quantities--modal .basket__quantities-control--plus::before {
   content: '+';
}

.modal#add-basket .quantities--modal .basket__quantities-wrapper {
   display: flex;
   align-items: center;
   gap: 2px;
   font-size: 15px;
   flex-grow: 1;
   justify-content: center;
}

.modal#add-basket .quantities--modal .basket__quantities-value {
   width: 20px;
   border: none;
   background: transparent;
   text-align: center;
   font-size: 15px;
   padding: 0;
   outline: none;
   transition: all 0.2s ease;
}

.modal#add-basket .basket__remove-modal {
   width: 16px;
   height: 16px;
   background: transparent;
   border: none;
   cursor: pointer;
   position: absolute;
   top: 10px;
   right: 10px;
   flex-shrink: 0;
}

.modal#add-basket .basket__remove-modal::before,
.modal#add-basket .basket__remove-modal::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 10px;
   height: 1px;
   background: #999;
   transform-origin: center;
   transition: background-color 0.3s ease;
}

.modal#add-basket .basket__remove-modal::before {
   transform: translate(-50%, -50%) rotate(45deg);
}

.modal#add-basket .basket__remove-modal::after {
   transform: translate(-50%, -50%) rotate(-45deg);
}

.modal#add-basket .basket__remove-modal:hover::before,
.modal#add-basket .basket__remove-modal:hover::after {
   background: #333;
}

.modal#add-basket .basket-modal__footer {
   margin-top: 15px;
}

.modal#add-basket .basket-modal__buttons {
   margin-top: 25px;
   display: flex;
   justify-content: center;
   padding: 13px;
}
.modal#basket .modal-container .basket-modal__buttons {
   padding: 13px;
}
.modal#add-basket .basket-modal__buttons .site-btn {
   width: 100%;
   text-align: center;
   padding: 12px 20px;
   font-size: 13px;
}

.modal#add-basket .basket__item{
   padding: 13px 13px 13px 0px;
   gap: 15px;
}

.modal#add-basket .basket__item--modal {
   position: relative;
   background: #fff;
   margin-bottom: 15px;
   padding: 15px;
   transition: box-shadow 0.3s ease;
   display: flex;
   align-items: flex-start;
   gap: 15px;
}

.modal#add-basket .basket__item--modal:last-child {
   margin-bottom: 0;
}

/* Используем общие стили стрелочки для обоих модальных окон */
.modal#add-basket .basket-arrow {
   position: absolute;
   width: 0;
   height: 0;
   z-index: 10;
   pointer-events: none;
}

.modal#add-basket .basket-arrow::before {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #FFF;
   filter: drop-shadow(0 -4px 4px rgba(0, 0, 0, 0.15));
}

.modal#add-basket .basket-arrow::after {
   content: '';
   position: absolute;
   top: 1px;
   left: 0px;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #fff;
}

.modal#add-basket .basket-arrow.arrow-bottom {
   filter: drop-shadow(0 -4px 8px rgba(0, 0, 0, 0.15)) drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
}

.modal#add-basket .basket-arrow.arrow-bottom::before {
   border-bottom: none;
   border-top: 10px solid #E0E0E0;
   filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.15));
}

.modal#add-basket .basket-arrow.arrow-bottom::after {
   top: -11px;
   border-bottom: none;
   border-top: 10px solid #fff;
}

.modal-container .age-popup {
   flex-direction: column;
   gap: 20px;
}

/* Медиа-запросы для адаптивности модального окна добавления */
@media (max-width: 768px) {
   .modal#add-basket {
      justify-content: center;
      padding: 20px;
      align-items: center;
   }
   

}