/* ============================================================
   تدريب — تصنيفات الاختبارات (plugin build)
   Ported from the standalone quiz-cards page. Every selector is
   namespaced under .tqm-cats so dropping this into a WordPress
   page can't collide with the theme's own .card / .tag / .tags.
   The ship background is a CSS var so it can be re-pointed at a
   media-library URL without editing this file.
   ============================================================ */

.tqm-cats {
  --tqm-primary: #1b50a0;
  --tqm-primary-dark: #143d7b;
  --tqm-navy: #142849;
  --tqm-ink: #0f1620;
  --tqm-card-bg: #ffffff;
  --tqm-frost: #f6f7f8;
  --tqm-ice: #e9edf3;
  --tqm-line: #e2e4e8;
  --tqm-line-soft: #edeef1;
  --tqm-text-light: #5b6675;
  --tqm-tag-bg: #f2f3f5;
  --tqm-tag-color: #3a4658;
  --tqm-shadow: rgba(15, 22, 32, 0.06);
  --tqm-blue-bg: #e9eff8;
  --tqm-blue-line: #c3d4ec;
  --tqm-green: #1f6b35;
  --tqm-green-dark: #165127;
  --tqm-green-bg: #e6f4ea;
  --tqm-green-line: #b7ddc2;
  --tqm-ship: url("https://tadreab.com/wp-content/uploads/2026/07/bg.jpeg");

  --tqm-card-w: 300px;
  --tqm-gap: 20px;
  --tqm-slide-ms: 1100ms;
  --tqm-slide-ease: cubic-bezier(0.7, 0, 0.84, 0.28);
  --tqm-fade-ease: cubic-bezier(0.8, 0, 1, 0.35);
  --tqm-enter-ms: 1300ms;
  --tqm-enter-ease: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  color: var(--tqm-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.tqm-cats *,
.tqm-cats *::before,
.tqm-cats *::after {
  box-sizing: border-box;
}

/* ---------- page head ---------- */

.tqm-cats-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.tqm-cats-glyph {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  border-radius: 14px;
  border: 1px solid var(--tqm-line);
  background: linear-gradient(158deg, var(--tqm-ice) 0 62%, var(--tqm-navy) 62% 100%);
  font-size: 1.5rem;
  line-height: 58px;
  text-align: center;
}

.tqm-cats-head h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--tqm-ink);
  margin: 0 0 14px;
}

.tqm-cats-head p {
  color: var(--tqm-text-light);
  font-size: 1.02rem;
  line-height: 1.85;
  max-width: 52ch;
  margin: 0 auto;
}

.tqm-cats-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 34px auto 0;
  background: #d6d9de;
}

.tqm-cats-notice {
  max-width: 900px;
  margin: 0 auto 28px;
  padding: 12px 16px;
  border: 1px solid #e5c98a;
  border-inline-start: 4px solid #d69e2e;
  border-radius: 8px;
  background: #fdf8ec;
  color: #6b4e12;
  font-size: 0.9rem;
  line-height: 1.8;
}

.tqm-cats-notice a {
  color: var(--tqm-primary-dark);
}

.tqm-cats-empty {
  text-align: center;
  color: var(--tqm-text-light);
}

/* ---------- carousel shell ---------- */

.tqm-cats-marquee {
  /* wide enough for four 300px cards + gaps + padding; the JS below then
     derives the real card width from whatever width this actually gets, so a
     narrow theme column still shows the requested number of cards */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: hidden;
  position: relative;
  /* force predictable left-to-right child order for the flex track
     regardless of the page's dir="rtl" — the browser otherwise reverses
     flex order in RTL, which fights the slide transforms below */
  direction: ltr;
}

/* without the marquee this is a wrapping grid */
.tqm-cats-marquee:not(.is-animated) {
  overflow: visible;
}

.tqm-cats-marquee:not(.is-animated) .tqm-cats-track {
  flex-wrap: wrap;
  width: auto;
  justify-content: center;
  transform: none;
}

/* Too few cards for a queue — the marquee stood itself down and left a plain
   centred row rather than cloning one card across the screen. */
.tqm-cats-marquee.is-static-fallback {
  overflow-x: auto;
  scrollbar-width: none;
}

.tqm-cats-marquee.is-static-fallback::-webkit-scrollbar {
  display: none;
}

/* layout="column" — for a sidebar next to other content. Cards stack, fill
   the column, and never slide. */
.tqm-layout-column .tqm-cats-marquee {
  max-width: none;
  padding: 0;
  overflow: visible;
}

.tqm-layout-column .tqm-cats-track {
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  transform: none;
}

.tqm-layout-column .tqm-cat-card {
  width: 100%;
  min-height: 0;
}

.tqm-layout-grid .tqm-cats-marquee {
  max-width: none;
}

/* The wall is a normal block element, so it drops straight into a flex or grid
   child without needing its own row. */
.tqm-cats {
  width: 100%;
  min-width: 0;
}

.tqm-cats-track {
  --tqm-drag: 0px;
  display: flex;
  gap: var(--tqm-gap);
  width: max-content;
  align-items: stretch;
  padding: 10px 0 26px;
  /* user dragging rides on top of the flow; the marquee's own per-card
     transforms are untouched by it */
  transform: translateX(var(--tqm-drag));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tqm-cats-marquee.is-animated {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.tqm-cats-marquee.is-dragging {
  cursor: grabbing;
}

/* The rail is focusable so the arrow keys work, but it is a scroll container,
   not a control — a ring around the whole strip just looks like a rendering
   bug. The cards and buttons inside keep their own focus styles. */
.tqm-cats-marquee:focus,
.tqm-cats-marquee:focus-visible {
  outline: none;
}

/* card content stays RTL regardless of the ltr flex order above */
.tqm-cat-card {
  direction: rtl;
}

/* ---------- card ---------- */

.tqm-cat-card {
  position: relative;
  width: var(--tqm-card-w);
  flex: none;
  min-height: 500px;
  /* The ship is a watermark, not a photo. It used to run at 96% of the card
     height with the white gradient fading out to 8% — fine when the card held
     a title and a blurb, unreadable now that it also carries an exam list and
     tags across the full width. It is smaller, anchored to the bottom corner,
     and the scrim never drops below 78%. */
  background:
    linear-gradient(
      to left,
      #ffffff 0%,
      rgba(255, 255, 255, 0.97) 34%,
      rgba(255, 255, 255, 0.9) 62%,
      rgba(255, 255, 255, 0.82) 100%
    ),
    var(--tqm-ship) left -8px bottom -6px / auto 62% no-repeat,
    var(--tqm-card-bg);
  border: 1px solid var(--tqm-line);
  border-radius: 16px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px var(--tqm-shadow);
  transform-origin: center center;
  /* slow -> fast exit; hover only touches shadow and border so it never
     fights the transforms the carousel owns */
  transition:
    transform var(--tqm-slide-ms) var(--tqm-slide-ease),
    opacity calc(var(--tqm-slide-ms) * 0.82) var(--tqm-fade-ease),
    filter calc(var(--tqm-slide-ms) * 0.82) var(--tqm-fade-ease),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.tqm-cat-card:hover {
  border-color: #cfd5de;
  box-shadow: 0 18px 34px -18px rgba(20, 40, 73, 0.35);
}

/* clicking the card body opens its full description */
.tqm-cat-card.is-featured,
.tqm-cat-card.is-soon {
  cursor: pointer;
}

/* ...but the interactive bits inside keep their own cursors */
.tqm-cat-card .tqm-exam-link,
.tqm-cat-card .tqm-cat-cta {
  cursor: pointer;
}

.tqm-cat-card .tqm-cat-cta:disabled,
.tqm-cat-card .tqm-exam-link:disabled {
  cursor: not-allowed;
}

/* pulled out of the flex flow and frozen in place by JS, so the followers
   settle into their real positions immediately while this one keeps
   shrinking away on top of them. RTL: it leaves toward the left. */
.tqm-cat-card.is-exiting {
  position: absolute;
  margin: 0;
  transform: translateX(calc(var(--tqm-card-w) * 0.85)) scale(0.06) rotate(1.5deg);
  transform-origin: right center;
  opacity: 0;
  filter: blur(3px);
  pointer-events: none;
  z-index: 0;
  direction: ltr;
}

/* start state for the recycled card appended at the tail */
.tqm-cat-card.is-entering {
  transform: translateX(calc(var(--tqm-card-w) * 0.85)) scale(0.18) rotate(-1.5deg);
  opacity: 0;
  filter: blur(3px);
  transition: none;
  direction: ltr;
}

.tqm-cat-card.is-settling {
  transition:
    transform var(--tqm-enter-ms) var(--tqm-enter-ease),
    opacity calc(var(--tqm-enter-ms) * 0.85) var(--tqm-enter-ease),
    filter calc(var(--tqm-enter-ms) * 0.85) var(--tqm-enter-ease);
}

/* cards still under ice: same ship photo, greyed and frosted over so the
   live card is still the one that visibly "made it" */
.tqm-cat-card.is-soon {
  background-color: var(--tqm-frost);
  background-blend-mode: normal, luminosity, normal;
}

.tqm-cat-card.is-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    rgba(246, 247, 248, 0.55)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='150' fill='none' stroke='%23c3cbd6' stroke-width='1'%3E%3Cpath d='M0 34 L48 52 L96 30 L150 60 L220 40'/%3E%3Cpath d='M48 52 L40 108'/%3E%3Cpath d='M150 60 L168 150'/%3E%3C/svg%3E")
      no-repeat left top;
}

.tqm-cat-card.is-featured {
  border-color: #d5dae2;
}

/* ---------- badge + corner mark ---------- */

.tqm-cat-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #fff;
  border: 1px solid var(--tqm-line);
  color: var(--tqm-primary);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 11px;
  border-radius: 999px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(27, 80, 160, 0.35);
  z-index: 2;
}

.tqm-cat-badge.is-soon {
  background: var(--tqm-ice);
  border-color: #dde2e9;
  color: #7b8494;
  text-decoration: none;
}

.tqm-cat-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--tqm-line);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: var(--tqm-navy);
  background: #fff;
  z-index: 2;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.tqm-cat-card:hover .tqm-cat-arrow {
  background: var(--tqm-navy);
  border-color: var(--tqm-navy);
  color: #fff;
}

/* ---------- icon tile: ice above, open water below ---------- */

.tqm-cat-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid var(--tqm-line);
  background: linear-gradient(158deg, var(--tqm-ice) 0 62%, var(--tqm-navy) 62% 100%);
  font-size: 1.45rem;
  line-height: 50px;
  text-align: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  transform-origin: center center;
  transition: transform 620ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* frozen through: no water yet */
.tqm-cat-card.is-soon .tqm-cat-icon {
  background: linear-gradient(158deg, #f1f3f6 0 62%, #dde2e9 62% 100%);
  filter: grayscale(0.45);
  opacity: 0.85;
}

/* the tile lags a touch while its card takes its step */
.tqm-cat-card.is-shifting .tqm-cat-icon {
  transform: translateX(-6px) rotate(-1.2deg);
}

@keyframes tqmIconShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(3px) rotate(5deg); }
  30% { transform: translateX(-3px) rotate(-5deg); }
  45% { transform: translateX(2.5px) rotate(3.5deg); }
  60% { transform: translateX(-2px) rotate(-2.5deg); }
  75% { transform: translateX(1px) rotate(1deg); }
  90% { transform: translateX(-0.5px) rotate(-0.5deg); }
}

.tqm-cat-icon.tqm-icon-shake {
  animation: tqmIconShake 550ms ease-in-out;
}

/* ---------- text ---------- */

.tqm-cat-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--tqm-ink);
  position: relative;
  z-index: 1;
}

.tqm-cat-desc {
  color: var(--tqm-text-light);
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0 0 22px;
  position: relative;
  z-index: 1;
}

.tqm-cat-list-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8a929e;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tqm-line-soft);
  position: relative;
  z-index: 1;
}

.tqm-cat-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.tqm-cat-list li + li {
  border-top: 1px solid var(--tqm-line-soft);
}

.tqm-exam-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  margin: 0 -8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tqm-ink);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.tqm-exam-name {
  flex: 1;
  min-width: 0;
}

/* the marker: an ice shard by default, a play triangle once chosen */
.tqm-exam-mark {
  flex: none;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--tqm-ice);
  border: 1px solid #ccd4de;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.18s ease;
}

/* ---- hover: blue ---- */

.tqm-exam-link:hover {
  background: var(--tqm-blue-bg);
  border-color: var(--tqm-blue-line);
  color: var(--tqm-primary-dark);
}

.tqm-exam-link:hover .tqm-exam-mark {
  background: var(--tqm-primary);
  border-color: var(--tqm-primary);
}

.tqm-exam-link:focus-visible {
  outline: 2px solid var(--tqm-primary);
  outline-offset: 2px;
}

/* ---- selected: green + play icon ---- */

.tqm-exam-link.is-selected,
.tqm-exam-link.is-selected:hover {
  background: var(--tqm-green-bg);
  border-color: var(--tqm-green-line);
  color: var(--tqm-green-dark);
  font-weight: 700;
}

/* the diamond becomes a triangle — same element, no layout shift */
.tqm-exam-link.is-selected .tqm-exam-mark,
.tqm-exam-link.is-selected:hover .tqm-exam-mark {
  width: 0;
  height: 0;
  transform: none;
  background: none;
  border: 6px solid transparent;
  border-inline-start-width: 9px;
  border-inline-start-color: var(--tqm-green);
  border-inline-end-width: 0;
}

.tqm-exam-link.is-disabled,
.tqm-exam-link:disabled {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- tags ---------- */

.tqm-cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.tqm-cat-tag {
  background: var(--tqm-tag-bg);
  border: 1px solid #e7e9ec;
  color: var(--tqm-tag-color);
  font-size: 0.74rem;
  padding: 3px 11px;
  border-radius: 999px;
  font-weight: 500;
}

/* ---------- cta ---------- */

.tqm-cat-cta {
  margin-top: auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--tqm-primary);
  color: #fff;
  padding: 13px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}

.tqm-cat-cta::after {
  content: "←";
  font-size: 0.95em;
  transition: transform 0.2s ease;
}

.tqm-cat-cta:hover {
  background: var(--tqm-primary-dark);
}

/* the label carries the exam name, so let it wrap rather than overflow */
.tqm-cat-cta {
  white-space: normal;
  line-height: 1.45;
}

.tqm-cat-cta:hover::after {
  transform: translateX(-3px);
}

.tqm-cat-cta:focus-visible {
  outline: 2px solid var(--tqm-navy);
  outline-offset: 3px;
}

.tqm-cat-cta:disabled,
.tqm-cat-cta:disabled:hover {
  background: transparent;
  border: 1px solid #d9dde3;
  color: #8a929e;
  cursor: not-allowed;
}

.tqm-cat-cta:disabled::after {
  content: none;
}

/* ---------- responsive + a11y ---------- */

/* Fallbacks only — the JS sets --tqm-card-w inline from the real container
   width, and an inline style beats these. They keep the layout sane if the
   script is blocked or fails. */
@media (max-width: 1024px) {
  .tqm-cats { --tqm-card-w: 280px; --tqm-gap: 16px; }
  .tqm-cats-marquee { padding: 0 20px; }
}

@media (max-width: 560px) {
  .tqm-cats {
    --tqm-card-w: 268px;
    --tqm-gap: 14px;
  }
  .tqm-cats-marquee { padding: 0 16px; }
  .tqm-cat-card { padding: 22px 18px 20px; }
  .tqm-cats-head { margin-bottom: 38px; padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tqm-cats-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tqm-cats *,
  .tqm-cats *::before,
  .tqm-cats *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- access badge states ---------- */

.tqm-cat-badge.is-open {
  background: #eaf5ec;
  border-color: #cbe5d1;
  color: #1f6b35;
  text-decoration: none;
}

/* ---------- logo can be an image or a glyph ---------- */

.tqm-cat-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* static exam names in the card body — the real links live in the panel */
.tqm-exam-link.is-static {
  cursor: default;
}

.tqm-exam-link.is-static:hover {
  background: none;
  color: var(--tqm-ink);
}

.tqm-exam-link.is-static:hover::before {
  background: var(--tqm-ice);
  border-color: #ccd4de;
}

.tqm-exam-link.is-static:hover::after {
  content: none;
}

/* ---------- access / exam panel ---------- */

.tqm-panel[hidden] {
  display: none;
}

.tqm-panel {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
}

.tqm-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 32, 0.55);
  backdrop-filter: blur(2px);
}

.tqm-panel-box {
  position: relative;
  width: min(460px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--tqm-line);
  box-shadow: 0 30px 60px -20px rgba(15, 22, 32, 0.5);
  padding: 26px 24px 24px;
  direction: rtl;
  text-align: right;
}

.tqm-panel-x {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--tqm-line);
  background: #fff;
  color: var(--tqm-text-light);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.tqm-panel-x:hover {
  background: var(--tqm-ice);
  color: var(--tqm-ink);
}

.tqm-panel-title {
  margin: 0 0 14px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tqm-ink);
  padding-inline-end: 34px;
}

.tqm-panel-note {
  color: var(--tqm-text-light);
  font-size: 0.92rem;
  line-height: 1.8;
  margin: 0 0 14px;
}

.tqm-panel-meta {
  margin: 0 0 14px;
}

.tqm-panel-error {
  padding: 11px 14px;
  border-radius: 8px;
  background: #fdecec;
  border: 1px solid #f3c9c9;
  color: #8c2020;
  word-break: break-word;
}

/* ---------- code form ---------- */

.tqm-code-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--tqm-ink);
}

.tqm-code-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
  font-family: inherit;
  border: 1px solid var(--tqm-line);
  border-radius: 10px;
  background: var(--tqm-frost);
  color: var(--tqm-ink);
  direction: ltr;
}

.tqm-code-input:focus {
  outline: 2px solid var(--tqm-primary);
  outline-offset: 1px;
  background: #fff;
}

.tqm-code-hint {
  font-size: 0.78rem;
  color: #8a929e;
  margin: 8px 0 0;
}

.tqm-code-error {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fdecec;
  border: 1px solid #f3c9c9;
  color: #8c2020;
  font-size: 0.86rem;
  line-height: 1.7;
}

.tqm-code-submit {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 20px;
  border: none;
  border-radius: 10px;
  background: var(--tqm-primary);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tqm-code-submit:hover {
  background: var(--tqm-primary-dark);
}

.tqm-code-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- exam list inside the panel ---------- */

.tqm-panel-exams {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tqm-panel-exam {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--tqm-line-soft);
}

.tqm-panel-exam:first-child {
  border-top: none;
}

.tqm-panel-exam-main {
  flex: 1;
  min-width: 0;
}

.tqm-panel-exam-name {
  display: block;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--tqm-ink);
}

.tqm-panel-exam-stats {
  display: block;
  font-size: 0.76rem;
  color: var(--tqm-text-light);
  margin-top: 3px;
}

.tqm-panel-start {
  flex: none;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--tqm-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.tqm-panel-start:hover {
  background: var(--tqm-primary-dark);
}

.tqm-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}

.tqm-pill.is-ok {
  background: #eaf5ec;
  color: #1f6b35;
  border: 1px solid #cbe5d1;
}

.tqm-pill.is-off {
  background: var(--tqm-tag-bg);
  color: #7b8494;
  border: 1px solid #e7e9ec;
}

body.tqm-panel-open {
  overflow: hidden;
}

/* ---------- [tadreab_my_cards] dashboard table ---------- */

.tqm-mycards-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--tqm-ink);
}

.tqm-mycards-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.tqm-mycards-table th,
.tqm-mycards-table td {
  padding: 12px 10px;
  text-align: right;
  border-bottom: 1px solid var(--tqm-line-soft);
}

.tqm-mycards-table th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8a929e;
  border-bottom: 1px solid var(--tqm-line);
}

.tqm-mycards-table tr.is-expired {
  opacity: 0.6;
}

.tqm-mycards-exam {
  display: inline-block;
  margin: 2px 0 2px 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e9eff8;
  color: var(--tqm-primary-dark);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.tqm-mycards-exam:hover {
  background: var(--tqm-primary);
  color: #fff;
}

.tqm-muted {
  color: #9aa2ae;
}

@media (max-width: 640px) {
  .tqm-mycards-table thead { display: none; }
  .tqm-mycards-table tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--tqm-line);
  }
  .tqm-mycards-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: none;
    padding: 5px 0;
  }
  .tqm-mycards-table td::before {
    content: attr(data-label);
    font-size: 0.76rem;
    color: #8a929e;
    font-weight: 600;
  }
}

/* ---------- "pick an exam first" hint ---------- */

.tqm-cat-hint {
  margin: 0 0 10px;
  padding: 7px 11px;
  border-radius: 8px;
  background: #fdf3e3;
  border: 1px solid #f0dcb4;
  color: #7a5510;
  font-size: 0.8rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.tqm-cat-hint[hidden] {
  display: none;
}

/* ---------- long description in the panel ---------- */

.tqm-panel-longdesc {
  color: var(--tqm-text-light);
  font-size: 0.93rem;
  line-height: 1.9;
}

.tqm-panel-longdesc p {
  margin: 0 0 12px;
}

.tqm-panel-longdesc p:last-child {
  margin-bottom: 0;
}

.tqm-panel-longdesc ul,
.tqm-panel-longdesc ol {
  margin: 0 0 12px;
  padding-inline-start: 22px;
}

.tqm-panel-longdesc li {
  margin-bottom: 6px;
}

.tqm-panel-longdesc a {
  color: var(--tqm-primary);
}