/* ============================================================
   WebDealz - Header / navbar redesign
   (assets/css/wd-header.css)

   Loaded after wd-currency.css and before Tailwind's runtime
   stylesheet is injected, so rules that must beat a Tailwind
   utility use a doubled class or a descendant selector
   (specificity 0,2,0 > 0,1,0).
   ============================================================ */

/* ---------- Bar shell ---------- */
.wd-navbar.wd-navbar {
  background: rgba(255, 255, 255, .9);
  padding: .5rem 0;
  box-shadow: 0 1px 0 var(--wd-border), 0 14px 30px -26px rgba(11, 31, 66, .6);
}
/* The top bar already carries the brand accent line - drop the
   duplicate gradient that used to sit at the top of the navbar. */
.wd-navbar.wd-navbar::before { display: none; }

.wd-navbar .wd-nav-inner {
  min-height: 60px;
  gap: .9rem;
}

/* ---------- Brand ---------- */
.wd-navbar .wd-brand { padding: .25rem 0; }
.wd-navbar .wd-brand-logo { height: 34px; transition: opacity .15s ease; }
.wd-navbar .wd-brand:hover .wd-brand-logo { opacity: .88; }

/* ---------- Nav links ---------- */
.wd-navbar .wd-nav-link {
  position: relative;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}
.wd-navbar .wd-nav-link::after {
  content: "";
  position: absolute;
  left: .72rem;
  right: .72rem;
  bottom: .26rem;
  height: 2px;
  border-radius: 2px;
  background: var(--wd-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
.wd-navbar .wd-nav-link:hover::after { transform: scaleX(1); }

/* ---------- Desktop search ---------- */
.wd-search-desktop {
  display: none;
}
@media (min-width: 992px) {
  .wd-search-desktop {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 460px;
    margin: 0 auto;
    padding: .26rem .26rem .26rem .95rem;
    background: var(--wd-bg-soft);
    border: 1px solid var(--wd-border);
    border-radius: 999px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .wd-search-desktop:focus-within {
    background: #fff;
    border-color: var(--wd-primary);
    box-shadow: 0 0 0 4px rgba(8, 102, 245, .12);
  }
}
.wd-search-desktop .wd-search-icon {
  flex: 0 0 auto;
  color: var(--wd-muted);
  font-size: .92rem;
}
.wd-search-desktop .wd-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .88rem;
  color: var(--wd-heading);
  padding: .42rem 0;
}
.wd-search-desktop .wd-search-input::placeholder { color: var(--wd-muted); }
.wd-search-desktop .wd-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--wd-grad-primary);
  color: #fff;
  cursor: pointer;
  font-size: .9rem;
  box-shadow: 0 6px 14px -6px rgba(8, 102, 245, .6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wd-search-desktop .wd-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(8, 102, 245, .7);
}
.wd-search-desktop .wd-search-btn:active { transform: translateY(0); }

/* ---------- Sell CTA ---------- */
.wd-navbar .wd-sell-btn {
  background: var(--wd-grad-orange);
  box-shadow: 0 10px 20px -10px rgba(255, 107, 0, .7);
  border-radius: 10px;
}
.wd-navbar .wd-sell-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(255, 107, 0, .8);
}

/* ---------- Mobile toggle ---------- */
.wd-navbar .wd-nav-panel { box-shadow: 0 18px 30px -24px rgba(11, 31, 66, .5); }

@media (prefers-reduced-motion: reduce) {
  .wd-navbar .wd-nav-link::after,
  .wd-navbar .wd-sell-btn,
  .wd-search-desktop .wd-search-btn { transition: none; }
}