/* === NikoStore Cart — Light Glass v3 === */
/* Тема: светлая, акцент #6c5ce7, без градиентов на кнопках */

:root{
  --bg: #f7f8fc;
  --bg-spot-1: radial-gradient(800px 420px at -10% -10%, rgba(108,92,231,.08) 0%, transparent 45%);
  --bg-spot-2: radial-gradient(900px 520px at 110% 0%, rgba(108,92,231,.06) 0%, transparent 50%);

  --panel: #ffffff;
  --panel-strong: #f1f2f7;
  --border: #e5e7f2;

  --text: #22252e;
  --muted: #6f7390;

  --accent: #6c5ce7;     /* основной цвет */
  --accent-weak: #edeafe; /* светлый фон для чипов/пилюль */

  --success: #28c76f;
  --danger: #ea5455;

  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 12px;

  --shadow-sm: 0 4px 14px rgba(18, 24, 40, .06);
  --shadow-md: 0 8px 26px rgba(18, 24, 40, .08);
  --shadow-lg: 0 18px 44px rgba(18, 24, 40, .12);
}

html,body{ height:100%; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--text);
  background:
    var(--bg),
    var(--bg-spot-1),
    var(--bg-spot-2);
}

/* Container */
.cart-container{
  max-width: 1180px;
  margin: 40px auto;
  padding: 0 20px 44px;
}

/* Header */
.cart-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px;
}
.cart-header h1{
  position: relative;
  display: inline-block;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 42px);
  color: var(--text);
}

.cart-header h1::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60%;
  height: 6px;
  border-radius: 4px;
  background: var(--accent);
}

.back-link{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  text-decoration:none;
  color:var(--text);
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.back-link svg{ width:18px;height:18px; fill:currentColor; opacity:.85; }
.back-link:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); background: var(--panel-strong); }

/* Grid */
.cart-grid{
  display:grid; gap: 24px; grid-template-columns: minmax(0,1fr);
}
@media (min-width:1024px){
  .cart-grid{ grid-template-columns: minmax(0,1fr) 380px; align-items:start; }
}

/* Cards (left/right) */
.cart-items,
.checkout-form{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.cart-items{ padding:20px; }
.checkout-form{ padding:20px; position:sticky; top:24px; }

.cart-items-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4px 14px 4px; margin-bottom:6px;
  border-bottom:1px dashed #d9dbe9;
}
.cart-items-header h2{ margin:0; font-size:18px; }
.items-count{
  background: var(--accent-weak);
  color: var(--accent);
  padding:4px 10px;
  border-radius:999px;
  font-size:12px; font-weight:800;
}

/* Item list */
.items-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }

/* Универсальная обёртка товара:
   поддерживает обе разметки:
   - .cart-item-image + .cart-item-info (твоя текущая из JS)
   - <img> + .cart-item-content (вариант из ответа) */
.cart-item{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  background:#fff;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.cart-item:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); background:#fbfbff; }

/* Изображение */
.cart-item img,
.cart-item-image img{
  width:88px; height:88px; object-fit:cover; border-radius:12px; flex:0 0 88px;
}

/* Контент справа от фото (поддержка обоих вариантов классов) */
.cart-item-content,
.cart-item-info{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center;
}
.cart-item-title{
  margin:0;
  font-weight:700; line-height:1.28; color:var(--text);
  white-space: normal; overflow-wrap:anywhere; word-break:break-word;
  font-size:15px;
}
.cart-item-meta{ color:var(--muted); font-size:13px; margin-top:6px; }

/* Цена */
.cart-item-price{ margin-top:8px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.current-price{ font-size:16px; }
.old-price{ color:var(--muted); text-decoration:line-through; font-weight:600; }
.discount-badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; font-weight:800; color:#fff; background: var(--accent);
  box-shadow: 0 4px 14px rgba(108,92,231,.25);
}

/* Действия справа */
.cart-item-actions{
  margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px; min-width:120px;
}

/* Количество — «пилюльки» как в дарке, но светлые */
.cart-item-quantity,
.quantity-controls{ display:inline-flex; align-items:center; gap:10px; }

.quantity-btn{
  width:36px; height:36px; border-radius:999px;
  border:1px solid #d9dbe9; background:#f3f4f8; color:var(--text);
  font-size:18px; font-weight:900; line-height:1;
  display:inline-grid; place-items:center; cursor:pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.quantity-btn:hover{ background:#e9ebf6; border-color:#cfd3ea; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.quantity-btn:active{ transform: translateY(0); }
.quantity-value{ min-width:28px; text-align:center; font-weight:800; }

/* Удаление — круглая, выразительная */
.remove-item{
  width:40px; height:40px; border-radius:999px;
  display:inline-grid; place-items:center;
  border:1px solid rgba(234,84,85,.35);
  background: rgba(234,84,85,.12);
  color: var(--danger);
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.remove-item:hover{ background: rgba(234,84,85,.2); box-shadow: 0 6px 18px rgba(234,84,85,.25); transform: translateY(-1px); }
.remove-item svg{ width:18px; height:18px; }

/* Промо-товар */
.cart-item.promo{
  position:relative; border-width:1.5px; border-color: var(--accent);
  background:#f7f6ff; box-shadow: 0 10px 28px rgba(108,92,231,.12);
}
.cart-item.promo::after{
  content:"АКЦІЯ";
  position:absolute; top:-10px; left:14px;
  font-size:11px; font-weight:900; letter-spacing:.5px;
  color:#fff; background: var(--accent); padding:2px 8px; border-radius:8px;
}

/* Summary (right column) */
.checkout-form h2{ margin:6px 6px 14px; }
.form-group{ display:flex; flex-direction:column; gap:8px; margin: 10px 6px; }
.form-group label{ font-size:13px; color:#3a3d4a; font-weight:600; }

.form-group input,
.form-group select{
  background:#fbfbfe;
  border:1px solid var(--border);
  color:var(--text);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-group input::placeholder{ color:#a3a6be; opacity:.9; }
.form-group input:focus,
.form-group select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108,92,231,.20);
  background:#fff;
}

.order-summary{
  background: #fff;
  border:1px dashed #d9dbe9;
  border-radius: var(--radius-lg);
  padding: 14px 14px 6px;
  box-shadow: var(--shadow-sm);
  margin-top: 10px;
}
.summary-row{
  display:flex; justify-content:space-between; gap:10px;
  margin: 6px 2px; padding: 10px 0;
  color: var(--muted);
  border-bottom: 1px dashed #e1e3f0;
}
.summary-row.total{
  color: var(--text); font-weight: 900; border-bottom:none; padding-top: 12px;
}

/* Кнопки */
.checkout-btn{
  width:100%; border:0; cursor:pointer;
  padding: 14px 16px; margin-top:14px;
  border-radius: 16px;
  font-weight: 800; letter-spacing:.3px;
  background: var(--accent); color:#fff;
  box-shadow: 0 8px 22px rgba(108,92,231,.35), inset 0 -2px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.checkout-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.checkout-btn:active{ transform:none; }

/* .btn из блока «порожній кошик» */
.btn{
  display:inline-block; text-decoration:none; color:#fff;
  background: var(--accent);
  padding: 12px 18px;
  border-radius: 14px;
  font-weight:800; letter-spacing:.3px;
  box-shadow: 0 6px 18px rgba(108,92,231,.3);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Empty cart */
.empty-cart{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; min-height: 200px; text-align:center;
}
.empty-cart-icon{
  width:88px; height:88px; border-radius: 22px;
  display:grid; place-items:center;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.empty-cart p{ color: var(--muted); margin:0 0 10px; }

/* Мелочи */
.fas{ margin-right:8px; }
.order-summary .fas{ margin-right:10px; }

/* Скролл (WebKit) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(32, 37, 61, .22);
  border-radius: 999px; border:2px solid transparent;
}
*::-webkit-scrollbar-track{ background: transparent; }

/* Адаптив: делаем кнопку статичной снизу на мобилке */
@media (max-width: 480px){
  .checkout-btn{
    position: sticky; bottom: 8px;
  }
}
/* ===== Mobile optimizations (phones) ===== */

/* 1) Общие косметические правки под мобильные */
@media (max-width: 600px){
  .cart-container{ padding: 0 14px 40px; }
  .cart-items, .checkout-form{ border-radius:16px; box-shadow: 0 6px 16px rgba(18,24,40,.07); }
  .cart-items{ padding:16px; }
  .checkout-form{ padding:16px; top:16px; }
  .order-summary{ padding:12px; }
}

/* 2) Карточка товара: фото слева, текст справа, действия ниже (во всю ширину) */
@media (max-width: 540px){
  .cart-item{
    flex-wrap: wrap;          /* разрешаем перенос строк */
    gap: 12px;
    padding: 12px;
  }

  /* Фото чуть меньше, чтобы дать место тексту */
  .cart-item img,
  .cart-item-image img{
    width: 74px;
    height: 74px;
    border-radius: 10px;
    flex: 0 0 74px;
  }

  /* Контент занимает всю оставшуюся ширину рядом с фото */
  .cart-item-content,
  .cart-item-info{
    flex: 1 1 calc(100% - 86px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Название — максимум 2 строки, красивое обрезание */
  .cart-item-title{
    font-size: 14.5px;
    line-height: 1.28;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* clamp 2 строки */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    hyphens: auto;                  /* перенос по слогам (lang="uk" уже есть) */
    word-break: break-word;
  }

  /* Цена компактнее */
  .cart-item-price{
    margin-top: 6px;
    gap: 6px;
  }
  .current-price{ font-size: 15px; }
  .old-price{ font-size: 12.5px; }

  /* Бейдж скидки поменьше */
  .discount-badge{ padding: 2px 6px; font-size: 11px; }

  /* Блок действий уходит на новую строку и тянется вправо */
  .cart-item-actions{
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    margin-left: 0;
    margin-top: 6px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  /* Контрол количества — в одну линию, удобные тач-размеры */
  .cart-item-quantity{ gap: 8px; }
  .quantity-btn{
    width: 40px;
    height: 40px;
    border-radius: 999px;
  }
  .quantity-value{ min-width: 28px; font-size: 14px; }

  /* Кнопка удаления не кричащая, но заметная */
  .remove-item{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(234,84,85,.12);
    border: 1px solid rgba(234,84,85,.35);
  }
  .remove-item svg{ width: 18px; height: 18px; }
}

/* 3) Узкие телефоны — ещё чуть компактнее */
@media (max-width: 400px){
  .cart-item{ padding: 10px; }
  .cart-item img,
  .cart-item-image img{ width: 68px; height: 68px; flex-basis: 68px; }
  .cart-item-title{ font-size: 14px; }
  .current-price{ font-size: 14.5px; }
  .checkout-form .form-group{ margin: 8px 6px; }
}

/* 4) Бейдж «АКЦІЯ» — чтобы не наезжал */
@media (max-width: 540px){
  .cart-item.promo::after{ top: -8px; left: 10px; }
}

/* 5) Кнопка «Підтвердити замовлення» — всегда удобная на мобилке */
@media (max-width: 540px){
  .checkout-btn{
    position: sticky;
    bottom: 8px;
    z-index: 3;
    border-radius: 14px;
  }
}
/* === City suggest "sheet" (dropdown) === */
#city-wrapper{ position: relative; }
#citySearch{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-md);
}
.suggest-list{
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background:#fff; border:1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  max-height: 320px; overflow: auto; margin:0; padding:6px 0; list-style:none;
  z-index: 50;
  animation: suggestDrop .14s ease-out;
}
@keyframes suggestDrop{ from{ transform: translateY(-6px); opacity:0 } to{ transform:none; opacity:1 } }

.suggest-list .suggest-item{
  padding:10px 14px; cursor:pointer; font-size:14px; line-height:1.35;
  display:flex; align-items:flex-start; gap:10px;
}
.suggest-list .suggest-item:hover{ background:#f7f7fe; }
.suggest-list .suggest-item.is-active{ background:#edeafe; }
.suggest-list .suggest-item small{ color:#6f7390; }

@media (max-width:540px){
  .suggest-list{ border-radius: 14px; max-height: 60vh; }
}
#warehouse-wrapper{ position: relative; }
#warehouseSearch{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-md);
}