/* riddler-quiz-pdf.css
 * "Download Quiz PDF" as a secondary CTA — centered, accessible — with Dark Mode support.
 * Works for both catalog card button (.rq-pdf-card) and embedded quiz button (.rq-pdf-download).
 */

/* Catalog card PDF button (centered) */
.rq-pdf-card {
  appearance: none;
  display: block; /* center align */
  margin: 8px auto 0;
  min-width: 180px;
  text-align: center;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #1d4ed8;
  border: 1px solid #c7d2fe;
  box-shadow: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.rq-pdf-card:hover { background: #eff6ff; transform: translateY(-1px); }
.rq-pdf-card:active { transform: translateY(1px); }
.rq-pdf-card[disabled] { opacity: .6; cursor: not-allowed; }

/* Embedded quiz-level PDF button (if present) */
.rq-pdf-download {
  appearance: none;
  display: inline-block;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #2563eb;
  border: 1px solid #dbeafe;
  box-shadow: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.rq-pdf-download:hover { background: #eff6ff; }
.rq-pdf-download[disabled] { opacity: .6; cursor: not-allowed; }

/* Focus ring (accessibility) */
.rq-pdf-card:focus-visible,
.rq-pdf-download:focus-visible {
  outline: 3px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Custom PDF Confirm Modal & Toast                                           */
/* -------------------------------------------------------------------------- */

/* Overlay */
.rqpdf-overlay {
  position: fixed; inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dialog */
.rqpdf-dialog {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--rqpdf-bg, #fff);
  color: var(--rqpdf-fg, #222);
  z-index: 9999;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  width: 92%;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  animation: ravcm-pop .18s ease;
}

.rqpdf-dialog-header {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
}

.rqpdf-dialog-body {
  font-size: 16px;
  color: #374151;
  margin-bottom: 18px;
}

.rqpdf-dialog-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/*.rqpdf-btn {
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}*/

.rqpdf-btn-primary {
  background: #2563eb !important;
  color: #fff;
  transition: background .15s ease;
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}
.rqpdf-btn-primary:hover { background: #1d4ed8 !important; }

.rqpdf-btn-secondary {
  background: #111;
  color: #fff;
  transition: background .15s ease;
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}
.rqpdf-btn-secondary:hover { background: #333; }

/* Toast (top-center, high-contrast) */
.rqpdf-toast {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  background: #ef4444;
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  z-index: 10000;
  display: none;
  max-width: min(720px, 92vw);
  font-weight: 600;
  letter-spacing: .2px;
}

@media (max-width: 600px) {
  .rqpdf-toast {
    left: 20%;
    transform: translateX(-10%);
  }
}
/* Inline close button inside toast */
.rqpdf-toast .rqpdf-toast-close {
  margin-left: 12px;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
}

/* ------------------------------ Dark Mode ------------------------------ */
@media (prefers-color-scheme: dark) {
  .rq-pdf-card {
    color: #93c5fd;        /* blue-300 */
    border-color: #1e3a8a; /* blue-800 */
    background: transparent;
  }
  .rq-pdf-card:hover { background: rgba(30,58,138,.25); }

  .rq-pdf-download {
    color: #93c5fd;
    border-color: #1e3a8a;
    background: transparent;
  }
  .rq-pdf-download:hover { background: rgba(30,58,138,.25); }

  .rq-pdf-card:focus-visible,
  .rq-pdf-download:focus-visible {
    outline: 3px solid rgba(147,197,253,.45);
  }

  /* Modal palette for dark */
  .rqpdf-dialog {
    --rqpdf-bg: #1f2937;
    --rqpdf-fg: #e5e7eb;
    --rqpdf-header-bg: #111827;
    --rqpdf-footer-bg: #111827;
  }
  .rqpdf-btn-secondary {
    background: #374151; color: #f3f4f6;
  }
  .rqpdf-btn-secondary:hover { background: #4b5563; }

  /* Toast color for dark backgrounds */
  .rqpdf-toast {
    background: #ef4444;  /* red-500 */
    color: #fff;
  }
}

/* ----------------------- High Contrast / Forced Colors ----------------------- */
@media (forced-colors: active) {
  .rqpdf-dialog,
  .rqpdf-toast,
  .rqpdf-btn { forced-color-adjust: auto; }
  .rqpdf-btn-primary { border-color: ButtonText; }
  .rqpdf-btn-secondary { border-color: ButtonText; }
}


/* ==========================================================================
   Visual polish pass: PDF actions, confirm modal, and mobile toast behavior
   ========================================================================== */
.rqpdf-overlay,
.rqpdf-dialog,
.rqpdf-dialog *,
.rqconfirm-dialog,
.rqconfirm-dialog * {
  box-sizing: border-box;
}

.rqpdf-overlay,
.rqconfirm-overlay {
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.rqpdf-dialog,
.rqconfirm-dialog {
  border: 1px solid rgba(226, 232, 240, 0.75);
  border-radius: 18px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rqpdf-dialog {
  background: var(--rqpdf-bg, #fff);
}

.rq-pdf-card,
.rq-pdf-download,
.rqpdf-btn,
.rqconfirm-btn,
.rqpdf-toast .rqpdf-toast-close {
  min-height: 40px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.rq-pdf-card:hover,
.rq-pdf-download:hover,
.rqpdf-btn:hover,
.rqconfirm-btn:hover,
.rqpdf-toast .rqpdf-toast-close:hover {
  transform: translateY(-1px);
}

.rqpdf-dialog button:focus-visible,
.rqpdf-dialog a:focus-visible,
.rqconfirm-dialog button:focus-visible,
.rqconfirm-dialog a:focus-visible,
.rqpdf-toast .rqpdf-toast-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.24);
}

.rqpdf-dialog,
.rqconfirm-dialog,
.rqpdf-toast {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .rqpdf-toast {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100vw - 28px);
  }

  .rqpdf-dialog,
  .rqconfirm-dialog {
    width: calc(100vw - 28px);
    padding: 18px;
  }

  .rqconfirm-dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* Loading states for PDF buttons */
.rq-pdf-card.rq-is-loading,
.rq-pdf-download.rq-is-loading,
.rq-pdf-card.rq-is-loading:hover,
.rq-pdf-download.rq-is-loading:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: progress;
  opacity: .85;
  pointer-events: none;
  transform: none;
}

.rq-pdf-card.rq-is-loading {
  display: flex;
  width: 100%;
}

.rq-btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rq-spin .7s linear infinite;
  flex: 0 0 auto;
}

@keyframes rq-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rq-btn-spinner { animation: none; }
}
/* RiddleR accessibility hardening: visible keyboard focus + reduced motion. */
.sr-only,
.riddler-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.riddler a:focus-visible,
.riddler button:focus-visible,
.riddler input:focus-visible,
.riddler select:focus-visible,
.riddler textarea:focus-visible,
.rnav a:focus-visible,
.rnav button:focus-visible,
.rnav-sheet a:focus-visible,
.rnav-sheet button:focus-visible,
.rnav-sheet input:focus-visible,
.rdesk-nav a:focus-visible,
.rdesk-nav button:focus-visible,
.rdesk-mega a:focus-visible,
.rdesk-mega button:focus-visible,
.rdesk-mega [role="tab"]:focus-visible,
.ua a:focus-visible,
.ua button:focus-visible,
.ua input:focus-visible,
.ua select:focus-visible,
.ua textarea:focus-visible,
.riddler-avatar-card a:focus-visible,
.riddler-avatar-card button:focus-visible,
.riddler-avatar-modal a:focus-visible,
.riddler-avatar-modal button:focus-visible,
.ravcm-overlay a:focus-visible,
.ravcm-overlay button:focus-visible,
.rfcm-overlay a:focus-visible,
.rfcm-overlay button:focus-visible,
.riddle-modal a:focus-visible,
.riddle-modal button:focus-visible,
.rq-wrap a:focus-visible,
.rq-wrap button:focus-visible,
.rq-wrap input:focus-visible,
.rq-wrap select:focus-visible,
.rq-wrap textarea:focus-visible,
.rqm-dialog a:focus-visible,
.rqm-dialog button:focus-visible,
.rqm-dialog input:focus-visible,
.rqm-dialog select:focus-visible,
.rqm-dialog textarea:focus-visible,
.rqpdf-dialog a:focus-visible,
.rqpdf-dialog button:focus-visible,
.rqpdf-dialog input:focus-visible,
.rqconfirm-dialog a:focus-visible,
.rqconfirm-dialog button:focus-visible,
.ecr a:focus-visible,
.ecr button:focus-visible,
.ecr input:focus-visible,
.ecr select:focus-visible,
.ecr textarea:focus-visible,
.riddler-case-reader a:focus-visible,
.riddler-case-reader button:focus-visible,
.riddler-case-reader input:focus-visible,
.riddler-case-reader select:focus-visible,
.riddler-case-reader textarea:focus-visible,
.ecr-hints-modal a:focus-visible,
.ecr-hints-modal button:focus-visible,
.ecr-hints-modal input:focus-visible,
.rcl-confirm-card a:focus-visible,
.rcl-confirm-card button:focus-visible {
  outline: 3px solid #2563eb !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  .riddler,
  .riddler *,
  .rnav,
  .rnav *,
  .rnav-sheet,
  .rnav-sheet *,
  .rdesk-nav,
  .rdesk-nav *,
  .rdesk-mega,
  .rdesk-mega *,
  .ua,
  .ua *,
  .ravcm-overlay,
  .ravcm-overlay *,
  .rfcm-overlay,
  .rfcm-overlay *,
  .riddle-modal,
  .riddle-modal *,
  .rq-wrap,
  .rq-wrap *,
  .rqm-dialog,
  .rqm-dialog *,
  .rqpdf-dialog,
  .rqpdf-dialog *,
  .rqconfirm-dialog,
  .rqconfirm-dialog *,
  .riddler-case-reader,
  .riddler-case-reader *,
  .ecr-hints-modal,
  .ecr-hints-modal *,
  .rcl-confirm-card,
  .rcl-confirm-card * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* v1.5.150 — PDF controls remain visually consistent under global theme button rules. */
.rq-pdf-card:hover,
.rq-pdf-card:focus,
.rq-pdf-card:focus-visible,
.rq-pdf-download:hover,
.rq-pdf-download:focus,
.rq-pdf-download:focus-visible {
  background: #eff6ff !important;
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #c7d2fe !important;
}

.rqpdf-btn-primary:hover,
.rqpdf-btn-primary:focus,
.rqpdf-btn-primary:focus-visible {
  background: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.rqpdf-btn-secondary:hover,
.rqpdf-btn-secondary:focus,
.rqpdf-btn-secondary:focus-visible {
  background: #333333 !important;
  background-color: #333333 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
  .rqpdf-btn-secondary:hover,
  .rqpdf-btn-secondary:focus,
  .rqpdf-btn-secondary:focus-visible {
    background: #4b5563 !important;
    background-color: #4b5563 !important;
    color: #f3f4f6 !important;
  }
}