/* ============================================
💾 СОХРАНЁННЫЕ КОРЗИНЫ
============================================ */

/* 1. Кнопка "Сохранить корзину" */
.save-cart-btn {
    width: 100%;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 0 16px;
    background: transparent;
    border: 1.5px dashed var(--border-dark, #b7c0bc);
    border-radius: 8px;
    color: var(--text-soft, #697177);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.save-cart-btn:hover {
    border-color: var(--green, #4f8f22);
    color: var(--green, #4f8f22);
    background: var(--green-soft, #edf6e8);
}
.save-cart-btn img {
    filter: brightness(0) saturate(100%);
    opacity: 0.6;
}
.save-cart-btn:hover img {
    filter: brightness(0) saturate(100%);
    opacity: 1;
}

/* 2. Секция сохранённых корзин */
.saved-carts-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #e4e7e8);
}
.saved-carts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft, #697177);
}
.saved-carts-count {
    font-size: 11px;
    color: var(--muted, #8a9298);
    font-weight: 500;
}

/* 3. Выпадающий список */
.saved-carts-select {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border, #e4e7e8);
    border-radius: 7px;
    background: #ffffff;
    color: var(--text, #2d3338);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
.saved-carts-select:focus {
    border-color: var(--green, #4f8f22);
    box-shadow: 0 0 0 3px var(--green-soft, #edf6e8);
}
.saved-carts-select option {
    padding: 8px;
}

/* 4. Кнопка "Удалить выбранную" */
.delete-saved-cart-btn {
    width: 100%;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--border, #e4e7e8);
    border-radius: 6px;
    color: var(--text-soft, #697177);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.delete-saved-cart-btn:hover {
    background: #fff1f1;
    border-color: #e32d2d;
    color: #e32d2d;
}
.delete-saved-cart-btn:hover img {
    filter: brightness(0) invert(1);
}

/* ============================================
💾 КНОПКА "СОХРАНИТЬ ИЗМЕНЕНИЯ"
============================================ */
/* 1. Базовый стиль: зеленая, призывающая к действию (как кнопка "Оформить") */
.save-changes-btn {
    width: 100%;                              /* 2. Растягиваем на всю ширину колонки */
    height: 36px;                             /* 3. Чуть ниже, чем кнопка удаления (32px), чтобы выделить */
    display: inline-flex;                     /* 4. Flexbox для идеального выравнивания иконки и текста */
    align-items: center;                      /* 5. Центрируем по вертикали */
    justify-content: center;                  /* 6. Центрируем по горизонтали */
    gap: 6px;                                 /* 7. Воздух между иконкой дискеты и текстом */
    margin-top: 8px;                          /* 8. Отступ сверху, чтобы не слипалась с кнопкой "Удалить" */
    padding: 0 12px;                          /* 9. Внутренние отступы по бокам */
    background: var(--green, #4f8f22);        /* 10. Фирменный зеленый цвет (цвет успеха/сохранения) */
    border: 1px solid var(--green, #4f8f22);  /* 11. Рамка в цвет фона */
    border-radius: 6px;                       /* 12. Скругление углов в общем стиле сайта */
    color: #ffffff;                           /* 13. Белый текст для контраста на зеленом */
    font-size: 12px;                          /* 14. Компактный, но читаемый шрифт */
    font-weight: 600;                         /* 15. Полужирный, чтобы кнопка "весила" больше */
    cursor: pointer;                          /* 16. Курсор-палец при наведении */
    transition: all 0.2s;                     /* 17. Плавная анимация при наведении */
}
/* 18. Эффект при наведении: делаем зеленый цвет глубже */
.save-changes-btn:hover {
    background: var(--green-dark, #3d7518);   /* 19. Темно-зеленый фон */
    border-color: var(--green-dark, #3d7518); /* 20. Темно-зеленая рамка */
}
/* 21. Магия инверсии: делаем черную SVG-иконку дискеты белой */
.save-changes-btn img {
    filter: brightness(0) invert(1);          /* 22. Обнуляем яркость (черный), инвертируем (белый) */
}

/* 5. Модальное окно ввода имени корзины */
.save-cart-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.save-cart-dialog {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px;
    width: min(420px, 90vw);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.save-cart-dialog h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #2d3338);
}
.save-cart-dialog p {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-soft, #697177);
}
.save-cart-dialog input[type="text"] {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border, #e4e7e8);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.save-cart-dialog input[type="text"]:focus {
    border-color: var(--green, #4f8f22);
    box-shadow: 0 0 0 3px var(--green-soft, #edf6e8);
}
.save-cart-dialog-buttons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.save-cart-dialog-buttons button {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.save-cart-dialog-buttons .btn-save-confirm {
    background: var(--green, #4f8f22);
    border: 1px solid var(--green, #4f8f22);
    color: #ffffff;
}
.save-cart-dialog-buttons .btn-save-confirm:hover {
    background: var(--green-dark, #3d7518);
}
.save-cart-dialog-buttons .btn-save-cancel {
    background: transparent;
    border: 1px solid var(--border, #e4e7e8);
    color: var(--text-soft, #697177);
}
.save-cart-dialog-buttons .btn-save-cancel:hover {
    background: #f5f5f5;
}

/*#region Выдвижная панель сохраненных корзин */
/* Контейнер панели */
.saved-carts-drawer {
    position: absolute;                                         /* Вырываем из потока, чтобы парить над кнопками */
    left: 0;                                                    /* Прижимаем к левому краю правой панели */
    bottom: 0;                                                  /* Якорь снизу, а не сверху */
    width: 100%;                                                /* Занимает всю ширину правой панели */
    height: 100%;                                               /* Занимает всю высоту правой панели */
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: 50;                                                /* Поверх кнопок оформления */
    display: flex;
    flex-direction: column;
    
    /* ФИЗИКА СКРЫТОГО СОСТОЯНИЯ: Уезжаем на 100% вправо за пределы "шахты" */
    transform: translateX(100%); 
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    pointer-events: none;
}
/* Действие, когда панель открыта */
.saved-carts-drawer:not(.hidden) {
    transform: translateX(0);               /* Возвращаем в исходное положение по оси X */
    opacity: 1;
    pointer-events: auto;     /* 15. Снова ловим клики */
}
/* Эффект "лифта" на мобильных устройствах снизу вверх */
@media (max-width: 768px) {
    .saved-carts-drawer {
        transform: translateX(100%); 
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
        pointer-events: none;
    }
    .saved-carts-drawer:not(.hidden) {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }
}

/* 3. Заголовок панели */
.saved-carts-drawer-header {
    display: flex;                              /* 1. Flexbox для выравнивания заголовка и крестика в ряд */
    align-items: center;                        /* 2. Центрируем по вертикали */
    justify-content: space-between;             /* 3. Заголовок слева, крестик справа */
    padding: 16px 18px 12px;                    /* 4. Внутренние отступы */
    border-bottom: 1px solid var(--border);     /* 5. Разделительная линия снизу */
    flex-shrink: 0;                             /* 6. Запрещаем сжиматься */
    position: relative;                         /* 7. 🔥 НОВОЕ: Создаём систему координат для абсолютного позиционирования крестика */
}
/* 8.  НОВОЕ: Переопределяем позиционирование универсального крестика .close внутри панели */
.saved-carts-drawer-header .close-drawer {
    position: absolute;                         /* 9. Вырываем крестик из потока — он "парит" поверх заголовка */
    top: 14px;                                  /* 10. Отступ сверху (подбираем под высоту заголовка) */
    right: 18px;                                /* 11. Отступ справа */
    font-size: 22px;                            /* 12. Чуть меньше, чем в модалках (28px), чтобы влез в узкую панель */
    cursor: pointer;
}

.saved-carts-drawer-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* 5. Панель действий (чекбокс + кнопки удаления) */
.saved-carts-drawer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.select-all-saved-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}

.select-all-saved-wrapper input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--green);
  cursor: pointer;
}

/* 7. Список корзин (скроллится) */
.saved-carts-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}

/* 8. Пустое состояние */
.empty-saved-carts {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
}

/* 9. Карточка одной корзины */
.saved-cart-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fafbfb;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.saved-cart-card:hover {
  background: #f0f2f5;
  border-color: #c9d3cd;
}

/* 10. Выделенная карточка (чекбокс отмечен) */
.saved-cart-card.selected {
  background: var(--green-soft);
  border-color: var(--green);
}

/* 11. Активная карточка (эта корзина сейчас загружена) */
.saved-cart-card.active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green-soft);
}

.saved-cart-card input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}

/* 12. Информация о корзине */
.saved-cart-card-info {
  flex: 1;
  min-width: 0;
}
.saved-cart-card-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
.saved-cart-card-name {
    flex: 1;
    min-width: 0;                       /* Позволяет тексту сжиматься и работать обрезанию */
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;            /* Делает "Названи..." */
}
.saved-cart-card-price {
    font-size: 12px;
    font-weight: bold;
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}
.saved-cart-card-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* 13. Кнопка "Загрузить" */
.saved-cart-card-load-btn {
  padding: 4px 10px;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}

.saved-cart-card-load-btn:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}

/* 14. Кнопка-флажок открытия панели */
.toggle-saved-carts-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-saved-carts-btn:hover {
  background: #f0f2f5;
  border-color: var(--border-dark);
  color: var(--text);
}

.toggle-saved-carts-btn.active {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green-dark);
}

/* 15. Бейдж с количеством корзин */
.saved-carts-badge {
  background: var(--green);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* 6. Мобильная адаптация */
@media (max-width: 768px) {
    .save-cart-btn {
        height: 38px;
        font-size: 12px;
    }
    .saved-carts-select {
        height: 36px;
        font-size: 11px;
    }
}
/*#endregion Выдвижная панель сохраненных корзин */


/* ============================================
🎛 КНОПКА "СОХРАНЁННЫЕ" В ПРАВОЙ ПАНЕЛИ
============================================ */
/* 1. Базовый стиль для кнопки в правой панели */
#cart-modal .toggle-saved-carts-btn.right-panel-toggle {
    width: 100%;                              /* 2. Растягиваем на всю ширину кассы */
    height: 44px;                             /* 3. Чуть выше, чтобы было удобно нажимать */
    display: inline-flex;
    align-items: center;
    justify-content: center;                  /* 4. Центрируем текст и иконку */
    gap: 8px;
    margin-top: 12px;                         /* 5. Отступ от кнопки "Оформить заказ" */
    padding: 0 16px;
    background: transparent;
    border: 1.5px dashed var(--border-dark, #b7c0bc); /* 6. Пунктирная рамка, как у "Сохранить корзину" */
    border-radius: 8px;
    color: var(--text-soft, #697177);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 7. Эффект при наведении */
#cart-modal .toggle-saved-carts-btn.right-panel-toggle:hover {
    border-color: var(--green, #4f8f22);
    color: var(--green, #4f8f22);
    background: var(--green-soft, #edf6e8);
}

/* 8. Состояние "Активно" (панель открыта) */
#cart-modal .toggle-saved-carts-btn.right-panel-toggle.active {
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green-dark);
    border-style: solid; /* 9. Делаем рамку сплошной, когда лифт вызван */
}

/* 10. Иконка внутри кнопки */
#cart-modal .toggle-saved-carts-btn.right-panel-toggle img {
    filter: brightness(0) saturate(100%);
    opacity: 0.6;
}
#cart-modal .toggle-saved-carts-btn.right-panel-toggle:hover img,
#cart-modal .toggle-saved-carts-btn.right-panel-toggle.active img {
    opacity: 1;
}

/* ============================================
✖️ КРЕСТИК ЗАКРЫТИЯ ПАНЕЛИ СОХРАНЁННЫХ КОРЗИН (ДЕСКТОП)
============================================ */
/* 1. Ограничиваем действие стилей только десктопом (ширина > 768px) */
@media (min-width: 769px) {
    /* 2. Целимся конкретно в ID кнопки, чтобы перебить правило #cart-modal .close */
    #close-saved-carts-btn {
        background: transparent !important;      /* 3. Убираем красный фон (делаем прозрачным) */
        border: none !important;                 /* 4. Убираем любые рамки */
        border-radius: 0 !important;             /* 5. Убираем скругление углов (больше не круглый) */
        width: auto !important;                  /* 6. Сбрасываем фиксированную ширину (30px) */
        height: auto !important;                 /* 7. Сбрасываем фиксированную высоту (30px) */
        box-shadow: none !important;             /* 8. Убираем тени, чтобы не выпирал */
        color: #6c757d !important;               /* 9. Красим крестик в стандартный серый цвет */
        font-size: 26px !important;              /* 10. Задаём оптимальный размер символа "×" */
        font-weight: bold !important;            /* 11. Делаем шрифт жирным для читаемости */
        line-height: 1 !important;               /* 12. Убираем межстрочный интервал, центрируем */
        position: absolute !important;           /* 13. Выводим из общего потока, "вешаем на стену" */
        top: 16px !important;                    /* 14. Отступ от верхнего края шапки панели */
        right: 18px !important;                  /* 15. Отступ от правого края шапки панели */
        transition: color 0.2s ease !important;  /* 16. Плавная анимация смены цвета (0.2 сек) */
    }

    /* 17. Состояние при наведении мыши (Hover) */
    #close-saved-carts-btn:hover {
        color: #d90429 !important;               /* 18. Крестик становится фирменным красным */
    }
}

/* ============================================
📱 АДАПТАЦИЯ КРЕСТИКА ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
============================================ */
@media (max-width: 768px) {
    #close-saved-carts-btn {
        /* 1. Разрешаем отображение (вместо display: none) */
        display: flex !important; 
        align-items: center;
        justify-content: center;
        
        /* 2. Настраиваем размер и позицию под мобильный header панели */
        position: absolute !important;
        top: 12px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 24px !important;
        line-height: 1 !important;
        
        /* 3. Визуальные стили (серый цвет, без фона) */
        background: transparent !important;
        border: none !important;
        border-radius: 50% !important; /* Можно сделать круглым для удобства тапа */
        color: #6c757d !important;
        font-weight: bold !important;
        cursor: pointer;
        z-index: 10 !important;
        
        /* 4. Плавная анимация при нажатии */
        transition: color 0.2s ease, background 0.2s ease !important;
    }

    /* Эффект при нажатии (Active state для тач-устройств) */
    #close-saved-carts-btn:active {
        color: #d90429 !important; /* Красный при нажатии */
        background: rgba(217, 4, 41, 0.1) !important;
    }
}

/*#region Универсальная Кнопка "Удалить выбранное" */
/* 1. Базовый стиль: ненавязчивый, серый, чтобы не спорить с красной "Очистить" */
.delete-selected-btn {                                 /* 2. 🔥 УБРАЛИ #cart-modal — теперь класс универсальный */
    display: inline-flex;                              /* 3. Flexbox для выравнивания иконки и текста в ряд */
    align-items: center;                               /* 4. Центрируем по вертикали */
    gap: 6px;                                          /* 5. Воздух между иконкой и текстом */
    padding: 6px 12px;                                 /* 6. Внутренние отступы */
    background: transparent;                           /* 7. Прозрачный фон */
    border: 1px solid var(--border);                   /* 8. Тонкая стандартная рамка */
    border-radius: 7px;                                /* 9. Скругление как у других кнопок */
    color: var(--text-soft);                           /* 10. Серый цвет текста */
    font-size: 12px;                                   /* 11. Компактный шрифт */
    font-weight: 600;                                  /* 12. Полужирный для читаемости */
    cursor: pointer;                                   /* 13. Курсор-палец */
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; /* 14. Плавность при наведении */
}
/* 15. Эффект при наведении: кнопка "подсвечивается", но не становится красной */
.delete-selected-btn:hover {                       /* 16. 🔥 УБРАЛИ #cart-modal */
    background: #f0f2f5;                               /* 17. Легкий серый фон */
    color: var(--text);                                /* 18. Текст становится темнее */
    border-color: var(--border-dark);                  /* 19. Рамка становится четче */
}
/* 20. Иконка мусорки внутри кнопки */
.delete-selected-btn img {                         /* 21. 🔥 УБРАЛИ #cart-modal */
    width: 15px;                                       /* 22. Фиксированный размер */
    height: 15px;
    object-fit: contain;                               /* 23. Сохраняем пропорции SVG */
    filter: brightness(0) saturate(100%);              /* 24. Делаем иконку черной/серой (убираем родные цвета SVG) */
}
/*#endregion Универсальная Кнопка "Удалить выбранное" */

/*#region Анимация успешного выполнения формы */
/* 1. Контейнер-затемнение поверх формы */
.form-success-overlay {
    position: fixed !important;           /*  ИЗМЕНЕНО: fixed вместо absolute */
    z-index: 9999 !important;             /* 🔥 Поверх всех элементов */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    border-radius: 0 0 12px 12px;
    animation: fadeInOverlay 0.3s ease forwards;
    /*border-radius: inherit;*/
}

/* 2. SVG Иконка */
.success-svg {
    width: 90px;
    height: 90px;
    margin-bottom: 24px;
}

/* 3. Круг (рисуется первым) */
.success-circle {
    fill: none;
    stroke: var(--green, #4f8f22);
    stroke-width: 3;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: drawCircle 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: center;
}

/* 4. Галочка (рисуется вторым, с задержкой) */
.success-check {
    fill: none;
    stroke: var(--green, #4f8f22);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 65;
    stroke-dashoffset: 65;
    animation: drawCheck 0.4s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 5. Текст */
.success-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #2d3338);
    text-align: center;
    max-width: 80%;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInText 0.4s 0.8s ease forwards;
}

/* --- Ключевые кадры анимации --- */
@keyframes drawCircle {
    to { stroke-dashoffset: 0; }
}
@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}
@keyframes fadeInOverlay {
    to { opacity: 1; }
}
@keyframes fadeInText {
    to { opacity: 1; transform: translateY(0); }
}
/*#endregion Анимация успешного выполнения формы */