/* Crew Pass overlay (shared between index.html and destination.html) */
/* ── Crew Pass Container ─────────────────────────────────────────────────── */
.crew-pass-container{
  position:fixed;
  inset:0;
  z-index:9999;
  background:linear-gradient(180deg,#1a1a1a 0%,#0d0d0d 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity 300ms ease,visibility 0s 300ms;
}
.crew-pass-container.open{
  opacity:1;
  visibility:visible;
  transition:opacity 300ms ease,visibility 0s 0s;
}

/* ── Animated Plane ──────────────────────────────────────────────────────── */
.crew-pass-plane{
  position:relative;
  width:100%;
  height:40px;
  overflow:hidden;
  pointer-events:none;
  margin-bottom:4px;
}
.crew-pass-plane img{
  position:absolute;
  width:48px;
  height:auto;
  opacity:1;
  animation:crewPassPlaneFly 8s ease-in-out infinite;
}
@keyframes crewPassPlaneFly{
  0%{left:-50px;opacity:0;transform:translateY(0)}
  10%{opacity:1}
  50%{transform:translateY(-4px)}
  90%{opacity:1}
  100%{left:calc(100% + 50px);opacity:0;transform:translateY(0)}
}

/* ── Pass Header ─────────────────────────────────────────────────────────── */
.crew-pass-header{
  text-align:center;
  margin-bottom:16px;
}
.crew-pass-logo{
  font-size:16px;
  font-weight:700;
  color:#1A1A1A;
  letter-spacing:3px;
}
.crew-pass-logo .gold{
  color:var(--gold);
}
.crew-pass-title{
  font-size:13px;
  font-weight:600;
  color:#6B6B6B;
  letter-spacing:1px;
}

/* ── Pass Card ───────────────────────────────────────────────────────────── */
.crew-pass-card{
  width:100%;
  max-width:340px;
  background:linear-gradient(145deg,#ffffff 0%,#f8f8f8 100%);
  border-radius:20px;
  padding:24px;
  box-shadow:
    0 0 0 1px rgba(184,150,12,0.3),
    0 0 40px rgba(184,150,12,0.2),
    0 20px 60px rgba(0,0,0,0.4);
  position:relative;
  overflow:hidden;
  animation:crewPassGlow 3s ease-in-out infinite;
}
@keyframes crewPassGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(184,150,12,0.3),0 0 40px rgba(184,150,12,0.15),0 20px 60px rgba(0,0,0,0.4)}
  50%{box-shadow:0 0 0 2px rgba(184,150,12,0.5),0 0 60px rgba(184,150,12,0.3),0 20px 60px rgba(0,0,0,0.4)}
}

/* ── Venue Section ───────────────────────────────────────────────────────── */
.crew-pass-venue{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.crew-pass-venue-logo{
  width:48px;
  height:48px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  background:var(--bg);
}
.crew-pass-venue-info{
  flex:1;
}
.crew-pass-venue-name{
  font-size:16px;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:2px;
}
.crew-pass-venue-category{
  font-size:11px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* ── Offer Section ───────────────────────────────────────────────────────── */
.crew-pass-offer{
  text-align:center;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.crew-pass-discount{
  font-size:32px;
  font-weight:800;
  color:var(--gold);
  letter-spacing:-0.02em;
  margin-bottom:4px;
}
.crew-pass-offer-title{
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
}
.crew-pass-offer-local{
  font-size:12px;
  color:var(--text-muted);
  margin-top:4px;
}
.crew-pass-offer-desc{
  margin-top:12px;
  text-align:left;
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.55;
}

/* ── Rich text (offer description) ───────────────────────────────────────── */
.rt-p{ margin:0 0 8px; }
.rt-p:last-child{ margin-bottom:0; }
.rt-h1{ font-size:16px; font-weight:800; color:var(--text-primary); margin:10px 0 4px; }
.rt-h2{ font-size:14px; font-weight:700; color:var(--text-primary); margin:8px 0 4px; }
.rt-h3{ font-size:13px; font-weight:700; color:var(--text-primary); margin:6px 0 2px; }
.rt-gap{ height:8px; }
.rt-p strong, .rt-h1 strong, .rt-h2 strong, .rt-h3 strong{ font-weight:800; color:var(--gold); }
.rt-p u, .rt-h1 u, .rt-h2 u, .rt-h3 u{ text-decoration:underline; text-underline-offset:2px; }

/* ── User Section ────────────────────────────────────────────────────────── */
.crew-pass-user{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.crew-pass-user-icon{
  font-size:20px;
}
.crew-pass-user-info{
  flex:1;
}
.crew-pass-user-name{
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
}
.crew-pass-user-role{
  font-size:12px;
  color:var(--text-muted);
}

/* ── Code Section ────────────────────────────────────────────────────────── */
.crew-pass-code{
  text-align:center;
  margin-bottom:16px;
}
.crew-pass-code-value{
  font-size:48px;
  font-weight:800;
  font-family:'SF Mono','Menlo','Monaco',monospace;
  color:var(--text-primary);
  letter-spacing:8px;
  text-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.crew-pass-code-ref{
  font-size:11px;
  font-weight:500;
  color:var(--text-muted);
  margin-bottom:2px;
  letter-spacing:0.5px;
}

/* ── Expiry Section ──────────────────────────────────────────────────────── */
.crew-pass-expiry{
  text-align:center;
  margin-bottom:12px;
}
.crew-pass-expiry-time{
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:4px;
}
.crew-pass-expiry-label{
  font-size:11px;
  color:var(--text-muted);
}

/* ── Progress Bar ────────────────────────────────────────────────────────── */
.crew-pass-progress{
  width:100%;
  height:6px;
  background:var(--bg);
  border-radius:3px;
  overflow:hidden;
}
.crew-pass-progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--success),#4CAF50);
  border-radius:3px;
  transition:width 1s linear,background 300ms ease;
}
.crew-pass-progress-bar.warning{
  background:linear-gradient(90deg,#FFA000,#FF8F00);
}
.crew-pass-progress-bar.danger{
  background:linear-gradient(90deg,var(--danger),#E53935);
}

/* ── Instruction ─────────────────────────────────────────────────────────── */
.crew-pass-instruction{
  text-align:center;
  margin-top:20px;
}
.crew-pass-instruction-text{
  font-size:14px;
  color:rgba(255,255,255,0.7);
  font-weight:500;
}
.crew-pass-instruction-local{
  font-size:12px;
  color:rgba(255,255,255,0.4);
  margin-top:4px;
}

/* ── Close Button ────────────────────────────────────────────────────────── */
.crew-pass-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(184,150,12,0.2);
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:var(--gold);
  font-size:22px;
  cursor:pointer;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER FEEDBACK PROMPT
   ═══════════════════════════════════════════════════════════════════════════ */
.feedback-prompt{
  position:fixed;
  bottom:80px;
  left:50%;
  transform:translateX(-50%) translateY(100px);
  z-index:3200;
  background:var(--surface);
  border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,0.2);
  padding:20px;
  width:calc(100% - 40px);
  max-width:340px;
  opacity:0;
  visibility:hidden;
  transition:all 300ms cubic-bezier(0.34,1.56,0.64,1);
}
.feedback-prompt.visible{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.feedback-prompt-title{
  font-size:15px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:4px;
  text-align:center;
}
.feedback-prompt-venue{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:16px;
  text-align:center;
}
.feedback-prompt-options{
  display:flex;
  gap:8px;
}
.feedback-prompt-btn{
  flex:1;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:13px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:all var(--transition);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.feedback-prompt-btn:hover{
  border-color:var(--gold);
}
.feedback-prompt-btn.yes{
  background:#E8F5E9;
  border-color:#4CAF50;
  color:#2E7D32;
}
.feedback-prompt-btn.no{
  background:#FFF3E0;
  border-color:#FF9800;
  color:#E65100;
}
.feedback-prompt-btn.refused{
  background:#FFEBEE;
  border-color:#F44336;
  color:#C62828;
}
.feedback-prompt-btn span{
  font-size:20px;
}
.feedback-prompt-dismiss{
  display:block;
  width:100%;
  text-align:center;
  margin-top:12px;
  font-size:12px;
  color:var(--text-muted);
  cursor:pointer;
  background:none;
  border:none;
  font-family:inherit;
}
.feedback-prompt-dismiss:hover{
  color:var(--text-secondary);
}

/* ── Crew Login Prompt ────────────────────────────────────────────────────── */
.crew-login-prompt{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.3s ease;
}
.crew-login-prompt.open{opacity:1}
.crew-login-prompt-content{
  background:var(--surface);
  border-radius:16px;
  padding:24px;
  max-width:400px;
  width:92%;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.crew-login-prompt-content p:first-child{
  font-size:18px;
  font-weight:700;
  margin-bottom:4px;
}
.crew-login-btn{
  display:block;
  width:100%;
  margin-top:16px;
  padding:12px;
  background:var(--gold);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
}
.crew-login-close{
  position:absolute;
  top:8px;
  right:12px;
  background:none;
  border:none;
  font-size:20px;
  color:var(--text-muted);
  cursor:pointer;
}

/* ── Crew Pass Feedback Buttons ──────────────────────────────────────────── */
.crew-pass-feedback{
  padding: 16px 0 0;
  border-top: 1px solid rgba(224,224,224,0.3);
  text-align: center;
}
.crew-pass-feedback-title{
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 12px;
}
.crew-pass-feedback-options{
  display: flex;
  gap: 8px;
  justify-content: center;
}
.crew-feedback-btn{
  flex: 1;
  padding: 12px 6px;
  border-radius: 12px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.crew-feedback-btn:active{ transform: scale(0.95); opacity: 0.8; }
.crew-feedback-btn .fb-icon{ font-size: 20px; }
.crew-feedback-btn .fb-label{ font-size: 11px; }
.crew-feedback-btn.claimed{ background: #2E7D32; color: #fff; }
.crew-feedback-btn.not-used{ background: #757575; color: #fff; }
.crew-feedback-btn.refused{ background: #C0392B; color: #fff; }