/* Mobile Menu Fix - Comprehensive Solution for React App */

/* Force menu visibility and proper z-index hierarchy */
@media only screen and (max-width: 991px) {
  /* Mobile header - highest priority */
  .wsmobileheader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: white !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 60px !important;
    padding: 8px 0 !important;
  }

  /* Mobile logo */
  .wsmobileheader .smllogo {
    display: block !important;
    visibility: visible !important;
    padding-left: 20px !important;
    margin-top: 8px !important;
  }

  .wsmobileheader .smllogo img {
    height: 40px !important;
    width: auto !important;
    display: block !important;
  }

  /* Mobile menu toggle button - highest z-index */
  #wsnavtoggle,
  .wsanimated-arrow {
    position: absolute !important;
    right: 20px !important;
    top: 12px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(212, 165, 116, 0.1) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100000 !important;
    cursor: pointer !important;
    visibility: visible !important;
    transition: all 0.3s ease !important;
  }

  #wsnavtoggle:hover,
  .wsanimated-arrow:hover {
    background: rgba(212, 165, 116, 0.2) !important;
    transform: scale(1.05) !important;
  }

  /* Hamburger menu lines */
  .wsanimated-arrow span {
    position: relative !important;
    display: block !important;
    width: 22px !important;
    height: 3px !important;
    background: #d4a574 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  .wsanimated-arrow span:before,
  .wsanimated-arrow span:after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    width: 22px !important;
    height: 3px !important;
    background: #d4a574 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  .wsanimated-arrow span:before {
    top: -7px !important;
    width: 26px !important;
  }

  .wsanimated-arrow span:after {
    bottom: -7px !important;
    width: 20px !important;
  }

  /* Active state - hamburger to X */
  .wsactive .wsanimated-arrow span {
    background-color: transparent !important;
  }

  .wsactive .wsanimated-arrow span:before {
    transform: rotate(45deg) !important;
    top: 0 !important;
    width: 22px !important;
  }

  .wsactive .wsanimated-arrow span:after {
    transform: rotate(-45deg) !important;
    bottom: 0 !important;
    width: 22px !important;
  }

  /* Mobile menu overlay */
  .wsmenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
  }

  .wsactive .wsmenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Mobile menu list container */
  .wsmenu > .wsmenu-list {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 360px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    background: white !important;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2) !important;
    border-radius: 16px 0 0 16px !important;
    z-index: 99997 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-top: 80px !important;
  }

  .wsactive .wsmenu > .wsmenu-list {
    transform: translateX(0) !important;
  }

  /* Menu header gradient */
  .wsmenu > .wsmenu-list::before {
    content: 'Menu' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 80px !important;
    background: linear-gradient(135deg, #d4a574, #c49660) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    z-index: 10 !important;
  }

  /* Menu items */
  .wsmenu > .wsmenu-list > li {
    display: block !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    opacity: 0 !important;
    transform: translateX(30px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .wsactive .wsmenu > .wsmenu-list > li {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  /* Staggered animation delays */
  .wsactive .wsmenu > .wsmenu-list > li:nth-child(1) {
    transition-delay: 0.1s !important;
  }
  .wsactive .wsmenu > .wsmenu-list > li:nth-child(2) {
    transition-delay: 0.15s !important;
  }
  .wsactive .wsmenu > .wsmenu-list > li:nth-child(3) {
    transition-delay: 0.2s !important;
  }
  .wsactive .wsmenu > .wsmenu-list > li:nth-child(4) {
    transition-delay: 0.25s !important;
  }
  .wsactive .wsmenu > .wsmenu-list > li:nth-child(5) {
    transition-delay: 0.3s !important;
  }
  .wsactive .wsmenu > .wsmenu-list > li:nth-child(6) {
    transition-delay: 0.35s !important;
  }
  .wsactive .wsmenu > .wsmenu-list > li:nth-child(7) {
    transition-delay: 0.4s !important;
  }
  .wsactive .wsmenu > .wsmenu-list > li:nth-child(8) {
    transition-delay: 0.45s !important;
  }

  /* Menu item links */
  .wsmenu > .wsmenu-list > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 18px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border-left: 4px solid transparent !important;
    position: relative !important;
  }

  .wsmenu > .wsmenu-list > li > a:hover,
  .wsmenu > .wsmenu-list > li > a:focus {
    background: rgba(212, 165, 116, 0.1) !important;
    border-left-color: #d4a574 !important;
    padding-left: 24px !important;
    transform: translateX(4px) !important;
    color: #333 !important;
    text-decoration: none !important;
  }

  /* Menu item icons */
  .wsmenu > .wsmenu-list > li > a::before {
    content: '' !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-right: 12px !important;
    color: #d4a574 !important;
    width: 20px !important;
    text-align: center !important;
  }

  /* Icon mappings */
  .wsmenu > .wsmenu-list > li:nth-child(1) > a::before {
    content: '\f015' !important;
  } /* Home */
  .wsmenu > .wsmenu-list > li:nth-child(2) > a::before {
    content: '\f5d2' !important;
  } /* Spa */
  .wsmenu > .wsmenu-list > li:nth-child(3) > a::before {
    content: '\f02b' !important;
  } /* Tags */
  .wsmenu > .wsmenu-list > li:nth-child(4) > a::before {
    content: '\f005' !important;
  } /* Star */
  .wsmenu > .wsmenu-list > li:nth-child(5) > a::before {
    content: '\f0c0' !important;
  } /* Users */
  .wsmenu > .wsmenu-list > li:nth-child(6) > a::before {
    content: '\f290' !important;
  } /* Shopping */
  .wsmenu > .wsmenu-list > li:nth-child(7) > a::before {
    content: '\f05a' !important;
  } /* Info */
  .wsmenu > .wsmenu-list > li:nth-child(8) > a::before {
    content: '\f0e0' !important;
  } /* Contact */

  /* Overlay background */
  .overlapblackbg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 99996 !important;
    cursor: pointer !important;
  }

  /* Prevent body scroll when menu is open */
  .wsactive {
    overflow: hidden !important;
  }

  /* Ensure content doesn't shift */
  .wsactive .wsmenucontainer {
    transform: translateX(0) !important;
  }

  /* Smooth scrollbar for menu */
  .wsmenu > .wsmenu-list::-webkit-scrollbar {
    width: 4px !important;
  }

  .wsmenu > .wsmenu-list::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .wsmenu > .wsmenu-list::-webkit-scrollbar-thumb {
    background: rgba(212, 165, 116, 0.3) !important;
    border-radius: 2px !important;
  }

  /* Fix for iOS touch scrolling */
  .wsmenu > .wsmenu-list {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Desktop adjustments */
@media only screen and (min-width: 992px) {
  /* Hide mobile elements on desktop */
  .wsmobileheader {
    display: none !important;
  }

  /* Ensure desktop header is visible */
  .header,
  .wsmainfull {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
  }

  /* Desktop menu styling */
  .wsmenu > .wsmenu-list {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    padding-top: 0 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
  }

  .wsmenu > .wsmenu-list::before {
    display: none !important;
  }

  .wsmenu > .wsmenu-list > li {
    display: inline-block !important;
    opacity: 1 !important;
    transform: none !important;
    border-bottom: none !important;
    margin: 0 4px !important;
  }

  .wsmenu > .wsmenu-list > li > a {
    padding: 12px 16px !important;
    border-left: none !important;
    border-radius: 6px !important;
    transform: none !important;
    font-size: 14px !important;
  }

  .wsmenu > .wsmenu-list > li > a::before {
    display: none !important;
  }

  .wsmenu > .wsmenu-list > li > a:hover {
    background: rgba(212, 165, 116, 0.1) !important;
    transform: translateY(-1px) !important;
    padding-left: 16px !important;
  }
}

/* Global overrides to prevent conflicts */
body * {
  position: relative;
}

/* Reset problematic z-index values */
.carousel,
.owl-carousel,
.flexslider,
.hero-section,
section,
.container,
.row,
[class*='col-'] {
  z-index: auto !important;
}

/* Specific section resets */
#hero-10,
#about-4,
#pricing-2,
#services-13,
#team-1,
#reviews-1,
#contacts-1,
#footer-1 {
  z-index: 1 !important;
}

/* Modal compatibility */
.modal {
  z-index: 99990 !important;
}

.modal-backdrop {
  z-index: 99989 !important;
}