/* TopAICompare header search + mobile tabs fix */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

img,
svg,
video,
iframe {
  max-width: 100% !important;
}

header {
  max-width: 100% !important;
  overflow: visible !important;
}

header > *,
header .container,
header .header-in,
.header-in {
  min-width: 0 !important;
}

header .container,
.header-in,
header [class*="header"] {
  max-width: 100% !important;
}

.tac-site-search {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: min(320px, 32vw) !important;
  max-width: 320px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  padding: 5px !important;
  flex-shrink: 1 !important;
}

.tac-site-search input {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font: inherit !important;
  font-size: .86rem !important;
  padding: 7px 8px 7px 12px !important;
}

.tac-site-search input::placeholder {
  color: #9fb3b8 !important;
}

.tac-site-search button {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #19BCD2 !important;
  color: #07161B !important;
  font: inherit !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  header .container,
  header .header-in,
  .header-in {
    height: auto !important;
    min-height: 64px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
  }

  header .logo,
  header a[aria-label*="home" i] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  header nav,
  header .nav,
  header [aria-label="Primary"],
  header [aria-label*="Primary" i] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 99 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 8px 2px 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  header nav::-webkit-scrollbar,
  header .nav::-webkit-scrollbar {
    display: none !important;
  }

  header nav a,
  header .nav a,
  header [aria-label="Primary"] a,
  header [aria-label*="Primary" i] a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: .78rem !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.06) !important;
    color: #DCE9EC !important;
    text-decoration: none !important;
  }

  .tac-site-search {
    flex: 0 1 250px !important;
    width: min(48vw, 250px) !important;
    margin-left: 0 !important;
  }

  main,
  section,
  article,
  aside,
  .container,
  .layout,
  .article,
  .rail,
  .hero-in,
  .quickbox,
  .card,
  .mini,
  .example,
  .verdict,
  .strip,
  .grid2,
  .grid3 {
    max-width: 100% !important;
    min-width: 0 !important;
  }

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

@media (max-width: 560px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  header .logo,
  header a[aria-label*="home" i] {
    max-width: calc(100% - 172px) !important;
  }

  header .logo-tag {
    display: none !important;
  }

  .tac-site-search {
    width: 164px !important;
    flex-basis: 164px !important;
    padding: 4px !important;
  }

  .tac-site-search input {
    font-size: .78rem !important;
    padding: 7px 6px 7px 10px !important;
  }

  .tac-site-search button {
    font-size: 0 !important;
    width: 34px !important;
    height: 30px !important;
    padding: 0 !important;
    position: relative !important;
  }

  .tac-site-search button::before {
    content: "⌕" !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  h1 {
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 380px) {
  header .logo,
  header a[aria-label*="home" i] {
    max-width: calc(100% - 142px) !important;
  }

  .tac-site-search {
    width: 134px !important;
    flex-basis: 134px !important;
  }

  .tac-site-search input::placeholder {
    color: transparent !important;
  }
}