/* ═══════════════════════════════════════════════════════════
   SM Experience Quiz  –  v1.1.7
   All colours driven by CSS custom properties.
   Admin settings page overrides them via inline <style>.
═══════════════════════════════════════════════════════════ */

.sm-expquiz {
  --smq-accent:        #e8751a;
  --smq-accent-light:  #fef3ea;
  --smq-accent-ring:   rgba(232,117,26,.22);
  --smq-text:          #2e2a26;
  --smq-muted:         #726a61;
  --smq-surface:       #f7f4f0;
  --smq-border:        #e8e1d8;
  --smq-shadow:        0 16px 40px rgba(33,28,24,.08);
  --smq-btn-bg:        #e8751a;
  --smq-btn-text:      #ffffff;
  --smq-card-radius:   16px;
  --smq-answer-radius: 14px;
  --smq-badge-bg:      #f4efe8;
  --smq-badge-text:    #5e564f;

  color:     var(--smq-text);
  max-width: 1120px;
  margin:    0 auto;
  font-size: 16px;
}

/* ── Hard reset: stop ALL theme colours bleeding in ─────────
   Covers links, buttons, headings, focus rings.              */
/* Force [hidden] to always work — some themes override it */
.sm-expquiz [hidden] { display: none !important; }

.sm-expquiz *, .sm-expquiz *::before, .sm-expquiz *::after {
  box-sizing: border-box;
}
.sm-expquiz a,
.sm-expquiz a:link,
.sm-expquiz a:visited,
.sm-expquiz a:hover,
.sm-expquiz a:active,
.sm-expquiz a:focus {
  color: inherit !important;
  text-decoration: none !important;
  background-color: transparent;    /* kills any theme ::before highlight */
}
.sm-expquiz button {
  font-family: inherit;
  font-size:   inherit;
  background:  none;
  color:       inherit;
}
/* Kill WordPress theme focus outlines that may be pink/purple */
.sm-expquiz *:focus { outline: 2px solid var(--smq-accent) !important; outline-offset: 2px; }
.sm-expquiz *:focus:not(:focus-visible) { outline: none !important; }

/* ══════════════════════════════════════════════════════════
   QUIZ CARD
══════════════════════════════════════════════════════════ */
.sm-expquiz__card {
  background:    #fff;
  border:        1px solid var(--smq-border);
  border-radius: 28px;
  box-shadow:    var(--smq-shadow);
  padding:       36px 32px 28px;
}

/* ── Segmented progress ─────────────────────────────────── */
.sm-expquiz__progress-track {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
}
.sm-expquiz__progress-pill {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--smq-border);
  transition: background .25s ease;
}
.sm-expquiz__progress-pill.is-done    { background: var(--smq-accent); }
.sm-expquiz__progress-pill.is-current { background: var(--smq-accent); opacity: .4; }

/* ── Step label ─────────────────────────────────────────── */
.sm-expquiz__meta {
  text-align: center; margin: 0 0 8px;
  color: var(--smq-muted); font-size: 14px;
}

/* ── Question ───────────────────────────────────────────── */
.sm-expquiz__question {
  text-align: center;
  font-size: clamp(20px, 2.8vw, 36px);
  color: var(--smq-text); line-height: 1.2;
  margin: 0 0 22px;
}

/* ══════════════════════════════════════════════════════════
   ANSWER BUTTONS
   NOTE: All hover/selected states use !important to override
   any theme stylesheet that injects pink/purple colours.
══════════════════════════════════════════════════════════ */
.sm-expquiz__answers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
/* 2-answer questions (guided type) render as 2-col */
.sm-expquiz__answers--cols-2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 640px;
  margin: 0 auto;
}
/* 4-answer questions (vibe) render as 2x2 grid */
.sm-expquiz__answers--cols-4 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.sm-expquiz__answer {
  appearance: none !important;
  background: var(--smq-surface) !important;
  border: 2px solid var(--smq-border) !important;
  border-radius: var(--smq-answer-radius);
  padding: 28px 20px;
  min-height: 140px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease,
              transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  color: var(--smq-text) !important;
  text-align: center;
}
.sm-expquiz__answer:hover,
.sm-expquiz__answer:focus {
  border-color: var(--smq-accent) !important;
  background:   var(--smq-accent-light) !important;
  color:        var(--smq-text) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--smq-accent-ring);
  outline: none !important;
}
/* Selected state — the only state that should show the accent colour */
.sm-expquiz__answer.is-selected,
.sm-expquiz__answer.is-selected:hover,
.sm-expquiz__answer.is-selected:focus {
  border-color: var(--smq-accent) !important;
  background:   var(--smq-accent-light) !important;
  color:        var(--smq-text) !important;
  box-shadow:   0 0 0 3px var(--smq-accent-ring) !important;
  transform: translateY(-1px);
  outline: none !important;
}
.sm-expquiz__answer-icon {
  width: 46px; height: 46px;
  background: transparent !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 12px;
  color: var(--smq-muted) !important;
  transition: color .15s ease;
}
.sm-expquiz__answer:hover    .sm-expquiz__answer-icon,
.sm-expquiz__answer:focus    .sm-expquiz__answer-icon,
.sm-expquiz__answer.is-selected .sm-expquiz__answer-icon {
  color: var(--smq-accent) !important;
  background: transparent !important;
}
.sm-expquiz__answer-label {
  font-size: 14px; font-weight: 600;
  color: var(--smq-text) !important;
}
.sm-expquiz__answer-sublabel {
  display: block;
  font-size: 12px; font-weight: 400;
  color: var(--smq-muted) !important;
  margin-top: 4px; line-height: 1.4;
  text-align: center;
}

/* ── Quiz footer ────────────────────────────────────────── */
.sm-expquiz__footer {
  margin-top: 24px;
  display: flex; justify-content: center; align-items: center;
}
.sm-expquiz__back {
  appearance: none; border: 0 !important; background: transparent !important;
  box-shadow: none !important; outline: none !important;
  color: var(--smq-muted) !important; font-size: 14px; font-weight: 400;
  cursor: pointer; padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none !important;
  letter-spacing: .01em;
}
.sm-expquiz__back:hover { color: var(--smq-text) !important; }

/* ══════════════════════════════════════════════════════════
   RESULTS WRAPPER
══════════════════════════════════════════════════════════ */
.sm-expquiz__results { padding: 0; }

.sm-expquiz__results-head {
  margin-bottom: 20px;
}
.sm-expquiz__eyebrow {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--smq-accent) !important; margin: 0 0 6px; font-weight: 700;
}
.sm-expquiz__results-title {
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--smq-text); line-height: 1.2; margin: 0 0 4px;
}
.sm-expquiz__results-subtitle { color: var(--smq-muted); font-size: 14px; margin: 0; }
.sm-expquiz__loading { color: var(--smq-muted); padding: 8px 0; font-size: 15px; }

/* Results grid — columns adapt to card count via data-cards attribute */
.sm-expquiz__results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}
/* 1 card — centred, max 400px wide so it doesn't stretch full width */
.sm-expquiz__results-grid[data-cards="1"] {
  grid-template-columns: minmax(0, 400px);
  justify-content: center;
}
/* 2 cards — two equal columns, centred */
.sm-expquiz__results-grid[data-cards="2"] {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
}
/* 3 cards — full 3-col (default, already set above) */
.sm-expquiz__results-grid[data-cards="3"] {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* ══════════════════════════════════════════════════════════
   BEST MATCH CARD — same layout as all cards, badge above image
══════════════════════════════════════════════════════════ */
.sm-expquiz-card--best {
  border-color: var(--smq-accent);
  box-shadow: 0 6px 24px rgba(232,117,26,.15);
}

/* Badge sits in its own row above the image, same width as card */
.sm-expquiz-card__match-badge {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--smq-accent-light);
  color: var(--smq-accent) !important;
  padding: 8px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(232,117,26,.15);
  /* No border-radius on top so it butts flush against card border-radius */
  border-radius: 0;
}



/* ══════════════════════════════════════════════════════════
   BUTTONS (shared)
══════════════════════════════════════════════════════════ */
.sm-expquiz-card__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  cursor: pointer; border: 0;
  text-decoration: none !important;
  transition: opacity .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
/* Primary filled button */
.sm-expquiz-card__btn--primary,
.sm-expquiz-card__btn--primary:link,
.sm-expquiz-card__btn--primary:visited,
.sm-expquiz-card__btn--primary:hover,
.sm-expquiz-card__btn--primary:focus,
.sm-expquiz-card__btn--primary:active {
  background: var(--smq-btn-bg) !important;
  color:      var(--smq-btn-text) !important;
  padding: 13px 26px;
  box-shadow: 0 4px 14px rgba(232,117,26,.28);
  text-decoration: none !important;
}
.sm-expquiz-card__btn--primary:hover,
.sm-expquiz-card__btn--primary:focus {
  opacity: .9;
  box-shadow: 0 6px 20px rgba(232,117,26,.38);
  outline: none !important;
}
/* Ghost outlined button */
.sm-expquiz-card__btn--ghost,
.sm-expquiz-card__btn--ghost:link,
.sm-expquiz-card__btn--ghost:visited,
.sm-expquiz-card__btn--ghost:hover,
.sm-expquiz-card__btn--ghost:focus,
.sm-expquiz-card__btn--ghost:active {
  background: #fff !important;
  color:      var(--smq-text) !important;
  padding: 12px 22px;
  border: 1.5px solid var(--smq-border) !important;
  text-decoration: none !important;
}
.sm-expquiz-card__btn--ghost:hover,
.sm-expquiz-card__btn--ghost:focus {
  border-color: var(--smq-accent) !important;
  color:        var(--smq-accent) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   STANDARD RESULT CARDS (2nd–6th)
══════════════════════════════════════════════════════════ */
.sm-expquiz-card {
  border: 1px solid var(--smq-border);
  border-radius: var(--smq-card-radius);
  background: #fff; overflow: hidden;
  box-shadow: 0 4px 14px rgba(33,28,24,.06);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sm-expquiz-card:not(.sm-expquiz-card--hero):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(33,28,24,.10);
}

.sm-expquiz-card__media {
  display: block; aspect-ratio: 3/2;
  background: #efeae2; overflow: hidden;
  color: transparent !important; line-height: 0;
  position: relative;  /* needed for tour badge overlay */
}

/* ACF Badge — overlaid on the card image (like homepage) */
.sm-expquiz-card__tour-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--smq-accent);
  color: #fff !important;
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em;
  padding: 5px 10px;
  border-radius: 4px;
  line-height: 1;
  pointer-events: none;
}
.sm-expquiz-card__media:hover,
.sm-expquiz-card__media:visited,
.sm-expquiz-card__media:focus {
  color: transparent !important; outline: none !important;
}
.sm-expquiz-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: 0; outline: 0; transition: transform .3s ease;
}
.sm-expquiz-card:not(.sm-expquiz-card--hero):hover .sm-expquiz-card__img {
  transform: scale(1.04);
}
.sm-expquiz-card__img--placeholder {
  width: 100%; height: 100%; display: block;
  background: linear-gradient(135deg,#ece6de,#f5f1eb);
}

.sm-expquiz-card__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; flex: 1;
}

/* Badges */
.sm-expquiz-card__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.sm-expquiz-card__badge {
  background: var(--smq-badge-bg);
  border: 1px solid var(--smq-border);
  border-radius: 999px; padding: 3px 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--smq-badge-text) !important;
  line-height: 1.6; white-space: nowrap;
}

/* Title */
.sm-expquiz-card__title {
  font-size: 15px !important; font-weight: 700; line-height: 1.25;
  margin: 0 0 8px;
  padding: 2% 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-transform: none !important;
}
.sm-expquiz-card__title a,
.sm-expquiz-card__title a:link,
.sm-expquiz-card__title a:visited {
  color: var(--smq-text) !important; text-decoration: none !important;
}
.sm-expquiz-card__title a:hover { color: var(--smq-accent) !important; }

/* Description */
.sm-expquiz-card__desc {
  color: var(--smq-muted); font-size: 13px; line-height: 1.55;
  margin: 0 0 10px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Meta list */
.sm-expquiz-card__meta {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sm-expquiz-card__meta li {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--smq-muted); line-height: 1.4;
}
.sm-expquiz-card__meta svg { flex-shrink: 0; color: var(--smq-accent); opacity: .8; }

/* Standard card CTA */
.sm-expquiz-card__actions { margin-top: auto; padding-top: 2px; }
.sm-expquiz-card__actions .sm-expquiz-card__btn--primary,
.sm-expquiz-card__actions .sm-expquiz-card__btn--primary:link,
.sm-expquiz-card__actions .sm-expquiz-card__btn--primary:visited,
.sm-expquiz-card__actions .sm-expquiz-card__btn--primary:hover,
.sm-expquiz-card__actions .sm-expquiz-card__btn--primary:focus,
.sm-expquiz-card__actions .sm-expquiz-card__btn--primary:active {
  display: block; width: 100%; text-align: center;
  padding: 10px 16px; font-size: 13px;
  box-shadow: none;
  background-color: #e8751a !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.sm-expquiz-card__actions .sm-expquiz-card__btn--primary:hover {
  box-shadow: 0 4px 12px rgba(232,117,26,.25);
  opacity: .9;
}

/* ── Secondary section heading ──────────────────────── */
.sm-expquiz__secondary-heading {
  font-size: 15px; font-weight: 600;
  color: var(--smq-muted);
  text-align: center;
  margin: 0 0 16px;
  letter-spacing: .01em;
}

/* ── View All Tours link ─────────────────────────────── */
.sm-expquiz__view-all {
  text-align: center;
  margin-top: 20px;
}
.sm-expquiz__view-all-link,
.sm-expquiz__view-all-link:link,
.sm-expquiz__view-all-link:visited {
  color: var(--smq-accent) !important;
  font-size: 14px; font-weight: 600;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 4px;
  transition: opacity .15s ease;
}
.sm-expquiz__view-all-link:hover { opacity: .75; }

/* ── Secondary section heading ──────────────────────── */
.sm-expquiz__secondary-heading {
  font-size: 15px; font-weight: 600;
  color: var(--smq-muted);
  text-align: center;
  margin: 24px 0 16px;
  letter-spacing: .01em;
}

/* ── Results footer: Start Over + View All ──────────── */
.sm-expquiz__results-footer {
  display: flex; justify-content: center;
  margin-top: 24px;
}
.sm-expquiz__restart-btn {
  appearance: none; border: 1.5px solid var(--smq-border) !important;
  background: #fff !important; color: var(--smq-text) !important;
  border-radius: 999px; padding: 10px 22px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s ease, color .15s ease;
}
.sm-expquiz__restart-btn:hover {
  border-color: var(--smq-accent) !important;
  color: var(--smq-accent) !important;
}

/* ── View All Tours link ─────────────────────────────── */
.sm-expquiz__view-all { text-align: center; margin-top: 16px; }
.sm-expquiz__view-all-link,
.sm-expquiz__view-all-link:link,
.sm-expquiz__view-all-link:visited {
  color: var(--smq-accent) !important;
  font-size: 14px; font-weight: 600;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 4px;
  transition: opacity .15s ease;
}
.sm-expquiz__view-all-link:hover { opacity: .75; }

/* ══════════════════════════════════════════════════════════
   HIRE CARD (self-guided results)
══════════════════════════════════════════════════════════ */
.sm-expquiz-card--hire {
  border-style: dashed;
  border-color: var(--smq-border);
}
.sm-expquiz-card__hire-icon {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0 8px;
  color: var(--smq-accent);
  background: var(--smq-surface);
}

/* Empty state */
.sm-expquiz-empty {
  background: #fff; border: 1px solid var(--smq-border);
  border-radius: 18px; padding: 32px; text-align: center;
}
.sm-expquiz-empty h4 { margin: 0 0 8px; font-size: 17px; color: var(--smq-text); }
.sm-expquiz-empty p  { color: var(--smq-muted); margin: 0; font-size: 14px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 3-card grid drops to 2 cols; 1 and 2 card grids stay as-is */
  .sm-expquiz__results-grid,
  .sm-expquiz__results-grid[data-cards="3"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sm-expquiz__results-grid[data-cards="1"] { grid-template-columns: minmax(0, 400px); }
  .sm-expquiz__results-grid[data-cards="2"] { grid-template-columns: repeat(2, minmax(0, 380px)); }
}
@media (max-width: 767px) {
  .sm-expquiz__card              { padding: 20px 16px 16px; border-radius: 18px; }
  .sm-expquiz__answers           { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  /* All grid sizes collapse to single column on mobile */
  .sm-expquiz__results-grid,
  .sm-expquiz__results-grid[data-cards="1"],
  .sm-expquiz__results-grid[data-cards="2"],
  .sm-expquiz__results-grid[data-cards="3"] { grid-template-columns: 1fr; justify-content: stretch; }
  .sm-expquiz__question          { font-size: 20px; }
  .sm-expquiz__answer            { min-height: 110px; padding: 16px 10px; }
  .sm-expquiz-card--hero         { padding: 22px 18px 24px; }
  .sm-expquiz-card__hero-title   { font-size: 20px; }
  .sm-expquiz-card__hero-actions { flex-direction: column; width: 100%; }
  .sm-expquiz-card__btn--primary,
  .sm-expquiz-card__btn--ghost   { width: 100%; justify-content: center; }
  .sm-expquiz-card__title        { font-size: 16px; }
}
@media (max-width: 480px) {
  .sm-expquiz__answers { grid-template-columns: 1fr; }
}