/* Checkout Multi-Step Wizard Styles */

/* Progress Bar */
.checkout-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  margin-bottom: var(--space-8);
}

.checkout-progress__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: default;
}

.checkout-progress__step--active {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.checkout-progress__step--done {
  color: var(--color-success);
}

.checkout-progress__step--done .checkout-progress__circle {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.checkout-progress__circle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.checkout-progress__step--active .checkout-progress__circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.checkout-progress__line {
  width: 40px;
  height: 2px;
  background: var(--color-border);
  flex-shrink: 0;
}

.checkout-progress__step--done + .checkout-progress__line {
  background: var(--color-success);
}

.checkout-progress__label {
  display: none;
}

@media (min-width: 640px) {
  .checkout-progress__label { display: inline; }
  .checkout-progress__line { width: 60px; }
}

/* Step visibility */
.checkout-step {
  display: none;
  animation: fadeIn var(--transition-base) ease;
}

.checkout-step--active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Layout */
.checkout-grid {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 768px) {
  .checkout-grid {
    grid-template-columns: 1fr 360px;
  }
}

/* Forms */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.form-group label .required {
  color: var(--color-danger);
}

.form-input,
.form-select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.1);
}

.form-input--error {
  border-color: var(--color-danger);
}

.form-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Checkboxes */
.checkout-checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  cursor: pointer;
}

.checkout-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-primary);
}

.checkout-checkbox span {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.checkout-checkbox a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Order Summary Sidebar */
.checkout-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: sticky;
  top: var(--space-4);
}

.checkout-summary h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.summary-item--product {
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.summary-item--product .summary-item__name {
  font-weight: var(--weight-medium);
}

.summary-item--product .summary-item__details {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.summary-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-3) 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  padding-top: var(--space-3);
}

.summary-discount {
  color: var(--color-success);
  font-weight: var(--weight-medium);
}

/* Cart Review (Step 1) */
.cart-review-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.cart-review-item__info {
  flex: 1;
}

.cart-review-item__name {
  font-weight: var(--weight-semibold);
}

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

.cart-review-item__price {
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  white-space: nowrap;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
}

.qty-control button {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-control button:hover {
  background: var(--color-accent-light);
}

.qty-control span {
  min-width: 24px;
  text-align: center;
  font-weight: var(--weight-medium);
}

.cart-review-item__remove {
  font-size: var(--text-xs);
  color: var(--color-danger);
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-1);
}

/* Payment Method (Step 3) */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.payment-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.payment-option:hover {
  border-color: var(--color-primary-light);
}

.payment-option--selected {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
}

.payment-option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.payment-option__info {
  flex: 1;
}

.payment-option__title {
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.payment-option__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.payment-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-white);
}

.payment-badge--muted {
  background: var(--color-border);
  color: var(--color-text-muted);
}

/* Discount Code */
.discount-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.discount-row input {
  flex: 1;
  text-transform: uppercase;
}

.discount-msg {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.discount-msg--success { color: var(--color-success); }
.discount-msg--error { color: var(--color-danger); }

/* Buttons */
.checkout-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.btn-back {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-back:hover { color: var(--color-text); }

.btn-next {
  padding: var(--space-3) var(--space-8);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-next:hover { background: var(--color-primary-light); }
.btn-next:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.btn-next--accent {
  background: var(--color-accent);
}

.btn-next--accent:hover {
  background: var(--color-accent-light);
}

/* Blocked State Warning */
.state-warning {
  display: none;
  padding: var(--space-3);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* Redirect Step */
.checkout-redirect {
  text-align: center;
  padding: var(--space-16) 0;
}

.checkout-redirect .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--space-6);
}

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

.checkout-redirect p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.checkout-redirect a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Errors */
.checkout-error {
  padding: var(--space-4);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  display: none;
}

.checkout-error--visible { display: block; }

/* Empty Cart */
.empty-cart-msg {
  text-align: center;
  padding: var(--space-12) 0;
  color: var(--color-text-muted);
}

.empty-cart-msg a {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* Slice 3: Failed-Payment Retry Prompt
   Reuses .checkout-step animation/visibility, .form-input, .btn-next,
   .checkout-error. Adds layout chrome only. */
.retry-section {
  max-width: 560px;
  margin: 0 auto;
}

.retry-loading {
  text-align: center;
  padding: var(--space-12) 0;
  color: var(--color-text-muted);
}

.retry-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--space-4);
}

.retry-prompt,
.retry-expired,
.retry-unavailable {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.retry-prompt__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

.retry-prompt__body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
}

.retry-prompt__expiry {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.retry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.retry-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.retry-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.retry-link:hover {
  color: var(--color-text);
}

/* Bug J (260508-1fz): cart-side-panel qty +/- buttons must hit 44x44 mobile
   tap target. The shared .qty-control button rule above is 28x28 (sized for
   step-1 desktop). Side-panel buttons are touch-friendlier by design — when
   the cart is opened on mobile, the larger size prevents fat-finger errors.
   Scope by `.cart-item .qty-control` so step-1 (.cart-review-item) keeps
   the existing 28x28 sizing. Apply on coarse pointers (touch screens) and
   at narrow viewports as defense-in-depth. */
.cart-item .qty-control button {
  min-width: 44px;
  min-height: 44px;
  font-size: var(--text-lg);
}

@media (pointer: coarse), (max-width: 768px) {
  .cart-item .qty-control button {
    width: 44px;
    height: 44px;
  }
}