/*
 * Developed by Astoe Company
 *
 * Payment Gateway theme — warm editorial, Astoe Company brand, Swich blue accent.
 * Foundation: tokens + base + type + buttons + forms + nav pill + stepper + shared cards.
 * Page modules appended below the foundation sentinel.
 */

:root{
  /* surfaces */
  --cream:#F3F0EE; --cream-lift:#FCFBFA; --white:#FFFFFF; --bone:#F4F4F4;
  /* ink + neutrals */
  --ink:#141413; --charcoal:#262627; --slate:#696969; --granite:#555555; --dust:#D1CDC7; --ghost:#E8E2DA;
  /* accents (restrained) */
  --signal:#0137EF; --signal-light:#4D8BFF; --clay:#0137EF; --link:#0137EF;
  /* semantic (muted, no neon) */
  --success:#1f7a4d; --danger:#b3261e; --warning:#9a6a00;
  /* card-network mark — accept row only */
  --mc-red:#EB001B; --mc-yellow:#F79E1B;
  /* lines */
  --border:rgba(20,20,19,.14); --border-strong:rgba(20,20,19,.30);
  /* radii */
  --r-sm:6px; --r-btn:20px; --r-card:40px; --r-pill:999px;
  /* shadow — atmospheric */
  --sh-1:0 4px 24px 0 rgba(0,0,0,.04);
  --sh-2:0 24px 48px 0 rgba(0,0,0,.08);
  --sh-3:0 40px 90px 0 rgba(0,0,0,.12);
  /* motion + mono */
  --tx:cubic-bezier(.16,1,.3,1);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Sofia Sans',Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:450; font-size:16px; line-height:1.4;
  color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* ---- trust strip (slim top ribbon) ---- */
.trust-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 26px;padding:11px 20px;font-size:12px;color:var(--slate);background:transparent;}
.trust-strip-item{display:inline-flex;align-items:center;gap:7px;}
.trust-strip-item i{color:var(--granite);font-size:.95em;}

/* ---- floating nav pill ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:90%;max-width:1500px;margin:8px auto 0;padding:12px 18px 12px 22px;background:var(--white);border-radius:var(--r-pill);box-shadow:var(--sh-1);}
.app-brand{display:flex;align-items:center;gap:12px;min-width:0;}
.app-brand-img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;}
.app-brand-text{display:flex;flex-direction:column;line-height:1.12;min-width:0;}
.app-brand-name{font-weight:500;font-size:16px;letter-spacing:-.01em;color:var(--ink);}
.app-brand-tagline{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);}
.topbar-actions{display:flex;align-items:center;gap:10px;flex:none;}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--border);color:var(--ink);font-size:18px;cursor:pointer;text-decoration:none;transition:transform var(--tx),border-color var(--tx),background var(--tx);}
.icon-btn:hover{border-color:var(--ink);transform:translateY(-1px);text-decoration:none;}
.icon-btn:active{transform:scale(.96);}
.powered-by-nav{display:inline-flex;align-items:center;gap:9px;}
.powered-by-nav-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);white-space:nowrap;}
.powered-by-nav-logo{height:34px;width:auto;max-width:160px;display:block;}
.pseb-badge{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);}
.pseb-badge-logo{width:52px;height:52px;flex:none;object-fit:contain;border-radius:var(--r-sm);background:var(--white);}
.pseb-badge-text strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.pseb-badge-text span{display:block;font-size:12px;line-height:1.4;color:var(--slate);margin-top:2px;}
.pci-badge-seal{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ink);color:var(--cream);font-size:22px;}

/* ---- progress steps ---- */
.progress-steps{position:relative;display:flex;justify-content:space-between;align-items:flex-start;max-width:520px;margin:28px auto 8px;}
.progress-steps::before{content:"";position:absolute;top:19px;left:0;right:0;height:2px;background:var(--border);z-index:0;border-radius:var(--r-pill);}
.progress-steps-fill{position:absolute;top:19px;left:0;height:2px;background:var(--ink);z-index:1;border-radius:var(--r-pill);transition:width .6s var(--tx);}
.progress-step{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;}
.step-circle{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--border);color:var(--slate);font-size:14px;font-weight:500;transition:background .3s var(--tx),border-color .3s var(--tx),color .3s var(--tx);}
.step-label{font-size:12px;color:var(--slate);text-align:center;font-weight:500;}
.progress-step.active .step-circle,.progress-step.completed .step-circle{background:var(--ink);border-color:var(--ink);color:var(--cream);}
.progress-step.active .step-label{color:var(--ink);}
.progress-step.failed .step-circle{background:var(--danger);border-color:var(--danger);color:#fff;}
.progress-step.failed .step-label{color:var(--danger);}

/* ---- page card ---- */
.page-card{width:90%;max-width:1500px;margin:32px auto;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-2);padding:44px 40px;}
.text-center{text-align:center;}
.page-title{font-size:clamp(26px,4vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.12;color:var(--ink);margin:0 0 10px;}
.page-subtitle{font-size:16px;line-height:1.5;color:var(--slate);margin:0 0 24px;max-width:48ch;}
.text-center .page-subtitle{margin-left:auto;margin-right:auto;}

/* ---- section title ---- */
.section-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin:28px 0 16px;}
.section-title:first-of-type{margin-top:0;}
.section-title i{color:var(--clay);}
.section-title-flush{margin:0;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1;padding:14px 28px;min-height:48px;border-radius:var(--r-btn);border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--tx),background var(--tx),color var(--tx),border-color var(--tx),box-shadow var(--tx);touch-action:manipulation;}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.btn-primary:hover{background:var(--charcoal);border-color:var(--charcoal);box-shadow:var(--sh-2);}
.btn-primary:disabled{background:var(--bone);border-color:var(--border);color:var(--slate);cursor:not-allowed;transform:none;box-shadow:none;}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--ink);}
.btn-secondary:hover{background:var(--bone);}
.btn-whatsapp{background:var(--white);color:var(--ink);border-color:var(--ink);}
.btn-whatsapp:hover{background:var(--bone);}
.btn-whatsapp i{color:#25D366;}
.btn-block{display:flex;width:100%;white-space:normal;line-height:1.2;}
.btn-lg{font-size:17px;padding:17px 32px;min-height:56px;}

/* ---- forms ---- */
.form-group{margin-bottom:20px;}
.form-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:8px;}
.form-label i{color:var(--slate);}
.form-control{width:100%;font-family:inherit;font-size:16px;font-weight:450;color:var(--ink);background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-pill);padding:14px 22px;line-height:1.3;transition:border-color var(--tx),box-shadow var(--tx);}
.form-control::placeholder{color:var(--slate);opacity:.85;}
.form-control:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(20,20,19,.10);}
.form-control.error{border-color:var(--danger);}
.form-control.success{border-color:var(--success);}
.input-group{position:relative;display:flex;align-items:stretch;}
.input-prefix{display:inline-flex;align-items:center;padding:0 16px;font-size:14px;font-weight:600;color:var(--slate);background:var(--bone);border:1.5px solid var(--border);border-right:none;border-radius:var(--r-pill) 0 0 var(--r-pill);}
.input-group .form-control{border-top-left-radius:0;border-bottom-left-radius:0;}
.label-optional{color:var(--slate);font-weight:450;}
.encrypted-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--success);background:rgba(31,122,77,.08);padding:3px 9px;border-radius:var(--r-pill);margin-left:auto;}
.error-message,.success-message{display:flex;align-items:center;gap:6px;font-size:13px;margin-top:7px;}
.error-message{color:var(--danger);}
.success-message{color:var(--success);}
.field-hint{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--slate);margin-top:8px;}
.field-hint.hidden{display:none;}
.field-hint-meta{color:var(--dust);}

/* ---- alerts ---- */
.alert{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:16px 18px;border-radius:var(--r-card);font-size:14.5px;line-height:1.5;margin:0 0 20px;border:1px solid var(--border);}
.alert i{flex:none;margin-top:2px;font-size:18px;}
.alert strong{font-weight:600;}
.alert-success{background:rgba(31,122,77,.07);border-color:rgba(31,122,77,.25);color:#155c39;}
.alert-success i{color:var(--success);}
.alert-danger{background:rgba(179,38,30,.06);border-color:rgba(179,38,30,.22);color:#8a221c;}
.alert-danger i{color:var(--danger);}
.alert-warning{background:rgba(154,106,0,.07);border-color:rgba(154,106,0,.25);color:#7a5400;}
.alert-warning i{color:var(--warning);}

/* ---- status illustration ---- */
.status-illu{width:96px;height:96px;margin:0 auto 22px;}
.status-illu svg{width:100%;height:100%;overflow:visible;}
.status-illu circle,.status-illu polyline,.status-illu line{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.status-illu .draw-circle,.status-illu .draw-circle-x{stroke-width:4;}
.status-illu .draw-check,.status-illu .draw-x1,.status-illu .draw-x2{stroke-width:5;}
.status-illu.success .draw-circle,.status-illu.success .draw-check{stroke:var(--success);}
.status-illu.failed .draw-circle-x,.status-illu.failed .draw-x1,.status-illu.failed .draw-x2{stroke:var(--danger);}
.status-illu.processing{display:flex;align-items:center;justify-content:center;font-size:54px;color:var(--ink);}
@media (prefers-reduced-motion:no-preference){
  .status-illu .draw-circle,.status-illu .draw-circle-x{stroke-dasharray:300;stroke-dashoffset:300;animation:draw-stroke .7s var(--tx) forwards;}
  .status-illu .draw-check{stroke-dasharray:90;stroke-dashoffset:90;animation:draw-stroke .5s var(--tx) .5s forwards;}
  .status-illu .draw-x1,.status-illu .draw-x2{stroke-dasharray:55;stroke-dashoffset:55;animation:draw-stroke .4s var(--tx) .5s forwards;}
  .status-illu.processing i{animation:rs-spin 1.1s linear infinite;}
  @keyframes draw-stroke{to{stroke-dashoffset:0;}}
  @keyframes rs-spin{to{transform:rotate(360deg);}}
}

/* ---- status pills ---- */
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 13px;border-radius:var(--r-pill);}
.status-pill.success{background:rgba(31,122,77,.1);color:var(--success);}
.status-pill.danger{background:rgba(179,38,30,.1);color:var(--danger);}
.status-pill-pending{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:5px 13px;border-radius:var(--r-pill);background:var(--bone);color:var(--granite);border:1px solid var(--border);}

/* ---- detail card ---- */
.detail-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:24px 26px;margin:0 0 22px;text-align:left;}
.detail-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.detail-card-title{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:var(--ink);}
.detail-card-title i{color:var(--clay);}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.detail-item{min-width:0;}
.detail-label{font-size:12px;color:var(--slate);margin-bottom:4px;}
.detail-value{font-size:15px;font-weight:500;color:var(--ink);word-break:break-word;}
.detail-value.amount{font-size:18px;letter-spacing:-.01em;}
.detail-value.danger{color:var(--danger);}

/* ---- method logos ---- */
.method-logos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.method-logos img{height:20px;width:auto;}
.method-sep{color:var(--dust);font-size:12px;}

/* ---- mono id + copy ---- */
.mono-id{font-family:var(--mono);font-size:.9em;color:var(--charcoal);word-break:break-all;}
.copy-inline{background:none;border:none;cursor:pointer;color:var(--slate);padding:2px 5px;font-size:14px;transition:color var(--tx),transform var(--tx);}
.copy-inline:hover{color:var(--ink);}
.copy-inline:active{transform:scale(.9);}

/* ---- powered by ---- */
.powered-by{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:24px;}
.powered-by-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);}
.powered-by-img{height:24px;opacity:.85;display:inline-block;}

/* ---- secure note ---- */
.secure-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--slate);margin-top:20px;}
.secure-note i{color:var(--success);}

/* ---- btn row ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.btn-row-center{justify-content:center;}

/* ---- floating whatsapp ---- */
.float-whatsapp{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px;border-radius:var(--r-pill);background:var(--ink);color:var(--cream);font-weight:500;font-size:15px;box-shadow:var(--sh-2);text-decoration:none;transition:transform var(--tx),box-shadow var(--tx);}
.float-whatsapp i{font-size:22px;color:#25D366;}
.float-whatsapp:hover{transform:translateY(-2px);box-shadow:var(--sh-3);text-decoration:none;}
.float-whatsapp-tag{white-space:nowrap;}

/* ---- site footer ---- */
.site-footer{background:var(--ink);color:var(--cream);margin-top:64px;padding:40px 24px 28px;}
.site-footer-top{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12);}
.site-footer-brand{display:flex;flex-direction:column;gap:4px;}
.site-footer-name{font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--cream-lift);}
.site-footer-tag{font-size:13px;color:rgba(252,251,250,.6);}
.site-footer-nav{display:flex;flex-wrap:wrap;gap:10px 24px;}
.site-footer-nav a{font-size:14px;color:rgba(252,251,250,.78);font-weight:450;text-decoration:none;}
.site-footer-nav a:hover{color:var(--cream-lift);text-decoration:underline;text-underline-offset:3px;}
.site-footer-bottom{max-width:1180px;margin:20px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:rgba(252,251,250,.55);}
.site-footer-contact a{color:rgba(252,251,250,.78);text-decoration:none;}
.site-footer-contact a:hover{color:var(--cream-lift);text-decoration:underline;}
@media (max-width:767px){
  .site-footer{padding:32px 16px 24px;margin-top:40px;}
  .site-footer-top{flex-direction:column;gap:18px;}
  .site-footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ---- reduced motion global ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ---- base responsive ---- */
@media (max-width:767px){
  .trust-strip{gap:6px 16px;font-size:11px;padding:9px 14px;}
  .topbar{margin:6px 12px 0;padding:10px 14px;}
  .app-brand-tagline{display:none;}
  .powered-by-nav-label{display:none;}
  .page-card{width:auto;margin:16px 12px;padding:28px 20px;}
  .detail-grid{grid-template-columns:1fr;gap:14px;}
  .progress-steps{margin:20px auto 4px;}
  .step-label{font-size:11px;}
  .float-whatsapp{right:16px;bottom:84px;height:52px;padding:0 16px;}
  .float-whatsapp-tag{display:none;}
}

/* ==== END FOUNDATION ==== */

/* ============================ CHECKOUT (index) ============================ */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr);gap:48px;width:90%;max-width:1500px;margin:0 auto;padding:40px 0 80px;background:var(--cream);align-items:start;}
.checkout-form-wrap{min-width:0;}
.checkout-hero{margin:8px 0 32px;}
.checkout-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--granite);margin-bottom:16px;}
.checkout-hero-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal-light);flex:none;}
.checkout-hero-eyebrow i{color:var(--slate);font-size:.85em;}
.checkout-hero-title{font-size:clamp(28px,3.2vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin:0 0 14px;max-width:none;text-wrap:balance;}
.checkout-hero-title .accent{color:var(--ink);position:relative;white-space:nowrap;}
.checkout-hero-title .accent::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.12em;border-radius:var(--r-pill);background:var(--signal-light);opacity:.85;}
.checkout-hero-sub{font-size:15px;line-height:1.55;color:var(--slate);margin:0;max-width:none;white-space:nowrap;}
.amount-quickpick{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;}
.amount-quickpick-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin-right:2px;}
.amt-chip{appearance:none;cursor:pointer;min-height:44px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink);background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-pill);transition:transform var(--tx),border-color var(--tx),background var(--tx),color var(--tx),box-shadow var(--tx);}
.amt-chip:hover{border-color:var(--border-strong);box-shadow:var(--sh-1);}
.amt-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.amt-chip:active{transform:scale(.98);}
.amt-chip.selected{background:var(--ink);border-color:var(--ink);color:var(--cream);}
.amt-chip.selected:hover{box-shadow:var(--sh-2);}
.amount-hint{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:14px;font-size:13.5px;color:var(--slate);}
.amount-hint > span:first-child{display:inline-flex;align-items:center;gap:8px;}
.amount-hint i{color:var(--slate);font-size:.9em;}
.rate-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;font-size:12.5px;font-weight:500;color:var(--charcoal);background:var(--bone);border:1px solid var(--border);border-radius:var(--r-pill);white-space:nowrap;}
.rate-pill i{color:var(--clay);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-row > .form-group{margin-bottom:0;}
.checkout-cta{margin-top:28px;}
.help-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:14px;color:var(--slate);}
.help-line i{color:var(--slate);}
.help-line a{display:inline-flex;align-items:center;gap:6px;color:var(--link);font-weight:500;text-decoration:none;transition:opacity var(--tx);}
.help-line a i{color:var(--success);}
.help-line a:hover{opacity:.78;text-decoration:underline;text-underline-offset:3px;}
.help-line a:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:var(--r-sm);}
.trust-seals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;}
.trust-seal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px 12px;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);transition:transform var(--tx),box-shadow var(--tx),border-color var(--tx);}
.trust-seal:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-strong);}
.trust-seal-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:20px;color:var(--ink);background:var(--bone);border:1px solid var(--border);}
.trust-seal-icon.navy{color:var(--charcoal);background:var(--white);}
.trust-seal-icon.warm{color:var(--clay);background:var(--white);}
.trust-seal-icon.danger{color:var(--slate);background:var(--white);}
.trust-seal-label{font-size:12.5px;font-weight:500;line-height:1.35;color:var(--granite);letter-spacing:-.005em;}
.guarantee-badge{display:flex;align-items:flex-start;gap:18px;margin-top:24px;padding:24px 26px;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);}
.guarantee-badge > i{flex:none;font-size:26px;color:var(--ink);margin-top:2px;}
.guarantee-badge strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:5px;}
.guarantee-badge p{margin:0;font-size:14px;line-height:1.55;color:var(--slate);}
.secure-strip{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:22px;border-top:1px solid var(--border);}
.secure-strip-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--slate);}
.secure-strip-item i{color:var(--granite);font-size:.95em;}
.checkout-summary-wrap{min-width:0;position:sticky;top:24px;display:flex;flex-direction:column;gap:20px;}
.summary-aside-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.currency-toggle{display:inline-flex;padding:4px;gap:2px;background:var(--bone);border:1px solid var(--border);border-radius:var(--r-pill);}
.currency-toggle-btn{appearance:none;cursor:pointer;min-height:40px;padding:0 18px;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--granite);background:transparent;border:none;border-radius:var(--r-pill);transition:background var(--tx),color var(--tx),transform var(--tx);}
.currency-toggle-btn:hover{color:var(--ink);}
.currency-toggle-btn:active{transform:scale(.98);}
.currency-toggle-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.currency-toggle-btn.active{background:var(--ink);color:var(--cream);}
.charge-banner{position:relative;overflow:hidden;padding:34px 30px 30px;background:var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-2);isolation:isolate;}
.charge-banner-chip{position:absolute;top:-60px;right:-50px;width:200px;height:200px;border-radius:50%;border:1.5px solid rgba(243,115,56,.22);z-index:-1;pointer-events:none;}
.charge-banner-chip::after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(255,255,255,.08);}
.charge-banner-shimmer{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 48%,transparent 66%);background-size:240% 100%;background-position:120% 0;}
@media (prefers-reduced-motion:no-preference){
  .charge-banner-shimmer{animation:charge-shimmer 5.5s var(--tx) infinite;}
  @keyframes charge-shimmer{0%,18%{background-position:120% 0;}55%,100%{background-position:-40% 0;}}
}
.charge-banner-secure{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(252,251,250,.82);margin-bottom:18px;}
.charge-banner-secure .live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none;}
@media (prefers-reduced-motion:no-preference){
  .charge-banner-secure .live-dot{animation:live-pulse 2.4s var(--tx) infinite;}
  @keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(31,122,77,.5);}70%{box-shadow:0 0 0 7px rgba(31,122,77,0);}100%{box-shadow:0 0 0 0 rgba(31,122,77,0);}}
}
.charge-banner-label{font-size:13px;font-weight:500;letter-spacing:.01em;color:rgba(252,251,250,.6);margin-bottom:8px;}
.charge-banner-amount{font-size:clamp(40px,6vw,52px);font-weight:500;letter-spacing:-.025em;line-height:1.02;color:var(--cream-lift);}
.charge-banner-secondary{margin-top:8px;font-size:14px;color:rgba(252,251,250,.62);}
.summary-card.summary-pretty{padding:24px 26px;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);transition:opacity var(--tx);}
.summary-card.summary-pretty .summary-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--border);}
.summary-card.summary-pretty .summary-row:first-child{padding-top:2px;}
.summary-card.summary-pretty .summary-row.total{border-bottom:none;margin-top:6px;padding:16px 0 2px;border-top:1.5px solid var(--border-strong);}
.summary-label{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--granite);}
.summary-label i{color:var(--slate);font-size:.95em;width:16px;text-align:center;}
.summary-value{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.summary-value.fee{color:var(--slate);font-weight:450;}
.summary-row.total .summary-label{font-size:15.5px;font-weight:500;color:var(--ink);}
.summary-row.total .summary-label i{color:var(--ink);}
.summary-row.total .summary-value{font-size:19px;font-weight:500;letter-spacing:-.02em;}
.summary-card.summary-pretty.is-empty{opacity:.62;}
.summary-card.summary-pretty.is-empty .summary-value{color:var(--dust);}
.summary-card.summary-pretty.is-empty .summary-row.total .summary-value{color:var(--slate);}
.pm-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);}
.pm-strip.pm-strip-noborder{background:transparent;border:none;padding:4px 4px 0;}
.pm-strip-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);flex:none;}
.pm-icons{display:flex;align-items:center;flex-wrap:wrap;gap:18px;}
.pm-icon{display:flex;align-items:center;justify-content:center;height:30px;}
.pm-icon img{height:100%;width:auto;max-width:64px;object-fit:contain;display:block;}
.pm-payfast-logo{max-width:130px !important;height:34px !important;}
.feature-list{list-style:none;margin:0;padding:24px 26px;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);display:flex;flex-direction:column;gap:14px;}
.feature-list-item{display:flex;align-items:flex-start;gap:14px;font-size:13.5px;line-height:1.5;color:var(--slate);}
.feature-list-item i{flex:none;margin-top:2px;width:18px;text-align:center;font-size:14px;color:var(--granite);}
.feature-list-item strong{font-weight:500;color:var(--ink);}
.pay-confirm-box{text-align:left;margin:6px 0 4px;padding:18px 20px;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);}
.pay-confirm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;font-size:14.5px;color:var(--granite);border-bottom:1px dashed var(--border);}
.pay-confirm-row:first-child{padding-top:2px;}
.pay-confirm-row strong{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;}
.pay-confirm-row--total{border-bottom:none;margin-top:4px;padding:14px 0 2px;border-top:1.5px solid var(--border-strong);font-size:15.5px;font-weight:500;color:var(--ink);}
.pay-confirm-amt{font-size:19px !important;letter-spacing:-.02em;color:var(--ink) !important;}
.pay-confirm-note{display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-size:13px;line-height:1.5;color:var(--slate);text-align:left;}
.pay-confirm-note i{flex:none;margin-top:2px;color:var(--granite);}

/* confirm payment — custom modal (replaces sweetalert confirm) */
.rs-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .22s var(--tx),visibility .22s var(--tx);}
.rs-modal.open{opacity:1;visibility:visible;}
.rs-modal-overlay{position:absolute;inset:0;background:rgba(20,20,19,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.rs-modal-card{position:relative;z-index:1;width:100%;max-width:440px;max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-3);padding:30px 28px 24px;transform:translateY(14px) scale(.97);transition:transform .28s var(--tx);}
.rs-modal.open .rs-modal-card{transform:translateY(0) scale(1);}
.rs-modal-x{position:absolute;top:16px;right:16px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--slate);font-size:17px;border-radius:var(--r-pill);cursor:pointer;transition:background var(--tx),color var(--tx);}
.rs-modal-x:hover{background:var(--bone);color:var(--ink);}
.rs-modal-head{text-align:center;margin-bottom:18px;}
.rs-modal-icon{width:56px;height:56px;margin:0 auto 14px;display:inline-flex;align-items:center;justify-content:center;font-size:23px;color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent);border-radius:var(--r-pill);}
.rs-modal-title{font-size:1.35rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:0;}
.rs-modal-sub{font-size:13.5px;color:var(--slate);margin:5px 0 0;}
.rs-modal-foot{display:flex;gap:12px;margin-top:22px;}
.rs-modal-foot .btn{flex:1;padding:13px 18px;font-size:15px;min-height:auto;}
body.rs-modal-lock{overflow:hidden;}
@media (max-width:540px){
  .rs-modal-card{border-radius:28px;padding:26px 20px 20px;}
  .rs-modal-foot{flex-direction:column-reverse;}
}
@media (max-width:1024px){
  .checkout-layout{grid-template-columns:1fr;gap:36px;max-width:640px;padding:32px 24px 72px;}
  .checkout-summary-wrap{position:static;top:auto;}
  .checkout-hero-title{font-size:clamp(30px,5vw,40px);}
  .charge-banner-amount{font-size:clamp(38px,8vw,48px);}
}
@media (max-width:767px){
  .checkout-layout{grid-template-columns:1fr;gap:24px;width:auto;max-width:100%;padding:18px 14px 96px;}
  /* lift the amount-led form above the hero on mobile (direct-amount) */
  .checkout-form-wrap{display:flex;flex-direction:column;}
  .checkout-form-wrap>.progress-steps{order:-2;}
  .checkout-form-wrap>form{order:-1;}
  /* compact hero so the amount entry sits high and direct */
  .checkout-hero{margin:2px 0 16px;}
  .checkout-hero-title{font-size:26px;line-height:1.12;margin-bottom:8px;}
  .checkout-hero-eyebrow{margin-bottom:10px;}
  .checkout-hero-sub{display:none;}
  /* amount = the prominent, direct entry block on mobile */
  .fg-amount{background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);padding:18px 18px 20px;box-shadow:var(--sh-1);margin-bottom:22px;}
  .fg-amount .form-label{font-size:13px;}
  /* sticky pay bar pinned to viewport bottom */
  .checkout-cta{position:sticky;bottom:0;z-index:30;margin:24px -14px 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);}
  .help-line{margin-top:12px;font-size:13px;}
  .amount-quickpick{gap:8px;}
  .amt-chip{flex:1 1 auto;min-width:62px;padding:0 12px;}
  .trust-seals{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:28px;}
  .trust-seal{padding:14px 5px;gap:8px;}
  .trust-seal-icon{width:36px;height:36px;font-size:15px;}
  .trust-seal-label{font-size:10px;line-height:1.25;}
  .form-row{grid-template-columns:1fr;gap:0;}
  .form-row > .form-group{margin-bottom:20px;}
  .guarantee-badge{gap:14px;padding:20px;}
  .charge-banner{padding:28px 22px 24px;}
  .charge-banner-amount{font-size:40px;}
  .summary-card.summary-pretty,.feature-list,.pm-strip{padding:20px;}
  .currency-toggle-btn{min-height:36px;}
  .checkout-summary-wrap{position:static;top:auto;gap:16px;}
}

/* ============================ RECEIPT + PRINT (success) ============================ */
.receipt-card{background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-2);padding:32px 36px;margin:28px auto 8px;max-width:none;text-align:left;position:relative;overflow:hidden;}
.receipt-card::before{content:"";position:absolute;top:-90px;right:-90px;width:200px;height:200px;border-radius:50%;border:2px solid var(--signal-light);opacity:.10;pointer-events:none;}
.receipt-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--border);}
.receipt-card-title{display:inline-flex;align-items:center;gap:10px;font-weight:500;letter-spacing:-.02em;font-size:1.18rem;color:var(--ink);}
.receipt-card-title i{color:var(--clay);font-size:1.05em;}
.receipt-tbl{width:100%;border-collapse:collapse;font-size:.98rem;}
.receipt-tbl td{padding:13px 4px;vertical-align:top;border-bottom:1px solid var(--border);}
.receipt-tbl td.lbl{color:var(--slate);font-weight:450;width:42%;white-space:nowrap;padding-right:16px;}
.receipt-tbl td.val{color:var(--ink);font-weight:450;text-align:right;word-break:break-word;}
.receipt-tbl td.val.mono,.receipt-tbl .val.mono{font-family:var(--mono);font-size:.9rem;letter-spacing:-.01em;color:var(--charcoal);}
.receipt-tbl td.val.amount,.receipt-tbl .val.amount{font-size:1.32rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);}
.receipt-tbl td.val.danger,.receipt-tbl .val.danger{color:var(--danger);font-weight:500;}
.receipt-tbl tfoot tr.receipt-tbl-total td{border-bottom:none;border-top:2px solid var(--border-strong);padding-top:18px;}
.receipt-tbl tfoot tr.receipt-tbl-total td.lbl{color:var(--ink);font-weight:500;font-size:1.02rem;}
.amount-sub{display:block;margin-top:5px;font-size:.78rem;font-weight:450;letter-spacing:0;color:var(--slate);font-family:inherit;}
.receipt-tbl .copy-inline{color:var(--slate);transition:color .18s ease,transform .18s ease;}
.receipt-tbl .copy-inline:hover{color:var(--clay);}
.confetti-wrap{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999;}
.confetti-piece{position:absolute;top:-12px;width:9px;height:14px;border-radius:var(--r-sm);opacity:.9;will-change:transform,opacity;}
@media (prefers-reduced-motion:no-preference){
  .confetti-piece{animation:rs-confetti-fall 3.2s linear forwards,rs-confetti-spin 1s linear infinite;}
  @keyframes rs-confetti-fall{0%{transform:translateY(-12px);opacity:1;}85%{opacity:1;}100%{transform:translateY(102vh);opacity:0;}}
  @keyframes rs-confetti-spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
}
@media (prefers-reduced-motion:reduce){
  .confetti-wrap{display:none;}
  .confetti-piece{animation:none;display:none;}
}
@media (max-width:767px){
  .receipt-card{padding:24px 18px;margin-top:22px;}
  .receipt-card-head{padding-bottom:14px;}
  .receipt-card-title{font-size:1.06rem;}
  .receipt-tbl{font-size:.92rem;}
  .receipt-tbl td{padding:11px 2px;}
  .receipt-tbl td.lbl{width:38%;padding-right:10px;}
  .receipt-tbl td.val.mono,.receipt-tbl .val.mono{font-size:.8rem;word-break:break-all;overflow-wrap:anywhere;white-space:normal;}
  .receipt-tbl td.val.amount,.receipt-tbl .val.amount{font-size:1.18rem;}
}
/* ============================ PROCESSING + FAILURE (payment/failure) ============================ */
.timer-card{max-width:none;margin:0 auto 28px;padding:36px 32px 30px;text-align:center;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-2);}
.timer-display{font-size:clamp(56px,12vw,72px);font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.timer-label{margin-top:8px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);}
.timer-progress{position:relative;width:100%;height:6px;margin-top:22px;background:var(--bone);border-radius:var(--r-pill);overflow:hidden;}
.timer-progress-fill{height:100%;width:0;background:var(--ink);border-radius:var(--r-pill);transition:width .3s var(--tx);}
.timer-info{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px;font-size:12.5px;color:var(--slate);}
.timer-info #progress-info{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.timer-info #progress-percentage{flex:none;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--granite);}
.tips-card{margin:0 auto 28px;padding:22px 24px;text-align:left;background:var(--cream-lift);border:1px solid var(--border);border-radius:var(--r-card);}
.tips-title{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);}
.tips-title i{color:var(--warning);font-size:15px;}
.tips-list{display:flex;flex-direction:column;gap:14px;}
.tips-list-item{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.55;color:var(--slate);}
.tips-list-item i{flex:none;margin-top:3px;width:18px;text-align:center;color:var(--granite);font-size:14px;}
.tips-list-item div{min-width:0;}
.tips-list-item strong{color:var(--ink);font-weight:500;}
@media (max-width:767px){
  .timer-card{max-width:100%;padding:28px 22px 24px;}
  .timer-display{font-size:clamp(48px,16vw,60px);}
  .timer-label{font-size:11px;}
  .timer-progress{margin-top:18px;}
  .timer-info{font-size:12px;}
  .tips-card{padding:20px 18px;}
  .tips-title{font-size:12.5px;margin-bottom:14px;}
  .tips-list-item{font-size:13.5px;gap:10px;}
}

/* ---- swich channel chips (checkout summary) ---- */
.channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px;}
.channel-chip{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-btn);font-size:12.5px;font-weight:500;color:var(--charcoal);min-width:0;}
.channel-chip i{color:var(--clay);font-size:14px;flex:none;width:16px;text-align:center;}
.channel-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- swich logo in the method row ---- */
.method-logos img.method-swich{height:22px;}

/* ---- pending outcome pill ---- */
.status-pill.pending{background:var(--bone);color:var(--granite);border:1px solid var(--border);}

@media (max-width:420px){
  .channel-grid{grid-template-columns:1fr;}
}