:root { --ink:#172033; --muted:#697386; --line:#dfe5ec; --soft:#f6f9fc; --purple:#111111; --navy:#0a2540; --green:#10a779; }
* { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; color:var(--ink); background:white; font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased; } button,input,select { font:inherit; } a { color:inherit; text-decoration:none; } :focus-visible { outline:3px solid rgba(0,0,0,.25); outline-offset:2px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:800; letter-spacing:-.6px; }.brand i { width:31px; height:31px; display:grid; place-items:center; color:white; background:linear-gradient(145deg,#7c75ff,#5148e5); border-radius:9px; font-style:normal; box-shadow:0 8px 18px rgba(0,0,0,.28); }
.bot-home { position:relative; min-height:100vh; overflow:hidden; display:grid; place-items:center; padding:24px; color:white; background:#0a2540; }.orb { position:absolute; border-radius:50%; filter:blur(2px); }.orb.one { width:520px; height:520px; top:-270px; right:-120px; background:radial-gradient(circle,rgba(0,212,255,.3),transparent 68%); }.orb.two { width:620px; height:620px; bottom:-390px; left:-130px; background:radial-gradient(circle,rgba(0,0,0,.46),transparent 67%); }.bot-card { position:relative; width:min(720px,100%); padding:60px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:28px; box-shadow:0 35px 100px rgba(0,0,0,.22); backdrop-filter:blur(20px); }.bot-pill { display:flex; align-items:center; gap:8px; width:max-content; margin-top:70px; padding:6px 10px; color:#a9f5db; background:rgba(16,167,121,.13); border-radius:999px; font-size:11px; font-weight:700; }.bot-pill i { width:7px; height:7px; border-radius:50%; background:#35dc9e; box-shadow:0 0 0 4px rgba(53,220,158,.12); }.bot-card h1 { margin:20px 0; font-size:clamp(48px,8vw,76px); line-height:.98; letter-spacing:-.06em; }.bot-card h1 em { color:#80e9ff; font-style:normal; }.bot-card p { max-width:610px; color:#adbdcc; font-size:18px; }.commands { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 50px; }.commands span { padding:8px 12px; color:#d9e6f1; background:rgba(255,255,255,.09); border-radius:7px; font:13px ui-monospace,monospace; }.bot-card small { color:#7891a8; }
.loading,.result { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:10px; padding:25px; text-align:center; background:var(--soft); }.loading span { width:28px; height:28px; border:3px solid #dbe2e9; border-top-color:var(--purple); border-radius:50%; animation:spin .7s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }.result .brand { margin-bottom:55px; }.result-icon { width:68px; height:68px; display:grid; place-items:center; color:white; background:var(--green); border-radius:50%; font-size:29px; }.result-icon.cancel { background:#d43151; }.result h1 { margin:8px 0 0; font-size:37px; letter-spacing:-.04em; }.result p { max-width:470px; color:var(--muted); font-size:16px; }

/* ---- checkout (Stripe-like) ---- */
.checkout { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; color:#1a2233; background:#fff; }
.summary { display:flex; justify-content:flex-end; padding:40px clamp(32px,6vw,96px) 48px; background:#f7f8fa; border-right:1px solid #e6e9ee; }
.summary-inner,.form-side form { width:100%; max-width:460px; }
.summary-inner { position:sticky; top:40px; align-self:flex-start; }
.summary-nav { display:flex; align-items:center; gap:18px; min-height:44px; }
.summary-nav>a { display:grid; place-items:center; width:28px; height:28px; margin-left:-6px; color:#8a94a6; border-radius:8px; transition:background .15s,color .15s; }.summary-nav>a:hover { background:#eceff3; color:#4b5565; }
.shop-brand { display:flex; align-items:center; min-width:0; }
.shop-name { overflow:hidden; color:#111827; font-size:17px; font-weight:650; letter-spacing:-.015em; text-overflow:ellipsis; white-space:nowrap; }
.shop-brand img { display:none; max-width:190px; max-height:44px; width:auto; height:auto; object-fit:contain; }
.shop-brand.has-logo img { display:block; }.shop-brand.has-logo .shop-name { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.paying-label { margin:44px 0 2px; color:#5b6577; font-size:14px; font-weight:500; }
.summary h1 { margin:0; color:#0f172a; font-size:38px; font-weight:650; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.product { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:36px; padding:18px 0 22px; border-bottom:1px solid #e1e5eb; }.product-main { display:flex; align-items:center; gap:14px; min-width:0; }.product-main>div { min-width:0; }.product b,.product small { display:block; }.product-main b { overflow:hidden; font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.product-main small { margin-top:2px; color:#778195; font-size:12.5px; }
.product-image { position:relative; width:56px; height:56px; flex:0 0 56px; display:grid; place-items:center; color:#8a94a6; background:#fff; border:1px solid #e1e5eb; border-radius:10px; box-shadow:0 1px 2px rgba(16,24,40,.04); }.product-image img { display:none; width:100%; height:100%; object-fit:cover; border-radius:9px; }.product-image.has-image img { display:block; }.product-image.has-image>svg { display:none; }
.product-image small { position:absolute; top:-8px; right:-8px; min-width:21px; height:21px; display:grid; place-items:center; margin:0; padding:0 6px; color:#fff; background:#6b7587; border-radius:21px; font-size:11px; font-weight:700; }
.totals { padding-top:16px; }.totals>div { display:flex; justify-content:space-between; padding:6px 0; color:#5b6577; font-size:14px; }.totals b { color:#1f2937; font-weight:600; font-variant-numeric:tabular-nums; }.totals .grand-total { align-items:center; margin-top:12px; padding-top:18px; border-top:1px solid #e1e5eb; color:#111827; font-size:15px; font-weight:600; }.grand-total b { font-size:18px; }.grand-total small { margin-right:6px; color:#6b7587; font-size:11px; font-weight:500; }
.summary footer { margin-top:56px; color:#99a2b1; font-size:12px; }.summary footer b { color:#6b7587; }

.form-side { display:flex; justify-content:flex-start; padding:40px clamp(32px,6vw,96px) 72px; }
.form-section { margin-bottom:30px; }.form-section h2 { margin:0 0 16px; color:#111827; font-size:16px; font-weight:650; letter-spacing:-.01em; }.form-section>p { margin:-8px 0 14px; color:#8892a3; font-size:12.5px; }
label { display:block; margin-bottom:14px; color:#3b4557; font-size:13px; font-weight:500; }label small { color:#9aa3b2; font-weight:400; }
input:not([type=radio]):not([type=checkbox]),select { width:100%; height:46px; margin-top:6px; padding:0 13px; color:#111827; border:1px solid #d5dbe4; border-radius:9px; background:#fff; font-size:15px; box-shadow:0 1px 2px rgba(16,24,40,.04); transition:border-color .15s,box-shadow .15s; -webkit-appearance:none; appearance:none; }
select { padding-right:36px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238a94a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center; }
input::placeholder { color:#b3bbc8; }input:not([type=radio]):not([type=checkbox]):hover,select:hover { border-color:#c4ccd8; }input:focus,select:focus { border-color:#111111!important; outline:0; box-shadow:0 0 0 4px rgba(0,0,0,.13)!important; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.address-field { position:relative; }
.suggest { position:absolute; z-index:20; left:0; right:0; top:100%; margin:6px 0 0; padding:6px; list-style:none; background:#fff; border:1px solid #dfe4ec; border-radius:12px; box-shadow:0 14px 34px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06); max-height:300px; overflow:auto; }
.suggest[hidden] { display:none; }
.suggest li { display:flex; align-items:center; gap:11px; padding:10px; border-radius:8px; cursor:pointer; color:#8a94a6; }.suggest li.on,.suggest li:hover { background:#f4f4f4; color:#111111; }
.suggest li b,.suggest li small { display:block; }.suggest li b { color:#111827; font-size:14px; font-weight:600; }.suggest li small { margin-top:1px; color:#778195; font-size:12.5px; font-weight:400; }.suggest li svg { flex:0 0 auto; }

.shipping-options { overflow:hidden; border:1px solid #d5dbe4; border-radius:10px; }
.shipping-option { position:relative; display:flex; align-items:center; gap:12px; min-height:62px; margin:0; padding:12px 14px; cursor:pointer; border-bottom:1px solid #e6e9ee; transition:background .15s; }.shipping-option:last-child { border-bottom:0; }.shipping-option:has(input:checked) { background:#f6f6f6; box-shadow:inset 0 0 0 1.5px #111111; }
.shipping-option input,.payment input { position:absolute; opacity:0; pointer-events:none; }
.radio-dot { width:16px; height:16px; flex:0 0 16px; border:1.5px solid #b4bccb; border-radius:50%; background:#fff; transition:border .15s; }.shipping-option input:checked+.radio-dot,.payment input:checked+.radio-dot { border:5px solid #111111; }
.shipping-copy { flex:1; min-width:0; }.shipping-copy b,.shipping-copy small { display:block; }.shipping-copy b { color:#1f2937; font-size:14px; font-weight:600; }.shipping-copy small { margin-top:1px; color:#778195; font-size:12.5px; font-weight:400; }.shipping-option strong { color:#1f2937; font-size:14px; font-weight:600; }

.payment-section { padding-top:26px; border-top:1px solid #eceff3; }
.payment { display:flex; align-items:center; gap:12px; margin:0; padding:14px; border:1.5px solid #111111; border-radius:10px 10px 0 0; background:#f6f6f6; }.payment b { flex:1; color:#1f2937; font-size:14px; font-weight:600; }
.card-brands { display:flex; gap:5px; }.card-brands img { display:block; width:30px; height:auto; border-radius:3px; box-shadow:0 0 0 1px rgba(16,24,40,.08); transition:opacity .2s,filter .2s; }.card-brands img.dim { opacity:.25; filter:grayscale(1); }
.card-box { padding:16px 16px 4px; border:1px solid #d5dbe4; border-top:0; border-radius:0 0 10px 10px; background:#fff; }
.card-number { position:relative; display:block; }.card-number input { padding-right:56px; }.card-brand-now { position:absolute; right:12px; top:50%; margin-top:3px; transform:translateY(-50%); display:flex; pointer-events:none; }.card-brand-now img { border-radius:3px; box-shadow:0 0 0 1px rgba(16,24,40,.08); }
.same-billing { display:flex; align-items:center; gap:10px; margin:2px 0 16px; color:#3b4557; font-weight:450; cursor:pointer; }
.same-billing input { position:absolute; opacity:0; }.same-billing .check { width:18px; height:18px; flex:0 0 18px; display:grid; place-items:center; border:1.5px solid #b4bccb; border-radius:5px; background:#fff; transition:all .15s; }
.same-billing input:checked+.check { background:#111111; border-color:#111111; }.same-billing input:checked+.check::after { content:''; width:9px; height:5px; margin-top:-2px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
.same-billing input:focus-visible+.check { box-shadow:0 0 0 4px rgba(0,0,0,.18); }
.card-box [hidden],#billing-fields[hidden] { display:none; }
.card-placeholder { padding:14px; border:1px solid #d5dbe4; border-top:0; border-radius:0 0 10px 10px; background:#fafbfc; color:#778195; font-size:13px; }

form>button[type=submit] { width:100%; height:50px; display:block; margin:28px 0 0; border:0; border-radius:10px; color:white; background:#111111; font-size:16px; font-weight:650; cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.12),0 8px 20px rgba(0,0,0,.25); transition:transform .15s,box-shadow .15s,background .15s; font-variant-numeric:tabular-nums; }
form>button[type=submit]:hover:not(:disabled) { background:#574fef; transform:translateY(-1px); box-shadow:0 1px 2px rgba(16,24,40,.12),0 12px 26px rgba(0,0,0,.32); }form>button[type=submit]:active:not(:disabled) { transform:translateY(0); }form>button[type=submit]:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.notice svg { flex:0 0 auto; }.notice { display:flex; align-items:center; justify-content:center; gap:7px; margin:14px 0 0; color:#8892a3; font-size:12.5px; text-align:center; }.error { min-height:22px; margin:10px 0 0; color:#d2314f; font-size:13.5px; text-align:center; }

.payment-panel { max-width:430px; margin:60px auto; text-align:center; }
.payment-panel h2 { margin:16px 0 8px; font-size:22px; letter-spacing:-.02em; }
.payment-panel p { color:var(--muted); font-size:15px; }
.payment-panel small { color:#8b95a4; }
.payment-panel .result-icon { margin:0 auto; }
.spinner { width:36px; height:36px; margin:0 auto; border:3px solid #dbe2e9; border-top-color:var(--purple); border-radius:50%; animation:spin .8s linear infinite; }
.open-bank { display:inline-block; padding:13px 24px; color:white; background:var(--purple); border-radius:10px; font-weight:650; box-shadow:0 8px 20px rgba(0,0,0,.25); }
form[hidden] { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.result .brand { margin-bottom:55px; }.result-icon { width:68px; height:68px; display:grid; place-items:center; color:white; background:var(--green); border-radius:50%; font-size:29px; }.result-icon.cancel { background:#d43151; }.result h1 { margin:8px 0 0; font-size:37px; letter-spacing:-.04em; }.result p { max-width:470px; color:var(--muted); font-size:16px; }

/* ---- tablet / mobile: the order summary sits on top, the form below, everything full width ---- */
@media(max-width:900px){
  .checkout { display:block; }
  .summary { display:block; padding:18px 20px 22px; border-right:0; border-bottom:1px solid #e6e9ee; }
  .summary-inner { position:static; max-width:none; }
  .summary-nav { min-height:40px; }
  .paying-label { margin-top:20px; }.summary h1 { font-size:32px; }
  .product { margin-top:18px; padding:14px 0 16px; }.product-image { width:48px; height:48px; flex-basis:48px; }.totals { padding-top:10px; }.summary footer { display:none; }
  .form-side { padding:26px 20px 56px; }.form-side form { max-width:none; margin:0 auto; }
}
@media(min-width:620px) and (max-width:900px){ .summary-inner,.form-side form { max-width:520px; margin-inline:auto; } }
@media(max-width:480px){
  input:not([type=radio]):not([type=checkbox]),select { font-size:16px; }   /* no zoom on iOS */
  .row { grid-template-columns:1fr 1fr; gap:10px; }
  .summary h1 { font-size:30px; }.shop-brand img { max-width:150px; max-height:38px; }
  .card-brands img:nth-child(n+4) { display:none; }
  .bot-card h1 { font-size:48px; }.bot-card { padding:27px; }
  .suggest { max-height:240px; }
}
@media(max-width:340px){ .row { grid-template-columns:1fr; } }

.error .retry { display:block; margin:10px auto 0; padding:9px 18px; color:#111111; background:#f4f4f4; border:1px solid #dcdcdc; border-radius:8px; font-weight:600; cursor:pointer; }
.error .retry:hover { background:#e8ebff; }

.home-cta { display:inline-block; margin:6px 0 26px; padding:12px 20px; color:#0a2540; background:white; border-radius:8px; font-weight:600; text-decoration:none; }.home-cta:hover { background:#e6ebf1; }.bot-card small { display:block; }
.shipping-option[hidden] { display: none !important; }