.real-checkout { width: min(760px, calc(100% - 28px)); padding: 32px 36px; }
.real-checkout .checkout-head { padding-left: 42px; border-bottom: 1px solid #e8edeb; margin-bottom: 20px; padding-bottom: 17px; }
.real-checkout .checkout-head h3 { margin-bottom: 5px; }
.real-checkout .checkout-head p { margin: 0; color: #708087; }
.checkout-step { display: flex; gap: 10px; align-items: center; margin: 17px 0 10px; }
.checkout-step>span { width: 24px; height: 24px; display: grid; place-items: center; color: #0a7d55; background: #e7f8ef; border-radius: 50%; font: 700 10px Alexandria,sans-serif; }
.checkout-step>div { display: flex; flex-direction: column; }
.checkout-step b { font-size: 11px; }
.checkout-step small { color: #8a979d; font-size: 8px; margin-top: 2px; }
.region-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.region-tabs button { border: 1px solid #dce4e4; background: #fff; color: #64747b; border-radius: 8px; padding: 11px; font-size: 10px; font-weight: 700; }
.region-tabs button.active { border-color: #35b779; background: #effaf4; color: #0b7f55; box-shadow: 0 0 0 2px rgba(53,183,121,.08); }
.plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.plan-card { border: 1px solid #dce4e4; background: #fff; border-radius: 10px; padding: 13px; text-align: right; position: relative; min-height: 84px; }
.plan-card.selected { border-color: #ff7a3d; background: #fff7f2; box-shadow: 0 0 0 2px rgba(255,122,61,.08); }
.plan-card .popular { position: absolute; left: 9px; top: 9px; color: #fff; background: #ff7a3d; padding: 3px 6px; border-radius: 10px; font-size: 6px; }
.plan-card b { display: block; font: 700 12px Alexandria,sans-serif; }
.plan-card strong { display: block; font: 700 17px Alexandria,sans-serif; margin-top: 7px; }
.plan-card small { display: block; color: #8a979d; font-size: 7px; margin-top: 3px; }
.payment-methods { display: grid; gap: 8px; }
.pay-method { border: 1px solid #e0e6e5; border-radius: 10px; padding: 12px 13px; background: #fff; display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; }
.pay-method .method-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #eef8f3; color: #14895d; font-weight: 800; font-size: 10px; }
.pay-method>div { display: flex; flex-direction: column; min-width: 0; }
.pay-method b { font-size: 10px; }
.pay-method small { color: #819097; font-size: 8px; line-height: 1.55; margin-top: 2px; }
.pay-method a,.pay-method button { border: 0; border-radius: 7px; background: #071a2a; color: #fff; padding: 9px 12px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.pay-method.primary { border-color: #6fd1a3; background: #f4fcf8; }
.pay-method.primary a { background: #ff7a3d; }
.bank-list { grid-column: 1/-1; display: grid!important; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 5px; }
.bank-box { background: #f6f8f7; border-radius: 7px; padding: 9px; color: #53656d; font-size: 8px; line-height: 1.65; }
.bank-box b { display: block; color: #102331; margin-bottom: 3px; }
.activation-note { margin-top: 17px; border-radius: 10px; padding: 13px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 11px; background: #eaf9f1; color: #0a6f4b; }
.activation-note>span { width: 30px; height: 30px; display: grid; place-items: center; background: #c7f0db; border-radius: 50%; font-weight: 800; }
.activation-note div { display: flex; flex-direction: column; }
.activation-note b { font-size: 10px; }
.activation-note p { margin: 2px 0 0; color: #527268; font-size: 8px; line-height: 1.55; }
.activation-note a { background: #159a67; color: #fff; border-radius: 7px; padding: 9px 11px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.real-checkout .payment-disclaimer { margin-top: 11px; }
.copy-ok { background: #159a67!important; }
.method-actions { display: flex!important; flex-direction: row!important; gap: 6px; align-items: center; justify-content: flex-end; }
.pay-method .receipt-action { background: #159a67; }
.bank-box button,.bank-box a { display: inline-block; margin-top: 7px; padding: 6px 8px!important; font-size: 7px!important; text-decoration: none; }
.bank-list { grid-template-columns: repeat(3,1fr); }
.bank-box.rajhi { border: 1px dashed #65b993; background: #f1fbf6; }
@media (max-width:680px){
  .real-checkout { padding: 27px 18px; }
  .region-tabs { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: auto; }
  .pay-method { grid-template-columns: 34px 1fr; }
  .pay-method>a,.pay-method>button { grid-column: 1/-1; width: 100%; }
  .method-actions { grid-column: 1/-1; width: 100%; display: grid!important; grid-template-columns: 1fr 1fr; }
  .method-actions a,.method-actions button { width: 100%; text-align: center; }
  .bank-list { grid-template-columns: 1fr; }
  .activation-note { grid-template-columns: 30px 1fr; }
  .activation-note a { grid-column: 1/-1; text-align: center; }
}