/* =========================================================
   RIDEMART — design tokens
   Palette: #05070c (void), #10141c (panel), #182130 (panel-2),
            #1e6bff (ride-blue), #4fc3ff (ride-cyan glow),
            #e6303b (ride-red), #f2f4f8 (paper), #ffb300 (amber/warn)
   Type: 'Archivo Black' display / 'Rajdhani' technical labels / 'Inter' body
   ========================================================= */

:root{
  --void:#05070c;
  --panel:#0d1119;
  --panel-2:#161c27;
  --blue:#1e6bff;
  --cyan:#4fc3ff;
  --red:#e6303b;
  --paper:#f2f4f8;
  --dim:#7a8494;
  --amber:#ffb300;
  --green:#28c76f;
  --radius:18px;
  --door-radius:10px;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -10%, #0d1c33 0%, var(--void) 55%),
    var(--void);
  color:var(--paper);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}

.scene{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:20px 16px 64px;
}

/* ---------------- topbar (simula el estado tras escanear el QR) ---------------- */
.topbar{
  width:100%;
  max-width:460px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'Rajdhani', sans-serif;
  font-weight:600;
  letter-spacing:.04em;
  font-size:14px;
  color:var(--dim);
  padding:0 4px;
}
.topbar__machine{display:flex;align-items:center;gap:8px;}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse 2s infinite ease-in-out;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
#stepLabel{color:var(--cyan);}

/* ---------------- la máquina ---------------- */
.machine{
  position:relative;
  width:min(94vw, 460px);
  background:linear-gradient(160deg, var(--panel) 0%, #070a11 100%);
  border-radius:var(--radius);
  border:3px solid #0a3a7a;
  box-shadow:
    0 0 0 1px rgba(79,195,255,.25),
    0 0 22px 4px rgba(30,107,255,.45),
    0 30px 60px -20px rgba(0,0,0,.8),
    inset 0 0 40px rgba(30,107,255,.06);
  padding:22px 18px 18px;
}

.machine__bolt{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #cfd7e2, #5a6472 70%);
  box-shadow:0 0 0 2px rgba(0,0,0,.4);
}
.machine__bolt.tl{top:10px;left:10px;}
.machine__bolt.tr{top:10px;right:10px;}
.machine__bolt.bl{bottom:10px;left:10px;}
.machine__bolt.br{bottom:10px;right:10px;}

.machine__hinge{
  position:absolute; top:50%; transform:translateY(-50%);
  width:10px; height:70px; border-radius:6px;
  background:linear-gradient(180deg,#2a3242,#11151d);
  box-shadow:0 0 0 1px #000;
}
.machine__hinge.left{left:-5px;}
.machine__hinge.right{right:-5px;}

/* ---------------- cabecera / logo ---------------- */
.machine__header{margin-bottom:14px;}
.logo{
  font-family:'Archivo Black', sans-serif;
  font-style:italic;
  text-align:center;
  font-size:clamp(30px, 8vw, 40px);
  letter-spacing:.01em;
  margin:2px 0 12px;
  color:var(--red);
  text-shadow:0 0 18px rgba(230,48,59,.55);
}
.logo span{
  color:var(--blue);
  text-shadow:0 0 18px rgba(30,107,255,.6);
}
.led-strip{
  position:relative;
  height:4px;
  border-radius:4px;
  background:#0a1830;
  overflow:hidden;
  box-shadow:inset 0 0 4px rgba(0,0,0,.6);
}
.led-sweep{
  position:absolute; top:0; left:-40%; height:100%; width:40%;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  filter:blur(1px);
  animation:sweep 2.6s linear infinite;
}
@keyframes sweep{
  0%{left:-40%;}
  100%{left:100%;}
}

/* ---------------- grid de compuertas ---------------- */
.machine__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-bottom:16px;
}

.door{
  position:relative;
  aspect-ratio:1 / 0.82;
  perspective:600px;
  background:#000;
  border-radius:var(--door-radius);
  border:1px solid #1c2635;
}

.door__inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.9,.2,1.2);
}
.door.open .door__inner{transform:rotateX(-108deg);}

.door__face{
  position:absolute; inset:0;
  border-radius:var(--door-radius);
  backface-visibility:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:6px 4px 4px;
}

/* frente (cerrado) */
.door__front{
  background:linear-gradient(160deg, #131c29, #0a0e15);
  border:1px solid rgba(79,195,255,.18);
  cursor:pointer;
}
.door__front:hover{border-color:rgba(79,195,255,.5);}
.door__front:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}

.door__glass{
  width:100%; height:60%;
  border-radius:6px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.door__icon{width:56%; height:56%;}
.door__glass img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:6px;
}

.door__label{
  font-family:'Rajdhani', sans-serif;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--paper);
  margin-top:5px;
  text-align:center;
  line-height:1.15;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.door__price{
  font-family:'Rajdhani', sans-serif;
  font-size:10px;
  color:var(--cyan);
  font-weight:600;
}
.door__knob{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #dfe6ee, #6b7686 75%);
  box-shadow:0 0 4px rgba(0,0,0,.6);
}
.door__code{
  position:absolute; left:5px; top:4px;
  font-family:'Rajdhani', sans-serif;
  font-size:9px; font-weight:600;
  color:var(--dim);
  letter-spacing:.05em;
}

/* interior (abierta) */
.door__back{
  background:radial-gradient(circle at 50% 30%, #0e3a22, #06110c 75%);
  transform:rotateX(108deg);
  border:1px solid rgba(40,199,111,.4);
}
.door__back .taken-label{
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  font-size:11px;
  color:var(--green);
  text-align:center;
  letter-spacing:.03em;
}

/* agotado */
.door.sold .door__front{
  opacity:.35;
  cursor:not-allowed;
  filter:grayscale(1);
}
.door.sold .door__front:hover{border-color:rgba(79,195,255,.18);}
.door.sold::after{
  content:'AGOTADO';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  font-size:10px;
  letter-spacing:.08em;
  color:var(--dim);
  pointer-events:none;
}

/* seleccionada, esperando confirmación de pago */
.door.pending .door__front{border-color:var(--amber); box-shadow:0 0 10px rgba(255,179,0,.4);}

/* ---------------- pie: QR + pasos ---------------- */
.machine__footer{
  display:flex; align-items:center; gap:14px;
  background:#0a0e15;
  border-radius:12px;
  padding:12px;
  border:1px solid rgba(79,195,255,.12);
}
.qr-box{
  flex:0 0 auto;
  width:64px; height:64px;
  background:#fff;
  border-radius:6px;
  padding:6px;
}
.qr-placeholder{
  width:100%; height:100%;
  background:
    linear-gradient(90deg, #000 0 15%, transparent 15% 30%, #000 30% 45%, transparent 45% 60%, #000 60% 75%, transparent 75% 90%, #000 90%),
    linear-gradient(0deg, #000 0 15%, transparent 15% 30%, #000 30% 45%, transparent 45% 60%, #000 60% 75%, transparent 75% 90%, #000 90%);
  background-blend-mode:multiply;
  opacity:.85;
}
.spg-title{
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  font-size:13px;
  color:var(--paper);
  margin-bottom:6px;
}
.spg-steps{
  list-style:none; display:flex; gap:14px;
  margin:0; padding:0;
  font-family:'Rajdhani', sans-serif;
  font-size:11px; font-weight:600;
  color:var(--dim);
}
.spg-steps li{display:flex; align-items:center; gap:4px;}
.spg-steps li.active{color:var(--cyan);}
.spg-icon{font-size:12px;}

.hint{
  max-width:420px;
  text-align:center;
  color:var(--dim);
  font-size:13px;
  line-height:1.5;
  margin:2px 8px 0;
}

/* ---------------- modal de pago ---------------- */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(3,5,10,.72);
  backdrop-filter:blur(4px);
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:50;
}
.modal-overlay.show{display:flex;}
@media (min-width:560px){
  .modal-overlay{align-items:center;}
}

.modal{
  position:relative;
  width:100%;
  max-width:400px;
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid rgba(79,195,255,.25);
  border-radius:20px 20px 0 0;
  padding:22px 20px 26px;
  box-shadow:0 -10px 40px rgba(0,0,0,.6);
  animation:slideUp .3s ease-out;
}
@media (min-width:560px){
  .modal{border-radius:20px; animation:pop .25s ease-out;}
}
@keyframes slideUp{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
@keyframes pop{from{transform:scale(.94); opacity:0;} to{transform:scale(1); opacity:1;}}

.modal__close{
  position:absolute; top:12px; right:14px;
  background:none; border:none; color:var(--dim);
  font-size:22px; line-height:1; cursor:pointer;
}
.modal__close:hover{color:var(--paper);}

.mtitle{
  font-family:'Rajdhani', sans-serif;
  font-weight:700; font-size:19px;
  margin:0 0 2px;
}
.mcode{color:var(--cyan); font-family:'Rajdhani',sans-serif; font-weight:600; font-size:13px;}
.mprice{
  font-family:'Archivo Black', sans-serif;
  font-size:30px; margin:14px 0 4px;
  color:var(--paper);
}
.mrow{display:flex; align-items:center; justify-content:space-between; margin-top:16px;}

.btn{
  width:100%;
  padding:14px 16px;
  border:none; border-radius:12px;
  font-family:'Rajdhani', sans-serif;
  font-weight:700; font-size:15px; letter-spacing:.03em;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.btn:active{transform:scale(.98);}
.btn-pay{
  background:linear-gradient(120deg, var(--blue), var(--cyan));
  color:#03101f;
  box-shadow:0 8px 20px -6px rgba(30,107,255,.6);
}
.btn-pay:hover{filter:brightness(1.08);}
.btn-secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,.15);
  color:var(--dim);
  margin-top:10px;
}

.spinner{
  width:34px; height:34px; margin:22px auto 12px;
  border-radius:50%;
  border:3px solid rgba(79,195,255,.2);
  border-top-color:var(--cyan);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.status-text{
  text-align:center;
  font-family:'Rajdhani', sans-serif;
  font-weight:600;
  color:var(--dim);
  font-size:14px;
}

.success-icon, .error-icon{
  width:52px; height:52px; margin:6px auto 14px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700;
}
.success-icon{background:rgba(40,199,111,.15); color:var(--green); border:2px solid var(--green);}
.error-icon{background:rgba(230,48,59,.15); color:var(--red); border:2px solid var(--red);}

.center{text-align:center;}