/* ToyCraftWorld - Checkout Page Specific Styles */

.checkout-flow {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
  max-width: 780px;
}
.breadcrumb {
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-3);
  color: var(--gray-500);
}
.breadcrumb ol {
  display: flex;
  gap: .5em;
  list-style: none;
  padding: 0;
}
.breadcrumb li+li::before {
  content: "/";
  color: var(--gray-400);
  margin: 0 .45em 0 .15em;
}
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.order-summary {
  margin-bottom: var(--space-3);
  background: var(--gray-50);
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
}
.order-summary #cart-summary-list {
  margin-bottom: var(--space-2);
}
.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  gap: var(--space-2);
  font-size: var(--font-size-base);
}
.cart-item-row:not(:last-child) {
  border-bottom: 1px solid var(--gray-200);
}

.order-totals {
  display: flex;
  justify-content: space-between;
  margin: .2em 0;
}
.order-total-final {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--color-primary-dark);
  margin-top: var(--space-2);
}

.shipping-details .shipping-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}
.shipping-details .form-group,
.shipping-details .form-group.delivery-estimate {
  display: flex;
  flex-direction: column;
}
.shipping-details .form-group.delivery-estimate {
  grid-column: span 2;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  margin-top: .3em;
}

@media (max-width:600px) {
  .checkout-flow {
    padding: 0;
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .shipping-details .shipping-grid {
    grid-template-columns: 1fr;
  }
}

.form-group,
.form-group-inline,
.form-radio {
  margin-bottom: var(--space-2);
}
.form-group-inline {
  display: flex;
  gap: var(--space-2);
}
.form-radio {
  display: flex;
  align-items: center;
  gap: .8em;
}
.payment-options {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.payment-secure {
  margin-top: var(--space-2);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: .5em;
}
.secure-icon {
  font-size: 1.3em;
}
.customer-service-list {
  padding: 0 0 0 var(--space-4);
  margin-bottom: var(--space-2);
}
.service-note {
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: var(--font-size-sm);
}
.return-policy-list {
  padding: 0 0 0 var(--space-4);
  color: var(--gray-700);
  font-size: var(--font-size-sm);
}

.reviews-list {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.review {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-width: 180px;
  flex: 1;
  box-shadow: 0 2px 8px rgba(255,127,80,0.06);
  margin-bottom: var(--space-2);
}
.review-author {
  display: block;
  margin-top: .7em;
  color: var(--gray-500);
  font-size: var(--font-size-xs);
  font-style: italic;
}

.actions-area {
  margin-top: var(--space-4);
  text-align: right;
}
.actions-area .button {
  min-width: 210px;
  font-size: var(--font-size-lg);
}

.final-thankyou {
  margin: var(--space-6) auto;
  text-align: center;
  background: var(--color-success);
  color: #fff;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 510px;
}
.final-thankyou h2 {
  color: #fff;
  margin-bottom: var(--space-2);
}
.final-thankyou .button {
  margin-top: var(--space-3);
  background: #fff;
  color: var(--color-success);
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.final-thankyou .button:hover, .final-thankyou .button:focus {
  background: var(--gray-200);
}

/* Hide confirmation cards initially */
#order-confirmation[hidden], #final-thankyou[hidden] { display: none !important; }

/* Error summary for accessibility */
.checkout-form .error-summary {
  background: var(--color-danger);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  font-weight: 600;
}