/* CHECKOUT PAGE STYLES: immersive, futuristic, responsive layout */

.checkout-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
  margin-bottom: var(--space-12);
}
@media (max-width: 1100px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .checkout-aside {
    margin-top: 0;
  }
}
.checkout-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.checkout-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.order-summary .cart-items {
  margin: 0 0 var(--space-3) 0;
  padding: 0;
  list-style: none;
  gap: var(--space-2);
  display: flex;
  flex-direction: column;
}
.cart-item {
  border-bottom: 1px dashed var(--color-gray-200);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}
.cart-item:last-child {
  border-bottom: none;
}
.cart-item-desc {
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}
.cart-item-qty {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}
.cart-item-price {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-success);
}
.shipping-options {
  margin-bottom: var(--space-3);
}
.order-costs,
.order-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-base);
}
.order-total {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
}
.required {
  color: var(--color-danger);
  margin-left: 2px;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
@media (max-width: 650px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  letter-spacing: 0.02em;
}
.payments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.payments-list input {
  width: auto;
}
.payments-list > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.payments-icons {
  display: inline-flex;
  gap: 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.promo-section .promo-form {
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.promo-section input[type="text"] {
  max-width: 180px;
  flex: 1 1 160px;
}
.promo-msg {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  min-height: 1.2em;
  margin-bottom: 0;
}
.order-confirm-list {
  list-style: none;
  margin: 0 0 var(--space-3) 0;
  padding: 0;
  color: var(--color-gray-400);
}
.order-submit {
  width: 100%;
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-lg);
  background: linear-gradient(90deg,var(--color-primary),var(--color-success));
  color: #13244e;
}
.order-submit:hover, .order-submit:focus-visible {
  background: linear-gradient(90deg,var(--color-primary-dark),var(--color-success));
  color: #fff;
}
.order-safe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
}
.icon-lock { display: inline-flex; vertical-align: middle; }
.account-offer {
  text-align: center;
  background: linear-gradient(110deg,var(--color-surface) 70%,#1e2245 100%);
}
.account-offer .button { margin-top: var(--space-2); }
.support-section ul,
.return-policy ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.support-section a {
  color: var(--color-primary);
}
@media (max-width: 750px) {
  .checkout-grid {
    padding: 0;
    margin: var(--space-4) 0 var(--space-8) 0;
  }
  .card {
    padding: var(--space-4);
  }
  main {
    padding-bottom: var(--space-8);
  }
}

/* Highlight step on error (extra accessible visual cue) */
input:invalid, textarea:invalid {
  border-color: var(--color-danger);
  background: rgba(255,86,91,0.06);
}

/* Print styles */
@media print {
  header, footer, .cookie-consent-banner, .checkout-aside, .account-offer {
    display: none !important;
  }
  .container { max-width: 100vw; padding: 0; }
  .card { box-shadow: none; border: 1px solid var(--color-gray-300); }
}