/* Exam Illustration Styles */
.exam-illustration-wrapper {
  position: relative;
  width: 346px;
  height: 150px;
  z-index: 10;
  transform: scale(0.85);
  transform-origin: center center;
}

.mock-exam-card {
  position: absolute;
  width: 179px;
  background: #ffffff;
  border: 1px solid #0f172a;
  border-radius: 12.5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: 8.4px;
  box-shadow: 0px 4.19px 7.86px rgba(0, 0, 0, 0.03);
  font-family: 'Public Sans', sans-serif;
}

.mock-exam-card.bg-card {
  left: 167px;
  top: 0px;
  transform: rotate(4.18deg);
}

.mock-exam-card.fg-card {
  left: 0px;
  top: 3px;
  transform: rotate(-1.67deg);
  z-index: 2;
}

.mock-exam-header {
  padding: 0 8.4px;
  display: flex;
  flex-direction: column;
  gap: 6.3px;
  margin-bottom: 8.4px;
}
.mock-exam-badge {
  background: #ffe33b;
  border-radius: 4.2px;
  padding: 3.1px 4.2px;
  font-size: 5.2px;
  color: #2b2b2b;
  font-weight: 700;
  display: inline-flex;
  gap: 3.1px;
  width: max-content;
}
.mock-exam-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #1a1a1a;
}

.mock-exam-meta {
  display: flex;
  padding: 0 8.4px;
  margin-bottom: 8.4px;
  width: 100%;
}
.mock-exam-meta-col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6.3px;
}
.mock-exam-meta-icon {
  width: 17.8px;
  height: 17.8px;
  background: #f0f0f0;
  border-radius: 4.2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-exam-meta-icon svg {
  width: 10px;
  height: 10px;
}
.mock-exam-meta-text {
  display: flex;
  flex-direction: column;
  font-size: 6.3px;
  color: #1a1a1a;
  font-weight: 700;
  gap: 2px;
}

.mock-exam-users {
  padding: 0 8.4px;
  display: flex;
  align-items: center;
  gap: 3.1px;
  margin-bottom: 8.4px;
}
.mock-exam-avatars {
  display: flex;
  align-items: center;
}
.mock-exam-avatars img {
  width: 8.4px;
  height: 8.4px;
  border-radius: 50%;
  margin-right: -2px;
  border: 0.5px solid #fff;
  object-fit: cover;
}
.mock-exam-users span {
  font-size: 6.3px;
  font-weight: 600;
  color: #616161;
}

.mock-exam-actions {
  display: flex;
  padding: 0 8.4px;
  gap: 4.2px;
  margin-bottom: 8.4px;
}
.mock-exam-btn {
  flex: 1;
  height: 23px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7.3px;
  font-weight: 700;
}
.mock-exam-btn.btn-light {
  background: #f0f0f0;
  color: #2b2b2b;
}
.mock-exam-btn.btn-dark {
  background: #2b2b2b;
  color: #ffffff;
}

.mock-exam-footer {
  background: #faf8f6;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.2px;
  font-size: 6.3px;
  font-weight: 700;
  color: #1a1a1a;
}
.mock-exam-footer svg {
  width: 10.5px;
  height: 10.5px;
}

/* Tasks Illustration Styles */
.tasks-illustration-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: auto;
  z-index: 10;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tasks-pills-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  flex: 1;
}

.task-svg-pill {
  width: 100%;
  max-width: 110px;
  height: auto;
  display: block;
}

.mock-task-card {
  position: relative;
  width: 135px;
  background: #ffffff;
  border: 1px solid #0f172a;
  border-radius: 7.5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 8.6px 8.6px rgba(0, 0, 0, 0.03);
  font-family: 'Public Sans', sans-serif;
  flex-shrink: 0;
}
.mock-task-card.bg-card {
  z-index: 5;
}

.mock-task-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5.7px 6.9px;
}
.mock-task-time {
  font-size: 5px;
  font-weight: 600;
  color: #1a1a1a;
}
.mock-task-status-icons {
  display: flex;
  align-items: center;
  gap: 2.3px;
}
.mock-task-status-icons svg {
  width: 12px;
  height: 4px;
}

.mock-task-header {
  display: flex;
  align-items: center;
  gap: 6.9px;
  padding: 0 4.6px;
  margin-bottom: 6.9px;
}
.mock-task-close {
  width: 9.2px;
  height: 9.2px;
}
.mock-task-progress {
  flex: 1;
  display: flex;
  gap: 2px;
  align-items: center;
}
.mock-task-progress-bar {
  height: 3.4px;
  border-radius: 28px;
}
.mock-task-progress-bar.green { background: #22ba00; flex: 1; }
.mock-task-progress-bar.green-short { background: #22ba00; width: 3.4px; border: 0.6px solid #c9ead0; }
.mock-task-progress-bar.grey { background: #ddd; width: 3.4px; }

.mock-task-timer {
  display: flex;
  align-items: center;
  gap: 2.3px;
  color: #1919df;
  font-size: 4px;
  font-weight: 600;
}
.mock-task-timer svg { width: 6.9px; height: 6.9px; stroke: #1919df; }

.mock-task-coins {
  display: flex;
  align-items: center;
  gap: 2.3px;
  color: #da8101;
  font-size: 4px;
  font-weight: 700;
}
.mock-task-coins svg { width: 6.9px; height: 6.9px; fill: #da8101; }

.mock-task-body {
  padding: 6.9px;
  display: flex;
  flex-direction: column;
  gap: 6.9px;
}
.mock-task-question {
  font-size: 5.7px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.2;
  margin: 0;
}

.mock-task-options {
  display: flex;
  flex-direction: column;
  gap: 4.6px;
}
.mock-task-option {
  display: flex;
  align-items: center;
  gap: 4.6px;
}
.mock-task-radio {
  width: 6.9px;
  height: 6.9px;
}
.mock-task-radio svg {
  width: 100%;
  height: 100%;
}
.mock-task-option-box {
  flex: 1;
  height: 15.8px;
  border: 0.3px solid #bebebe;
  border-radius: 2.3px;
  display: flex;
  align-items: center;
  padding: 0 3.4px;
  font-size: 4.3px;
  color: #1a1a1a;
  background: #ffffff;
}
.mock-task-option.active .mock-task-option-box {
  background: #fbeee3;
  border-color: #ff6700;
}

.task-svg-coin-col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

.task-svg-coin {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: block;
}

/* App Referrals Illustration Styles */
.app-ref-illustration-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Scale the fixed-size grid to fill the wrapper width */
.ar-scale-wrapper {
  width: 100%;
  position: relative;
  flex-shrink: 0;
  /* height set dynamically by JS */
}

.ar-scale-wrapper::before {
  content: '';
  display: block;
  /* padding-top as aspect ratio: 120/458 = 26.2% */
  padding-top: 0;
}

/* The actual 458px grid, scaled down to fit the wrapper */
.ar-grid {
  position: absolute;
  width: 458px;
  height: 120px;
  left: 50%;
  top: 0;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--ar-scale, 0.83));
}

/* Each slot is absolute within the grid */
.ar-card-slot {
  position: absolute;
}

/* Left card: Milestone 3 — x=0, y=28, w=175.7, h=90.3, rotate(-12.4deg) */
.ar-left-slot {
  left: 0px;
  top: 28px;
  z-index: 1;
}

/* Right card: Milestone 2 — x=277, y=5.5, w=181, h=114, rotate(+12.61deg) */
.ar-right-slot {
  left: 277px;
  top: 6px;
  z-index: 1;
}

/* Center panel: Milestones — x=125, y=0, w=195, h=107 */
.ar-center-slot {
  left: 125px;
  top: 0px;
  z-index: 2;
}

/* Card base */
.ar-card {
  border: 1.143px solid #0f172a;
  border-radius: 6.844px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Public Sans', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.ar-card-left {
  width: 167px;
  transform: rotate(-12.4deg);
  background: #f4f4f4;
}

.ar-card-right {
  width: 167px;
  transform: rotate(12.61deg);
  background: #ffe8d4;
}

/* Card Body */
.ar-card-body {
  display: flex;
  flex-direction: column;
  gap: 2.3px;
  padding: 9px 9px 9px 13.7px;
  border-radius: 6.844px;
  border: 0.57px solid transparent;
}

.ar-body-grey {
  background: #ffffff;
  border-color: #e8e8e8;
}

.ar-body-orange {
  background: #ffffff;
  border-color: #ffb380;
  border-style: dashed;
}

/* Card Footer */
.ar-card-footer {
  display: flex;
  align-items: center;
  gap: 2.3px;
  padding: 4.5px 9px 4.5px 13.7px;
  font-size: 6.844px;
  font-weight: 700;
  color: #1a1a1a;
  height: 17px;
}

.ar-footer-grey {
  background: #f4f4f4;
}

.ar-footer-orange {
  background: #ffe8d4;
}

/* Milestone text */
.ar-milestone-label {
  font-size: 6.844px;
  color: #616161;
  font-weight: 400;
}
.ar-milestone-title {
  font-size: 8.555px;
  color: #1a1a1a;
  font-weight: 400;
}

/* Progress section (right card only) */
.ar-progress-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.ar-progress-track {
  height: 4.5px;
  background: #e8e8e8;
  border-radius: 22px;
  overflow: hidden;
  width: 100%;
}
.ar-progress-fill {
  height: 100%;
  width: 40%;
  background: #ff6700;
  border-radius: 56px;
}
.ar-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 6.844px;
  color: #1a1a1a;
}

/* SA coin badge */
.ar-coin {
  background: #ffb100;
  color: #ffffff;
  font-size: 5px;
  font-weight: 800;
  width: 11.4px;
  height: 11.4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Center panel */
.ar-panel {
  width: 195px;
  background: #faf8f6;
  border: 1.143px solid #0f172a;
  border-radius: 13.7px;
  padding: 13.7px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.ar-panel-header {
  font-size: 9.126px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Public Sans', sans-serif;
}

/* Inner milestone card (Milestone 1) */
.ar-inner-card {
  position: relative;
  border: 0.57px solid #ffb380;
  border-radius: 6.844px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ar-inner-verified {
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 13.7px;
  height: 13.7px;
  background: #ff6700;
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.ar-body-inner {
  background: #fff1e3;
  border-color: #ffb380;
  border-style: solid;
}

.ar-footer-inner {
  background: #ffe8d4;
  border-top: 0.57px dashed #ffcda8;
}



/* Streak Illustration Styles */
/* Streak Illustration Styles */
.streak-illustration-wrapper {
  position: relative;
  width: 100%;
  z-index: 10;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.mock-streak-card {
  width: 100%;
  max-width: 355px;
  background: #fffaf6;
  border: 1.3px solid #0f172a;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 11px 14.5px 45px;
  font-family: "Public Sans", sans-serif;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.mock-streak-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.6px;
  width: 100%;
  margin-bottom: 14.5px;
}

.mock-streak-label {
  font-size: 10.9px;
  font-weight: 700;
  color: #af4700;
  line-height: 10.9px;
}

.mock-streak-title {
  font-size: 18.2px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 25.5px;
}

/* Progress bar container — relative so nodes can be absolute within it */
.mock-streak-progress-container {
  position: relative;
  width: 100%;
  height: 7.3px;
  margin-top: 0;
}

/* Track (background) */
.mock-streak-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffd9bf;
  border-radius: 90px;
}

/* Fill (progress) — 34.6% = 110px / 318px ≈ day 8 of 28 */
.mock-streak-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 34.6%;
  background: #af4700;
  border-radius: 90px;
}

/* Nodes row */
.mock-streak-nodes {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
}

.mock-streak-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  top: 0;
  gap: 5.5px;
}

/* Inactive milestone dot */
.mock-streak-circle {
  width: 29px;
  height: 29px;
  background: #ffd9bf;
  border-radius: 50%;
}

/* Active milestone coin */
.mock-streak-coin {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Node label below dot */
.mock-streak-node span {
  position: absolute;
  top: calc(100% + 5.5px);
  font-size: 16.4px;
  color: #616161;
  font-weight: 400;
  white-space: nowrap;
}



/* Exam Referrals (Earn First Milestone) Illustration Styles */
.exam-ref-illustration-wrapper {
  position: relative;
  width: 100%;
  max-width: 240px;
  z-index: 10;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-er-card {
  width: 100%;
  background: #fffaf6;
  border: 1px solid #0f172a;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  font-family: "Public Sans", sans-serif;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.mock-er-handle-container {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  width: 100%;
}
.mock-er-handle {
  width: 31px;
  height: 2.5px;
  background: #cdc3bb;
  border-radius: 61px;
}

.mock-er-icons {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.mock-er-icons svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.mock-er-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-bottom: 12px;
}
.mock-er-title {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
}
.mock-er-desc {
  font-size: 10px;
  font-weight: 500;
  color: #48484a;
  line-height: 1.3;
}

.mock-er-field {
  width: 100%;
  background: #ffffff;
  border: 0.6px solid #bebebe;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  box-sizing: border-box;
}
.mock-er-field-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mock-er-field-label {
  font-size: 5px;
  color: #616161;
}
.mock-er-field-code {
  font-size: 9.5px;
  font-weight: 600;
  color: #1a1a1a;
}
.mock-er-copy {
  background: #f0f0f0;
  border: 0.6px solid #e8e8e8;
  border-radius: 2.5px;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}