/* ══════════════════════════════════════════════════════════════
   NEX Cb — GLOBAL STYLESHEET
   Loaded on EVERY page (via includes/header.php).

   Contains only the shared "chrome" of the site:
     · CSS variables + reset
     · Top bar
     · Navbar  (incl. the new header search bar)
     · Mobile menu
     · Footer
     · Cart toast / marquee / reveal helpers

   Page-specific rules live in  assets/css/pages/<page>.css
   The Add-to-Cart / product-card layout fixes live in
   assets/css/product-cards.css (loaded last so it always wins).
   ══════════════════════════════════════════════════════════════ */

:root {
      --teal:        #0db8c8;
      --teal-dark:   #0993a0;
      --teal-soft:   #e0f7fa;
      --orange:      #f07020;
      --orange-light:#ff8c3a;
      --orange-soft: #fff3eb;
      --navy:        #0d2351;
      --navy-mid:    #1a3a7c;
      --white:       #ffffff;
      --bg:          #f4f8fb;
      --bg2:         #eaf4f6;
      --text:        #1a2640;
      --text-muted:  #6b8299;
      --border:      #d3e8ee;
    }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--text); overflow-x: hidden; }
/* ── TOP BAR ── */
    .topbar { background: var(--navy); padding: 8px 0; font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .8px; color: rgba(255,255,255,.75); }
.topbar a { color: var(--teal); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.topbar-right { display: flex; gap: 20px; align-items: center; }
@media(max-width:576px){ .topbar-right { display: none; } }
/* ── NAVBAR ── */
    #mainNav {
      position: sticky; top: 0; z-index: 1050;
      background: #fff;
      box-shadow: 0 2px 16px rgba(13,35,81,.08);
      border-bottom: 3px solid var(--teal);
    }
.nav-inner { display: flex; align-items: center; height: 68px; position: relative; }
.nav-left  { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-right { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: flex-end; }
.nav-logo {
      position: absolute; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; gap: 10px;
      text-decoration: none; z-index: 2; white-space: nowrap;
    }
.logo-oval {
      width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--navy) 40%, var(--navy-mid) 100%);
      border: 2.5px solid var(--teal);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(13,184,200,.25);
    }
.logo-oval .ln { font-family:'Orbitron',sans-serif; font-size:14px; font-weight:900; color:var(--teal); line-height:1; }
.logo-oval .lc { font-family:'Orbitron',sans-serif; font-size:7px; font-weight:700; color:var(--orange); letter-spacing:1px; line-height:1; margin-top:2px; }
.logo-text .brand { font-family:'Orbitron',sans-serif; font-size:17px; font-weight:900; color:var(--navy); line-height:1; }
.logo-text .brand span { color:var(--orange); }
.logo-text .tag { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; color:var(--text-muted); letter-spacing:1.5px; line-height:1; margin-top:2px; }
.nav-lnk {
      font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      color: var(--text) !important; padding: 8px 12px; border-radius: 6px;
      text-decoration: none; transition: color .25s, background .25s; white-space: nowrap;
    }
.nav-lnk:hover { color: var(--teal) !important; background: var(--teal-soft); }
.btn-nav-quote {
      font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; background: var(--orange); color: #fff !important;
      border: none; border-radius: 6px; padding: 9px 20px;
      text-decoration: none; transition: all .3s; white-space: nowrap; display: inline-block;
    }
.btn-nav-quote:hover { background: var(--orange-light); transform: translateY(-1px); }
.nav-toggler {
      display: none; margin-left: auto;
      background: none; border: 1.5px solid var(--border); border-radius: 6px;
      cursor: pointer; padding: 7px 10px; color: var(--navy); font-size: 18px;
    }
.mobile-menu {
      display: none; flex-direction: column;
      background: #fff; border-top: 1px solid var(--border);
      padding: 8px 16px 20px;
      box-shadow: 0 8px 24px rgba(0,0,0,.1);
      position: absolute; top: 68px; left: 0; right: 0; z-index: 1049;
    }
.mobile-menu.open { display: flex; }
.mobile-menu a {
      font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase; color: var(--text);
      padding: 13px 8px; border-bottom: 1px solid var(--border);
      text-decoration: none; transition: color .2s;
    }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--teal); }
.mobile-menu .btn-nav-quote { margin-top: 12px; text-align: center; border-radius: 8px; padding: 12px; color: #fff !important; }
@media(max-width:991px){
      .nav-left, .nav-right { display: none; }
      .nav-toggler { display: block; }
      .nav-logo { position: static; transform: none; flex: 1; }
    }
/* ── MARQUEE ── */
    .marquee-wrap { background:var(--orange); overflow:hidden; white-space:nowrap; padding:11px 0; }
.marquee-track { display:inline-flex; animation:mq 18s linear infinite; }
.marquee-item { font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; color:#fff; padding:0 36px; text-transform:uppercase; }
.marquee-item i { margin-right:8px; }
@keyframes mq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* Cart notification */
    .cart-toast {
      position:fixed; bottom:30px; right:30px; z-index:9999;
      background:var(--navy); color:#fff; border-left:4px solid var(--teal);
      border-radius:10px; padding:16px 22px; font-family:'Rajdhani',sans-serif;
      font-size:15px; font-weight:700; letter-spacing:.5px;
      box-shadow:0 8px 32px rgba(13,35,81,.25);
      display:flex; align-items:center; gap:10px;
      transform:translateX(120%); transition:transform .4s cubic-bezier(.34,1.56,.64,1);
    }
.cart-toast.show { transform:translateX(0); }
.cart-toast i { color:var(--teal); font-size:18px; }
.btn-nav-quote:hover { background: var(--orange-light); transform: translateY(-1px); }
.nav-cart-badge {
      position: relative; display: inline-flex; align-items: center; gap: 6px;
      font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase; color: var(--navy) !important;
      padding: 8px 12px; border-radius: 6px; text-decoration: none;
      transition: color .25s, background .25s;
    }
.nav-cart-badge:hover { color: var(--teal) !important; background: var(--teal-soft); }
.cart-count {
      position: absolute; top: 2px; right: 2px;
      background: var(--orange); color: #fff;
      font-family: 'Orbitron', sans-serif; font-size: 9px; font-weight: 700;
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; line-height: 1;
    }
/* ── FOOTER ── */
    footer { background:#0a0e1f; padding:60px 0 28px; border-top:3px solid var(--teal); }
.footer-brand { font-family:'Orbitron',sans-serif; font-size:20px; font-weight:900; color:#fff; }
.footer-brand span { color:var(--orange); }
.footer-tag { font-size:12px; color:rgba(255,255,255,.4); letter-spacing:1.5px; margin-top:4px; }
.footer-p { font-size:14px; color:rgba(255,255,255,.5); line-height:1.8; margin-top:14px; }
.footer-h { font-family:'Rajdhani',sans-serif; font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--teal); margin-bottom:18px; }
.footer-ul { list-style:none; }
.footer-ul li { margin-bottom:9px; }
.footer-ul a { font-size:13px; color:rgba(255,255,255,.5); text-decoration:none; transition:color .25s; }
.footer-ul a:hover { color:var(--teal); }
.socials a { display:inline-flex; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:15px; margin-right:8px; transition:all .3s; text-decoration:none; }
.socials a:hover { background:var(--teal); color:var(--navy); border-color:var(--teal); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:22px; margin-top:48px; font-size:13px; color:rgba(255,255,255,.3); }

/* ══════════════════════════════════════════════════════════════
   ACTIVE NAV STATE
   (the markup already carried .active / .active-link, it was
    simply never styled — same visual language as :hover)
   ══════════════════════════════════════════════════════════════ */
.nav-lnk.active,
.nav-lnk.active-link { color: var(--teal) !important; background: var(--teal-soft); }
.nav-cart-badge.active { color: var(--teal) !important; background: var(--teal-soft); }

/* ══════════════════════════════════════════════════════════════
   HEADER SEARCH BAR
   ── Desktop  (≥1400px) : pill input sits inside .nav-right
   ── Laptop   (992–1399): input hides, magnifier opens the panel
   ── Mobile   (<992px)  : magnifier next to the hamburger,
                           panel drops full-width under the navbar
   Nothing can overflow because the inline form is removed from
   the flow at the exact width where the navbar runs out of room.
   ══════════════════════════════════════════════════════════════ */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.nav-search-input {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--text);
  background: #f4f8fb;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 8px 36px 8px 34px;
  width: 178px;
  outline: none;
  transition: width .3s ease, border-color .25s, box-shadow .25s, background .25s;
}
.nav-search-input::placeholder { color: var(--text-muted); }
.nav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nav-search-input:focus {
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13,184,200,.12);
  /* NOTE: width deliberately unchanged. The .nav-logo is absolutely
     centred, so growing the field on focus pushes .nav-right leftwards
     and straight into the logo. */
}
.nav-search-icon {
  position: absolute; left: 13px;
  font-size: 12.5px; color: var(--text-muted);
  pointer-events: none;
}
.nav-search-btn {
  position: absolute; right: 5px;
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.nav-search-btn:hover { background: var(--teal-dark); transform: scale(1.06); }

/* magnifier that opens the drop-down panel */
.nav-search-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  color: var(--navy);
  font-size: 16px;
  line-height: 1;
  padding: 8px 11px;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.nav-search-toggle:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }

/* full-width drop-down panel */
.search-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 3px solid var(--teal);
  box-shadow: 0 14px 30px rgba(13,35,81,.12);
  padding: 14px 0;
  display: none;
  z-index: 1048;
}
.search-panel.open { display: block; }
.search-panel .nav-search { width: 100%; }
.search-panel .nav-search-input,
.search-panel .nav-search-input:focus {
  width: 100%;
  border-radius: 10px;
  padding: 12px 48px 12px 40px;
  font-size: 15px;
  background: #fff;
}
.search-panel .nav-search-icon { left: 15px; font-size: 14px; }
.search-panel .nav-search-btn { right: 7px; width: 32px; height: 32px; font-size: 12px; }
.search-panel-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: 8px;
}
.search-panel-hint a { color: var(--teal); text-decoration: none; }
.search-panel-hint a:hover { text-decoration: underline; }

@media (max-width: 1399px) {
  .nav-search-inline { display: none; }      /* frees the navbar space */
  .nav-search-toggle { display: inline-flex; }
}
@media (max-width: 991px) {
  .nav-search-toggle { margin-left: auto; margin-right: 8px; }
}
@media (max-width: 575px) {
  .search-panel { padding: 12px 0; }
  .nav-search-toggle { padding: 7px 9px; font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER CERTIFICATION BADGES
   (previously written as repeated inline styles on every page)
   ══════════════════════════════════════════════════════════════ */
.cert-badge {
  background: rgba(13,184,200,.1);
  border: 1px solid rgba(13,184,200,.2);
  color: var(--teal);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 5px 12px; border-radius: 4px;
}
.cert-badge-orange {
  background: rgba(240,112,32,.1);
  border: 1px solid rgba(240,112,32,.2);
  color: var(--orange);
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 5px 12px; border-radius: 4px;
}
.footer-contact-list { font-size: 14px; color: rgba(255,255,255,.5); line-height: 2.2; }
.footer-contact-list i { width: 16px; }
.footer-legal a { color: var(--teal); text-decoration: none; }
.footer-legal a + a { margin-left: 16px; }

/* ══════════════════════════════════════════════════════════════
   SCROLL-REVEAL (default; individual pages may tune the timing)
   ══════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }
.reveal.visible, .reveal.vis { opacity: 1; transform: none; }


/* ══════════════════════════════════════════════════════════════
   FOOTER "WE ACCEPT" BADGES
   Used by the shared footer on cart.php / checkout.php.
   Values copied verbatim from the original cart.html.
   ══════════════════════════════════════════════════════════════ */
.pay-accepted { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pay-badge {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px; padding:4px 10px;
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.5px; color:rgba(255,255,255,.45);
}