/* ==== CART MODAL — dark/violet theme (full-width promo, better close) ==== */
:root{
  --overlay: rgba(0,0,0,0.60);
  --panel:#171717; --card:#242424; --card-elev:0 6px 20px rgba(0,0,0,.35);
  --text:#f3f3f3; --muted:#b1b1b1; --line:rgba(255,255,255,.12);
  --old:#8e8e8e; --red:#e33232; --ok:#19c664;
  --violet-2:#a343ff; --violet-3:#7b2cff;
  --radius-lg:16px; --radius-md:12px;
}

/* Overlay + panel */
.cart-modal-overlay{
  position:fixed; inset:0; z-index:25000;
  display:flex; justify-content:flex-end; align-items:stretch;
  background:var(--overlay); animation:fadeIn .25s ease-out both;
}
@keyframes fadeIn{from{background:rgba(0,0,0,0)} to{background:var(--overlay)}}

.cart-modal{
  width:410px; max-width:100vw; height:100vh;
  background:#292929;
  border-radius:18px 0 0 18px;
  display:flex; flex-direction:column; overflow:hidden;
  animation:slideIn .30s cubic-bezier(.37,1.47,.64,1);
  box-shadow:-10px 0 28px rgba(0,0,0,.45);
}
@keyframes slideIn{from{transform:translateX(100%)} to{transform:translateX(0)}}



/* Close (больше, с hover) */
.cart-modal-close{
  position:absolute; right:10px; top:8px;
  width:40px; height:40px; display:grid; place-items:center;
  background: transparent;   /* было rgba(255,255,255,.06) */
  border: none;               /* убираем рамку */
  border-radius: 12px;
  color:#fff; font-size:22px; line-height:1;
  cursor:pointer; z-index:10;
  transition: background .15s, opacity .15s;
}
.cart-modal-close:hover{ background: rgba(255,255,255,.08); }

/* Header */
.cart-modal-title{
  margin:0; padding:22px 22px 8px;
  color:var(--text); font-weight:800; font-size:20px; line-height:1.15;
  display:flex; align-items:flex-end; gap:10px;
}
.cart-modal-count{color:var(--muted); font-weight:600; font-size:15px;}

/* List */
.cart-modal-list-wrapper{
  flex:1 1 0; min-height:0; padding:10px 8px 14px; overflow:auto;
  scrollbar-width:thin; scrollbar-color:#2d2d2d #1a1a1a;
}
.cart-modal-list-wrapper::-webkit-scrollbar{width:8px; background:#1a1a1a}
.cart-modal-list-wrapper::-webkit-scrollbar-thumb{background:#2d2d2d; border-radius:10px}

/* Item card */
.cart-item{
  background: #121212;
  border-radius:var(--radius-lg);
  padding:14px 16px 12px;
  box-shadow:var(--card-elev);
  margin:0 6px 12px;
  color:var(--text);
}
.cart-item-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cart-item-title{font-weight:800; font-size:15px; color:#fff}

/* green Promo badge with 12x12 svg */
.promo-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 2px 8px;       /* было 3px 9px */
  border-radius:999px;
  font-weight:800; font-size:10px;  /* было 11px */
  letter-spacing:.02em;
  color:#0b2818;
  background:linear-gradient(180deg,#36f08f 0%, var(--ok) 100%);
}
.promo-badge img{ width:11px; height:11px; display:block; } /* было 12×12 */

/* meta */
.cart-game{color:#cfcfcf; font-size:13px; margin:6px 0 0}
.cart-options{list-style:none; margin:6px 0 0; padding:0}
.cart-options li{color:#d4d4d4; font-size:13px; margin:2px 0; line-height:1.35}
.cart-eta{color:#dcdcdc; font-size:13px; margin-top:14px}

/* PRICE row + remove icon */
.cart-item-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:2x; padding-top:2px; 
}
.cart-item-price{display:flex; align-items:center; gap:10px;}
.old-price{color:var(--old); text-decoration:line-through; font-weight:700; font-size:13px; opacity:.9;}
.final-price{color:#fff; font-weight:900; font-size:16px;}

.modal-remove-icon{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  border:none;                 /* было border:1px solid ... */
  background:transparent;      /* убираем фон */
  cursor:pointer;
  transition: background .15s, transform .06s, opacity .12s;
}
.modal-remove-icon img{
  width:18px; height:18px; display:block;
  filter: none !important;     /* было invert(1) opacity(.9) */
  opacity: 1;
}
.modal-remove-icon:hover{ background: rgba(255,255,255,.08); }
.modal-remove-icon:active{ transform: translateY(1px); }

/* Empty */
.cart-empty{min-height:260px; display:flex; align-items:center; justify-content:center; color:#e9e9e9; opacity:.85; text-align:center;}

/* ── Summary: как cart-item по ширине + нижний отступ ───────────────────── */
.cart-summary{
  position:relative;
  background: #121212;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-elev);
  /* wrapper padding 8px + card margin 6px = 14px */
  margin:6px 14px 16px;
  padding:14px 16px 16px;
}

/* Promo row — ВСЮ ширину: инпут + Apply */
.cart-promo{
  display:grid;
  grid-template-columns: 1fr auto; /* инпут тянется, Apply — авто */
  gap:8px;
  margin:0 0 8px;
  transition: padding-right .2s ease;
}



/* инпут с иконкой */
.cart-promo input[type="text"]{
  height:40px; font-size:14px; color:#f1f1f1;
  border:1px solid #3a3a3a; border-radius:12px; outline:none;
  background:#2b2b2b url('/img/promo-input.svg') no-repeat 12px 50% !important;
  background-size:16px 16px !important;
  padding:0 12px 0 38px;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.cart-promo input[type="text"]::placeholder{color:#9b9b9b}
.cart-promo input[type="text"]:focus{border-color:#6f35ff; box-shadow:0 0 0 3px rgba(111,53,255,.25);}

/* Apply — фиксированный «чип», не меняем ширину при активном промо */
.promo-btn{
  height:40px; padding:0 18px; border:none; border-radius:12px; cursor:pointer;
  font-weight:800; font-size:14px; transition:transform .04s, filter .12s, opacity .12s;
}
.promo-btn-apply{
  color:#fff; background:linear-gradient(90deg, var(--violet-3) 0%, var(--violet-2) 100%);
  box-shadow:0 6px 16px rgba(163,67,255,.35);
}
.promo-btn-apply:hover{filter:brightness(1.06)}
.promo-btn-apply:active{transform:translateY(1px)}

.cart-promo{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
  margin:0 0 8px;
  align-items:center;
}

/* когда промокод активен — добавляем 3-ю колонку под кнопку удаления */
.cart-summary.promo-active .cart-promo{
  grid-template-columns: 1fr auto 40px; /* 40px = диаметр кнопки */
}

/* кнопка удаления теперь в потоке сетки, НЕ absolute */
.cart-promo .promo-btn-remove{
  display:none;           /* включаем в JS как и раньше */
  width:40px; height:40px;
  border-radius:16px;
  padding:0;
  display:none;           /* по умолчанию скрыта */
  place-items:center;
  background:#3a3a3a; color:#fff; border:none;
  font-weight:900; font-size:18px; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .06s, filter .12s, opacity .12s;
}
/* при активном промокоде показываем */
.cart-summary.promo-active .promo-btn-remove{ display:grid; }

/* инпут и Apply — без изменений */
.cart-promo input[type="text"]{
  height:40px; font-size:14px; color:#f1f1f1;
  border:1px solid #3a3a3a; border-radius:12px; outline:none;
  background:#2b2b2b url('/img/promo-input.svg') no-repeat 12px 50% !important;
  background-size:16px 16px !important;
  padding:0 12px 0 38px;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.promo-btn.promo-btn-apply{
  height:40px; padding:0 18px;
}

/* Promo status */
/* тонкий статус под промокод */
.promo-status{
  display:none;
  margin: 2px 2px 8px;
  padding: 6px 10px;        /* было 8px 12px */
  border-radius: 10px;      /* было 12px */
  font-size: 12px;          /* было 13px */
  font-weight: 700;         /* было 800 */
}
.promo-status.success{ display:block; color:#062b17; background:linear-gradient(180deg,#059936 0%, #09FF5B 100%); }
.promo-status.error{ display:block; color:#ffe5e5; background:linear-gradient(180deg,#72151E 0%, #FF0000 100%); }
.promo-status.error{ display:block; color:#ffe5e5; background:linear-gradient(180deg,#72151E 0%, #FF0000 100%);}

/* Breakdown */
.cart-total-breakdown{
  border-radius:var(--radius-md); padding:10px 12px; margin-bottom:10px;
}
.cart-subtotal,.cart-discount,.cart-total-main{
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; color:#e9e9e9;
}
.cart-discount span:last-child{color:var(--red); font-weight:800;}
.cart-total-main{
  margin-top:8px; padding-top:10px; border-top:1px solid var(--line);
  font-size:16px; font-weight:900; color:#fff;
}

/* CTA */
.checkout-btn{
  width:100%; height:46px; border:none; border-radius:14px;
  color:#fff; font-weight:900; font-size:15px; letter-spacing:.01em; cursor:pointer;
  background:linear-gradient(90deg,#2563EB 0%, #720FFE 52%, #9900FF 100%);
  box-shadow:0 8px 22px rgba(59,130,246,.35);
  transition:filter .12s, transform .04s;
}
.checkout-btn:hover{filter:brightness(1.06)}
.checkout-btn:active{transform:translateY(1px)}

/* Mobile tweaks */
@media (max-width:700px){
  .cart-modal{width:100vw; border-radius:0}
  .cart-modal-title{padding:18px 14px 8px}
  .cart-modal-list-wrapper{padding-left:6px; padding-right:6px}
  .cart-summary{margin:6px 12px 16px; padding:12px 12px 14px}
  .cart-item{margin-left:4px; margin-right:4px; padding:12px 12px 10px}
}
.cart-modal-overlay.closing {
  animation: fadeIn .25s ease-out reverse both;   /* то же, что на открытии, но reverse */
  pointer-events: none;                            /* блокируем клики во время закрытия */
}
.cart-modal-overlay.closing .cart-modal {
  animation: slideIn .30s cubic-bezier(.37,1.47,.64,1) reverse both !important;
}

/* уважим системную настройку */
@media (prefers-reduced-motion: reduce) {
  .cart-modal-overlay,
  .cart-modal-overlay.closing,
  .cart-modal-overlay .cart-modal,
  .cart-modal-overlay.closing .cart-modal {
    animation: none !important;
  }
}

/* cart + checkout используют один и тот же .cart-modal */
.cart-modal {
  height: 100vh;   /* фолбэк для старых браузеров */
  height: 100dvh;  /* реальная высота видимой области */
}

/* опционально: и сам оверлей, чтобы не было зазоров */
.cart-modal-overlay {
  height: 100vh;
  height: 100dvh;
}
.cart-summary,
.modal-checkout-summary {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  margin-bottom: max(16px, env(safe-area-inset-bottom));
}
.cart-modal-list-wrapper{
  -webkit-overflow-scrolling: touch;
}

/* Keep viewport scrollbar reserved and prevent page jump on modal open */
html{
  overflow-y: scroll;                 /* всегда показываем дорожку скролла */
  scrollbar-gutter: stable;/* резервируем место под неё */
}

/* Prevent scroll chaining from modal to page */
.cart-modal-overlay{
  overscroll-behavior: contain;
}