/* ============================================================
   SPEND SPROUT — checkout.css
   Checkout-specific styles. Imports ../styles/global.css for
   shared tokens, buttons, nav, footer, and base components.
   ============================================================ */

/* ── Checkout Trust Bar ────────────────────────────────────── */
.checkout-trust-bar {
  background: var(--green-50);
  border-bottom: 1px solid var(--green-100);
  padding: .6rem 0;
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem .75rem;
}
.trust-bar-item {
  font-size: .78rem;
  color: var(--green-700);
  font-weight: 600;
}
.trust-bar-sep {
  color: var(--green-300);
  font-size: .8rem;
}

/* ── Page Layout ───────────────────────────────────────────── */
.checkout-page {
  background: var(--gray-50);
  padding: 2.5rem 0 5rem;
  min-height: calc(100vh - 200px);
}
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.5rem;
}
.checkout-main {
  min-width: 0; /* prevent grid blowout */
}
.checkout-sidebar {
  position: sticky;
  top: 5.5rem;
}

/* ── Step Progress Indicator ───────────────────────────────── */
.step-progress {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}
.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  position: relative;
}
.step-dot {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  color: var(--gray-500);
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s, box-shadow .25s;
}
.step-label {
  font-size: .72rem;
  color: var(--gray-400);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .25s;
}
.step-indicator.active .step-dot {
  background: var(--green-600);
  color: var(--white);
  box-shadow: 0 0 0 4px var(--green-100);
}
.step-indicator.active .step-label {
  color: var(--green-700);
}
.step-indicator.completed .step-dot {
  background: var(--green-500);
  color: var(--white);
}
.step-indicator.completed .step-dot::after {
  content: '✓';
  font-size: .9rem;
}
.step-indicator.completed .step-dot { font-size: 0; } /* hide number when showing ✓ */
.step-indicator.completed .step-label {
  color: var(--green-600);
}
.step-connector {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  margin: 0 .5rem;
  margin-bottom: 1.15rem; /* align with dot center */
  transition: background .3s;
}
.step-connector.active {
  background: var(--green-400);
}

/* ── Checkout Steps (animation) ────────────────────────────── */
.checkout-step {
  display: none;
}
.checkout-step.active {
  display: block;
  animation: stepReveal .38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.checkout-step.step-exit {
  animation: stepExit .22s ease forwards;
}
@keyframes stepReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes stepExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ── Step Header ───────────────────────────────────────────── */
.step-header {
  margin-bottom: 1.75rem;
}
.step-header h2 {
  font-family: 'PT Sans', var(--font-sans);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: .3rem;
}
.step-header p {
  font-size: .93rem;
  color: var(--gray-500);
}

/* ── Plan Cards ────────────────────────────────────────────── */
.plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
.plan-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 2px solid var(--gray-200);
  cursor: pointer;
  position: relative;
  transition: border-color .2s, box-shadow .2s, transform .18s;
  overflow: hidden;
}
.plan-card:hover {
  border-color: var(--green-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.plan-card.selected {
  border-color: var(--green-500);
  box-shadow: 0 0 0 1px var(--green-500), var(--shadow-md);
}
.plan-card--popular {
  border-color: var(--green-400);
}
.plan-card--popular.selected {
  border-color: var(--green-600);
  box-shadow: 0 0 0 1px var(--green-600), var(--shadow-lg);
}
.popular-badge {
  display: block;
  background: var(--green-600);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  padding: .4rem .75rem;
  text-transform: uppercase;
}
.plan-card-inner {
  padding: 1.25rem 1.25rem 1.5rem;
}
.plan-card-top {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .85rem;
}
.plan-radio {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .35rem;
  transition: border-color .18s;
}
.plan-card.selected .plan-radio {
  border-color: var(--green-600);
}
.radio-dot {
  width: .5rem;
  height: .5rem;
  border-radius: var(--radius-full);
  background: var(--green-600);
  opacity: 0;
  transform: scale(0);
  transition: opacity .18s, transform .18s;
}
.plan-card.selected .radio-dot {
  opacity: 1;
  transform: scale(1);
}
.plan-card-header {
  flex: 1;
}
.plan-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: .15rem;
}
.plan-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.1;
}
.plan-period {
  font-size: .78rem;
  font-weight: 400;
  color: var(--gray-400);
}
.plan-desc {
  font-size: .85rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.plan-features li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--gray-700);
}
.feat-check {
  color: var(--green-600);
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}
.feat-x {
  color: var(--gray-300);
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}
.feat-missing {
  opacity: .6;
}

/* ── Step Actions ──────────────────────────────────────────── */
.step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-100);
}
.step-continue { min-width: 180px; }
.step-back {
  color: var(--gray-500);
  border-color: transparent;
  padding-left: .5rem;
}
.step-back:hover {
  background: transparent;
  color: var(--gray-700);
}
.btn-arrow { margin-left: .15rem; }

/* ── Form Styles ───────────────────────────────────────────── */
.checkout-form {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid var(--gray-200);
  margin-bottom: 1rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.1rem;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group label {
  font-size: .83rem;
  font-weight: 600;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.form-group input {
  padding: .7rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  color: var(--gray-800);
  background: var(--white);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font-sans);
}
.form-group input::placeholder {
  color: var(--gray-300);
}
.form-group input:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-100);
}
.form-group input.has-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.field-error {
  font-size: .78rem;
  color: #ef4444;
  font-weight: 500;
  min-height: .9rem;
  line-height: 1.4;
  display: none;
}
.field-error.visible {
  display: block;
}
.field-help {
  font-size: .78rem;
  color: var(--gray-400);
}

/* ── Payment Tabs ──────────────────────────────────────────── */
.payment-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: .4rem;
}
.payment-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  font-size: .83rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.payment-tab:hover {
  background: var(--gray-50);
  color: var(--gray-700);
}
.payment-tab.active {
  background: var(--green-600);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.payment-tab-icon {
  font-size: 1rem;
  line-height: 1;
}
.paypal-icon {
  font-style: normal;
  font-weight: 800;
  font-size: .85rem;
  font-family: var(--font-sans);
}
.pp-p  { color: #003087; }
.pp-p2 { color: #009cde; }
.payment-tab.active .pp-p,
.payment-tab.active .pp-p2 {
  color: var(--white);
}

/* ── Payment Panels ────────────────────────────────────────── */
.payment-panel {
  animation: stepReveal .3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.payment-panel.hidden {
  display: none;
}

/* ── Stripe Element Wrap ───────────────────────────────────── */
.stripe-element-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.stripe-placeholder {
  width: 100%;
  padding: .7rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  color: var(--gray-800);
  background: var(--white);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font-sans);
  letter-spacing: .04em;
}
.stripe-placeholder::placeholder {
  color: var(--gray-300);
  letter-spacing: .02em;
}
.stripe-placeholder:focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-100);
}
.stripe-placeholder.has-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
/* Stripe Elements iframe wrapper — matches our input styling */
.stripe-element-wrap .StripeElement {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.stripe-element-wrap .StripeElement--focus {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-100);
}
.stripe-element-wrap .StripeElement--invalid {
  border-color: #ef4444;
}
.card-type-icon {
  position: absolute;
  right: .85rem;
  font-size: 1.1rem;
  pointer-events: none;
  transition: opacity .2s;
}
.cvc-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  color: var(--gray-500);
  font-size: .65rem;
  font-weight: 700;
  cursor: help;
}

/* ── Security Badges ───────────────────────────────────────── */
.security-badges {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  padding: .3rem .8rem;
  font-size: .75rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* ── Alternative Payment (PayPal / Apple Pay) ──────────────── */
.alt-payment-info {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
}
.alt-payment-info p {
  font-size: .9rem;
  color: var(--gray-600);
  max-width: 380px;
  margin: 0 auto .75rem;
  line-height: 1.65;
}
.alt-payment-note {
  font-size: .8rem !important;
  color: var(--gray-400) !important;
}
.paypal-logo-wrap {
  margin-bottom: 1.25rem;
}
.paypal-logo {
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-family: var(--font-sans);
}
.pp-blue { color: #003087; }
.pp-sky  { color: #009cde; }
.apple-pay-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.apple-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--gray-900);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: .75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: .75rem;
  transition: background .15s;
}
.apple-pay-btn:not(:disabled):hover { background: var(--gray-800); }
.apple-pay-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Pay Button Loading State ──────────────────────────────── */
#pay-btn {
  position: relative;
  min-width: 160px;
  transition: background .18s, border-color .18s, opacity .2s;
}
#pay-btn.loading {
  pointer-events: none;
  opacity: .8;
}
.btn-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: var(--white);
  border-radius: var(--radius-full);
  animation: spin .7s linear infinite;
  vertical-align: middle;
}
.btn-spinner.hidden { display: none; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Order Summary Sidebar ─────────────────────────────────── */
.order-summary {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.order-summary-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-100);
}
.order-plan-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.order-plan-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
}
.order-plan-badge {
  background: var(--green-100);
  color: var(--green-700);
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .6rem;
  border-radius: var(--radius-full);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.order-line-items {
  margin-bottom: .75rem;
}
.order-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .45rem 0;
}
.order-line-desc {
  font-size: .88rem;
  color: var(--gray-600);
}
.order-line-price {
  font-size: .88rem;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
}
.order-divider {
  height: 1px;
  background: var(--gray-200);
  margin: .75rem 0;
}
.order-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .4rem;
}
.order-total-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--gray-800);
}
.order-total-amount {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--gray-900);
}
.order-billing-note {
  font-size: .78rem;
  color: var(--gray-400);
  margin-bottom: 1.5rem;
}
.order-trust-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-100);
}
.order-trust-item {
  font-size: .78rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ── Mobile Summary Banner ─────────────────────────────────── */
.mobile-summary {
  display: none;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.mobile-summary-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  gap: 1rem;
}
.mobile-summary-label {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.mobile-summary-plan {
  font-size: .9rem;
  font-weight: 700;
  color: var(--gray-900);
}
.mobile-summary-price {
  font-size: .83rem;
  color: var(--green-700);
  font-weight: 600;
}
.mobile-summary-chevron {
  font-size: .65rem;
  color: var(--gray-400);
  transition: transform .25s;
}
.mobile-summary-chevron.open {
  transform: rotate(180deg);
}
.mobile-summary-body {
  display: none;
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--gray-100);
}
.mobile-summary-body.open {
  display: block;
  animation: stepReveal .25s ease both;
}
.mobile-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--gray-600);
  padding: .75rem 0 .5rem;
}
.mobile-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  font-weight: 700;
  color: var(--gray-900);
  padding-top: .5rem;
  border-top: 1px solid var(--gray-200);
}

/* ── Confirmation Screen ───────────────────────────────────── */
.confirmation-screen {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.confirmation-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  display: block;
  animation: sproutBounce .8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sproutBounce {
  0%   { opacity: 0; transform: scale(0.5) translateY(10px); }
  60%  { transform: scale(1.2) translateY(-4px); }
  80%  { transform: scale(0.95) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.confirmation-title {
  font-family: 'PT Sans', var(--font-sans);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: .5rem;
}
.confirmation-sub {
  font-size: 1rem;
  color: var(--gray-600);
  max-width: 420px;
  margin: 0 auto 2rem;
  line-height: 1.65;
}
.confirmation-details {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  padding: 1.25rem 1.5rem;
  margin: 0 auto 2rem;
  max-width: 400px;
  text-align: left;
}
.confirmation-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid var(--gray-200);
  gap: 1rem;
}
.confirmation-row:last-child {
  border-bottom: none;
}
.confirmation-row--total {
  padding-top: .75rem;
  margin-top: .25rem;
  border-top: 2px solid var(--gray-300) !important;
  border-bottom: none !important;
}
.conf-label {
  font-size: .83rem;
  color: var(--gray-500);
}
.conf-value {
  font-size: .9rem;
  color: var(--gray-900);
  text-align: right;
  word-break: break-all;
}
.confirmation-row--total .conf-value {
  font-size: 1.05rem;
  color: var(--green-700);
}
.confirmation-next-steps {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin: 0 auto 2rem;
  max-width: 400px;
  text-align: left;
}
.confirmation-next-steps h3 {
  font-size: .85rem;
  font-weight: 700;
  color: var(--green-700);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}
.confirmation-next-steps ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.confirmation-next-steps li {
  font-size: .87rem;
  color: var(--gray-700);
  line-height: 1.55;
}
.confirmation-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .checkout-sidebar {
    display: none;
  }
  .mobile-summary {
    display: block;
  }
  .checkout-page {
    padding: 1.5rem 0 4rem;
  }
}

@media (max-width: 600px) {
  .plan-cards {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .payment-tabs {
    flex-direction: column;
  }
  .payment-tab {
    justify-content: flex-start;
    padding: .75rem 1rem;
  }
  .trust-bar-sep { display: none; }
  .trust-bar-inner { justify-content: flex-start; gap: .3rem .5rem; }
  .step-label { display: none; }
  .checkout-trust-bar { display: none; }
  .security-badges { flex-direction: column; }
  .confirmation-screen { padding: 2rem 1.25rem; }
}

@media (max-width: 400px) {
  .step-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .step-continue { text-align: center; }
  .step-back {
    text-align: center;
    border: 1px solid var(--gray-200) !important;
  }
}