/* ----- Base styles ----- */

body {
  font-family: Arial, sans-serif;
  margin: 27px;
  background: #fafafa;
}

h1 {
  font-family: 'Titillium Web', 'Raleway', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #007acc;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.subtitle {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #6b4c3b;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 500;
}

/* ----- Desktop wrapper ----- */
@media (min-width:1201px) {
  .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

@media (min-width: 1200px) {
  .content-wrapper {
    max-width: 1000px;
  }
}

/* Centered, narrower tabs */
.tabs {
  max-width: 600px;
  /* adjust to taste */
  margin: 0 auto 20px auto;
}

/* Centered, narrower search bar */
.search-area {
  max-width: 600px;
  /* same width as tabs for harmony */
  margin: 0 auto 4px auto;
}

/* ----- Desktop logo — stays exactly as it is now ----- */
.logo-desktop {
  position: absolute;
  top: 10px;
  /* Moves logo closer to top edge */
  left: 24px;
  height: 90px;
  /* Slightly larger than 64px or 72px */
  width: auto;
  margin-top: -4px;
  /* Nudges it upward relative to its container */
  z-index: 1000;
}

/* Mobile logo — hidden by default */
.logo-mobile {
  display: none;
  max-width: 80px;
  height: auto;
  margin: 1rem auto 0.5rem;
  /* centers and adds breathing room */
}

/* ----- Tabs ----- */
.tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: visible;
  background: #ffffff;
  /* soft MediVoca-compatible background */
  box-shadow: inset 0 0 0 1px #c0d4e8;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10px 14px;
  min-height: 38px;
  font-size: 15px;
  font-weight: 600;
  /* bolder text */
  color: #004d80;
  background: transparent;
  border: none;
  border-right: 1px solid #c0d4e8;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease;
}

.tab.active {
  background: #007acc;
  color: #fff;
  border-right: none;
}

/* Rounded corners for first and last tabs */
.tab:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.tab:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-right: none;
}

/* Arrow indicator — protruding outside tab */
.tab.active::after {
  content: "";
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #007acc transparent transparent transparent;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .tabs {
    flex-wrap: nowrap;
  }

  .tab {
    flex: 1;

    font-size: 14px;
    padding: 8px 10px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .tabs {
    flex-wrap: nowrap;
  }

  .tab {
    flex: 1;
    font-size: 13px;
    padding: 6px 8px;
    text-align: center;
  }
}

@media (prefers-color-scheme: dark) {
  .tab.active {
    background-color: #007acc;
    outline: 2px solid white;
    outline-offset: -2px;
    box-shadow: none;
    /* removes glow */
  }

  .tab.active::after {
    border-color: #007acc transparent transparent transparent;
  }

  .tab.spotlight {
    box-shadow: none;
    /* removes spotlight glow */
    animation: none;
    /* stops pulsing animation */
  }
}

/* ----- Search box ----- */
.search-area {
  position: relative;
  width: 100%;
}

.search-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto 20px;
  padding: 0;
  box-sizing: border-box;
}

#searchBox {
  width: 100%;
  padding: 10px 44px 10px 12px;
  /* extra right padding for icon */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  box-sizing: border-box;
}

:root {
  --clear-offset-start: 1250px;
  --clear-offset-min: 44px;
}

/* Smaller Screens */
@media (max-width: 1000px) {
  :root {
    --clear-offset-start: 800px;
    --clear-offset-min: 88px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --clear-offset-start: 259px;
    --clear-offset-min: 88px;
  }
}

/* iPhone Safari */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 480px) {
    :root {
      --clear-offset-start: 259px;
      --clear-offset-min: 28px;
    }
  }
}

/* Clear text icon */
.clear-icon {
  position: absolute;
  right: var(--clear-offset);
  transition: right 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.12s ease-out;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  padding: 6px;
  width: auto;
  color: #007acc;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  z-index: 3;
}

.clear-icon.visible {
  opacity: 1;
  pointer-events: auto;
}

.clear-icon:hover {
  color: #005f99;
}

.magnifier-icon {
  position: absolute;
  right: 16px;
  /* tighter to edge */
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.8;
}

.magnifier-icon:hover {
  animation: wiggle 0.4s ease-in-out;
}

@keyframes wiggle {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }

  25% {
    transform: translateY(-50%) rotate(-15deg);
  }

  50% {
    transform: translateY(-50%) rotate(15deg);
  }

  75% {
    transform: translateY(-50%) rotate(-10deg);
  }

  100% {
    transform: translateY(-50%) rotate(0deg);
  }
}

/* Mobile override */
@media (max-width: 600px) {
  .search-wrapper {
    max-width: 100%;
    padding: 0;
    /* add breathing room */
  }

  #searchBox {
    font-size: 15px;
  }

  .magnifier-icon {
    right: 20px;
    /* slightly more space on mobile */
  }
}

#searchBox.spotlight {
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, 0.9),
    /* thick bright outline */
    0 0 100px rgba(255, 255, 255, 1),
    /* intense mid glow */
    0 0 250px rgba(255, 255, 255, 0.8),
    /* wide halo */
    0 0 500px rgba(255, 255, 255, 0.6),
    /* extended aura */
    0 0 900px rgba(255, 255, 255, 0.4);
  /* ultra‑wide spotlight */
  transition: box-shadow 0.4s ease;
  animation: searchPulse 3s ease-in-out infinite;
}

@keyframes searchPulse {
  0% {
    box-shadow:
      0 0 0 12px rgba(255, 255, 255, 0.9),
      0 0 100px rgba(255, 255, 255, 1),
      0 0 250px rgba(255, 255, 255, 0.8),
      0 0 500px rgba(255, 255, 255, 0.6),
      0 0 900px rgba(255, 255, 255, 0.4);
  }

  50% {
    box-shadow:
      0 0 0 14px rgba(255, 255, 255, 1),
      0 0 150px rgba(255, 255, 255, 1),
      0 0 350px rgba(255, 255, 255, 0.9),
      0 0 700px rgba(255, 255, 255, 0.7),
      0 0 1200px rgba(255, 255, 255, 0.5);
  }

  100% {
    box-shadow:
      0 0 0 12px rgba(255, 255, 255, 0.9),
      0 0 100px rgba(255, 255, 255, 1),
      0 0 250px rgba(255, 255, 255, 0.8),
      0 0 500px rgba(255, 255, 255, 0.6),
      0 0 900px rgba(255, 255, 255, 0.4);
  }
}

/* ----- Autocomplete suggestions ----- */
.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  width: 250px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 12px;
  margin: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  transition: box-shadow 0.25s ease;
  backdrop-filter: blur(4px);
}

.suggestions div {
  padding: 8px 12px;
  cursor: pointer;
}

.suggestions div.highlight {
  background: rgba(100, 150, 255, 0.15);
  /* subtle tint */
  color: #0066cc;
  font-weight: normal;
  /* no bold */
}

/* ----- Alphabet Bar ----- */
.alphabet-bar {
  display: none;
  flex-direction: row;
  overflow-x: auto;
  white-space: nowrap;
  gap: 0;
  padding: 0;
  scroll-padding-right: 12px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #c0d4e8;
  height: 32px;
  margin-top: 0;
  margin-bottom: 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.alphabet-bar.show {
  display: flex;
  margin-top: 12px;
  margin-bottom: 12px;
  scroll-padding-right: 12px;
}

.alphabet-bar::-webkit-scrollbar {
  display: none;
  transition: .28s ease;
}

.alphabet-bar button {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: none;
  color: #007acc;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  gap: 0;
  padding: 0 8px;
  height: 100%;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.alphabet-bar button:last-child {
  margin: 0;
  padding-right: 8px;
}

.alphabet-bar button:hover {
  background-color: #e6f2ff;
  color: #005f99;
}

/* Divider line between letters — full height */
.alphabet-bar button:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background-color: #c0d4e8;
}

/* Selected letter styling — matches tab */
.alphabet-bar button.selected {
  background-color: #007acc;
  color: #ffffff;
}

/* Wrapper for bar + arrows */
.alphabet-scroll-wrapper {
  position: relative;
  display: flex;
  align-items: center;

  /* Centered, narrower alphabet bar */
  max-width: 600px;
  /* match tabs + search for harmony */
  margin: 0 auto 12px auto;
}

.alphabet-scroll-wrapper.collapsed {
  margin-bottom: 0 !important;
  height: 0;
  overflow: hidden;
  transition: margin-bottom 0.3s ease, height 0.3s ease;
}

/* Arrow buttons */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  /* no orb, no box */
  cursor: pointer;
  opacity: 0.85;
  /* visible but not loud */
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3;
  display: none;
  /* JS toggles */
}

/* Perfect spacing from the alphabet bar */
.scroll-left {
  left: -19.8px;
  /* ⬅️ THIS is the magic distance */
}

.scroll-right {
  right: -19.8px;
  /* ⬅️ perfectly symmetrical */
}

/* Hover effect: subtle, premium */
.scroll-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}

/* Arrow icon sizing */
.arrow-icon {
  width: 100%;
  height: 100%;
}

.arrow-icon path {
  stroke: #007acc;
  /* brand blue */
  stroke-width: 2.6;
  /* slightly thicker = crisp */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Gentle pulse for scroll hint */
@keyframes arrowPulse {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

.scroll-arrow.wave .arrow-icon {
  animation: arrowPulse 2s ease-in-out infinite;
}

/* ----- Table ----- */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 5px;
  box-shadow: none;
}

th,
td {
  padding: 12px;
  border: 1px solid #ccc;
  text-align: left;
  position: relative;
}

th {
  background: #007acc;
  color: #fff !important;
  font-weight: bold;
}

th:nth-child(1),
td:nth-child(1) {
  width: 20%;
}

th:nth-child(2),
td:nth-child(2) {
  width: 20%;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #007acc;
}

th:nth-child(3),
td:nth-child(3) {
  width: 60%;
}

tr:nth-child(even) {
  background: #f9f9f9;
}

tr:hover {
  background: #e6f7ff;
}

.table-wrapper {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 14px;
  display: inline-block;
  width: 100%;
  max-height: 600px;
  overflow: visible;
  overflow-y: auto;
  overflow-x: hidden;
  transition: height 0.4s ease;
  transition: margin-top 0.25s ease;
}

.table-wrapper.no-scroll {
  max-height: none;
  overflow-y: hidden;
  overflow-x: visible
}

.table-wrapper.show-all-height {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: visible
}

.table-wrapper table {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.table-wrapper.limited {
  overflow-y: hidden;
}

/* Custom scrollbar for table (Show All mode) */
.table-wrapper::-webkit-scrollbar {
  width: 10px;
  /* scrollbar thickness */
  height: 10px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: #e6f2ff;
  /* light blue track */
  border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: #007acc;
  /* your brand blue */
  border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #005fa3;
  /* darker blue on hover */
}

/* Firefox support */
.table-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #007acc #e6f2ff;
}

/* Android screen adaptation */
@media (max-width: 767px) {
  .table-wrapper {
    border-radius: 7px;
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
  }

  .table-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }

  th:nth-child(1),
  td:nth-child(1) {
    width: 18%;
  }

  /* Prefix */
  th:nth-child(2),
  td:nth-child(2) {
    width: 27%;
  }

  /* Meaning */
  th:nth-child(3),
  td:nth-child(3) {
    width: 50%;
  }

  /* Examples */
}

/* iphone screen adaptation */
@media (max-width: 480px) {
  .table-wrapper {
    border-radius: 7px;
    -ms-overflow-style: none;
    /* IE/Edge */
    scrollbar-width: none;
  }

  .table-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
  }

  @media (max-width: 400px) {

    /* Wider table for more horizontal space */
    .table-wrapper {
      width: 110%;
      margin-left: -5%;
      table-layout: fixed;
    }

    .table-wrapper td:nth-child(1),
    .table-wrapper th:nth-child(1) {
      font-size: 11.5px;
      width: 16%;
    }

    /* Make Medical Meaning smaller */
    .table-wrapper td:nth-child(2),
    .table-wrapper th:nth-child(2) {
      font-size: 10.8px;
      width: 27%;
    }

    /* Wider column for icon + selector */
    .table-wrapper td:nth-child(3),
    .table-wrapper th:nth-child(3) {
      width: 52%;
      font-size: 11px;
    }

    /* Smaller icon */
    .table-wrapper td .icon {
      width: 6px;
      height: 6px;
      margin-left: 2px;
    }

    /* Remove native arrow */
    select {
      appearance: none;
      -webkit-appearance: none;
      background-image: none;
    }

    /* Add tiny custom arrow */
    select {
      background: url('data:image/svg+xml;utf8,<svg fill="white" height="6" width="6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 20,0 10,10"/></svg>') no-repeat right 2px center;
      background-size: 6px;
      padding-right: 10px;
    }

    /* Shrink selector width */
    select {
      width: 30px;
      font-size: 11px !important;
      padding: 1px 2px;
      line-height: 1.0;
      height: auto;
    }

    /* Shrink dropdown menu items */
    select option {
      font-size: 11px !important;
      padding: 1px 2px;
      line-height: 1.0;
    }
  }

  /* Tighter, smaller table text for narrow screens */
  th,
  td {
    font-size: 11px;
    line-height: 1.2;
    padding: 4px 6px;
    white-space: normal;
    word-break: break-word;
    /* break long medical terms */
    overflow-wrap: anywhere;
    /* strongest wrap rule */
  }

  /* Examples column tends to overflow the most */
  td:nth-child(3) {
    font-size: 11px;
    overflow-wrap: anywhere;
  }

  /* Dropdown text also needs to shrink */
  select {
    font-size: 11px;
    min-width: 90px;
  }

  /* Info icon should scale down proportionally */
  .info-icon {
    width: 14px;
    height: 14px;
    font-size: 10px;
    margin-left: 4px;
  }

  /* Ensure table doesn't auto-expand columns */
  table {
    table-layout: fixed;
  }
}

/* Alphabetical divider row */
.alpha-divider td {
  background: #e6f2fb;
  /* soft blue tint */
  font-weight: 600;
  /* slightly lighter than bold */
  font-size: 0.95rem;
  padding: 6px 10px;
  border-top: 1px solid #c0d4e8;
  /* brand-aligned border */
  border-bottom: 1px solid #c0d4e8;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #004d80;
  /* deep blue for contrast */
}

/* Prevent divider rows from being selectable or interactive */
.alpha-divider {
  pointer-events: none;
}

/* Ensure divider rows never clip tooltips */
.alpha-divider td {
  position: relative;
  z-index: 1;
}

/* Sticky table headers */
.table-wrapper thead th {
  position: sticky;
  top: 0;
  border-top: 0;
  background: #007acc;
  /* original blue */
  color: #fff;
  z-index: 40;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* subtle shadow */
}

/* Scroll hint text */
.scroll-hint-text {
  display: none;
  /* hidden by default */
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  opacity: 0.7;
  margin-bottom: 6px;
  /* spacing between hint and table */
}

/* ----- Bottom controls (desktop + mobile) ----- */
.bottom-controls {
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: 10px;
}

.bottom-controls button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 36px;
  padding: 4px 8px;
  font-size: 0.85rem;
  background: #007acc;
  color: #fff;
  border: 1px solid #006bb3;
  border-radius: 8px;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bottom-controls button:hover {
  background: #3399ff;
  border-color: #3399ff;
}

/* Desktop adaptation: align buttons to the right */
@media (min-width: 768px) {
  .bottom-controls {
    justify-content: flex-end;
    gap: 12px;
    padding-right: 24px;
  }

  .bottom-controls .nav-pair {
    display: flex;
    gap: 12px;
  }

  .bottom-controls .nav-pair button {
    min-width: 110px;
    padding: 6px 14px;
    font-size: 0.95rem;
  }
}

.bottom-controls button {
  min-width: 110px;
  /* slightly longer but not bulky */
  min-height: 38px;
  /* balanced height */
  font-size: 0.95rem;
  /* refined text size */
  padding: 6px 14px;
  border-radius: 6px;
  /* softer corners */
  background: #007acc;
  color: #fff;
  border: 1px solid #d0d7de;
  /* subtle border */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bottom-controls button:hover {
  background: #005f99;
  border-color: #004c73;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.bottom-controls button:disabled {
  background: #f5f7fa;
  color: #007acc;
  border-color: #d0d7de;
  opacity: 0.5;
}

/* Show All toggle */
#toggleShowAll {
  background: #007acc;
  /* brand accent */
  color: #fff;
  border: none;
}

#toggleShowAll:hover {
  background: #005f99;
  transform: scale(1.05);
}

/* ----- Mobile nav fade animation ----- */
.mobile-nav-link {
  transition: opacity 0.25s ease, visibility 0.25s ease;
  opacity: 1;
  visibility: visible;
}

.mobile-nav-link.hidden {
  opacity: 0;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.mobile-nav-link.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Default: hide text links */
.nav-text {
  display: none;
}

/* Mobile adaptation: replace buttons with centered text links */
@media (max-width: 767px) {

  /* Hide the button layout on mobile */
  .nav-pair,
  #toggleShowAll {
    display: none;
  }

  /* Show text links instead */
  .nav-text {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    gap: 20px;
    /* more breathing room */
    font-size: 0.9rem;
    color: #007acc;
    /* brand blue */
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    /* subtle divider in light mode */
    margin: auto;
  }

  /* Hierarchy: Prev/Next bold, Show All lighter */
  #prevText,
  #nextText {
    font-weight: 600;
  }

  #showAllText {
    font-weight: 400;
    opacity: 0.85;
  }

  /* Interaction feedback */
  .nav-text span {
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .nav-text span:hover {
    color: #003f5c;
    text-decoration-thickness: 4px;
  }

  /* Dark mode adaptation */
  @media (prefers-color-scheme: dark) {
    .nav-text {
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
  }
}

/* ----- Select dropdown ------ */
select {
  appearance: none;
  background-color: #fff;
  color: #555;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  min-width: 120px;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

select:hover {
  color: #333;
  background-color: #f5f5f5;
  transition: background-color 0.38s ease, color 0.2s ease;
}

select:focus {
  background-color: #f5f5f5;
  outline: none;
}

select {
  transition: background-color 0.38s ease, color 0.2s ease;
}

@media (prefers-color-scheme: dark) {

  select:hover,
  select:focus {
    background-color: #2a2a2a;
    color: #eee;
    outline: none;
  }
}

/* ----- Info icon + tooltip ----- */
.info-icon {
  all: unset;
  /* reset default button styles */
  position: relative;
  /* needed for ::after hit area */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  /* visual size */
  height: 18px;
  z-index: 5;
  margin-left: 8px;
  background-color: #007acc;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  touch-action: manipulation;
  /* prevents double-tap zoom delay */
  -webkit-tap-highlight-color: transparent;
  /* suppress Chrome/Safari ripple */
}

.info-icon:hover {
  background-color: #005f99;
}

.info-icon:focus,
.info-icon:focus-visible {
  outline: none;
}

/* ✅ Invisible hit area to enlarge tap target */
.info-icon::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 42px;
  height: 42px;
  background: transparent;
}

/* ✅ Suppress the square highlight on mobile tap */
.info-icon:focus,
.info-icon:focus-visible {
  outline: none;
}

/* Definition box container */
.definition-box {
  margin: 12px auto;
  max-width: 400px;
  border: 1px solid #007acc;
  border-radius: 6px;
  background: #f9f9f9;
  padding: 8px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Toggle button */
.toggle-btn {
  background: #007acc;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

/* Inner scrolling wrapper (acts as viewport) */
.definition-content {
  display: none;
  margin-top: 6px;
  overflow: hidden;
  /* ensures text stays inside */
  position: relative;
  width: 100%;
}

.definition-content.show {
  display: block;
}

#definition-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #007acc;
  margin-bottom: 4px;
  text-align: center;
}

/* Definition text scrolling inside the box */
#definition-text {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #005a99;
  /* medium blue, softer than navy */
  letter-spacing: 0.5px;
  line-height: 1.4;
  white-space: nowrap;
  display: inline-block;
  animation: scrollText 14s linear infinite;
  text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.15);
  /* gentle shadow for clarity */
}

/* Scrolling animation */
@keyframes scrollText {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Optional: fade edges for smoother disappearance */
.definition-content::before,
.definition-content::after {
  width: 20px;
  /* narrower fade zone */
}

.definition-content::before {
  background: linear-gradient(to right, #f9f9f9, transparent);
  /* lighter background */
}

.definition-content::after {
  background: linear-gradient(to left, #f9f9f9, transparent);
}

#definition-text:hover {
  animation-play-state: paused;
}

/* ----- Tooltip Styling (Light + Dark Mode) ----- */
/* Tooltip base */
.tooltip {
  position: absolute;
  background: rgba(245, 245, 245, 0.95);
  color: #333;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.25;
  max-width: 480px;
  border: 1px solid #ccc;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  z-index: 6;
  opacity: 0;
  transform: translateY(-4px);
  /* slide-in start */
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.tooltip.show {
  opacity: 1;
  transform: translateY(0);
  /* slide-in end */
}

/* Chat-bubble style tooltip arrow (border + fill) */
.tooltip .tooltip-arrow {
  position: absolute;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
}

/* Both layers use pseudo-elements */
.tooltip .tooltip-arrow::before,
.tooltip .tooltip-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

/* BELOW (tooltip above icon, arrow points UP) */
.tooltip.below .tooltip-arrow {
  top: -7px;
}

/* Outer border triangle */
.tooltip.below .tooltip-arrow::before {
  top: 0;
  border-bottom: 7px solid #ccc;
  /* matches tooltip border */
}

/* Inner fill triangle */
.tooltip.below .tooltip-arrow::after {
  top: 1px;
  /* slight overlap to fuse with tooltip */
  border-bottom: 7px solid rgba(245, 245, 245, 0.95);
  /* matches tooltip background */
}

/* ABOVE (tooltip below icon, arrow points DOWN) */
.tooltip.above .tooltip-arrow {
  bottom: -7px;
}

/* Outer border triangle */
.tooltip.above .tooltip-arrow::before {
  bottom: 0;
  border-top: 7px solid #ccc;
  /* matches tooltip border */
}

/* Inner fill triangle */
.tooltip.above .tooltip-arrow::after {
  bottom: 1px;
  /* slight overlap to fuse with tooltip */
  border-top: 7px solid rgba(245, 245, 245, 0.95);
  /* matches tooltip background */
}

.tooltip .pair {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
  /* ultra-tight spacing */
}

.tooltip .pair:last-child {
  margin-bottom: 0;
}

.tooltip .label {
  font-weight: bold;
  white-space: nowrap;
}

.tooltip .value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dark mode adaptation */
@media (prefers-color-scheme: dark) {
  .tooltip {
    background: rgba(40, 40, 40, 0.95);
    /* soft charcoal */
    color: #eee;
    border: 1px solid #555;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  }

  .tooltip.below .tooltip-arrow::before {
    border-bottom-color: #555;
  }

  .tooltip.below .tooltip-arrow::after {
    border-bottom-color: rgba(40, 40, 40, 0.95);
  }

  .tooltip.above .tooltip-arrow::before {
    border-top-color: #555;
  }

  .tooltip.above .tooltip-arrow::after {
    border-top-color: rgba(40, 40, 40, 0.95);
  }
}

/* ----- Definition box ----- */
.definition-box {
  margin: 20px auto;
  max-width: 800px;
  border: 2px solid #007acc;
  border-radius: 8px;
  background: #f0f8ff;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.toggle-btn {
  background: #007acc;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
}

.definition-content {
  display: none;
  /* hidden by default */
  margin-top: 10px;
}

.definition-content.show {
  display: block;
}

/* ----- No-results doctor + caption with spotlight ----- */
.no-results {
  text-align: center;
  margin-top: 30px;
  background: none;
  padding: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.no-results.show {
  display: block;
  opacity: 1;
}

/* ----- Shimmer animation ----- */
@keyframes shimmer {
  0% {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.5);
  }

  100% {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
  }
}

.doctor-wrapper {
  display: inline-block;
  position: relative;
  z-index: 2;
  animation: bounce 1.2s ease-in-out infinite, pulseGlow 4s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  /* softer glow */
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.1) 80%);
  border-radius: 50%;
  padding: 16px;
}

.doctor-static {
  width: 100%;
  /* scales with container */
  max-width: 250px;
  /* never grows beyond 250px */
  height: auto;
  /* keeps proportions */
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}

.no-results-caption {
  font-family: 'Nunito', 'Quicksand', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  color: #6b4c3b;
  /* warm brown from doctor’s palette */
  margin-top: 14px;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.6s ease forwards;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
  }

  100% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
  }
}

@keyframes tabPulse {
  0% {
    box-shadow:
      0 0 0 8px rgba(255, 255, 255, 0.5),
      0 0 60px rgba(255, 255, 255, 0.6),
      0 0 150px rgba(255, 255, 255, 0.4),
      0 0 300px rgba(255, 255, 255, 0.3),
      0 0 600px rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.7),
      0 0 90px rgba(255, 255, 255, 0.7),
      0 0 200px rgba(255, 255, 255, 0.5),
      0 0 400px rgba(255, 255, 255, 0.4),
      0 0 800px rgba(255, 255, 255, 0.25);
  }

  100% {
    box-shadow:
      0 0 0 8px rgba(255, 255, 255, 0.5),
      0 0 60px rgba(255, 255, 255, 0.6),
      0 0 150px rgba(255, 255, 255, 0.4),
      0 0 300px rgba(255, 255, 255, 0.3),
      0 0 600px rgba(255, 255, 255, 0.2);
  }
}

/* --- Overlay effect --- */
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.01) 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#overlay.show {
  opacity: 1;
}

/* --- Highlight effect --- */
#highlight {
  position: relative;
  z-index: 1000;
  /* sits above overlay */
  text-align: center;
  color: white;
  display: none;
  /* hidden until triggered */
}

/* ----- Responsive settings for small phones ----- */

@media (max-width: 480px) {
  h1 {
    font-size: 1.2rem;
  }

  .tab {
    font-size: 12px;
    padding: 6px 10px;
    width: 100%;
  }

  #searchBox {
    font-size: 14px;
  }

  th,
  td {
    font-size: 0.8rem;
    padding: 6px;
  }

  .doctor-static {
    max-width: 150px;
  }
}

/* ----- Responsive settings for larger phones & small tablets */
/* ----- tablets & small laptops ----- */

@media (max-width: 1024px) {
  h1 {
    font-size: 1.6rem;
  }

  .tab {
    font-size: 15px;
  }

  table {
    font-size: 0.95rem;
  }

  .doctor-static {
    max-width: 200px;
  }
}

/* ----- Resonsive Wrapper Settings ----- */
/* Tablet screens */
@media (max-width: 1024px) {
  .table-wrapper {
    max-height: 350px;
    /* slightly smaller */
  }
}

/* Mobile screens */
@media (max-width: 600px) {
  .table-wrapper {
    max-height: 365px;
    /* tighter scroll box on phones */
  }
}

/* Mobile override — swap logos */
@media (max-width: 600px) {
  .logo-desktop {
    display: none;
  }

  .logo-mobile {
    display: block;
  }
}

/* Desktop hover tooltips */
@media (hover: hover) {
  .tooltip:hover {
    opacity: 1;
    pointer-events: auto;
  }
}