/* ==== CHECKOUT MODAL — same look & feel as cart ========================= */

/* если cart CSS не подключён — объявим переменные (безопасно переопределятся) */
:root{
  --overlay: rgba(0,0,0,0.60);
  --panel:#171717; --card:#121212; --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;
}

/* окно checkout такое же по размерам */
.modal-checkout-window{
  background:#292929;
  border-radius:18px 0 0 18px;
  box-shadow:-10px 0 28px rgba(0,0,0,.45);
}

/* заголовок и счётчик — как в cart */
.modal-checkout-window .cart-modal-title{ color:var(--text); font-weight:800 }
.modal-checkout-window .cart-modal-count{ color:var(--muted) }

/* список позиций на чекауте — визуально тот же «cart-item» */
.checkout-item{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:14px 16px 12px;
  box-shadow:var(--card-elev);
  margin:0 6px 12px;
  color:var(--text);
}
.checkout-item h3{ margin:0 0 6px; font-size:15px; font-weight:800; color:#fff }
.checkout-item .cart-options{ list-style:none; margin:6px 0 0; padding:0 }
.checkout-item .cart-options li{ color:#d4d4d4; font-size:13px; margin:2px 0; line-height:1.35 }

/* цены внизу карточки */
.checkout-prices{ display:flex; align-items:center; gap:10px; margin-top:6px; padding-top:6px; }
.checkout-prices .old-price{ color:var(--old); text-decoration:line-through; font-weight:700; font-size:13px; opacity:.9; }
.checkout-prices .new-price{ color:#fff; font-weight:900; font-size:16px; }

/* маленький зелёный ярлык рядом с new-price */
.promo-label{
  margin-left:8px;
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  background:linear-gradient(180deg,#36f08f 0%, var(--ok) 100%);
  color:#0b2818; font-weight:800; font-size:10px; letter-spacing:.02em;
}

/* нижний блок summary в чекауте — как cart-summary */
.modal-checkout-summary{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-elev);
  margin:6px 14px 16px;
  padding:14px 16px 16px;
}

/* строка промокода: 2 → 3 колонки при активном промокоде */
.modal-checkout-summary .cart-promo{
  display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; margin:0 0 8px;
}
.modal-checkout-summary.promo-active .cart-promo{
  grid-template-columns: 1fr auto 40px; /* input | Apply | ✕ */
}

/* инпут + иконка (тот же вид) */
#modal-checkout-promo-input{
  height:40px; font-size:14px; color:#f1f1f1; width:100%;
  border:1px solid #3a3a3a; border-radius:12px; outline:none;
  background:#2b2b2b url('/img/promo-input.svg') no-repeat 12px 50%;
  background-size:16px 16px;
  padding:0 12px 0 38px;
  transition:border-color .15s, box-shadow .15s;
}
#modal-checkout-promo-input::placeholder{ color:#9b9b9b }
#modal-checkout-promo-input:focus{ border-color:#6f35ff; box-shadow:0 0 0 3px rgba(111,53,255,.25) }

/* Apply — как в cart */
#modal-checkout-apply-promo{
  height:40px; padding:0 18px;
  border:none; border-radius:12px; cursor:pointer; font-weight:800; font-size:14px;
  color:#fff; background:linear-gradient(90deg, var(--violet-3) 0%, var(--violet-2) 100%);
  box-shadow:0 6px 16px rgba(163,67,255,.35);
  transition: filter .12s, transform .04s;
}
#modal-checkout-apply-promo:hover{ filter:brightness(1.06) }
#modal-checkout-apply-promo:active{ transform:translateY(1px) }

/* крестик удаления — в сетке третьей колонкой, без рамок */
#modal-checkout-remove-promo{
  display:none; place-items:center;
  width:40px; height:40px; padding:0;
  border:none; border-radius:16px; background:#3a3a3a; color:#fff; font-size:18px; font-weight:900;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition: filter .12s, transform .04s;
}
.modal-checkout-summary.promo-active #modal-checkout-remove-promo{ display:grid; }
#modal-checkout-remove-promo:hover{ filter:brightness(1.08) }
#modal-checkout-remove-promo:active{ transform:translateY(1px) }

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

/* breakdown */
#modal-checkout-breakdown{
  border-radius:var(--radius-md); padding:10px 12px; margin-bottom:10px;
}
#modal-checkout-breakdown .breakdown-row{
  display:flex; align-items:center; justify-content:space-between; font-size:14px; color:#e9e9e9;
}
#modal-checkout-breakdown .total-row{ margin-top:8px; padding-top:10px; border-top:1px solid var(--line); font-weight:900; color:#fff; }



/* кнопки оплаты — тот же CTA */
#modal-pay-stripe.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%, #8b5cf6 52%, #9900FF 100%);
  box-shadow:0 8px 22px rgba(59,130,246,.35);
}
#modal-pay-stripe.checkout-btn:hover{ filter:brightness(1.06) }

#modal-pay-crypto.checkout-btn{
  width:100%; height:46px; border:none; border-radius:14px;
  background:#353963; color:#ffe173; font-weight:900; font-size:15px;
  box-shadow:0 8px 22px rgba(53,57,99,.35);
}

/* back to cart — лёгкая вторая кнопка */
#checkout-back-to-cart.btn-secondary{
  height:40px;
  background:rgba(255,255,255,.06);
  color:#fff; border:none; border-radius:12px;
  font-weight:700; cursor:pointer;
  transition: background .12s;
}
#checkout-back-to-cart.btn-secondary:hover{ background:rgba(255,255,255,.12) }

/* меньше зазор между заголовком и Back to Cart */
#checkout-back-to-cart{
  margin: 16px 16px 4px 16px !important; /* было 22/22/5/22 */
  width: 70% !important;
}
.modal-checkout-window .cart-modal-title{
  padding-top: 8px; /* чуть сжать верхний паддинг у заголовка */
}

/* шапка карточки как в cart */
.checkout-item-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.checkout-item-title{ font-weight:800; font-size:15px; color:#fff }

/* бейдж Promo тоньше, со свг (как в cart) */
.checkout-item .promo-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  font-weight:800; font-size:10px; letter-spacing:.02em;
  color:#0b2818;
  background:linear-gradient(180deg,#36f08f 0%, var(--ok) 100%);
}
.checkout-item .promo-badge img{ width:11px; height:11px; display:block }

/* игра и ETA — как в cart */
.cart-game{ color:#cfcfcf; font-size:13px; margin:6px 0 0 }
.cart-eta { color:#dcdcdc; font-size:13px; margin-top:6px }

/* вертикальный зазор между кнопками оплаты */
#modal-pay-stripe{ margin-top: 6px }
#modal-pay-crypto{ margin-top: 8px }

/* уникальные стили */
#modal-pay-stripe.checkout-btn{
  width:100%; height:46px; border:none; border-radius:14px;
  color:#fff; font-weight:900; font-size:15px; letter-spacing:.01em;
  background:linear-gradient(90deg,#2563EB 0%, #8b5cf6 52%, #9900FF 100%);
  box-shadow:0 8px 22px rgba(59,130,246,.35);
  transition:filter .12s, transform .04s;
}
#modal-pay-stripe.checkout-btn:hover{ filter:brightness(1.06) }
#modal-pay-stripe.checkout-btn:active{ transform:translateY(1px) }

#modal-pay-crypto.checkout-btn{
  width:100%; height:46px; border:none; border-radius:14px;
  background:linear-gradient(90deg,#2e314e 0%, #3a3f71 100%);
  color:#ffe173; font-weight:900; font-size:15px;
  box-shadow:0 8px 22px rgba(53,57,99,.35);
  transition:filter .12s, transform .04s;
}
#modal-pay-crypto.checkout-btn:hover{ filter:brightness(1.06) }
#modal-pay-crypto.checkout-btn:active{ transform:translateY(1px) }

/* discount красным, как в cart */
.checkout-discount-row .discount-amount{ color: var(--red); font-weight:800 }

.checkout-option{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; background:#1a1a1a; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; margin:0 0 10px; color:#e9e9e9; font-size:14px;
}

/* чекбокс и подпись левее */
.checkout-option label{ font-weight:700; color:#e9e9e9 }
.checkout-option input[type="checkbox"]{ width:18px; height:18px; accent-color:#7b2cff }



/* Кнопка "Login to continue" из JS: .modal-login-btn */
#modal-checkout-summary .modal-login-btn{
  /* переопределяем инлайны из JS */
  width: 100% !important;
  margin-top: 10px !important;
  height: 44px;
  border: none;
  border-radius: 12px;
  cursor: pointer;

  font-weight: 800;
  font-size: 14px;
  color: #fff;

  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
  box-shadow: 0 6px 16px rgba(59,130,246,.35);
  transition: filter .12s, transform .04s;
}
#modal-checkout-summary .modal-login-btn:hover{ filter: brightness(1.06); }
#modal-checkout-summary .modal-login-btn:active{ transform: translateY(1px); }

/* Подпись "You need to log in to place an order." */

#modal-checkout-summary > p:last-of-type{
  /* переопределяем инлайны из JS */
  margin-top: 8px !important;
  font-size: 14px !important;
  color: #e9e9e9 !important;
  text-align: center !important;

  font-weight: 700;
  line-height: 1.3;
  opacity: .95;
}

/* явный класс для текста */
#modal-checkout-summary .login-hint{
  margin-top: 8px;
  font-size: 14px;
  color: #e9e9e9;
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  opacity: .95;
}

/* выравнивание внутренних карточек с cart */
.modal-checkout-summary{ margin:6px 14px 16px; padding:14px 16px 16px }

/* сделать статус промокода тоньше, как просил ранее */
.modal-checkout-summary .promo-status{
  margin:2px 2px 8px; padding:6px 10px; border-radius:10px; font-size:12px; font-weight:700;
}

/* 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;
}

/* Кнопки оплаты: текст слева, мини-иконки справа */
#modal-pay-stripe.checkout-btn,
#modal-pay-crypto.checkout-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 10px;
}

#modal-pay-stripe .btn-label,
#modal-pay-crypto .btn-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

#modal-pay-stripe .pay-logos,
#modal-pay-crypto .pay-logos{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

#modal-pay-stripe .pay-logos img,
#modal-pay-crypto .pay-logos img{
  height: 32px;
  width: 32px;
  display: block;
  object-fit: contain;
  /* без инвертов/фильтров */
  filter: none !important;
  opacity: .95;
}