/* Global dark nav + auth button system (all frontend pages) */
body.cs-nav-v2 {
  --cs-nav-navy: #0a1324;
  --cs-nav-blue: #1677ff;
  --cs-nav-sky: #4db3ff;
  --cs-nav-header-h: 72px;
  /* Content clearance for the fixed header — keep in sync with --cs-nav-header-h.
     Do NOT reuse html scroll-padding-top for permanent layout (hash jumps only). */
  --cs-sticky-offset: var(--cs-nav-header-h);
  --cs-hero-inner-pad: 28px;
}

body.cs-nav-v2 header.main-header.cs-hp-header,
body.cs-nav-v2 header.main-header.cs-hp-header nav.main-navbar {
  background: rgba(10, 19, 36, 0.96) !important;
  border-bottom: 1px solid rgba(77, 179, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customVeryTop,
body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.cs-nav-v2 .cs-hp-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  text-decoration: none !important;
  z-index: 5;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  height: auto !important;
}

body.cs-nav-v2 .cs-hp-brand__logo,
body.cs-nav-v2 header.main-header.cs-hp-header .navbar-brand.cs-hp-brand img.cs-hp-brand__logo,
body.cs-nav-v2 .new_header .main-navbar .navbar-brand.cs-hp-brand img {
  display: block !important;
  height: 36px !important;
  width: auto !important;
  max-width: 190px !important;
  object-fit: contain !important;
}

/* Auth buttons — Log In outline / Sign Up Free solid blue */
body.cs-nav-v2 .cs-btn-login,
body.cs-nav-v2 a.cs-btn-login,
body.cs-nav-v2 .header-desktop-login .nav-link.cs-btn-login,
body.cs-nav-v2 .header-mobile-login.cs-btn-login {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  line-height: 1.2;
  white-space: nowrap;
}

body.cs-nav-v2 .cs-btn-signup,
body.cs-nav-v2 a.cs-btn-signup,
body.cs-nav-v2 .btn-sign.cs-btn-signup,
body.cs-nav-v2 .btn-sign.Or_btn.cs-btn-signup,
body.cs-nav-v2 .header-mobile-signup.cs-btn-signup {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 14px !important;
  border: 1px solid var(--cs-nav-blue) !important;
  border-radius: 10px !important;
  background: var(--cs-nav-blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  line-height: 1.2;
  white-space: nowrap;
}

body.cs-nav-v2 .cs-btn-signup:before,
body.cs-nav-v2 .cs-btn-signup:after,
body.cs-nav-v2 .btn-sign.cs-btn-signup:before,
body.cs-nav-v2 .btn-sign.cs-btn-signup:after,
body.cs-nav-v2 .btn-sign.Or_btn.cs-btn-signup:before,
body.cs-nav-v2 .btn-sign.Or_btn.cs-btn-signup:after {
  display: none !important;
  content: none !important;
}

body.cs-nav-v2 .cs-btn-signup span,
body.cs-nav-v2 .btn-sign.cs-btn-signup span,
body.cs-nav-v2 .cs-btn-login span {
  color: #fff !important;
  opacity: 1 !important;
  transform: none !important;
  position: static !important;
  font-weight: inherit;
}

/* Homepage / marketing page CTAs that mirror auth buttons */
body.cs-nav-v2 a.btn.cs-btn-login,
body.cs-nav-v2 a.btn.cs-btn-signup,
body.cs-nav-v2 .getItFreeHref.cs-btn-signup,
body.cs-nav-v2 a.signUpFreeBtn.cs-btn-signup {
  border-radius: 12px !important;
  min-height: 44px;
  padding: 10px 20px !important;
}

@media (min-width: 992px) {
  body.cs-nav-v2 header.main-header.cs-hp-header {
    height: var(--cs-nav-header-h);
  }

  body.cs-nav-v2 header.main-header.cs-hp-header nav.main-navbar {
    display: block;
    position: relative;
    height: var(--cs-nav-header-h);
    overflow: visible;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customVeryTop {
    height: var(--cs-nav-header-h) !important;
    min-height: var(--cs-nav-header-h) !important;
    background: transparent !important;
    overflow: visible !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customVeryTop .container {
    display: flex;
    align-items: center;
    min-height: var(--cs-nav-header-h);
    gap: 16px;
    max-width: 1240px;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .topSearch-sec,
  body.cs-nav-v2 header.main-header.cs-hp-header .header-mobile-search-btn {
    display: none !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    height: var(--cs-nav-header-h) !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    margin: 0 !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu .container {
    min-height: var(--cs-nav-header-h);
    height: var(--cs-nav-header-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    position: relative;
    max-width: 1240px;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu #main-navbarToggler {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    padding-left: 200px;
    padding-right: 0;
    background: transparent !important;
    min-width: 0;
    gap: 8px;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar,
  body.cs-nav-v2.customnew-homepage header.main-header.cs-hp-header .second-navbar {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    padding: 0 !important;
    overflow: visible;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin: 0;
    min-width: 0;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .nav-link {
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    padding: 6px 8px !important;
    white-space: nowrap;
    opacity: 0.92;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .nav-link:hover,
  body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .nav-link:focus,
  body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .nav-link.active {
    color: var(--cs-nav-sky) !important;
    opacity: 1;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .cate-dropdown-item > .nav-link:before {
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu #main-navbarToggler .navbar-nav.right-navbar-nav {
    order: 2;
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    max-width: none;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .right-navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 600;
  }

  /* Extension install icon — Chrome only (toggled via .is-chrome) */
  body.cs-nav-v2 header.main-header.cs-hp-header .sarver-checkout-text {
    display: none !important;
  }

  body.cs-nav-v2.is-chrome header.main-header.cs-hp-header .sarver-checkout-text.cs-nav-ext {
    display: inline-flex !important;
    align-items: center;
    margin: 0;
    min-width: 0;
    height: auto;
  }

  body.cs-nav-v2.is-chrome header.main-header.cs-hp-header .sarver-checkout-text.cs-nav-ext a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
  }

  body.cs-nav-v2.is-chrome header.main-header.cs-hp-header .sarver-checkout-text.cs-nav-ext .text {
    display: none !important;
  }

  body.cs-nav-v2.is-chrome header.main-header.cs-hp-header .sarver-checkout-text.cs-nav-ext .icon img {
    width: 20px;
    height: 20px;
    display: block;
  }
}

@media (min-width: 992px) and (max-width: 1280px) {
  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu #main-navbarToggler {
    padding-left: 176px;
  }

  body.cs-nav-v2 .cs-hp-brand__logo,
  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-brand.cs-hp-brand img.cs-hp-brand__logo {
    height: 32px !important;
    max-width: 164px !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .nav-link {
    font-size: 12px;
    padding: 6px 5px !important;
  }

  body.cs-nav-v2 .cs-btn-login,
  body.cs-nav-v2 .cs-btn-signup,
  body.cs-nav-v2 a.cs-btn-login,
  body.cs-nav-v2 a.cs-btn-signup {
    min-height: 34px;
    padding: 5px 10px !important;
    font-size: 12px !important;
  }

  body.cs-nav-v2.is-chrome header.main-header.cs-hp-header .sarver-checkout-text.cs-nav-ext a {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 991px) {
  body.cs-nav-v2 {
    --cs-nav-header-h: 64px;
    --cs-hero-inner-pad: 20px;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customVeryTop {
    background: rgba(10, 19, 36, 0.96) !important;
  }

  body.cs-nav-v2 .cs-hp-brand__logo {
    height: 34px !important;
    max-width: 170px !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-toggler-icon,
  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-toggler-icon .la,
  body.cs-nav-v2 header.main-header.cs-hp-header .header-mobile-search-btn {
    color: #fff !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .header-mobile-search-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 10px !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu,
  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-collapse {
    background: var(--cs-nav-navy) !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .nav-link,
  body.cs-nav-v2 header.main-header.cs-hp-header .right-navbar-nav .nav-link {
    color: #fff !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .sarver-checkout-text {
    display: none !important;
  }

  body.cs-nav-v2.is-chrome header.main-header.cs-hp-header .navbar-collapse .sarver-checkout-text.cs-nav-ext {
    display: flex !important;
    padding: 8px 12px 16px;
  }

  body.cs-nav-v2.is-chrome header.main-header.cs-hp-header .navbar-collapse .sarver-checkout-text.cs-nav-ext a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
  }

  body.cs-nav-v2.is-chrome header.main-header.cs-hp-header .navbar-collapse .sarver-checkout-text.cs-nav-ext .text {
    display: inline !important;
    color: #fff !important;
    font-weight: 600;
  }
}

@media (max-width: 575px) {
  body.cs-nav-v2 header.main-header.cs-hp-header .header-mobile-actions.is-guest {
    display: none !important;
  }

  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu .btn-sign-holder,
  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-customWhitemenu .header-desktop-login {
    display: list-item !important;
  }
}

/* Marketing page Sign Up / Log In CTAs — match header auth buttons */
body.cs-nav-v2 .Banner_Btn a.cs-btn-signup,
body.cs-nav-v2 .Banner_Btn.cs-auth-cta a,
body.cs-nav-v2 .signup-sec .Banner_Btn a,
body.cs-nav-v2 a.btn.cs-btn-signup,
body.cs-nav-v2 a.btn.cs-btn-login {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  background-image: none !important;
  transform: none !important;
}

body.cs-nav-v2 .Banner_Btn a.cs-btn-signup,
body.cs-nav-v2 .Banner_Btn.cs-auth-cta a,
body.cs-nav-v2 .signup-sec .Banner_Btn a,
body.cs-nav-v2 a.btn.cs-btn-signup {
  background: #1677ff !important;
  border: 1px solid #1677ff !important;
  color: #fff !important;
  font-weight: 700 !important;
}

body.cs-nav-v2 a.btn.cs-btn-login {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

body.cs-nav-v2 .Banner_Btn a.cs-btn-signup span,
body.cs-nav-v2 .Banner_Btn.cs-auth-cta a span,
body.cs-nav-v2 .signup-sec .Banner_Btn a span {
  color: #fff !important;
  background: none !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
}

body.cs-nav-v2 .Banner_Btn a.cs-btn-signup:before,
body.cs-nav-v2 .Banner_Btn a.cs-btn-signup:after,
body.cs-nav-v2 .Banner_Btn.cs-auth-cta a:before,
body.cs-nav-v2 .Banner_Btn.cs-auth-cta a:after,
body.cs-nav-v2 .signup-sec .Banner_Btn a:before,
body.cs-nav-v2 .signup-sec .Banner_Btn a:after {
  display: none !important;
  content: none !important;
}

/* ===== Dark nav dropdowns (Coupons / Discount Gift Cards) ===== */
body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar .discount-dropdown .dropdown-menu,
body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar .cate-dropdown-item .dropdown-menu,
body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar .dropdown-menu:not(.cate-dropdown-menu):not(.prfl-dropdown-menu) {
  background: #0a1324 !important;
  border: 1px solid rgba(77, 179, 255, 0.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  padding: 8px 0 !important;
  margin-top: 8px !important;
  min-width: 210px;
  overflow: hidden;
}

body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar ul.dis_giftcard {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar ul.dis_giftcard li,
body.cs-nav-v2 header.main-header.cs-hp-header .dropdown-menu ul.dis_giftcard li,
body.cs-nav-v2 header.main-header .dropdown-menu ul.dis_giftcard li {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar ul.dis_giftcard li a,
body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar ul.dis_giftcard li a.nav-link,
body.cs-nav-v2 header.main-header .dropdown-menu ul.dis_giftcard li a,
body.cs-nav-v2 header.main-header .dropdown-menu ul.dis_giftcard li a.nav-link {
  color: rgba(242, 244, 247, 0.92) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 18px !important;
  opacity: 1 !important;
}

body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar ul.dis_giftcard li a:hover,
body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar ul.dis_giftcard li a:focus,
body.cs-nav-v2 header.main-header.cs-hp-header .second-navbar ul.dis_giftcard li a.active,
body.cs-nav-v2 header.main-header .dropdown-menu ul.dis_giftcard li a:hover,
body.cs-nav-v2 header.main-header .dropdown-menu ul.dis_giftcard li a:focus,
body.cs-nav-v2 header.main-header .dropdown-menu ul.dis_giftcard li a.active {
  color: #fff !important;
  background: #1677ff !important;
  background-color: #1677ff !important;
}

body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .cate-dropdown-item.show > .nav-link,
body.cs-nav-v2 header.main-header.cs-hp-header .cs-hp-navlinks .discount-dropdown.show > .nav-link {
  color: #4db3ff !important;
}

@media (max-width: 991px) {
  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-collapse .discount-dropdown .dropdown-menu,
  body.cs-nav-v2 header.main-header.cs-hp-header .navbar-collapse .cate-dropdown-item .dropdown-menu {
    background: rgba(5, 10, 20, 0.96) !important;
    border: 1px solid rgba(77, 179, 255, 0.2) !important;
    box-shadow: none !important;
    margin: 4px 12px 12px !important;
  }
}

/* ===== Sticky header content clearance (single source of truth) =====
   Nav-v2 is shorter (~72px desktop / ~64px mobile). Legacy marketing CSS still
   clears 120-128px, which left empty bands under the sticky header on heroes
   (buy-coupons, sell pages) and site-main-container pages (cashback, etc.).
   Hash-anchor scroll-padding stays in cs-mobile-chrome.css - not layout padding. */
body.cs-nav-v2.customnew-homepage .sell_giftcard,
body.cs-nav-v2 .sell_giftcard {
  margin-top: var(--cs-sticky-offset);
}

/* Modals reuse .sell_giftcard for form chrome — do not apply page offset */
body.cs-nav-v2 .modal .sell_giftcard,
body.cs-nav-v2 .modal-body.sell_giftcard,
body.cs-nav-v2 .sell_giftcard.modal-body {
  margin-top: 0;
}

body.cs-nav-v2 .modal .sell_giftcard .banner,
body.cs-nav-v2 .modal-body.sell_giftcard .banner {
  padding-top: 0 !important;
}

/* Store / list shells that already fold clearance into their own padding */
body.cs-nav-v2 .sell_giftcard.bac_color.pad-top-30:not(.coupons_main_page) {
  margin-top: 0;
}

/* Hero banners: margin clears the sticky header; inner pad is breathing room only.
   !important beats buy-coupon inline padding-top and cs-mobile-marketing rules. */
body.cs-nav-v2 .sell_giftcard:has(.banner) .banner,
body.cs-nav-v2 .sell_giftcard > .banner {
  padding-top: var(--cs-hero-inner-pad) !important;
}

body.cs-nav-v2 .sell_giftcard:has(.banner) .banner .banner_text {
  padding-top: 12px;
}

/* Content shells that pad under the fixed header */
body.cs-nav-v2.customnew-homepage .site-main-container,
body.cs-nav-v2 .site-main-container {
  padding-top: var(--cs-sticky-offset);
}

body.cs-nav-v2 .Checkout_Saver_page {
  padding-top: var(--cs-sticky-offset);
}

body.cs-nav-v2 .comn-main-wrap {
  padding-top: var(--cs-sticky-offset);
}

/* Legacy cyan heroes that tuck under the fixed header (not homepage redesign) */
body.cs-nav-v2:not(.cs-hp-redesign) section.custom-banner-sec {
  padding-top: calc(var(--cs-sticky-offset) + var(--cs-hero-inner-pad));
}

body.cs-nav-v2:not(.cs-hp-redesign) section.custom-banner-sec .custombanner-textcontent {
  padding-top: 24px;
}