/* Global scroll padding to avoid header overlap */
html { scroll-padding-top: calc(var(--nav-h, 72px) + 16px); }

/* Prevent clipping under navbar */
:root { --nav-h: 64px; }

/* Container widths aligned with landing */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.landing-header {
  position: relative !important;
}
.footer {
  margin-top: 70px;
}
/* Choose plan grid spacing */
.choose-plan { padding: 8px 0 8px 0; scroll-margin-top: calc(var(--nav-h) + 12px); }
.choose-plan .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1024px){ .choose-plan .pricing-grid { grid-template-columns: 1fr; } }

/* CTA buttons on cards */
.choose-plan .choose-plan-btn { margin-top: 12px; appearance: none; border: 1px solid #111827; background:#111827; color:#fff; border-radius: 9999px; padding: 10px 16px; font-weight: 700; cursor: pointer; width: 100%; }
.choose-plan .choose-plan-btn:hover { background:#000; border-color:#000; }

/* Two-column checkout */
.checkout-content { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 28px; opacity: 0; pointer-events: none; transform: translateY(4px); scroll-margin-top: calc(var(--nav-h) + 12px); }
.checkout-content.active { opacity: 1; pointer-events: auto; transition: opacity .24s ease, transform .24s ease; transform: translateY(0); }
.selected-card-slot { position: sticky; top: calc(var(--nav-h) + 12px); align-self: start; }
.selected-card-slot > .pricing-card { width: 100%; border-width: 2px; border-color: #10b981; box-shadow: var(--shadow-md); position: relative; border-radius: 14px; }
.selected-card-slot .plan-cta { display: none; }
.selected-card-slot .plan-name { font-size: 1.15rem; font-weight: 800; }
.selected-card-slot .plan-features { margin-top: 8px; }

/* Selected badge */
.selected-card-slot .selected-badge { position: absolute; top: 10px; right: 10px; background: #10b981; color:#fff; font-weight: 800; font-size: .75rem; padding: 4px 8px; border-radius: 9999px; box-shadow: var(--shadow-sm); }

/* Popular ribbon */
.selected-card-slot .ribbon { position: absolute; top: 12px; left: -8px; background: #7c3aed; color:#fff; font-weight: 800; font-size: .72rem; padding: 4px 8px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; box-shadow: var(--shadow-sm); }

/* Form card */
.checkout-form { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); }
.checkout-form .form-section { margin-bottom: 16px; }
.checkout-form h3 { margin: 0 0 10px 0; font-weight: 800; }
.checkout-form .form-group { display: grid; gap: 6px; margin: 10px 0; }
.checkout-form label { font-weight: 600; color: #111827; }
.checkout-form input[type="text"], .checkout-form input[type="email"], .checkout-form input[type="number"], .checkout-form select { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; }
.checkout-form input[type="text"]:focus, .checkout-form input[type="email"]:focus, .checkout-form input[type="number"]:focus, .checkout-form select:focus { outline: 3px solid rgba(16,185,129,0.25); border-color: #10b981; }
.checkout-form .payment-methods { display: grid; gap: 12px; }
.checkout-form .payment-option { display: block; cursor: pointer; }
.checkout-form .payment-card { background: #fff; border-radius: 14px; padding: 14px 16px 14px 48px; border: 2px solid #e5e7eb; display:flex; gap:12px; align-items:center; justify-content: space-between; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease; position: relative; }
.checkout-form .payment-option input { position: absolute; opacity: 0; pointer-events: none; }
.checkout-form .payment-card { background: #fafafa; border-radius: 10px; padding: 12px; border: 1px solid #e5e7eb; display:flex; gap:12px; align-items:center; justify-content: space-between; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.checkout-form .payment-option input:checked + .payment-card { border-color:#10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); transform: translateY(-1px); background:#f5fffb; }
.checkout-form .payment-card:hover { box-shadow: var(--shadow-sm); }
.checkout-form .payment-icon { font-size: 1.2rem; }
.checkout-form .payment-info strong { display:block; font-size: 1rem; line-height: 1.2; }
.checkout-form .payment-info span { color:#6b7280; font-weight:600; font-size:.9rem; }
.checkout-form .payment-logos { display:flex; align-items:center; gap:10px; margin-top: 22px; flex-wrap: wrap; }
.checkout-form .payment-logos .pm-logo { height: 50px; width: auto; display:inline-block; }
.checkout-form .payment-card::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); border-radius: 9999px; border: 2px solid #d1d5db; background:#fff; box-shadow: inset 0 0 0 2px #fff; }
.checkout-form .payment-option input:checked + .payment-card::before { border-color:#10b981; background: radial-gradient(circle at center, #10b981 50%, transparent 51%); }
.checkout-form .checkout-btn.is-loading { position: relative; color: transparent !important; }
.checkout-form .checkout-btn.is-loading:after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 9999px; border: 2px solid rgba(255,255,255,0.7); border-top-color: transparent; animation: spinner .8s linear infinite; }
@keyframes spinner { to { transform: rotate(360deg); } }
 
/* Payment badges */
.pm-badges { display:flex; align-items:center; gap:6px; margin-left: auto; }
.pm-badge { background:#fff; border:1px solid #e5e7eb; color:#374151; font-weight:700; font-size:.7rem; border-radius:6px; padding:2px 6px; }

/* Summary */
.checkout-summary { border-top: 1px solid #e5e7eb; margin-top: 14px; padding-top: 12px; }
.checkout-summary .summary-item, .checkout-summary .summary-total { display:flex; justify-content: space-between; margin: 6px 0; font-weight: 700; }
.checkout-summary .summary-total { font-size: 1.1rem; }

/* Stepper */
.checkout-stepper { display:flex; align-items:center; gap:12px; padding: 8px 0 4px 0; margin: 0 0 6px 0; }
.checkout-stepper .step { display:flex; align-items:center; gap:8px; color:#6b7280; font-weight:700; }
.checkout-stepper .step .circle { width:28px; height:28px; border-radius:9999px; display:flex; align-items:center; justify-content:center; background:#e5e7eb; color:#111827; }
.checkout-stepper .step.active .circle { background:#10b981; color:#fff; }
.checkout-stepper .step.completed .circle { background:#059669; color:#fff; }
.checkout-stepper .connector { flex:1; height:4px; background:#e5e7eb; border-radius:2px; position: relative; overflow: hidden; }
.checkout-stepper .connector:after { content: ""; position:absolute; left:0; top:0; height:100%; width:0%; background: linear-gradient(90deg,#10b981,#059669); transition: width .25s ease; }
.checkout-stepper.step-2-active .connector:after { width:100%; }

/* Toasts */
.checkout-toast { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: 20px; background:#111827; color:#fff; padding:10px 14px; border-radius: 10px; opacity:0; transition: opacity .2s ease, transform .2s ease; box-shadow: var(--shadow-md); }
.checkout-toast.visible { opacity:1; transform: translateX(-50%) translateY(-4px); }
.checkout-toast.error { background:#dc2626; }
.checkout-toast.info { background:#111827; }

/* Change plan */
.change-plan-btn { display:inline-block; margin: 6px 0 10px 0; padding: 6px 10px; background:#f3f4f6; border:1px solid #e5e7eb; color:#111827; border-radius: 9999px; font-weight:700; font-size:.9rem; }
.change-plan-btn:hover { background:#e5e7eb; }

/* Animations */
@keyframes slideInUp { from { opacity: 0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.animate-slide-in { animation: slideInUp .24s ease-out both; }

/* Error states */
.field-error { color:#dc2626; font-size: 0.9rem; margin-top: 4px; }
.has-error { border-color:#dc2626 !important; box-shadow: 0 0 0 2px rgba(220,38,38,0.08); }

/* Accessibility focus */
.pricing-card:focus { outline: 3px solid rgba(16,185,129,0.4); outline-offset: 3px; }
.choose-plan .choose-plan-btn:focus, .change-plan-btn:focus, .checkout-btn:focus { outline: 3px solid rgba(16,185,129,0.4); outline-offset: 3px; }

/* Trust row */
.checkout-trust { display:flex; align-items:center; gap:10px; margin-top: 10px; color:#6b7280; font-weight:600; }
.checkout-trust .lock { font-size: 1rem; }

/* Collapse spacing when chooser hidden */
#choose-plan[style*="display: none"] { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Tighter spacing overall */
.container.checkout-content { margin-top: 8px; }

/* Mobile adjustments */
@media (max-width: 1024px){
  .checkout-content { grid-template-columns: 1fr; }
  .selected-card-slot { order: 2; }
  #payment-column { order: 1; }
}
.checkout-form input[type="text"], .checkout-form input[type="email"], .checkout-form input[type="select"] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; }

/* Plan details block (UI/UX) */
#plan-cards-details { margin-top: 12px; }
.plan-details { background:#fff; border:1px solid #e5e7eb; border-radius: 12px; padding: 14px; box-shadow: var(--shadow-sm); animation: slideInUp .24s ease-out both; }
.plan-details-title { margin: 0 0 6px 0; font-weight: 800; font-size: 1rem; color:#111827; }
.plan-details-text { margin: 0 0 8px 0; color:#374151; line-height: 1.5; }
.plan-details-points { margin: 8px 0 0 18px; color:#111827; }
.plan-details-points li { margin: 4px 0; list-style: disc; }

/* Alerts */
.flash-messages { margin: 10px 0; }
.alert { position: relative; border-radius: 12px; padding: 12px 14px; border:1px solid #e5e7eb; box-shadow: var(--shadow-sm); font-weight:600; }
.alert-info { background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; }
.alert-error { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.alert-success { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.alert-warning { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.alert .alert-close { position:absolute; top:8px; right:10px; background:transparent; border:none; font-size:20px; line-height:1; color:inherit; cursor:pointer; }
.alert .alert-text { margin-right: 28px; }