/* MJ Quiz – Sidebar Variant v1.0
   Applied via .mj-quiz--sidebar modifier class.
   Loaded only when layout="sidebar" is used. */

/* ── Container ───────────────────────────────────────────────── */
.mj-quiz-container.mj-quiz--sidebar {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--mj-text-dark, #1a1a1a) !important;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.15) transparent;
}
.mj-quiz-container.mj-quiz--sidebar::-webkit-scrollbar { width: 4px; }
.mj-quiz-container.mj-quiz--sidebar::-webkit-scrollbar-track { background: transparent; }
.mj-quiz-container.mj-quiz--sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }

/* ── Hero (compact, visually distinct) ────────────────────────── */
.mj-quiz--sidebar .mjq-hero { display: none; }
.mj-quiz--sidebar .mjq-hero-title { font-size: 1.3rem; letter-spacing: -.5px; margin-bottom: .15rem; line-height: 1.2; color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-hero-title em { color: #c47a00; font-size: .85rem; letter-spacing: 0; }
.mj-quiz--sidebar .mjq-hero-sub { font-size: .72rem; color: rgba(0,0,0,.5); }

/* ── Steps (smaller) ─────────────────────────────────────────── */
.mj-quiz--sidebar .mjq-steps { gap: 2px; margin-bottom: .8rem; }
.mj-quiz--sidebar .mjq-step { width: 22px; height: 22px; font-size: .58rem; background: rgba(26,92,74,.1); border-color: rgba(26,92,74,.2); color: #1a5c4a; }
.mj-quiz--sidebar .mjq-step--done { background: #1a5c4a; border-color: #1a5c4a; color: #fff; }
.mj-quiz--sidebar .mjq-step--current { background: #FF9500; border-color: #FF9500; color: #fff; box-shadow: 0 0 6px rgba(255,149,0,.3); }
.mj-quiz--sidebar .mjq-step-line { width: 6px; background: rgba(26,92,74,.15); }

/* ── Question (compact, differentiated from hero) ────────────── */
.mj-quiz--sidebar .mjq-question { font-size: .95rem; margin-bottom: .8rem; line-height: 1.3; text-align: center; color: var(--mj-text-dark, #1a1a1a); font-weight: 600; }

/* ── Answer options (light green) ────────────────────────────── */
.mj-quiz--sidebar .mjq-options { gap: 4px; }
.mj-quiz--sidebar .mjq-opt { gap: .45rem; padding: .4rem .55rem; border-radius: 5px; min-height: 34px; background: rgba(26,92,74,.06); border-color: rgba(26,92,74,.12); color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-opt:hover { background: rgba(26,92,74,.12); border-color: rgba(26,92,74,.2); }
.mj-quiz--sidebar .mjq-opt.selected { background: rgba(26,92,74,.15); border-color: #1a5c4a; }
.mj-quiz--sidebar .mjq-opt-icon { font-size: .85rem; min-width: 1.1rem; }
.mj-quiz--sidebar .mjq-opt-label { font-size: calc(.78rem + 1px); line-height: 1.35; color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-opt-radio { width: 14px; height: 14px; border-color: rgba(26,92,74,.3); }
.mj-quiz--sidebar .mjq-opt:hover .mjq-opt-radio { border-color: #1a5c4a; background: rgba(26,92,74,.2); }
.mj-quiz--sidebar .mjq-opt.selected .mjq-opt-radio { border-width: 4px; border-color: #1a5c4a; background: #1a5c4a; }

/* ── Navigation (compact) ────────────────────────────────────── */
.mj-quiz--sidebar .mjq-nav { margin-top: 1rem; }
.mj-quiz--sidebar .mjq-back { font-size: .78rem; min-height: 36px; color: rgba(0,0,0,.5); }
.mj-quiz--sidebar .mjq-next { padding: .5rem 1rem; border-radius: 6px; font-size: .82rem; min-height: 36px; background: #1a5c4a; color: #fff; }
.mj-quiz--sidebar .mjq-next:hover { background: #155040; }

/* ── Loading (compact) ───────────────────────────────────────── */
.mj-quiz--sidebar .mjq-loading { padding: 1rem 0; gap: .7rem; color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-loading-avatar { width: 80px; height: 80px; border-width: 2px; border-color: rgba(26,92,74,.2); }
.mj-quiz--sidebar .mjq-loading-text { font-size: .82rem; color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-loading-bar { width: 140px; height: 3px; background: rgba(26,92,74,.1); }
.mj-quiz--sidebar .mjq-loading-bar::after { background: #1a5c4a; }
.mj-quiz--sidebar .mjq-loading .mjq-score-bars { padding: 0 .3rem; }
.mj-quiz--sidebar .mjq-loading .mjq-score-label { width: 40px; font-size: .65rem; }

/* ── Score bars (compact) ────────────────────────────────────── */
.mj-quiz--sidebar .mjq-score-bars { gap: .4rem; margin-top: .5rem; }
.mj-quiz--sidebar .mjq-score-row { gap: .4rem; }
.mj-quiz--sidebar .mjq-score-label { width: 80px; font-size: .7rem; color: var(--mj-text-dark, #333); }
.mj-quiz--sidebar .mjq-score-track { height: 6px; border-radius: 3px; background: rgba(26,92,74,.1); }
.mj-quiz--sidebar .mjq-score-fill { border-radius: 3px; background: #1a5c4a; }
.mj-quiz--sidebar .mjq-score-val { width: 22px; font-size: .68rem; color: var(--mj-text-dark, #333); }

/* ── Result (compact) ────────────────────────────────────────── */
.mj-quiz--sidebar .mjq-result-label { font-size: .62rem; margin-bottom: .35rem; color: rgba(0,0,0,.5); }
.mj-quiz--sidebar .mjq-result-header { gap: .6rem; margin-bottom: .5rem; }
.mj-quiz--sidebar .mjq-result-thumb { width: 42px; height: 42px; }
.mj-quiz--sidebar .mjq-result-name { font-size: 1.2rem; letter-spacing: -.5px; color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-result-tagline { font-size: .75rem; margin-top: .15rem; color: #c47a00; }
.mj-quiz--sidebar .mjq-result-desc { line-height: 1.45; margin-bottom: .8rem; font-size: .78rem; -webkit-line-clamp: unset; color: var(--mj-text-dark, #333); }
.mj-quiz--sidebar .mjq-result-image { margin: 0 0 .8rem; }
.mj-quiz--sidebar .mjq-result-image img { height: 140px; }
.mj-quiz--sidebar .mjq-lock-overlay { padding: .6rem 0 .8rem; position: relative; z-index: 2; background: transparent; border-radius: 0; color: var(--mj-text-dark, #1a1a1a); margin-top: -6.2rem; }
/* Hide scrollbar when gate is showing */
.mj-quiz--sidebar .mjq-result-locked:not(.mjq-result-locked--open) { overflow: hidden; }
.mj-quiz--sidebar .mjq-lock-icon { font-size: 1.2rem; margin-bottom: .15rem; }
.mj-quiz--sidebar .mjq-lock-title { font-size: .82rem; margin-bottom: .4rem; color: var(--mj-text-dark, #1a1a1a); font-weight: 700; }
/* Hide blurred preview content below the gate in sidebar */
.mj-quiz--sidebar .mjq-result-full--blurred { display: none; }
/* Blurred score bars behind gate */
.mj-quiz--sidebar .mjq-result-locked { position: relative; }
.mj-quiz--sidebar .mjq-result-locked--open .mjq-lock-bg-blur { display: none; }
.mj-quiz--sidebar .mjq-lock-bg-blur { filter: blur(4px); opacity: .3; pointer-events: none; user-select: none; padding: .5rem .5rem 2.5rem; }
.mj-quiz--sidebar .mjq-lock-bg-blur .mjq-score-label { width: 60px; font-size: .65rem; }
.mj-quiz--sidebar .mjq-lock-bg-blur .mjq-score-track { height: 6px; }
.mj-quiz--sidebar .mjq-lock-bg-blur .mjq-score-val { font-size: .65rem; }

/* ── Hotels (compact two-row layout) ─────────────────────────── */
.mj-quiz--sidebar .mjq-section-title { font-size: .82rem; gap: .4rem; margin-bottom: .4rem; color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-hotel { padding: .5rem .6rem; border-radius: 8px; margin-bottom: .3rem; border: none; background: rgba(26,92,74,.06); }
.mj-quiz--sidebar .mjq-hotel:hover { background: rgba(26,92,74,.1); }
.mj-quiz--sidebar .mjq-hotel-row1 { display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; overflow: hidden; }
.mj-quiz--sidebar .mjq-hotel-row1 strong { font-size: .82rem; color: var(--mj-text-dark, #1a1a1a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mj-quiz--sidebar .mjq-hotel-row2 { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.mj-quiz--sidebar .mjq-hotel-meta { font-size: .65rem; color: rgba(0,0,0,.6); }
.mj-quiz--sidebar .mjq-hotel-btn { flex-shrink: 0; padding: .3rem .65rem; border-radius: 5px; font-size: .72rem; white-space: nowrap; background: #1a5c4a; color: #fff; }
.mj-quiz--sidebar .mjq-hotel-btn:hover { background: #155040; }
.mj-quiz--sidebar .mjq-best-match { font-size: .5rem; padding: 1px 4px; border-radius: 3px; background: #FF9500; color: #fff; }

/* ── Email gate (compact) ────────────────────────────────────── */
.mj-quiz--sidebar .mjq-lock-desc { font-size: .75rem; line-height: 1.45; margin-bottom: .7rem; color: rgba(0,0,0,.6); }
.mj-quiz--sidebar .mjq-email-row { flex-direction: column; gap: .35rem; margin-bottom: .5rem; }
.mj-quiz--sidebar .mjq-email-row input { padding: .5rem .7rem; border-radius: 6px; font-size: .82rem; min-height: 36px; background: #fff; border: 1px solid rgba(0,0,0,.15); color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-email-row input::placeholder { color: rgba(0,0,0,.35); }
.mj-quiz--sidebar .mjq-email-row button { padding: .5rem .8rem; border-radius: 6px; font-size: .82rem; min-height: 36px; background: #FF9500; color: #fff; border: none; font-weight: 700; }
.mj-quiz--sidebar .mjq-email-row button:hover { background: #e68600; }
.mj-quiz--sidebar .mjq-privacy { font-size: .65rem; color: rgba(0,0,0,.4); }
.mj-quiz--sidebar .mjq-social-proof { font-size: .65rem; color: rgba(0,0,0,.4); }
.mj-quiz--sidebar .mjq-skip a { font-size: .7rem; color: rgba(0,0,0,.5); }

/* ── CTAs (compact) ──────────────────────────────────────────── */
.mj-quiz--sidebar .mjq-cta-row { margin-top: 1rem; }
.mj-quiz--sidebar .mjq-cta-actions-row { flex-wrap: wrap; gap: .4rem; justify-content: center; }
.mj-quiz--sidebar .mjq-icon-btn { font-size: .7rem; gap: 4px; color: var(--mj-text-dark, #555) !important; text-decoration: none !important; }
.mj-quiz--sidebar .mjq-icon-btn:hover { color: #1a5c4a !important; }
.mj-quiz--sidebar .mjq-cta-actions-row a,
.mj-quiz--sidebar .mjq-cta-actions-row button { color: var(--mj-text-dark, #555) !important; }
.mj-quiz--sidebar .mjq-cta-actions-row a:hover,
.mj-quiz--sidebar .mjq-cta-actions-row button:hover { color: #1a5c4a !important; }
.mj-quiz--sidebar .mjq-action-sep { color: rgba(0,0,0,.2); }
.mj-quiz--sidebar .mjq-icon-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.mj-quiz--sidebar .mjq-icon-btn svg[fill="currentColor"] { fill: currentColor; stroke: none; }
.mj-quiz--sidebar .mjq-action-sep { font-size: .7rem; }
.mj-quiz--sidebar .mjq-hotel-note-why { font-size: .68rem; line-height: 1.4; margin-top: .6rem; }

/* ── Runner-up / Score toggles (compact) ─────────────────────── */
.mj-quiz--sidebar .mjq-runner-up-wrap,
.mj-quiz--sidebar .mjq-score-result { margin-bottom: .8rem; }
.mj-quiz--sidebar .mjq-runner-up-toggle,
.mj-quiz--sidebar .mjq-score-result-toggle { font-size: .75rem; padding: .6rem .7rem; min-height: 36px; color: var(--mj-text-dark, #333); background: rgba(26,92,74,.06); border-color: rgba(26,92,74,.12); }
.mj-quiz--sidebar .mjq-runner-up-toggle:hover,
.mj-quiz--sidebar .mjq-score-result-toggle:hover { background: rgba(26,92,74,.1); }
.mj-quiz--sidebar .mjq-runner-up-name { font-size: .88rem; color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-runner-up-name em { font-size: .78rem; color: #c47a00; }
.mj-quiz--sidebar .mjq-runner-up-desc { font-size: .75rem; color: var(--mj-text-dark, #333); }
.mj-quiz--sidebar .mjq-runner-up-hotel { flex-direction: column; align-items: flex-start; gap: .3rem; font-size: .75rem; padding: .5rem .6rem; color: var(--mj-text-dark, #333); }
.mj-quiz--sidebar .mjq-hotel-btn--sm { align-self: flex-start; padding: .3rem .6rem; font-size: .7rem; background: #1a5c4a !important; color: #fff !important; border-radius: 5px; border: none; text-decoration: none; }
.mj-quiz--sidebar .mjq-search-all-row .mjq-icon-btn { font-size: .7rem; }
.mj-quiz--sidebar .mjq-runner-chevron { stroke: var(--mj-text-dark, #555); }
.mj-quiz--sidebar .mjq-score-result-chevron { stroke: var(--mj-text-dark, #555); }

/* ── Lock preview bars (compact) ─────────────────────────────── */
.mj-quiz--sidebar .mjq-lock-preview-bars { margin-bottom: .8rem; }
.mj-quiz--sidebar .mjq-lock-preview-bars .mjq-score-label { width: 35px; font-size: .6rem; }

/* ── Score result body ───────────────────────────────────────── */
.mj-quiz--sidebar .mjq-score-result-body { padding: 0 .7rem; color: var(--mj-text-dark, #333); }
.mj-quiz--sidebar .mjq-score-result--open .mjq-score-result-body { padding: .4rem .7rem .7rem; }
.mj-quiz--sidebar .mjq-runner-up-body { padding: 0 .7rem; color: var(--mj-text-dark, #333); }
.mj-quiz--sidebar .mjq-runner-up--open .mjq-runner-up-body { padding: .5rem .7rem .7rem; }

/* ── Result email CTA (compact) ──────────────────────────────── */
.mj-quiz--sidebar .mjq-result-email { margin-top: 1rem; padding: .8rem; background: rgba(26,92,74,.06); border-radius: 8px; }
.mj-quiz--sidebar .mjq-result-email__title { font-size: .85rem; color: var(--mj-text-dark, #1a1a1a); }
.mj-quiz--sidebar .mjq-result-email__desc { font-size: .75rem; color: var(--mj-text-dark, #555); }

/* ── Header bar (title + close) ───────────────────────────────── */
.mjq-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mjq-sidebar-header__title {
  font-family: var(--mj-font-heading, 'Geologica', sans-serif);
  font-size: .82rem;
  font-weight: 700;
  color: #c47a00;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.mjq-sidebar-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.4);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  padding: 0;
  flex-shrink: 0;
}
.mjq-sidebar-close:hover {
  background: rgba(0,0,0,.1);
  color: rgba(0,0,0,.7);
}

.mjq-sidebar-collapsed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: var(--mj-radius-lg, 14px);
  border: 1.5px solid rgba(26,92,74,.3);
  background: rgba(26,92,74,.08);
  color: var(--mj-accent, #1a5c4a);
  font-family: var(--mj-font-heading, 'Geologica', sans-serif);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  position: sticky;
  top: 1.5rem;
}
.mjq-sidebar-collapsed:hover {
  background: rgba(26,92,74,.14);
  border-color: rgba(26,92,74,.5);
}
.mjq-collapsed-arrow {
  font-size: .75rem;
  opacity: .6;
}

/* ── Glow pulse when scrolled to ─────────────────────────────── */
.mj-quiz-container.mjq-glow {
  animation: mjqGlow 1.5s ease-out;
}
@keyframes mjqGlow {
  0% { box-shadow: 0 0 0 0 rgba(255,149,0,.5); }
  30% { box-shadow: 0 0 12px 4px rgba(255,149,0,.35); }
  100% { box-shadow: 0 0 0 0 rgba(255,149,0,0); }
}