/* ==========================================================================
   KidSitter — Unified Checkout (login / signup / subscribe) styles.
   Only the new ks-co-* classes live here; base ks-* classes come from
   kidsitter.css, login-new.css and checkout.css.
   ========================================================================== */

.ks-co-page {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* ---------- Source-aware header ---------- */
.ks-co-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.ks-co-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--ks-primary, #2bb3a3);
  border-radius: 999px;
  background: rgba(43, 179, 163, 0.06);
  color: var(--ks-primary, #2bb3a3);
  font-size: 0.75rem;
  font-weight: 600;
}
.ks-co-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ks-foreground, #1a1a2e);
  margin: 0 0 0.25rem;
}
.ks-co-subtitle {
  font-size: 0.9rem;
  color: var(--ks-muted-foreground, #6b7280);
  margin: 0;
}

/* ---------- Plan selector ---------- */
.ks-co-plan-card {
  margin-bottom: 1.5rem;
  border: 2px solid rgba(43, 179, 163, 0.2);
}
.ks-co-plan-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ks-co-plan-heading h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}
.ks-co-plan-heading i { color: var(--ks-primary, #2bb3a3); }

.ks-co-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
}
/* Only Subscribe shown (source=contact|book force-subscribe) — single full-width card. */
.ks-co-plan-grid--single { grid-template-columns: 1fr; }
@media (max-width: 560px) {
  .ks-co-plan-grid { grid-template-columns: 1fr; }
}

.ks-co-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 1.25rem;
  border: 2px solid var(--ks-border, #e5e7eb);
  border-radius: 1rem;
  background: var(--ks-card, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
.ks-co-plan:hover { border-color: rgba(43, 179, 163, 0.4); }
.ks-co-plan.active {
  border-color: var(--ks-primary, #2bb3a3);
  box-shadow: 0 4px 16px rgba(43, 179, 163, 0.2);
}
.ks-co-plan--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ks-co-plan--disabled:hover { border-color: var(--ks-border, #e5e7eb); }

.ks-co-plan-tag {
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--ks-accent, #f6a623);
  color: var(--ks-accent-foreground, #1a1a2e);
}

.ks-co-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.ks-co-plan-name {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ks-primary, #2bb3a3);
  margin: 0;
}
.ks-co-plan--free .ks-co-plan-name { color: var(--ks-muted-foreground, #6b7280); }
.ks-co-plan-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ks-foreground, #1a1a2e);
  margin: 0.25rem 0 0;
}
.ks-co-plan-per {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ks-muted-foreground, #6b7280);
}
.ks-co-plan-sub {
  font-size: 0.75rem;
  color: var(--ks-muted-foreground, #6b7280);
  margin: 0;
}

.ks-co-radio {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(107, 114, 128, 0.3);
  border-radius: 999px;
  position: relative;
}
.ks-co-plan.active .ks-co-radio {
  border-color: var(--ks-primary, #2bb3a3);
  background: var(--ks-primary, #2bb3a3);
}
.ks-co-plan.active .ks-co-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.ks-co-plan-benefits {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.ks-co-plan-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ks-foreground, #1a1a2e);
  margin-bottom: 0.5rem;
}
.ks-co-plan-benefits li i {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--ks-primary, #2bb3a3);
}

.ks-co-cancel-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.65rem;
  border-radius: 0.5rem;
  background: var(--ks-accent, #f6a623);
  color: var(--ks-accent-foreground, #1a1a2e);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}
.ks-co-cancel-note i { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1rem; }

/* ---------- Billing cycle ---------- */
.ks-co-billing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--ks-secondary, #f3f4f6);
}
.ks-co-billing-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ks-co-billing-total { text-align: right; }
.ks-co-billing-total-label {
  display: block;
  font-size: 0.7rem;
  color: var(--ks-muted-foreground, #6b7280);
}
.ks-co-billing-total-price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ks-primary, #2bb3a3);
}

/* ---------- Signed-in banner ---------- */
.ks-co-signedin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(43, 179, 163, 0.2);
  border-radius: var(--ks-radius, 0.5rem);
  background: rgba(43, 179, 163, 0.08);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ks-foreground, #1a1a2e);
}
.ks-co-signedin i { color: var(--ks-primary, #2bb3a3); }

/* ---------- Auth gate ---------- */
.ks-co-authgate { margin-bottom: 1.5rem; }
.ks-co-step-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.ks-co-authgate-sub {
  font-size: 0.85rem;
  color: var(--ks-muted-foreground, #6b7280);
  margin: 0 0 1.25rem 2.25rem;
}

/* Login/signup pill tabs. The base .ks-tab (kidsitter.css) is an underline tab; the pillbox override in
   login-new.css is scoped to .ks-auth-card, so re-scope it here for the checkout auth-gate. */
.ks-co-authgate .ks-tabs-list {
  border-bottom: none;
  background: var(--ks-secondary, #f3f4f6);
  border-radius: var(--ks-radius, 0.5rem);
  padding: 0.25rem;
}
.ks-co-authgate .ks-tab {
  flex: 1;
  text-align: center;
  border-bottom: none;
  margin-bottom: 0;
  border-radius: calc(var(--ks-radius, 0.5rem) - 2px);
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.ks-co-authgate .ks-tab.active {
  background: var(--ks-card, #fff);
  color: var(--ks-foreground, #1a1a2e);
  border-bottom-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}
.ks-co-authgate .ks-tab:not(.active):hover {
  color: var(--ks-foreground, #1a1a2e);
}

.ks-co-intent-swap {
  text-align: center;
  margin-top: 0.75rem;
}
.ks-co-intent-swap button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--ks-muted-foreground, #6b7280);
}
.ks-co-intent-swap button:hover {
  color: var(--ks-primary, #2bb3a3);
  text-decoration: underline;
}

.ks-co-payment.hidden { display: none; }