/* ===== Header & Navigation ===== */

/* BB's own mobile toggle/accordion is fully replaced by the custom
   drill-down menu (css/mobile-menu.css, js/header-menu.js). Hidden outright
   instead of relying on it staying collapsed on its own, since it would
   otherwise still render (and be clickable) below BB's own mobile
   breakpoint. */
.fl-page-nav-wrap .navbar-toggle {
  display: none !important;
}

/* -- Header Row -- */

/* BB's Customizer "Header Background" skin renders #F8F5EC (Send/send-200,
   the token Figma uses for dropdown/menu-panel surfaces) — Figma's header
   bar itself (desktop and mobile) specifies #FDFCF8 (Send/send-100), a
   distinct, slightly lighter token. */
.fl-page-header-primary,
.fl-page-header-fixed {
  background-color: #fdfcf8;
}

.fl-page-header-row {
  position: relative;
}

.fl-page-header-logo {
  text-align: left;
}

.fl-page-header-widgets-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-end;
}

.fl-page-header-widgets-col .btn-book-now {
  width: 134px;
}

.fl-page-header-menu-main {
  display: none;
}

.fl-page-nav-right.fl-page-header-fixed .fl-page-header-container.container,
.fl-page-header-fixed .fl-page-header-container.container {
  padding-bottom: 14.5px;
  padding-top: 14.5px;
}

.fl-page-header-menu-main {
  display: block;
}
.top-header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 24px;
  width: 100%;
}

.fl-page-nav .navbar-nav > li > a.nav-link {
  margin: 0px 12px;
  padding: 15px 16px;
  height: 78px;
  font-family: Unbounded;
  font-size: 14px;
  font-style: normal;
  text-align: center;
}

body:not(.translatepress-en_US) .fl-page-nav .navbar-nav > li > a.nav-link {
  padding: 15px 10px;
}


@media (max-width: 1225px) {
  .fl-page-nav .navbar-nav > li > a.nav-link {
    padding: 15px 10px;
  }
}

.fl-page-nav-right.fl-page-header-fixed
  .fl-page-nav-wrap
  .navbar-nav
  > li
  > a.nav-link,
.fl-page-header-fixed .fl-page-nav-wrap .navbar-nav > li > a.nav-link {
  padding: 15px 16px;
}

body:not(.translatepress-en_US)
  .fl-page-nav-right.fl-page-header-fixed
  .fl-page-nav-wrap
  .navbar-nav
  > li
  > a.nav-link,
body:not(.translatepress-en_US) .fl-page-header-fixed .fl-page-nav-wrap .navbar-nav > li > a.nav-link {
  padding: 15px 10px;
}


/* Per Figma's breakpoint note, the custom mobile drill-down menu
   (css/mobile-menu.css) takes over below 1120px — there is no separate
   compact tablet nav in between desktop and mobile. Hide the desktop nav
   column itself here so it doesn't render alongside the mobile hamburger
   bar (BB's own collapse only kicks in at its own, lower breakpoint). */
@media (max-width: 1119px) {
  .fl-page-nav-col {
    display: none;
  }

  .fl-page-nav-right.fl-page-header-fixed,
  .fl-page-header-fixed {
    display: none !important;
  }

  /* BB's grid (.col-md-6 / .col-lg-2, from FLLayout::col_classes()) has no
     smaller-breakpoint variant, so below "md" it falls back to its own
     default of width:100% — stacking the logo full-width and pushing
     widgets-col onto its own line below, instead of sharing the row with
     it the way the collapsed mobile bar (Figma) shows. Override both back
     to content width so they sit side by side again. */
  .fl-page-header-logo-col,
  .fl-page-header-widgets-col {
    width: auto;
    flex: 0 0 auto;
  }

  .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile
    .fl-page-header-logo {
    margin-right: 0px;
  }

  .top-header-wrapper {
    padding-bottom: 0px;
  }
}

.fl-page-nav-wrap {
  border: 0px;
  background-color: transparent;
}

.fl-page-header-container {
  padding-bottom: 0px;
}

.skip-to-menu-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 10000;
  padding: 10px 18px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  font-size: 14px;
  transition: top 0.15s ease;
}

.skip-to-menu-link:focus {
  top: 8px;
}

.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile.fl-page-nav-right
  .fl-page-header-row
  .fl-page-header-logo {
  padding-bottom: 0px;
}

.fl-page-header-fixed .fl-page-header-menu-main {
  text-align: center;
}
.fl-page-header-fixed .fl-page-header-widgets-col {
  padding-right: 0px;
}

.fl-page-header-fixed .fl-page-header-widgets-col .widget {
  float: right;
}

.fl-page-header-fixed .fl-page-header-widgets-col .lang-switcher {
  float: right;
  margin-top: 6px;
  margin-right: 26px;
}

.fl-page-header-widgets-col .lang-switcher {
  margin-right: 26px;
}

.fl-page-header-fixed .fl-page-header-logo img {
  height: 65px !important;
}

@media (max-width: 1120px) {
  /* .fl-page-header-row::before, */
  /* .fl-page-header-row::after { */
  /*   display: none; */
  /* } */

  .fl-page-nav-right .fl-page-header-row > div {
    width: 100%;
    display: block;
  }

  .fl-page-header-row.row {
    margin-left: 0px;
    margin-right: 0px;
    display: block;
  }

  .fl-page-header-primary .fl-logo-img,
  .fl-page-nav-right.fl-page-header-fixed .fl-logo-img,
  .fl-page-header-fixed .fl-logo-img {
    width: 108px !important;
  }

  .fl-page-fixed-nav-wrap {
    position: relative;
  }
  .fl-page-fixed-nav-wrap .navbar-toggler {
    top: -45px !important;
  }

  .fl-page-header-fixed .fl-page-fixed-nav-wrap {
    padding-left: 0px;
  }

  .fl-page-header-logo-col {
    padding-left: 0px;
    margin-right: 0px;
    padding-right: 0px !important;
  }

  .fl-page-header-container.container {
    padding: 12px 36px;
    max-width: 100%;
  }

  .fl-page-header-language-selector-col {
    padding-right: 60px;
  }

  .fl-page-header-widgets-col .btn-book-now {
    display: block !important;
    width: 106px;
    padding: 6px;
  }

  .fl-page-menu-right-col .btn-book-now {
    display: none;
  }

  .fl-page-header-language-selector-col .lang-switcher {
    display: none;
  }
}

@media (max-width: 768px) {
  .fl-page-header-container.container {
    padding: 12px 16px;
    max-width: 100%;
  }
}

.fl-page-header-language-selector-col .btn-book-now {
  display: none;
}

/* -- Page Menu -- */

.fl-page-menu-row {
  display: flex;
  justify-content: space-between;
}

.fl-page-nav-wrap {
  border: 0px;
}

.fl-page-menu-center-col {
  margin-right: 0px;
}

/* -- Chat With Us -- */

.chat-with-us {
  display: inline-block;
  width: 154px;
  border: 1px solid #072e58;
  background-color: #0d4a8e;
  color: white !important;
  padding: 9px 8px 9px 40px;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.14);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  border-radius: 8px;
  text-decoration: none;
  background-image: url("../images/chat-with-us.svg");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: 10px 50%;
  letter-spacing: 0px;
  transition: all 200ms ease-in-out;
}

.chat-with-us span,
.chat-with-us:hover span {
  color: white !important;
}

.chat-with-us:hover {
  color: white !important;
  text-decoration: none;
  background-color: #072e58;
}

@media (max-width: 1150px) {
  header .chat-with-us {
    display: none;
  }

  .fl-page-menu-center-col {
    margin-right: auto;
  }
}

@media (max-width: 992px) {
  .fl-pae-menu-container .btn-book-now {
    display: none;
  }
}

/* -- Menu / Submenu Overrides -- */

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li > a,
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li > a:hover {
  color: #000000;
}

.fl-page-nav-wrap .navbar-nav li > a:hover,
.fl-page-nav-wrap .navbar-nav li > a:focus {
  outline: none !important;
}

@media (min-width: 1120px) {
  .fl-submenu-indicator
    .fl-page-nav
    ul.sub-menu
    li.menu-item-has-children
    > a:after {
    width: 16px;
    height: 24px;
    background-image: url("../images/arrow-right.svg");
    content: "";
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
}

@media (max-width: 1120px) {
  .fl-page-menu-center-col {
    width: 100%;
  }

  .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile
    .fl-page-nav-collapse
    ul.navbar-nav
    li {
    border: 0px;
  }

  .fl-submenu-indicator
    .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile
    ul.navbar-nav
    li
    a {
    text-align: center;
    color: black;
    font-size: 14px;
    line-height: 24px;
    padding: 7px !important;
  }

  .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile
    .fl-page-nav
    ul.sub-menu
    li
    a:before {
    display: none;
  }

  .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile
    .fl-submenu-icon-wrap
    .fl-submenu-toggle-icon:after {
    width: 16px;
    height: 16px;
    content: "";
    background-image: url("../images/expand-circle-down.svg");
    margin-top: -4px;
  }

  .fl-submenu-indicator
    .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile
    ul.navbar-nav
    li.menu-item-has-children.fl-mobile-sub-menu-open
    > .fl-submenu-icon-wrap
    .fl-submenu-toggle-icon:after {
    content: "";
    background-image: url("../images/expand-circle-up.svg");
  }

  .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile
    .fl-page-nav-collapse,
  .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile
    .fl-page-nav-collapse
    .navbar-nav {
    border: none;
  }
}

@media (min-width: 1120px) {
  .fl-page-menu-container {
    padding-top: 28px;
    padding-bottom: 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .fl-submenu-indicator
    .fl-page-nav
    ul.navbar-nav
    > li.menu-item-has-children
    > a:after {
    display: none;
  }

  .fl-submenu-indicator
    .fl-page-nav
    ul.navbar-nav
    > li.menu-item-has-children
    > a:hover:after {
    background-image: url("../images/expand-circle-up.svg");
  }

  .fl-page-nav ul.sub-menu,
  .fl-page-nav-collapse ul.sub-menu {
    background-color: #ffffff !important;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #d6d6d6;
    box-shadow: none;
    padding: 8px;
  }
}

.fl-page-nav-centered .fl-page-nav ul.navbar-nav {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.fl-page-nav ul.sub-menu li a {
  font-size: 14px;
  line-height: 24px;
  padding: 4px 15px;
  text-align: center;
}

.fl-page-nav ul.sub-menu li:hover > a,
.fl-page-nav ul.sub-menu li.current-menu-item > a {
  background-color: #f8f5ec;
  border-radius: 8px;
}

.fl-page-nav .navbar-nav li > a {
  padding: 12px 20px;
}

.fl-page-nav .navbar-nav a {
  line-height: 24px;
}

.fl-page-nav
  ul
  li.fl-sub-menu-open
  > ul.sub-menu
  li.fl-sub-menu-open.fl-sub-menu-right
  > ul.sub-menu {
  left: 0px !important;
  opacity: 1 !important;
}

/* -- Language Selector -- */

.lang-switcher {
  display: inline-block;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(214, 214, 214, 1);
  border-radius: 8px;
  display: flex;
  width: 82px;
  height: 30px;
  padding: 4px 12px;
  justify-content: center;
  flex-shrink: 0;
  background-color: #ffffff;
  text-decoration: none;
  transition: border-color 200ms ease-in-out;
}

@media (max-width: 768px) {
  .lang-switcher {
    padding: 6px 3px;
    width: auto;
  }
}

.lang-switcher:hover {
  border-color: #1f1f1f;
  text-decoration: none;
}

.lang-switcher--white {
  background-color: #ffffff;
}

.lang-switcher-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
}

.lang-switcher-label {
  font-size: 16px;
  line-height: 20px;
}

/* -- Language Selector (Footer, old list style) -- */

.lang-switcher-footer {
  float: right;
  align-items: center;
  gap: 8px;
  border: 1px solid #858585;
  border-radius: 8px;
  display: flex;
  width: 80px;
  height: 30px;
  padding: 8px;
  justify-content: center;
  flex-shrink: 0;
}

.lang-switcher-footer--white {
  background-color: #ffffff;
}

.lang-item-footer {
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #5c5c5c !important;
}

.lang-item-footer.active {
  color: #000000 !important;
}

.lang-divider-footer {
  color: #ffffff;
}

footer .lang-switcher-footer {
  float: none;
  margin: auto;
  border: 0px;
}

footer .lang-switcher-footer .lang-item-footer {
  color: #d6d6d6 !important;
}

footer .lang-switcher-footer .lang-item-footer.active {
  color: #ffffff !important;
}