/* =========================================================
   RS MEGA MENU – Frontend Styles (Fixed + Pro)
   - Desktop: hover stays open (no gap)
   - Mobile: + toggle inline (theme-like)
   - Panel padding controllable via CSS var
   - Link colors use --title-color, hover bg uses --theme-color
   ========================================================= */

/* ---------- Defaults / variables ---------- */
:root{
  --rs-panel-padding: 0px; /* stavi 24px ako želiš padding u panelu */
}

/* ---------- Parent LI ---------- */
.rs-mega-menu-parent{
  position: relative;
}

/* "Hover bridge": sprečava gašenje menija zbog malog razmaka */
.rs-mega-menu-parent::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:14px;           /* "zona" između linka i panela */
  display:block;
}

/* ---------- Panel base ---------- */
.rs-mega-menu-panel{
  position: absolute;
  top: 100%;             /* NEMA calc(100% + 10px) */
  margin-top: 0;         /* nema razmaka */
  z-index: 99999;

  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s ease;

  /* width defaults */
  width: var(--rs-panel-width, 1100px);
  max-width: var(--rs-panel-max-width, 1100px);

  left: 50%;
  transform: translateX(-50%);

  /* look */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);

  /* PADDING: uklanjamo "kaos" koji si obeležio */
  padding: var(--rs-panel-padding);

  overflow: visible;
}

.rs-mega-menu-mobile-list{
  display: none;
}

/* Keep open when mouse is on LI OR panel */
.rs-mega-menu-parent:hover > .rs-mega-menu-panel,
.rs-mega-menu-parent:focus-within > .rs-mega-menu-panel{
  display: block;
  opacity: 1;
  visibility: visible;
}

/* FULL WIDTH */
.rs-mega-menu-panel.is-full{
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
}

/* BOXED / CUSTOM remain centered */
.rs-mega-menu-panel.is-boxed,
.rs-mega-menu-panel.is-custom{
  left: 50%;
  transform: translateX(-50%);
}

.rs-mega-menu-panel.is-responsive-80{
  left: var(--rs-panel-left-offset, 10vw);
  right: auto;
  width: 80vw;
  max-width: 80vw;
  transform: none;
}

/* Theme header overflow fixes (ako tema seče dropdown) */
header, .site-header, .elementor-location-header, nav, .nav, .menu, .elementor-nav-menu{
  overflow: visible !important;
}

/* =========================================================
   Pro Typography inside panel
   - link: --title-color
   - hover bg: --theme-color
   ========================================================= */

.rs-mega-menu-panel h2{
  font-size: 20px;
  font-weight: 650;
  margin: 0 0 18px 0;
  color: var(--title-color);
  position: relative;
  padding-bottom: 10px;
}

.rs-mega-menu-panel h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:42px;
  height:3px;
  background: var(--theme-color);
  border-radius: 6px;
}

.rs-mega-menu-panel ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs-mega-menu-panel ul li{
  margin: 0 0 8px 0;
}

.rs-mega-menu-panel ul li a{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;

  font-size: 15px;
  font-weight: 550;
  color: var(--title-color);

  transition: background .22s ease, transform .22s ease;
}

.rs-mega-menu-panel ul li a:hover{
  background: var(--theme-color);
  color: var(--title-color);
  transform: translateX(4px);
}

.rs-mega-menu-panel ul li a:after{
  content: "→";
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .22s ease, transform .22s ease;
}

.rs-mega-menu-panel ul li a:hover:after{
  opacity: 1;
  transform: translateX(0);
}

/* =========================================================
   Mobile: + toggle inline and accordion behavior
   ========================================================= */

.rs-mega-toggle{
  display: none;
}

/* Mobile breakpoint */
@media (max-width: 991px){

  /* Na mobilnom nema hover otvaranja */
  .rs-mega-menu-parent::before{ display:none; }
  .rs-mega-menu-parent:hover > .rs-mega-menu-panel{ display:none; opacity:0; visibility:hidden; }

  /* Tema obično pravi <a> block; zato naš + ide ispod.
     Rešenje: li kao flex, a je flex:1, button desno */
  .rs-mega-menu-parent{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .rs-mega-menu-parent > a{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* + dugme (theme-like: okruglo desno) */
  .rs-mega-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 999px;

    border: 1px solid rgba(0,0,0,.08);
    background: rgba(13,94,244,.06);

    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--title-color);

    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
  }

  /* Panel u mobilnom ide ispod, kao accordion */
  .rs-mega-menu-panel{
    position: static;
    transform: none;
    left: auto;
    right: auto;

    width: 100%;
    max-width: none;

    margin-top: 10px;
    padding: 16px;

    display: none;
    opacity: 1;
    visibility: visible;
    border-radius: 14px;
    flex: 0 0 100%;
    order: 3;
  }

  .rs-mega-menu-panel.has-mobile-list{
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .rs-mega-menu-panel.has-mobile-list > .rs-mega-menu-desktop-content{
    display: none !important;
  }

  .rs-mega-menu-panel.has-mobile-list > .rs-mega-menu-mobile-list{
    display: block;
    width: 100%;
  }

  .rs-mega-menu-mobile-list,
  .rs-mega-menu-mobile-list *{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    transform: none !important;
    min-height: 0 !important;
  }

  .rs-mega-menu-mobile-list img,
  .rs-mega-menu-mobile-list picture,
  .rs-mega-menu-mobile-list svg,
  .rs-mega-menu-mobile-list video,
  .rs-mega-menu-mobile-list iframe,
  .rs-mega-menu-mobile-list .elementor-icon,
  .rs-mega-menu-mobile-list .elementor-button,
  .rs-mega-menu-mobile-list .elementor-heading-title{
    display: none !important;
  }

  .rs-mega-menu-mobile-list ul{
    display: block !important;
    list-style: none;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .rs-mega-menu-mobile-list li{
    display: block !important;
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .rs-mega-menu-mobile-list li::marker{
    content: "" !important;
    display: none !important;
  }

  .rs-mega-menu-mobile-list li::before,
  .rs-mega-menu-mobile-list li::after,
  .rs-mega-menu-mobile-list a::before,
  .rs-mega-menu-mobile-list a::after{
    content: none !important;
    display: none !important;
  }

  .rs-mega-menu-mobile-list li + li{
    border-top: 1px solid rgba(0,0,0,.08) !important;
  }

  .rs-mega-menu-mobile-list a{
    display: block !important;
    width: 100%;
    padding: 12px 0 !important;
    color: var(--title-color);
    font-size: 15px;
    line-height: 1.35;
    text-decoration: none !important;
  }

  /* Otvoreno stanje (JS dodaje .is-open na LI) */
  .rs-mega-menu-parent.is-open > .rs-mega-menu-panel{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* “+” animacija (x) */
  .rs-mega-menu-parent.is-open > .rs-mega-toggle{
    transform: rotate(45deg);
  }

  /* mobilna tipografija */
  .rs-mega-menu-panel h2{ font-size: 18px; }
  .rs-mega-menu-panel ul li a{ padding: 12px; }
}