/* ==========================================================================
   Search Drawer — Overlay dropdown beneath the Search utility nav item
   Figma: node 2681:16557 (Search Modal)
   ========================================================================== */

.search-drawer {
  position: absolute;
  top: 100%;            /* flush below the topbar */
  right: 64px;          /* match the utility nav's px-64 padding */
  z-index: 500;         /* above primary nav (z-index 400) */
  background-color: #82142C;
  padding: 10px;
  width: 320px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease,
              transform 0.25s ease;
}

.search-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* The inner wrapper — no container needed, keep compact */
.search-drawer__inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  position: relative;
}

/* ---- Form layout ---- */
.search-drawer__form {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}

.search-drawer__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.search-drawer__icon {
  display: none;  /* Figma comp has no icon inside the input */
}

.search-drawer__input {
  width: 100%;
  height: 65px;
  padding: 0 26px;
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  font-family: 'Gotham', sans-serif;
  font-weight: 700;
  line-height: 1.18;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-drawer__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}

.search-drawer__input:focus {
  border-color: #FDB618;
}

/* ---- Submit button (visually hidden, form still submits on Enter) ---- */
.search-drawer__submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Close button ---- */
.search-drawer__close {
  display: none;  /* Not needed — drawer closes on mouseleave / blur / Escape */
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .search-drawer {
    /* Hidden on mobile — mobile overlay has its own search */
    display: none;
  }
}