/* OpenCart 4.x Custom Menu Styles - Fixed Version */
/* Green Theme Menu Styles with Correct Mobile Interaction */

[flex],[flex]>*,[flex]>[flex]{overflow:hidden;}
[flex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
[flex]>*{display:block;}
[flex]>[flex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
[flex~="show:visible"], [flex~="show:visible"]>*, [flex]>[flex~="show:visible"]{overflow:visible;}
[flex~="dir:left"]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
[flex~="dir:right"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
[flex~="dir:top"]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
[flex~="dir:bottom"]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;}
[flex~="main:left"]{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}
[flex~="main:right"]{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
[flex~="main:justify"]{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
[flex~="main:center"]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
[flex~="cross:top"]{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start;}
[flex~="cross:bottom"]{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;-ms-grid-row-align:flex-end;align-items:flex-end;}
[flex~="cross:center"]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;}
[flex~="cross:baseline"]{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;-ms-grid-row-align:baseline;align-items:baseline;}
[flex~="cross:stretch"]{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;-ms-grid-row-align:stretch;align-items:stretch;}
[flex~="box:mean"]>*,[flex~="box:first"]>*,[flex~="box:last"]>*,[flex~="box:justify"]>*{width:0;height:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}
[flex~="box:first"]>:first-child,[flex~="box:last"]>:last-child,[flex~="box:justify"]>:first-child,[flex~="box:justify"]>:last-child{width:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
[flex~="dir:top"][flex~="box:mean"]>*,[flex~="dir:top"][flex~="box:first"]>*,[flex~="dir:top"][flex~="box:last"]>*,[flex~="dir:top"][flex~="box:justify"]>*,[flex~="dir:bottom"][flex~="box:mean"]>*,[flex~="dir:bottom"][flex~="box:first"]>*,[flex~="dir:bottom"][flex~="box:last"]>*,[flex~="dir:bottom"][flex~="box:justify"]>*{width:auto;height:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}
[flex~="dir:top"][flex~="box:first"]>:first-child,[flex~="dir:top"][flex~="box:last"]>:last-child,[flex~="dir:top"][flex~="box:justify"]>:first-child,[flex~="dir:top"][flex~="box:justify"]>:last-child,[flex~="dir:bottom"][flex~="box:first"]>:first-child,[flex~="dir:bottom"][flex~="box:last"]>:last-child,[flex~="dir:bottom"][flex~="box:justify"]>:first-child [flex~="dir:bottom"][flex~="box:justify"]>:last-child{height:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
[flex-box="0"]{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
[flex-box="1"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}
[flex-box="2"]{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2;}
[flex-box="3"]{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3;-webkit-flex-shrink:3;-ms-flex-negative:3;flex-shrink:3;}
[flex-box="4"]{-webkit-box-flex:4;-webkit-flex-grow:4;-ms-flex-positive:4;flex-grow:4;-webkit-flex-shrink:4;-ms-flex-negative:4;flex-shrink:4;}
[flex-box="5"]{-webkit-box-flex:5;-webkit-flex-grow:5;-ms-flex-positive:5;flex-grow:5;-webkit-flex-shrink:5;-ms-flex-negative:5;flex-shrink:5;}
[flex-box="6"]{-webkit-box-flex:6;-webkit-flex-grow:6;-ms-flex-positive:6;flex-grow:6;-webkit-flex-shrink:6;-ms-flex-negative:6;flex-shrink:6;}
[flex-box="7"]{-webkit-box-flex:7;-webkit-flex-grow:7;-ms-flex-positive:7;flex-grow:7;-webkit-flex-shrink:7;-ms-flex-negative:7;flex-shrink:7;}
[flex-box="8"]{-webkit-box-flex:8;-webkit-flex-grow:8;-ms-flex-positive:8;flex-grow:8;-webkit-flex-shrink:8;-ms-flex-negative:8;flex-shrink:8;}
[flex-box="9"]{-webkit-box-flex:9;-webkit-flex-grow:9;-ms-flex-positive:9;flex-grow:9;-webkit-flex-shrink:9;-ms-flex-negative:9;flex-shrink:9;}
[flex-box="10"]{-webkit-box-flex:10;-webkit-flex-grow:10;-ms-flex-positive:10;flex-grow:10;-webkit-flex-shrink:10;-ms-flex-negative:10;flex-shrink:10;}

/* PC Menu Styles */
.module-container-menu{width:100%;padding:0;margin:0;}

.module-container-menu .menu-container{position:relative}
.module-container-menu .menu{display:flex;list-style:none;padding:0;margin:0}
.module-container-menu .menu-item{height:40px;flex:1;cursor:pointer;position:relative;}
.module-container-menu .menu-item:hover{background-color:rgba(0,0,0,0.1);}
.module-container-menu .menu-item:hover a{font-weight:700;}
.module-container-menu .menu-item a{color:#fff !important;}
.module-container-menu .menu-item:after{content:'';width:1px;height:16px;background:#b6ed2c;position:absolute;left:0;top:12px;}
.module-container-menu .menu-item:nth-of-type(1):after{width:0;}
.module-container-menu .menu-details{position:absolute;top:100%;left:0;width:100%;overflow:hidden;background-color:#fff;border:1px solid #ddd;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:10;transition:max-height .3s ease,opacity .3s ease;max-height:0;opacity:0}
.module-container-menu .menu-details.active{opacity:1;max-height:500px}
.module-container-menu .details-content{display:none;background-color:rgba(111,172,46,.1);}
.module-container-menu .details-content.active{ display: flex;flex-wrap: wrap;}
.module-container-menu .details-content dl{display:block; flex: 1 0 auto;max-width:178px;min-width:140px;padding:8px 12px;margin-bottom:6px;}
.module-container-menu .details-content dl dt{padding:6px 4px;margin-bottom:4px;transform:scale(1);transition:all .25s;}
.module-container-menu .details-content dl dt:hover{transform:scale(1.1);}
.module-container-menu .details-content dl dd{padding:4px 4px;transform:translateX(0);transition:all .25s;}
.module-container-menu .details-content dl dd:hover{transform:translateX(8px);}

.module-menu{margin-bottom:10px;background-color:#6FAC2E;background-repeat:repeat-x;min-height:40px;display:block;}
.module-menu .nav{width:100%;padding:5px 0;}
.module-menu .nav>li>a{color:#fff;padding:5px 8px;margin-right:1px;min-height:15px;background-color:transparent;position:relative;}
.module-menu .box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}
.module-menu h3{display:none;height:36px;padding:0 10px;margin:0;font-size:18px;font-weight:700;color:#000;}
.module-menu h4{width:84px;font-size:16px;font-weight:700;}
.module-menu h4 a, .module-menu h4 span{color:#fff;}
.module-menu .nav>li.cell-path>a:after{content:'';width:1px;height:10px;background:#b6ed2c;position:absolute;right:-1px;top:9px;}
.module-menu .nav>li>a:hover,.module-menu .nav>li.open>a{background-color:rgba(0,0,0,0.1);}
.module-menu .dropdown-menu{padding-bottom:0;}
.module-menu .dropdown-inner{display:table;}
.module-menu .dropdown-inner ul{display:table-cell;}
.module-menu .dropdown-inner a{min-width:180px;display:block;padding:3px 20px;clear:both;line-height:20px;color:#333;font-size:12px;}
.module-menu .dropdown-inner li a:hover{color:#fff;}
.module-menu .see-all{display:block;margin-top:.5em;border-top:1px solid #DDD;padding:3px 20px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 3px 3px;font-size:12px;}
.module-menu .see-all:hover,.module-menu .see-all:focus{text-decoration:none;color:#fff;background-color:#229ac8;background-image:linear-gradient(to bottom,#23a1d1,#1f90bb);background-repeat:repeat-x;}
.module-menu #category{float:left;padding-left:15px;font-size:16px;font-weight:700;line-height:40px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.2);}
.module-menu .btn-navbar{font-size:14px;font-stretch:expanded;color:#FFF;margin:0;padding:2px 18px;float:right;background-color:#229ac8;background-image:linear-gradient(to bottom,#85CA3A,#6FAC2E);background-repeat:repeat-x;border-color:#85CA3A #85CA3A #6FAC2E;position:absolute;right:10px;top:5px;}
.module-menu .btn-navbar:hover,.module-menu .btn-navbar:focus,.module-menu .btn-navbar:active,.module-menu .btn-navbar.disabled,.module-menu .btn-navbar[disabled]{color:#fff;background-color:#229ac8}

.module-menu div.dropdown-inner>ul.list-unstyled{display:block;}
.module-menu div.dropdown-menu{margin-left:0!important;padding-bottom:10px;background-color:rgba(255,255,255,.95);box-shadow:0 3px 12px rgba(0,0,0,.5)}
.module-menu .dropdown-inner{display:block;}
.module-menu .dropdown-inner a{width:100%;color:#666;}
.module-menu .dropdown-menu a:hover,.module-menu .dropdown-menu ul li a:hover{background:rgba(133, 202, 58, .6);}
.module-menu .see-all{margin-top:0;border:0;border-radius:0;color:#666;}

/* Mobile Menu Styles - OpenCart 2.x Compatible */
.mobile-menu-container{display: none;}
.mobile-menu-header{background-color:#6FAC2E;color:white;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.mobile-menu-header-container{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;max-width:1200px;margin:0 auto;}
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:15;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;}
.overlay.active{opacity:1;visibility:visible;}
.mobile-menu{position:fixed;top:0;height:100%;width:85%;max-width:320px;background-color:white;z-index:20;transition:transform 0.3s ease;overflow-y:auto;}
.mobile-menu-title{display:flex;align-items:center;padding:15px;background-color:#6FAC2E;border-bottom:1px solid #ddd;}
.mobile-menu-title span{flex-grow:1;text-align:center;font-weight:bold;font-size:16px;color:#FFF;}
.back-button{padding:5px;cursor:pointer;width:30px;}
.back-button .fa{font-size:16px;color:#FFF;}
.mobile-menu ul{padding:0;}
.mobile-menu li{position:relative;}
.mobile-menu li:before{content: '';width:100%;height:1px;background-color:#ddd;position:absolute;left:12px;bottom:0;}
.mobile-menu li a{display:flex;justify-content:space-between;align-items:center;padding:16px 16px;color:#333;text-decoration:none;font-size:14px;transition:background-color 0.2s ease;}
.mobile-menu li .fa{color:#999;}
.mobile-menu li a:hover,.mobile-menu li a:active{background-color:rgba(111,172,46,.1);}
.level-1{left:0;transform:translateX(-100%);}
.level-2{left:0;transform:translateX(-100%);}
.level-3{left:0;transform:translateX(-100%);}
.mobile-menu.active{transform:translateX(0);}

.navbar-toggler {
  border: none !important;
  padding: 8px 12px;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-text {
  font-weight: 600;
  font-size: 16px;
}

/* Mobile Offcanvas Menu */
#mobile-menu .offcanvas-header {
  background-color: #6FAC2E !important;
  border-bottom: 1px solid #5E9025;
}

#mobile-menu .offcanvas-title {
  font-weight: 600;
  font-size: 18px;
}

#mobile-menu .offcanvas-body {
  padding: 0;
}

/* Mobile Menu Container */
#mobile-menu-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.mobile-menu-level {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.1s ease;
  overflow-y: auto;
}

.mobile-menu-level.active {
  transform: translateX(0);
}

.mobile-menu-level.prev {
  transform: translateX(-100%);
}

/* Mobile Menu Items - Fixed Interaction */
.mobile-menu-expand {
  color: #333 !important;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.mobile-menu-expand:hover {
  background-color: #f8f9fa !important;
  color: #6FAC2E !important;
}

.mobile-menu-direct-link {
  color: #333 !important;
  transition: background-color 0.2s ease;
}

.mobile-menu-direct-link:hover {
  background-color: #f8f9fa !important;
  color: #6FAC2E !important;
}

.mobile-menu-direct-link i {
  color: #6c757d;
  font-size: 14px;
}

/* Mobile Menu Back Button */
.mobile-menu-back {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  color: #6FAC2E !important;
  font-weight: 600;
  padding: 15px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-menu-back:hover {
  background-color: #e9ecef;
  color: #5E9025 !important;
}

.mobile-menu-back i {
  font-size: 14px;
}

/* Mobile Menu Category Links */
.mobile-menu-category-link {
  color: #333 !important;
  text-decoration: none;
  padding: 12px 20px;
  display: block;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
}

.mobile-menu-category-link:hover {
  background-color: #f8f9fa;
  color: #6FAC2E !important;
}

/* Mobile Menu Subcategories (Expanded in place) */
.mobile-menu-subcategories {
  background-color: #f8f9fa;
  border-left: 3px solid #6FAC2E;
  margin: 0;
  padding: 0;
}

.mobile-menu-subcategories .mobile-menu-direct-link {
  padding: 8px 15px;
  font-size: 14px;
  color: #6c757d !important;
  border-bottom: 1px solid #e9ecef;
}

.mobile-menu-subcategories .mobile-menu-direct-link:hover {
  color: #6FAC2E !important;
  background-color: #e9ecef;
}

.mobile-menu-subcategories .mobile-menu-subcategory-item {
  padding: 8px 15px;
  font-size: 14px;
  color: #6c757d !important;
}

.mobile-menu-subcategories .mobile-menu-subcategory-item:hover {
  color: #6FAC2E !important;
  background-color: #e9ecef;
}

/* Responsive Adjustments - OpenCart 2.x Compatible */
@media(max-width:477px) {
    .module-menu{display:none;}
    .mobile-menu-container{display:block;}
}

@media(min-width:478px) and (max-width:768px) {
    .module-menu{display:none;}
    .mobile-menu-container{display:block;}
}

@media(min-width:768px) and (max-width:991px){
    .module-menu{display:block;}
    .mobile-menu-container{display:none;}
}

@media(min-width:767px){
    .module-menu{border-radius:4px;}
}

@media (max-width: 991.98px) {
  #menu.d-none.d-lg-block {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .navbar.d-lg-none {
    display: none !important;
  }

  #mobile-menu {
    display: none !important;
  }
}

/* Animation for dropdown */
.dropdown-menu {
  animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover effects for better UX */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  display: none;
}

.nav-item.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

/* Fix for Bootstrap 5 dropdown positioning */
.dropdown-menu.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
}

.nav-item.dropdown.position-static {
  position: static;
}

/* Mobile menu overlay */
.offcanvas-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Accessibility improvements */
.nav-link:focus,
.dropdown-item:focus,
.mobile-menu-expand:focus,
.mobile-menu-direct-link:focus {
  outline: 2px solid #6FAC2E;
  outline-offset: 2px;
}

/* Loading state */
.mobile-menu-loading {
  color: #6FAC2E;
  font-size: 16px;
}

.mobile-menu-loading i {
  color: #6FAC2E;
}

/* Global Link Styles */
a {
  color: #777 !important;
  text-decoration: none !important;
}

a:hover {
  color: #6FAC2E !important;
}

/* Print styles */
@media print {
  #menu,
  #mobile-menu {
    display: none !important;
  }
}