/**
 * Vimeo Interactive Quiz Player – Stylesheet
 * Styled to match Portobello-RMF brand:
 *   Font:    Plus Jakarta Sans
 *   Blue:    #7DBCE6  (brand button colour)
 *   Navy:    #050C16  (headings / dark UI)
 *   Radius:  30px     (pill buttons, matching site)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-container {
  /* Brand colours */
  --quiz-blue:        #7DBCE6;
  --quiz-blue-dark:   #5a9dc8;
  --quiz-blue-light:  #ebf5fb;
  --quiz-navy:        #050C16;
  --quiz-navy-mid:    #0d1f33;
  --quiz-green:       #22c55e;
  --quiz-green-bg:    #dcfce7;
  --quiz-green-text:  #166534;
  --quiz-red:         #ef4444;
  --quiz-red-bg:      #fee2e2;
  --quiz-red-text:    #991b1b;
  --quiz-amber:       #f59e0b;

  /* Neutrals */
  --quiz-bg:          #ffffff;
  --quiz-surface:     #f8fafc;
  --quiz-border:      #e2e8f0;
  --quiz-text:        #050C16;
  --quiz-muted:       #6e6e6e;

  /* Typography – matches site */
  --quiz-font:        "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --quiz-radius:      16px;
  --quiz-radius-btn:  30px;   /* pill shape matching site buttons */
  --quiz-shadow:      0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --quiz-shadow-lg:   0 20px 40px rgba(5,12,22,.25);

  /* Animation */
  --quiz-dur:         0.25s;
  --quiz-ease:        cubic-bezier(0.4, 0, 0.2, 1);

  position:    relative;
  max-width:   100%;
  margin:      0 auto;
  font-family: var(--quiz-font);
  color:       var(--quiz-text);
  line-height: 1.5;
  box-sizing:  border-box;
}

.vimeo-quiz-container *,
.vimeo-quiz-container *::before,
.vimeo-quiz-container *::after {
  box-sizing: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. VIDEO WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-video-wrapper {
  position:      relative;
  width:         100%;
  overflow:      hidden;
  border-radius: var(--quiz-radius);
  box-shadow:    var(--quiz-shadow);
  background:    #000;
}

.vimeo-quiz-iframe-container {
  position: relative;
  overflow: hidden;
  /* Modern aspect-ratio properly communicates height to Elementor's flex
     layout — the old padding-bottom:56.25%;height:0 trick reports height:0
     to the parent, causing the footer to collapse over the video. */
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* Fallback for very old browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1) {
  .vimeo-quiz-iframe-container {
    padding-bottom: 56.25%;
    height: 0;
  }
}

.vimeo-quiz-iframe-container iframe {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. TIMESTAMP MARKERS STRIP
   Rendered at the bottom of the video by JS once duration is known.
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-timeline {
  position:        relative;
  width:           100%;
  height:          48px;
  background:      #f1f5f9;
  border-radius:   0 0 var(--quiz-radius) var(--quiz-radius);
  display:         flex;
  align-items:     center;
  padding:         0 16px;
  pointer-events:  none;
  user-select:     none;
  -webkit-user-select: none;
}

/* The actual horizontal track */
.vimeo-quiz-timeline-bar {
  position:      relative;
  width:         100%;
  height:        3px;
  background:    #cbd5e1;
  border-radius: 9999px;
}

/* Individual marker wrapper */
.vimeo-quiz-timeline-marker {
  position:        absolute;
  top:             50%;
  transform:       translate(-50%, -50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  pointer-events:  auto;
  cursor:          pointer;
}

/* Dot on the track */
.vimeo-quiz-timeline-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--quiz-blue);
  border:        2px solid rgba(255,255,255,0.9);
  transition:    transform 0.2s, background 0.2s;
  box-shadow:    0 1px 4px rgba(0,0,0,0.4);
}

.vimeo-quiz-timeline-marker:hover .vimeo-quiz-timeline-dot {
  transform: scale(1.4);
}

/* Answered = green dot */
.vimeo-quiz-timeline-marker--answered .vimeo-quiz-timeline-dot {
  background: var(--quiz-green);
}

/* Time label above the dot */
.vimeo-quiz-timeline-label {
  position:    absolute;
  bottom:      22px;
  font-size:   10px;
  font-weight: 600;
  font-family: var(--quiz-font);
  color:       var(--quiz-navy);
  white-space: nowrap;
  pointer-events: none;
  opacity:     0;
  transform:   translateY(4px);
  transition:  opacity 0.2s, transform 0.2s;
  background:  #ffffff;
  padding:     2px 6px;
  border-radius: 4px;
  box-shadow:  0 1px 4px rgba(0,0,0,0.15);
}

.vimeo-quiz-timeline-marker:hover .vimeo-quiz-timeline-label {
  opacity:   1;
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. QUESTION OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-overlay {
  /* display:none removes the element from the touch/pointer event stack
     entirely — critical for mobile browsers that ignore pointer-events:none
     on elements overlaying an iframe. */
  display:         none;
  position:        absolute;
  inset:           0;
  align-items:     center;
  justify-content: center;
  background:      rgba(5, 12, 22, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:         20;
}

.vimeo-quiz-overlay--visible {
  display:   flex;
  animation: quizOverlayIn var(--quiz-dur) var(--quiz-ease) both;
}

@keyframes quizOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vimeo-quiz-overlay-inner {
  background:    var(--quiz-bg);
  border-radius: var(--quiz-radius);
  padding:       28px 32px;
  max-width:     100%;
  width:         calc(100% - 40px);
  max-height:    90%;
  overflow-y:    auto;
  overflow-x:    hidden;
  box-shadow:    var(--quiz-shadow-lg);
  animation:     quizSlideUp var(--quiz-dur) var(--quiz-ease) both;
  text-align:    center;
}

@keyframes quizSlideUp {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-progress {
  margin-bottom: 20px;
}

.vimeo-quiz-progress-text {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  color:          var(--quiz-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  8px;
  font-family:    var(--quiz-font);
}

.vimeo-quiz-progress-bar {
  height:        5px;
  background:    var(--quiz-border);
  border-radius: 9999px;
  overflow:      hidden;
}

.vimeo-quiz-progress-fill {
  height:        100%;
  background:    var(--quiz-blue);
  border-radius: 9999px;
  transition:    width 0.4s var(--quiz-ease);
  width:         0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. QUESTION TEXT
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-question-text {
  font-size:   18px;
  font-weight: 700;
  line-height: 1.45;
  color:       var(--quiz-navy);
  margin:      0 0 22px;
  font-family: var(--quiz-font);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. ANSWER OPTION BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Use full selector chain for maximum specificity to beat theme overrides */
.vimeo-quiz-container .vimeo-quiz-overlay-inner .vimeo-quiz-options {
  display:        flex !important;
  flex-direction: column !important;
  gap:            10px !important;
  margin-bottom:  18px !important;
  width:          100% !important;
  overflow-x:     hidden !important;
}

.vimeo-quiz-container .vimeo-quiz-overlay-inner .vimeo-quiz-options .vimeo-quiz-option-btn {
  display:        block !important;
  width:          100% !important;
  max-width:      100% !important;
  padding:        14px 20px !important;
  background:     var(--quiz-blue) !important;
  border:         2px solid var(--quiz-blue) !important;
  border-radius:  var(--quiz-radius-btn) !important;  /* pill shape */
  font-size:      14px !important;
  font-family:    var(--quiz-font) !important;
  font-weight:    600 !important;
  color:          #ffffff !important;
  text-align:     center !important;
  cursor:         pointer !important;
  white-space:    normal !important;
  word-break:     break-word !important;
  overflow-wrap:  break-word !important;
  overflow:       hidden !important;
  height:         auto !important;
  min-height:     48px !important;
  line-height:    1.4 !important;
  box-sizing:     border-box !important;
  transition:     background 0.15s, border-color 0.15s, transform 0.1s !important;
  letter-spacing: 0.01em !important;
}

.vimeo-quiz-container .vimeo-quiz-overlay-inner .vimeo-quiz-options .vimeo-quiz-option-btn:hover:not(:disabled) {
  background:   var(--quiz-blue-dark) !important;
  border-color: var(--quiz-blue-dark) !important;
  transform:    translateY(-1px) !important;
}

.vimeo-quiz-container .vimeo-quiz-overlay-inner .vimeo-quiz-options .vimeo-quiz-option-btn:focus-visible {
  outline: none;
}

.vimeo-quiz-container .vimeo-quiz-overlay-inner .vimeo-quiz-options .vimeo-quiz-option-btn:active:not(:disabled) {
  transform: scale(0.985) !important;
}

.vimeo-quiz-container .vimeo-quiz-overlay-inner .vimeo-quiz-options .vimeo-quiz-option-btn:disabled {
  cursor: default !important;
}

/* ── Post-answer states ──────────────────────────────────────────────────── */

.vimeo-quiz-option--correct {
  background:   var(--quiz-green) !important;
  border-color: var(--quiz-green) !important;
  color:        #ffffff !important;
}

.vimeo-quiz-option--incorrect {
  background:   var(--quiz-red) !important;
  border-color: var(--quiz-red) !important;
  color:        #ffffff !important;
}

.vimeo-quiz-option--reveal {
  background:   var(--quiz-green) !important;
  border-color: var(--quiz-green) !important;
  color:        #ffffff !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. FEEDBACK MESSAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-feedback {
  font-size:     14px;
  font-weight:   600;
  padding:       12px 16px;
  border-radius: var(--quiz-radius-btn);
  margin-bottom: 14px;
  font-family:   var(--quiz-font);
  animation:     quizFadeIn var(--quiz-dur) var(--quiz-ease);
}

.vimeo-quiz-feedback--correct {
  background: var(--quiz-green-bg);
  color:      var(--quiz-green-text);
  border:     1px solid #86efac;
}

.vimeo-quiz-feedback--incorrect {
  background: var(--quiz-red-bg);
  color:      var(--quiz-red-text);
  border:     1px solid #fca5a5;
}

@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. CONTINUE & RETRY BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-continue-btn,
.vimeo-quiz-retry-btn {
  display:         block;
  width:           100%;
  padding:         14px 20px;
  border:          none;
  border-radius:   var(--quiz-radius-btn);
  font-size:       15px;
  font-weight:     700;
  font-family:     var(--quiz-font);
  cursor:          pointer;
  letter-spacing:  0.02em;
  transition:      background var(--quiz-dur), transform 0.1s;
  animation:       quizFadeIn 0.3s var(--quiz-ease);
}

/* Continue = brand navy */
.vimeo-quiz-continue-btn {
  background: var(--quiz-navy);
  color:      #ffffff;
}

.vimeo-quiz-continue-btn:hover {
  background: var(--quiz-navy-mid);
}

/* Retry = outlined blue */
.vimeo-quiz-retry-btn {
  background: transparent;
  color:      var(--quiz-blue-dark);
  border:     2px solid var(--quiz-blue);
  margin-top: 8px;
}

.vimeo-quiz-retry-btn:hover {
  background: var(--quiz-blue-light);
}

.vimeo-quiz-continue-btn:focus-visible,
.vimeo-quiz-retry-btn:focus-visible {
  outline:        3px solid var(--quiz-blue);
  outline-offset: 3px;
}

.vimeo-quiz-continue-btn:active,
.vimeo-quiz-retry-btn:active {
  transform: scale(0.985);
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. END SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-end-screen {
  background:    var(--quiz-bg);
  border:        2px solid #7dbce6;
  border-radius: var(--quiz-radius);
  margin-top:    24px;
  overflow:      hidden;
  opacity:       0;
  transform:     translateY(16px);
  transition:    opacity 0.4s var(--quiz-ease), transform 0.4s var(--quiz-ease);
}

.vimeo-quiz-end-screen--visible {
  opacity:   1;
  transform: translateY(0);
}

.vimeo-quiz-score-summary {
  padding:    36px 32px;
  text-align: center;
  background: linear-gradient(135deg, var(--quiz-navy) 0%, var(--quiz-navy-mid) 100%);
  color:      #ffffff;
}

.vimeo-quiz-score-title {
  font-size:   24px;
  font-weight: 700;
  margin:      0 0 8px;
  color:       #ffffff;
  font-family: var(--quiz-font);
}

.vimeo-quiz-score-detail {
  color:     rgba(255,255,255,0.75);
  margin:    0;
  font-size: 15px;
}

/* ── Score circle ─────────────────────────────────────────────────────────── */

.vimeo-quiz-score-circle {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  width:           120px;
  height:          120px;
  border-radius:   50%;
  border:          4px solid var(--quiz-blue);
  margin-bottom:   20px;
  transition:      border-color 0.3s;
}

.vimeo-quiz-score--high   { border-color: var(--quiz-green); }
.vimeo-quiz-score--medium { border-color: var(--quiz-amber); }
.vimeo-quiz-score--low    { border-color: var(--quiz-red);   }

.vimeo-quiz-score-value {
  font-size:   30px;
  font-weight: 800;
  line-height: 1;
  color:       var(--quiz-blue);
  font-family: var(--quiz-font);
}

.vimeo-quiz-score--high   .vimeo-quiz-score-value { color: var(--quiz-green); }
.vimeo-quiz-score--medium .vimeo-quiz-score-value { color: var(--quiz-amber); }
.vimeo-quiz-score--low    .vimeo-quiz-score-value { color: var(--quiz-red);   }

.vimeo-quiz-score-label {
  font-size:       11px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  color:           rgba(255,255,255,0.6);
  margin-top:      4px;
  font-family:     var(--quiz-font);
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. SUBMISSION FORM
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-form {
  padding: 32px;
}

.vimeo-quiz-form h3 {
  font-size:   22px;
  font-weight: 700;
  margin:      0 0 6px;
  color:       var(--quiz-navy);
  font-family: var(--quiz-font);
}

.vimeo-quiz-form > p {
  color:       var(--quiz-muted);
  margin:      0 0 24px;
  font-size:   14px;
}

.vimeo-quiz-form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.vimeo-quiz-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  16px;
}

.vimeo-quiz-field label {
  font-size:   13px;
  font-weight: 700;
  color:       var(--quiz-navy);
  font-family: var(--quiz-font);
}

.vimeo-quiz-required { color: var(--quiz-red); }

.vimeo-quiz-field input {
  padding:            12px 16px !important;
  border:             2px solid #7dbce6 !important;
  border-radius:      var(--quiz-radius-btn) !important;
  font-size:          14px !important;
  font-family:        var(--quiz-font) !important;
  color:              var(--quiz-navy) !important;
  background:         #ffffff !important;
  width:              100% !important;
  box-sizing:         border-box !important;
  transition:         border-color var(--quiz-dur), box-shadow var(--quiz-dur);
  -webkit-appearance: none;
}

.vimeo-quiz-field input:focus {
  outline:      none;
  border-color: var(--quiz-blue);
  box-shadow:   0 0 0 3px rgba(125, 188, 230, 0.2);
}

.vimeo-quiz-field input[aria-invalid="true"] {
  border-color: var(--quiz-red);
}

.vimeo-quiz-field input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.vimeo-quiz-field-error {
  font-size:  12px;
  color:      var(--quiz-red);
  min-height: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. SUBMIT BUTTON & SPINNER
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-submit-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         16px 35px;
  width:           100%;
  background:      var(--quiz-blue);
  color:           #ffffff;
  border:          none;
  border-radius:   var(--quiz-radius-btn);
  font-size:       15px;
  font-weight:     700;
  font-family:     var(--quiz-font);
  cursor:          pointer;
  margin-top:      8px;
  letter-spacing:  0.02em;
  transition:      background var(--quiz-dur), transform 0.1s;
}

.vimeo-quiz-submit-btn:hover:not(:disabled) {
  background: var(--quiz-blue-dark);
}

.vimeo-quiz-submit-btn:focus-visible {
  outline:        3px solid var(--quiz-navy);
  outline-offset: 3px;
}

.vimeo-quiz-submit-btn:active:not(:disabled) {
  transform: scale(0.985);
}

.vimeo-quiz-submit-btn:disabled {
  opacity: 0.65;
  cursor:  not-allowed;
}

.vimeo-quiz-submit-spinner {
  display:          inline-block;
  width:            18px;
  height:           18px;
  border:           3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius:    50%;
  animation:        quizSpin 0.65s linear infinite;
  flex-shrink:      0;
}

@keyframes quizSpin {
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. FORM FEEDBACK MESSAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-form-message {
  margin-top:    16px;
  padding:       14px 18px;
  border-radius: var(--quiz-radius-btn);
  font-size:     14px;
  font-weight:   600;
  font-family:   var(--quiz-font);
  animation:     quizFadeIn 0.3s var(--quiz-ease);
}

.vimeo-quiz-form-message--success {
  background: var(--quiz-green-bg);
  color:      var(--quiz-green-text);
  border:     1px solid #86efac;
}

.vimeo-quiz-form-message--error {
  background: var(--quiz-red-bg);
  color:      var(--quiz-red-text);
  border:     1px solid #fca5a5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. SHORTCODE ERROR STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.vimeo-quiz-error {
  padding:       14px 18px;
  background:    var(--quiz-red-bg);
  border:        1px solid #fca5a5;
  border-radius: 8px;
  color:         var(--quiz-red-text);
  font-weight:   500;
  font-family:   var(--quiz-font);
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. MOBILE – BOTTOM SHEET LIGHTBOX
   On mobile the question overlay becomes a bottom sheet that slides up
   over the (dimmed, paused) video.  The user can see the video context
   behind the card, which is the standard native mobile pattern.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Backdrop: full-screen fixed on mobile, card docks to bottom ─────── */
  .vimeo-quiz-overlay {
    position:            fixed;
    inset:               0;
    z-index:             99999;
    align-items:         flex-end;
    justify-content:     center;
    padding:             0;
    background:          rgba(5, 12, 22, 0.65);
    backdrop-filter:     blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  /* ── Question card – slides up from bottom ───────────────────────────────
     Rounded top corners, white card, scrollable when content overflows. */
  .vimeo-quiz-overlay-inner {
    width:         100%;
    max-width:     100%;
    max-height:    82vh;
    overflow-y:    auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 24px 24px 0 0;
    padding:       12px 20px 36px;  /* 36px bottom = clears iPhone home bar */
    box-shadow:    0 -8px 40px rgba(5, 12, 22, 0.35);
    animation:     quizSheetUp 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
    text-align:    center;
  }

  @keyframes quizSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
  }

  /* Drag-handle pill at the top of the card */
  .vimeo-quiz-overlay-inner::before {
    content:       '';
    display:       block;
    width:         40px;
    height:        4px;
    background:    #d1d5db;
    border-radius: 9999px;
    margin:        0 auto 20px;
  }

  /* ── Progress ────────────────────────────────────────────────────────── */
  .vimeo-quiz-progress { margin-bottom: 16px; }

  /* ── Question text ───────────────────────────────────────────────────── */
  .vimeo-quiz-question-text {
    font-size:     16px;
    margin-bottom: 16px;
  }

  /* ── Answer buttons ──────────────────────────────────────────────────── */
  .vimeo-quiz-container .vimeo-quiz-overlay-inner .vimeo-quiz-options {
    gap: 10px !important;
  }

  .vimeo-quiz-container .vimeo-quiz-overlay-inner .vimeo-quiz-options .vimeo-quiz-option-btn {
    font-size:  15px !important;
    padding:    15px 16px !important;
    min-height: 54px !important;
  }

  /* ── Continue & Retry ────────────────────────────────────────────────── */
  .vimeo-quiz-continue-btn,
  .vimeo-quiz-retry-btn {
    min-height: 54px;
    font-size:  15px;
    padding:    15px 20px;
  }

  /* ── Timeline: hidden on mobile — too small to tap and causes interaction issues ── */
  .vimeo-quiz-timeline { display: none !important; }


  /* ═════════════════════════════════════════════════════════════════════
     END SCREEN & FORM  (appears below the video as a regular block)
     ═════════════════════════════════════════════════════════════════════ */

  .vimeo-quiz-score-summary { padding: 28px 20px; }

  .vimeo-quiz-score-circle {
    width:  88px;
    height: 88px;
  }

  .vimeo-quiz-score-value  { font-size: 24px; }
  .vimeo-quiz-score-title  { font-size: 20px; }
  .vimeo-quiz-score-detail { font-size: 14px; }

  /* Single-column form */
  .vimeo-quiz-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vimeo-quiz-form   { padding: 24px 16px; }
  .vimeo-quiz-form h3 { font-size: 18px; }
  .vimeo-quiz-form > p { font-size: 13px; margin-bottom: 20px; }

  /* font-size ≥ 16px prevents iOS Safari zooming on input focus */
  .vimeo-quiz-field input {
    font-size:  16px !important;
    min-height: 54px !important;
    padding:    15px 16px !important;
  }

  .vimeo-quiz-submit-btn {
    font-size:  16px;
    min-height: 54px;
    padding:    15px 20px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .vimeo-quiz-overlay,
  .vimeo-quiz-overlay-inner,
  .vimeo-quiz-end-screen,
  .vimeo-quiz-continue-btn,
  .vimeo-quiz-retry-btn,
  .vimeo-quiz-feedback,
  .vimeo-quiz-form-message,
  .vimeo-quiz-progress-fill {
    animation:  none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. THEME & ELEMENTOR COMPATIBILITY
   These rules override common theme resets and fix Elementor flex layout
   collapsing the quiz widget height on mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Prevent themes (e.g. Hello Elementor) forcing nowrap on buttons */
.vimeo-quiz-container .vimeo-quiz-option-btn,
.vimeo-quiz-container button.vimeo-quiz-option-btn {
  white-space:   normal     !important;
  word-break:    break-word !important;
  overflow-wrap: break-word !important;
  overflow:      hidden     !important;
  height:        auto       !important;
  max-width:     100%       !important;
  text-align:    center     !important;
  line-height:   1.45       !important;
  box-sizing:    border-box !important;
}

.vimeo-quiz-container .vimeo-quiz-continue-btn,
.vimeo-quiz-container .vimeo-quiz-retry-btn,
.vimeo-quiz-container .vimeo-quiz-submit-btn {
  white-space: normal !important;
}

/* Elementor spacer widgets are decorative and must never
   intercept taps or clicks on content beneath them */
.elementor-spacer,
.elementor-spacer-inner {
  pointer-events: none !important;
}

/* Fix Elementor flex container collapsing the quiz widget height.
   Elementor sets height:100% on .elementor-widget-container which
   creates a circular height reference that resolves to zero.
   Setting height:auto on the full wrapper chain breaks that cycle
   while keeping width:100% so the widget stays full-width. */
.elementor-widget:has(.vimeo-quiz-container),
.elementor-widget-shortcode:has(.vimeo-quiz-container),
.elementor-widget-container:has(.vimeo-quiz-container),
.elementor-shortcode:has(.vimeo-quiz-container) {
  height:    auto !important;
  width:     100% !important;
  max-width: 100% !important;
}

/* Input field borders */
.vimeo-quiz-container .vimeo-quiz-field input {
  border:             2px solid #7dbce6 !important;
  border-radius:      30px              !important;
  background:         #ffffff           !important;
  padding:            12px 16px         !important;
  width:              100%              !important;
  box-sizing:         border-box        !important;
  -webkit-appearance: none              !important;
}