/* =========================
   PREMIUM HEADER + MENU CSS
========================= */

/* GLOBAL RESETS */
html,
body {
  overflow-x: hidden !important;
}

/* HEADER */
.headerOuter {
  background: #ffffff !important;
  border-bottom: 1px solid #ece8e1 !important;
  box-shadow: none !important;
}

.headerContainer,
.headerInner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-right: 20px !important;
}

/* HEADER TEXT */
.headerTitle {
  color: #1f1f1f !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 2px !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}

.headerSubtitle {
  color: #7b7b7b !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  box-shadow: none !important;
}

/* REMOVE CONSTRAINED BOX LOOK + OUTLINES (all screens) */
.WaGadgetMenuHorizontal .menuBackground,
.WaGadgetMenuHorizontal .menuOuter,
.WaGadgetMenuHorizontal .menuContainer,
.WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal ul.firstLevel,
.menuContainer,
.menuInner,
.menuOuter {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
}

/* DESKTOP ONLY — full-width band + alignment */
@media (min-width: 783px) {
  .WaGadgetMenuHorizontal,
  .menuOuter {
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background: #ffffff !important;
    border-top: none !important;
    border-bottom: 1px solid #f1ede7 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .WaGadgetMenuHorizontal .menuInner,
  .WaGadgetMenuHorizontal ul.firstLevel,
  .menuInner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 8px !important;
  }
}

/* TOP LEVEL MENU ITEMS */
.menuInner > li {
  margin-right: 18px !important;
}

.menuInner > li:last-child {
  margin-right: 0 !important;
}

.menuInner > li > a {
  position: relative !important;
  display: inline-block !important;
  padding: 16px 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  color: #4a5560 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  transition: color 0.22s ease !important;
}

/* UNDERLINE ANIMATION */
.menuInner > li > a::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 10px !important;
  height: 2px !important;
  background: #c20010 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.28s ease !important;
  opacity: 0.95 !important;
}

.menuInner > li > a:hover {
  color: #c20010 !important;
}

.menuInner > li > a:hover::after {
  transform: scaleX(1) !important;
}

/* ACTIVE TOP-LEVEL ITEM */
.menuInner > li.sel > a,
.menuInner > li.current > a,
.menuInner > li.active > a {
  color: #d90012 !important;
}

.menuInner > li.sel > a::after,
.menuInner > li.current > a::after,
.menuInner > li.active > a::after {
  transform: scaleX(1) !important;
}

/* DROPDOWN MENU */
.menuInner ul {
  background: #ffffff !important;
  border: 1px solid #eee8df !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 10px 0 !important;
  margin-top: 0 !important;
}

/* DROPDOWN ITEMS */
.menuInner ul li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.menuInner ul li a {
  display: block !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  color: #2f3a44 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: color 0.18s ease, padding-left 0.18s ease !important;
}

.menuInner ul li a:hover {
  background-color: #ffffff !important;
  color: #d90012 !important;
  padding-left: 20px !important;
}

/* ACTIVE DROPDOWN ITEM */
.menuInner ul li.sel > a,
.menuInner ul li.current > a,
.menuInner ul li.active > a {
  color: #d90012 !important;
  background-color: #faf7f2 !important;
}

/* LOGIN AREA */
.loginContainer a,
.loginLink a,
.memberLoginContainer a {
  color: #5f6368 !important;
  text-decoration: none !important;
  transition: color 0.18s ease, opacity 0.18s ease !important;
}

.loginContainer a:hover,
.loginLink a:hover,
.memberLoginContainer a:hover {
  color: #d90012 !important;
  opacity: 1 !important;
}

/* LANGUAGE PICKER */
.lang-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  top: 6px;
}

.lang-link {
  color: #777;
  text-decoration: none;
  opacity: 0.85;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.lang-link:hover {
  color: #d90012;
  opacity: 1;
}

.lang-link.active {
  color: #1f1f1f;
  opacity: 1;
  border-bottom: 1px solid #d90012;
  padding-bottom: 2px;
}

.lang-separator {
  color: #c8c1b8;
  font-weight: 400;
}

/* =========================
   MOBILE MENU
========================= */
@media (max-width: 782px) {

  /* MOBILE PANEL WRAPPER */
  .mobilePanel {
    background: #ffffff !important;
    border-bottom: 1px solid #ece8e1 !important;
    padding: 0 !important;
  }

  /* MENU + LOGIN BUTTONS */
  .mobilePanelButton {
    display: inline-block !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #4a5560 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    letter-spacing: 0.2px !important;
  }

  .mobilePanelButton.active,
  .mobilePanelButton:hover {
    color: #d90012 !important;
  }

  /* MOBILE MENU PANEL */
  .mobilePanel .menuInner {
    background: #ffffff !important;
    border-top: 1px solid #ece8e1 !important;
    padding: 8px 0 16px !important;
    width: 100% !important;
  }

  /* ALL LIST ITEMS */
  .mobilePanel .menuInner ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* ITEM DIVS */
  .mobilePanel .menuInner .item {
    border: none !important;
    background: transparent !important;
  }

  /* ALL LINKS */
  .mobilePanel .menuInner a {
    display: block !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2f3a44 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.18s ease, padding-left 0.18s ease !important;
  }

  .mobilePanel .menuInner a:hover {
    color: #d90012 !important;
    padding-left: 26px !important;
  }

  /* FIRST LEVEL — slightly bolder */
  .mobilePanel .menuInner ul.firstLevel > li > .item > a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f1f1f !important;
    padding: 11px 20px !important;
    border-bottom: 1px solid #f1ede7 !important;
  }

  .mobilePanel .menuInner ul.firstLevel > li > .item > a:hover {
    color: #d90012 !important;
    padding-left: 26px !important;
  }

  /* SECOND LEVEL — indented */
  .mobilePanel .menuInner ul.secondLevel > li > .item > a {
    padding-left: 32px !important;
    font-size: 13px !important;
    color: #4a5560 !important;
  }

  .mobilePanel .menuInner ul.secondLevel > li > .item > a:hover {
    color: #d90012 !important;
    padding-left: 38px !important;
  }

  /* THIRD LEVEL — more indented */
  .mobilePanel .menuInner ul.secondLevel ul > li > .item > a {
    padding-left: 48px !important;
    font-size: 13px !important;
    color: #7b7b7b !important;
  }

  .mobilePanel .menuInner ul.secondLevel ul > li > .item > a:hover {
    color: #d90012 !important;
    padding-left: 54px !important;
  }

  /* ACTIVE ITEMS */
  .mobilePanel .menuInner li.sel > .item > a,
  .mobilePanel .menuInner li.current > .item > a,
  .mobilePanel .menuInner li.active > .item > a {
    color: #d90012 !important;
  }

  /* HIDE DESKTOP LOGIN — mobile panel has its own */
  .WaPlaceHolderHeader .WaGadgetLoginForm {
    display: none !important;
  }

  /* LOGO + TITLE ON SAME ROW */
  .WaPlaceHolderHeader .WaLayoutTable,
  .WaPlaceHolderHeader .WaLayoutTable tbody,
  .WaPlaceHolderHeader .WaLayoutTable tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
  }

  .WaPlaceHolderHeader .WaLayoutSeparator {
    display: none !important;
  }

  .WaPlaceHolderHeader .WaLayoutItem {
    width: auto !important;
  }

  /* Logo cell — shrink to content */
  .WaPlaceHolderHeader .WaLayoutItem:has(img) {
    flex-shrink: 0 !important;
    padding-right: 10px !important;
  }

  /* Title cell — fill remaining space */
  .WaPlaceHolderHeader .WaLayoutItem:has(.headerTitle) {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Lang picker cell — full width second row */
  .WaPlaceHolderHeader .WaLayoutItem:has(.lang-picker) {
    flex-basis: 100% !important;
    border-top: 1px solid #ece8e1 !important;
    padding: 6px 0 10px 14px !important;
    margin-top: 0 !important;
  }

  /* Tighten lang picker */
  .lang-picker {
    top: 0 !important;
    font-size: 12px !important;
  }

  /* Shrink title text */
  .headerTitle {
    font-size: 17px !important;
  }

  .headerSubtitle {
    font-size: 11px !important;
  }
}