/* ============================================================
   swap.bitmaxis.com — estilos del widget de recarga
   Complementa styles.css (mismos tokens / tema oscuro).
   ============================================================ */

/* El atributo [hidden] SIEMPRE debe ocultar, aunque la clase
   defina display (p.ej. .picker-overlay{display:grid}). Sin esto,
   el selector "Elige red" queda visible y no se puede cerrar. */
[hidden]{display:none !important}

/* Anti-overflow horizontal en móvil: nada debe ensanchar el viewport ni
   desplazar la página a la derecha. `clip` en html no rompe el nav sticky.
   (body ya trae overflow-x:hidden en styles.css; esto lo refuerza). */
html{overflow-x:hidden;overflow-x:clip}  /* hidden = universal (Safari viejo); clip = no rompe sticky */
body{overflow-x:hidden;max-width:100%}

/* CAUSA RAÍZ del recorte en móvil: en el grid del hero, los items sin
   `min-width:0` no bajan de su min-content y expanden la columna 1fr; y las
   píldoras inline-flex (.eyebrow/.chip) sin tope se salen del ancho. Con esto
   la columna nunca excede el contenedor y las píldoras envuelven su texto. */
.hero-copy,.swap-card{min-width:0}
.eyebrow,.chip{max-width:100%;overflow-wrap:anywhere}

/* ---------- HERO grid (copy + widget) ---------- */
.hero{padding:54px 0 60px;text-align:left}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.hero-copy h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:850;letter-spacing:-.03em}
.hero-copy .lead{margin:18px 0 0;font-size:1.1rem}
.hero-copy .hero-badges{justify-content:flex-start;margin-top:28px}
.hero-copy .eyebrow{margin-bottom:18px}

/* ---------- SWAP CARD ---------- */
.swap-card{
  background:linear-gradient(165deg,var(--card-2),var(--bg-soft));
  border:1px solid var(--border);border-radius:20px;padding:22px;
  box-shadow:var(--shadow);scroll-margin-top:84px;
}
.swap-row{margin:0}
.swap-field{display:flex;flex-direction:column;gap:8px}
.swap-input{
  display:flex;align-items:center;gap:8px;background:#0b0d12;
  border:1px solid var(--border);border-radius:13px;padding:6px 6px 6px 14px;
  transition:border-color .15s ease;
}
.swap-input:focus-within{border-color:var(--primary)}
.swap-input input{
  flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text);
  font-size:1.5rem;font-weight:700;font-family:ui-monospace,Menlo,monospace;padding:8px 0;
}
.swap-input input::placeholder{color:var(--muted-2)}

/* selector de moneda (botón) */
.ccy-select{
  display:flex;align-items:center;gap:9px;cursor:pointer;flex:0 0 auto;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:9px 12px;color:var(--text);font-weight:700;font-size:.92rem;transition:border-color .15s ease;
}
.ccy-select:hover{border-color:var(--primary)}
.ccy-select .sym{font-size:1.1rem;line-height:1}
.ccy-select .meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.ccy-select .meta .net{font-size:.72rem;color:var(--muted);font-weight:600}
.ccy-select .car{color:var(--muted-2);margin-left:2px;font-size:.7rem}

/* switch invertir — centrado ENTRE los dos campos, sin solaparse con la
   etiqueta "Recibes en tu billetera" (antes flotaba con height:0/top:-9px). */
.swap-switch-wrap{display:flex;justify-content:center;margin:12px 0 4px}
.swap-switch{
  width:40px;height:40px;border-radius:12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--primary-2);
  font-size:1.15rem;font-weight:800;transition:transform .18s ease,border-color .15s ease;
}
.swap-switch:hover{border-color:var(--primary);transform:rotate(180deg)}

.rate-line{min-height:20px;margin:14px 2px 4px;font-size:.86rem;color:var(--muted);text-align:center}
.rate-line b{color:var(--text)}
.rate-line .lim{color:var(--muted-2);font-size:.8rem}
.rate-line.loading{opacity:.55}

.addr-field{margin-top:16px}
.addr-input{
  background:#0b0d12;border:1px solid var(--border);border-radius:11px;color:var(--text);
  padding:13px 14px;font-size:.92rem;font-family:ui-monospace,Menlo,monospace;outline:none;width:100%;
  word-break:break-all;
}
.addr-input:focus{border-color:var(--primary)}
.addr-hint{font-size:.8rem;color:var(--muted-2);margin:8px 2px 0}

.swap-error{
  margin-top:14px;padding:11px 14px;border-radius:11px;font-size:.88rem;
  background:rgba(255,93,108,.1);border:1px solid rgba(255,93,108,.32);color:#ffb3bb;
}
.swap-cta{width:100%;justify-content:center;margin-top:16px;padding:15px;font-size:1rem}
.swap-cta:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.swap-foot{font-size:.78rem;color:var(--muted-2);text-align:center;margin:13px 0 0}
.swap-foot b{color:var(--primary-2)}

/* ---------- PICKER ---------- */
.picker-overlay{position:fixed;inset:0;z-index:100;background:rgba(5,6,9,.72);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:18px}
.picker{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.picker-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;
  border-bottom:1px solid var(--border);font-weight:800}
.picker-list{max-height:60vh;overflow-y:auto;padding:8px}
.picker-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-radius:12px;padding:12px 14px;color:var(--text)}
.picker-item:hover{background:rgba(255,255,255,.04)}
.picker-item:disabled{opacity:.4;cursor:not-allowed}
.picker-item .sym{font-size:1.4rem;width:30px;text-align:center}
.picker-item .pi-main{font-weight:700}
.picker-item .pi-net{font-size:.8rem;color:var(--muted)}
.picker-item .pi-badge{margin-left:auto;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:999px;
  background:rgba(247,147,26,.14);color:var(--primary-2);border:1px solid rgba(247,147,26,.3)}

/* ---------- PAYMENT ---------- */
.pay-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:.9rem;color:var(--muted)}
.linkbtn{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:.9rem;font-weight:600;padding:0}
.linkbtn:hover{color:var(--primary-2)}
.order-id b{color:var(--text);margin-left:4px}
.pay-instruction{font-size:.95rem;color:var(--text);background:rgba(247,147,26,.08);
  border:1px solid rgba(247,147,26,.25);border-radius:12px;padding:13px 15px;margin-bottom:16px;line-height:1.5}
.pay-qr{display:grid;place-items:center;margin:4px 0 16px}
.pay-qr img{width:200px;height:200px;border-radius:14px;background:#fff;padding:10px;border:1px solid var(--border)}
.pay-amount{font-size:1.35rem;font-weight:800;color:var(--primary-2);margin-bottom:8px}
.pay-timer{text-align:center;margin:16px 0 8px;font-size:.92rem;color:var(--muted)}
.pay-timer b{color:var(--text)}
.pay-timer.urgent b{color:var(--red)}

/* stepper */
.stepper{display:flex;justify-content:space-between;gap:4px;margin:20px 0 6px;position:relative}
.stepper::before{content:"";position:absolute;top:9px;left:6%;right:6%;height:2px;background:var(--border);z-index:0}
.stepper .st{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;position:relative;z-index:1;
  font-size:.68rem;color:var(--muted-2);text-align:center}
.stepper .st .d{width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--border)}
.stepper .st.active .d{border-color:var(--primary);background:var(--primary);box-shadow:0 0 0 4px rgba(247,147,26,.18)}
.stepper .st.active{color:var(--text);font-weight:700}
.stepper .st.done .d{border-color:var(--green);background:var(--green)}
.stepper .st.done{color:var(--muted)}

.pay-status{text-align:center;font-size:.92rem;color:var(--muted);margin-top:10px;min-height:20px}
.pay-status.done{color:var(--green);font-weight:700}
.pay-status.err{color:var(--red)}
.pay-txs{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.pay-txs a{font-size:.8rem;color:var(--accent-2);font-family:ui-monospace,Menlo,monospace;word-break:break-all}

.emergency{margin-top:16px;padding:14px;border-radius:12px;background:rgba(255,93,108,.08);
  border:1px solid rgba(255,93,108,.3)}
.emergency p{margin:0 0 10px;font-size:.9rem;color:#ffb3bb;font-weight:600}
.emg-btns{display:flex;gap:10px;flex-wrap:wrap}

.steps-4{grid-template-columns:repeat(4,1fr)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero{text-align:left}
  .steps-4{grid-template-columns:repeat(2,1fr)}
}
/* La barra superior se apretaba y desbordaba en móvil (marca + etiqueta +
   ES/EN + botón "Recargar" + ☰). Se aligera para que quepa sin desbordar. */
@media(max-width:760px){
  .nav-inner{gap:10px}
  .brand-tag{display:none}
  .nav-cta .btn{display:none}   /* el ☰ ya lleva "Recargar" y el widget está en el hero */
}
@media(max-width:480px){
  .swap-card{padding:16px}
  .swap-input input{font-size:1.25rem}
  .steps-4{grid-template-columns:1fr}
  .cta-band{padding:38px 18px}
  .wrap{padding:0 18px}
  /* pulido móvil adicional */
  .stepper{gap:2px}
  .stepper .st{font-size:.62rem}
  .picker-overlay{padding:12px}
  .lang button{padding:8px 14px}      /* tap target del idioma */
  .pay-qr img{width:min(200px,70vw);height:auto;aspect-ratio:1}
}