/* MOBILE: hide navigation bar on viewports narrower than 1025px */
@media (max-width: 1024px) {
	#nav-menu-bar {
	display: none !important;
	}
	body {
	overflow-x: hidden !important;
	}
}

/* Keep your existing styles below */
body {
 overflow-x: hidden !important;
}

/*************************************************************
 * 1. MEGA MENU POSITIONING (PODRŠKA / LOGIN)
 *************************************************************/

#nav-podska .wpr-sub-mega-menu {
    margin-left: -50px;
}

#nav-login .wpr-sub-mega-menu {
    margin-left: -50px;
}

/*************************************************************
 * 2. MEGA MENU "Domeni" + "Usluge" + "Sertifikati"
 *    - Root mega panels (.ms-root-panel) are centered.
 *    - Nested Sertifikati panels use .ms-nested-open to stay visible.
 *************************************************************/

/* Make sure the widget and its column are NOT positioning contexts */
#nav-menu-bar .nav-btn-menu-usluge {
    position: static !important;
}

/* Prevent header columns from hijacking absolute positioning */
#nav-menu-bar .elementor-column {
    position: static !important;
}

/* Top-level mega LIs (Domeni / Usluge / Sertifikati) must be static */
#nav-menu-bar .nav-btn-menu-usluge
    .wpr-nav-menu > li.menu-item-has-children.wpr-mega-menu-true {
    position: static !important;
}

/* ROOT mega panels only (marked .ms-root-panel by JS) */
#nav-menu-bar .nav-btn-menu-usluge .ms-root-panel {
    position: absolute !important;
    top: 100% !important;
    margin-top: 35px;

    max-width: 1100px;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* JS adds dynamic horizontal offset via --ms-mega-offset */
    transform: translateX(var(--ms-mega-offset, 0px)) translateY(10px) !important;

    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 120; /* above ::after background */
}

/* During measuring: no animation, no previous offset */
#nav-menu-bar .nav-btn-menu-usluge .ms-root-panel.ms-measuring {
    transition: none !important;
    transform: translateX(0px) translateY(10px) !important;
}

/* When JS marks a root item as open, show its root panel */
#nav-menu-bar .nav-btn-menu-usluge
    .menu-item-has-children.wpr-mega-menu-true.ms-open
    > .ms-root-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(var(--ms-mega-offset, 0px)) translateY(0) !important;
}

/* ---------- Nested Sertifikati panels ---------- */

/* Default: nested mega panels hidden (Sectigo / Thawte / Trustwave) */
#nav-menu-bar .nav-btn-menu-usluge .ms-root-panel
    .wpr-nav-menu > li.menu-item-has-children.wpr-mega-menu-true
    > .wpr-sub-mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* When JS adds .ms-nested-open, keep that nested panel visible and clickable,
   even if the mouse is NOT over the left tab anymore */
#nav-menu-bar .nav-btn-menu-usluge .ms-root-panel
    .wpr-nav-menu > li.menu-item-has-children.wpr-mega-menu-true.ms-nested-open
    > .wpr-sub-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/*************************************************************
 * 3. EXTENDED DARK BACKGROUND UNDER THE HEADER
 *************************************************************/

#nav-menu-bar {
    position: relative;
    z-index: 100; /* above page content */
}

/* Inner container of the header */
#nav-menu-bar > .elementor-container {
    position: relative;          /* anchor for ::after & mega menus */
		border-color: var(--e-global-color-primary) !important;
    border-radius: 20px;
    background: var(--e-global-color-secondary) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    padding: 20px;
    z-index: 130;
    overflow: visible;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* The extended background "panel" */
#nav-menu-bar > .elementor-container::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 88.5%;
    height: 0;

    background: rgba(0, 4, 25, 0.80);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 5px 10px rgba(255, 255, 255, 0.08);
    opacity: 0;
    pointer-events: none;
    transition:
        height 0.25s ease,
        opacity 0.25s ease,
        backdrop-filter 0.25s ease;
}

/* When any mega menu is open, extend the dark background */
#nav-menu-bar.ms-mega-open > .elementor-container::after {
    height: 350px;   /* match or exceed mega menu height */
    opacity: 1;
}

.wpr-anim-text.wpr-anim-text-type-typing.wpr-anim-text-letters {
  border-radius: 10px;
}

/*************************************************************
 * 4. STICKY HEADER + HIDE ON SCROLL DOWN
 *************************************************************/

/* Base (already defined above) */
#nav-menu-bar {
    position: relative;
    z-index: 100;
}

/* Fixed state when scrolling up */
#nav-menu-bar.ms-fixed {
    position: fixed;
    top: 0;        /* change if you want a gap */
    left: 0;
    right: 0;
    z-index: 200;
}

/* Hidden while scrolling down */
#nav-menu-bar.ms-fixed.ms-hidden {
    transform: translateY(-100%);
    opacity: 0;
}

/*************************************************************
 * 5. NAV LINKS – ANIMATED TOP LINE
 *************************************************************/

.nav-link-list a:not(.wpr-menu-item) {
    position: relative;
    display: block;
    padding: 20px;

    border-top: 3px solid transparent;
    color: var(--e-global-color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Animated line */
.nav-link-list a:not(.wpr-menu-item)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 100%;
    background-color: var(--e-global-color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0, 0.62, 0.25, 1);
}

/* Hover state */
.nav-link-list a:not(.wpr-menu-item):hover {
    background-color: #6D28D925;
    border-radius: 10px;
}

.nav-link-list a:not(.wpr-menu-item):hover::before {
    transform: scaleX(1);
}

/*************************************************************
 * 6. MAIN CTA BUTTON GLOW ANIMATION
 *************************************************************/

.main-btn:after{
    animation: mainBtnAnimation 4.5s linear infinite;
    animation-delay: .3s;
    background: linear-gradient(
        90deg,
        #F8E0FF00 25%,
        var(--e-global-color-primary) 50%,
        #F8E0FF00 75%
    );
    background-position: 100% 0;
    background-size: 200% 100%;
    border-radius: 10px;
    bottom: -3px;
    content: "";
    filter: blur(0);
    left: -3px;
    position: absolute;
    right: -3px;
    top: -3px;
    transition:
        left .1s cubic-bezier(0, .62, .25, 1),
        right .1s cubic-bezier(0, .62, .25, 1),
        top .1s cubic-bezier(0, .62, .25, 1),
        bottom .1s cubic-bezier(0, .62, .25, 1),
        filter .1s cubic-bezier(0, .62, .25, 1),
        background-position .4s cubic-bezier(0, .62, .25, 1);
    z-index: -1;
}

.main-btn:hover:after{
    animation: none;
    background: linear-gradient(
        90deg,
        #F8E0FF00 25%,
        var(--e-global-color-primary) 50%,
        #F8E0FF00
    );
    background-size: 200% 100%;
    bottom: -4px;
    filter: blur(2px);
    left: -4px;
    right: -4px;
    top: -4px;
}

@keyframes mainBtnAnimation {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}
/*************************************************************
 * 7. PRICE TAGS
 *************************************************************/
.price-light {
  font-weight: 300;
}

.price-strong {
  font-weight: 700;
  font-size: 30px;
}


.gradient-hero::before {
    z-index: 10 !important;
}
/*************************************************************
 * 8. Main Page First Contenier
 *************************************************************/

/* Hero container */
.gradient-hero {
  position: relative;
  overflow: hidden;
}

/* Put all normal content above the background animation */
.gradient-hero > *:not(.square-wave) {
  position: relative;
  z-index: 0;
}

/* Container for the animated squares */
.gradient-hero .square-wave {
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  z-index: 10;
  pointer-events: none;  /* so clicks go through to buttons */
}

/* Squares themselves */
.gradient-hero .square-wave span {
  --base-size: 300px;        /* starting size */
  --stroke-width: 5px;
  --duration: 16s;            /* total grow+fade time */
  --delay-step: 4s;        /* spacing between waves */

  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--base-size);
  height: var(--base-size);
  border: var(--stroke-width) solid rgba(255, 255, 255, 0.03); /* stroke only */
  background: #6D28D910;
  box-sizing: border-box;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 40px;

  animation: squareGrow var(--duration) linear infinite;
  animation-delay: calc(var(--i) * var(--delay-step) * -1);
}

/* The animation: from center to near-edges, fade out */
@keyframes squareGrow {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);  /* tweak 3–5 depending on hero size */
    opacity: 0;
  }
}
.highlight-green{
	border-bottom: solid 4px;
	border-bottom-color: var(--e-global-color-primary);
}

.eunet-illus {
  width: 100%;
  height: auto;
  display: block;
}

.wpcf7 form .form-row {
  display: flex;
  gap: 10%;         
  flex-wrap: nowrap;
  flex-direction: row;  
}
.wpcf7 form .form-row > label {
  flex: 1 1 0;
  min-width: 260px;   /* helps keep two columns until smaller screens */
}
div.cenovnik table tbody tr:last-child td,
div.cenovnik table tbody tr:last-child th {
  font-weight: 600 !important;
  color: var(--e-global-color-primary) !important;
}

/* wrapper controls cropping */
.domain-tld-ticker{
  width: 100%;
  overflow: hidden;
}

/* svg responsive */
.domain-tld-ticker svg{
  width: 100%;
  display: block;
}


@media (max-width: 768px) {
  /* thinner lines on small screens */
  .eunet-illus .main-line,
  .eunet-illus .grid-line {
    stroke-width: 3px;
  }

  .eunet-illus .tick {
    stroke-width: 2px;
  }
	
	.domain-tld-ticker svg{
    height: 56px;           
  }

  /* shrink key text styles across illustrations */
  .eunet-illus .node-label {
    font-size: 36px;
    letter-spacing: 0.04em;
  }

  .eunet-illus .package-text {
    font-size: 10px;
  }

  .eunet-illus .terminal-text {
    font-size: 9px;
  }

  /* SSL shield text block */
  .eunet-illus text {
    font-size: 0.8em;
  }
	
  .wpcf7 form .form-row {
    gap: 0;
  }
  .wpcf7 form .form-row > label {
    min-width: 100%;
  } 


}

@media (max-width: 500px) {
  /* mobile screens */
	#wpcf7-f907-p2601-o3 > form > p:nth-child(3) > input {
   		margin-top: -30px;
    		margin-right: 10px;
	}

}