/* Checkout / order page — layered on top of style.css, reusing its design tokens
   (--blue, --border, --radius, --shadow-sm, --text-muted, etc.) for consistency. */

.order { max-width: 960px; margin: 0 auto; padding: 48px 24px 56px; }
.order__title { text-align: center; margin: 0 0 8px; font-size: clamp(1.5rem, 4vw, 1.875rem); }
.order__subtitle { text-align: center; color: var(--text-muted); margin: 0 0 36px; }

/* Two columns on desktop (payment + benefits sidebar); stacks at 768px — matches the
   legacy ~63/35 split that collapsed at the same breakpoint. */
.order__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}
.checkout { min-width: 0; }
@media (max-width: 768px) {
  .order__wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Plan selector (radio cards) ---- */
.plan-select { display: grid; gap: 12px; margin-bottom: 28px; }
.plan-option {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.plan-option:hover { border-color: var(--blue-light); }
.plan-option.selected { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.plan-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.plan-option__radio {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid var(--border);
  border-radius: 50%;
  position: relative;
}
.plan-option.selected .plan-option__radio { border-color: var(--blue); }
.plan-option.selected .plan-option__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--blue);
}
.plan-option__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.plan-option__name { font-weight: 700; }
.plan-option__save {
  margin-left: 8px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-light);
  padding: 2px 8px;
  border-radius: 999px;
}
.plan-option__price { color: var(--text-muted); font-size: .9rem; }
.plan-option__price s { color: var(--text-muted); }

/* ---- Email field ---- */
.field { margin-bottom: 24px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field__hint { color: var(--text-muted); font-size: .85rem; margin: 0 0 10px; }
.field input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font: inherit;
  border: 2px solid var(--border);
  border-radius: var(--radius);
}
.field input:focus { outline: none; border-color: var(--blue); }

/* ---- Summary ---- */
.summary {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.summary__row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.summary__row--discount { color: var(--blue); }
.summary__row--total {
  font-weight: 700;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin: 4px 0 0;
}

/* ---- 30-day guarantee ---- */
.guarantee {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--blue-light);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.guarantee img { width: 40px; height: 40px; flex: 0 0 auto; }
.guarantee strong { display: block; }
.guarantee p { margin: 4px 0 0; color: var(--text-muted); font-size: .9rem; }

/* ---- PayPal button + states ---- */
#paypal-button-container { min-height: 48px; }
.pay-error {
  display: none;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.pay-error.show { display: block; }

.spinner { display: none; width: 28px; height: 28px; margin: 16px auto 0; }
.checkout.is-loading .spinner {
  display: block;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.terms { color: var(--text-muted); font-size: .8rem; text-align: center; margin-top: 16px; }
.terms a { color: var(--blue); }
.switch-type { text-align: center; margin-top: 16px; }
.switch-type a { color: var(--blue); font-size: .9rem; }

/* ---- Benefits sidebar (right column on desktop, below on mobile) ---- */
.benefits {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.benefits h2 { margin: 0 0 16px; font-size: 1.1rem; }
.benefits ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.benefits li { display: flex; gap: 10px; align-items: flex-start; }
.benefits li::before { content: "✓"; color: var(--blue); font-weight: 800; }