:root{
  --blue-header:#28abe6;
  --yellow:#edeb14;
  --bar-empty:#54575b;
  --bar-fill:#4ade80;
  --gray-available:#93a2b6;
  --bg:#1c2847;
  --bg-deep:#0f172a;
  --blue-selected:#38bdf8;
  --red-occupied:#fa002b;
  --green:#4ade80;
  --white:#ffffff;
  --panel-border:#324467;
  --radius-s:8px;
  --radius-m:14px;
  --marquee-duration-preview:11s; /* velocidad del letrero LED en la mini tarjeta de asiento */
  --marquee-duration-tooltip:11s; /* velocidad del letrero LED en los tooltips (Nombre/URL, archivo) */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
[hidden]{display:none !important;}
/* El zoom vive solo en .page-scale (contenido normal de la página).
   Los elementos position:fixed (tarjeta, preview, modal, toast) quedan
   fuera de esta zona a propósito: el "zoom" no es un estándar real de
   CSS y rompe el cálculo de position:fixed en varios navegadores cuando
   hay scroll de por medio. */
.page-scale{zoom:0.9;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Poppins', sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
a{color:inherit;}

/* ===== HEADER ===== */
.topbar{
  background:var(--blue-header);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  padding:18px 28px;
  justify-content:space-between;
}
.brand{
  font-size:34px;
  font-weight:800;
  letter-spacing:.01em;
  cursor:help;
}
/* La "E" vive en su propio span solo para poder detectar el triple clic del
   gatillo admin sin afectar el tooltip ni la apariencia normal de "EA10K". */
#brandSecretE{ user-select:none; }

/* Input invisible del gatillo de acceso admin: nunca se ve ni ocupa espacio
   real en la página, solo recibe foco por JS para que el usuario pueda
   escribir "a ciegas" justo después del triple clic. */
.admin-gate-input{
  position:fixed;
  top:0; left:0;
  width:1px; height:1px;
  padding:0; margin:0;
  border:none; outline:none;
  background:transparent;
  color:transparent;
  caret-color:transparent;
  opacity:0;
  z-index:9999;
}
.topbar-stats{
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}
.stat-static, .stat-price{
  font-size:19px;
  font-weight:600;
}
.currency-box{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:600;
}
.currency-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg-deep);
  border-radius:8px;
  padding:6px 12px;
}
.currency-sep{color:var(--gray-available);}
.curr-btn{
  background:transparent;
  border:none;
  color:var(--gray-available);
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  padding:2px 4px;
}
.curr-btn.active{color:var(--white);}

/* ===== TICKER ===== */
.ticker-band{
  background:var(--yellow);
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:6px 16px;
}
.ticker-text{
  color:var(--bg-deep);
  font-weight:700;
  font-size:15px;
  text-align:center;
  opacity:1;
  transition:opacity .35s ease;
}
.ticker-text.fading{opacity:0;}

/* ===== PROGRESS ===== */
.progress-section{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 28px;
}
.progress-track{
  flex:1;
  height:10px;
  background:var(--bar-empty);
  border-radius:6px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0%;
  background:var(--bar-fill);
  border-radius:6px;
  transition:width .4s ease;
}
.progress-pct{
  font-weight:700;
  font-size:16px;
  min-width:48px;
  text-align:right;
}

/* ===== COUNTS ===== */
.counts-section{
  display:flex;
  gap:60px;
  padding:0 28px 18px;
  border-bottom:1px solid var(--panel-border);
  flex-wrap:wrap;
}
.count-item{
  font-size:20px;
  font-weight:700;
}
.count-val{font-weight:800; margin-left:6px;}
.count-val.occupied{color:var(--red-occupied);}
.count-val.available{color:var(--gray-available);}

/* ===== LAYOUT ===== */
.content{
  display:flex;
  align-items:flex-start;
  gap:28px;
  padding:24px 28px 60px;
  max-width:1600px;
  margin:0 auto;
}
.map-section{flex:1; min-width:0;}

.map-header{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.map-header h2{
  font-size:22px;
  font-weight:700;
  margin:0;
}
.legend{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:14px;
  font-weight:600;
}
.legend-item{display:flex; align-items:center; gap:8px;}
.swatch{
  width:18px; height:18px;
  border-radius:4px;
  display:inline-block;
}
.sw-available{background:var(--gray-available);}
.sw-selected{background:var(--blue-selected);}
.sw-occupied{background:var(--red-occupied);}

.controls-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
  align-items:center;
}
.rand-btn{
  background:transparent;
  border:2px solid var(--panel-border);
  color:var(--white);
  border-radius:var(--radius-s);
  padding:10px 16px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.rand-btn:hover{border-color:var(--blue-selected); background:rgba(56,189,248,.1);}
.tutorial-btn{
  margin-left:auto;
  width:42px; height:42px;
  border-radius:50%;
  border:2px solid var(--panel-border);
  background:transparent;
  color:var(--white);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, color .15s, background .15s;
}
.tutorial-btn i{ position:relative; left:1px; }
.tutorial-btn{ margin-right:14px; }
.tutorial-btn:hover{border-color:var(--blue-selected); color:var(--blue-selected);}
.rotate-toggle{
  margin-left:0;
  width:42px; height:42px;
  border-radius:50%;
  border:2px solid var(--panel-border);
  background:transparent;
  color:var(--white);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s, color .15s, background .15s;
}
.rotate-toggle:hover{border-color:var(--blue-selected);}
.rotate-toggle[aria-pressed="true"]{
  background:var(--red-occupied);
  border-color:var(--red-occupied);
}

/* ===== SEAT MAP ===== */
.map-frame{
  position:relative;
  border:2px solid var(--panel-border);
  border-radius:var(--radius-m);
  background:var(--bg-deep);
  padding:16px;
  height:560px;
  overflow:auto;
}
.seat-grid{
  display:grid;
  grid-template-columns:repeat(50, 42px);
  grid-auto-rows:42px;
  gap:6px;
  width:max-content;
}
.seat{
  width:42px; height:42px;
  background:var(--gray-available);
  border:2px solid var(--white);
  border-radius:8px;
  color:#0f172a;
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background .12s, transform .1s;
}
.seat:hover{transform:scale(1.08);}
.seat.selected{background:var(--blue-selected);}
.seat.occupied{background:var(--red-occupied);}

/* ===== MINI TARJETA DE VISTA PREVIA (hover sobre asiento ocupado) ===== */
.seat-preview-card{
  position:fixed;
  z-index:41;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg);
  border:2px solid var(--panel-border);
  border-radius:10px;
  padding:8px 10px;
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
/* Asiento baneado: la mini tarjeta no muestra nombre ni enlace, solo el
   texto "Ban" resaltado — mismo lenguaje visual de "resaltado" que se usa
   para la moneda activa (Col/Otros), pero en rojo para que se note que es
   un estado distinto a estar simplemente ocupado. */
.seat-preview-card.banned{ border-color:var(--red-occupied); }
.seat-preview-card.banned .seat-card-icon{ display:none; }
.seat-preview-card.banned .seat-preview-name-track{
  color:var(--red-occupied);
  font-weight:800;
}

/* ===== ANIMACIÓN DE ENTRADA ("pop", estilo burbuja de mensaje de WhatsApp) =====
   Se activa vía JS (clase .pop-in) cada vez que la tarjeta grande o la mini
   tarjeta de vista previa aparecen. No se usa mientras se expande/contrae
   la tarjeta grande (eso ya tiene su propia transición vía .card-move), así
   que no compite con el transform que pone centerCardInFrame(). */
@keyframes cardPopIn{
  0%{   opacity:0; transform:translateY(10px) scale(.82); }
  55%{  opacity:1; transform:translateY(-2px) scale(1.04); }
  80%{  transform:translateY(0) scale(.99); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.seat-card.pop-in,
.seat-preview-card.pop-in,
.generic-tooltip.pop-in{
  animation:cardPopIn .28s cubic-bezier(.34,1.56,.64,1) both;
}
@media (prefers-reduced-motion: reduce){
  .seat-card.pop-in,
  .seat-preview-card.pop-in,
  .generic-tooltip.pop-in{
    animation:none;
  }
}

/* tamaño fijo (16 caracteres), sin importar qué tan largo sea el nombre */
.seat-preview-name-wrap{
  width:16ch;
  max-width:16ch;
  overflow:hidden;
  white-space:nowrap;
}
/* modo "lectura manual": cursor sobre la mini tarjeta -> scroll horizontal
   libre, sin barra de scroll visible */
.seat-preview-name-wrap.manual{
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.seat-preview-name-wrap.manual::-webkit-scrollbar{
  display:none;
}
.seat-preview-name-track{
  display:inline-block;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
}
/* La separación entre las dos copias del nombre va DENTRO de cada copia
   (como padding-right), no como "gap" externo. Así las dos copias miden
   exactamente lo mismo y translateX(-50%) cae siempre justo donde empieza
   la segunda copia — sin eso, el bucle "saltaba" al reiniciarse. */
.seat-preview-name-track .marquee-unit{
  display:inline-block;
  padding-right:28px;
}
/* modo "lectura automática": cursor sobre el asiento -> desplazamiento
   continuo tipo letrero LED (el nombre va duplicado para el efecto de bucle) */
.seat-preview-name-wrap.auto .seat-preview-name-track{
  animation:preview-marquee var(--marquee-duration-preview) linear infinite;
}
@keyframes preview-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .seat-preview-name-wrap.auto .seat-preview-name-track{ animation:none; }
}

.seat-card-overlay{
  position:fixed;
  inset:0;
  z-index:40;
  background:transparent;
  transition:background .2s ease;
}
.seat-card-overlay.dim{
  background:rgba(15,23,42,.6);
}
.seat-card{
  position:fixed;
  z-index:41;
  width:260px;
  background:var(--bg);
  border:2px solid var(--panel-border);
  border-radius:var(--radius-m);
  padding:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
/* esta transición solo se activa a propósito, vía JS, al expandir/contraer;
   así abrir la tarjeta de un asiento distinto no "arrastra" la animación
   desde la posición del asiento anterior */
.seat-card.card-move{
  transition:transform .25s ease, left .25s ease, top .25s ease;
}

/* botón expandir/contraer [←□→] / [→□←] + número de asiento */
.seat-card-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.seat-card-number{
  display:inline-flex;
  align-items:center;
  height:28px;
  background:var(--bg-deep);
  border:1px solid var(--panel-border);
  border-radius:20px;
  padding:0 12px;
  font-weight:600;
  font-size:14px;
  color:var(--white);
  white-space:nowrap;
}
.seat-card-expand{
  display:flex;
  align-items:center;
  height:28px;
  gap:7px;
  background:var(--bg-deep);
  border:1px solid var(--panel-border);
  border-radius:20px;
  padding:0 12px;
  color:var(--white);
  cursor:pointer;
  transition:border-color .15s;
}
.seat-card-expand:hover{border-color:var(--blue-selected);}
.expand-arrow{
  font-size:13px;
  font-weight:700;
  line-height:1;
}
.expand-dot{
  width:7px; height:7px;
  border-radius:2px;
  background:var(--blue-selected);
  display:inline-block;
}
.seat-card-image-wrap{
  width:100%;
  aspect-ratio:1/1;
  background:var(--bg-deep);
  border-radius:var(--radius-s);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:800px;
}
.seat-card-image{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.seat-card-image.rotating{
  animation:spinY 4.5s linear infinite;
}
@keyframes spinY{
  from{transform:rotateY(0deg);}
  to{transform:rotateY(360deg);}
}
@media (prefers-reduced-motion: reduce){
  .seat-card-image.rotating{animation:none;}
}
.seat-card-footer{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}

/* logo | nombre | x */
.seat-card-icon{
  width:32px; height:30px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-weight:800;
  font-size:11px;
  letter-spacing:.01em;
  text-decoration:none;
  background:var(--bg-deep);
  color:var(--white);
}
/* insignias por red social */
.badge-instagram{ background:linear-gradient(45deg,#f58529,#dd2a7b 45%,#8134af 70%,#515bd4); color:#fff; }
.badge-facebook{ background:#1877f2; color:#fff; }
.badge-whatsapp{ background:#25d366; color:#fff; }
.badge-x{ background:#000000; color:#fff; }
.badge-telegram{ background:#29b6f6; color:#fff; }
.badge-tiktok{ background:#000000; color:#fff; }
.badge-youtube{ background:#ff0000; color:#fff; }
.badge-twitch{ background:#9146ff; color:#fff; }
.badge-kick{ background:#000000; color:#53fc18; }
.badge-link{ background:#bbf7d0; color:#0f172a; }
.badge-none{ background:var(--bg-deep); color:var(--blue-selected); border:1px solid var(--panel-border); }

.seat-card-name-wrap{
  flex:1;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE/Edge viejo */
}
.seat-card-name-wrap::-webkit-scrollbar{
  display:none;               /* Chrome/Safari/Edge nuevo */
}
.seat-card-name{
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
}

.seat-card-close{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  border:none;
  background:var(--red-occupied);
  color:var(--white);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

/* ===== SIDEBAR ===== */
.side-column{
  width:340px;
  flex-shrink:0;
  position:sticky;
  top:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.purchase-panel{
  background:var(--bg);
  border:2px solid var(--panel-border);
  border-radius:var(--radius-m);
  padding:22px;
}
.purchase-panel h3{
  font-size:21px;
  font-weight:700;
  margin:0 0 4px;
  text-align:center;
}
.panel-sub{
  text-align:center;
  color:var(--gray-available);
  font-size:13px;
  margin:0 0 16px;
}
.price-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:12px 0;
  border-top:1px solid var(--panel-border);
  border-bottom:1px solid var(--panel-border);
  margin-bottom:16px;
  font-size:13px;
  font-weight:600;
}
.price-total{font-size:18px; font-weight:800;}
.dollar{color:var(--green); margin-right:2px;}

.field-group{margin-bottom:16px;}
.field-label-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.field-label-row label{font-size:13px; color:var(--gray-available); font-weight:600;}
.field-group input[type="text"]{
  width:100%;
  background:var(--bg-deep);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-s);
  padding:11px 12px;
  color:var(--white);
  font-family:inherit;
  font-size:13px;
}
.field-group input[type="text"]:focus{outline:none; border-color:var(--blue-selected);}
.field-hint{
  font-size:11px;
  color:var(--gray-available);
  margin-top:6px;
  line-height:1.4;
}
.field-group > label{
  display:block;
  font-size:13px;
  color:var(--gray-available);
  font-weight:600;
  margin-bottom:6px;
}
/* Nombre y URL tienen tooltip al pasar el cursor: que el área activa sea
   solo el ancho real del texto, no toda la fila (que por el display:block
   de arriba ocuparía todo el campo, incluido el espacio vacío a la derecha) */
#nameLabel, #urlLabel{
  display:inline-block;
  cursor:help;
}

/* caja con el mismo look de los inputs de texto, pero de solo lectura y
   scrolleable horizontalmente (sin barra visible) — usada tanto para
   "Asiento(s)" como para la lista con estado de "Archivo" */
.chain-box{
  width:100%;
  background:var(--bg-deep);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-s);
  padding:11px 12px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.chain-box::-webkit-scrollbar{display:none;}

/* "Asiento(s)": misma idea de scroll horizontal sin barra visible, pero sin
   caja/contorno — el alto lo da únicamente el propio texto */
.chain-plain{
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.chain-plain::-webkit-scrollbar{display:none;}

.chain-track{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:var(--white);
  white-space:nowrap;
}

/* asientos dentro de la caja de Archivo: gris = sin imagen, azul = con imagen */
.file-seat-item{
  color:var(--gray-available);
  cursor:default;
}
.file-seat-item.assigned{ color:var(--blue-selected); }
.chain-sep{ color:var(--gray-available); }

/* botón [  ↑  ] para subir archivo: rectangular, mismo lenguaje visual que
   el botón de expandir de la tarjeta, con el mismo alto que el texto
   "Archivo" que tiene al lado — el alto no puede crecer, el ancho sí */
.file-upload-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  padding:0 9px;
  flex-shrink:0;
  border-radius:5px;
  border:1px solid var(--panel-border);
  background:var(--bg-deep);
  color:var(--white);
  font-size:9px;
  line-height:1;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.file-upload-btn:hover{ border-color:var(--blue-selected); color:var(--blue-selected); }

/* agrupa, a la derecha del label "Archivo", las flechas de scroll junto al
   botón de subir — así quedan pegadas entre sí en vez de repartidas por
   todo el ancho de la fila */
.field-label-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

/* flechitas [<][>] junto a "Asiento(s)", "Nombre", "URL" y "Archivo": scroll
   horizontal manual del campo/caja correspondiente. Existen porque el
   trackpad puede hacer scroll horizontal solo (deslizando con dos dedos),
   pero un mouse de cable normal no tiene forma de hacerlo sin estos botones. */
.scroll-arrows{
  display:flex;
  gap:4px;
  flex-shrink:0;
}
.scroll-arrow-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  width:20px;
  flex-shrink:0;
  border-radius:5px;
  border:1px solid var(--panel-border);
  background:var(--bg-deep);
  color:var(--white);
  font-size:9px;
  line-height:1;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.scroll-arrow-btn:hover{ border-color:var(--blue-selected); color:var(--blue-selected); }

/* tooltip genérico (fondo blanco, texto negro): nombre de archivo sobre un
   asiento en la caja de Archivo, y explicación al pasar por "Nombre"/"URL".
   Si el texto no cabe, se desplaza en bucle tipo letrero LED en vez de
   cortarse con puntos suspensivos. */
.generic-tooltip{
  position:fixed;
  z-index:50;
  background:#ffffff;
  color:#111111;
  font-size:12px;
  font-weight:600;
  padding:6px 10px;
  border-radius:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
  pointer-events:none;
  max-width:220px;
  overflow:hidden;
}
.generic-tooltip-track{
  display:inline-block;
  white-space:nowrap;
}
.generic-tooltip-track .marquee-unit{
  display:inline-block;
  padding-right:28px;
}
.generic-tooltip-track.marquee{
  animation:preview-marquee var(--marquee-duration-tooltip) linear infinite;
}

.terms-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  color:var(--gray-available);
  margin-bottom:18px;
  cursor:pointer;
}
.terms-row input{margin-top:2px;}
.terms-row a{color:var(--blue-selected); font-weight:600; text-decoration:underline;}

.reserve-btn{
  width:100%;
  background:var(--green);
  color:var(--bg-deep);
  border:none;
  border-radius:var(--radius-s);
  padding:14px;
  font-weight:800;
  font-size:16px;
  cursor:pointer;
  transition:opacity .15s;
}
.reserve-btn:disabled{
  background:var(--panel-border);
  color:var(--gray-available);
  cursor:not-allowed;
}

.panel-extra-buttons{
  display:flex;
  gap:10px;
}
.panel-extra-buttons button{
  flex:1;
  background:transparent;
  border:2px solid var(--panel-border);
  color:var(--white);
  border-radius:var(--radius-s);
  padding:10px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
}
.panel-extra-buttons button:hover{border-color:var(--blue-selected);}

/* ===== PAYMENT MODAL ===== */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.75);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal{
  position:relative;
  width:100%;
  max-width:400px;
  background:var(--bg);
  border:2px solid var(--panel-border);
  border-radius:var(--radius-m);
  padding:26px;
}
.modal h3{margin:0 0 6px; font-size:19px;}
.modal-summary{
  color:var(--gray-available);
  font-size:14px;
  margin:0 0 18px;
}
.modal-close{
  position:absolute;
  top:12px; right:12px;
  background:transparent;
  border:none;
  color:var(--gray-available);
  font-size:18px;
  cursor:pointer;
}
.email-field-wrap{
  margin-bottom:18px;
}
.payment-email-input{
  width:100%;
  background:var(--bg-deep);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-s);
  padding:11px 12px;
  color:var(--white);
  font-family:inherit;
  font-size:13px;
}
.payment-email-input:focus{outline:none; border-color:var(--blue-selected);}
.email-error{
  color:var(--red-occupied);
  font-size:12px;
  font-weight:600;
  margin-top:6px;
  line-height:1.4;
}

.payment-methods{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:20px;
}
.payment-method{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:2px solid var(--panel-border);
  border-radius:var(--radius-s);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:border-color .15s, background .15s;
}
.payment-method:hover{border-color:var(--blue-selected);}
.payment-method.active{
  border-color:var(--blue-selected);
  background:rgba(56,189,248,.12);
}
.confirm-pay-btn{
  width:100%;
  background:var(--green);
  color:var(--bg-deep);
  border:none;
  border-radius:var(--radius-s);
  padding:13px;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
}
.confirm-pay-btn:disabled{
  background:var(--panel-border);
  color:var(--gray-available);
  cursor:not-allowed;
}

/* ===== TOAST ===== */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:var(--bg);
  border:2px solid var(--green);
  color:var(--white);
  padding:14px 22px;
  border-radius:var(--radius-s);
  font-weight:600;
  font-size:14px;
  z-index:80;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .content{flex-direction:column;}
  .side-column{
    width:100%;
    position:static;
  }
  .map-frame{height:440px;}
}
@media (max-width:640px){
  .topbar{padding:16px 18px;}
  .brand{font-size:26px;}
  .topbar-stats{gap:18px;}
  .stat-static, .stat-price{font-size:14px;}
  .content{padding:18px 16px 40px;}
  .counts-section{padding:0 16px 16px; gap:30px;}
  .count-item{font-size:16px;}
}