/* =========================================================
   EXAMVEDA GLOBAL THEME
========================================================= */ :root {
  --ev-bg: #fff;
  --ev-page-bg: #f8f9fa;
  --ev-surface: #fff;
  --ev-text: #212529;
  --ev-border: #e5e7eb;
  --ev-hover: #f5f7fa;
  --ev-muted: #9aa0a6;
  --ev-primary: #0d6efd;
  --ev-accent-soft: rgba(13, 110, 253, .08);
}
[data-bs-theme="dark"] {
  --ev-bg: #151719;
  --ev-page-bg: #101214;
  --ev-surface: #151719;
  --ev-text: #e9ecef;
  --ev-border: #303338;
  --ev-hover: #22252a;
  --ev-muted: #7f858c;
  --ev-primary: #6ea8fe;
  --ev-accent-soft: rgba(110, 168, 254, .10);
}
/* =========================================================
   GLOBAL
========================================================= */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ev-page-bg);
  color: var(--ev-text);
  transition:
    background-color .2s ease, color .2s ease;
}
/* =========================================================
   NAVBAR
========================================================= */
.exam-navbar {
  min-height: 64px;
  background: var(--ev-bg);
  border-bottom: 1px solid var(--ev-border);
}
.exam-navbar .navbar-brand {
  margin-right: 28px;
  display: flex;
  align-items: center;
}
.exam-navbar .navbar-brand img {
  width: auto;
  max-width: 170px;
  max-height: 42px;
}
/* =========================================================
   LOGO THEME
========================================================= */
.logo-dark {
  display: none;
}
[data-bs-theme="dark"] .logo-light {
  display: none;
}
[data-bs-theme="dark"] .logo-dark {
  display: block;
}
/* =========================================================
   DESKTOP NAVIGATION
========================================================= */
.exam-navbar .nav-link {
  color: var(--ev-text);
  font-size: 15px;
  font-weight: 500;
  padding: 20px 12px;
  white-space: nowrap;
}
.exam-navbar .nav-link:hover {
  color: var(--ev-primary);
}
/* =========================================================
   DESKTOP MEGA MENU
========================================================= */
@media(min-width:992px) {
  .mega-dropdown {
    position: static;
  }
  .mega-dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  .mega-menu {
    position: absolute;
    left: 15px;
    right: 15px;
    width: auto;
    max-width: none;
    padding: 24px;
    background: var(--ev-bg);
    border: 1px solid var(--ev-border);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
  }
  .mega-group {
    padding: 0 20px;
    border-right: 1px solid var(--ev-border);
  }
  .mega-group:first-child {
    padding-left: 0;
  }
  .mega-group:last-child {
    padding-right: 0;
    border-right: 0;
  }
}
/* =========================================================
   MEGA MENU CONTENT
========================================================= */
.mega-group-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ev-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.mega-link {
  display: block;
  padding: 8px 10px;
  margin-left: -10px;
  color: var(--ev-text);
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
}
.mega-link:hover {
  background: var(--ev-hover);
  color: var(--ev-primary);
}
/* =========================================================
   THEME BUTTON
========================================================= */
.ev-theme-button {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ev-border);
  border-radius: 50%;
  background: var(--ev-bg);
  color: var(--ev-text);
  font-size: 17px;
  transition:
    background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ev-theme-button:hover {
  background: var(--ev-hover);
  color: var(--ev-primary);
}
/* =========================================================
   LOGIN
========================================================= */
.ev-login {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ev-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.ev-login:hover {
  color: var(--ev-primary);
}
/* =========================================================
   USER MENU
========================================================= */
.ev-user-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: var(--ev-text);
  font-size: 15px;
  font-weight: 600;
}
.ev-user-button:hover {
  color: var(--ev-primary);
}
.ev-user-icon {
  font-size: 23px;
}
.ev-user-dropdown {
  min-width: 210px;
  padding: 8px;
  background: var(--ev-bg);
  border: 1px solid var(--ev-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.ev-user-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ev-text);
  padding: 10px 12px;
  border-radius: 6px;
}
.ev-user-dropdown .dropdown-item:hover {
  background: var(--ev-hover);
  color: var(--ev-primary);
}
/* =========================================================
   MOBILE OFFCANVAS
========================================================= */
.exam-offcanvas {
  width: 88% !important;
  max-width: 420px;
  background: var(--ev-bg);
  color: var(--ev-text);
}
/* =========================================================
   MOBILE MENU TOOLS
========================================================= */
.mobile-menu-tools {
  padding: 8px 20px;
  border-bottom: 1px solid var(--ev-border);
}
.mobile-tool-button, .mobile-user-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border: 0;
  background: transparent;
  color: var(--ev-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.mobile-tool-button:hover, .mobile-user-button:hover {
  color: var(--ev-primary);
}
.mobile-tool-left, .mobile-user-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile-tool-icon {
  width: 22px;
  text-align: center;
  font-size: 18px;
}
.mobile-user-icon {
  font-size: 23px;
}
/* =========================================================
   MOBILE NAVIGATION
========================================================= */
.mobile-section {
  border-bottom: 1px solid var(--ev-border);
}
.mobile-section-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px;
  border: 0;
  background: var(--ev-bg);
  color: var(--ev-text);
  text-align: left;
}
.mobile-section-button:hover {
  background: var(--ev-hover);
}
/* =========================================================
   MOBILE ARROW
========================================================= */
.mobile-arrow {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ev-muted);
  border-bottom: 2px solid var(--ev-muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.mobile-section-button[aria-expanded="true"] .mobile-arrow {
  transform: rotate(225deg);
}
/* =========================================================
   MOBILE MENU CONTENT
========================================================= */
.mobile-section-content {
  background: var(--ev-hover);
}
.mobile-group-title {
  padding: 15px 20px 7px;
  color: var(--ev-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mobile-link {
  display: block;
  padding: 11px 20px 11px 35px;
  color: var(--ev-text);
  text-decoration: none;
  font-size: 15px;
}
.mobile-link:hover {
  background: var(--ev-hover);
  color: var(--ev-primary);
}
/* =========================================================
   MOBILE HOME
========================================================= */
.mobile-home {
  display: block;
  padding: 16px 20px;
  color: var(--ev-text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--ev-border);
}
.mobile-home:hover {
  background: var(--ev-hover);
}
/* =========================================================
   MOBILE ASK QUESTION
========================================================= */
.mobile-ask {
  padding: 20px;
  border-top: 1px solid var(--ev-border);
}
/* =========================================================
   NAVBAR RESPONSIVE
========================================================= */
@media(max-width:991.98px) {
  .exam-navbar {
    min-height: 60px;
  }
  .exam-navbar .navbar-brand {
    margin-right: 0;
  }
  .exam-navbar .navbar-brand img {
    max-width: 150px;
    max-height: 38px;
  }
}
@media(max-width:375px) {
  .exam-offcanvas {
    width: 92% !important;
  }
}
/* =========================================================
   GLOBAL BREADCRUMBS
========================================================= */
.ev-breadcrumb-wrapper {
  width: 100%;
  background: var(--ev-bg);
  border-bottom: 1px solid var(--ev-border);
}
.ev-breadcrumb {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: .65rem 0;
  font-size: .88rem;
  line-height: 1.4;
}
.ev-breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--ev-muted);
}
.ev-breadcrumb .breadcrumb-item a {
  color: var(--ev-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.ev-breadcrumb .breadcrumb-item a:hover {
  color: var(--ev-primary);
}
.ev-breadcrumb .breadcrumb-item.active {
  color: var(--ev-text);
  font-weight: 500;
}
.ev-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ev-muted);
  opacity: .65;
}
@media(max-width:767.98px) {
  .ev-breadcrumb {
    min-height: 42px;
    padding: .55rem 0;
    font-size: .82rem;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ev-breadcrumb::-webkit-scrollbar {
    display: none;
  }
}
/* =========================================================
   SECTION INFORMATION
========================================================= */
.section-info {
  margin-bottom: .75rem;
  color: var(--ev-muted);
  text-align: center;
  font-size: .9rem;
  line-height: 1.5;
}
.section-info strong {
  color: var(--ev-text);
  font-weight: 600;
}
/* =========================================================
   GLOBAL HORIZONTAL SCROLL NAVIGATION
========================================================= */
.ev-scroll-nav {
  width: 100%;
  margin: 1rem 0;
  background: var(--ev-accent-soft);
  padding: 0.6em;
  border-radius: 0.7em;
}
.ev-scroll-nav-wrapper {
  position: relative;
  width: 100%;
}
/* =========================================================
   SCROLL TRACK
========================================================= */
.ev-scroll-nav-track {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.ev-scroll-nav-track::-webkit-scrollbar {
  display: none;
}
/* =========================================================
   NAV
========================================================= */
.ev-scroll-nav-track .nav {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  width: max-content;
  padding: .15rem 0;
}
/* =========================================================
   NAV LINK
========================================================= */
.ev-scroll-nav-track .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: .55rem .9rem;
  border: 1px solid var(--ev-border);
  border-radius: 7px;
  background: var(--ev-bg);
  color: var(--ev-text);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ev-scroll-nav-track .nav-link:hover {
  background: var(--ev-hover);
  color: var(--ev-primary);
  border-color: var(--ev-primary);
}
/* =========================================================
   ACTIVE
========================================================= */
.ev-scroll-nav-track .nav-link.active {
  background: var(--ev-primary);
  border-color: var(--ev-primary);
  color: #fff;
}
/* =========================================================
   DESKTOP SCROLL BUTTONS
========================================================= */
.ev-scroll-nav-button {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ev-border);
  border-radius: 50%;
  background: var(--ev-bg);
  color: var(--ev-primary);
  box-shadow:
    0 2px 7px rgba(0, 0, 0, .12);
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 1;
  transition:
    opacity .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.ev-scroll-nav-button:hover {
  background: var(--ev-hover);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .16);
}
.ev-scroll-nav-button:disabled {
  opacity: 0;
  pointer-events: none;
}
.ev-scroll-nav-prev {
  left: -17px;
}
.ev-scroll-nav-next {
  right: -17px;
}
/* =========================================================
   MOBILE INDICATOR
========================================================= */
.ev-scroll-nav-indicator {
  display: none !important;
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767.98px) {
  .ev-scroll-nav {
    margin: 1rem 0;
  }
  .ev-scroll-nav-track {
    padding-right: 50px;
    /*
         * Native touch scrolling
         */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .ev-scroll-nav-button {
    display: none;
  }
  .ev-scroll-nav-indicator {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 7px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--ev-bg) 60%);
    color: var(--ev-primary);
  }
  .ev-scroll-nav-indicator i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ev-bg);
    box-shadow:
      0 1px 5px rgba(0, 0, 0, .12);
    font-size: .9rem;
    animation:
      evScrollNavHint 1.5s ease-in-out infinite;
  }
  .ev-scroll-nav-track .nav-link {
    padding: .5rem .8rem;
    font-size: .88rem;
  }
}
/* =========================================================
   SCROLL HINT
========================================================= */
@keyframes evScrollNavHint {
  0%, 100% {
    transform: translateX(0);
    opacity: .5;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
}
/* =========================================================
   EXAM NAME / EXAM INTERNAL PAGE
   COMMON CONTENT COMPONENTS
========================================================= */
.exam-hero {
  background: var(--ev-surface);
  color: var(--ev-text);
  border-radius: 10px;
  padding: 35px;
  margin-bottom: 30px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .05);
}
.exam-logo {
  max-height: 140px;
  width: auto;
}
.exam-article {
  background: var(--ev-surface);
  color: var(--ev-text);
  border-radius: 10px;
  padding: .5em;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .05);
}
.exam-article img {
  max-width: 100%;
  height: auto;
}
.sidebar-card {
  background: var(--ev-surface);
  color: var(--ev-text);
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .05);
}
.section-title {
  margin-top: 50px;
  margin-bottom: 20px;
  font-weight: 700;
  color: var(--ev-text);
}
.sidebar-card .table {
  color: var(--ev-text);
}
.sidebar-card .table td, .sidebar-card .table th {
  padding: .75rem;
}
/* =========================================================
   EXAM EXPLORE SECTION
========================================================= */
.exam-explore {
  padding: 1.5rem;
  border-radius: 16px;
  background: var(--ev-accent-soft);
}
.exam-explore-header h2 {
  font-weight: 700;
  color: var(--ev-text);
}
.exam-topic-card {
  display: block;
  height: 100%;
  background: var(--ev-surface);
  color: var(--ev-text);
  border-radius: 12px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .06);
  transition:
    transform .2s ease, box-shadow .2s ease;
}
.exam-topic-card:hover {
  color: var(--ev-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}
.exam-topic-card-body {
  min-height: 76px;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.exam-topic-exam {
  color: var(--ev-muted);
  font-size: .78rem;
  margin-bottom: 2px;
}
.exam-topic-title {
  font-weight: 600;
  line-height: 1.4;
}
.exam-topic-arrow {
  flex-shrink: 0;
  color: var(--ev-primary);
  font-size: 1.15rem;
  transition: transform .2s ease;
}
.exam-topic-card:hover .exam-topic-arrow {
  transform: translateX(4px);
}
/* =========================================================
   EXAM PAGE RESPONSIVE
========================================================= */
@media(max-width:767.98px) {
  .exam-hero {
    padding: 24px 20px;
    border-radius: 10px;
  }
  .exam-hero h1 {
    font-size: 2rem;
  }
  .exam-hero .lead {
    font-size: 1rem;
    line-height: 1.6;
  }
  .exam-logo {
    max-height: 100px;
  }
  .exam-article {
    padding: .25rem;
  }
  .section-title {
    margin-top: 35px;
    margin-bottom: 15px;
  }
  .exam-explore {
    padding: 1rem;
    border-radius: 12px;
  }
}
/* =========================================================
   TABLE RESPONSIVE
========================================================= */
.sidebar-card .table {
  margin-bottom: 0;
}
.sidebar-card .table th {
  font-weight: 600;
}
@media(max-width:575.98px) {
  .sidebar-card .table {
    font-size: .9rem;
  }
  .sidebar-card .table td, .sidebar-card .table th {
    padding: .6rem;
  }
}
/* =========================================================
   EXAM ORGANIZATION DIRECTORY
========================================================= */
.exam-organization-exams {
  margin-top: 2.5rem;
}
/* =========================================================
   SECTION HEADER
========================================================= */
.exam-organization-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 1.5rem;
}
.exam-organization-section-heading h2 {
  margin: 0;
  color: var(--ev-text);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.3;
}
.exam-organization-section-heading p {
  margin: .4rem 0 0;
  color: var(--ev-muted);
  font-size: .92rem;
}
.exam-count {
  flex-shrink: 0;
  padding: .4rem .8rem;
  border: 1px solid var(--ev-border);
  border-radius: 50rem;
  background: var(--ev-bg);
  color: var(--ev-muted);
  font-size: .8rem;
  font-weight: 600;
}
/* =========================================================
   EXAM CARD
========================================================= */
.exam-directory-card {
  display: block;
  height: 100%;
  background: var(--ev-bg);
  color: var(--ev-text);
  border: 1px solid var(--ev-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, .035);
  transition:
    transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.exam-directory-card:hover {
  color: var(--ev-text);
  transform: translateY(-3px);
  border-color: var(--ev-primary);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .09);
}
/* =========================================================
   MAIN CARD AREA
========================================================= */
.exam-directory-main {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 14px;
}
/* =========================================================
   LOGO
========================================================= */
.exam-directory-logo {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ev-hover);
  border: 1px solid var(--ev-border);
  border-radius: 12px;
  overflow: hidden;
}
.exam-directory-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}
.exam-directory-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ev-primary);
}
/* =========================================================
   EXAM INFORMATION
========================================================= */
.exam-directory-info {
  min-width: 0;
  flex: 1;
}
.exam-directory-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.exam-directory-title-row h3 {
  margin: 0;
  color: var(--ev-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}
.exam-directory-title-row i {
  flex-shrink: 0;
  color: var(--ev-muted);
  font-size: 1rem;
  transition:
    transform .2s ease, color .2s ease;
}
.exam-directory-card:hover .exam-directory-title-row i {
  color: var(--ev-primary);
  transform: translate(2px, -2px);
}
.exam-directory-full-name {
  margin-top: 4px;
  color: var(--ev-muted);
  font-size: .8rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* =========================================================
   META
========================================================= */
.exam-directory-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 20px 14px;
}
.exam-directory-meta span {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: var(--ev-hover);
  border: 1px solid var(--ev-border);
  border-radius: 6px;
  color: var(--ev-muted);
  font-size: .72rem;
  font-weight: 600;
}
/* =========================================================
   USEFUL LINKS
========================================================= */
.exam-directory-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 20px;
  padding: 12px 0;
  border-top: 1px solid var(--ev-border);
  border-bottom: 1px solid var(--ev-border);
}
.exam-directory-links span {
  color: var(--ev-muted);
  font-size: .76rem;
  font-weight: 500;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid var(--ev-border);
}
.exam-directory-links span:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}
/* =========================================================
   CTA
========================================================= */
.exam-directory-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: var(--ev-primary);
  font-size: .82rem;
  font-weight: 600;
}
.exam-directory-cta i {
  font-size: .95rem;
  transition: transform .2s ease;
}
.exam-directory-card:hover .exam-directory-cta i {
  transform: translateX(4px);
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767.98px) {
  .exam-organization-section-heading {
    align-items: flex-start;
  }
  .exam-organization-section-heading h2 {
    font-size: 1.4rem;
  }
  .exam-organization-section-heading p {
    font-size: .84rem;
  }
  .exam-count {
    font-size: .72rem;
  }
  .exam-directory-main {
    padding: 16px;
  }
  .exam-directory-logo {
    width: 62px;
    height: 62px;
    border-radius: 10px;
  }
  .exam-directory-title-row h3 {
    font-size: 1.05rem;
  }
  .exam-directory-meta {
    padding-left: 16px;
    padding-right: 16px;
  }
  .exam-directory-links {
    margin-left: 16px;
    margin-right: 16px;
  }
  .exam-directory-cta {
    padding: 13px 16px;
  }
}
/* =========================================================
   EXAM ORGANIZATION
   EXPLORE EXAM SECTIONS
========================================================= */
.exam-sections {
  margin-top: 3.5rem;
}
/* =========================================================
   HEADER
========================================================= */
.exam-sections-header {
  margin-bottom: 1.25rem;
}
.exam-sections-header h2 {
  color: var(--ev-text);
  font-size: 1.65rem;
  font-weight: 700;
}
.exam-sections-header p {
  color: var(--ev-muted);
  font-size: .92rem;
}
/* =========================================================
   ACCORDION
========================================================= */
.exam-sections-accordion {
  border: 1px solid var(--ev-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--ev-bg);
}
/* =========================================================
   ACCORDION ITEM
========================================================= */
.exam-section-item {
  border: 0;
  border-bottom: 1px solid var(--ev-border);
  background: var(--ev-bg);
}
.exam-section-item:last-child {
  border-bottom: 0;
}
/* =========================================================
   EXAM BUTTON
========================================================= */
.exam-section-button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  background: var(--ev-bg);
  color: var(--ev-text);
  box-shadow: none !important;
}
.exam-section-button:not(.collapsed) {
  background: var(--ev-hover);
  color: var(--ev-text);
}
.exam-section-button:hover {
  background: var(--ev-hover);
}
/* Remove Bootstrap blue focus */
.exam-section-button:focus {
  box-shadow: none;
}
/* =========================================================
   LOGO
========================================================= */
.exam-section-logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ev-border);
  border-radius: 9px;
  background: var(--ev-bg);
  overflow: hidden;
}
.exam-section-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}
/* =========================================================
   EXAM NAME
========================================================= */
.exam-section-name {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.exam-section-name strong {
  color: var(--ev-text);
  font-size: 1rem;
  line-height: 1.4;
}
.exam-section-name small {
  margin-top: 2px;
  color: var(--ev-muted);
  font-size: .76rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
}
/* =========================================================
   SECTION COUNT
========================================================= */
.exam-section-count {
  flex-shrink: 0;
  padding: 4px 9px;
  border: 1px solid var(--ev-border);
  border-radius: 50rem;
  background: var(--ev-hover);
  color: var(--ev-muted);
  font-size: .72rem;
  font-weight: 600;
}
/* =========================================================
   ACCORDION BODY
========================================================= */
.exam-section-item .accordion-body {
  padding: 0;
  background: var(--ev-hover);
  border-top: 1px solid var(--ev-border);
}
/* =========================================================
   INTERNAL PAGE LINKS
========================================================= */
.exam-section-links {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ev-border);
}
.exam-section-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  background: var(--ev-bg);
  color: var(--ev-text);
  text-decoration: none;
  font-size: .87rem;
  transition:
    background-color .15s ease, color .15s ease;
}
.exam-section-link:hover {
  background: var(--ev-hover);
  color: var(--ev-primary);
}
.exam-section-link-name {
  line-height: 1.4;
}
.exam-section-link i {
  flex-shrink: 0;
  color: var(--ev-muted);
  font-size: .8rem;
  transition:
    transform .15s ease, color .15s ease;
}
.exam-section-link:hover i {
  color: var(--ev-primary);
  transform: translateX(3px);
}
/* =========================================================
   VIEW EXAM
========================================================= */
.exam-section-view-exam {
  padding: 13px 16px;
  background: var(--ev-bg);
  border-top: 1px solid var(--ev-border);
  text-align: right;
}
.exam-section-view-exam a {
  color: var(--ev-primary);
  font-size: .82rem;
  font-weight: 600;
}
.exam-section-view-exam a:hover {
  color: var(--ev-primary);
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767.98px) {
  .exam-sections {
    margin-top: 2.5rem;
  }
  .exam-sections-header h2 {
    font-size: 1.4rem;
  }
  .exam-sections-header p {
    font-size: .84rem;
    line-height: 1.5;
  }
  .exam-section-button {
    padding: 13px 14px;
    gap: 10px;
  }
  .exam-section-logo {
    width: 42px;
    height: 42px;
  }
  .exam-section-name strong {
    font-size: .92rem;
  }
  .exam-section-name small {
    max-width: 160px;
  }
  .exam-section-count {
    font-size: .68rem;
    padding: 3px 7px;
  }
  .exam-section-links {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
  .exam-section-link {
    padding: 12px;
    font-size: .8rem;
  }
  .exam-section-view-exam {
    text-align: center;
  }
}
/* =========================================================
   VERY SMALL MOBILE
========================================================= */
@media(max-width:420px) {
  .exam-section-count {
    display: none;
  }
  .exam-section-name small {
    max-width: 140px;
  }
  .exam-section-links {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   GLOBAL PAGINATION
========================================================= */
#pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}
/*
|--------------------------------------------------------------------------
| Pagination Container
|--------------------------------------------------------------------------
*/
#pagination > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem;
}
/*
|--------------------------------------------------------------------------
| Pagination Items
|--------------------------------------------------------------------------
*/
#pagination > div > a, #pagination > div > span {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .65rem;
  color: var(--ev-text);
  background: var(--ev-bg);
  border: 1px solid var(--ev-border);
  border-radius: .5rem;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition:
    background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/
#pagination > div > a:hover {
  color: var(--ev-primary);
  background: var(--ev-hover);
  border-color: var(--ev-primary);
  transform: translateY(-1px);
}
/*
|--------------------------------------------------------------------------
| Active Page
|--------------------------------------------------------------------------
*/
#pagination > div > span.active {
  color: #fff;
  background: var(--ev-primary);
  border-color: var(--ev-primary);
  font-weight: 600;
  box-shadow:
    0 .25rem .75rem rgba(13, 110, 253, .20);
}
/*
|--------------------------------------------------------------------------
| Previous / Next Icons
|--------------------------------------------------------------------------
*/
#pagination > div > a i {
  font-size: 1rem;
}
/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media (max-width: 575.98px) {
  #pagination {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  #pagination::-webkit-scrollbar {
    display: none;
  }
  #pagination > div {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding: 0 .5rem;
  }
  #pagination > div > a, #pagination > div > span {
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
    padding: .3rem .55rem;
  }
}
/* =========================================================
   UNIVERSAL PAGE HEADER
========================================================= */
.page-header {
  width: 100%;
}
.page-header-container {
  padding: 1.4rem;
  background: var(--ev-accent-soft);
  border-radius: 1em;
  margin-bottom: 1.5em;
}
.page-header-full {
  padding: 1.5rem 0;
  border-top: 1px solid var(--ev-border);
  border-bottom: 1px solid var(--ev-border);
  background: var(--ev-bg);
}
.page-header-title {
  margin: 0;
  color: var(--ev-primary);
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 700;
}
.page-header-description {
  margin: .5rem 0 0;
  max-width: 900px;
  color: var(--ev-muted);
  font-size: .95rem;
  line-height: 1.6;
}
@media(max-width:767.98px) {
  .page-header-container {
    padding: .75rem;
  }
  .page-header-full {
    padding: 1rem;
  }
  .page-header-title {
    font-size: 1.25rem;
  }
  .page-header-description {
    font-size: .9rem;
  }
}
/* =========================================================
   CATEGORY PAGE
   ========================================================= */
/* =========================================================
   CATEGORY SECTION HEADING
   ========================================================= */
.category-section-heading {
  margin-bottom: 1rem;
}
.category-section-heading h2 {
  margin: 0 0 .4rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ev-text);
}
.category-section-heading p {
  margin: 0;
  color: var(--ev-muted);
  font-size: .95rem;
  line-height: 1.6;
}
/* =========================================================
   CATEGORY CHAPTER LIST
   ========================================================= */
.category-chapters {
  background: var(--ev-surface);
  color: var(--ev-text);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 30px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .05);
}
.category-chapter-list {
  width: 100%;
  border-top: 1px solid var(--ev-border);
}
.category-chapter-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem .5rem;
  border-bottom: 1px solid var(--ev-border);
  color: var(--ev-text);
  text-decoration: none;
  transition:
    background-color .2s ease, padding-left .2s ease;
}
.category-chapter-list-item:hover {
  background: var(--ev-hover);
  padding-left: 1rem;
}
/* =========================================================
   CHAPTER ICON
   ========================================================= */
.category-chapter-list-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ev-border);
  border-radius: .5rem;
  background: var(--ev-bg);
  color: var(--ev-primary);
  font-size: 1.15rem;
}
/* =========================================================
   CHAPTER CONTENT
   ========================================================= */
.category-chapter-list-content {
  min-width: 0;
  flex: 1;
}
.category-chapter-list-title {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ev-text);
}
.category-chapter-list-description {
  display: block;
  margin-top: .2rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ev-muted);
}
/* =========================================================
   CHAPTER ARROW
   ========================================================= */
.category-chapter-list-arrow {
  flex: 0 0 auto;
  color: var(--ev-muted);
  font-size: 1rem;
  transition:
    color .2s ease, transform .2s ease;
}
.category-chapter-list-item:hover .category-chapter-list-arrow {
  color: var(--ev-primary);
  transform: translateX(3px);
}
/* =========================================================
   SPECIAL SECTION
   ========================================================= */
.category-special-section {
  margin-top: 3rem;
}
/* =========================================================
   EMPTY STATE
   ========================================================= */
.category-empty-state {
  padding: 2rem 1rem;
  text-align: center;
  border: 1px solid var(--ev-border);
  border-radius: .5rem;
  color: var(--ev-muted);
}
.category-empty-state i {
  display: block;
  font-size: 1.75rem;
  margin-bottom: .5rem;
}
.category-empty-state p {
  margin: 0;
}
/* =========================================================
   CATEGORY SIDEBAR
   ========================================================= */
.category-sidebar {
  min-height: 100px;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:767.98px) {
  .category-page-header {
    margin-bottom: 1.5rem;
  }
  .category-page-title {
    font-size: 1.7rem;
  }
  .category-page-description {
    font-size: .95rem;
  }
  .category-section-heading h2 {
    font-size: 1.2rem;
  }
  .category-chapter-list-item {
    gap: .75rem;
    padding: .9rem .25rem;
  }
  .category-chapter-list-item:hover {
    padding-left: .5rem;
  }
  .category-chapter-list-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 1rem;
  }
  .category-chapter-list-title {
    font-size: .95rem;
  }
  .category-chapter-list-description {
    font-size: .8rem;
  }
}
/* =========================================================
   QUESTION PAGE
========================================================= */
.question-page {
  width: 100%;
}
/* =========================================================
   QUESTION BOX
========================================================= */
.question-box {
  position: relative;
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 1.5rem;
  background: var(--ev-bg);
  border: 1px solid var(--ev-border);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .03), 0 4px 14px rgba(0, 0, 0, .04);
  transition:
    border-color .2s ease, box-shadow .2s ease;
}
.question-box:hover {
  border-color: #d8dde3;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .04), 0 8px 22px rgba(0, 0, 0, .05);
}
/* =========================================================
   QUESTION TITLE
========================================================= */
.question-title {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.question-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--ev-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    0 3px 8px rgba(13, 110, 253, .18);
}
.question-text {
  flex: 1;
  min-width: 0;
  color: var(--ev-text);
  font-size: 1.3rem;
  line-height: 1.65;
  font-weight: 700;
}
/* =========================================================
   OPTIONS
========================================================= */
.question-options {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.25rem;
}
.question-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: .65rem .75rem;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ev-text);
  background: transparent;
  transition:
    background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.question-option:hover {
  background: var(--ev-hover);
  border-color: var(--ev-border);
}
.question-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* =========================================================
   OPTION LETTER
========================================================= */
.option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  color: var(--ev-text);
  font-size: .95rem;
  font-weight: 700;
}
/* =========================================================
   RADIO
========================================================= */
.option-radio {
  position: relative;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-right: .75rem;
  border: 1.5px solid #adb5bd;
  border-radius: 50%;
  background: var(--ev-bg);
  transition:
    border-color .18s ease, background .18s ease;
}
.question-option input:checked + .option-letter + .option-radio {
  border-color: var(--ev-primary);
}
.question-option input:checked + .option-letter + .option-radio::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 4px;
  left: 4px;
  border-radius: 50%;
  background: var(--ev-primary);
}
/* =========================================================
   OPTION TEXT
========================================================= */
.option-text {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}
.option-result {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  margin-left: .5rem;
  font-size: 1rem;
  font-weight: 700;
}
/* =========================================================
   CORRECT
========================================================= */
.question-option.option-correct {
  color: #198754;
  background: rgba(25, 135, 84, .07);
  border-color: rgba(25, 135, 84, .18);
}
.question-option.option-correct .option-letter {
  color: #198754;
}
.question-option.option-correct .option-radio {
  border-color: #198754;
  background: #198754;
}
.question-option.option-correct .option-radio::after {
  background: #fff;
}
.question-option.option-correct .option-result {
  color: #198754;
}
/* =========================================================
   WRONG
========================================================= */
.question-option.option-wrong {
  color: var(--ev-muted);
  background: rgba(220, 53, 69, .035);
  border-color: rgba(220, 53, 69, .10);
}
.question-option.option-wrong .option-result {
  color: #dc3545;
}
/* =========================================================
   ANSWERED STATE
========================================================= */
.question-box.answered .question-option:not(.option-correct):not(.option-wrong) {
  color: var(--ev-muted);
}
.question-box.answered .question-option:not(.option-correct):not(.option-wrong):hover {
  background: transparent;
  border-color: transparent;
}
.question-box.answered .question-option {
  cursor: default;
}
/* =========================================================
   ACTION BUTTONS
========================================================= */
.question-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--ev-border);
}
.question-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 36px;
  padding: .45rem .75rem;
  border: 1px solid var(--ev-border);
  border-radius: 7px;
  background: var(--ev-bg);
  color: var(--ev-text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.question-action-btn:hover {
  background: var(--ev-hover);
  border-color: #cbd1d8;
  color: var(--ev-primary);
}
.question-action-btn:active {
  transform: translateY(1px);
}
.question-solution-btn {
  background: var(--ev-primary);
  border-color: var(--ev-primary);
  color: #fff;
}
.question-solution-btn:hover {
  background: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}
.question-save-btn:hover {
  color: #dc3545;
}
/* =========================================================
   SOLUTION
========================================================= */
.question-solution {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows .35s ease, opacity .25s ease;
}
.question-solution-inner {
  overflow: hidden;
}
.question-solution.show {
  grid-template-rows: 1fr;
  opacity: 1;
}
.question-solution-content {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  transition:
    margin-top .35s ease, padding-top .35s ease;
}
.question-solution.show .question-solution-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ev-border);
}
/* =========================================================
   SOLUTION HEADING
========================================================= */
.question-solution-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  color: var(--ev-primary);
  font-size: .95rem;
  font-weight: 700;
}
.question-solution-heading i {
  font-size: 1rem;
}
/* =========================================================
   ANSWER
========================================================= */
.question-answer {
  margin-bottom: 1rem;
  color: var(--ev-text);
  font-size: .95rem;
  line-height: 1.6;
}
.question-solution-label {
  color: var(--ev-primary);
  font-size: .9rem;
  font-weight: 600;
}
.question-answer .question-solution-label {
  display: inline;
  margin-right: .35rem;
}
/* =========================================================
   SOLUTION BODY
========================================================= */
.question-solution-body {
  color: var(--ev-text);
  font-size: 1.15rem;
  line-height: 1.75;
}
/* =========================================================
   NO SOLUTION
========================================================= */
.question-no-solution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  color: var(--ev-muted);
  font-size: .9rem;
  line-height: 1.6;
}
.question-no-solution a {
  color: var(--ev-primary);
  text-decoration: none;
  font-weight: 600;
}
.question-no-solution a:hover {
  text-decoration: underline;
}
/* =========================================================
   DIRECTION
========================================================= */
.question-direction {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--ev-border);
  border-left: 3px solid var(--ev-primary);
  border-radius: 8px;
  background: var(--ev-hover);
  color: var(--ev-text);
  line-height: 1.6;
}
.question-image {
  margin-bottom: 1.25rem;
  text-align: center;
}
.question-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* =========================================================
   EMPTY STATE
========================================================= */
.question-empty {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem;
  border: 1px solid var(--ev-border);
  border-radius: 10px;
  background: var(--ev-bg);
  color: var(--ev-muted);
}
/* =========================================================
   SIDEBAR
========================================================= */
.question-sidebar {
  min-height: 100px;
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767.98px) {
  .question-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 10px;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, .04);
  }
  .question-title {
    gap: .7rem;
    margin-bottom: 1.1rem;
  }
  .question-number {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: .9rem;
  }
  .question-text {
    font-size: 1.25rem;
    line-height: 1.6;
  }
  .question-option {
    min-height: 46px;
    padding: .6rem .5rem;
  }
  .option-letter {
    flex: 0 0 25px;
    width: 25px;
    font-size: .9rem;
  }
  .option-radio {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: .6rem;
  }
  .question-option input:checked + .option-letter + .option-radio::after {
    width: 8px;
    height: 8px;
    top: 4px;
    left: 4px;
  }
  .option-text {
    font-size: .95rem;
  }
  .question-actions {
    gap: .4rem;
  }
  .question-action-btn {
    min-height: 34px;
    padding: .4rem .6rem;
    font-size: .8rem;
  }
  .question-action-btn i {
    font-size: .85rem;
  }
}

/* =========================================================
   SAVE ALERT
========================================================= */

.question-save-alert{
    display:none;

    margin-top:.75rem;
}


.question-save-message{
    display:flex;

    align-items:flex-start;

    gap:.5rem;

    padding:.65rem .75rem;

    border:1px solid var(--ev-border);

    border-radius:7px;

    font-size:.85rem;

    line-height:1.5;
}


.question-save-message i{
    flex:0 0 auto;

    margin-top:.1rem;

    font-size:1rem;
}


.question-save-message a{
    color:var(--ev-primary);

    font-weight:600;

    text-decoration:none;
}


.question-save-message a:hover{
    text-decoration:underline;
}


.question-save-success{
    color:var(--ev-text);

    background:rgba(25,135,84,.08);

    border-color:rgba(25,135,84,.2);
}


.question-save-success i{
    color:#198754;
}


.question-save-info{
    color:var(--ev-text);

    background:var(--ev-hover);
}


.question-save-info i{
    color:var(--ev-primary);
}


.question-save-error{
    color:var(--ev-text);

    background:rgba(220,53,69,.08);

    border-color:rgba(220,53,69,.2);
}


.question-save-error i{
    color:#dc3545;
}
/* =========================================================
   QUESTION CONTENT TABLE
========================================================= */
.table-style-1 {
  width: auto;
  max-width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  background: var(--ev-bg);
  color: var(--ev-text);
  font-size: 1rem;
  line-height: 1.5;
}
.table-style-1 td, .table-style-1 th {
  padding: .65rem 1rem;
  border: 1px solid var(--ev-border);
  color: var(--ev-text);
  text-align: left;
  vertical-align: middle;
}
.table-style-1 th {
  font-weight: 700;
  background: var(--ev-hover);
}
.table-style-1 td[align="center"], .table-style-1 th[align="center"] {
  text-align: center;
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767.98px) {
  .table-style-1 {
    max-width: 100%;
    font-size: .95rem;
  }
  .table-style-1 td, .table-style-1 th {
    padding: .55rem .75rem;
  }
}
[data-bs-theme="dark"] .question-text > img {
  filter: invert(.9);
}
[data-bs-theme="dark"] .question-solution-body > img {
  filter: invert(.9);
}
[data-bs-theme="dark"] .related-question-text > img {
  filter: invert(.9);
}


/* =========================================================
   EXAMVEDA - SINGLE QUESTION PAGE
========================================================= */


/* =========================================================
   QUESTION DIRECTION
========================================================= */

.question-direction{
    width:100%;
    margin-bottom:1rem;
    padding:1rem 1.1rem;
    border:1px solid var(--ev-border);
    border-radius:8px;
    background:var(--ev-bg);
}

.question-direction-label{
    display:flex;
    align-items:center;
    gap:.45rem;
    margin-bottom:.65rem;
    color:var(--ev-primary);
    font-size:.85rem;
    font-weight:600;
}

.question-direction-label i{
    flex:0 0 auto;
    font-size:1rem;
}

.question-direction-content{
    color:var(--ev-text);
    font-size:.95rem;
    line-height:1.7;
}

.question-direction-content h1,
.question-direction-content h2,
.question-direction-content h3,
.question-direction-content h4{
    margin-top:0;
    color:var(--ev-text);
}

.question-direction-content img{
    max-width:100%;
    height:auto;
}


/* =========================================================
   SINGLE QUESTION BOX
========================================================= */

.single-question-box{
    width:100%;
    margin-bottom:1rem;
    padding:1.25rem;
    border:1px solid var(--ev-border);
    border-radius:8px;
    background:var(--ev-bg);
}


/* =========================================================
   QUESTION META
========================================================= */

.single-question-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
    color:var(--ev-muted);
    font-size:.8rem;
}

.single-question-topic,
.single-question-date{
    display:flex;
    align-items:center;
    gap:.4rem;
}

.single-question-topic{
    color:var(--ev-primary);
    font-weight:600;
}

.single-question-topic i,
.single-question-date i{
    flex:0 0 auto;
    font-size:.85rem;
}

.single-question-date{
    color:var(--ev-muted);
}


/* =========================================================
   QUESTION TITLE
========================================================= */

.single-question-box .question-title{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin:0;
}

.single-question-box .question-number{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:32px;
    height:32px;
    margin-top:.1rem;
    border-radius:50%;
    background:var(--ev-accent-soft);
    color:var(--ev-primary);
    font-size:.9rem;
    font-weight:700;
}

.single-question-box .question-text{
    flex:1;
    min-width:0;
    color:var(--ev-text);
    font-size:1.3rem;
    line-height:1.65;
}

.single-question-box .question-text p:first-child{
    margin-top:0;
}

.single-question-box .question-text p:last-child{
    margin-bottom:0;
}

.single-question-box .question-text img{
    max-width:100%;
    height:auto;
}


/* =========================================================
   QUESTION IMAGE
========================================================= */

.single-question-box .question-image{
    width:100%;
    margin:1.25rem 0 0;
    text-align:center;
}

.single-question-box .question-image img{
    max-width:100%;
    height:auto;
    border-radius:7px;
}


/* =========================================================
   QUESTION OPTIONS
========================================================= */

.single-question-box .question-options{
    display:flex;
    flex-direction:column;
    gap:.6rem;
    margin-top:1.25rem;
}

.single-question-box .question-option{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:.7rem;
    width:100%;
    min-height:48px;
    margin:0;
    padding:.75rem .85rem;
    border:1px solid var(--ev-border);
    border-radius:7px;
    background:var(--ev-bg);
    color:var(--ev-text);
    cursor:pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.single-question-box .question-option:hover{
    background:var(--ev-hover);
    border-color:var(--ev-primary);
}

.single-question-box .question-option input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.single-question-box .option-letter{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-width:24px;
    color:var(--ev-text);
    font-size:.9rem;
    font-weight:700;
}

.single-question-box .option-radio{
    position:relative;
    display:block;
    flex:0 0 auto;
    width:20px;
    height:20px;
    margin-top:.05rem;
    border:2px solid var(--ev-border);
    border-radius:50%;
    background:var(--ev-bg);
}

.single-question-box .question-option:hover .option-radio{
    border-color:var(--ev-primary);
}

.single-question-box .option-text{
    flex:1;
    min-width:0;
    color:var(--ev-text);
    font-size:1.1rem;
    line-height:1.55;
}


.single-question-box .option-text img{
    max-width:100%;
    height:auto;
}

.single-question-box .option-result{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:22px;
    min-height:20px;
    margin-left:auto;
    font-size:1rem;
}


/* Selected option */

.single-question-box .question-option:has(input:checked){
    border-color:var(--ev-primary);
    background:var(--ev-accent-soft);
}

.single-question-box
.question-option:has(input:checked)
.option-radio{
    border-color:var(--ev-primary);
}

.single-question-box
.question-option:has(input:checked)
.option-radio::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--ev-primary);
}


/* Correct option */

.single-question-box .question-option.option-correct{
    border-color:#198754;
    background:rgba(25,135,84,.08);
}

.single-question-box .question-option.option-correct .option-letter,
.single-question-box .question-option.option-correct .option-result{
    color:#198754;
}

.single-question-box .question-option.option-correct .option-radio{
    border-color:#198754;
}

.single-question-box
.question-option.option-correct
.option-radio::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#198754;
}


/* Wrong option */

.single-question-box .question-option.option-wrong{
    border-color:#dc3545;
    background:rgba(220,53,69,.08);
}

.single-question-box .question-option.option-wrong .option-letter,
.single-question-box .question-option.option-wrong .option-result{
    color:#dc3545;
}

.single-question-box .question-option.option-wrong .option-radio{
    border-color:#dc3545;
}

.single-question-box
.question-option.option-wrong
.option-radio::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#dc3545;
}


/* =========================================================
   ANSWER & SOLUTION
========================================================= */

.single-question-solution{
    margin-top:1.5rem;
    padding-top:1.25rem;
    border-top:1px solid var(--ev-border);
}

.single-question-solution .question-solution-heading{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:1rem;
    color:var(--ev-primary);
    font-size:.95rem;
    font-weight:700;
}

.single-question-solution .question-solution-heading i{
    font-size:1rem;
}

.single-question-solution .question-answer{
    margin-bottom:1rem;
    color:var(--ev-text);
    font-size:.95rem;
    line-height:1.6;
}

.single-question-solution .question-solution-label{
    color:var(--ev-primary);
    font-weight:600;
}

.single-question-solution .question-solution-body{
    color:var(--ev-text);
    font-size:1rem;
    line-height:1.75;
}

.single-question-solution .question-solution-body p:first-child{
    margin-top:0;
}

.single-question-solution .question-solution-body p:last-child{
    margin-bottom:0;
}

.single-question-solution .question-solution-body img{
    max-width:100%;
    height:auto;
}

.single-question-solution .question-solution-body table{
    max-width:100%;
}

.single-question-solution .question-no-solution{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.4rem .5rem;
    padding:.85rem;
    border:1px dashed var(--ev-border);
    border-radius:7px;
    color:var(--ev-muted);
    font-size:.9rem;
    line-height:1.55;
}

.single-question-solution .question-no-solution i{
    flex:0 0 auto;
    color:var(--ev-primary);
}

.single-question-solution .question-no-solution a{
    color:var(--ev-primary);
    font-weight:600;
    text-decoration:none;
}

.single-question-solution .question-no-solution a:hover{
    text-decoration:underline;
}


/* =========================================================
   SAVE THIS QUESTION
========================================================= */

.single-question-save{
    margin-top:1.25rem;
    padding-top:1rem;
    border-top:1px solid var(--ev-border);
}

.single-question-save .question-save-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    width:100%;
    min-height:44px;
    padding:.65rem 1rem;
    border:1px solid var(--ev-border);
    border-radius:7px;
    background:var(--ev-bg);
    color:var(--ev-text);
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.single-question-save .question-save-btn:hover{
    border-color:var(--ev-primary);
    background:var(--ev-hover);
    color:var(--ev-primary);
}

.single-question-save .question-save-btn i{
    font-size:1rem;
}

.single-question-save .question-save-alert{
    margin-top:.75rem;
}


/* =========================================================
   QUESTION CONTEXT
========================================================= */

.question-context{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.4rem;
    width:100%;
    margin:1rem 0;
    padding:.75rem 1rem;
    border:1px solid var(--ev-border);
    border-radius:7px;
    background:var(--ev-bg);
    color:var(--ev-muted);
    font-size:.85rem;
    line-height:1.5;
}

.question-context a{
    color:var(--ev-primary);
    font-weight:600;
    text-decoration:none;
}

.question-context a:hover{
    text-decoration:underline;
}

.question-context-separator{
    display:flex;
    align-items:center;
    color:var(--ev-muted);
}

.question-context-separator i{
    font-size:.65rem;
}


/* =========================================================
   QUESTION AUTHOR
========================================================= */

.question-author{
    display:flex;
    align-items:center;
    gap:.75rem;
    width:100%;
    margin:1rem 0;
    padding:.75rem 0;
}

.question-author-profile{
    flex:0 0 auto;
}

.question-author-profile img{
    display:block;
    width:40px;
    height:40px;
    object-fit:cover;
    border-radius:50%;
}

.question-author-info{
    display:flex;
    flex-direction:column;
    gap:.1rem;
}

.question-author-label{
    color:var(--ev-muted);
    font-size:.75rem;
    line-height:1.4;
}

.question-author-name{
    color:var(--ev-text);
    font-size:.85rem;
    font-weight:600;
}


/* =========================================================
   AD AREA
========================================================= */

.single-question-ad{
    width:100%;
    margin:1rem 0;
}


/* =========================================================
   DISCUSSION
========================================================= */

.question-discussion{
    width:100%;
    margin-top:2.5rem;
}

.section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;
}

.section-heading-label{
    display:block;
    margin-bottom:.2rem;
    color:var(--ev-primary);
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.section-heading h2{
    margin:0;
    color:var(--ev-text);
    font-size:1.2rem;
    line-height:1.4;
    font-weight:700;
}

.section-heading-count{
    flex:0 0 auto;
    color:var(--ev-muted);
    font-size:.8rem;
}


/* =========================================================
   COMMENT FORM
========================================================= */

.comment-form-box{
    width:100%;
    margin-bottom:1rem;
}

.comment-form{
    width:100%;
    padding:1rem;
    border:1px solid var(--ev-border);
    border-radius:8px;
    background:var(--ev-accent-soft);	
}

.comment-form-field .form-label{
    margin-bottom:.4rem;
    color:var(--ev-text);
    font-size:.85rem;
    font-weight:600;
}

.comment-form .form-control{
    color:var(--ev-text);
    background:var(--ev-bg);
    border-color:var(--ev-border);
    border-radius:6px;
    resize:vertical;
}

.comment-form .form-control::placeholder{
    color:var(--ev-muted);
}

.comment-form .form-control:focus{
    color:var(--ev-text);
    background:var(--ev-bg);
    border-color:var(--ev-primary);
    box-shadow:0 0 0 .2rem var(--ev-accent-soft);
}

.comment-form-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-top:.75rem;
}

.comment-form-footer > span{
    color:var(--ev-muted);
    font-size:.75rem;
    line-height:1.4;
}

.comment-submit-btn,
.comment-login-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    min-height:40px;
    padding:.5rem .85rem;
    border:1px solid var(--ev-primary);
    border-radius:6px;
    background:var(--ev-primary);
    color:#fff;
    font-size:.85rem;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
}

.comment-submit-btn:hover,
.comment-login-btn:hover{
    color:#fff;
    opacity:.9;
}


/* =========================================================
   COMMENT LOGIN
========================================================= */

.comment-login-box{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    padding:1rem;
    border:1px solid var(--ev-border);
    border-radius:8px;
    background:var(--ev-bg);
}

.comment-login-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--ev-accent-soft);
    color:var(--ev-primary);
    font-size:1.1rem;
}

.comment-login-content{
    min-width:0;
}

.comment-login-content strong{
    display:block;
    margin-bottom:.2rem;
    color:var(--ev-text);
    font-size:.9rem;
}

.comment-login-content p{
    margin:0 0 .75rem;
    color:var(--ev-muted);
    font-size:.8rem;
    line-height:1.5;
}


/* =========================================================
   COMMENT MESSAGES
========================================================= */

.comment-message{
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    margin-bottom:1rem;
    padding:.7rem .8rem;
    border:1px solid var(--ev-border);
    border-radius:7px;
    font-size:.85rem;
    line-height:1.5;
}

.comment-message i{
    flex:0 0 auto;
    margin-top:.1rem;
}

.comment-message-error{
    background:rgba(220,53,69,.08);
    color:var(--ev-text);
    border-color:rgba(220,53,69,.2);
}

.comment-message-error i{
    color:#dc3545;
}

.comment-message-success{
    background:rgba(25,135,84,.08);
    color:var(--ev-text);
    border-color:rgba(25,135,84,.2);
}

.comment-message-success i{
    color:#198754;
}


/* =========================================================
   COMMENTS LIST
========================================================= */

.comment-list{
    display:flex;
    flex-direction:column;
    width:100%;
}

.comment-item{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    padding:1rem 0;
    border-bottom:1px solid var(--ev-border);
}

.comment-avatar{
    flex:0 0 auto;
}

.comment-avatar img{
    display:block;
    width:38px;
    height:38px;
    object-fit:cover;
    border-radius:50%;
}

.comment-content{
    flex:1;
    min-width:0;
}

.comment-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.5rem;
    margin-bottom:.35rem;
}

.comment-meta strong{
    color:var(--ev-text);
    font-size:.85rem;
}

.comment-meta span{
    color:var(--ev-muted);
    font-size:.75rem;
}

.comment-text{
    color:var(--ev-text);
    font-size:.9rem;
    line-height:1.6;
    overflow-wrap:anywhere;
}

.comment-text p{
    margin:0;
}


/* =========================================================
   EMPTY COMMENTS
========================================================= */

.empty-comments{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    padding:1rem;
    border:1px dashed var(--ev-border);
    border-radius:8px;
    color:var(--ev-muted);
    font-size:.85rem;
    line-height:1.5;
}

.empty-comments > i{
    flex:0 0 auto;
    margin-top:.1rem;
    color:var(--ev-primary);
}

.empty-comments strong,
.empty-comments span{
    display:block;
}

.empty-comments strong{
    margin-bottom:.2rem;
    color:var(--ev-text);
}


/* =========================================================
   RELATED QUESTIONS
========================================================= */

.related-questions{
    width:100%;
    margin-top:2.5rem;
}

.related-question-list{
    display:flex;
    flex-direction:column;
    gap:.65rem;
}

.related-question-card{
    display:flex;
    align-items:stretch;
    gap:.75rem;
    width:100%;
    padding:1rem;
    border:1px solid var(--ev-border);
    border-radius:8px;
    background:var(--ev-bg);
    color:var(--ev-text);
    text-decoration:none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.related-question-card:hover{
    background:var(--ev-hover);
    border-color:var(--ev-primary);
    color:var(--ev-text);
    transform:translateY(-1px);
}

.related-question-content{
    flex:1;
    min-width:0;
}

.related-question-text{
    color:var(--ev-text);
    font-size:1.2rem;
    line-height:1.6;
    font-weight:600;
}

.related-question-options{
    display:flex;
    flex-direction:column;
    gap:.3rem;
    margin-top:.75rem;
    color:var(--ev-muted);
    font-size:1rem;
    line-height:1.5;
}

.related-question-options span{
    overflow-wrap:anywhere;
}

.related-question-options strong{
    color:var(--ev-text);
}


.related-question-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:var(--ev-muted);
}

.related-question-card:hover .related-question-arrow{
    color:var(--ev-primary);
}


/* =========================================================
   RELATED CHAPTER CTA
========================================================= */

.related-chapter-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    width:100%;
    min-height:46px;
    margin-top:1rem;
    padding:.75rem 1rem;
    border:1px solid var(--ev-primary);
    border-radius:8px;
    background:var(--ev-accent-soft);
    color:var(--ev-primary);
    font-size:.85rem;
    font-weight:600;
    line-height:1.5;
    text-decoration:none;
    transition:
        background-color .2s ease,
        border-color .2s ease;
}

.related-chapter-cta > span{
    display:flex;
    align-items:center;
    gap:.5rem;
    min-width:0;
}

.related-chapter-cta > span > span{
    overflow-wrap:anywhere;
}

.related-chapter-cta > i{
    flex:0 0 auto;
}

.related-chapter-cta:hover{
    background:var(--ev-hover);
    color:var(--ev-primary);
}


/* =========================================================
   QUESTION CONTENT TABLES
========================================================= */

.single-question-box .question-text table,
.single-question-solution .question-solution-body table,
.question-direction-content table,
.related-question-text table{
    width:auto;
    max-width:100%;
    border-collapse:collapse;
}

.single-question-box .question-text td,
.single-question-box .question-text th,
.single-question-solution .question-solution-body td,
.single-question-solution .question-solution-body th,
.question-direction-content td,
.question-direction-content th{
    padding:.55rem .75rem;
    border:1px solid var(--ev-border);
    color:var(--ev-text);
    vertical-align:middle;
}

.single-question-box .question-text th,
.single-question-solution .question-solution-body th,
.question-direction-content th{
    background:var(--ev-hover);
    font-weight:600;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px){

    .single-question-box{
        padding:1rem;
        border-radius:7px;
    }

    .single-question-meta{
        margin-bottom:.85rem;
    }

    .single-question-date{
        display:none;
    }

    .single-question-box .question-title{
        gap:.6rem;
    }

    .single-question-box .question-number{
        width:30px;
        height:30px;
        font-size:.85rem;
    }

    .single-question-box .question-text{
        font-size:1.2rem;
        line-height:1.65;
    }

    .single-question-box .question-option{
        min-height:50px;
        padding:.75rem;
    }

    .single-question-box .option-text{
         font-size:1.05rem;
        line-height:1.55;
    }

    .single-question-solution{
        margin-top:1.25rem;
        padding-top:1rem;
    }

    .single-question-solution .question-solution-body{
        font-size:.95rem;
        line-height:1.7;
    }

    .question-context{
        padding:.7rem .8rem;
        font-size:.8rem;
    }

    .question-discussion,
    .related-questions{
        margin-top:2rem;
    }

    .section-heading{
        align-items:flex-start;
    }

    .section-heading h2{
        font-size:1.1rem;
    }

    .comment-form{
        padding:.85rem;
    }

    .comment-form-footer{
        align-items:stretch;
        flex-direction:column;
    }

    .comment-form-footer > span{
        display:none;
    }

    .comment-submit-btn{
        width:100%;
    }

    .comment-login-box{
        padding:.85rem;
    }

    .related-question-card{
        padding:.85rem;
    }

    .related-question-options{
        font-size:.78rem;
    }

    .related-chapter-cta{
        padding:.8rem .85rem;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:575.98px){

    .question-direction{
        padding:.85rem;
    }

    .question-direction-content{
        font-size:.9rem;
    }

    .single-question-box{
        padding:.85rem;
    }

    .single-question-meta{
        font-size:.75rem;
    }

    .single-question-topic{
        max-width:100%;
    }

    .single-question-box .question-option{
        gap:.55rem;
    }

    .single-question-box .option-letter{
        min-width:22px;
        font-size:.85rem;
    }

    .single-question-box .option-radio{
        width:19px;
        height:19px;
    }

    .single-question-box
    .question-option:has(input:checked)
    .option-radio::after,
    .single-question-box
    .question-option.option-correct
    .option-radio::after,
    .single-question-box
    .question-option.option-wrong
    .option-radio::after{
        top:3.5px;
        left:3.5px;
        width:8px;
        height:8px;
    }

    .question-author-profile img{
        width:36px;
        height:36px;
    }

    .comment-item{
        gap:.6rem;
    }

    .comment-avatar img{
        width:34px;
        height:34px;
    }

}


/* =========================================================
   DARK MODE REFINEMENT
========================================================= */

[data-bs-theme="dark"] .single-question-box .question-option.option-correct{
    background:rgba(25,135,84,.12);
}

[data-bs-theme="dark"] .single-question-box .question-option.option-wrong{
    background:rgba(220,53,69,.12);
}

[data-bs-theme="dark"] .comment-message-success{
    background:rgba(25,135,84,.12);
}

[data-bs-theme="dark"] .comment-message-error{
    background:rgba(220,53,69,.12);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.single-question-box .question-option:focus-within{
    outline:2px solid var(--ev-primary);
    outline-offset:2px;
}

.single-question-save .question-save-btn:focus-visible,
.comment-submit-btn:focus-visible,
.comment-login-btn:focus-visible,
.related-question-card:focus-visible,
.related-chapter-cta:focus-visible{
    outline:2px solid var(--ev-primary);
    outline-offset:2px;
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .single-question-box .question-option,
    .related-question-card,
    .related-chapter-cta,
    .single-question-save .question-save-btn{
        transition:none;
    }

}

.static-page-content{
    color:var(--ev-text);
    font-size:1rem;
    line-height:1.75;
}

.static-page-content p{
    margin:0 0 1.25rem;
}

.static-page-content p:last-child{
    margin-bottom:0;
}

@media(max-width:767.98px){
    .static-page-content{
        font-size:.95rem;
        line-height:1.7;
    }

    .static-page-content p{
        margin-bottom:1rem;
    }
}

.site-footer{
    margin-top:3rem;
    border-top:1px solid var(--ev-border);
    background:var(--ev-bg);
}

.site-footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding:1.25rem 0;
}

.site-footer-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
}

.site-footer-links a,
.site-footer-copyright a{
    color:var(--ev-muted);
    text-decoration:none;
    font-size:.9rem;
}

.site-footer-links a:hover,
.site-footer-copyright a:hover{
    color:var(--ev-primary);
}

.site-footer-social{
    display:flex;
    align-items:center;
    gap:.75rem;
}

.site-footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:1px solid var(--ev-border);
    border-radius:50%;
    color:var(--ev-muted);
    text-decoration:none;
    font-size:1rem;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.site-footer-social a:hover{
    color:var(--ev-primary);
    background:var(--ev-accent-soft);
    border-color:var(--ev-primary);
}

.site-footer-copyright{
    flex-shrink:0;
    color:var(--ev-muted);
    font-size:.9rem;
}

@media(max-width:767.98px){

    .site-footer-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem;
        padding:1.25rem 0;
    }

    .site-footer-links{
        gap:.65rem 1rem;
    }

    .site-footer-social{
        order:2;
    }

    .site-footer-copyright{
        order:3;
    }

    .site-footer-links a,
    .site-footer-copyright a,
    .site-footer-copyright{
        font-size:.85rem;
    }
}

.legal-content{
    color:var(--ev-text);
    font-size:1rem;
    line-height:1.75;
}

.legal-content .legal-updated{
    margin-bottom:1.5rem;
    color:var(--ev-muted);
    font-size:.85rem;
}

.legal-content h2{
    margin:2rem 0 .75rem;
    color:var(--ev-text);
    font-size:1.25rem;
    line-height:1.4;
    font-weight:700;
}

.legal-content h2:first-of-type{
    margin-top:0;
}

.legal-content p{
    margin:0 0 1rem;
}

.legal-content ul{
    margin:0 0 1.25rem;
    padding-left:1.5rem;
}

.legal-content li{
    margin-bottom:.4rem;
}

.legal-content a{
    color:var(--ev-primary);
    text-decoration:none;
}

.legal-content a:hover{
    text-decoration:underline;
}
.legal-content h3{
    margin:1.5rem 0 .65rem;
    color:var(--ev-text);
    font-size:1.05rem;
    line-height:1.5;
    font-weight:600;
}

@media(max-width:767.98px){
    .legal-content{
        font-size:.95rem;
        line-height:1.7;
    }

    .legal-content h2{
        margin-top:1.75rem;
        font-size:1.15rem;
    }

    .legal-content ul{
        padding-left:1.25rem;
    }
}

/* =========================================================
   Contact Us
   ========================================================= */

.contact-page{
    width:100%;
    color:var(--ev-text);
}

.contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);
    gap:1.5rem;
    align-items:start;
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.contact-form-card,
.contact-info-card{
    border:1px solid var(--ev-border);
    border-radius:1rem;
    background:var(--ev-surface);
}

.contact-form-card{
    padding:1.5rem;
}

.contact-info-card{
    padding:1.5rem;
    background:var(--ev-hover);
}


/* ---------------------------------------------------------
   Form Heading
   --------------------------------------------------------- */

.contact-form-heading{
    display:flex;
    align-items:flex-start;
    gap:.85rem;
    margin-bottom:1.5rem;
}

.contact-heading-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:.7rem;
    background:var(--ev-accent-soft);
    color:var(--ev-primary);
    font-size:1.15rem;
}

.contact-form-heading h2,
.contact-info-heading h2{
    margin:0 0 .3rem;
    color:var(--ev-text);
    font-size:1.4rem;
    line-height:1.4;
    font-weight:700;
}

.contact-form-heading p,
.contact-info-heading p{
    margin:0;
    color:var(--ev-muted);
    font-size:.9rem;
    line-height:1.55;
}


/* ---------------------------------------------------------
   Alerts
   --------------------------------------------------------- */

.contact-alert{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:1.25rem;
    padding:.9rem 1rem;
    border:1px solid var(--ev-border);
    border-radius:.65rem;
}

.contact-alert i{
    flex-shrink:0;
    margin-top:.1rem;
    font-size:1.1rem;
}

.contact-alert div{
    display:flex;
    flex-direction:column;
    gap:.15rem;
}

.contact-alert strong{
    font-size:.9rem;
    font-weight:700;
}

.contact-alert span{
    font-size:.85rem;
    line-height:1.5;
}

.contact-alert-error{
    background:rgba(220,53,69,.06);
    border-color:rgba(220,53,69,.2);
}

.contact-alert-error i,
.contact-alert-error strong{
    color:#dc3545;
}

.contact-alert-success{
    background:rgba(25,135,84,.06);
    border-color:rgba(25,135,84,.2);
}

.contact-alert-success i,
.contact-alert-success strong{
    color:#198754;
}


/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */

.contact-form{
    width:100%;
}

.contact-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.contact-form-group{
    margin-bottom:1.1rem;
}

.contact-form-group label,
.contact-captcha label{
    display:block;
    margin-bottom:.45rem;
    color:var(--ev-text);
    font-size:.85rem;
    font-weight:600;
}

.contact-form-group label span,
.contact-captcha label span{
    color:#dc3545;
}


/* ---------------------------------------------------------
   Inputs
   --------------------------------------------------------- */

.contact-input-wrap{
    position:relative;
}

.contact-input-wrap > i{
    position:absolute;
    top:50%;
    left:.9rem;
    z-index:1;
    color:var(--ev-muted);
    font-size:.95rem;
    pointer-events:none;
    transform:translateY(-50%);
}

.contact-input-wrap input,
.contact-input-wrap textarea{
    width:100%;
    padding:.75rem .85rem .75rem 2.6rem;
    border:1px solid var(--ev-border);
    border-radius:.6rem;
    background:var(--ev-bg);
    color:var(--ev-text);
    font:inherit;
    font-size:.95rem;
    outline:none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.contact-input-wrap input{
    min-height:46px;
}

.contact-input-wrap textarea{
    min-height:170px;
    resize:vertical;
    line-height:1.6;
}

.contact-input-wrap input::placeholder,
.contact-input-wrap textarea::placeholder{
    color:var(--ev-muted);
}

.contact-input-wrap input:focus,
.contact-input-wrap textarea:focus{
    border-color:var(--ev-primary);
    box-shadow:0 0 0 .2rem var(--ev-accent-soft);
}

.contact-textarea-wrap > i{
    top:1rem;
    transform:none;
}


/* ---------------------------------------------------------
   Captcha + Submit
   --------------------------------------------------------- */

.contact-bottom-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    margin-top:.25rem;
}

.contact-captcha{
    margin:0;
}

.contact-captcha-box{
    display:flex;
    align-items:center;
    gap:.55rem;
}

.contact-captcha-question{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-width:85px;
    min-height:44px;
    padding:.5rem .75rem;
    border:1px solid var(--ev-border);
    border-radius:.6rem;
    background:var(--ev-hover);
    color:var(--ev-text);
    font-size:1.1rem;
    font-weight:700;
}

.contact-captcha-equals{
    color:var(--ev-muted);
    font-weight:600;
}

.contact-captcha-box input{
    width:70px;
    height:44px;
    padding:.5rem;
    border:1px solid var(--ev-border);
    border-radius:.6rem;
    background:var(--ev-bg);
    color:var(--ev-text);
    text-align:center;
    font-size:1rem;
    font-weight:600;
    outline:none;
}

.contact-captcha-box input::placeholder{
    color:var(--ev-muted);
}

.contact-captcha-box input:focus{
    border-color:var(--ev-primary);
    box-shadow:0 0 0 .2rem var(--ev-accent-soft);
}

.contact-form-footer{
    flex-shrink:0;
}

.contact-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    min-height:46px;
    padding:.7rem 1rem;
    border:0;
    border-radius:.6rem;
    background:var(--ev-primary);
    color:#fff;
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
    transition:
        opacity .2s ease,
        transform .2s ease;
}

.contact-submit:hover{
    opacity:.9;
}

.contact-submit:active{
    transform:translateY(1px);
}

.contact-submit:disabled{
    cursor:wait;
}

.contact-submit-normal,
.contact-submit-loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
}

.contact-submit-loading{
    display:none;
}

.contact-submit.is-loading{
    cursor:wait;
    opacity:.8;
}

.contact-submit.is-loading .contact-submit-normal{
    display:none;
}

.contact-submit.is-loading .contact-submit-loading{
    display:flex;
}


/* ---------------------------------------------------------
   Contact Information
   --------------------------------------------------------- */

.contact-info-heading{
    margin-bottom:1.5rem;
}

.contact-info-heading > span{
    display:block;
    margin-bottom:.3rem;
    color:var(--ev-primary);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.contact-info-list{
    display:flex;
    flex-direction:column;
    gap:.65rem;
}

.contact-info-item{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.85rem;
    border:1px solid var(--ev-border);
    border-radius:.7rem;
    background:var(--ev-bg);
    color:var(--ev-text);
    text-decoration:none;
    transition:
        border-color .2s ease,
        transform .2s ease,
        background-color .2s ease;
}

.contact-info-item:hover{
    border-color:var(--ev-primary);
    transform:translateY(-1px);
}

.contact-info-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:.55rem;
    background:var(--ev-accent-soft);
    color:var(--ev-primary);
    font-size:1rem;
}

.contact-info-content{
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:.15rem;
}

.contact-detail-label{
    color:var(--ev-muted);
    font-size:.75rem;
    line-height:1.4;
}

.contact-info-content strong{
    overflow:hidden;
    color:var(--ev-text);
    font-size:.85rem;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.contact-info-arrow{
    margin-left:auto;
    flex-shrink:0;
    color:var(--ev-muted);
    font-size:.8rem;
}


/* ---------------------------------------------------------
   Social Links
   --------------------------------------------------------- */

.contact-social{
    margin-top:2rem;
    padding-top:1.25rem;
    border-top:1px solid var(--ev-border);
}

.contact-social-links{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-top:.65rem;
}

.contact-social-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:1px solid var(--ev-border);
    border-radius:50%;
    background:var(--ev-bg);
    color:var(--ev-muted);
    text-decoration:none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.contact-social-links a:hover{
    color:var(--ev-primary);
    background:var(--ev-accent-soft);
    border-color:var(--ev-primary);
    transform:translateY(-1px);
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media(max-width:991.98px){

    .contact-layout{
        grid-template-columns:1fr;
    }

    .contact-info-card{
        order:2;
    }

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media(max-width:767.98px){

    .contact-form-card,
    .contact-info-card{
        padding:1.1rem;
        border-radius:.8rem;
    }

    .contact-form-heading{
        gap:.7rem;
    }

    .contact-heading-icon{
        width:40px;
        height:40px;
        font-size:1rem;
    }

    .contact-form-heading h2,
    .contact-info-heading h2{
        font-size:1.25rem;
    }

    .contact-form-heading p,
    .contact-info-heading p{
        font-size:.85rem;
    }

    .contact-form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .contact-bottom-row{
        align-items:stretch;
        flex-direction:column;
    }

    .contact-form-footer{
        width:100%;
    }

    .contact-submit{
        width:100%;
    }

    .contact-info-item{
        padding:.8rem;
    }

}

/* =========================================================
   THEORY DETAIL
   ========================================================= */

.theory-content-card,
.theory-share-section,
.theory-discussion,
.theory-comments{
    width:100%;
    margin-bottom:1.5rem;
    border:1px solid var(--ev-border);
    border-radius:1rem;
    background:var(--ev-surface);
    color:var(--ev-text);
}


/* =========================================================
   THEORY HEADER
   ========================================================= */

.theory-header{
    padding:1.5rem 1.5rem 1rem;
}

.theory-title{
    margin:0;
    color:var(--ev-text);
    font-size:1.75rem;
    line-height:1.4;
    font-weight:700;
}

.theory-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem 1.25rem;
    margin-top:1rem;
    color:var(--ev-muted);
    font-size:.85rem;
}

.theory-meta span,
.theory-meta a{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:inherit;
    text-decoration:none;
}

.theory-meta i{
    color:var(--ev-primary);
    font-size:.9rem;
}

.theory-meta a:hover{
    color:var(--ev-primary);
}


/* =========================================================
   THEORY SHARE
   ========================================================= */

.theory-share{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin:0 1.5rem;
    padding:.75rem 0;
    border-top:1px solid var(--ev-border);
    border-bottom:1px solid var(--ev-border);
}

.theory-share-title{
    display:flex;
    align-items:center;
    gap:.5rem;
    color:var(--ev-muted);
    font-size:.85rem;
    font-weight:600;
}

.theory-share-title i{
    color:var(--ev-primary);
}


/* =========================================================
   THEORY CONTENT
   ========================================================= */

.theory-content{
    padding:1.5rem;
    font-size:1.05rem;
    line-height:1.8;
    overflow-wrap:anywhere;
}

.theory-content > :first-child{
    margin-top:0;
}

.theory-content > :last-child{
    margin-bottom:0;
}

.theory-content h2{
    margin:2rem 0 .75rem;
    color:var(--ev-text);
    font-size:1.4rem;
    line-height:1.45;
}

.theory-content h3{
    margin:1.5rem 0 .65rem;
    color:var(--ev-text);
    font-size:1.2rem;
    line-height:1.5;
}

.theory-content h4{
    margin:1.25rem 0 .5rem;
    color:var(--ev-text);
    font-size:1.05rem;
}

.theory-content p{
    margin:0 0 1rem;
}

.theory-content a{
    color:var(--ev-primary);
}

.theory-content img{
    max-width:100%;
    height:auto;
}

.theory-content table{
    max-width:100%;
}

.theory-content ul,
.theory-content ol{
    margin:0 0 1rem;
    padding-left:1.5rem;
}

.theory-content li{
    margin-bottom:.4rem;
}



/* =========================================================
   THEORY DOWNLOAD
   ========================================================= */

.theory-downloads{
    display:flex;
    flex-direction:column;
    gap:.75rem;
    margin:0 1.5rem 1.5rem;
    padding:1rem;
    border:1px solid var(--ev-border);
    border-radius:.75rem;
    background:var(--ev-page-bg);
}

.theory-download-title{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.25rem;
    color:var(--ev-text);
    font-size:.9rem;
    font-weight:700;
}

.theory-download-title i{
    color:var(--ev-primary);
}

.theory-download-btn{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:.65rem;
    width:100%;
    padding:.8rem 1rem;
    border:1px solid var(--ev-border);
    border-radius:.65rem;
    background:var(--ev-surface);
    color:var(--ev-primary);
    font-size:.95rem;
    line-height:1.4;
    font-weight:600;
    text-align:left;
    cursor:pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.theory-download-btn i{
    flex:0 0 auto;
    font-size:1.1rem;
}

.theory-download-btn:hover{
    background:var(--ev-hover);
    border-color:var(--ev-primary);
}

.theory-download-btn:active{
    transform:scale(.99);
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.theory-section-heading{
    display:flex;
    align-items:center;
    gap:.85rem;
    padding:1.25rem 1.5rem;
    border-bottom:1px solid var(--ev-border);
}

.theory-section-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 2.4rem;
    width:2.4rem;
    height:2.4rem;
    border-radius:.65rem;
    background:var(--ev-accent-soft);
    color:var(--ev-primary);
    font-size:1rem;
}

.theory-section-heading h2{
    margin:0;
    color:var(--ev-text);
    font-size:1.15rem;
    line-height:1.4;
    font-weight:700;
}

.theory-section-heading > div > span{
    display:block;
    margin-top:.2rem;
    color:var(--ev-muted);
    font-size:.8rem;
    line-height:1.5;
}

.theory-comment-count{
    color:var(--ev-primary);
}


/* =========================================================
   SHARE SECTION
   ========================================================= */

.theory-share-section{
    padding-bottom:1.25rem;
}

.theory-share-section .addthis_sharing_toolbox{
    padding:1rem 1.5rem 0;
}


/* =========================================================
   INTERVIEW ANSWER CTA
   ========================================================= */

.interview-answer-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin:0 1.5rem 1.5rem;
    padding:1rem;
    border:1px solid var(--ev-border);
    border-radius:.75rem;
    background:var(--ev-page-bg);
}

.interview-answer-cta-content{
    display:flex;
    align-items:center;
    gap:.75rem;
}

.interview-answer-cta-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 2.5rem;
    width:2.5rem;
    height:2.5rem;
    border-radius:.65rem;
    background:var(--ev-accent-soft);
    color:var(--ev-primary);
}

.interview-answer-cta-content strong{
    display:block;
    color:var(--ev-text);
    font-size:.95rem;
}

.interview-answer-cta-content span{
    display:block;
    margin-top:.15rem;
    color:var(--ev-muted);
    font-size:.8rem;
}

.interview-answer-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    flex:0 0 auto;
    padding:.7rem 1rem;
    border:1px solid var(--ev-primary);
    border-radius:.6rem;
    background:var(--ev-primary);
    color:#fff;
    font-size:.9rem;
    font-weight:600;
    text-decoration:none;
    transition:opacity .2s ease,transform .2s ease;
}

.interview-answer-btn:hover{
    color:#fff;
    opacity:.9;
}

.interview-answer-btn:active{
    transform:scale(.98);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.theory-pagination{
    display:flex;
    justify-content:center;
    margin-top:2rem;
    padding-top:1rem;
    border-top:1px solid var(--ev-border);
}

.theory-pagination .pagination{
    margin:0;
}


/* =========================================================
   COMMENT / ANSWER FORM
   ========================================================= */

.theory-discussion{
    overflow:hidden;
}

.theory-comment-form{
    padding:1.5rem;
}

.theory-comment-field label{
    display:block;
    margin-bottom:.5rem;
    color:var(--ev-text);
    font-size:.9rem;
    font-weight:600;
}

.theory-comment-field label span{
    color:#dc3545;
}

.theory-comment-field textarea{
    display:block;
    width:100%;
    min-height:140px;
    padding:.85rem 1rem;
    border:1px solid var(--ev-border);
    border-radius:.65rem;
    outline:0;
    background:var(--ev-bg);
    color:var(--ev-text);
    font-family:inherit;
    font-size:1rem;
    line-height:1.6;
    resize:vertical;
    transition:border-color .2s ease,box-shadow .2s ease;
}

.theory-comment-field textarea::placeholder{
    color:var(--ev-muted);
}

.theory-comment-field textarea:focus{
    border-color:var(--ev-primary);
    box-shadow:0 0 0 .2rem var(--ev-accent-soft);
}

.theory-comment-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    margin-top:1rem;
    padding:.75rem 1.1rem;
    border:0;
    border-radius:.6rem;
    background:var(--ev-primary);
    color:#fff;
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
    transition:opacity .2s ease,transform .2s ease;
}

.theory-comment-submit:hover{
    opacity:.9;
}

.theory-comment-submit:active{
    transform:scale(.98);
}


/* =========================================================
   COMMENT ERROR
   ========================================================= */

.theory-comment-alert{
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    margin:1rem 1.5rem 0;
    padding:.85rem 1rem;
    border:1px solid rgba(220,53,69,.25);
    border-radius:.65rem;
    background:rgba(220,53,69,.07);
    color:#dc3545;
    font-size:.9rem;
    line-height:1.5;
}

.theory-comment-alert i{
    margin-top:.15rem;
}

.theory-login-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    margin:1rem 1.5rem 0;
    padding:.7rem 1rem;
    border:1px solid var(--ev-border);
    border-radius:.6rem;
    background:var(--ev-surface);
    color:var(--ev-text);
    font-size:.9rem;
    font-weight:600;
    text-decoration:none;
}

.theory-login-btn:hover{
    border-color:var(--ev-primary);
    color:var(--ev-primary);
}


/* =========================================================
   COMMENTS
   ========================================================= */

.theory-comments{
    overflow:hidden;
}

.theory-comment-list{
    padding:0 1.5rem;
}

.theory-comment{
    display:flex;
    gap:1rem;
    padding:1.25rem 0;
    border-bottom:1px solid var(--ev-border);
}

.theory-comment:last-child{
    border-bottom:0;
}

.theory-comment-avatar{
    flex:0 0 2.75rem;
}

.theory-comment-avatar img{
    display:block;
    width:2.75rem;
    height:2.75rem;
    border-radius:50%;
    object-fit:cover;
    background:var(--ev-page-bg);
}

.theory-comment-body{
    min-width:0;
    flex:1;
}

.theory-comment-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.theory-comment-top strong{
    color:var(--ev-text);
    font-size:.9rem;
    line-height:1.4;
}

.theory-comment-top span{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    color:var(--ev-muted);
    font-size:.75rem;
    white-space:nowrap;
}

.theory-comment-text{
    margin-top:.5rem;
    color:var(--ev-text);
    font-size:.95rem;
    line-height:1.65;
    overflow-wrap:anywhere;
}

.theory-comment-text p:last-child{
    margin-bottom:0;
}


/* =========================================================
   NO COMMENTS
   ========================================================= */

.theory-no-comments{
    display:flex;
    align-items:center;
    gap:.85rem;
    margin:1.5rem;
    padding:1rem;
    border:1px dashed var(--ev-border);
    border-radius:.75rem;
    background:var(--ev-page-bg);
}

.theory-no-comments > i{
    flex:0 0 2.4rem;
    color:var(--ev-muted);
    font-size:1.5rem;
    text-align:center;
}

.theory-no-comments strong{
    display:block;
    color:var(--ev-text);
    font-size:.9rem;
}

.theory-no-comments span{
    display:block;
    margin-top:.15rem;
    color:var(--ev-muted);
    font-size:.8rem;
}


/* =========================================================
   INTERVIEW ANSWERS
   ========================================================= */

.interview-answers{
    margin-bottom:1.5rem;
}

.interview-answer-form{
    margin-bottom:1.5rem;
}


/* =========================================================
   AD CONTAINER
   ========================================================= */

.theory-ad-container{
    width:100%;
    min-height:0;
    margin:0 0 1.5rem;
    padding:0;
    text-align:center;
}

.theory-ad-container > div{
    width:100%;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767.98px){

    .theory-content-card,
    .theory-share-section,
    .theory-discussion,
    .theory-comments{
        margin-bottom:1rem;
        border-radius:.75rem;
    }

    .theory-header{
        padding:1.15rem 1rem .85rem;
    }

    .theory-title{
        font-size:1.4rem;
        line-height:1.45;
    }

    .theory-meta{
        gap:.55rem .9rem;
        margin-top:.85rem;
        font-size:.78rem;
    }

    .theory-meta span:nth-child(3){
        width:100%;
    }

    .theory-share{
        margin:0 1rem;
    }

    .theory-content{
        padding:1rem;
        font-size:1rem;
        line-height:1.75;
    }

    .theory-content h2{
        font-size:1.25rem;
    }

    .theory-content h3{
        font-size:1.1rem;
    }

    .theory-downloads{
        margin:0 1rem 1rem;
        padding:.85rem;
    }

    .theory-download-btn{
        padding:.75rem .85rem;
        font-size:.9rem;
    }

    .theory-section-heading{
        gap:.7rem;
        padding:1rem;
    }

    .theory-section-icon{
        flex-basis:2.2rem;
        width:2.2rem;
        height:2.2rem;
    }

    .theory-section-heading h2{
        font-size:1.05rem;
    }

    .theory-share-section .addthis_sharing_toolbox{
        padding:.85rem 1rem 0;
    }

    .interview-answer-cta{
        align-items:stretch;
        flex-direction:column;
        margin:0 1rem 1rem;
    }

    .interview-answer-btn{
        width:100%;
    }

    .theory-comment-form{
        padding:1rem;
    }

    .theory-comment-alert{
        margin:1rem 1rem 0;
    }

    .theory-login-btn{
        width:calc(100% - 2rem);
        margin:1rem 1rem 0;
    }

    .theory-comment-list{
        padding:0 1rem;
    }

    .theory-comment{
        gap:.75rem;
        padding:1rem 0;
    }

    .theory-comment-avatar{
        flex-basis:2.4rem;
    }

    .theory-comment-avatar img{
        width:2.4rem;
        height:2.4rem;
    }

    .theory-comment-top{
        align-items:flex-start;
        flex-direction:column;
        gap:.2rem;
    }

    .theory-comment-top span{
        font-size:.7rem;
    }

    .theory-comment-text{
        font-size:.9rem;
    }

    .theory-no-comments{
        margin:1rem;
    }

}



.theory-card-image{
    width:100%;
    
    object-fit:cover;
    display:block;
}

.theory-card-description{
    font-size:.92rem;
    line-height:1.6;
}

@media(max-width:767.98px){

    .theory-card-description{
        font-size:.95rem;
    }

}.theory-card-image{
    width:100%;
    
    object-fit:cover;
    display:block;
}

.theory-card-description{
    font-size:.92rem;
    line-height:1.6;
}

@media(max-width:767.98px){

    .theory-card-description{
        font-size:.95rem;
    }

}

.user-question-feed{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.user-question-card{
    padding:1.25rem;
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:.85rem;
}

.user-question-author{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:1rem;
}

.user-question-author-image{
    width:40px;
    height:40px;
    flex-shrink:0;
    overflow:hidden;
    border-radius:50%;
    background:var(--ev-accent-soft);
}

.user-question-author-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.user-question-author-info{
    min-width:0;
}

.user-question-author-name{
    font-size:.9rem;
    font-weight:600;
    color:var(--ev-text);
}

.user-question-time{
    margin-top:.15rem;
    color:var(--ev-muted);
    font-size:.78rem;
}

.user-question-time i{
    margin-right:.2rem;
}

.user-question-content{
    margin-left:0;
}

.user-question-title{
    display:block;
    margin-bottom:1rem;
    color:var(--ev-text);
    font-size:1.05rem;
    line-height:1.6;
    font-weight:600;
    text-decoration:none;
}

.user-question-title:hover{
    color:var(--ev-primary);
}

.user-question-options{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    color:var(--ev-text);
    font-size:.95rem;
    line-height:1.55;
}

.user-question-options div{
    padding:.55rem .7rem;
    background:var(--ev-page-bg);
    border-radius:.5rem;
}

.user-question-options span{
    display:inline-block;
    min-width:1.5rem;
    font-weight:600;
    color:var(--ev-primary);
}

.user-question-actions{
    display:flex;
    flex-wrap:wrap;
    gap:1.25rem;
    margin-top:1.25rem;
    padding-top:.85rem;
    border-top:1px solid var(--ev-border);
}

.user-question-actions a{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:var(--ev-muted);
    font-size:.85rem;
    text-decoration:none;
}

.user-question-actions a:hover{
    color:var(--ev-primary);
}

.user-question-view-all{
    display:flex;
    justify-content:center;
    margin-top:1.5rem;
}

@media(max-width:575.98px){

    .user-question-card{
        padding:1rem;
        border-radius:.7rem;
    }

    .user-question-title{
        font-size:1rem;
    }

    .user-question-options{
        font-size:.9rem;
    }

    .user-question-actions{
        gap:.9rem;
    }

}

.user-question-status{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    margin-top:1rem;
    font-size:.85rem;
    font-weight:500;
}

.user-question-status i{
    font-size:.9rem;
}

.user-question-status.text-warning{
    color:#b58105 !important;
}

[data-bs-theme="dark"] .user-question-status.text-warning{
    color:#e0b84c !important;
}

/* User Page */

.user-page{
    width:100%;
}

.user-navigation{
    width:100%;
    margin-bottom:2rem;
    border-bottom:1px solid var(--ev-border);
}

.user-navigation-track{
    display:flex;
    gap:.35rem;
    overflow-x:auto;
    scrollbar-width:none;
}

.user-navigation-track::-webkit-scrollbar{
    display:none;
}

.user-navigation-item{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    flex-shrink:0;
    padding:.75rem 1rem;
    color:var(--ev-muted);
    text-decoration:none;
    white-space:nowrap;
    border-radius:.6rem .6rem 0 0;
    transition:color .2s ease,background-color .2s ease;
}

.user-navigation-item:hover{
    color:var(--ev-primary);
    background:var(--ev-accent-soft);
}

.user-navigation-item.active{
    color:var(--ev-primary);
    background:var(--ev-accent-soft);
    font-weight:600;
}

.user-navigation-item i{
    font-size:1.05rem;
}

.user-page-content{
    width:100%;
}

.user-content-header{
    margin-bottom:1.5rem;
}

.user-content-header p{
    font-size:.9rem;
}

.user-empty-state{
    padding:3rem 1.5rem;
    text-align:center;
    border:1px dashed var(--ev-border);
    border-radius:.75rem;
    background:var(--ev-surface);
}

.user-empty-state > i{
    display:block;
    margin-bottom:.75rem;
    color:var(--ev-muted);
    font-size:2rem;
}

.user-loader{
    padding:1.5rem;
    text-align:center;
    color:var(--ev-muted);
}

.user-loader i{
    display:block;
    margin-bottom:.5rem;
    font-size:1.5rem;
}

.user-saved-theory-list,
.user-comment-list{
    display:flex;
    flex-direction:column;
    gap:.6rem;
}

.user-content-item,
.user-comment-item{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem;
    color:var(--ev-text);
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:.75rem;
    text-decoration:none;
    transition:background-color .2s ease,
                border-color .2s ease,
                transform .2s ease;
}

.user-content-item:hover,
.user-comment-item:hover{
    color:var(--ev-text);
    background:var(--ev-hover);
    border-color:var(--ev-primary);
    transform:translateY(-1px);
}

.user-content-item-icon,
.user-comment-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex-shrink:0;
    color:var(--ev-primary);
    background:var(--ev-accent-soft);
    border-radius:.65rem;
    font-size:1.15rem;
}

.user-content-item-body,
.user-comment-body{
    min-width:0;
    flex:1;
}

.user-content-item-body h2{
    overflow:hidden;
    text-overflow:ellipsis;
}

.user-content-item-arrow{
    flex-shrink:0;
    color:var(--ev-muted);
}

.user-comment-text{
    line-height:1.55;
}

@media(max-width:767.98px){

    .user-navigation{
        margin-bottom:1.5rem;
    }

    .user-navigation-item{
        padding:.7rem .85rem;
        font-size:.9rem;
    }

    .user-content-header{
        margin-bottom:1.25rem;
    }

    .user-content-item,
    .user-comment-item{
        padding:.85rem;
    }

}

.user-question-number{
    margin-right:.2rem;
    color:var(--ev-primary);
}

.user-question-answer{
    display:flex;
    align-items:center;
    gap:.4rem;
    margin-top:1rem;
    padding:.65rem .75rem;
    color:var(--ev-text);
    background:var(--ev-accent-soft);
    border-radius:.5rem;
    font-size:.9rem;
}

.user-question-answer i{
    color:var(--ev-primary);
}

.user-question-category{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.4rem;
    margin-top:1.25rem;
    padding-top:.85rem;
    border-top:1px solid var(--ev-border);
    color:var(--ev-muted);
    font-size:.85rem;
}

.user-question-category a{
    color:var(--ev-primary);
    font-weight:500;
    text-decoration:none;
}

.user-question-category a:hover{
    text-decoration:underline;
}

.user-question-category > i{
    font-size:.7rem;
}

.user-theory-feed{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.user-theory-card{
    display:flex;
    gap:1.25rem;
    padding:1rem;
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:.85rem;
    transition:background-color .2s ease,
                border-color .2s ease,
                transform .2s ease;
}

.user-theory-card:hover{
    background:var(--ev-hover);
    border-color:var(--ev-primary);
    transform:translateY(-1px);
}

.user-theory-image-link{
    display:block;
    width:180px;
    flex-shrink:0;
}

.user-theory-image{
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:cover;
    border-radius:.6rem;
}

.user-theory-content{
    min-width:0;
    flex:1;
}

.user-theory-title{
    margin:0 0 .5rem;
    font-size:1.05rem;
    line-height:1.45;
    font-weight:600;
}

.user-theory-title a{
    color:var(--ev-text);
    text-decoration:none;
}

.user-theory-title a:hover{
    color:var(--ev-primary);
}

.user-theory-description{
    display:block;
    color:var(--ev-muted);
    font-size:.9rem;
    line-height:1.6;
    text-decoration:none;
}

.user-theory-description:hover{
    color:var(--ev-text);
}

.user-theory-meta{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:1rem;
    padding-top:.75rem;
    border-top:1px solid var(--ev-border);
    color:var(--ev-muted);
    font-size:.78rem;
}

.user-theory-meta span{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}

.user-theory-meta i{
    font-size:.8rem;
}

@media(max-width:767.98px){

    .user-theory-card{
        flex-direction:column;
        gap:.9rem;
        padding:.85rem;
    }

    .user-theory-image-link{
        width:100%;
    }

    .user-theory-image{
        aspect-ratio:16 / 9;
    }

    .user-theory-title{
        font-size:1rem;
    }

    .user-theory-meta{
        gap:.75rem;
    }

}

.user-comment-feed{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.user-comment-card{
    padding:1.25rem;
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:.85rem;
}

.user-comment-label{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.45rem;
    color:var(--ev-muted);
    font-size:.8rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.user-comment-label > i{
    color:var(--ev-primary);
}

.user-comment-question-title{
    margin:.65rem 0 1rem;
    font-size:1.05rem;
    line-height:1.55;
    font-weight:600;
}

.user-comment-question-title a{
    color:var(--ev-text);
    text-decoration:none;
}

.user-comment-question-title a:hover{
    color:var(--ev-primary);
}

.user-comment-section{
    margin-top:1.25rem;
    padding-top:1rem;
    border-top:1px solid var(--ev-border);
}

.user-comment-status{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    padding:.25rem .55rem;
    border-radius:1rem;
    font-size:.72rem;
    font-weight:500;
    text-transform:none;
    letter-spacing:0;
}

.user-comment-approved{
    color:#198754;
    background:rgba(25,135,84,.1);
}

.user-comment-pending{
    color:#b58105;
    background:rgba(245,166,35,.1);
}

[data-bs-theme="dark"] .user-comment-approved{
    color:#75b798;
}

[data-bs-theme="dark"] .user-comment-pending{
    color:#e0b84c;
}

.user-comment-text{
    margin-top:.75rem;
    color:var(--ev-text);
    font-size:.95rem;
    line-height:1.7;
}

.user-comment-actions{
    margin-top:1rem;
    padding-top:.85rem;
    border-top:1px solid var(--ev-border);
}

.user-comment-actions a{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:var(--ev-primary);
    font-size:.85rem;
    font-weight:500;
    text-decoration:none;
}

.user-comment-actions a:hover{
    text-decoration:underline;
}

@media(max-width:575.98px){

    .user-comment-card{
        padding:1rem;
    }

    .user-comment-question-title{
        font-size:1rem;
    }

    .user-comment-text{
        font-size:.9rem;
    }

}

.login-page{
    width:100%;
    min-height:calc(100vh - 160px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem 1rem;
}

.login-card{
    width:100%;
    max-width:460px;
    padding:2rem;
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:1rem;
    box-shadow:0 .5rem 2rem rgba(0,0,0,.06);
}

.login-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:1.75rem;
    text-align:center;
}

.login-brand-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:.75rem;
    color:#fff;
    background:var(--ev-primary);
    border-radius:.85rem;
    font-size:1.5rem;
}

.login-brand h1{
    margin:0;
    color:var(--ev-text);
    font-size:1.4rem;
    font-weight:700;
}

.login-content{
    text-align:center;
}

.login-content h2{
    margin:0;
    color:var(--ev-text);
    font-size:1.5rem;
    font-weight:700;
}

.login-description{
    margin:.5rem auto 1.75rem;
    max-width:360px;
    color:var(--ev-muted);
    font-size:.95rem;
    line-height:1.6;
}


/*
|--------------------------------------------------------------------------
| Google Login Button
|--------------------------------------------------------------------------
*/

.login-google-button{
    width:100%;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    padding:.75rem 1rem;

    color:#fff;
    background:#db4437;
    border:1px solid #db4437;
    border-radius:.5rem;

    text-decoration:none;
    font-size:.95rem;
    font-weight:600;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.login-google-button:hover{
    color:#fff;
    background:#c23321;
    border-color:#c23321;
    box-shadow:0 .25rem .75rem rgba(219,68,55,.25);
}

.login-google-button:focus-visible{
    outline:0;
    box-shadow:0 0 0 .2rem rgba(219,68,55,.25);
}

.login-google-button img{
    width:20px;
    height:20px;
    flex-shrink:0;
    display:block;
}
/*
|--------------------------------------------------------------------------
| Dark Mode - Google Login
|--------------------------------------------------------------------------
*/

[data-bs-theme="dark"] .login-google-button{
    color:#fff;
    background:#db4437;
    border-color:#db4437;
}

[data-bs-theme="dark"] .login-google-button:hover{
    color:#fff;
    background:#c23321;
    border-color:#c23321;
    box-shadow:0 .25rem .9rem rgba(219,68,55,.35);
}

[data-bs-theme="dark"] .login-google-button:focus-visible{
    box-shadow:0 0 0 .2rem rgba(219,68,55,.35);
}

.login-google-button img{
    width:20px;
    height:20px;
    flex-shrink:0;
    display:block;
}


/*
|--------------------------------------------------------------------------
| Account Information
|--------------------------------------------------------------------------
*/

.login-information{
    display:flex;
    align-items:flex-start;
    gap:.85rem;
    margin-top:1.5rem;
    padding:1rem;
    text-align:left;
    background:var(--ev-page-bg);
    border:1px solid var(--ev-border);
    border-radius:.75rem;
}

.login-information-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    flex-shrink:0;

    color:var(--ev-primary);
    background:var(--ev-accent-soft);
    border-radius:.55rem;
}

.login-information h3{
    margin:0 0 .35rem;
    color:var(--ev-text);
    font-size:.9rem;
    font-weight:600;
}

.login-information p{
    margin:0 0 .5rem;
    color:var(--ev-muted);
    font-size:.82rem;
    line-height:1.5;
}

.login-information ul{
    margin:0;
    padding:0;
    list-style:none;
}

.login-information li{
    display:flex;
    align-items:center;
    gap:.45rem;
    margin-top:.35rem;
    color:var(--ev-text);
    font-size:.82rem;
}

.login-information li i{
    width:16px;
    color:var(--ev-muted);
}


/*
|--------------------------------------------------------------------------
| Privacy Note
|--------------------------------------------------------------------------
*/

.login-privacy-note{
    margin:1.25rem 0 0;
    color:var(--ev-muted);
    font-size:.75rem;
    line-height:1.5;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:575.98px){

    .login-page{
        min-height:calc(100vh - 120px);
        padding:1.25rem .75rem;
    }

    .login-card{
        padding:1.5rem 1rem;
        border-radius:.85rem;
        box-shadow:none;
    }

    .login-brand{
        margin-bottom:1.5rem;
    }

    .login-brand-icon{
        width:48px;
        height:48px;
        font-size:1.35rem;
    }

    .login-brand h1{
        font-size:1.3rem;
    }

    .login-content h2{
        font-size:1.35rem;
    }

    .login-description{
        font-size:.9rem;
        margin-bottom:1.5rem;
    }

    .login-google-button{
        min-height:48px;
    }

    .login-information{
        padding:.85rem;
    }

}

.cf-headline{
    margin:2.5rem 0 1.5rem;
    padding:.9rem 1.25rem;

    color:#fff !important;
    background:var(--ev-primary);

    border-left:5px solid rgba(255,255,255,.7);
    border-radius:.5rem;

    font-size:1.3rem;
    line-height:1.4;
    font-weight:700;

    box-shadow:0 .25rem .75rem rgba(13,110,253,.18);
}

@media(max-width:767.98px){
    .cf-headline{
        margin:2rem 0 1.25rem;
        padding:.8rem 1rem;
        font-size:1.15rem;
    }
}

[data-bs-theme="dark"] .cf-headline{
    color:#151719 !important;
    border-left-color:rgba(0,0,0,.2);
    box-shadow:0 .25rem .75rem rgba(0,0,0,.3);
}

.home-banner{
    width:100%;
    padding:3.5rem 0 3rem;
    background:var(--ev-accent-soft);
}

.home-banner-content{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.home-banner h1{
    margin:0;
    color:var(--ev-text);
    font-size:2.25rem;
    line-height:1.3;
    font-weight:700;
}

.home-banner-highlight i{
    color:var(--ev-primary);
}

.home-banner-description{
    max-width:820px;
    margin:1rem auto 2rem;
    color:var(--ev-muted);
    font-size:1rem;
    line-height:1.7;
}

.home-search-box{
    max-width:760px;
    margin:0 auto;
    padding:1.5rem;
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:1rem;
    box-shadow:0 .35rem 1.25rem rgba(0,0,0,.06);
}

.home-search-box h2{
    margin:0 0 1rem;
    color:var(--ev-text);
    font-size:1.15rem;
    line-height:1.4;
    font-weight:600;
}

.home-search-form{
    width:100%;
}

.home-search-input-wrapper{
    display:flex;
    align-items:stretch;
    width:100%;
    overflow:hidden;
    background:var(--ev-bg);
    border:1px solid var(--ev-border);
    border-radius:.65rem;
    transition:border-color .2s ease,box-shadow .2s ease;
}

.home-search-input-wrapper:focus-within{
    border-color:var(--ev-primary);
    box-shadow:0 0 0 .2rem var(--ev-accent-soft);
}

.home-search-input{
    min-width:0;
    flex:1;
    height:52px;
    padding:.75rem 1rem;
    color:var(--ev-text);
    background:transparent;
    border:0;
    outline:0;
    font-size:1rem;
}

.home-search-input::placeholder{
    color:var(--ev-muted);
}

.home-search-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-width:110px;
    padding:.75rem 1.1rem;
    color:#fff;
    background:var(--ev-primary);
    border:0;
    font-size:.95rem;
    font-weight:600;
    cursor:pointer;
    transition:background-color .2s ease;
}

.home-search-button:hover{
    color:#fff;
    background:#0b5ed7;
}

.home-search-button i{
    font-size:1rem;
}


@media(max-width:767.98px){

    .home-banner{
        padding:2.5rem 0 2rem;
    }

    .home-banner h1{
        font-size:1.75rem;
    }

    .home-banner-description{
        margin:1rem auto 1.5rem;
        font-size:.9rem;
        line-height:1.65;
    }

    .home-search-box{
        padding:1rem;
        border-radius:.8rem;
    }

    .home-search-box h2{
        font-size:1rem;
    }

    .home-search-input{
        height:48px;
        padding:.65rem .75rem;
        font-size:.9rem;
    }

    .home-search-button{
        min-width:48px;
        width:48px;
        padding:.5rem;
    }

    .home-search-button span{
        display:none;
    }

}

/* =========================================================
   HOME PAGE SECTIONS
   ========================================================= */

.home-page{
    width:100%;
}

.home-section{
    width:100%;
    padding:3rem 0;
}

.home-section + .home-section{
    padding-top:1.5rem;
}


/* ---------------------------------------------------------
   Section Header
   --------------------------------------------------------- */

.home-section-header{
    margin-bottom:1.5rem;
}

.home-section-header h2{
    margin:0;
    padding:1rem 1.25rem;
    color:#fff;
    background:var(--ev-primary);
    border-radius:.65rem;
    font-size:1.3rem;
    line-height:1.4;
    font-weight:700;
    box-shadow:0 .35rem 1rem rgba(13,110,253,.18);
}

.home-section-header p{
    margin:.75rem 0 0;
    color:var(--ev-muted);
    font-size:.92rem;
    line-height:1.6;
}


/* ---------------------------------------------------------
   Common Link Grid
   --------------------------------------------------------- */

.home-link-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.85rem;
}

.home-link-card{
    display:flex;
    align-items:center;
    gap:.85rem;
    min-height:72px;
    padding:1rem;
    color:var(--ev-text);
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:.75rem;
    text-decoration:none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.home-link-card:hover{
    color:var(--ev-text);
    background:var(--ev-hover);
    border-color:var(--ev-primary);
    transform:translateY(-2px);
    box-shadow:0 .35rem 1rem rgba(0,0,0,.06);
}

.home-link-card-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--ev-primary);
    background:var(--ev-accent-soft);
    border-radius:.6rem;
    font-size:1.15rem;
}

.home-link-card-content{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
}

.home-link-card-content h3{
    margin:0;
    color:var(--ev-text);
    font-size:1rem;
    line-height:1.4;
    font-weight:600;
}

.home-link-card-content > i{
    flex-shrink:0;
    color:var(--ev-muted);
    font-size:.9rem;
    transition:
        color .2s ease,
        transform .2s ease;
}

.home-link-card:hover .home-link-card-content > i{
    color:var(--ev-primary);
    transform:translateX(3px);
}

.home-link-card-content span{
    display:block;
    margin-top:.2rem;
    color:var(--ev-muted);
    font-size:.65rem;
    line-height:1.4;
}

.home-link-card:hover .home-link-card-content span{
    color:var(--ev-muted);
}	

/* ---------------------------------------------------------
   Popular Exams
   --------------------------------------------------------- */

.home-exam-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}

.home-exam-card{
    display:flex;
    align-items:center;
    gap:1rem;
    min-height:100px;
    padding:1.15rem;
    color:var(--ev-text);
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:.8rem;
    text-decoration:none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.home-exam-card:hover{
    color:var(--ev-text);
    background:var(--ev-hover);
    border-color:var(--ev-primary);
    transform:translateY(-2px);
    box-shadow:0 .4rem 1rem rgba(0,0,0,.07);
}

.home-exam-card-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--ev-primary);
    background:var(--ev-accent-soft);
    border-radius:.7rem;
    font-size:1.3rem;
}

.home-exam-card-content{
    min-width:0;
    flex:1;
}

.home-exam-card-content h3{
    margin:0 0 .35rem;
    color:var(--ev-text);
    font-size:1rem;
    line-height:1.4;
    font-weight:600;
}

.home-exam-card-content span{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:var(--ev-primary);
    font-size:.8rem;
    font-weight:500;
}

.home-exam-card-content span i{
    transition:transform .2s ease;
}

.home-exam-card:hover .home-exam-card-content span i{
    transform:translateX(3px);
}


/* ---------------------------------------------------------
   Exam Categories
   --------------------------------------------------------- */

.home-exam-categories{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin-top:1rem;
}

.home-exam-category{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.6rem .85rem;
    color:var(--ev-text);
    background:var(--ev-surface);
    border:1px solid var(--ev-border);
    border-radius:.55rem;
    text-decoration:none;
    font-size:.85rem;
    font-weight:500;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.home-exam-category:hover{
    color:var(--ev-primary);
    background:var(--ev-accent-soft);
    border-color:var(--ev-primary);
}

.home-exam-category i{
    color:var(--ev-muted);
    font-size:.75rem;
}

.home-exam-category:hover i{
    color:var(--ev-primary);
}


/* ---------------------------------------------------------
   Section Separation
   --------------------------------------------------------- */

.home-subjects{
    border-top:1px solid var(--ev-border);
}

.home-computer{
    border-top:1px solid var(--ev-border);
}

.home-engineering{
    border-top:1px solid var(--ev-border);
}

.home-graduate{
    border-top:1px solid var(--ev-border);
}

.home-current-affairs{
    border-top:1px solid var(--ev-border);
}

.home-interview{
    border-top:1px solid var(--ev-border);
}


/* ---------------------------------------------------------
   Dark Mode
   --------------------------------------------------------- */

[data-bs-theme="dark"] .home-link-card:hover,
[data-bs-theme="dark"] .home-exam-card:hover{
    box-shadow:0 .4rem 1rem rgba(0,0,0,.2);
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media(max-width:991.98px){

    .home-section{
        padding:2.5rem 0;
    }

    .home-link-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .home-exam-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media(max-width:767.98px){

    .home-section{
        padding:2rem 0;
    }

    .home-section + .home-section{
        padding-top:1rem;
    }

    .home-section-header{
        margin-bottom:1.25rem;
    }

    .home-section-header h2{
        padding:.85rem 1rem;
        font-size:1.15rem;
    }

    .home-section-header p{
        font-size:.88rem;
    }

    .home-link-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:.65rem;
    }

    .home-link-card{
        min-height:64px;
        padding:.75rem;
        gap:.65rem;
    }

    .home-link-card-icon{
        width:38px;
        height:38px;
        font-size:1rem;
    }

    .home-link-card-content h3{
        font-size:.88rem;
    }

    .home-exam-grid{
        grid-template-columns:1fr;
        gap:.65rem;
    }

    .home-exam-card{
        min-height:82px;
        padding:.9rem;
    }

    .home-exam-card-icon{
        width:44px;
        height:44px;
        font-size:1.15rem;
    }

    .home-exam-card-content h3{
        font-size:.95rem;
    }

    .home-exam-categories{
        gap:.5rem;
        overflow-x:auto;
        flex-wrap:nowrap;
        scrollbar-width:none;
        padding-bottom:.15rem;
    }

    .home-exam-categories::-webkit-scrollbar{
        display:none;
    }

    .home-exam-category{
        flex-shrink:0;
        font-size:.82rem;
    }
}


/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media(max-width:575.98px){

    .home-link-grid{
        grid-template-columns:1fr;
    }

    .home-link-card{
        min-height:60px;
    }

    .home-section-header h2{
        font-size:1.05rem;
    }

    .home-section-header p{
        font-size:.85rem;
    }
}