/**
 * NS26 - Tickets — Modal de compra (flujo de 3 pasos)
 * Diseño e implementación: glio.studio
 *
 * Paleta y tokens iguales a checkout-redesign.css para que el modal y el
 * checkout se vean como una sola experiencia.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --nexo-navy:#010532;
  --nexo-navy-deep:#05061a;
  --nexo-cream:#f2f4f8;
  --nexo-orange:#ef5a25;
  --nexo-orange-hover:#F7911D;
  --nexo-ink:#1b1f33;
  --nexo-muted:#5b6178;
  --nexo-line:#e4e7f0;
  --nexo-ok:#1a9b5c;
  --nexo-err:#d92d20;
  --nexo-mp:#009ee3;
  --nexo-r-lg:24px;
  --nexo-r-md:16px;
  --nexo-r-sm:12px;
  --nexo-t:240ms cubic-bezier(.4,0,.2,1);
}

.ns26-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  background:rgba(1,5,50,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--nexo-t), visibility var(--nexo-t);
  font-family:'DM Sans', -apple-system, sans-serif;
}
.ns26-modal *{ box-sizing:border-box; font-family:inherit; }
.ns26-modal.show{ opacity:1; visibility:visible; }

.ns26-modal-content{
  width:min(880px, 100%);
  background:#fff;
  border-radius:var(--nexo-r-lg);
  box-shadow:0 32px 90px rgba(1,5,50,.45);
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 48px);
  overflow:hidden;
  transform:translateY(12px);
  transition:transform var(--nexo-t);
}
.ns26-modal.show .ns26-modal-content{ transform:translateY(0); }

/* ============ HEADER ============ */
.ns26-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:26px 40px 0;
}
.ns26-modal-eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--nexo-orange);
  margin:0 0 4px;
}
.ns26-modal-header h3{
  margin:0;
  font-size:25px;
  font-weight:700;
  color:var(--nexo-navy);
  line-height:1.2;
}
.close-modal{
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  background:var(--nexo-cream);
  color:var(--nexo-navy);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background var(--nexo-t);
}
.close-modal:hover{ background:#e4e8f2; }
.close-modal:focus-visible{ outline:3px solid var(--nexo-orange); outline-offset:2px; }

/* ============ STEPPER DE PROGRESO ============ */
.ns26-stepper{
  display:flex;
  gap:8px;
  padding:20px 40px 4px;
}
.ns26-stepper-item{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:#9aa1b5;
}
.ns26-stepper-bar{ height:4px; border-radius:999px; background:var(--nexo-line); transition:background var(--nexo-t); }
.ns26-stepper-item.is-active{ color:var(--nexo-navy); }
.ns26-stepper-item.is-active .ns26-stepper-bar{ background:var(--nexo-orange); }
.ns26-stepper-item.is-done{ color:var(--nexo-ok); }
.ns26-stepper-item.is-done .ns26-stepper-bar{ background:var(--nexo-ok); }

/* ============ CUERPO / PASOS ============ */
.ns26-modal-body{
  padding:20px 40px 26px;
  overflow-y:auto;
  flex:1;
}
.ns26-step{ display:none; }
.ns26-step.is-visible{ display:block; animation:ns26FadeUp .28s ease; }
@keyframes ns26FadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .ns26-step.is-visible{ animation:none } }

.ns26-h-section{ font-size:17px; font-weight:600; color:var(--nexo-navy); margin:24px 0 12px; }
.ns26-h-section:first-child{ margin-top:2px; }
.ns26-hint{ font-size:14.5px; color:var(--nexo-muted); line-height:1.55; margin:6px 0 16px; }

/* ============ PASO 1 · Selector de tipo de entrada (radio cards) ============
   Se mantiene la interacción de radio buttons (Ejecutiva / VIP / Ambas)
   pero con el lenguaje visual del resto del flujo. */
.ns26-type-picker{ margin-bottom:16px; }
.ns26-type-picker-label{
  display:block;
  font-size:14.5px;
  font-weight:500;
  color:var(--nexo-muted);
  margin-bottom:10px;
}
.ns26-type-options{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
}
.ticket-type-option{
  display:flex;
  align-items:center;
  gap:10px;
  border:2px solid var(--nexo-line);
  border-radius:var(--nexo-r-sm);
  padding:13px 16px;
  cursor:pointer;
  transition:border-color var(--nexo-t), background var(--nexo-t);
}
.ticket-type-option:hover{ border-color:var(--nexo-navy); }
.ticket-type-option.is-active{ border-color:var(--nexo-navy); background:#fafbff; }
.ticket-type-radio{
  width:18px; height:18px; border-radius:999px; border:2px solid var(--nexo-line); flex-shrink:0;
  transition:border-color var(--nexo-t);
}
.ticket-type-option.is-active .ticket-type-radio{ border:5px solid var(--nexo-navy); background:#fff; }
.ticket-type-name{ font-size:15px; font-weight:500; color:var(--nexo-muted); }
.ticket-type-option.is-active .ticket-type-name{ font-weight:700; color:var(--nexo-navy); }

/* Fila con cantidad por tipo de entrada */
.ns26-ticket-steppers{ display:flex; flex-direction:column; gap:12px; margin-bottom:8px; }
.ticket-stepper-row{
  border:2px solid var(--nexo-line);
  border-radius:var(--nexo-r-md);
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  transition:border-color var(--nexo-t), background var(--nexo-t);
}
.ticket-stepper-row.has-qty{ border-color:var(--nexo-navy); background:#fafbff; }
.ticket-stepper-name{ display:block; font-size:16px; font-weight:600; color:var(--nexo-navy); }
.ticket-stepper-price{ font-size:14px; color:var(--nexo-muted); margin-top:2px; }
.ticket-stepper-group-tag{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:20px; background:var(--nexo-orange, #EE4E22); color:#fff; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; vertical-align:middle; }
.ticket-stepper-group-hint{ font-size:12px; color:var(--nexo-muted); opacity:.8; }
.ns26-group-badge{ display:inline-block; margin-left:4px; padding:1px 7px; border-radius:20px; background:var(--nexo-orange, #EE4E22); color:#fff; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; vertical-align:middle; }
.ticket-stepper-control{
  display:flex; align-items:center; border:2px solid var(--nexo-line); border-radius:999px;
  overflow:hidden; background:#fff; flex-shrink:0;
}
.stepper-btn{
  width:40px; height:40px; border:none; background:#fff; color:var(--nexo-navy);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--nexo-t);
}
.stepper-btn:hover{ background:var(--nexo-cream); }
.stepper-btn:focus-visible{ outline:3px solid var(--nexo-orange); outline-offset:-3px; }
.stepper-value{ width:36px; text-align:center; font-size:16px; font-weight:600; color:var(--nexo-navy); }

/* ============ ASISTENTES (acordeón) ============ */
.attendee-panel{
  border:2px solid var(--nexo-line);
  border-radius:var(--nexo-r-md);
  margin-bottom:12px;
  overflow:hidden;
}
.attendee-panel-header{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  background:#fff;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.attendee-panel-header:focus-visible{ outline:3px solid var(--nexo-orange); outline-offset:-3px; }
.attendee-panel.is-open .attendee-panel-header{ background:#fafbff; }
.attendee-number{
  width:28px; height:28px; border-radius:999px; background:var(--nexo-navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; flex-shrink:0;
}
.attendee-panel-title{ flex:1; display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--nexo-navy); }
.attendee-panel.is-collapsed .attendee-panel-title{ font-weight:500; color:var(--nexo-muted); }
.attendee-panel.is-collapsed .attendee-number{ background:var(--nexo-line); color:var(--nexo-muted); }
.attendee-panel-type{ font-weight:400; color:var(--nexo-muted); font-size:13.5px; }
.attendee-panel-header svg{ color:#9aa1b5; flex-shrink:0; transition:transform var(--nexo-t); }
.attendee-panel.is-open .attendee-panel-header svg{ transform:rotate(180deg); }

.attendee-panel-body{ padding:6px 20px 20px; }
.attendee-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }

.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field-label{ font-size:15px; font-weight:500; color:var(--nexo-navy); }
.required-asterisk{ color:var(--nexo-err); }
.form-field input, .form-field select{
  width:100%; height:52px; padding:0 16px; font-size:16px; font-family:inherit; font-style:normal; font-weight:400;
  color:var(--nexo-ink); background:#fff; border-radius:var(--nexo-r-sm);
  transition:border-color var(--nexo-t), box-shadow var(--nexo-t);
}
/* Borde gris neutro forzado: algunos estilos globales del sitio pintan los
   inputs "válidos" en verde (como si fueran un estado de éxito), lo cual no
   aplica a un formulario de compra. Se fija explícitamente para ganarle a
   cualquier CSS externo con :valid/:required. */
#ns26-ticket-modal-optimized .form-field input,
#ns26-ticket-modal-optimized .form-field select,
#ns26-ticket-modal-optimized .form-field input:valid,
#ns26-ticket-modal-optimized .form-field input:invalid,
#ns26-ticket-modal-optimized .form-field input:required,
#ns26-ticket-modal-optimized .form-field input:optional{
  border:2px solid var(--nexo-line) !important;
}
.form-field input::placeholder{ color:#a6adc2; font-style:normal; font-weight:400; opacity:1; }
.form-field input::-webkit-input-placeholder{ font-style:normal; font-weight:400; }
.form-field input::-moz-placeholder{ font-style:normal; font-weight:400; opacity:1; }
.form-field input:-ms-input-placeholder{ font-style:normal; font-weight:400; }
#ns26-ticket-modal-optimized .form-field input:focus,
#ns26-ticket-modal-optimized .form-field select:focus{
  outline:none; border-color:var(--nexo-navy) !important; box-shadow:0 0 0 4px rgba(1,5,50,.08);
}
#ns26-ticket-modal-optimized .form-field input.wc-invalid,
#ns26-ticket-modal-optimized .form-field input[aria-invalid="true"]{ border-color:var(--nexo-err) !important; }
.field-message{ min-height:14px; font-size:13px; }
.field-message.error{ color:var(--nexo-err); }
.form-field .help{ font-size:13.5px; color:var(--nexo-muted); }

/* ============ Input de teléfono: código de país editable + número ============
   Un solo control visual (una caja, un borde, un radio) en vez de "caja
   dentro de caja": el <select> del código y el <input> del número comparten
   el mismo contenedor, sin bordes propios — solo una línea divisoria sutil
   entre ambos. Inspirado en el patrón "input group" de shadcn/ui. */
.form-field-group{
  display:flex;
  align-items:stretch;
  height:52px;
  border:1.5px solid var(--nexo-line);
  border-radius:var(--nexo-r-sm);
  background:#fff;
  overflow:hidden;
  transition:border-color var(--nexo-t), box-shadow var(--nexo-t);
}
.form-field-group:focus-within{
  border-color:var(--nexo-navy);
  box-shadow:0 0 0 4px rgba(1,5,50,.08);
}
#ns26-ticket-modal-optimized select.form-field-code{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  flex:0 0 auto;
  width:104px;
  height:100%;
  border:none !important;
  border-right:1.5px solid var(--nexo-line) !important;
  border-radius:0 !important;
  background:var(--nexo-cream) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%235b6178" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 12px center !important;
  background-size:10px 6px;
  padding:0 24px 0 14px;
  font-size:14.5px;
  font-weight:600;
  font-family:inherit;
  color:var(--nexo-navy);
  cursor:pointer;
}
#ns26-ticket-modal-optimized select.form-field-code:focus{ outline:none; border-color:transparent; background-color:#fff !important; box-shadow:none !important; }
#ns26-ticket-modal-optimized .form-field-group input{
  flex:1 1 auto;
  min-width:0;
  height:100% !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 16px !important;
}
#ns26-ticket-modal-optimized .form-field-group input:focus{ box-shadow:none !important; }

/* ============ PASO 2 · Facturación ============ */
.ns26-seg{ display:flex; gap:8px; padding:4px; background:var(--nexo-cream); border-radius:999px; width:fit-content; }
.ns26-seg label{ position:relative; cursor:pointer; }
.ns26-seg input{ position:absolute; opacity:0; }
.ns26-seg span{
  display:flex; align-items:center; height:44px; padding:0 26px; border-radius:999px;
  font-size:15px; font-weight:500; color:var(--nexo-muted); transition:all var(--nexo-t);
}
.ns26-seg input:checked + span{ background:var(--nexo-navy); color:#fff; font-weight:600; }
.ns26-seg input:focus-visible + span{ outline:3px solid var(--nexo-orange); outline-offset:2px; }
.ns26-factura-fields{ display:none; margin-top:16px; }
.ns26-factura-fields.is-visible{ display:grid; animation:ns26FadeUp .24s ease; }

/* ============ PASO 3 · Pago ============ */
.ns26-summary{ background:var(--nexo-cream); border-radius:var(--nexo-r-md); padding:20px 22px; margin-bottom:18px; }
.ns26-summary-row{ display:flex; justify-content:space-between; font-size:15px; color:var(--nexo-muted); padding:5px 0; }
.ns26-summary-row strong{ color:var(--nexo-navy); font-weight:600; }
.ns26-summary-row.total{ border-top:2px solid #dde1ec; margin-top:8px; padding-top:12px; font-size:18px; }
.ns26-summary-row.total span, .ns26-summary-row.total strong{ color:var(--nexo-navy); font-weight:700; }

.ns26-pay{
  border:2px solid var(--nexo-navy);
  background:#fafbff;
  border-radius:var(--nexo-r-md);
  padding:20px 22px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.ns26-pay-logo{
  width:48px; height:48px; border-radius:12px; background:rgba(0,158,227,.12); color:var(--nexo-mp);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ns26-pay-name{ font-size:16px; font-weight:600; color:var(--nexo-navy); }
.ns26-pay-desc{ font-size:14px; color:var(--nexo-muted); margin-top:4px; line-height:1.55; }
.ns26-pay-badges{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.ns26-pay-badges span{ font-size:12.5px; font-weight:500; color:var(--nexo-navy); background:var(--nexo-cream); padding:6px 12px; border-radius:999px; }

.ns26-terms{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; font-size:14.5px; color:var(--nexo-muted); line-height:1.5; }
.ns26-terms input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--nexo-orange); flex-shrink:0; }
.ns26-terms a{ color:var(--nexo-orange); font-weight:600; }

/* ============ FOOTER ============ */
.ns26-modal-footer{
  padding:16px 40px 26px;
  border-top:2px solid var(--nexo-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#fff;
}
.ns26-totals{ font-size:14px; color:var(--nexo-muted); }
.ns26-totals strong{ display:block; font-size:22px; font-weight:700; color:var(--nexo-navy); margin-top:2px; }
.ns26-modal-footer-actions{ display:flex; gap:10px; }

.btn-back, .btn-proceed{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 30px; border-radius:999px; font-family:inherit;
  font-size:16px; font-weight:600; cursor:pointer; border:none; transition:all var(--nexo-t);
}
.btn-back:focus-visible, .btn-proceed:focus-visible{ outline:3px solid var(--nexo-navy); outline-offset:2px; }
.btn-back{ background:#fff; color:var(--nexo-navy); border:2px solid var(--nexo-line); }
.btn-back:hover{ border-color:var(--nexo-navy); }
.btn-proceed{ background:var(--nexo-orange); color:#fff; }
.btn-proceed:hover{ background:var(--nexo-orange-hover); }
.btn-proceed.is-mp{ background:var(--nexo-mp); }
.btn-proceed.is-mp:hover{ background:#0087c4; }
.btn-proceed:active{ transform:scale(0.98); }
.btn-proceed.loading{ opacity:.7; cursor:wait; }
.btn-proceed:disabled{ opacity:.55; cursor:not-allowed; }

/* ============ MENSAJE DE ÉXITO ============ */
.success-message{ padding:24px 4px 12px; text-align:center; }
.success-logo{ display:flex; justify-content:center; align-items:center; margin:0 0 22px; overflow:visible; }
.success-logo svg{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
  aspect-ratio:1088.79/552;
}
.success-logo-fallback{ font-family:'Bebas Neue', sans-serif; letter-spacing:.04em; font-size:22px; color:var(--nexo-navy); }
.success-message h3{ margin:0 0 8px; font-size:22px; font-weight:700; color:var(--nexo-navy); }
.success-message p{ margin:0 0 20px; font-size:15px; color:var(--nexo-muted); }
.success-actions{ display:flex; gap:10px; justify-content:center; }
.btn-continue, .btn-checkout{
  flex:1; max-width:220px; height:48px; border-radius:999px; font-size:15px; font-weight:600;
  display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer;
}
.btn-continue{ border:2px solid var(--nexo-line); background:#fff; color:var(--nexo-navy); }
.btn-checkout{ border:none; background:var(--nexo-orange); color:#fff; }

/* ============ NOTIFICACIONES ============ */
.ns26-notification{
  position:fixed; top:20px; right:20px; padding:14px 20px; border-radius:999px;
  background:var(--nexo-navy); color:#fff; font-size:14px; font-weight:500;
  z-index:9999999; transform:translateX(120%); transition:transform .25s ease;
  box-shadow:0 12px 30px rgba(1,5,50,.25);
}
.ns26-notification.error{ background:var(--nexo-err); }
.ns26-notification.is-visible{ transform:translateX(0); }

/* ============ RESPONSIVE ============ */
@media (max-width:720px){
  .ns26-modal{ padding:0; align-items:flex-end; }
  .ns26-modal-content{ width:100%; max-height:100dvh; height:100dvh; border-radius:0; transform:translateY(0); }
  .ns26-modal-header{ padding:20px 20px 0; }
  .ns26-modal-header h3{ font-size:21px; }
  .ns26-stepper{ padding:16px 20px 2px; }
  .ns26-stepper-item{ font-size:12.5px; }
  .ns26-modal-body{ padding:16px 20px 20px; }
  .attendee-form-grid{ grid-template-columns:1fr; }
  .ns26-type-options{ grid-template-columns:repeat(2, 1fr); }
  .ns26-factura-fields{ grid-template-columns:1fr; }
  .ns26-modal-footer{
    flex-direction:column; align-items:stretch; padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  }
  .ns26-totals{ display:flex; align-items:baseline; justify-content:space-between; }
  .ns26-totals strong{ font-size:20px; margin-top:0; }
  .ns26-modal-footer-actions{ width:100%; }
  .ns26-modal-footer-actions .btn-back, .ns26-modal-footer-actions .btn-proceed{ flex:1; }
  .ticket-stepper-row{ flex-wrap:wrap; gap:12px; }
  .ticket-stepper-control{ margin-left:auto; }
  .success-actions{ flex-direction:column; }
  .success-actions .btn-continue, .success-actions .btn-checkout{ max-width:none; }
}