/* ══════════════════════════════════════════════════════════════════
   Booking Popup · Pop-up de reserva ARCADE (mobile-first)
   Se abre al pinchar una fecha del calendario. Form: nombre/empresa/correo/tel.
   Componente modular y autocontenido. Quitar = borrar enlaces en index.
   Estética: dark premium · AZUL ELÉCTRICO dominante · teal acento · retro-arcade.
   ══════════════════════════════════════════════════════════════════ */
#booking-popup{
  --b-blue:#3b82f6; --b-blue-soft:#4f8dff; --b-blue-deep:#1d4ed8; --b-blue-hi:#9cc0ff;
  --b-teal:#00d4b4; --b-ink:#eaf0ff; --b-ink-2:#9aa6c4;
  --b-panel:rgba(11,16,30,.96); --b-border:rgba(99,150,255,.5);
}
#booking-popup[hidden]{ display:none; }
#booking-popup{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;   /* SIEMPRE centrado en pantalla */
  padding:14px;                       /* margen visible en los 4 lados */
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

/* Fondo */
.bpop-backdrop{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(59,130,246,.18), transparent 60%), rgba(3,5,10,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .28s ease;
}
#booking-popup.is-open .bpop-backdrop{ opacity:1; }

/* Panel (hoja inferior en móvil · tarjeta centrada en desktop) */
.bpop-panel{
  position:relative; z-index:1; width:100%; max-width:440px;
  max-height:calc(100vh - 28px); max-height:calc(100svh - 28px);   /* svh: SIEMPRE cabe en pantalla, no se corta */
  overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:var(--b-panel);
  border:2px solid var(--b-border);
  border-radius:16px;                /* tarjeta: los 4 lados visibles */
  box-shadow:0 0 0 2px #05070f, 0 0 0 3px rgba(79,141,255,.22), 0 22px 60px rgba(0,0,0,.6), 0 0 50px rgba(59,130,246,.3);
  padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateY(14px) scale(.97); opacity:0;
  transition:transform .35s cubic-bezier(.18,1.1,.3,1), opacity .3s ease;
}
@media (min-width:600px){ .bpop-panel{ transform:translateY(20px) scale(.96); } }
#booking-popup.is-open .bpop-panel{ transform:none; opacity:1; }

/* Scanlines arcade sobre el panel */
.bpop-scanlines{
  position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; overflow:hidden;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.5;
}
.bpop-panel > *:not(.bpop-scanlines){ position:relative; z-index:1; }

/* Cerrar */
.bpop-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--b-border);
  color:var(--b-ink-2); font-size:15px; cursor:pointer; line-height:1;
  transition:color .2s, border-color .2s, background .2s;
}
.bpop-close:hover{ color:#fff; border-color:var(--b-blue-hi); background:rgba(79,141,255,.14); }

/* Cabecera tipo HUD */
.bpop-header{ text-align:center; margin-bottom:18px; }
.bpop-kicker{
  font-family:'Press Start 2P','Inter',monospace; font-size:8px; letter-spacing:.12em;
  color:var(--b-teal); text-transform:uppercase;
}
.bpop-title{
  font-family:'Press Start 2P','Inter',monospace; font-size:15px; line-height:1.3;
  color:#fff; margin:10px 0 12px; letter-spacing:.02em;
  text-shadow:0 0 14px rgba(79,141,255,.6);
}
.bpop-date{
  display:inline-block;
  font-family:'Press Start 2P','Inter',monospace; font-size:9px; letter-spacing:.06em;
  color:var(--b-blue-hi); background:rgba(59,130,246,.12);
  border:1px solid var(--b-border); border-radius:6px; padding:8px 12px;
  text-transform:uppercase;
}

/* Aviso sutil de fin de semana (compromiso TV · Madrid 10:00) */
.bpop-note{
  display:flex; gap:9px; align-items:flex-start; text-align:left;
  margin:14px 0 4px; padding:11px 13px;
  background:rgba(59,130,246,.07); border:1px solid rgba(99,150,255,.22);
  border-left:2px solid var(--b-blue-soft); border-radius:8px;
  font-family:'Inter',sans-serif; font-size:12px; line-height:1.5; color:var(--b-ink-2);
}
.bpop-note[hidden]{ display:none; }
.bpop-note svg{ flex:none; margin-top:1px; color:var(--b-blue-soft); }
.bpop-note b{ color:var(--b-ink); font-weight:600; }

/* Formulario */
.bpop-form{ display:flex; flex-direction:column; gap:14px; }
.bpop-field{ display:flex; flex-direction:column; gap:7px; text-align:left; }
.bpop-label{
  font-family:'Press Start 2P','Inter',monospace; font-size:8px; letter-spacing:.1em;
  color:var(--b-ink-2); text-transform:uppercase;
}
.bpop-input{
  width:100%; appearance:none;
  font-family:'Inter',system-ui,sans-serif; font-size:16px; color:var(--b-ink);   /* 16px: evita el auto-zoom de iOS al enfocar */
  background:rgba(6,10,20,.85); border:2px solid rgba(99,150,255,.3); border-radius:8px;
  padding:13px 14px; transition:border-color .18s, box-shadow .18s, background .18s;
}
.bpop-input::placeholder{ color:#5a6a8c; }
.bpop-input:focus{
  outline:none; border-color:var(--b-blue-soft); background:rgba(8,14,28,.95);
  box-shadow:0 0 0 3px rgba(59,130,246,.22), 0 0 18px rgba(59,130,246,.3);
}
.bpop-input[aria-invalid="true"]{ border-color:#e5484d; box-shadow:0 0 0 3px rgba(229,72,77,.18); }

/* Mensaje */
.bpop-msg{
  margin:0; min-height:14px; font-family:'Inter',sans-serif; font-size:12px; color:var(--b-ink-2); text-align:center;
}
.bpop-msg.is-error{ color:#ff7a7d; }
.bpop-msg.is-ok{ color:var(--b-teal); font-weight:600; }

/* Botón submit estilo PRESS START */
.bpop-submit{
  margin-top:4px; appearance:none; cursor:pointer;
  font-family:'Press Start 2P','Inter',monospace; font-size:12px; letter-spacing:.04em; color:#fff;
  padding:15px; border:2px solid var(--b-blue-hi); border-radius:8px;
  background:linear-gradient(180deg, var(--b-blue-soft), var(--b-blue-deep));
  box-shadow:0 0 0 2px #05070f, 0 5px 0 #112a63, 0 0 22px rgba(59,130,246,.6);
  text-shadow:0 1px 0 #0a163a; transition:transform .08s ease, filter .2s, box-shadow .2s;
}
.bpop-submit:hover{ filter:brightness(1.08); }
.bpop-submit:active{ transform:translateY(4px); box-shadow:0 0 0 2px #05070f, 0 1px 0 #112a63, 0 0 26px rgba(79,141,255,.9); }
.bpop-submit:focus-visible{ outline:2px solid var(--b-teal); outline-offset:4px; }
.bpop-submit[disabled]{ opacity:.6; cursor:default; filter:saturate(.6); }

/* Estado "completado" arcade */
.bpop-done{ text-align:center; padding:18px 6px 6px; }
.bpop-done-badge{
  font-family:'Press Start 2P','Inter',monospace; font-size:16px; color:var(--b-teal);
  text-shadow:0 0 16px rgba(0,212,180,.6); margin-bottom:14px;
}
.bpop-done-text{ font-family:'Inter',sans-serif; font-size:14px; color:var(--b-ink); line-height:1.5; }

/* Móvil: más compacto y proporcionado */
@media (max-width:599px){
  .bpop-panel{
    max-height:calc(100vh - 28px); max-height:calc(100svh - 28px);
    padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));
  }
  .bpop-close{ top:10px; right:10px; width:32px; height:32px; }
  .bpop-header{ margin-bottom:10px; padding:0 34px; }
  .bpop-title{ font-size:12px; line-height:1.35; margin:8px 0 9px; }
  .bpop-date{ max-width:100%; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
  .bpop-note{ margin:8px 0 2px; padding:9px 10px; font-size:11px; line-height:1.4; }
  .bpop-form{ gap:9px; }
  .bpop-field{ gap:6px; }
  .bpop-input{ padding:10px 12px; }
  .bpop-submit{ padding:12px; font-size:10px; line-height:1.35; }
}
@media (max-height:680px){
  .bpop-panel{ max-height:calc(100vh - 28px); max-height:calc(100svh - 28px); }
  .bpop-header{ margin-bottom:8px; }
  .bpop-note{ margin:8px 0 2px; }
  .bpop-form{ gap:9px; }
}
@media (prefers-reduced-motion: reduce){
  .bpop-backdrop, .bpop-panel{ transition-duration:.12s; }
  .bpop-panel{ transform:none; }
}