/* ════════════════════════════════════════════════════════
   EXIT-INTENT "ACTIVITY PICKER HELPER" POPUP — sabres-events.co.il
   Pairs with /assets/js/exit-popup.js. Self-contained: does not
   reuse or depend on the per-page #leadModal styles, even though
   the visual language (white card, rounded corners, same field/
   button treatment) intentionally matches it.

   Loaded only on the 5 V1 pages: index, water-tag, laser-tag,
   groups, safe-break. Markup lives inline in each page (two short
   steps), this file only styles it.
   ════════════════════════════════════════════════════════ */

.exit-popup-overlay{
  position:fixed;inset:0;background:rgba(3,4,94,0.32);backdrop-filter:blur(2px);
  z-index:9998; /* just below leadModal's 9999 — leadModal always wins if both existed */
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity 0.3s ease;
}
.exit-popup-overlay.open{opacity:1;pointer-events:all;}
.exit-popup-box{
  background:#fff;border-radius:22px;padding:26px 26px 20px;max-width:440px;width:100%;
  position:relative;box-shadow:0 24px 80px rgba(3,4,94,0.25);
  transform:translateY(30px) scale(0.97);transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  max-height:95vh;overflow-y:auto;direction:rtl;text-align:right;
}
.exit-popup-overlay.open .exit-popup-box{transform:translateY(0) scale(1);}

.exit-popup-close{
  position:absolute;top:12px;left:12px;width:30px;height:30px;border-radius:50%;
  border:none;background:#f0f4f8;cursor:pointer;font-size:14px;line-height:30px;
  text-align:center;color:#555;transition:background 0.2s;
}
.exit-popup-close:hover{background:#e0e8f0;}
.exit-popup-close:focus-visible{outline:2px solid #0096C7;outline-offset:2px;}

.exit-popup-back{
  background:none;border:none;color:#0096C7;font-size:12.5px;font-weight:700;cursor:pointer;
  padding:2px 0 8px;display:flex;align-items:center;gap:4px;
}
.exit-popup-back:focus-visible{outline:2px solid #0096C7;outline-offset:2px;border-radius:4px;}

.exit-popup-title{
  font-size:19px;font-weight:800;color:#03045E;margin:2px 0 8px;line-height:1.3;
  font-family:var(--font-heading,'Heebo',sans-serif);text-align:center;
}
.exit-popup-subtitle{
  font-size:13.5px;color:#64748b;text-align:center;margin:0 0 18px;line-height:1.5;
}

.exit-popup-qgroup{margin-bottom:14px;}
.exit-popup-qlabel{font-size:13px;font-weight:700;color:#374151;margin-bottom:7px;}
.exit-popup-chips{display:flex;flex-wrap:wrap;gap:8px;}
.exit-chip{
  background:#F0F9FF;border:1.5px solid rgba(0,150,199,0.25);color:#03045E;
  padding:7px 15px;border-radius:18px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:background 0.2s,border-color 0.2s,transform 0.15s;
  flex:0 0 auto;
}
.exit-chip:hover{background:#e0f4fb;}
.exit-chip:focus-visible{outline:2px solid #0096C7;outline-offset:2px;}
.exit-chip.selected{
  background:linear-gradient(135deg,#48CAE4,#0096C7);border-color:transparent;
  color:#fff;transform:translateY(-1px);
}

/* 2-3 per row on mobile, per spec — flex-wrap already achieves this at
   narrow widths since chip width is intrinsic to its label. */
@media(max-width:480px){
  .exit-chip{padding:6px 13px;font-size:12.5px;}
}

/* Step 1 carries 3 chip question-groups, so it needs a touch less vertical
   rhythm than Step 2 to avoid a scrollbar on typical viewports — scoped to
   Step 1 only, Step 2's more generous spacing is untouched. */
#exitPopupStep1 .exit-popup-qgroup{margin-bottom:10px;}
#exitPopupStep1 .exit-popup-chips{gap:6px;}
#exitPopupStep1 .exit-chip{padding:6px 13px;font-size:12.5px;}
#exitPopupStep1 .exit-popup-subtitle{margin-bottom:14px;}
#exitPopupStep1 .exit-popup-btn-primary{margin-top:4px;}
#exitPopupStep1 .exit-popup-btn-secondary{margin-top:8px;}
@media(max-width:480px){
  #exitPopupStep1 .exit-chip{padding:5px 11px;font-size:12px;}
  #exitPopupStep1 .exit-popup-qgroup{margin-bottom:8px;}
}

.exit-popup-field{margin-bottom:12px;}
.exit-popup-label{display:block;font-size:12.5px;font-weight:600;color:#555;margin-bottom:5px;text-align:right;}
.exit-popup-field input{
  width:100%;padding:10px 13px;border:1.5px solid rgba(0,150,199,0.2);border-radius:11px;
  font-size:14.5px;font-family:inherit;color:#1a1a2e;background:#f5fbff;outline:none;
  transition:border-color 0.2s;box-sizing:border-box;direction:rtl;
}
.exit-popup-field input:focus{border-color:#0096C7;background:#fff;}
.exit-popup-field input:focus-visible{outline:2px solid #0096C7;outline-offset:1px;}
.exit-popup-field input.input-error{border-color:#e53e3e;background:#fff5f5;}

/* Consent row — same look as the lead modal's .consent-row */
.exit-popup-consent{
  display:flex;align-items:center;gap:8px;margin:4px 0 2px;padding:7px 10px;
  background:#F0F9FF;border-radius:10px;border:1px solid rgba(0,150,199,0.2);
}
.exit-popup-consent input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;margin:0;accent-color:#0096C7;cursor:pointer;}
.exit-popup-consent input[type="checkbox"].input-error{outline:2px solid #e53e3e;outline-offset:1px;}
.exit-popup-consent label{font-size:11.5px;color:#374151;line-height:1.4;cursor:pointer;}
.exit-popup-consent label a{color:#0096C7;font-weight:600;text-decoration:underline;}

.exit-popup-btn-primary{
  width:100%;padding:13px;background:linear-gradient(135deg,#48CAE4,#0096C7);color:#fff;
  border:none;border-radius:13px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;margin-top:8px;transition:opacity 0.2s,transform 0.15s;
}
.exit-popup-btn-primary:hover{opacity:0.92;}
.exit-popup-btn-primary:focus-visible{outline:2px solid #03045E;outline-offset:2px;}
.exit-popup-btn-primary:disabled{opacity:0.6;cursor:default;}

.exit-popup-btn-secondary{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;
  background:#fff;border:2px solid #25D366;color:#128C7E;border-radius:13px;font-size:13.5px;
  font-weight:700;cursor:pointer;font-family:inherit;margin-top:10px;text-decoration:none;
  transition:background 0.2s;
}
.exit-popup-btn-secondary:hover{background:#f0fff4;}
.exit-popup-btn-secondary:focus-visible{outline:2px solid #128C7E;outline-offset:2px;}
.exit-popup-btn-secondary svg{width:17px;height:17px;flex-shrink:0;}

.exit-popup-success{
  display:none;text-align:center;color:#059669;font-weight:700;font-size:13px;
  padding:9px 12px;border-radius:11px;background:rgba(16,185,129,0.1);
  border:1px solid rgba(16,185,129,0.25);margin-top:10px;
}
.exit-popup-success.show{display:block;}

@media(max-width:480px){
  .exit-popup-box{padding:20px 18px 16px;border-radius:18px;}
  .exit-popup-title{font-size:17px;}
  .exit-popup-subtitle{margin:0 0 14px;}
  .exit-popup-qgroup{margin-bottom:11px;}
}

/* Self-contained visually-hidden utility (NOT reused from the page's own
   .visually-hidden — that class is only actually defined on index.html,
   not on the other 4 V1 pages, so relying on it there would silently
   show the text instead of hiding it). */
.exit-popup-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
