/* =====================================================================
   Quizzle – Frontend CSS (cleanup)
   Source: quiz.css provided by Cat (consolidated + deduped)
   Notes:
   - Keeps backward compatibility with older classes (.quizzle-choice--image, .quizzle-endcard…)
   - Overrides inline-PHP borders/padding on label.quizzle-choice where needed
   ===================================================================== */

/* ---- Design tokens (tweak here) ------------------------------------- */
:root{
  --qz-radius: 14px;
  --qz-radius-sm: 10px;
  --qz-border: rgba(0,0,0,.08);
  --qz-border-strong: rgba(0,0,0,.18);
  --qz-bg: rgba(0,0,0,.02);
  --qz-bg-soft: rgba(0,0,0,.015);
  --qz-hover-shadow: 0 8px 18px rgba(0,0,0,.10);
  --qz-green: 46, 125, 50;
  --qz-red: 198, 40, 40;

  /* Focus ring color (was blue). Set to a neutral grey by default. */
  --qz-focus: 0, 0, 0;
}

/* =====================================================================
   Feedback (status + explanation)
   ===================================================================== */
.quizzle-feedback{
  margin-top: 1rem;
  padding: 1rem;
  border-radius: .75rem;
  border: 1px solid rgba(0,0,0,.12);
}

.quizzle-feedback__status{
  font-weight: 800;
  margin-bottom: .5rem;
  font-size: 1.05rem;
}
.quizzle-feedback__status[data-status="correct"]::before{ content:"✅ "; }
.quizzle-feedback__status[data-status="incorrect"]::before{ content:"❌ "; }

.quizzle-feedback__body{ line-height: 1.55; }

.quizzle-feedback__explanation{
  margin-top: .75rem;
  padding: .75rem .9rem;
  border-radius: .75rem;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  border-left: 4px solid rgba(0,0,0,.25);
}

.quizzle-feedback__meta{
  margin-top: .5rem;
  opacity: .85;
  font-size: .95rem;
}

.quizzle-btn--busy{
  opacity: .75;
  pointer-events: none;
}

/* =====================================================================
   Question card / progress
   ===================================================================== */
.quizzle-card{ box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.quizzle-q{ font-size: 1.05rem; }
.quizzle-q h2, .quizzle-q h3{ margin: 0 0 .75rem 0; }
#qzProgress{ font-weight: 800; }

.quizzle-helper{
  margin-top: .35rem;
  opacity: .8;
  font-size: .95rem;
}

/* =====================================================================
   Actions (sticky on mobile)
   ===================================================================== */
.quizzle-actions{
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  padding: 10px 0;
  margin-top: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  gap: 10px;
}

.quizzle-actions button{
  flex: 1 1 auto;
  padding: 12px 16px;
  font-size: 1rem;
  border-radius: 10px;
}

.quizzle-actions button[disabled]{ opacity: .5; cursor: not-allowed; }

@media (min-width: 768px){
  .quizzle-actions{
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    border-top: 0;
  }
  .quizzle-actions button{ flex: 0 0 auto; }
}

/* =====================================================================
   Choices (generic / legacy)
   ===================================================================== */
.quizzle-choice{ padding: 14px; }
.quizzle-choice:hover{ border-color: rgba(0,0,0,.25); }

/* Legacy JS selected class */
.quizzle-choice.is-selected{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* =====================================================================
   MCQ – image choices (legacy structure: .quizzle-choice--image)
   ===================================================================== */
.quizzle-choice--image{ display:block; }
.quizzle-choice--image input{ margin-top: 10px; }

.quizzle-choice--image .quizzle-choice-card{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.quizzle-choice--image .quizzle-choice-img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
}

.quizzle-choice--image .quizzle-choice-caption{
  font-size: .95rem;
  opacity: .9;
}

/* Image grid density */
.quizzle-choices--images{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 520px){
  .quizzle-choices--images{ grid-template-columns: 1fr; }
  .quizzle-choices:has(.quizzle-choice--image){ grid-template-columns: 1fr; }
}

/* =====================================================================
   MCQ – image choices (new UX: label.quizzle-choice + .quizzle-choice-card)
   ===================================================================== */

/* Override inline-PHP borders/padding on the LABEL wrapper */
.quizzle label.quizzle-choice{
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  display: block;
  height: 100%;
}

/* Ensure the image grid stretches cards nicely */
.quizzle .quizzle-choices.quizzle-choices--images{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 600px){
  .quizzle .quizzle-choices.quizzle-choices--images{ grid-template-columns: 1fr; }
}

/* Card shell */
.quizzle .quizzle-choices--images .quizzle-choice-card{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr; /* media / caption */
  gap: 10px;

  border-radius: var(--qz-radius);
  padding: 12px;

  background: var(--qz-bg);
  box-shadow: 0 0 0 1px var(--qz-border);
  transition: box-shadow .2s ease, transform .15s ease, background .2s ease;
}

/* Hover: shadow only (no extra border stacking) */
.quizzle label.quizzle-choice:hover .quizzle-choice-card{
  box-shadow: var(--qz-hover-shadow);
  transform: translateY(-2px);
}

/* Media slot placeholder (keeps cards aligned even without image) */
.quizzle .quizzle-choices--images .quizzle-choice-card::before{
  content:"";
  display:block;
  width:100%;
  height: clamp(110px, 16vw, 160px);
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  grid-row: 1;
}

/* Image fills the same slot */
.quizzle .quizzle-choices--images .quizzle-choice-card .quizzle-choice-img{
  grid-row: 1;
  width: 100% !important;
  height: clamp(110px, 16vw, 160px);
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* If an image exists, hide placeholder */
.quizzle .quizzle-choices--images .quizzle-choice-card:has(.quizzle-choice-img)::before{
  display:none;
}

.quizzle .quizzle-choices--images .quizzle-choice-card .quizzle-choice-caption{
  grid-row: 2;
  min-height: 2.6em;
  line-height: 1.25;
  font-weight: 600;
  opacity: .9;
}

/* States (border-only, to avoid shadow+border stacking) */
.quizzle label.quizzle-choice.selected .quizzle-choice-card,
.quizzle label.quizzle-choice:has(input:checked) .quizzle-choice-card,
.quizzle .quizzle-choice-card.selected{
  background: rgba(var(--qz-green), .06);
  box-shadow: 0 0 0 1px rgba(var(--qz-green), .40);
  transform: none;
}

.quizzle label.quizzle-choice.correct .quizzle-choice-card,
.quizzle .quizzle-choice-card.correct{
  background: rgba(var(--qz-green), .10);
  box-shadow: 0 0 0 1px rgba(var(--qz-green), .65);
}

.quizzle label.quizzle-choice.incorrect .quizzle-choice-card,
.quizzle .quizzle-choice-card.incorrect{
  background: rgba(var(--qz-red), .09);
  box-shadow: 0 0 0 1px rgba(var(--qz-red), .55);
}

/* Focus handling:
   - remove default outlines
   - apply an explicit focus ring ONLY for keyboard focus */
.quizzle label.quizzle-choice,
.quizzle label.quizzle-choice *{
  outline: none !important;
}

/* Keyboard focus ring (change --qz-focus to taste) */
.quizzle label.quizzle-choice:has(input:focus-visible) .quizzle-choice-card{
  box-shadow: 0 0 0 2px rgba(var(--qz-focus), .25);
}

/* =====================================================================
   MCQ – text-only choices (radio + label line, spacing, light frame)
   ===================================================================== */
.quizzle .quizzle-choices:not(.quizzle-choices--images){
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice{
  display: flex;
  align-items: center;
  gap: 10px;

  border-radius: var(--qz-radius-sm);
  padding: 8px 12px !important;

  background: var(--qz-bg-soft);
  box-shadow: 0 0 0 1px var(--qz-border);
  transition: background .2s ease, box-shadow .2s ease;
}

.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice:hover{
  background: rgba(0,0,0,.035);
}

.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice input[type="radio"]{
  margin: 0 !important;
  flex: 0 0 auto;
}

.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice .quizzle-choice-card,
.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice .quizzle-choice-caption{
  flex: 1 1 auto;
}

/* Text states */
.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice.selected,
.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice:has(input:checked){
  background: rgba(var(--qz-green), .05);
  box-shadow: 0 0 0 1px rgba(var(--qz-green), .30);
}

.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice.correct{
  background: rgba(var(--qz-green), .10);
  box-shadow: 0 0 0 1px rgba(var(--qz-green), .55);
}

.quizzle .quizzle-choices:not(.quizzle-choices--images) label.quizzle-choice.incorrect{
  background: rgba(var(--qz-red), .08);
  box-shadow: 0 0 0 1px rgba(var(--qz-red), .45);
}

/* =====================================================================
   End screen (supports both legacy + BEM)
   ===================================================================== */

/* Legacy container */
.quizzle-endcard{
  display: grid;
  gap: 12px;
  border-top: 1px dashed rgba(0,0,0,.15);
  margin-top: 14px;
  padding-top: 14px;
}

/* Legacy scores grid */
.quizzle-scores,
.quizzle-endcard__scores{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}
@media (max-width: 520px){
  .quizzle-scores,
  .quizzle-endcard__scores{ grid-template-columns: 1fr; }
}

/* Shared scorebox */
.quizzle-scorebox{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--qz-radius);
  padding: 12px;
  background: rgba(0,0,0,.02);
  text-align: center;
}
.quizzle-scorebox strong{ font-size: 1.3rem; display:block; }
.quizzle-scorebox__label{ opacity:.8; font-weight: 700; font-size: .95rem; }
.quizzle-scorebox__value{ font-weight: 900; font-size: 1.35rem; margin-top: 2px; }
.quizzle-scorebox__sub{ margin-top: 6px; opacity:.85; font-weight: 700; font-size: .95rem; }

.quizzle-cert{
  margin-top: 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--qz-radius);
  padding: 10px 12px;
  background: rgba(255,255,255,.6);
}
.quizzle-cert summary{
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.quizzle-cert summary::-webkit-details-marker{ display:none; }
.quizzle-cert__row{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.quizzle-cert__row input{
  flex: 1 1 180px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.18);
}
.quizzle-cert__row button{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 12px;
}

/* BEM final screen */
.quizzle-end{
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 26px rgba(0,0,0,.08), inset 0 3px 0 rgba(13,110,253,.22);
}
.quizzle-end__header{ text-align:center; margin-bottom:10px; }
.quizzle-end__title{ margin:0; font-weight:900; letter-spacing:.2px; font-size:1.35rem; }
.quizzle-end__section{ margin-top:14px; padding-top:14px; border-top:1px dashed rgba(0,0,0,.18); }
.quizzle-end__sectionTitle{ font-weight:950; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.quizzle-end__finalScore{ margin:10px 0 6px; text-align:center; }
.quizzle-end__finalScoreStrong{ display:inline-block; font-size:1.7rem; line-height:1.2; font-weight:950; }
.quizzle-end__subvalue{ margin-top: 6px; opacity: .85; font-weight: 750; font-size: .95rem; }
.quizzle-end__appreciation{ margin:10px 0 0; text-align:center; font-weight:750; opacity:.9; }
.quizzle-end__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px){ .quizzle-end__grid{ grid-template-columns:1fr; } }

.quizzle-end__badge{
  display:inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  font-weight: 900;
  font-size: .95rem;
}
.quizzle-end__meta{
  margin: 10px 0 0;
  opacity: .82;
  font-weight: 650;
  text-align: center;
}

/* Subtle state styling */
.quizzle-end--top,
.quizzle-end--good,
.quizzle-end--ok,
.quizzle-end--try{ border-width: 2px; }
@media (max-width:480px){
  .quizzle-end{ padding:14px 12px; border-radius:16px; }
  .quizzle-end__finalScoreStrong{ font-size:1.5rem; }
}


/* =========================================================
   Bouton certificat – fin de quiz
   ========================================================= */

.quizzle-end__btn.quizzle-end__btn--cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
margin:10px 0;
  padding: 10px 16px;
  border-radius: 12px;

  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.18);

  font-weight: 600;
  text-decoration: none;
  cursor: pointer;

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

/* Hover */
.quizzle-end__btn.quizzle-end__btn--cert:hover {
  background: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Active (clic) */
.quizzle-end__btn.quizzle-end__btn--cert:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Focus clavier */
.quizzle-end__btn.quizzle-end__btn--cert:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--qz-focus), 0.35);
}



/* =========================================================
   End screen – mobile UX polish (0.8.2.80+)
   ========================================================= */

.quizzle-end__certRow{
  display:flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.quizzle-end__certField{ flex: 1 1 240px; min-width: 220px; }
.quizzle-end__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
}
.quizzle-end__note{ margin: 10px 0 0; opacity: .8; font-size: .95rem; }

.quizzle-end__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.quizzle-end__actions .quizzle-end__btn{ min-width: 190px; }

/* Mobile: stack end-screen actions + certificate row (avoids odd left/right alignment + big gaps) */
@media (max-width: 520px){
  .quizzle-end__actions{ flex-direction: column; }
  .quizzle-end__btn{
  /* Neutralise Joomla template button styles on end-screen actions */
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 14px;

  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  color: inherit;

  font-family: inherit;
  font-weight: 850;
  letter-spacing: .15px;

  cursor: pointer;
  text-decoration: none;

  transition: background .2s ease, box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}


  .quizzle-end__certRow{ flex-direction: column; align-items: stretch; }
  .quizzle-end__certField{ flex: 1 1 auto; min-width: 0; width: 100%; }
  .quizzle-end__btn--cert{ width: 100%; }
}

.quizzle-end__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.04);
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}
.quizzle-end__btn:hover{
  background: rgba(0,0,0,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  transform: translateY(-1px);
}
.quizzle-end__btn:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.10); }

.quizzle-end__btn[disabled],
.quizzle-end__btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
.quizzle-end__btn--primary{ background: rgba(13,110,253,.14); border-color: rgba(13,110,253,.38); color: rgba(13,110,253,1); }
.quizzle-end__btn--secondary{ background: transparent; border-color: rgba(0,0,0,.18); }
/* Ghost button: subtle, for "Retour" */
.quizzle-end__btn--ghost{
  background: rgba(255,255,255,.6);
  border-color: rgba(0,0,0,.14);
}
.quizzle-end__btn--ghost:hover{ background: rgba(255,255,255,.85); }

/* A tiny bit of confetti for perfect scores ✨ */
.quizzle-end--perfect{
  position: relative;
  overflow: hidden;
}
.quizzle-end--perfect::before{
  content: "";
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,0,128,.22) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 18%, rgba(0,200,255,.22) 0 7px, transparent 8px),
    radial-gradient(circle at 26% 70%, rgba(255,200,0,.24) 0 6px, transparent 7px),
    radial-gradient(circle at 86% 68%, rgba(0,255,170,.20) 0 7px, transparent 8px);
  filter: blur(.2px);
  opacity: .9;
  animation: qzConfettiFloat 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qzConfettiFloat{
  0%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(1deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

.quizzle-end__details{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.015);
}
.quizzle-end__details summary{
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}
.quizzle-end__details summary::-webkit-details-marker{ display:none; }

.quizzle-end__table{ font-size: .95rem; }

@media (max-width: 520px){
  .quizzle-end__certRow,
  .quizzle-end__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .quizzle-end__btn{ width: 100%; }
  .quizzle-end__table{ font-size: .9rem; }
}

/* ===============================
   0.8.2.72 Question text emphasis
   =============================== */
.quizzle-question-text{
  margin: 20px 0 24px 0;
}
.quizzle-question-text p{
  font-size: 1.28rem;
  line-height: 1.7;
  font-weight: 650;
  margin: 0 0 14px 0;
}
.quizzle-question-text > *:last-child{
  margin-bottom: 0;
}
/* If question text is not wrapped in <p> */
.quizzle-question-text{
  font-size: 1.28rem;
  line-height: 1.7;
  font-weight: 650;
}



/* =====================================================================
   0.8.2.73 Frontend polish: header separation, airy layout, button safety
   ===================================================================== */

/* Header: title + description clearly separated from questions */
.quizzle-quiz-header{
  margin: 0 0 14px 0;
  padding: 10px 0 14px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.quizzle-quiz-title{
  margin: 6px 0 8px 0;
  line-height: 1.15;
}

/* Airy overall container without breaking template columns */
#quizzleApp{
  margin-top: 12px;
}
#quizzleApp .quizzle-card{
  padding: 14px 14px 12px 14px;
  border-radius: 14px;
}

/* Question hierarchy + wrapper (works with injected HTML) */
.quizzle-question-text{
  margin: 20px 0 24px 0;
}
.quizzle-question-text p{
  font-size: 1.28rem;
  line-height: 1.7;
  font-weight: 600;
  margin: 0 0 14px 0;
}
.quizzle-question-text > *:last-child{
  margin-bottom: 0;
}

/* Buttons: neutralise template rules inside quizzle actions */
.quizzle-actions button{
  color: #111 !important;
  background: #f7f7f7 !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  font-weight: 700;
  padding: 10px 14px !important;
  border-radius: 12px !important;
}
.quizzle-actions button:hover:not([disabled]){
  filter: brightness(0.98);
}
.quizzle-actions button[disabled]{
  opacity: .55;
}

/* Mobile: keep 4 action buttons readable (Prev / Next side-by-side, then Validate + Hint full width) */
@media (max-width: 520px){
  .quizzle-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .quizzle-actions button{ width: 100%; }
  #qzPrev{ grid-column: 1; }
  #qzNext{ grid-column: 2; }
  #qzCheck{ grid-column: 1 / -1; }
  #qzHint{ grid-column: 1 / -1; }
}

/* Primary action (Validate / Check) */
#qzCheck{
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
#qzCheck:hover:not([disabled]){
  filter: brightness(0.95);
}

/* Choices spacing */
.quizzle-choices{
  margin-top: 18px;
  display: grid;
  gap: 10px;
}
.quizzle-choice{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
}
.quizzle-choice:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transform: translateY(-1px);
}



/* =========================================================
   Joomla 5 PROD OVERRIDES (template buttons) + "badge" feel
   Targets only Quizzle dynamic buttons to avoid global impact
   ========================================================= */

/* Explication toggle button (inside feedback) */
.quizzle-linkbtn.qz-expl-jump{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);
  color: inherit;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.quizzle-linkbtn.qz-expl-jump:hover{
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.quizzle-linkbtn.qz-expl-jump:active{
  transform: translateY(0);
}
.quizzle-linkbtn.qz-expl-jump:focus-visible{
  outline: 2px solid rgba(13,110,253,.45);
  outline-offset: 2px;
}

/* Certificate download button: make it feel like a reward/badge */
.quizzle-end__btn.quizzle-end__btn--cert{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .2px;

  /* "badge" look */
  background: linear-gradient(180deg, #fff7d1 0%, #ffe08a 45%, #ffd36a 100%);
  border: 1px solid rgba(180,120,0,.35);
  box-shadow:
    0 10px 20px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  color: #2b2b2b;
  font-family: inherit;
}
.quizzle-end__btn.quizzle-end__btn--cert::before{
  content: "🏅";
  margin-right: 10px;
  font-size: 1.05em;
  line-height: 1;
}
.quizzle-end__btn.quizzle-end__btn--cert:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
.quizzle-end__btn.quizzle-end__btn--cert:active{
  transform: translateY(0);
}
.quizzle-end__btn.quizzle-end__btn--cert:focus-visible{
  outline: 2px solid rgba(255,193,7,.55);
  outline-offset: 2px;
}

/* Disabled state (e.g., if firstname missing) */
.quizzle-end__btn.quizzle-end__btn--cert[disabled],
.quizzle-end__btn.quizzle-end__btn--cert.is-disabled{
  cursor: not-allowed;
  opacity: .55;
  filter: grayscale(.25);
  transform: none !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* Keep end actions buttons consistent even if template overrides .btn */
.quizzle-end__btn{
  box-sizing: border-box;
}
.quizzle-end__btn:focus-visible{
  outline: 2px solid rgba(13,110,253,.35);
  outline-offset: 2px;
}


/* Certificate custom footer text (per-quiz) */
.quizzle-cert__footer{display:inline-block;margin-top:6px;opacity:.85;font-size:.95em;}


/* Printable certificate footer (per-quiz) */
.quizzle-cert__footer-print{margin-top:14px;font-size:.95em;opacity:.9;text-align:center;}

/* Certificate final appreciation */
.cert-appreciation--main{
  margin: 18px 0 10px;
  padding: 10px 16px;
  border: 2px solid #111;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
}

/* Certificate A+B hybrid style */
.cert-appreciation--soft{
  background:#f6f7f8;
  border:1px solid #ddd;
  border-radius:14px;
  padding:14px 18px;
  margin:18px auto 24px;
  max-width:80%;
}

/* =====================================================================
   Quizzle – Quizzes list (cards + category header)
   ===================================================================== */
.quizzle-header{
  margin: 0 0 1.25rem 0;
}
.quizzle-header__title{
  margin: .75rem 0 .35rem 0;
}
.quizzle-header__media{
  margin: 0;
}
.quizzle-header__img{
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--qz-radius);
  border: 1px solid var(--qz-border);
  display:block;
}
.quizzle-header__caption{
  opacity: .85;
  font-size: .95rem;
  margin-top: .35rem;
}
.quizzle-header__desc{
  margin-top: .5rem;
  opacity: .95;
}

.quizzle-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .quizzle-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .quizzle-cards{ grid-template-columns: 1fr; }
}

.quizzle-card{
  border-radius: var(--qz-radius);
  background: #fff;
  border: 1px solid var(--qz-border);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease;
}
.quizzle-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--qz-hover-shadow);
}

.quizzle-card__link{
  display: grid;
  grid-template-rows: auto 1fr;
  color: inherit;
  text-decoration: none;
}

.quizzle-card__media{ margin: 0; }
.quizzle-card__img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.quizzle-card__caption{
  padding: .5rem .75rem 0 .75rem;
  font-size: .9rem;
  opacity: .85;
}

.quizzle-card__body{
  padding: .85rem .9rem 1rem .9rem;
}

.quizzle-card__title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.quizzle-card__meta{
  margin-top: .4rem;
  opacity: .8;
  font-size: .95rem;
}

/* Variant: compact cards (selectable via menu param) */
.quizzle--cards-compact .quizzle-card__link{
  display: flex;
  align-items: stretch;
}
.quizzle--cards-compact .quizzle-card__media{
  flex: 0 0 108px;
}
.quizzle--cards-compact .quizzle-card__img{
  height: 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.quizzle--cards-compact .quizzle-card__caption{
  display: none;
}
.quizzle--cards-compact .quizzle-card__body{
  padding: .7rem .8rem;
}

@media (max-width: 620px){
  .quizzle--cards-compact .quizzle-card__link{
    display: grid;
    grid-template-rows: auto 1fr;
  }
  .quizzle--cards-compact .quizzle-card__media{
    flex: none;
  }
  .quizzle--cards-compact .quizzle-card__img{
    height: 180px;
    aspect-ratio: auto;
  }
}

/* ------------------------------------------------------------
   END SCREEN "WOW" (subtle celebration)
   ------------------------------------------------------------ */
.quizzle-end__header--wow{
  position:relative;
  overflow:hidden;
}

.quizzle-end__burst{
  position:absolute;
  inset:-40% -30% auto -30%;
  height:220px;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(circle at 20% 35%, rgba(29,110,242,.35), transparent 55%),
    radial-gradient(circle at 60% 20%, rgba(255,193,7,.35), transparent 55%),
    radial-gradient(circle at 85% 60%, rgba(220,53,69,.28), transparent 55%),
    radial-gradient(circle at 35% 75%, rgba(25,135,84,.22), transparent 55%);
  filter:blur(2px);
  transform:translateY(-10px);
  animation:qzBurstFloat 5s ease-in-out infinite;
}

@keyframes qzBurstFloat{
  0%,100%{ transform:translateY(-10px) scale(1); opacity:.45; }
  50%{ transform:translateY(8px) scale(1.04); opacity:.65; }
}