/* RESPONSIVE STYLES (MOBILE-FIRST ARCHITECTURE) */

/* Global Anti-Overflow Guard */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Image responsive standard */
img, .question-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Touch targets and answer cards */
.answer-card {
  min-height: 52px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* BREAKPOINTS */

/* 1. Ultra-compact phones (<= 360px) */
@media (max-width: 360px) {
  .container, .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .brand-text-main {
    font-size: 1rem !important;
  }

  .stat-value {
    font-size: 1.35rem !important;
  }

  .q-badge-num {
    font-size: 0.9rem !important;
    padding: 5px 12px !important;
  }

  .btn {
    font-size: 0.925rem !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .exam-matrix-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }

  .matrix-btn {
    height: 38px !important;
    font-size: 0.9rem !important;
  }

  .answers-list {
    gap: 4px !important;
  }

  .answer-card {
    padding: 0.5rem 0.15rem !important;
    gap: 3px !important;
  }

  .answer-text {
    font-size: 0.75rem !important;
  }

  .answer-id-badge {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.85rem !important;
  }

  .timer-box {
    padding: 0 8px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    gap: 6px !important;
  }

  #btnSubmitExam {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 10px !important;
    font-size: 0.825rem !important;
  }

  .timer-digits {
    font-size: 1.2rem !important;
  }

  .quiz-nav-row,
  .exam-nav-buttons-row {
    gap: 4px !important;
  }

  .quiz-nav-row .btn,
  .exam-nav-buttons-row .btn {
    padding: 8px 2px !important;
    font-size: 0.775rem !important;
  }
}

/* 2. Standard Mobile (361px to 400px, e.g. 390px) */
@media (min-width: 361px) and (max-width: 400px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .exam-matrix-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .matrix-btn {
    height: 40px;
    font-size: 0.9rem;
  }
}

/* 3. Small Devices (<= 576px) */
@media (max-width: 575.98px) {
  .navbar-custom {
    padding: 0.5rem 0.75rem;
  }

  .brand-text-main {
    font-size: 1.05rem;
  }

  .brand-text-sub {
    display: none;
  }

  .hero-card {
    padding: 1.5rem 1rem;
    border-radius: var(--radius-md);
  }

  .hero-title {
    font-size: 1.45rem;
  }

  .hero-lead {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
  }

  .hero-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  .question-box {
    padding: 1.25rem 0.9rem;
    border-radius: var(--radius-md);
  }

  .question-text {
    font-size: 1.15rem;
    line-height: 1.55;
  }

  .answers-list {
    gap: 6px !important;
    margin-bottom: 1.25rem !important;
  }

  .answer-card {
    padding: 0.65rem 0.25rem !important;
    gap: 5px !important;
    min-height: 48px !important;
  }

  .answer-text {
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
  }

  .answer-id-badge {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.95rem !important;
  }

  .answer-state-icon {
    top: 4px !important;
    right: 4px !important;
    font-size: 0.95rem !important;
  }

  .quiz-nav-row,
  .exam-nav-buttons-row {
    gap: 6px !important;
  }

  .quiz-nav-row .btn,
  .exam-nav-buttons-row .btn {
    padding: 9px 4px !important;
    font-size: 0.825rem !important;
  }

  .quiz-nav-row .btn i,
  .exam-nav-buttons-row .btn i {
    font-size: 0.8rem !important;
  }

  .answers-review-row {
    gap: 5px !important;
  }

  .answer-review-col {
    font-size: 0.8rem !important;
  }

  .exam-header-bar {
    padding: 0.75rem 0.85rem;
  }

  .exam-header-controls {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .timer-box {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  #btnSubmitExam {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 16px !important;
    font-size: 0.9rem !important;
  }

  .timer-digits {
    font-size: 1.35rem !important;
  }

  .result-status-title {
    font-size: 1.6rem;
  }

  .result-score-big {
    font-size: 2.75rem;
  }

  /* Fixed bottom exam navigation bar on mobile (<= 767.98px) */
  .exam-nav-buttons-row {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    background: #ffffff !important;
    padding: 10px 14px !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .exam-nav-buttons-row .btn {
    flex: 1 1 0 !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
  }

  #examContainer {
    padding-bottom: 85px !important;
  }
}

/* 4. Tablets (576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-title {
    font-size: 1.65rem;
  }

  .question-box {
    padding: 1.5rem;
  }

  .exam-nav-buttons-row {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    background: #ffffff !important;
    padding: 10px 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    margin: 0 !important;
  }

  #examContainer {
    padding-bottom: 85px !important;
  }
}

/* 5. Medium Devices (768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-title {
    font-size: 1.85rem;
  }

  .exam-matrix-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 6. Desktops (992px to 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container {
    max-width: 960px;
  }
}

/* 7. Large Desktops (>= 1200px) */
@media (min-width: 1200px) {
  .container {
    max-width: 1180px;
  }
}

/* 8. Extra Large (>= 1440px and 1920px) */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}