/* ===========================================
   SYNTHEDGE v2 — CHECKOUT CSS
   =========================================== */

.checkout-layout { display:flex; min-height:100vh; }
.checkout-summary { width:380px; flex-shrink:0; background:var(--bg-raised); border-right:1px solid var(--border); padding:40px 36px; display:flex; flex-direction:column; }
.checkout-form-panel { flex:1; display:flex; align-items:flex-start; justify-content:center; padding:60px 24px; overflow-y:auto; }

.cs-plan { background:var(--bg-card); border:1px solid rgba(255,107,53,0.3); border-radius:var(--r-lg); padding:20px; margin-bottom:24px; }
.cs-plan-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--orange); margin-bottom:6px; }
.cs-plan-name { font-family:var(--font-display); font-size:1.2rem; font-weight:800; margin-bottom:2px; }
.cs-plan-size { font-size:13px; color:var(--text-3); margin-bottom:10px; }
.cs-plan-price { font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--orange); }

.cs-total { border-top:1px solid var(--border); padding-top:16px; margin-bottom:16px; }
.cs-total-row { display:flex; justify-content:space-between; font-size:13px; color:var(--text-3); padding:4px 0; }
.cs-total-final { font-size:15px; font-weight:700; color:var(--text-1); padding-top:8px; }

.cs-guarantee { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-3); margin-bottom:12px; }
.cs-guarantee svg { color:var(--green); flex-shrink:0; }
.cs-change-plan { font-size:12px; }
.cs-change-plan a { color:var(--text-3); transition:color .2s; }
.cs-change-plan a:hover { color:var(--orange); }
.cs-email-note { font-size:11px; color:var(--text-3); margin-top:6px; line-height:1.5; }

.stripe-element-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; transition:border-color .2s; }
.stripe-element-wrap.focused { border-color:var(--orange); }
.stripe-placeholder { font-size:13px; color:var(--text-3); }
.stripe-security { display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:var(--text-3); margin-top:12px; }
.stripe-security svg { color:var(--green); }

@media (max-width:800px) {
  .checkout-layout { flex-direction:column; }
  .checkout-summary { width:100%; border-right:none; border-bottom:1px solid var(--border); }
  .checkout-form-panel { padding:32px 16px; }
}