/* =============================================================
   HEADER RESPONSIVE — COMPLETE REWRITE
   
   BREAKPOINTS:
   ┌─────────────────────────────────────────────────────────────┐
   │ > 1500px        FULL desktop                                │
   │   logo in header-logo-wrap (nav row)                        │
   │   login-btn full text button in nav row                     │
   │   top-nav: phone + country + language only                  │
   │                                                             │
   │ 1025px – 1500px  SMALL desktop / laptop                     │
   │   logo moves UP to top-nav (top-nav-logo)                   │
   │   header-logo-wrap hidden                                   │
   │   login-btn (nav row) hidden                                │
   │   top-login-btn (orange icon circle) in top-nav             │
   │                                                             │
   │ ≤ 1024px        TABLET + MOBILE                             │
   │   Visible bar: logo (left) country+phone-icon (center-right)│
   │                hamburger (far right)                        │
   │   Slide-in drawer: logo + nav links + login button          │
   └─────────────────────────────────────────────────────────────┘
   ============================================================= */

/* ─── VARIABLES ─────────────────────────────────────────────── */
:root {
  --h-orange: #f74000;
  --h-bar-h: 60px;
}

/* ─── GLOBAL: login always clickable ────────────────────────── */
header .login-btn a,
header .top-login-btn a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ─── DEFAULT HIDE (prevents flash) ─────────────────────────── */
.top-nav-logo {
  display: none;
}

.top-login-btn {
  display: none;
}

.mobile-bar {
  display: none;
}

.mobile-logo {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   ZONE 1  ›  FULL DESKTOP  (> 1600px)
═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1600px) {

  header .top-nav {
    display: block;
  }

  /* logo in main nav row */
  .header-logo-wrap {
    display: flex !important;
  }

  /* top-nav: no logo, no login icon */
  .top-nav-logo {
    display: none !important;
  }

  .top-login-btn {
    display: none !important;
  }

  /* full login button in nav row */
  .login-btn {
    display: flex !important;
    align-items: center;
    margin-top: 0;
  }

  .login-btn a {
    width: 90px !important;
    height: 45px !important;
    border-radius: 100px !important;
    font-size: 17px !important;
    line-height: 44px !important;
    padding: 0 !important;
    text-align: center;
    display: block !important;
    background: var(--h-orange) !important;
    color: #fff !important;
  }

  .login-btn a::before {
    display: none !important;
  }


}

/* ═══════════════════════════════════════════════════════════════
   ZONE 2  ›  SMALL DESKTOP / LAPTOP  (1500px – 1600px)
═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1500px) and (max-width: 1600px) {

  /* ── Logo hidden from nav row ──  */
  .header-logo-wrap {
    display: none !important;
  }

  /* ── top-nav stays visible ── */
  header .top-nav {
    display: block;
    padding: 8px 0 0;
  }

  /* Logo appears in top-nav */
  .top-nav-logo {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
  }

  .top-nav-logo img {
    width: 130px;
    height: auto;
    display: block;
  }


  .top-login-btn {
    display: none !important;
  }

  /* full login button in nav row */
  .login-btn {
    display: flex !important;
    align-items: center;
    margin-top: 0;
  }

  .login-btn a {
    width: 90px !important;
    height: 45px !important;
    border-radius: 100px !important;
    font-size: 17px !important;
    line-height: 44px !important;
    padding: 0 !important;
    text-align: center;
    display: block !important;
    background: var(--h-orange) !important;
    color: #fff !important;
  }

  .login-btn a::before {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ZONE 2  ›  SMALL DESKTOP / LAPTOP  (1025px – 1500px)
═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 1105px) and (max-width: 1500px) {

  /* ── top-nav stays visible ── */
  header .top-nav {
    display: block;
    padding: 8px 0 0;
  }

  /* Logo appears in top-nav */
  .top-nav-logo {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
  }

  .top-nav-logo img {
    width: 130px;
    height: auto;
    display: block;
  }

  /* Flex the top-nav inner row: logo left | controls right */
  header .top-nav .container>.flex,
  header .top-nav .container>.row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  /* Right-side controls stay together */
  header .top-nav .container>.flex>.flex {
    gap: 4px;
  }

  /* ── Login icon in top-nav ── */
  .top-login-btn {
    display: flex !important;
    align-items: center;
    position: relative;
    margin-left: 8px;
  }

  .top-login-btn a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--h-orange) !important;
    color: transparent !important;
    line-height: 1 !important;
    text-decoration: none;
  }

  .top-login-btn a::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* ── Logo hidden from nav row ── */
  .header-logo-wrap {
    display: none !important;
  }

  /* ── Login button hidden from nav row ── */
  .login-btn {
    display: none !important;
  }

  /* ── Nav items: slightly tighter ── */
  header .menu-container ul {
    gap: 14px !important;
  }

  header .menu-container ul>li {
    margin-right: 0 !important;
  }

  header .menu-container>ul>li>a {
    font-size: 13px;
    padding: 22px 0 18px;
  }

  /* hamburger / mobile logo hidden */
  .mobile-bar {
    display: none !important;
  }

  .mobile-logo {
    display: none !important;
  }
}

/* Fixed-header (scrolled) overrides for zone 2 */
@media screen and (min-width: 1105px) and (max-width: 1500px) {
  header.fixed-header {
    height: 65px;
  }

  header.fixed-header .top-nav {
    display: none !important;
  }

  /* When top-nav hidden, bring logo back into nav row */
  header.fixed-header .header-logo-wrap {
    display: flex !important;
  }

  header.fixed-header .menu-container>ul>li>a {
    padding: 20px 0;
  }

  /* Login icon floats in the fixed bar */
  header.fixed-header .top-login-btn {
    display: flex !important;
    position: absolute;
    right: 20px;
    top: 14px;
  }

  header.fixed-header .login-btn {
    display: none !important;
  }
}

/* Country selectors: keep chevron away from text */
header .top-nav .ctry-box {
  position: relative;
}

header .top-nav .ctry-box::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(../img/dropdown-icon.svg) center/contain no-repeat;
  pointer-events: none;
  opacity: 0.75;
}

header .top-nav .ctry-box .form-select {
  background-image: none !important;
  padding-right: 18px !important;
}


/* Tablet + mobile share same header behavior */
@media screen and (max-width: 1104px) {
  header .overly {
    position: fixed;
    inset: 0;
    display: none;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
  }

  .mobile-bar {
    display: block !important;
    width: 22px;
    position: absolute !important;
    top: 22px !important;
    right: 13px !important;
    left: auto !important;
    z-index: 1001 !important;
  }

  .header-logo-wrap {
    display: none !important;
  }

  .top-nav-logo {
    display: block !important;
  }

  .mobile-menu {
    margin: 0;
    position: fixed !important;
    top: 0;
    bottom: 0;
    display: block !important;
    width: 75%;
    left: -100%;
    background: #fff;
    height: 100vh;
    z-index: 1001;
  }

  .mobile-logo {
    display: block !important;
  }

  header .logo.mobile-logo {
    text-align: left;
    background: #f6f6f6;
    display: block !important;
    padding: 20px 15px 0 15px;
    margin: 0;
    height: 80px;
    width: 100%;
    top: 0;
    border-bottom: 4px solid #e8e8e8;
  }

  header .logo.mobile-logo img {
    width: 167px;
    min-width: 167px;
    max-width: 167px;
    height: auto;
  }

  header .mobile-menu .menu-close {
    right: 7px;
    background: #f6f6f6;
    top: 20px;
    color: #d4d4d4;
    position: absolute;
    height: 38px;
    width: 38px;
    display: block;
    font-weight: 100;
    text-align: center;
    border: none;
    border-radius: 50px;
    opacity: 1;
    line-height: 39px;
    transform: rotate(90deg);
  }

  header .mobile-menu .menu-close img {
    width: 13px;
  }

  header .menu-container {
    margin-top: 82px;
    padding-top: 20px;
    overflow-y: auto;
    height: 79vh;
  }

  header .menu-container>ul>li:first-child>a {
    pointer-events: auto !important;
  }

  .top-login-btn {
    display: none !important;
  }

  .login-btn {
    display: block !important;
    width: 100%;
    margin: 3px 0 0 !important;
    border-top: 1px solid #ccc;
    padding: 11px 15px 0 !important;
  }

  header .login-btn a {
    width: 100% !important;
    max-width: 100%;
    display: block;
    text-align: center;
  }

  header.fixed-header {
    height: 60px;
  }

  /* Keep the mobile/tablet header content visible while scrolling */
  header.fixed-header .top-nav {
    display: block !important;
  }

  header.fixed-header .header-logo-wrap {
    display: none !important;
  }

  header .menu-container>ul>li.has-submenu>a:after {
    right: 8px;
    top: 17px;
  }

  header .menu-container>ul>li.open-dropdown>ul {
    display: block !important;
  }

  header .menu-container>ul>li.open-dropdown>ul.large-menu {
    display: block !important;
  }

  header .menu-container>ul>li.open-dropdown>ul.ai-voice-dropdown,
  header .menu-container>ul>li.open-dropdown>ul.integrations-dropdown {
    display: grid !important;
  }

  header .menu-container ul li ul,
  header .menu-container ul li ul.large-menu {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    top: 0;
    left: auto;
    right: auto;
    padding: 10px 20px !important;
    border: none;
    box-shadow: inset 0 0 10px #a7a7a7;
    background: #f2f2f2;
    border-radius: 0;
  }

  header .menu-container ul li ul.large-menu {
    padding: 10px !important;
  }
}

/* Explicit tablet lock: same behavior as mobile */
@media screen and (min-width: 761px) and (max-width: 1104px) {
  header .menu-container ul {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  header .menu-container ul>li {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* Desktop fixed header: keep navigation row visible, hide only top utility row */
@media screen and (min-width: 1105px) {
  header.fixed-header .top-nav {
    display: block !important;
    padding-top: 0 !important;
  }

  header.fixed-header .top-nav>.container:first-child {
    display: none !important;
  }

  header.fixed-header .top-nav>.container:last-child {
    display: block !important;
  }


}


@media screen and (max-width: 600px) {
  header .top-nav .ctry-box .form-select {
    background-image: none !important;
    padding-right: 1px !important;
  }

}