/* Checkout page styles */
.checkout-shell{ max-width:900px; margin:0 auto; padding:24px 16px; }
body.landing-header-solid #main-content .checkout-shell{ padding-top:48px; }
.card-soft{ background:rgba(255,255,255,.9); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08); padding:20px; }
@media(min-width:768px){ .card-soft{ padding:28px; } }
.plan-summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ps-title{ font-weight:700; color:#0f172a; }
.ps-content{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ps-name{ font-weight:800; color:#111827; }
.ps-price{ font-weight:800; color:#2563eb; }
.ps-period{ color:#6b7280; }
.step-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.badge-step{ width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:linear-gradient(135deg,#2563eb,#7c3aed); }
.step-head h2{ margin:0; font-size:1.25rem; font-weight:800; color:#0f172a; }
.step-status{ margin-left:auto; color:#16a34a; font-weight:700; display:flex; align-items:center; gap:6px; }
/* responsive grid */
.checkout-shell .row{ display:flex; flex-wrap:wrap; margin-left:-8px; margin-right:-8px; }
.checkout-shell .row .col-12{ padding:0 8px; width:100%; }
.checkout-shell .row .col-6{ padding:0 8px; width:100%; flex:0 0 100%; max-width:100%; }
@media(min-width:640px){ .checkout-shell .row .col-6{ width:50%; flex:0 0 50%; max-width:50%; } }
.col-md-3,.col-md-4,.col-md-6,.col-md-8{ width:100%; }
@media(min-width:768px){ .col-md-3{ width:25%; } .col-md-4{ width:33.333%; } .col-md-6{ width:50%; } .col-md-8{ width:66.666%; } }
.g-16{ gap:16px; }
.form-label{ font-weight:700; color:#111827; margin-bottom:6px; display:block; }
.form-control,.form-select{ width:100%; border-radius:12px; border:1px solid #d1d5db; padding:12px 14px; outline:none; transition:border-color .2s ease, box-shadow .2s ease; font-size:16px; }
.form-control:focus,.form-select:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.form-control.is-valid{ border-color:#22c55e; }
.form-control.is-invalid{ border-color:#ef4444; }
.feedback{ font-size:12px; margin-top:6px; color:#ef4444; min-height:18px; }
.password-field{ position:relative; }
.btn-eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#4b5563; cursor:pointer; }
.btn-eye:hover{ color:#111827; }
.strength{ height:6px; background:#e5e7eb; border-radius:999px; overflow:hidden; margin-top:8px; }
.strength span{ display:block; height:100%; width:0; transition:width .25s ease; background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e); }
.step-actions{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.step-actions.between{ justify-content:space-between; }
.btn-primary,.btn-secondary{ border:0; border-radius:12px; padding:12px 18px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:10px; }
.btn-primary{ background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; box-shadow:0 8px 22px rgba(37,99,235,.35); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }
.btn-secondary{ background:#111827; color:#fff; }
.btn-spinner{ width:18px; height:18px; border-radius:999px; border:2px solid #fff; border-top-color:transparent; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.error-inline{ color:#ef4444; font-weight:600; }
.pay-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:8px 0 16px; }
@media(min-width:768px){ .pay-options{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pay-card{ border:1px solid #e5e7eb; border-radius:14px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pay-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.pay-card input{ display:none; }
.pay-card .pc-icon{ font-size:22px; color:#111827; }
.pay-card .pc-label{ font-weight:700; color:#111827; }
.pay-card.active{ border-color:#2563eb; box-shadow:0 10px 28px rgba(37,99,235,.18); }
.panel{ animation:fadeIn .2s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.note.small{ color:#6b7280; }