/* ColecoVisionZone search box
   To change colors, edit the three values below. */
.cvz-search {
  --cvz-accent: #1e5bd8;       /* button color */
  --cvz-accent-hover: #1646a8; /* button color on hover */
  --cvz-border: #c9ced8;       /* outline of the box */

  container-type: inline-size; /* lets the button shrink to an icon when the box is narrow */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  margin: 12px auto;
  background: #fff;
  border: 2px solid var(--cvz-border);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cvz-search:focus-within {
  border-color: var(--cvz-accent);
  box-shadow: 0 0 0 4px rgba(30, 91, 216, 0.18);
}
.cvz-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 16px; /* 16px stops iPhones from zooming in when tapped */
  color: #222;
}
.cvz-search input::placeholder { color: #8a909c; }
.cvz-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  margin: 3px;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--cvz-accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.cvz-search button:hover { background: var(--cvz-accent-hover); }
.cvz-search button:active { transform: scale(0.95); }
.cvz-search button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.cvz-search button svg { width: 18px; height: 18px; flex: none; }

/* When the box itself is narrow (any screen size), show only the magnifying glass */
@container (max-width: 260px) {
  .cvz-search .cvz-label { display: none; }
  .cvz-search button { padding: 7px 10px; }
}
/* Fallback for older browsers without container queries */
@supports not (container-type: inline-size) {
  @media (min-width: 1200px) and (max-width: 1349.98px) {
    .cvz-search .cvz-label { display: none; }
    .cvz-search button { padding: 7px 10px; }
  }
}

/* ---- Inside the Bootstrap menu bar ---- */
/* Wide screens: search sits on the same line as the menu, at the right */
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-collapse { flex-wrap: nowrap; align-items: center; }
  .navbar-expand-xl .navbar-nav { flex-wrap: nowrap; white-space: nowrap; }
  .navbar .cvz-search {
    flex: 0 1 320px;   /* up to 320px wide, shrinks when space is tight */
    min-width: 110px;
    margin: 0 0 0 12px;
  }
}
/* Smaller screens: search appears inside the hamburger menu, full width */
@media (max-width: 1199.98px) {
  .navbar .cvz-search { max-width: none; margin: 6px 0 12px; }
}

/* ---- Search results page ---- */
.cvz-results-page { max-width: 820px; margin: 0 auto; padding: 16px; }
.cvz-results-page h1 { text-align: center; margin-bottom: 4px; }
#cvz-status { text-align: center; color: #555; margin: 8px 0 20px; }
#cvz-results { list-style: none; padding: 0; margin: 0; }
#cvz-results li {
  background: #fff;
  border: 1px solid #e1e4ea;
  border-left: 4px solid #1e5bd8;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
#cvz-results a { font-size: 18px; font-weight: bold; color: #1e5bd8; text-decoration: none; }
#cvz-results a:hover { text-decoration: underline; }
#cvz-results p { margin: 6px 0 0; color: #444; line-height: 1.5; }
#cvz-results mark { background: #ffe066; padding: 0 2px; border-radius: 3px; }
@media (max-width: 600px) {
  .cvz-results-page { padding: 12px; }
  #cvz-results li { padding: 12px 14px; }
  #cvz-results a { font-size: 17px; }
}