/* First level dropdown */
.nav__item.has-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;   /* Below parent */
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
}

/* Show first-level on hover */
.nav__item.has-dropdown:hover > .dropdown-menu {
  display: block;
}

/* Second-level dropdown */
.nav__item.has-dropdown .dropdown-menu .nav__item.has-dropdown .dropdown-menu {
  top: 0;       /* Align to parent */
  left: 100%;   /* Push beside */
  margin-left: 2px;
}

/* Make submenus appear on hover */
.nav__item.has-dropdown .dropdown-menu .nav__item.has-dropdown:hover > .dropdown-menu {
  display: block;
}
/* Desktop (>=992px): keep your hover flyouts */
@media (min-width: 992px){
  #treatmentsMenu.nav__item.has-dropdown{position:relative}
  #treatmentsMenu > .dropdown-menu{
    display:none; position:absolute; top:100%; left:0; min-width:240px;
    background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.12); z-index:1000;
  }
  #treatmentsMenu:hover > .dropdown-menu{display:block;}
  #treatmentsMenu .dropdown-menu .nav__item.has-dropdown > .dropdown-menu{
    top:0; left:100%; margin-left:.25rem;
  }
}

/* Mobile (<992px): stack; toggle with 'show' class */
@media (max-width: 991.98px){
  #treatmentsMenu .dropdown-menu{
    position:static!important; display:none; border:0; box-shadow:none; margin:0; width:100%;
  }
  #treatmentsMenu .dropdown-menu.show{display:block;}
  #treatmentsMenu .dropdown-toggle{display:block; padding:.55rem 1rem;}
  #treatmentsMenu .dropdown-toggle::after{content:"▸"; float:right; transition:transform .2s;}
  #treatmentsMenu .open > .dropdown-toggle::after{transform:rotate(90deg);}
  #treatmentsMenu .dropdown-menu .nav__item-link{padding-left:1.25rem;}
}
/* Mobile (<992px): show dropdown arrows clearly */
/* Mobile (<992px): arrows for all dropdown parents */
@media (max-width: 991.98px){
  #treatmentsMenu .dropdown-toggle {
    position: relative;
    padding-right: 2rem !important; /* space for arrow */
  }

  /* default arrow ▼ */
  #treatmentsMenu .dropdown-toggle::after {
    content: "\25BC" !important;  /* ▼ */
    font-family: Arial, sans-serif !important;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #333;
    transition: transform 0.2s ease;
    display: inline-block;
  }

  /* rotate when open */
  #treatmentsMenu .open > .dropdown-toggle::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* indent submenu items */
  #treatmentsMenu .dropdown-menu .dropdown-toggle {
    padding-left: 1.5rem !important; /* indent for clarity */
  }
}

/* MOBILE: fix caret position to right for ALL dropdown parents in Treatments */

@media (max-width: 991.98px){
  /* make the row full width and reserve space for the caret */
  #treatmentsMenu .has-dropdown > .dropdown-toggle{
    position: relative;
    display: block;
    width: 100%;
    padding-right: 2rem !important;
    background-image: none !important;
  }

  /* the caret element we inject */
  #treatmentsMenu .has-dropdown > .dropdown-toggle .tm-caret{
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    line-height: 1;
    pointer-events: none; /* row remains clickable */
  }
  /* show ▼ before click */
  #treatmentsMenu .has-dropdown > .dropdown-toggle .tm-caret::before{
    content: "\25BC";  /* ▼ */
    color: #333;
  }
  /* when parent is open, flip to ▲ */
  #treatmentsMenu .has-dropdown.open > .dropdown-toggle .tm-caret::before{
    content: "\25B2";  /* ▲ */
  }

  /* indent submenu parents a bit */
  #treatmentsMenu .dropdown-menu .has-dropdown > .dropdown-toggle{
    padding-left: 1.5rem !important;
  }
}




}

/* ===============================
   MEGA MENU
================================= */

.has-megamenu{
    position:relative;
}

.has-megamenu > .nav__item-link{
    display:flex;
    align-items:center;
    gap:8px;
}

.has-megamenu > .nav__item-link i{
    font-size:12px;
    transition:.3s ease;
}

.has-megamenu.active > .nav__item-link i{
    transform:rotate(180deg);
}

/* Mega Menu */

.mega-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    width:1100px;
    max-width:95vw;
    background:#fff;
    display:none;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    padding:35px;
    border-radius:10px;
    box-shadow:0 12px 35px rgba(0,0,0,.15);
    z-index:9999;
}

/* Open Menu */

.has-megamenu.active .mega-menu{
    display:grid;
}

/* Columns */

.mega-column h5 {
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 600;
    color: #222;
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px;
}

.mega-column a{
    display:block;
    padding:8px 0;
    color:#666;
    text-decoration:none;
    transition:.3s;
}

.mega-column a:hover{
    color:#009688;
    padding-left:6px;
}

/* ===============================
   Tablet
================================= */

@media(max-width:1200px){

.mega-menu{
    width:95%;
    grid-template-columns:repeat(3,1fr);
}

}

/* ===============================
   Mobile
================================= */

@media(max-width:991px){

.has-megamenu{
    position:relative;
}

.has-megamenu > .nav__item-link{
    justify-content:space-between;
    width:100%;
}

.mega-menu{

    position:static;

    transform:none;

    width:100%;

    display:none;

    grid-template-columns:1fr;

    padding:15px;

    margin-top:10px;

    box-shadow:none;

    border:1px solid #eee;

    border-radius:6px;
}

.has-megamenu.active .mega-menu{
    display:grid;
}

.mega-column{
    width:100%;
}

.mega-column h5{
    margin:15px 0 10px;
}

}

/* ===============================
   Small Mobile
================================= */

@media(max-width:576px){

.mega-menu{
    padding:12px;
}

.mega-column h5{
    font-size:15px;
}

.mega-column a{
    font-size:14px;
}

}