/* Cart Page */

.page {
  max-width: var(--container);
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: var(--space-lg);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}

.panel.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

h1 { margin-top: 0; }
h3 { margin: 0 0 var(--space-md); }

/* Empty Cart */
.cart-empty {
  border: 2px dashed var(--border-hover);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--accent-light), transparent);
  padding: var(--space-xl);
  text-align: center;
  display: grid;
  place-items: center;
  gap: var(--space-md);
}

.cart-empty__art {
  width: min(260px, 85%);
}

.cart-empty__art svg {
  width: 100%;
  height: auto;
  display: block;
}

.cart-empty__title {
  font-weight: 800;
  font-size: var(--text-lg);
}

.cart-empty__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* Cart Items */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--soft);
  transition: var(--transition-fast);
}

.item:hover {
  border-color: var(--border-hover);
}

.thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  border: 1px solid var(--border);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item-title {
  font-weight: 700;
  margin: 0;
}

.muted {
  color: var(--muted);
  font-size: var(--text-sm);
}

.qty-price {
  text-align: right;
  display: grid;
  gap: var(--space-sm);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--accent-light);
  border: 1px solid var(--accent-glow);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-sm);
}

/* Quantity Controls */
.qty-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.qty-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: var(--text-md);
  font-weight: 600;
  transition: var(--transition-fast);
}

.qty-btn:hover {
  border-color: var(--border-hover);
  background: var(--soft);
}

.remove-btn {
  margin-top: var(--space-sm);
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.18);
  color: var(--error);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: var(--transition-fast);
}

.remove-btn:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.30);
}

/* Addresses & Payment */
.address-list,
.payment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.address,
.payment {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--soft);
  transition: var(--transition-fast);
}

.address:hover,
.payment:hover {
  border-color: var(--border-hover);
}

.address input[type="radio"],
.payment input[type="radio"] {
  margin-right: var(--space-sm);
  accent-color: var(--accent);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

label {
  font-size: var(--text-sm);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

input,
select {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  font-size: var(--text-base);
  transition: var(--transition-fast);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Actions */
.actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.btn {
  border: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-base);
  transition: var(--transition-fast);
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-primary:not([disabled]):hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-ghost {
  background: var(--soft);
  border: 1px solid var(--border);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--border-hover);
  background: var(--panel);
}

/* Summary */
.summary {
  display: grid;
  gap: var(--space-sm);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total {
  font-weight: 800;
  font-size: var(--text-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.bank {
  border: 1px dashed var(--border-hover);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--panel);
  font-size: var(--text-sm);
  color: var(--muted);
  display: none;
  margin-top: var(--space-sm);
}

@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; }
}

/* Checkout Overlay */
.checkout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 35, 50, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 500;
  gap: var(--space-md);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-md);
}

.checkout-overlay__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Order Result Pages */
.order-result {
  max-width: 680px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.order-result h1 {
  margin: 0;
}

.order-result__icon {
  margin-bottom: var(--space-sm);
}

.order-result__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-md);
}

/* Bank Info Box */
.bank-info-box {
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: left;
  width: 100%;
}

.bank-info-box h3 {
  margin: 0 0 var(--space-sm);
  color: var(--accent-2);
}

.bank-info-box p {
  margin: 0 0 var(--space-md);
  color: var(--muted);
  font-size: var(--text-sm);
}

.bank-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.bank-details strong {
  color: var(--ink);
  min-width: 100px;
  display: inline-block;
}

/* Order Summary Box */
.order-summary-box {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: left;
  width: 100%;
}

.order-summary-box h3 {
  margin: 0 0 var(--space-md);
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

.order-table th,
.order-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.order-table th {
  font-weight: 600;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.order-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}

.order-address {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Order Error Detail */
.order-error-detail {
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--error);
  font-size: var(--text-sm);
  width: 100%;
  text-align: center;
}

@media (max-width: 480px) {
  .page { padding: 0 var(--space-lg); }
  .panel { padding: var(--space-md); }
  .item { grid-template-columns: 48px 1fr; gap: var(--space-sm); }
  .qty-price { grid-column: 1 / -1; text-align: left; }
  .actions { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
  .order-result { padding: var(--space-xl) var(--space-lg); }
  .order-table th:nth-child(4),
  .order-table td:nth-child(4) { display: none; }
}