/* ================================================================
   MIC Solutions — Premium Two-Tier Header v6
   ALIGNMENT FIX: All three rows share the same max-width container
   and identical horizontal padding (--h-pad) so left/right edges
   are perfectly flush across topbar → row1 → row2.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* Palette */
  --h-orange:      #f97316;
  --h-orange-dk:   #ea6c0a;
  --h-orange-glow: rgba(249,115,22,0.20);
  --h-orange-soft: rgba(249,115,22,0.07);
  --h-green:       #008000;
  --h-dark:        #0f172a;
  --h-body:        #1e293b;
  --h-muted:       #64748b;
  --h-border:      #e2e8f0;
  --h-white:       #ffffff;
  --h-topbg:       #0f172a;

  /* ★ SINGLE shared horizontal padding — all 3 rows use this ★ */
  --h-pad:         clamp(16px, 3vw, 40px);

  /* ★ SINGLE shared max-width — all 3 rows use this ★ */
  --h-max:         1520px;

  /* Fonts & animation */
  --h-font:        'Inter', -apple-system, 'Segoe UI', sans-serif;
  --h-ease:        all 0.28s cubic-bezier(0.4,0,0.2,1);
  --h-spring:      all 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Scope reset ─────────────────────────────────────────────── */
.nh *, .nh *::before, .nh *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.nh {
  font-family: var(--h-font);
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1050;
}
.nh a      { text-decoration: none; }
.nh button { font-family: var(--h-font); cursor: pointer; background: none; border: none; }


/* ════════════════════════════════════════════════════════════════
   SHARED INNER CONTAINER
   Applied to .nh-topbar__inner, .nh-row1__inner, .nh-row2__inner
   Ensures all three rows flush-align at identical left/right edges
   ════════════════════════════════════════════════════════════════ */
.nh-topbar__inner,
.nh-row1__inner,
.nh-row2__inner {
  max-width: var(--h-max);
  margin: 0 auto;
  padding-left:  var(--h-pad);
  padding-right: var(--h-pad);
  display: flex;
  align-items: center;
}


/* ════════════════════════════════════════════════════════════════
   ROW 0 — TOP INFO BAR  (dark background)
   Styles for .topbar-v2 live in top.ejs (self-contained).
   The CSS below keeps the nh-topbar variant in sync if used.
   ════════════════════════════════════════════════════════════════ */
.nh-topbar {
  background: var(--h-topbg);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nh-topbar__inner {
  justify-content: space-between;
}


/* ════════════════════════════════════════════════════════════════
   ROW 1 — MAIN NAV  (white, sticky)
   ════════════════════════════════════════════════════════════════ */
.nh-row1 {
  background: var(--h-white);
  box-shadow: 0 1px 0 var(--h-border);
  position: sticky;
  top: 0;
  z-index: 1049;
  transition: box-shadow 0.35s ease;
}

.nh-row1.scrolled {
  box-shadow: 0 4px 24px rgba(15,23,42,0.10);
}

.nh-row1__inner {
  height: 68px;
  justify-content: space-between;
  gap: 16px;
}

/* ── Logo ── */
.nh-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.22s;
}

.nh-logo:hover { opacity: 0.80; }

/* Enlarged logo */
.nh-logo img {
  height: 52px;        /* bigger than before for better visibility */
  width: auto;
  display: block;
}

/* ── Right actions ── */
.nh-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nh-contact-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--h-muted);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  transition: var(--h-ease);
}

.nh-contact-link:hover {
  color: var(--h-body);
  background: #f8fafc;
  transform: translateY(-1px);
}

/* Language pill */
.nh-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--h-border);
  background: var(--h-white);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--h-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--h-ease);
}

.nh-lang:hover, .nh-lang.si-active {
  border-color: var(--h-orange);
  color: var(--h-orange);
  background: var(--h-orange-soft);
}

.nh-lang-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--h-orange);
}

/* Cart */
.nh-cart {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--h-border);
  background: var(--h-white);
  display: grid; place-items: center;
  color: var(--h-body);
  font-size: 1rem;
  text-decoration: none;
  transition: var(--h-spring);
}

.nh-cart:hover {
  border-color: var(--h-orange);
  color: var(--h-orange);
  transform: translateY(-2px);
  box-shadow: 0 5px 16px var(--h-orange-glow);
}

.nh-cart-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--h-orange);
  color: #fff;
  font-size: 0.57rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* Profile */
.nh-profile {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--h-border);
  background: #f8fafc;
  display: grid; place-items: center;
  color: var(--h-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: var(--h-ease);
}

.nh-profile:hover {
  border-color: var(--h-orange);
  color: var(--h-orange);
  transform: translateY(-1px);
}

/* LOGIN — gradient pill */
.nh-btn-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  box-shadow: 0 3px 12px rgba(249,115,22,0.30);
  transition: var(--h-spring);
}

.nh-btn-login:hover {
  background: linear-gradient(135deg, #ea6c0a 0%, #f97316 100%);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(249,115,22,0.42);
}

.nh-btn-login:active { transform: scale(0.97); }

/* Ghost buttons */
.nh-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border-radius: 9px;
  border: 1.5px solid var(--h-border);
  background: transparent;
  color: var(--h-muted);
  font-size: 0.77rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--h-ease);
}

.nh-btn-ghost i { font-size: 0.73rem; }

.nh-btn-ghost:hover {
  border-color: var(--h-orange);
  color: var(--h-orange);
  background: var(--h-orange-soft);
  transform: translateY(-1px);
}

/* Separator line */
.nh-sep {
  width: 1px; height: 20px;
  background: var(--h-border);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Hamburger */
.nh-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 9px;
  border-radius: 10px;
  border: 1.5px solid var(--h-border);
  background: var(--h-white);
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
  transition: var(--h-ease);
}

.nh-burger:hover { border-color: var(--h-orange); background: var(--h-orange-soft); }

.nh-burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--h-dark);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.26s ease, opacity 0.26s;
}

.nh-burger.open span:nth-child(1) { transform: translateY(6.5px)  rotate(45deg);  }
.nh-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nh-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ════════════════════════════════════════════════════════════════
   ROW 2 — BRANDS BAR  (brand card design, < 1200px collapses)
   ════════════════════════════════════════════════════════════════ */
.nh-row2 {
  background: #f8fafc;
  border-top: 1px solid #eef2f7;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.nh-row2__inner {
  height: 64px;
  justify-content: center;
  gap: 10px;          /* cards are spaced by their own padding */
  overflow: hidden;
}

/* ── Brand card — each brand is a pill-card ──────────────────── */
.nh-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  /* Card shell */
  background: #ffffff;
  border: 1px solid #dde3ed;
  border-radius: 12px;
  padding: 8px 18px;
  min-height: 42px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  /* Lift animation */
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.28s ease,
              border-color 0.22s ease,
              background  0.22s ease;
}

.nh-brand:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.09);
  border-color: #c7d2e0;
}

.nh-brand:active { transform: translateY(-1px); }

/* TIANDY — green accent card */
.nh-brand--tiandy {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--h-green);
  letter-spacing: 0.5px;
  border-color: rgba(0,128,0,0.20);
  background: rgba(0,128,0,0.04);
}

.nh-brand--tiandy:hover {
  border-color: rgba(0,128,0,0.35);
  background: rgba(0,128,0,0.08);
  box-shadow: 0 6px 20px rgba(0,128,0,0.10);
  color: #005a00;
}

/* Text items */
.nh-brand--text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

/* ── Logo image cards — uniform sizing ───────────────────────── */
.nh-brand--img img {
  display: block;
  height: 26px;          /* default uniform height */
  width: auto;
  max-width: 100px;
  object-fit: contain;
  transition: opacity 0.22s;
}

.nh-brand--img:hover img { opacity: 0.78; }

/* HIKVISION — enlarged to fill card visually */
.nh-brand--hikvision img {
  height: 42px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
}

/* DAHUA — enlarged to match */
.nh-brand--dahua img {
  height: 40px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
}

/* EZVIZ */
.nh-brand--ezviz img { height: 26px; }

/* MEARI — icon + text, uniform card */
.nh-brand--meari { gap: 8px; }

.nh-brand--meari img {
  height: 22px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  transition: opacity 0.22s;
}

.nh-brand--meari:hover img { opacity: 0.78; }

.nh-brand--meari span {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* ════════════════════════════════════════════════════════════════
   MOBILE DRAWER
   ════════════════════════════════════════════════════════════════ */
.nh-drawer {
  display: none;
  flex-direction: column;
  background: var(--h-white);
  border-top: 2px solid var(--h-orange);
  box-shadow: 0 16px 40px rgba(15,23,42,0.13);
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 1048;
  padding: 6px 0 14px;
  animation: nhDrawerIn 0.22s cubic-bezier(0.4,0,0.2,1);
}

@keyframes nhDrawerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nh-drawer.open { display: flex; }

.nh-drawer-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px var(--h-pad);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--h-body);
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.18s, padding-left 0.2s ease, color 0.18s;
}

.nh-drawer-link:last-of-type { border-bottom: none; }

.nh-drawer-link:hover {
  background: #fff8f5;
  color: var(--h-orange);
  padding-left: calc(var(--h-pad) + 8px);
}

.nh-drawer-link--tiandy { color: var(--h-green); font-weight: 600; }
.nh-drawer-link--tiandy:hover { color: #005500; }

.nh-drawer-link img {
  height: 20px; width: auto;
  object-fit: contain; flex-shrink: 0;
}

.nh-drawer-link i {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: #f1f5f9;
  display: grid; place-items: center;
  font-size: 0.78rem;
  color: var(--h-muted);
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}

.nh-drawer-link:hover i {
  background: var(--h-orange-soft);
  color: var(--h-orange);
}

.nh-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px var(--h-pad) 4px;
  border-top: 1px solid #f1f5f9;
  margin-top: 6px;
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* ≥ 1200px: full two-row layout */
@media (min-width: 1200px) {
  .nh-burger { display: none; }
  .nh-row2   { display: block; }
  .nh-drawer { display: none !important; }
}

/* < 1200px: brands row collapses to hamburger */
@media (max-width: 1199px) {
  .nh-row2   { display: none; }
  .nh-burger { display: flex; }
}

/* ≤ 768px */
@media (max-width: 768px) {
  .nh-row1__inner { height: 60px; }
  .nh-btn-ghost   { display: none; }
  .nh-sep         { display: none; }
}

/* ≤ 480px */
@media (max-width: 480px) {
  .nh-logo img  { height: 40px; }
  .nh-actions   { gap: 4px; }
  .nh-btn-login { padding: 8px 13px; font-size: 0.76rem; }
}