/* css/redesign-cart-checkout.css
   Фаза 3 редизайна (docs/REDESIGN_PLAN.md): корзина и checkout-модалка под
   Graphite/Gold. Переопределения через --rd-* токены поверх css/base.css —
   разметка/логика (js/core/cart.js, js/core/checkout/checkout-core.js,
   checkout-helpers.js) не переписаны, только визуальные классы + утилиты
   Фазы 0 (.rd-snake, .rd-fly-away-*). */

#cartPage,
#checkoutModal {
  font-family: var(--rd-font-family);
}

/* ===== Корзина ===== */
#cartPage h2 {
  color: var(--rd-text);
  font-weight: 800;
}

#cartPage .cart-clear-btn {
  background: none;
  border: 1px solid oklch(0.5 0.15 25 / 0.5);
  color: oklch(0.72 0.15 25);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8em;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.15s;
}
#cartPage .cart-clear-btn:hover {
  background: oklch(0.5 0.15 25 / 0.15);
}

#cartPage .cart-item {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
}

#cartPage .cart-item-name {
  color: var(--rd-text);
}
#cartPage .cart-item-game {
  font-size: 0.85em;
  color: var(--rd-text-muted);
  margin-top: 2px;
}
#cartPage .cart-item-price {
  color: var(--rd-text-muted);
}
#cartPage .cart-item-total {
  font-weight: 700;
  min-width: 80px;
  text-align: right;
  color: var(--rd-gold);
}

#cartPage .qty-btn {
  background: var(--rd-panel-header);
  border: 1px solid var(--rd-border);
  color: var(--rd-text);
}

#cartPage .remove-btn {
  background: none;
  border: none;
  color: var(--rd-text-muted);
  font-size: 1.3em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 50%;
}
#cartPage .remove-btn:hover {
  color: oklch(0.72 0.15 25);
  background: oklch(0.5 0.15 25 / 0.15);
}

#cartPage .cart-total {
  color: var(--rd-gold);
}

#cartPage .btn#checkoutBtn {
  background: var(--rd-gold);
  color: var(--rd-on-gold);
  border-radius: var(--rd-radius-pill);
}
#cartPage .btn#checkoutBtn:hover {
  background: oklch(0.82 0.1 85);
}

/* ===== Checkout-модалка ===== */
#checkoutModal {
  background: var(--rd-panel-header);
  border: 1px solid var(--rd-border-gold);
  border-radius: var(--rd-radius-card);
}
#checkoutModal h2 {
  color: var(--rd-text);
  font-weight: 800;
}
#checkoutModal .form-group label {
  color: var(--rd-text-muted);
}
#checkoutModal input,
#checkoutModal textarea {
  background: var(--rd-bg);
  border: 1px solid var(--rd-border);
  color: var(--rd-text);
  border-radius: 8px;
}
#checkoutModal .checkout-subtotal {
  color: var(--rd-text-muted);
}
#checkoutModal .checkout-total strong {
  color: var(--rd-gold);
}
#checkoutModal .checkout-field-snake {
  border-radius: 10px;
  padding: 2px;
}
#checkoutModal .checkout-field-snake input {
  width: 100%;
  box-sizing: border-box;
}
#checkoutModal .btn {
  background: var(--rd-gold);
  color: var(--rd-on-gold);
  border-radius: var(--rd-radius-pill);
}
#checkoutModal .btn:hover {
  background: oklch(0.82 0.1 85);
}
#checkoutModal #checkoutError {
  color: oklch(0.65 0.16 25);
}