/* Mobile Header/Navbar Fix */
/* Fix for signin/signup positioning on mobile devices */

/* Improved mobile breakpoint and positioning */
@media (max-width: 768px) {
  /* Main h  /* Only show Register button with proper styling */
  #header__right__id .btn-register-filled {
    all: unset !important;
    display: inline-block !important;
    color: #509e2f !important;
    background: white !important;
    border: 2px solid #509e2f !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-left: 0 !important;
    margin-right: 15px !important; /* Add margin from hamburger */
  }
  .header {
    position: relative;
    padding: 15px 0;
    flex-wrap: wrap;
  }

  /* Logo section */
  .header__left {
    flex: 0 0 auto;
    margin-right: auto;
  }

  .header__left-logo img {
    max-width: 120px;
    height: auto;
  }

  /* Center menu - hide on mobile */
  .header__center {
    display: none !important;
  }

  /* Right section with register button positioned near hamburger */
  .header__right {
    position: static !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    margin-right: 0 !important;
    margin-left: auto !important; /* Push to right side */
  }

  /* Account section */
  .header__right-account {
    display: flex;
    align-items: center;
    margin-right: 60px !important; /* Increased space for hamburger + margin */
  }

  /* Account name container */
  #dropdownacc-top-home.account-name {
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* Hide login button completely on mobile */
  #header__right__id .btn-login-outline {
    display: none !important;
  }

  /* Register button mobile styling - WHITE background, positioned near hamburger */
  #header__right__id .btn-register-filled {
    all: unset !important;
    display: inline-block !important;
    color: #509e2f !important;
    background: white !important;
    border: 2px solid #509e2f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 15px !important;
    padding: 6px 12px !important;
    margin-left: 0 !important;
    margin-right: 15px !important; /* Add margin from hamburger */
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  /* Hover effect for Register button */
  #header__right__id .btn-register-filled:hover {
    background: #509e2f !important;
    color: white !important;
    border-color: #509e2f !important;
  }

  /* Hamburger menu positioning - absolutely positioned on far right */
  .header__right-hamburger {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }

  /* Ensure proper container width and positioning for hamburger */
  .site-header .container {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
    position: relative !important; /* For hamburger absolute positioning */
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .header {
    padding: 10px 0;
  }

  .header__left-logo img {
    max-width: 100px;
  }

  /* Even smaller buttons for very small screens - hide login */
  #header__right__id .btn-login-outline {
    display: none !important;
  }

  #header__right__id .btn-register-filled {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  .header__right-account {
    margin-right: 10px !important;
  }
}

/* Tablet range - hide menu, show hamburger + register only */
@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    position: relative !important;
    padding: 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Changed from space-between */
  }

  /* Hide center menu on all tablets - show hamburger instead */
  .header__center {
    display: none !important;
  }

  /* Logo stays on left */
  .header__left {
    flex: 0 0 auto !important;
    margin-right: auto !important; /* Push everything else to the right */
  }

  /* Position hamburger and register on the right */
  .header__right {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 0 !important;
    gap: 0 !important;
    margin-left: auto !important; /* This pushes it to the right */
  }

  /* Show hamburger menu on tablets - position it after register button */
  .header__right-hamburger {
    display: block !important;
    position: absolute !important;
    right: 15px !important; /* Position from right edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }

  .header__right-account {
    display: flex !important;
    align-items: center !important;
    margin-right: 50px !important; /* Space for hamburger */
    gap: 0 !important;
  }

  #dropdownacc-top-home.account-name {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Hide login button on tablets */
  #header__right__id .btn-login-outline {
    display: none !important;
  }

  /* Only show Register button with proper styling */
  #header__right__id .btn-register-filled {
    all: unset !important;
    display: inline-block !important;
    background: #509e2f !important;
    color: white !important;
    border: 1px solid #509e2f !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hover effect for Register button */
  #header__right__id .btn-register-filled:hover {
    background: #6db33f !important;
    border-color: #6db33f !important;
  }

  /* Logo sizing for tablets */
  .header__left-logo img {
    max-width: 110px !important;
    height: auto !important;
  }

  /* Ensure container positioning */
  .site-header .container {
    position: relative !important;
  }
}

/* Desktop/Laptop - Show full menu with both login and register buttons */
@media (min-width: 1025px) {
  .header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 0 !important;
  }

  /* Logo on the left */
  .header__left {
    flex: 0 0 auto !important;
  }

  /* Center menu positioned closer to right side for professional look */
  .header__center {
    display: block !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 30px !important; /* Space from right buttons */
  }

  /* Right section with buttons */
  .header__right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Hide hamburger on desktop */
  .header__right-hamburger {
    display: none !important;
  }

  /* Show both login and register buttons on desktop */
  #header__right__id .btn-login-outline {
    all: unset !important;
    display: inline-block !important;
    color: white !important;
    background: transparent !important;
    border: 2px solid white !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  #header__right__id .btn-login-outline:hover {
    background: white !important;
    color: #509e2f !important;
    border-color: white !important;
  }

  #header__right__id .btn-register-filled {
    all: unset !important;
    display: inline-block !important;
    color: #509e2f  !important;
    background: #fff !important; /* Dark green company color */
    border: 2px solid #eee  !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    margin-left: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  #header__right__id .btn-register-filled:hover {
    background: #61d020 !important; /* Even darker green on hover */
    border-color: #509e2f !important;
    color: white !important;
  }
}

/* Portrait tablet specific (like iPad portrait 810x1080 and 800x1024) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .header {
    padding: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Changed from space-between */
  }

  /* Hide center menu on portrait tablets - show hamburger instead */
  .header__center {
    display: none !important;
  }

  /* Logo stays on left */
  .header__left {
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }

  /* Position hamburger on the far right */
  .header__right-hamburger {
    display: block !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }

  /* Position register button to the right, with space for hamburger */
  .header__right {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    gap: 0 !important;
  }

  .header__right-account {
    margin-right: 50px !important; /* Space for hamburger */
    gap: 0 !important;
  }

  /* Only show Register button with proper background, hide Sign In on portrait tablets */
  #header__right__id .btn-login-outline {
    display: none !important;
  }

  #header__right__id .btn-register-filled {
    all: unset !important;
    display: inline-block !important;
    color: #509e2f !important;
    background: white !important;
    border: 2px solid #509e2f !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    margin-left: 0 !important;
    margin-right: 15px !important; /* Add margin from hamburger */
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  /* Hover effect for Register button */
  #header__right__id .btn-register-filled:hover {
    background: #509e2f !important;
    color: white !important;
    border-color: #509e2f !important;
  }

  .header__left-logo img {
    max-width: 100px !important;
  }

  /* Ensure container positioning */
  .site-header .container {
    position: relative !important;
  }
}

/* Landscape tablet specific - also hide menu, show hamburger + register */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .header {
    padding: 18px 0 !important;
  }

  /* Hide center menu on landscape tablets too */
  .header__center {
    display: none !important;
  }

  /* Show hamburger on landscape tablets */
  .header__right-hamburger {
    display: block !important;
  }

  /* Hide login button on landscape tablets */
  #header__right__id .btn-login-outline {
    display: none !important;
  }

  /* Only register button with proper styling */
  #header__right__id .btn-register-filled {
    all: unset !important;
    display: inline-block !important;
    color: #509e2f !important;
    background: white !important;
    border: 2px solid #509e2f !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 24px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-right: 15px !important; /* Add margin from hamburger */
  }

  /* Hover effect */
  #header__right__id .btn-register-filled:hover {
    background: #509e2f !important;
    color: white !important;
    border-color: #509e2f !important;
  }

  .header__left-logo img {
    max-width: 120px !important;
  }
}

/* Fix for potential z-index issues */
.site-header {
  position: relative;
  z-index: 1000;
}

/* Ensure buttons don't overlap with hamburger */
@media (max-width: 768px) {
  .header {
    justify-content: space-between;
    align-items: center;
  }

  .header__left {
    flex: 0 0 auto;
  }

  .header__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }
}