/* =============================================================================
   bookingsmaker.com - "bmdefault" NEW THEME
   File: bm-header-footer.css
   Purpose: Shared header + footer styling for hotel-search, hotel-listing,
            hotel-detail and hotel-booking, based on the homepage template's
            header/footer design (newtemplates/website_view/bm_homepage.html),
            EXTENDED to cover functionality the static template mock-up does
            not show but the live site needs on every page:
              - guest vs. logged-in state (Login/Signup button vs. avatar)
              - wallet / deposit balance badge
              - Agent vs. Customer "My Account" dropdown menus
              - currency selector
              - dynamic "Popular city" footer links (from DB)
              - sister-brand logo strip
              - social icons + app download badges + payment icons

   Depends on: bm-tokens.css, bm-components.css.

   SCOPE / STATUS: CSS only. The actual header/footer markup in
   views/layouts/main.php (Yii NavBar/Nav widgets + PHP-rendered footer)
   is NOT modified by this file - that requires a separate, approved
   markup pass. Class names below are the target contract for that future
   markup update.
   ========================================================================== */

/* =============================================================================
   HEADER (desktop)
   ========================================================================== */
.bm-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--bm-z-header);
  background-color: var(--bm-color-surface-container-lowest);
  /*border-bottom: 1px solid var(--bm-color-outline-variant);*/
  box-shadow: var( --bm-shadow-header);
  height: 76px;
  display: flex;
  align-items: center;
  /* Top-nav color combination: idle blue, active orange, brown underline */
  --bm-nav-idle: #2771b2;
  --bm-nav-active: #ec8830;
  --bm-nav-underline: #824512;
}
.bm-header-spacer { height: 76px; }
@media (max-width: 1023px) {
  .bm-header,
  .bm-header-spacer { height: 54px; }
}

.bm-header__inner {
  width: 100%;
  max-width: var(--bm-container-max);
  margin: 0 auto;
  padding: 0 var(--bm-container-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bm-header__left { display: flex; align-items: center; gap: var(--bm-space-xl); }

.bm-header__logo { display: flex; align-items: center; }
.bm-header__logo img { height: 50px; width: auto; display: block; }

.bm-header__nav {
  display: none;
  align-items: center;
  gap: var(--bm-space-lg);
  font-family: var(--bm-font-family);
}
@media (min-width: 1024px) {
  .bm-header__nav { display: flex; }
}
.bm-header__nav a {
  font-size: var(--bm-fs-label-md);
  font-weight: 600;
  line-height: 1.15;
  color: var(--bm-nav-idle);
  text-decoration: none;
  padding: 0.1rem 0.15rem 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color var(--bm-transition-base);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  white-space: nowrap;
}
.bm-header__nav a span {color: var(--bm-nav-idle);font-size: var(--bm-fs-label-md);}
.bm-header__nav a span .ti:hover {color: var(--bm-nav-idle);font-size: var(--bm-fs-body-lg); text-decoration: none;}
.bm-header__nav a .ti {
  font-size: var(--bm-fs-body-lg);
  line-height: 1;
}
.bm-header__nav a:hover, .bm-header__nav a span:hover { color: var(--bm-nav-idle); text-decoration: none;}
.bm-header__nav a.bm-is-active {
  color: var(--bm-nav-active);
  border-bottom-color: var(--bm-nav-underline);
  font-weight: 700;
}
.bm-header__nav a:hover {
  border-bottom-color: var(--bm-color-secondary-container);
  
}
.bm-header__right { display: flex; align-items: center; gap: var(--bm-space-lg); }

/* Currency selector */
.bm-currency-select {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--bm-fs-label-md);
  font-weight: 600;
  color: var(--bm-color-on-surface-variant);
  cursor: pointer;
  background: transparent;
  border: none;
}
@media (min-width: 1100px) {
  .bm-currency-select { display: inline-flex; }
}
.bm-currency-select:hover { color: var(--bm-color-secondary); }
.bm-currency-select .ti { font-size: 20px; }

/* Guest actions */
.bm-header__guest-actions { display: flex; align-items: center; gap: var(--bm-space-sm); }
.bm-header__guest-actions .bm-btn {
  box-sizing: border-box;
  gap: 0.35rem;
  white-space: nowrap;
}
.bm-header__guest-actions .bm-btn .ti {
  font-size: 16px;
  line-height: 1;
}
.bm-btn--logreg
{
  border: 1px solid var(--bm-color-primary);
  color: var(--bm-color-primary);
  background-color: transparent;
  transition: all 0.3s ease;
  font-size: var(--bm-fs-label-xs);
  border-radius: var(--bm-radius-sm);
  font-weight: 500;
  padding: 0.3rem .7rem;
  &:hover {
    border-color: var(--bm-color-on-tertiary-container);
    color: var(--bm-color-on-tertiary-container);
    background-color: transparent;
    font-size: var(--bm-fs-label-xs);
    text-decoration: none;
  }
  & span.ti {
    font-size: var(--bm-fs-body-md);
    line-height: 1;
    color: var(--bm-color-primary);
  }
  &:hover span.ti {
    font-size: var(--bm-fs-body-md);
    line-height: 1;
    color: var(--bm-color-secondary);
  }
}

.bm-header__support-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bm-color-primary);
  text-decoration: none;
}
.bm-header__support-link .ti { font-size: 24px; color: var(--bm-color-primary);}
.bm-header__support-link:hover { color: var(--bm-color-secondary); text-decoration: none;}

.bm-btn-list-property {
  
  background-color: var(--bm-color-secondary-container);
  color: var(--bm-color-on-secondary);
  border: 1px solid var(--bm-color-secondary-container);
  font-size: var(--bm-fs-label-xs);
  font-weight: 600;
  padding: 0.3rem 1rem;
  border-radius: var(--bm-radius-sm);
  transition: all 0.3s ease;
  &:hover {
    background-color: var(--bm-color-secondary-container);
  color: var(--bm-color-on-secondary-container);
  border: 1px solid var(--bm-color-secondary-container);
    font-size: var(--bm-fs-label-xs);
    text-decoration: none;
  }
  & span.ti {
    font-size: var(--bm-fs-body-md);
    line-height: 1;
    background: #742121;
    color: #fcdbb4;
    padding: 4px 4px;
    border-radius: 20px
  }
}

/* Logged-in state: account trigger + dropdown */
.bm-account {
  position: relative;
}
.bm-account__trigger {
  display: flex;
  align-items: center;
  gap: var(--bm-space-2xs);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: var(--bm-radius-md);
  color: var(--bm-color-primary);
}
.bm-account__trigger:hover { /*background-color: var(--bm-color-surface-container-low); */}
.bm-account__trigger span.ti{font-size: var(--bm-fs-body-lg);}
.bm-account__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-surface-container-high);
  color: var(--bm-color-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--bm-fs-label-md);
  line-height: 1;
}
.bm-account__avatar--pair {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Wallet / deposit balance chip shown next to the account trigger */
.bm-wallet-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--bm-radius-full);
  background-color: var(--bm-color-secondary-fixed);
  color: var(--bm-color-on-secondary-fixed-variant);
  font-size: var(--bm-fs-label-sm);
  font-weight: 700;
}
.bm-wallet-badge .ti { font-size: 16px; }

.bm-account__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background-color: var(--bm-color-surface-container-lowest);
  border: none;
  border-radius: 0.375rem;
  box-shadow: 0 4px 20px rgba(11, 28, 48, 0.16);
  padding: 0.5rem;
  z-index: var(--bm-z-dropdown);
  display: none;
}
.bm-account.bm-is-open .bm-account__menu { display: block; }

.bm-account__menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--bm-radius-sm);
  font-size: var(--bm-fs-label-md);
  color: var(--bm-color-on-surface);
  text-decoration: none;
}
.bm-account__menu a .ti {
  font-size: 18px;
  line-height: 1;
  color: var(--bm-nav-idle, #2771b2);
}
.bm-account__menu a:hover { background-color: var(--bm-color-surface-container-low);  font-size: var(--bm-fs-label-md); text-decoration: none;}
.bm-account__menu .bm-account__menu-divider { height: 1px; background: var(--bm-color-outline-variant); margin: 0.35rem 0.25rem; }

/* Hamburger stays until the inline menu is actually shown (1024px).
   Bootstrap hides .collapse below 1024px, so switching earlier leaves
   a width where neither the links nor the toggle are available. */
.bm-header__menu-toggle {
  display: inline-flex;
  background: transparent;
  border: none;
  color: var(--bm-color-primary);
  cursor: pointer;
}
@media (min-width: 1024px) {
  .bm-header__menu-toggle { display: none; }
}

/* -----------------------------------------------------------------------
   Generic nav dropdown (used for "HOTEL", "MY BOOKINGS", "MY ACCOUNT" style
   submenus inside .bm-header__nav). Pure CSS hover-reveal on desktop; on
   mobile it participates in the collapsible nav panel below and toggles
   open via the .bm-is-open class (existing bootstrap.js "collapse" data-api
   is reused for the outer hamburger panel - no .js files are modified).
   ----------------------------------------------------------------------- */
.bm-nav-dropdown { position: relative; }
.bm-nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}
.bm-nav-dropdown__trigger .ti { font-size: 18px; transition: transform var(--bm-transition-fast); }
.bm-nav-dropdown.bm-is-open .bm-nav-dropdown__trigger .ti,
.bm-nav-dropdown:hover .bm-nav-dropdown__trigger .ti { transform: rotate(180deg); }

.bm-nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background-color: var(--bm-color-surface-container-lowest);
  border: 1px solid var(--bm-color-outline-variant);
  border-radius: var(--bm-radius-md);
  box-shadow: var(--bm-shadow-lg);
  padding: 0.5rem;
  z-index: var(--bm-z-dropdown);
  display: none;
}
.bm-nav-dropdown:hover .bm-nav-dropdown__menu,
.bm-nav-dropdown.bm-is-open .bm-nav-dropdown__menu { display: block; }
.bm-nav-dropdown__menu a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--bm-radius-sm);
  font-size: var(--bm-fs-label-md);
  font-weight: 600;
  color: var(--bm-color-on-surface);
  text-decoration: none;
  white-space: nowrap;
}
.bm-nav-dropdown__menu a:hover { background-color: var(--bm-color-surface-container-low); color: var(--bm-color-secondary); }

/* Mobile collapsible nav panel (toggled by the hamburger button using
   Bootstrap 3's existing data-toggle="collapse" behavior from bootstrap.js,
   already loaded site-wide - no JS file is modified to enable this). */
@media (max-width: 1023px) {
  .bm-header__menu-toggle { order: -1; margin: 0; padding: 0; line-height: 1; }
  .bm-header__nav-panel {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
    background-color: var(--bm-color-surface-container-lowest);
    border-top: 1px solid var(--bm-color-outline-variant);
    box-shadow: var(--bm-shadow-lg);
    z-index: var(--bm-z-header);
  }
  .bm-header__nav-panel.collapse:not(.in) { display: none; }
  .bm-header__nav-panel .bm-header__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--bm-space-2xs) 0;
  }
  .bm-header__nav-panel .bm-header__nav a {
    align-items: flex-start;
    padding: var(--bm-space-sm) var(--bm-container-padding-x-mobile);
    border-bottom: 1px solid var(--bm-color-surface-container-low);
    border-bottom-width: 1px;
  }
  .bm-header__nav-panel .bm-header__nav a.bm-is-active {
    border-bottom-color: var(--bm-color-surface-container-low);
  }
  .bm-header__nav-panel .bm-nav-dropdown__menu {
    position: static;
    box-shadow: none;
    border: none;
    background-color: var(--bm-color-surface-container-low);
    margin: 0 0 0 var(--bm-space-sm);
    display: none;
  }
  .bm-header__nav-panel .bm-nav-dropdown.bm-is-open .bm-nav-dropdown__menu { display: block; }
  .bm-header__logo img { height: 40px; width: auto; display: block; }
}
@media (min-width: 1024px) {
  .bm-header__nav-panel,
  .bm-header__nav-panel.collapse {
    position: static;
    display: block;
    visibility: visible;
    height: auto;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: none;
  }
}

/* =============================================================================
   HEADER (mobile app-bar variant)
   Used on hotel-search / hotel-listing mobile layouts (fixed top app bar with
   hamburger + logo + account icon, per mobile_view templates).
   ========================================================================== */
/* Phone app bar: keep the shared header, but collapse it to the mobile
   template (hamburger + logo on the left, account icon on the right).
   The full nav stays behind the hamburger. Do not hide .bm-header here —
   there is no separate app-bar element in the layout. */
@media (max-width: 767px) {
  .bm-header__inner { padding: 0 var(--bm-space-sm); }
  .bm-header__left { gap: 4px; }
  .bm-header__menu-toggle { order: -1; margin: 0; padding: 0; line-height: 1; }
  .bm-header__right { gap: var(--bm-space-xs); }
  .bm-header__support-link,
  .bm-header__guest-actions,
  .bm-mobile-account-link,
  .bm-account,
  .bm-wallet-badge { display: none; }
  .bm-header__right .curactv-view-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    padding: 0.2rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #00030ab0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
  .bm-header-spacer { height: 4rem; }
}
.bm-mobile-account-link {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--bm-color-primary);
  text-decoration: none;
}
.bm-mobile-account-link .ti { font-size: 28px; }
.bm-mobile-appbar__left,
.bm-mobile-appbar__right { display: flex; align-items: center; gap: var(--bm-space-xs); }
.bm-mobile-appbar__logo { height: 2rem; object-fit: contain; }
.bm-mobile-appbar .ti { color: var(--bm-color-primary); }

/* Fixed bottom navigation bar (mobile search / listing) */
.bm-mobile-bottom-nav {
  display: none;
}
@media (max-width: 767px) {
  .bm-mobile-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    min-height: 64px;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background-color: #fbfbfb;
    border-top: 1px solid var(--bm-color-outline-variant);
    box-shadow: var(--bm-shadow-xl);
    z-index: var(--bm-z-mobile-nav);
  }
}
.bm-mobile-bottom-nav__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.2rem 0.1rem;
  color: #000;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  background: transparent;
  border-radius: 0;
}
.bm-mobile-bottom-nav__item span,
.bm-mobile-bottom-nav__item .ti {
  color: #000000bd;
  text-decoration: none;
}
.bm-mobile-bottom-nav__item .ti {
  font-size: 22px;
  line-height: 1;
}
.bm-mobile-bottom-nav__item.bm-is-active,
.bm-mobile-bottom-nav__item.bm-is-active span,
.bm-mobile-bottom-nav__item.bm-is-active .ti {
  background: transparent;
  color: var(--bm-color-secondary-container);
}
.bm-mobile-bottom-nav__chat {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-height: 48px;
}
@media (max-width: 767px) {
  body > .ktt10-btn {
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    width: 46px !important;
    height: 46px !important;
    transform: translateX(-50%) !important;
  }
  .bm-mobile-bottom-nav .ktt10-btn {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    transform: none !important;
    flex: 0 0 auto;
  }
  .bm-mobile-bottom-nav .ktt10-btn:hover {
    transform: none !important;
  }
  .footer-container
  {
    background-color: #faf8f8;
  }
}

/* Spacer utilities so fixed mobile bars don't overlap content */
.bm-has-mobile-appbar { padding-top: 4rem; }
.bm-has-mobile-bottom-nav { padding-bottom: 4.5rem; }

@media (max-width: 767px) {
  body { padding-bottom: 4.5rem; }
  /* Detail and booking already have their own sticky action bars. */
  body:has(.bm-detail-mobile-footer) .bm-mobile-bottom-nav,
  body:has(.bm-booking-mobile-footer) .bm-mobile-bottom-nav { display: none; }
  body:has(.bm-detail-mobile-footer),
  body:has(.bm-booking-mobile-footer) { padding-bottom: 0; }
}

/* =============================================================================
   FOOTER
   ========================================================================== */
.bm-footer {
  width: 100%;
  background-color: var(--bm-color-surface-container-lowest);
  border-top: 1px solid var(--bm-color-outline-variant);
  margin-top: var(--bm-space-xl);
}

.bm-footer__top {
  max-width: var(--bm-container-max);
  margin: 0 auto;
  padding: var(--bm-space-2xl) var(--bm-container-padding-x);
}

@media (max-width: 767px) {
  .bm-footer__top { padding: var(--bm-space-xl) var(--bm-container-padding-x-mobile); }
}

/* Dynamic "Popular cities" link row (data-driven, replaces homepage
   template's static content since the live site lists top cities from the
   htl_search_list table). */
.bm-footer__cities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bm-space-2xs) var(--bm-space-md);
  padding-bottom: var(--bm-space-lg);
  margin-bottom: var(--bm-space-lg);
  border-bottom: 1px solid var(--bm-color-outline-variant);
}
@media (min-width: 768px) {
  .bm-footer__cities { grid-template-columns: repeat(4, 1fr); }
}
.bm-footer__cities a {
  font-size: var(--bm-fs-label-sm);
  color: var(--bm-color-on-surface-variant);
  text-decoration: none;
}
.bm-footer__cities a:hover { color: var(--bm-color-secondary); text-decoration: underline; }

.bm-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  padding-left: var(--bm-space-lg);
}
@media (min-width: 768px) {
  .bm-footer__grid { grid-template-columns: repeat(4, 1fr); }
}ß

.bm-footer__brand { display: flex; flex-direction: column; gap: var(--bm-space-sm); }
.bm-footer__brand img { height: 20px; width: auto; }
.bm-footer__brand small { font-size: 12px; font-weight: 600; line-height: 30px; }
.bm-footer__brand p { font-size: var(--bm-fs-label-sm2); color: var(--bm-color-on-surface-variant); max-width: 32ch; }

.bm-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  color: var(--bm-color-on-surface-variant);
}
.bm-footer__contact {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 10px;
}
.bm-footer__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* align-self: stretch; */
  flex: 0 0 auto;
  /* width: 1.25rem; */
  background: #fff;
  color: #000;
  border: solid 1px #000;
  border-radius: 30px;
  padding: 3px;
  font-size: 15px;
}
.bm-footer__contact-icon .ti {
  font-size: 1.5rem;
  line-height: 1;
}
.bm-footer__contact-lines {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.bm-footer__contact-lines a,
.bm-footer__contact-lines a:hover,
.bm-footer__contact-lines a:focus,
.bm-footer__contact-lines a:visited {
  color: inherit;
  text-decoration: none;
  font-size: var(--bm-fs-label-sm2);
  line-height: 1.35;
}

.bm-footer__socials { display: flex; gap: var(--bm-space-2xs); }
.bm-footer__social-icon .ti 
{ font-size: 18px; color: var(--bm-color-on-primary-fixed-variant); 
  width: 2rem; height: 2rem;
  border-radius: var(--bm-radius-full);
  border: 1px solid var(--bm-color-on-primary-fixed-variant);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background-color var(--bm-transition-fast);
}
a.bm-footer__social-icon span.ti:hover 
{ background-color: var(--bm-color-surface-container); text-decoration: none;}

.bm-footer__heading {
  font-size: var(--bm-fs-label-md);
  font-weight: 700;
  color: #3b87c7;
  margin-bottom: var(--bm-space-sm);
}
.bm-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bm-space-3xs); }
.bm-footer__links a {
  font-size: var(--bm-fs-label-xs);
  color: var(--bm-color-on-surface-variant);
  text-decoration: none;
  transition: color var(--bm-transition-fast), transform var(--bm-transition-fast);
  display: inline-block;
}
.bm-footer__links a:hover {font-size: var(--bm-fs-label-xs);color: var(--bm-color-on-surface-variant); text-decoration: none;  }

.bm-footer__app-intro {
  margin: 0 0 0.85rem;
  font-size: var(--bm-fs-label-sm2);
  line-height: 1.45;
  color: var(--bm-color-on-surface-variant);
  max-width: 28ch;
}
.bm-footer__apps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.bm-footer__app-badge {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  background-color: #1c1e21;
  color: #fff;
  text-decoration: none;
  width: 210px;
}
.bm-footer__app-badge:hover,
.bm-footer__app-badge:focus,
.bm-footer__app-badge:visited {
  color: #fff;
  text-decoration: none;
  opacity: 0.92;
}
.bm-footer__app-badge .ti {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.bm-footer__app-badge-text { line-height: 1.15; }
.bm-footer__app-badge-text small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
}
.bm-footer__app-badge-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

/* Sister-brand logo strip (bmgroupinfo, bmsmartintercom, bmhospitality, etc.)
   - present on the current live footer, absent from the static template. */
.bm-footer__brands-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bm-space-md);
  padding: var(--bm-space-lg) 0;
  margin-top: var(--bm-space-lg);
  border-top: 1px solid var(--bm-color-outline-variant);
}
.bm-footer__brands-strip img { height: 36px; width: auto; opacity: 0.9; transition: opacity var(--bm-transition-fast); }
.bm-footer__brands-strip a:hover img { opacity: 1; }

.bm-footer__bottom {
  border-top: 1px solid var(--bm-color-outline-variant);
  padding: var(--bm-space-md) var(--bm-container-padding-x);
  max-width: var(--bm-container-max);
  margin: 0 auto;
 /*display: flex;*/
  flex-direction: column;
  gap: var(--bm-space-sm);
  align-items: center;
  justify-content: space-between;
  color: var(--bm-color-on-surface-variant);
}
@media (min-width: 768px) {
  .bm-footer__bottom { flex-direction: row; }
}
.bm-footer__copyright { font-size: var(--bm-fs-label-sm); }
.bm-footer__payment-icons { display: flex; align-items: center; gap: var(--bm-space-md); color: var(--bm-color-on-surface-variant); }
.bm-footer__payment-icons img { height: 60px; width: auto;padding-top:15px;}

/* Mobile "powered by" mini footer used under the mobile bottom nav content
   area (from mobile_view templates) */
.bm-footer--mobile-mini {
  display: none;
}
@media (max-width: 767px) {
  .bm-footer--mobile-mini {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--bm-space-xl) 0;
    background-color: var(--bm-color-surface-container-low);
    border-top: 1px solid var(--bm-color-outline-variant);
  }
  .bm-footer--mobile-mini span {
    font-size: var(--bm-fs-caption);
    color: var(--bm-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .footergap {
    height: 10px;
}
}

.bm-locale-trigger__flag {
  display: inline-block;
  margin-right: 2px;
  font-size: 12px;
  line-height: 1;
  vertical-align: -1px;
}

/* Country / currency / language popup */
body.bm-locale-open .modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 28, 48, 0.55);
  opacity: 1;
}
#locationCurrencyModal.bm-locale-modal {
  z-index: 1050;
  font-family: var(--bm-font-family);
}
#locationCurrencyModal.bm-locale-modal .modal-dialog {
  width: 380px;
  max-width: calc(100vw - 2rem);
  margin: max(96px, 12vh) auto 2rem;
}
#locationCurrencyModal.bm-locale-modal.fade .modal-dialog {
  transform: translateY(10px);
  transition: transform 0.22s ease-out;
}
#locationCurrencyModal.bm-locale-modal.fade.in .modal-dialog {
  transform: translateY(0);
}
#locationCurrencyModal.bm-locale-modal .modal-content {
  position: relative;
  overflow: visible;
  border: none;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22);
}
#locationCurrencyModal.bm-locale-modal .modal-header {
  position: static;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
#locationCurrencyModal.bm-locale-modal .bm-locale-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #6b7280;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
  opacity: 1;
  float: none;
  font-size: 18px;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
}
#locationCurrencyModal.bm-locale-modal .bm-locale-modal__close .ti {
  font-size: 18px;
  line-height: 1;
}
#locationCurrencyModal.bm-locale-modal .bm-locale-modal__close:hover,
#locationCurrencyModal.bm-locale-modal .bm-locale-modal__close:focus {
  color: #111827;
  opacity: 1;
  outline: none;
}
#locationCurrencyModal.bm-locale-modal .modal-body {
  padding: 22px 22px 20px;
}
.bm-locale-form {
  margin: 0;
}
.bm-locale-field {
  margin: 0 0 16px;
  text-align: left;
}
.bm-locale-field label {
  display: block;
  margin: 0 0 6px;
  color: #8b909a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.bm-locale-control {
  position: relative;
  height: 50px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bm-locale-control:focus-within {
  border-color: #c5c6cf;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}
.bm-locale-control__face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 40px 0 14px;
  pointer-events: none;
  color: #1f2937;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.bm-locale-control__emoji {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  font-size: 18px;
  line-height: 1;
}
.bm-locale-control__emoji:empty {
  display: none;
}
.bm-locale-control__text strong {
  margin-right: 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bm-locale-control__select {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}
.bm-locale-control__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 1;
  color: #9aa0a6;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}
.bm-locale-modal__apply {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 6px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: var(--bm-color-secondary);
  color: #fff;
  font-family: var(--bm-font-family);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#locationCurrencyModal.bm-locale-modal--list .modal-dialog {
  width: 340px;
}
#locationCurrencyModal.bm-locale-modal--list .modal-header {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 20px 22px 4px;
  border: 0;
  text-align: left;
}
#locationCurrencyModal.bm-locale-modal--list .bm-curlist__title {
  display: block;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
#locationCurrencyModal.bm-locale-modal--list .modal-body {
  padding: 6px 10px 12px;
}
.bm-curlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bm-curlist__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1f2937;
  font-family: var(--bm-font-family);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.bm-curlist__row:hover,
.bm-curlist__row:focus {
  background: #f4f7fb;
  color: #1f2937;
  outline: none;
}
.bm-curlist__row.is-current {
  background: #eef4fb;
}
.bm-curlist__code {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bm-curlist__row.is-current .bm-curlist__code,
.bm-curlist__row:hover .bm-curlist__code {
  color: var(--bm-color-secondary);
}

button.curactv-view-link
{
  border: solid 1px #cddae9;
    color: #195492;
    font-weight: 600;
    background: none;
    font-size: 11px;
    padding: 5px 8px 3px;
}
/*
.bm-locale-modal__apply:hover,
.bm-locale-modal__apply:focus {
  background: #b5b5b5;
  color: #fff;
  outline: none;
}
*/