/* ==========================================================================
   zejneba.com — Buy demo (CTA section)
   --------------------------------------------------------------------------
   A crowded crypto buy screen collapses into a simple one, then a tap walks
   through amount, card, recurring buy and review. Markup and timing live in
   js/buy-demo.js; everything here is scoped to .buy-demo.
   ========================================================================== */

.buy-demo {
  --bd-ease: cubic-bezier(.22, .8, .24, 1);
  position: relative;
  display: flex;
  justify-content: center;
  /* Centred, so the card lines up with the text on the left */
  align-items: center;
  width: min(440px, 100%);
  height: 680px;
  overflow: hidden;
  font-family: var(--font-body, inherit);
}

@keyframes bd-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bd-blink { 50% { opacity: 0; } }
@keyframes bd-bump { 40% { transform: scale(1.04); } }
@keyframes bd-press { 50% { transform: scale(.72); } }
@keyframes bd-ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

/* The card keeps one height through the whole demo (the tallest screen, the
   crowded one). !important wins over the inline heights js/buy-demo.js animates
   between screens; shorter screens push their main button to the bottom. */
.buy-demo .bf2 { height:553px !important }

/* buy widget (before) */
.buy-demo .bf2 { background:#fff;border-radius:16px;padding:18px;color:#1a1a1a;width:100%;max-width:440px;display:flex;flex-direction:column;position:relative;overflow:hidden }
.buy-demo .tabs { display:flex;border-bottom:1px solid #eee;margin:-18px -18px 6px }
.buy-demo .tabs span { flex:1;text-align:center;font-size:13px;padding:13px 0;color:#888 }
.buy-demo .tabs .on { color:#1a1a1a;font-weight:600;box-shadow:inset 0 -2px 0 #1a1a1a }
.buy-demo .lbl { font-size:12px;font-weight:600;color:#333;margin:12px 0 6px }
.buy-demo .assets { position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px }
.buy-demo .tile { position:relative;border:1px solid #e6e6e6;border-radius:9px;padding:9px 4px;text-align:center;font-size:10.5px;color:#444;background:#fff }
.buy-demo .tile small { display:block;color:#999;font-size:9.5px;margin-top:2px }
.buy-demo .tile.sel { border-color:#6c8758;box-shadow:0 0 0 1px #6c8758 }
.buy-demo .ic { width:20px;height:20px;border-radius:50%;corner-shape:round;margin:0 auto 4px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700;font-style:normal }
.buy-demo .tile .btcl { display:block;margin:0 auto 4px }
.buy-demo .btcl { flex:none }
.buy-demo .pay { position:relative;border:1px solid #e6e6e6;border-radius:9px;padding:10px 11px;font-size:12px;background:#fff }
.buy-demo .pay .o b { color:#aaa;font-weight:400 }
.buy-demo .plus { color:#4b6039;font-weight:600;margin-right:4px }
.buy-demo .limit { margin-top:8px;font-size:10.5px;color:#777 }
.buy-demo .lt { display:flex;justify-content:space-between;gap:8px }
.buy-demo .lt u { color:#4b6039 }
.buy-demo .lbar { height:4px;background:#eee;border-radius:2px;margin-top:5px;overflow:hidden }
.buy-demo .lbar i { display:block;width:35%;height:100%;background:#9db08a }
.buy-demo .amtrow { display:flex;gap:6px;align-items:center }
.buy-demo .ai { position:relative;flex:1;border:1px solid #e6e6e6;border-radius:9px;padding:10px 11px;font-size:13px;display:flex;justify-content:space-between;align-items:center;background:#fff;color:#999 }
.buy-demo .ai em { font-style:normal;color:#999;font-size:11px }
.buy-demo .swap { color:#999;font-size:13px }
.buy-demo .repeat { position:relative;margin-top:12px;font-size:11px;color:#555 }
.buy-demo .cbx { display:inline-block;width:12px;height:12px;border:1px solid #ccc;border-radius:3px;margin-right:7px;vertical-align:-2px }
.buy-demo .seg { display:flex;gap:4px;margin-top:7px }
.buy-demo .seg span { flex:1;text-align:center;border:1px solid #e6e6e6;border-radius:5px;padding:5px 0;font-size:10px;color:#999 }
.buy-demo .fees { position:relative;margin-top:12px;border-top:1px dashed #e2e2e2;padding-top:8px;font-size:10.5px;color:#777 }
.buy-demo .fees div { display:flex;justify-content:space-between;padding:2px 0 }
.buy-demo .fees .tot { color:#1a1a1a;font-weight:600;margin-top:2px }
.buy-demo .cta2 { position:relative;margin-top:14px;background:linear-gradient(180deg,#5c7449,#4b6039);color:#fff;text-align:center;font-size:13px;font-weight:500;padding:11px;border-radius:9px;transition:background .6s,color .6s,box-shadow .6s }
.buy-demo .hint2, .buy-demo .chip, .buy-demo .note, .buy-demo .caret { display:none;position:relative }
.buy-demo .o { display:block }
.buy-demo .pr { display:flex;justify-content:space-between;align-items:center;width:100% }
.buy-demo .n { display:none }
.buy-demo .rl { color:#888 }
.buy-demo .rv { display:flex;align-items:center;gap:8px;color:#1a1a1a;font-weight:500 }
.buy-demo .rv b { color:#bbb;font-weight:400 }
.buy-demo .cc { display:inline-block;width:22px;height:15px;border-radius:3px;background:#e9ebee;border:1px solid #dcdfe3;flex:none }
.buy-demo .visa { display:inline-grid;place-items:center;width:28px;height:18px;border-radius:3px;background:#fff;border:1px solid #dcdfe3;font-size:7.5px;font-weight:800;font-style:italic;color:#1a1f71;letter-spacing:.02em;flex:none }

/* after (simple) */
.buy-demo .m2 .x2 { transition:opacity .45s var(--bd-ease),transform .45s var(--bd-ease),filter .45s var(--bd-ease);transition-delay:calc(var(--i,0)*30ms) }
.buy-demo .m2 .kp { transition:box-shadow .6s,border-color .6s }
.buy-demo .m2.scan .x2 { opacity:.4 }
.buy-demo .m2.scan .kp { box-shadow:0 0 0 2px rgba(108,135,88,.55) }
.buy-demo .m2.strip .x2 { opacity:0;transform:scale(.95);filter:blur(3px) }
.buy-demo .m2.simple { min-height:480px }
.buy-demo .m2.simple .x2, .buy-demo .m2.simple .o { display:none }
.buy-demo .m2.simple .n { display:flex;width:100%;justify-content:space-between;align-items:center;animation:bd-fade .4s 0.28s both }
.buy-demo .m2.simple .tabs { order:0 }
.buy-demo .m2.simple .amtrow { order:1;margin:44px 0 2px }
.buy-demo .m2.simple .ai.eur { border:none;padding:0;font-size:54px;font-weight:300;letter-spacing:-.04em;color:#1a1a1a;transition:color .4s }
.buy-demo .m2.simple.zero .ai.eur { color:#c4c4c4 }
.buy-demo .m2.simple .ai.eur .n, .buy-demo .m2.simple .cta2 .n { display:block;text-align:center }
.buy-demo .m2.simple.typing .caret { display:inline-block;width:2px;height:44px;background:#4b6039;margin-left:4px;vertical-align:-4px;animation:bd-blink 1s steps(1) infinite }
.buy-demo .m2.simple .hint2 { display:flex;order:2;justify-content:center;align-items:center;gap:6px;font-size:12px;color:#888;margin:4px 0 14px;animation:bd-fade .4s 0.30s both }
.buy-demo .hint2.bump { animation:bd-bump .3s }
.buy-demo .m2.simple .chip { display:inline-flex;align-items:center;gap:7px;line-height:1;order:3;align-self:center;font-size:11.5px;background:#f2f3f0;color:#3a3a3a;padding:8px 14px 8px 11px;border-radius:999px;corner-shape:round;margin-bottom:34px;font-size:12px;font-weight:500;animation:bd-fade .4s 0.33s both }
.buy-demo .m2.simple .assets { order:4;grid-template-columns:1fr }
.buy-demo .m2.simple .tile.sel { border-color:#e6e6e6;box-shadow:none;border-radius:12px 12px 0 0;padding:12px 14px;text-align:left;font-size:13px }
.buy-demo .m2.simple .pay { order:5;border-radius:0 0 12px 12px;border-top:none;padding:12px 14px;font-size:13px;margin-bottom:24px }
.buy-demo .m2.simple .cta2 { order:6;margin-top:auto;padding:14px;font-size:14px;border-radius:10px;background:#e4e7e0;color:#a3aa9b }
.buy-demo .m2.simple .cta2.ready { background:linear-gradient(180deg,#5c7449,#4b6039);color:#fff;box-shadow:0 6px 16px rgba(60,80,40,.3) }
.buy-demo .m2.simple .tile.sel .n, .buy-demo .m2.simple .pay .n { justify-content:flex-start;gap:12px;text-align:left }
.buy-demo .tile .n .btcl { margin:0;display:block }
.buy-demo .rico { width:36px;height:36px;border-radius:10px;background:#f2f3f0;color:#2a2f26;display:grid;place-items:center;flex:none }
.buy-demo .rico.plain { background:none }
.buy-demo .rico.plain .visa { width:34px;height:22px;font-size:9px }
.buy-demo .rtx { flex:1;display:flex;flex-direction:column;gap:3px;line-height:1.15;min-width:0 }
.buy-demo .rtx small { font-size:11px;color:#8a8a8a;font-weight:400;margin:0 }
.buy-demo .rtx b { font-size:14px;font-weight:600;color:#1a1a1a }
.buy-demo .chv { color:#a6a6a6;flex:none }
.buy-demo .cardic { display:grid;color:#9a9a9a }
.buy-demo .cardic svg { width:18px;height:18px }
.buy-demo .m2.simple .note { display:block;order:7;text-align:center;font-size:11px;color:#999;margin:10px 0 0;animation:bd-fade .4s 0.35s both }

/* sheets */
.buy-demo .scrim { position:absolute;inset:0;background:rgba(20,22,18,.35);opacity:0;pointer-events:none;transition:opacity .5s;z-index:5 }
.buy-demo .sheet { position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;padding:10px 18px 18px;transform:translateY(105%);transition:transform .45s var(--bd-ease);z-index:6;box-shadow:0 -10px 30px rgba(0,0,0,.12) }
.buy-demo .sh-pay .scrim, .buy-demo .sh-card .scrim, .buy-demo .sh-rec .scrim { opacity:1 }
.buy-demo .sh-pay .shPay, .buy-demo .sh-card .shCard, .buy-demo .sh-rec .shRec { transform:none }
.buy-demo .grab { width:36px;height:4px;border-radius:2px;background:#ddd;margin:0 auto 12px }
.buy-demo .sheet h5 { margin:0 0 12px;font-size:15px;font-weight:600 }
.buy-demo .shh { display:grid;grid-template-columns:32px 1fr 32px;align-items:center;margin-bottom:14px }
.buy-demo .shh h5 { margin:0;text-align:center }
.buy-demo .bk { width:32px;height:32px;border-radius:50%;corner-shape:round;background:#f2f3f0;color:#1a1a1a;display:grid;place-items:center }
.buy-demo .opt { display:flex;align-items:center;gap:12px;border:1px solid #ececec;border-radius:10px;padding:12px;margin-bottom:8px;font-size:12.5px;transition:border-color .3s,background .3s }
.buy-demo .opt>div { flex:1 }
.buy-demo .opt b { font-weight:500;display:block }
.buy-demo .opt small { color:#888;font-size:11px }
.buy-demo .opt b { font-size:13px;margin-bottom:2px }
.buy-demo .opt.hit { border-color:#6c8758;background:#f5f8f2 }
.buy-demo .bank { width:22px;height:22px;border-radius:5px;background:#eef0f3;display:grid;place-items:center;font-style:normal;font-size:12px;color:#556;flex:none }
.buy-demo .shPay .foot { font-size:10.5px;color:#999;margin:6px 0 0;text-align:center }
.buy-demo .in { display:flex;align-items:center;gap:8px;border:1px solid #e6e6e6;border-radius:8px;padding:10px 11px;font-size:12px;color:#aaa;margin-bottom:7px;transition:border-color .3s,box-shadow .3s }
.buy-demo .in.focus { border-color:#6c8758;box-shadow:0 0 0 3px rgba(108,135,88,.15) }
.buy-demo .in .v.filled { color:#1a1a1a }
.buy-demo .inrow { display:flex;gap:7px }
.buy-demo .inrow .in { flex:1 }
.buy-demo .in .cc { width:20px;height:13px;transition:opacity .3s }
.buy-demo .bill { display:flex;justify-content:space-between;align-items:center;margin:10px 0 14px;font-size:12px;border-top:1px solid #f0f0f0;padding-top:10px }
.buy-demo .bill b { font-weight:500;display:block }
.buy-demo .bill small { font-size:10.5px;color:#888 }
.buy-demo .bill span { color:#4b6039;font-size:11.5px;font-weight:500 }
.buy-demo .sbtn { text-align:center;font-size:13.5px;font-weight:500;padding:13px;border-radius:10px;background:#e4e7e0;color:#a3aa9b;transition:background .5s,color .5s,box-shadow .5s }
.buy-demo .sbtn.ready { background:linear-gradient(180deg,#5c7449,#4b6039);color:#fff;box-shadow:0 6px 16px rgba(60,80,40,.25) }
.buy-demo .rlist { border:1px solid #ececec;border-radius:12px;overflow:hidden }
.buy-demo .ropt { display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border-top:1px solid #f0f0f0;font-size:12.5px;transition:background .35s }
.buy-demo .ropt:first-child { border-top:none }
.buy-demo .ropt>div { flex:1 }
.buy-demo .ropt b { font-weight:500;display:block }
.buy-demo .ropt small { color:#888;font-size:11px }
.buy-demo .ropt.sel { background:#f5f8f2 }
.buy-demo .radio { width:17px;height:17px;border-radius:50%;corner-shape:round;border:1.5px solid #ccc;position:relative;flex:none;margin-top:1px;transition:border-color .3s }
.buy-demo .radio::after { content:"";position:absolute;inset:3px;border-radius:50%;corner-shape:round;background:#4b6039;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1) }
.buy-demo .ropt.sel .radio { border-color:#4b6039 }
.buy-demo .ropt.sel .radio::after { transform:scale(1) }
.buy-demo .next { display:block;max-height:0;opacity:0;overflow:hidden;color:#3d5030!important;font-weight:500;transition:max-height .5s var(--bd-ease),opacity .4s .1s,margin .5s }
.buy-demo .ropt.sel .next { max-height:30px;opacity:1;margin-top:3px }
.buy-demo .shRec .sbtn { margin-top:14px }

/* review */
/* 1px past the card edges: at the demo's 90% scale the edge pixel otherwise lets the Buy tab's underline peek through */
.buy-demo .review { position:absolute;left:-1px;right:-1px;top:-1px;min-height:calc(100% + 2px);background:#fff;padding:19px;transform:translateX(102%);transition:transform .5s var(--bd-ease);z-index:7;display:flex;flex-direction:column }
.buy-demo .rev .review { transform:none }
.buy-demo .rhead { display:grid;grid-template-columns:32px 1fr 32px;align-items:center;font-size:14px;font-weight:600;text-align:center;padding-bottom:12px }
.buy-demo .rhead .rt { line-height:1 }
.buy-demo .rtop { text-align:center;margin:22px 0 18px }
.buy-demo .rtop .btcl { display:block;margin:0 auto 12px }
.buy-demo .rtop h3 { margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em }
.buy-demo .rtop small { font-size:12px;color:#888 }
.buy-demo .rrow { display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:6px 0;color:#777 }
.buy-demo .rrow>span:last-child { color:#1a1a1a;display:flex;align-items:center;gap:6px }
.buy-demo .rdiv { height:1px;background:#f0f0f0;margin:6px 0 }
.buy-demo .rrow.tot { font-weight:600;color:#1a1a1a;border-top:1px solid #eee;margin-top:4px;padding-top:11px }
.buy-demo .rev .rrow, .buy-demo .rev .rdiv { animation:bd-fade .35s both }
.buy-demo .legal3 { font-size:10.5px;color:#999;text-align:center;margin:auto 0 10px;padding-top:14px;line-height:1.45 }
.buy-demo .legal3 u { color:#4b6039 }

/* tap */
/* End of a round: the whole screen goes white for a moment, the next round comes up out of it */
.buy-demo .blank { position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .8s ease;z-index:30 }
.buy-demo .blank.on { opacity:1 }
.buy-demo .blank.now { transition:none }
.buy-demo .tap { position:absolute;left:0;top:0;width:24px;height:24px;z-index:20;pointer-events:none;opacity:0;transform:translate(300px,500px) }
.buy-demo .tap .dot { position:absolute;inset:0;border-radius:50%;corner-shape:round;background:rgba(255,255,255,.95);box-shadow:0 3px 12px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.15) }
.buy-demo .tap.press .dot { animation:bd-press .45s ease }
.buy-demo .tap.press::after { content:"";position:absolute;inset:0;border-radius:50%;corner-shape:round;border:2px solid rgba(108,135,88,.9);animation:bd-ripple .6s ease-out forwards }

@media (max-width: 600px) {
  .buy-demo { height: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  .buy-demo * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}