/* ============================================
   BASE WRAPPER
============================================ */
.dq-quiz-root {
  max-width: 1060px;
  margin: 12px auto;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

button.dq-btn.dq-input-done {
  color: #000;
}

/* TITLE */
.dq-title {
  text-align: center;
  font-size: 36px;
  margin: 8px 0 18px;
  color: #012;
}

/* ============================================
   PROGRESS DOTS – Desktop + Mobile
============================================ */
.dq-dots-wrap {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 6px 0 16px;
  padding: 0 12px;
}

/* FIX: Remove global button padding from dots */
.dq-dot {
  width: 40px;
  height: 10px;
  border-radius: 8px;
  background: #d9f0ec;
  opacity: 0.85;
  border: 0;

  /* override global padding */
  padding: 0 !important;
  line-height: 0 !important;
}

.dq-dot.active {
  background: #083f36;
}

.dq-dot.done {
  background: #bddfd2;
}

/* Tablet */
@media (max-width: 768px) {
  .dq-dots-wrap { gap: 6px; }
  .dq-dot {
    width: 20px;
    height: 8px;
  }
}

/* Mobile FIX — Proper Small Dots */
@media (max-width: 480px) {
  .dq-dots-wrap { gap: 4px !important; }
  .dq-dot {
    width: 10px !important;
    height: 6px !important;
    border-radius: 4px !important;
  }
}

/* ============================================
   HEADER
============================================ */
.dq-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 12px;
  color: #053;
}

.dq-qcount {
  font-weight: 700;
  font-size: 18px;
}

/* ============================================
   CARD
============================================ */
.dq-card {
  padding: 18px;
  border-radius: 10px;
  background: #f0fbfa;
  border: 1px solid #dff3ef;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
}

.dq-prompt {
  font-weight: 700;
  font-size: 20px;
  margin-left: 8px;
  margin-bottom: 20px;
  color: #07131a;
}

/* ============================================
   AUDIO MC OPTIONS
============================================ */
.dq-aopt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e6f2ef;
  margin-bottom: 8px;
}

.dq-aopt.selected {
  border-color: #2f9d7a;
  box-shadow: 0 6px 12px rgba(0,0,0,0.04);
}

/* ============================================
   CAPITAL PAIR GRID
============================================ */
.dq-pair-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Override global padding */
.dq-pair-btn {
  padding: 10px 12px !important;
  border-radius: 8px;
  border: 1px solid #cfe6dd;
  background: #fff;
  cursor: pointer;
}

.dq-pair-btn.selected {
  background: #e6fff0;
  color: #000;
  border-color: #29a56a;
}

/* Tablet */
@media (max-width:800px){
  .dq-pair-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   IMAGE GRID
============================================ */
.dq-image-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.dq-image-cell {
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 6px;
  background: #fff;
}

.dq-image-cell img {
  max-width: 100%;
  max-height: 500px;
  object-fit: cover;
}

.dq-image-cell.selected {
  border-color: #23a06b;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

/* ============================================
   LARGE RADIO OPTION STYLE
============================================ */
.dq-option.dq-large-radio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px !important; /* override global */
  border-radius: 10px;
  border: 1px solid #e8f3ef;
  background: #fbfffe;
  margin: 8px 0;
  cursor: pointer;
  transition: 0.18s ease;
}

.dq-hidden-radio { position:absolute; left:-9999px; }

.dq-radio-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #073b5a;
  position: relative;
}

.dq-radio-circle::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: #c36;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.12s ease;
}

.dq-option.selected {
  background: #e8fbf6;
  border-color: #0a8d56;
  box-shadow: 0 8px 18px rgba(6,70,55,0.04);
}

.dq-option.selected .dq-radio-circle::after {
  transform: translate(-50%, -50%) scale(1);
}

.dq-large-label {
  font-size: 18px;
  font-weight: 600;
  color: #07202a;
}

/* ============================================
   SUB QUESTION BLOCKS
============================================ */
.dq-sub {
  margin-top: 12px;
  padding: 12px !important; /* override global */
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eef5f2;
}

.dq-sub-q {
  font-weight: 600;
  margin-bottom: 8px;
  color:#023;
}

/* ============================================
   MOBILE AUDIO FIX
============================================ */
.dq-sub-audio audio {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px;
  display: block;
  border-radius: 10px;
}

.dq-sub-audio {
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
}

/* ============================================
   INPUT TEXT
============================================ */
.dq-input-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.dq-input-text {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #bfe5d3;
  background: #fff;
}

.dq-input-text:disabled {
  background: #eef7f3;
  color: #6c7a75;
}

.dq-input-done {
  padding: 10px 14px !important;
  border-radius: 8px;
  background: #0a8d56;
  color: #fff;
  border: none;
  cursor: pointer;
}

.dq-input-done:disabled {
  background: #7abfa0;
}

/* MOBILE FIX FOR INPUT DONE BUTTON */
@media (max-width:480px){
  .dq-input-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .dq-input-text {
    width: 100%;
    font-size: 16px;
  }
  .dq-input-done {
    width: 100%;
    padding: 12px !important;
    font-size: 16px;
  }
}

/* ============================================
   ⭐ LETTER CLICK QUESTION TYPE
============================================ */
.dq-letter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.dq-letter-box {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cfe6dd;
  background: #ffffff;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: 0.16s ease;
}

.dq-letter-box.selected {
  background: #0a8d56;
  color: #ffffff;
  border-color: #0a8d56;
  box-shadow: 0 6px 16px rgba(0,0,0,0.16);
  transform: translateY(-1px);
}

/* Mobile adjustments for letters */
@media (max-width:480px){
  .dq-letter-grid {
    gap: 8px;
  }
  .dq-letter-box {
    min-width: 34px;
    min-height: 34px;
    padding: 8px 10px;
    font-size: 22px;
  }
}

/* ============================================
   NAVIGATION (Prev/Next)
============================================ */
#dq-nav,
#dq-nav-inner {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.dq-btn {
  padding: 10px 14px !important; /* override global */
  border-radius: 8px;
  border: 1px solid #cfe6dd;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

.dq-primary {
  background: #0a8d56;
  color: #fff;
  border-color: #0a8d56;
}

/* ============================================
   MOBILE – FULL WIDTH GREEN BUTTONS
============================================ */
@media (max-width:480px){
  #dq-nav-inner {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  #dq-nav-inner .dq-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px;
    text-align: center;

    /* Requested green buttons */
    background: #11a63a !important;
    color: #fff !important;
    border-color: #11a63a !important;
  }
}

/* ============================================
   RESULT CARD
============================================ */
.dq-result-card {
  max-width: 760px;
  margin: 24px auto;
  background: #e9fbf9;
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.dq-hero img {
  max-width: 140px;
  margin: 0 auto 12px;
}

.dq-result-sub {
  color: #254f48;
  max-width: 640px;
  margin: 0 auto 10px;
}

.dq-score-num {
  font-weight: 800;
  color:#0a6b47;
}

/* ============================================
   RESPONSIVE TEXT
============================================ */
@media (max-width:800px){
  .dq-large-label { font-size: 16px; }
}

@media (max-width:480px){
  .dq-large-label { font-size: 15px; }
}
@media (max-width:480px){
  #dq-nav {
      flex-direction: column;
      gap: 10px;
      width: 100%;
  }
  #dq-nav .dq-btn {
      width: 100% !important;
      background: #11a63a !important;
      color: #fff !important;
      border-color: #11a63a !important;
  }
}