/* Resseler flow pages (/jumlo/amount, /jumlo/pay, /jumlo/orders) — same look as the catalogue (jumlo-sheet.css):
   branded hero (company logo + colour), tinted cards, plates for rates, fluid text, animated details.
   Layered on top of jumlo.css (the .jv-* components); everything is driven by --jv-a so every company gets its own colours. */
body.jumlo-amount-page, body.jumlo-pay-page, body.jumlo-orders-page{ background:
    radial-gradient(60% 34% at 100% 0%, color-mix(in oklab, var(--jv-a) 16%, transparent), transparent 70%),
    radial-gradient(54% 30% at 0% 46%, color-mix(in oklab, var(--jv-a-2) 11%, transparent), transparent 70%),
    var(--bg,#f6f7fb); background-attachment:fixed; }

.jvf-wrap{ margin-bottom:0; padding-bottom:0; }
.jvf-wrap .jvs-hero{ padding-bottom:16px; }
.jvf-wrap .jvs-hi{ font-size:calc(clamp(20px, 8cqw, 28px) * var(--k,1)); }
.jvf-wrap .jvm-sub{ margin:10px 0 0; font-size:clamp(12px, 3.6cqw, 13.5px); line-height:1.45; color:rgba(255,255,255,.92); font-weight:500; animation:jvsRise .9s cubic-bezier(.22,1,.36,1) .25s both; }
.jvf-wrap .jvs-hi{ overflow-wrap:break-word; }
.jvf-nopill .jvs-brand{ padding-right:0; }
.jvf-prov{ cursor:default; }
.jvf-prov .jvs-best-t b em{ margin-left:.5em; }
.jvf-prov::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--pc, rgba(255,255,255,.7)); opacity:.9; }

/* progress */
.jvf-steps{ display:flex; align-items:center; margin:16px 0 0; padding:0; list-style:none; animation:jvsRise .9s cubic-bezier(.22,1,.36,1) .32s both; }
.jvf-steps li{ display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:clamp(10px, 3.1cqw, 12.5px); font-weight:700; color:rgba(255,255,255,.72); }
.jvf-steps li i{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:800; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); }
.jvf-steps li + li::before{ content:''; flex:none; width:clamp(8px, 4.5cqw, 40px); height:3px; margin:0 6px; border-radius:3px; background:rgba(255,255,255,.28); }
.jvf-steps li.done + li::before{ background:#fff; transform-origin:left; animation:jvfGrow .8s cubic-bezier(.22,1,.36,1) both; }
.jvf-steps li.done i{ color:var(--a); background:#fff; box-shadow:none; }
.jvf-steps li.now{ color:#fff; }
.jvf-steps li.now i{ color:var(--a); background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.25); animation:jvfPulse 2.2s ease-out infinite; }
@keyframes jvfGrow{ from{ transform:scaleX(0); } to{ transform:none; } }
@keyframes jvfPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); } 70%,100%{ box-shadow:0 0 0 9px rgba(255,255,255,0); } }

/* page frame */
.jv.jvf{ max-width:760px; margin:0 auto; padding:12px 14px 112px; font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
.jvf .jv-ph, .jvf .jv-steps{ display:none; }
.jvf .jv-card, .jvf .jm-panel{ padding:16px; border:0; border-radius:24px; margin-bottom:12px;
  background:linear-gradient(165deg, color-mix(in oklab, var(--jv-a) 8%, #fff) 0%, #fff 56%);
  box-shadow:0 12px 28px color-mix(in oklab, var(--jv-a) 12%, rgba(15,23,42,.07)), inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 16%, #fff); }
.jvf .jm-head-ic{ border-radius:12px; background:linear-gradient(135deg, var(--jv-a), var(--jv-a-2)); box-shadow:0 6px 12px color-mix(in oklab, var(--jv-a) 30%, transparent); }
.jvf .jm-head-t{ font-size:clamp(14px, 4.2vw, 16px); }

/* amount */
.jvf .jv-lbl, .jvf .jm-subhead{ font-size:11px; letter-spacing:.08em; color:var(--jv-mute); }
.jvf .jv-amt{ height:clamp(62px, 18vw, 76px); padding-left:clamp(38px, 11vw, 50px); border-radius:22px; font-size:clamp(26px, 9vw, 36px); font-weight:800; letter-spacing:-.5px;
  background:rgba(255,255,255,.92); border:2px solid color-mix(in oklab, var(--jv-a) 18%, #fff); box-shadow:inset 0 2px 6px rgba(15,23,42,.04); }
.jvf .jv-amt:focus{ border-color:var(--jv-a); box-shadow:0 0 0 5px color-mix(in oklab, var(--jv-a) 14%, transparent); }
.jvf .jv-amtbox .cur{ left:clamp(14px, 4vw, 20px); font-size:clamp(22px, 7vw, 30px); }
.jvf .jv-q{ padding:9px 15px; border-radius:99px; font-size:13px; border:0; background:#fff; box-shadow:0 3px 8px rgba(15,23,42,.07), inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 18%, #fff); }
.jvf .jv-q.on{ color:#fff; background:linear-gradient(135deg, var(--jv-a), var(--jv-a-2)); box-shadow:0 8px 16px color-mix(in oklab, var(--jv-a) 32%, transparent); animation:jvsTabOn .4s cubic-bezier(.34,1.56,.64,1); }
.jvf .jv-tiers{ gap:8px; }
.jvf .jv-tier{ gap:8px; padding:7px 7px 7px 13px; border-radius:99px; border:0; background:#fff; box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 16%, #fff); }
.jvf .jv-tier .rt{ display:inline-flex; align-items:center; gap:6px; }
.jvf .jv-tier .rt b{ font-size:15px; font-weight:800; color:color-mix(in oklab, var(--jv-a) 62%, #0f172a); }
.jvf .jv-tier .rt em{ font-style:normal; font-size:11px; font-weight:800; padding:3px 8px; border-radius:99px; color:var(--jv-a); background:color-mix(in oklab, var(--jv-a) 11%, #fff); }
.jvf .jv-tier.on{ transform:scale(1.04); box-shadow:inset 0 0 0 2px var(--jv-a), 0 8px 16px color-mix(in oklab, var(--jv-a) 22%, transparent); }

/* receipt (right column on wide screens, bottom block on phones) */
.jvf .jv-rcpt{ container-type:inline-size; padding:20px; border-radius:26px; background:linear-gradient(150deg, color-mix(in oklab, var(--jv-a) 86%, #fff) 0%, var(--jv-a) 42%, var(--jv-a-2) 100%);
  box-shadow:0 18px 36px color-mix(in oklab, var(--jv-a) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.28); }
.jvf .jv-rcpt .big{ font-size:clamp(34px, 17cqw, 52px); letter-spacing:-1px; }
.jvf .jv-rcpt .jv-btn{ border-radius:18px; height:54px; }
.jvf .jv-gain{ background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.jvf .jv-btn{ border-radius:18px; min-height:54px; font-size:clamp(14.5px, 4.2vw, 16px); font-weight:800; background:linear-gradient(135deg, var(--jv-a), var(--jv-a-2)); box-shadow:0 12px 24px color-mix(in oklab, var(--jv-a) 34%, transparent); }
.jvf .jv-rcpt .jv-btn{ background:#fff; color:var(--jv-a-2); box-shadow:0 10px 24px rgba(0,0,0,.2); }

/* pay */
.jvf .jv-strip{ display:flex; border-radius:22px; padding:12px 14px; color:var(--jv-ink); background:linear-gradient(165deg, color-mix(in oklab, var(--jv-a) 10%, #fff), #fff 70%);
  box-shadow:0 10px 24px color-mix(in oklab, var(--jv-a) 12%, rgba(15,23,42,.07)), inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 18%, #fff); }
.jvf .jv-strip small{ color:var(--jv-mute); opacity:1; }
.jvf .jv-strip b{ font-size:clamp(17px, 5.4vw, 21px); color:color-mix(in oklab, var(--jv-a) 62%, #0f172a); }
.jvf .jv-strip .ic{ border-radius:50%; box-shadow:0 0 0 2.5px #fff, 0 0 0 4.5px color-mix(in oklab, var(--jv-a) 50%, transparent); }
.jvf .jv-strip .get{ background:color-mix(in oklab, var(--jv-a) 10%, #fff); }
.jvf .jm-method{ border:0; border-radius:20px; padding:11px 13px; background:#fff; box-shadow:0 4px 12px rgba(15,23,42,.06), inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 14%, #fff); }
.jvf .jm-method:has(input:checked){ background:linear-gradient(165deg, color-mix(in oklab, var(--jv-a) 12%, #fff), #fff 70%); box-shadow:0 10px 22px color-mix(in oklab, var(--jv-a) 22%, transparent), inset 0 0 0 2px var(--jv-a); }
.jvf .jm-method-name{ font-size:clamp(14px, 4.4vw, 16px); }
.jvf .jm-method-check{ border-width:2px; }
.jvf .jm-phone-input{ height:clamp(54px, 15vw, 62px); border-radius:20px; font-size:clamp(16px, 5vw, 19px); background:rgba(255,255,255,.92); border:2px solid color-mix(in oklab, var(--jv-a) 16%, #fff); }
.jvf .jm-phone-input:focus{ border-color:var(--jv-a); }
.jvf .jm-chip{ border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 22%, #fff); border:0; }
.jvf .jv-back{ border:0; border-radius:20px; background:#fff; box-shadow:0 4px 12px rgba(15,23,42,.06), inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 16%, #fff); }

/* orders */
.jvf .jv-filters{ gap:8px; padding:2px 2px 8px; margin-bottom:2px; }
.jvf .jv-f{ border:0; background:#fff; box-shadow:0 3px 8px rgba(15,23,42,.06), inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 16%, #fff); font-size:clamp(12px, 3.6vw, 13px); }
.jvf .jv-f.on{ color:#fff; background:linear-gradient(135deg, var(--jv-a), var(--jv-a-2)); box-shadow:0 8px 16px color-mix(in oklab, var(--jv-a) 32%, transparent); animation:jvsTabOn .4s cubic-bezier(.34,1.56,.64,1); }
.jvf .jv-olist{ display:grid; gap:10px; }
.jvf .jv-ord{ border:0; border-radius:22px; padding:13px 14px; background:linear-gradient(165deg, color-mix(in oklab, var(--jv-a) 7%, #fff), #fff 60%);
  box-shadow:0 8px 20px color-mix(in oklab, var(--jv-a) 10%, rgba(15,23,42,.06)), inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 14%, #fff); }
.jvf .jv-ord-ic{ width:44px; height:44px; border-radius:50%; }
.jvf .jv-ord-top b{ font-size:clamp(13.5px, 4vw, 15px); }
.jvf .jv-ord-top em{ font-size:clamp(14px, 4.4vw, 16px); color:color-mix(in oklab, var(--jv-a) 62%, #0f172a); }
.jvf .jv-day{ margin:12px 4px 2px; }
.jvf .jv-again{ border-radius:50%; background:color-mix(in oklab, var(--jv-a) 12%, #fff); }
.jvf .jv-empty{ border:0; border-radius:26px; background:linear-gradient(165deg, color-mix(in oklab, var(--jv-a) 8%, #fff), #fff 60%); box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--jv-a) 18%, #fff); }
.jvf .jv-note{ border-radius:18px; }

@media (min-width:900px){ .jv.jvf, .jvf-wrap{ max-width:1040px; } .jvf .jv-split{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }
@media (prefers-reduced-motion:reduce){ .jvf *, .jvf-wrap *{ animation:none !important; transition:none !important; } }
.jvf .jv-ord-top b{ white-space:nowrap; }
.jvf .jv-ord-top{ gap:6px; }

/* ── phones: one screen, no scrolling; only what is needed ─────────────────────────────────────────── */
@media (max-width:639px){
  .jvf-wrap{ padding-top:8px; padding-bottom:0; }
  .jvf-wrap .jvs-hero{ padding:11px 12px 12px; border-radius:22px; }
  .jvf-wrap .jvs-top{ top:11px; right:12px; }
  .jvf-wrap .jvs-logo{ width:40px; height:40px; padding:4px; border-radius:13px; } .jvf-wrap .jvs-ping{ border-radius:16px; }
  .jvf-wrap .jvs-brand{ gap:10px; padding-right:74px; } .jvf-nopill .jvs-brand{ padding-right:0; }
  .jvf-wrap .jvs-hi{ font-size:clamp(18px, 6.2vw, 23px); }
  .jvf-wrap .jvm-sub{ display:none; }
  .jvf-wrap .jvs-best{ margin-top:9px; padding:6px 12px 6px 6px; border-radius:16px; gap:10px; }
  .jvf-wrap .jvs-av{ width:34px; height:34px; } .jvf-wrap .jvs-best-t b{ font-size:calc(clamp(18px, 6.4vw, 24px)); } .jvf-wrap .jvs-best-t small{ font-size:9px; }
  .jvf-steps{ margin-top:10px; } .jvf-steps li i{ width:22px; height:22px; font-size:11px; }
  .jvf-steps li:not(.now) span{ display:none; }
  .jvf-steps li.now span{ font-size:11.5px; }
  .jvf-steps li + li::before{ flex:1; width:auto; max-width:none; margin:0 8px; }
  .jvf-steps{ gap:0; } .jvf-steps li{ flex:none; } .jvf-steps li + li{ flex:1; }
  .jvf-steps li + li::before{ flex:1; }

  .jv.jvf{ padding:8px 12px 100px; }
  .jvf .jv-card, .jvf .jm-panel{ padding:12px; margin-bottom:8px; border-radius:20px; }
  .jvf .jm-head{ display:none; }
  .jvf .jv-lbl{ margin:0 2px 6px; font-size:10px; }
  .jvf .jv-amt{ height:clamp(52px, 14vw, 62px); border-radius:18px; font-size:clamp(24px, 7.4vw, 30px); }
  .jvf .jv-quick{ flex-wrap:nowrap; overflow-x:auto; margin:8px -2px 0; padding:2px; }
  .jvf .jv-q{ padding:7px 13px; font-size:12.5px; }
  .jvf .jv-err{ min-height:0; margin:4px 3px 0; }
  .jvf .jv-err:empty{ display:none; }
  .jvf .jv-tiers{ flex-wrap:nowrap; overflow-x:auto; margin-top:10px; padding:2px; scrollbar-width:none; } .jvf .jv-tiers::-webkit-scrollbar{ display:none; } .jvf .jv-tier{ flex:none; }
  .jvf .jv-rcpt{ padding:14px; border-radius:22px; }
  .jvf .jv-rcpt .big{ margin:4px 0 8px; font-size:clamp(30px, 10vw, 40px); }
  .jvf .jv-lines{ margin-top:10px; } .jvf .jv-ln{ padding:5px 0; font-size:12.5px; }
  .jvf .jv-rcpt .jv-btn, .jvf .jv-btn{ min-height:48px; height:48px; margin-top:8px; border-radius:16px; }
  .jvf .jv-strip{ padding:8px 12px; margin-bottom:8px; border-radius:18px; } .jvf .jv-strip small{ display:none; } .jvf .jv-strip .get small{ display:block; }
  .jvf .jm-method{ margin-bottom:8px; padding:9px 12px; border-radius:18px; } .jvf .jm-method-logo{ width:68px; }
  .jvf .jm-subhead{ margin-bottom:5px; }
  .jvf .jm-phone-input{ height:52px; } .jvf .jm-field-err{ min-height:0; margin-top:3px; } .jvf .jm-field-err:empty{ display:none; }
  .jvf .jm-rukumo-check{ margin-top:10px; padding-top:10px; }
  .jvf .jv-back{ padding:7px 12px; margin-bottom:8px; }
  .jvf .jv-filters{ padding-bottom:4px; } .jvf .jv-f{ padding:7px 13px; }
  .jvf .jv-ord{ padding:10px 12px; } .jvf .jv-olist{ gap:8px; }
}
@media (max-width:639px) and (max-height:700px){
  .jvf-wrap .jvs-best{ display:none; }
  .jvf .jv-tiers{ display:none; }
  .jvf .jv-gain{ display:none; }
}
@media (max-width:639px){ .jv.jvf{ padding-bottom:12px; } body.jumlo-amount-page main.page, body.jumlo-pay-page main.page{ padding-bottom:calc(var(--safe-bottom,0px) + 84px); } }
@media (max-width:639px) and (max-height:700px){
  .jvf-wrap .jvs-hero{ padding:8px 12px 9px; } .jvf-steps{ margin-top:7px; }
  .jvf-wrap{ padding-top:6px; } .jv.jvf{ padding-top:6px; }
  .jvf .jv-card, .jvf .jm-panel{ padding:10px; margin-bottom:6px; }
  .jvf .jv-amt{ height:48px; } .jvf .jv-quick{ margin-top:6px; }
  .jvf .jv-rcpt{ padding:11px 13px; } .jvf .jv-rcpt .big{ font-size:28px; margin:2px 0 4px; } .jvf .jv-ln{ padding:3px 0; } .jvf .jv-lines{ margin-top:6px; }
  .jvf .jv-rcpt .jv-btn, .jvf .jv-btn{ min-height:44px; height:44px; margin-top:6px; }
  .jvf .jv-strip{ padding:6px 10px; margin-bottom:6px; } .jvf .jv-strip .ic{ width:34px; height:34px; } .jvf .jv-strip b{ font-size:16px; }
  .jvf .jm-method{ margin-bottom:6px; padding:7px 10px; } .jvf .jm-method-logo{ width:58px; }
  .jvf .jm-phone-input{ height:46px; } .jvf .jm-subhead{ margin-bottom:3px; } .jvf .jm-rukumo-check{ margin-top:7px; padding-top:7px; }
  .jvf .jv-back{ padding:5px 12px; margin-bottom:6px; }
  body.jumlo-amount-page main.page, body.jumlo-pay-page main.page{ padding-bottom:calc(var(--safe-bottom,0px) + 80px); }
}