/* Auth layout: topbar, mobile drawer, tablet/iPad
 * UI: modules/Layout/parts/topbar.blade.php, header.blade.php, auth-guest-nav-buttons.blade.php
 * JS:  public/js/auth-pages.js
 */

/* ---------- Topbar shell ---------- */
.bravo_topbar {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background-color: #fff !important;
  position: relative;
  z-index: 1050;
}

.bravo_topbar .topbar-items,
.bravo_topbar .topbar-items > li {
  list-style: none !important;
  list-style-type: none !important;
}

.bravo_topbar .topbar-items > li::before,
.bravo_topbar .topbar-items > li::marker {
  content: none !important;
  display: none !important;
}

.bravo_topbar .topbar-items > li.signup-item,
.bravo_topbar .topbar-items > li.login-item {
  display: inline-block !important;
  list-style: none !important;
  padding-left: 8px !important;
  padding-right: 0 !important;
}

/* ---------- KLIQ auth buttons (topbar + mobile) ---------- */
.bravo_wrap .bravo_topbar .topbar-items,
.bravo_wrap .bravo_header .topbar-items {
  list-style: none !important;
  list-style-type: none !important;
}

.bravo_wrap .bravo_topbar .topbar-items > li,
.bravo_wrap .bravo_header .topbar-items > li {
  list-style: none !important;
  list-style-type: none !important;
}

.bravo_wrap .bravo_topbar .topbar-items > li::before,
.bravo_wrap .bravo_topbar .topbar-items > li::after,
.bravo_wrap .bravo_topbar .topbar-items > li::marker,
.bravo_wrap .bravo_header .topbar-items > li::before,
.bravo_wrap .bravo_header .topbar-items > li::after,
.bravo_wrap .bravo_header .topbar-items > li::marker {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: none !important;
}

.bravo_wrap .bravo_topbar .topbar-items .kliq-btn,
.bravo_wrap .bravo_header .topbar-items .kliq-btn,
.bravo-menu-mobile .kliq-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 500 !important;
  font-size: clamp(14px, 1.15vw, 16px) !important;
  border-radius: 100px !important;
  padding: 0 clamp(16px, 1.5vw, 24px) !important;
  height: clamp(38px, 3vw, 44px) !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important;
  border: 1.5px solid transparent !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: none !important;
  background-image: none !important;
}

.bravo_wrap .bravo_topbar .topbar-items .kliq-btn:hover,
.bravo_wrap .bravo_header .topbar-items .kliq-btn:hover {
  transform: translateY(-1px);
  text-decoration: none !important;
}

.bravo_wrap .bravo_topbar .topbar-items .kliq-btn-outline,
.bravo_wrap .bravo_header .topbar-items .kliq-btn-outline,
.bravo-menu-mobile .kliq-btn-outline,
body:not(:has(.corporate-dashboard-layout)) .bravo_wrap .bravo_topbar .topbar-items .kliq-btn-outline,
body:not(:has(.corporate-dashboard-layout)) .bravo_wrap .bravo_topbar .topbar-items li a.kliq-btn-outline {
  color: #2D95A2 !important;
  border-color: #2D95A2 !important;
  background: #fff !important;
}

.bravo_wrap .bravo_topbar .topbar-items .kliq-btn-outline:hover,
.bravo_wrap .bravo_header .topbar-items .kliq-btn-outline:hover {
  background: rgba(45, 149, 162, 0.06) !important;
  color: #2D95A2 !important;
}

.bravo_wrap .bravo_topbar .topbar-items .kliq-btn-solid,
.bravo_wrap .bravo_header .topbar-items .kliq-btn-solid,
.bravo-menu-mobile .kliq-btn-solid,
body:not(:has(.corporate-dashboard-layout)) .bravo_wrap .bravo_topbar .topbar-items .kliq-btn-solid,
body:not(:has(.corporate-dashboard-layout)) .bravo_wrap .bravo_topbar .topbar-items li a.kliq-btn-solid,
body:not(:has(.corporate-dashboard-layout)) .bravo_wrap .bravo_topbar .topbar-items * .kliq-btn-solid {
  background: #2D95A2 !important;
  color: #ffffff !important;
  border-color: #2D95A2 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.bravo_wrap .bravo_topbar .topbar-items .kliq-btn-solid:hover,
.bravo_wrap .bravo_header .topbar-items .kliq-btn-solid:hover,
body:not(:has(.corporate-dashboard-layout)) .bravo_wrap .bravo_topbar .topbar-items li a.kliq-btn-solid:hover {
  background: #1f6f7a !important;
  border-color: #1f6f7a !important;
  color: #ffffff !important;
}

.bravo_topbar .topbar-items .signup-item,
.bravo_header .topbar-items .signup-item,
.bravo_topbar .topbar-items .login-item {
  display: inline-block !important;
  visibility: visible !important;
  list-style: none !important;
}

/* Guests: hide currency on auth funnels */
body:not(.logged-in) .kliq-currency-switcher {
  display: none !important;
}

/* Header currency switcher: capped height + scroll, ISO label format */
.kliq-currency-switcher .kliq-currency-menu {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 260px;
  width: max-content;
  max-width: min(90vw, 360px);
  padding: 6px 0;
  right: 0;
  left: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kliq-currency-switcher .kliq-currency-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.kliq-currency-switcher .kliq-currency-menu > li > a.kliq-currency-item,
.kliq-currency-switcher .kliq-currency-menu > li > span.kliq-currency-item {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #334155;
}

.kliq-currency-switcher .kliq-currency-menu > li > a.kliq-currency-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.kliq-currency-switcher .kliq-currency-menu > li > span.kliq-currency-item.is-current {
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  cursor: default;
}

@media (max-width: 1024px) {
  .kliq-currency-switcher .kliq-currency-menu {
    max-height: 240px;
    min-width: 240px;
    max-width: min(86vw, 320px);
  }
  .kliq-currency-switcher .kliq-currency-menu > li > a.kliq-currency-item,
  .kliq-currency-switcher .kliq-currency-menu > li > span.kliq-currency-item {
    padding: 10px 14px;
  }
}

@media (max-width: 767px) {
  .bravo_topbar .kliq-currency-switcher .kliq-currency-menu,
  .bravo_header .content .kliq-currency-switcher .kliq-currency-menu {
    max-height: 220px;
    min-width: 0;
    width: min(92vw, 300px);
    max-width: 92vw;
  }
  .kliq-currency-switcher .kliq-currency-menu > li > a.kliq-currency-item,
  .kliq-currency-switcher .kliq-currency-menu > li > span.kliq-currency-item {
    padding: 11px 14px;
    font-size: 14px;
    white-space: normal;
  }
}

/* Mobile / iPad drawer — apply at all widths when inside drawer */
.bravo-menu-mobile .kliq-currency-switcher {
  display: block;
  width: 100%;
}
.bravo-menu-mobile .multi-lang .kliq-currency-switcher .dropdown-menu.kliq-currency-menu {
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: 240px !important;
  margin: 0 !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
}
.bravo-menu-mobile .multi-lang .kliq-currency-switcher.open > .dropdown-menu.kliq-currency-menu {
  display: block !important;
  visibility: visible !important;
}
.bravo-menu-mobile .kliq-currency-switcher .kliq-currency-menu > li > a.kliq-currency-item,
.bravo-menu-mobile .kliq-currency-switcher .kliq-currency-menu > li > span.kliq-currency-item {
  display: block !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  white-space: normal !important;
  color: #333 !important;
}

/* ---------- Mobile drawer ---------- */
.bravo_wrap .bravo_header .bravo-menu-mobile:not(.active) {
  display: none !important;
  transform: translate(-105%, 0) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
}

.bravo_wrap .bravo_header .bravo-menu-mobile.active {
  display: block !important;
  width: 300px !important;
  height: 100vh !important;
  transform: translate(0, 0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 999 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.bravo-menu-mobile .user-profile .b-close {
  color: #1a2b48 !important;
  top: 8px !important;
  right: 12px !important;
}

.bravo-menu-mobile .user-profile .avatar:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
  min-height: 0 !important;
}

.bravo-menu-mobile .user-profile > ul:first-of-type {
  padding: 88px 20px 20px !important;
  list-style: none !important;
  margin: 0 !important;
}

.bravo-menu-mobile .user-profile > ul:first-of-type > li {
  list-style: none !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

.bravo-menu-mobile .user-profile > ul:first-of-type > li::before,
.bravo-menu-mobile .user-profile > ul:first-of-type > li::marker {
  content: none !important;
  display: none !important;
}

.bravo-menu-mobile .user-profile > ul:first-of-type .kliq-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: 100% !important;
  justify-content: center !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  border-radius: 100px !important;
  padding: 0 22px !important;
  height: 44px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: 1.5px solid transparent !important;
}

.bravo-menu-mobile .user-profile > ul:first-of-type .kliq-btn-solid {
  background: #2D95A2 !important;
  color: #ffffff !important;
  border-color: #2D95A2 !important;
}

.bravo-menu-mobile .user-profile > ul:first-of-type .kliq-btn-outline {
  background: #fff !important;
  color: #2D95A2 !important;
  border-color: #2D95A2 !important;
}

/* ---------- Tablet / iPad (≤1024px) ---------- */
@media (max-width: 1024px) {
  .bravo_wrap .bravo_topbar .content .topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  .bravo_wrap .bravo_topbar .content .topbar-right .topbar-items {
    display: none !important;
  }

  .bravo_wrap .bravo_topbar .content .topbar-right .bravo-more-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex-shrink: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #333 !important;
  }

  .bravo_wrap .bravo_topbar .content .topbar-right .bravo-more-menu i {
    color: #333 !important;
    font-size: 18px !important;
  }

  .frontend-page:not(.corporate-page) .bravo_wrap .bravo_header {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    border: none !important;
    visibility: hidden !important;
  }

  .frontend-page:not(.corporate-page) .bravo_wrap .bravo_header .content {
    display: none !important;
  }

  .frontend-page:not(.corporate-page) .bravo_wrap .bravo_header .bravo-menu-mobile:not(.active) {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
    transform: translate(-105%, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .frontend-page:not(.corporate-page) .bravo_wrap .bravo_header .bravo-menu-mobile.active {
    display: block !important;
    width: 300px !important;
    height: 100vh !important;
    overflow: auto !important;
    z-index: 999 !important;
    transform: translate(0, 0) !important;
    transition: transform 0.3s ease !important;
    visibility: visible !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .frontend-page:not(.corporate-page) .bravo_wrap .bravo_header .bravo-menu-mobile .g-menu {
    display: none !important;
  }

  /* Auth pages: allow scroll to footer on iPad */
  html.auth-page,
  body.auth-page {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100% !important;
    position: static !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.auth-page.modal-open {
    overflow-y: auto !important;
    padding-right: 0 !important;
  }

  body.auth-page .bravo_wrap {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.auth-page .bravo_wrap > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.auth-page .bravo-effect-bg,
  body.auth-page .bravo-effect-user-bg,
  body.auth-page .modal-backdrop {
    display: none !important;
  }
}