/* =========================================================
ASA LIFE NAVIGATION
========================================================= */

.asa-navigation {
position: relative;
width: 100%;
z-index: 100;
}

/* =========================================================
TOP BAR
========================================================= */

.top-bar {
background: linear-gradient(
to bottom,
#001a3d 0%,
#012a5e 100%
);

border-bottom: 0.5px solid rgba(255, 255, 255, 0.35);
}

.top-bar-inner {
max-width: var(--container);
height: 48px;
margin: 0 auto;
padding: 0 var(--gutter);

display: flex;
align-items: center;
justify-content: flex-end;
}

.top-bar-right {
display: flex;
align-items: center;
gap: 20px;
}

.top-bar-search {
padding: 0;

display: flex;
align-items: center;
gap: 6px;

color: #ffffff;
background: transparent;
border: 0;

cursor: pointer;

font-size: 14px;
font-weight: 500;

opacity: 0.75;

transition: opacity 0.2s;
}

.top-bar-search:hover {
color: #ffffff;
opacity: 1;
}

.top-bar-search i {
font-size: 21px;
}

.top-bar-quicklinks {
display: flex;
align-items: center;
gap: 0;
}

.top-bar-ql {
padding: 0 12px;

color: rgba(255, 255, 255, 0.8);

font-size: 17px;
font-weight: 500;
letter-spacing: 0.5px;

text-decoration: none;

transition: color 0.2s;
}

.top-bar-ql:hover {
color: #ffffff;
}

.lang-div {
width: 0.5px;
height: 12px;

background: rgba(255, 255, 255, 0.3);
}

/* =========================================================
MAIN NAVBAR
========================================================= */

.asa-navbar {
width: 100%;
min-height: 68px;
padding: 0;

background: linear-gradient(
to bottom,
#012a5e 0%,
#0553a8 100%
);

border: 0;
border-bottom: 0.5px solid rgba(168, 191, 192, 0.15);
border-radius: 0;

position: sticky;
top: 0;
z-index: 100;
}

.asa-navbar__inner {
width: 100%;
max-width: var(--container);
height: 68px;
margin: 0 auto;
padding: 0 var(--gutter);

display: flex;
align-items: center;
justify-content: space-between;

position: static;
}

/* =========================================================
LOGO
========================================================= */

.asa-navbar__brand {
margin: 0;
padding: 0;

display: flex;
align-items: baseline;
flex-shrink: 0;

text-decoration: none;
}

.asa-navbar__logo {
width: auto;
height: 36px;
display: block;
}


/* =========================================================
BOOTSTRAP COLLAPSE
========================================================= */

.asa-navbar__collapse {
height: 100%;

align-items: center;
justify-content: flex-end;
flex-grow: 1;
}


/* =========================================================
MAIN MENU
========================================================= */

.asa-navbar__menu {
height: 100%;
margin: 0;
padding: 0;

display: flex;
flex-direction: row;
align-items: center;
gap: 36px;

list-style: none;
}

.asa-navbar__item {
height: 100%;
margin: 0;
padding: 0;

display: flex;
align-items: center;
}

.asa-navbar__menu .asa-navbar__link {
height: 100%;
margin: 0;
padding: 0;

display: inline-flex;
align-items: center;

color: #f4f8f8;
background: transparent;

font-size: 19px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.3px;

text-decoration: none;
white-space: nowrap;

border: 0;

transition: color 0.2s;
}

.asa-navbar__menu .asa-navbar__link:hover,
.asa-navbar__menu .asa-navbar__link:focus,
.asa-navbar__menu .asa-navbar__link.show {
color: #b8ad91;
background: transparent;
}

.asa-navbar__link::after {
display: none !important;
}

/* =========================================================
MEGA MENU – PROIZVODI
========================================================= */

.asa-navbar__inner,
.asa-navbar__collapse,
.asa-navbar__menu {
position: static;
}

.asa-navbar__item--mega {
position: static;
}

.asa-navbar__mega-toggle,
.asa-navbar__dropdown-toggle {
appearance: none;
cursor: pointer;
}
.asa-navbar__mega-toggle i,
.asa-navbar__dropdown-toggle i {
font-size: 11px;
line-height: 1;
width: 11px;
height: 11px;

display: inline-flex;
align-items: center;
justify-content: center;

transition: transform 0.2s ease;
}
.asa-navbar__item--mega > .asa-navbar__link {
padding: 22px 0;

display: inline-flex;
align-items: center;
gap: 8px;
}

.asa-navbar__item--mega > .asa-navbar__link i {
font-size: 11px;
line-height: 1;

transition: transform 0.2s ease;
}

.asa-navbar__item--mega.is-open
> .asa-navbar__mega-toggle
i {
transform: rotate(180deg);
}

/* Glavni panel */

.asa-mega {
position: absolute;
top: 100%;
right: 0;
left: 0;

width: 100%;
margin: 0;
padding: 0;

display: block;

background: #ffffff;

border: 0;
border-top: 3px solid #009cdb;
border-radius: 0;

box-shadow: 0 20px 50px rgba(0, 26, 61, 0.16);

opacity: 0;
visibility: hidden;
pointer-events: none;

transform: translateY(8px);

transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;

z-index: 1100;
}

.asa-navbar__item--mega.is-open > .asa-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;

transform: translateY(0);
}


.asa-mega__inner {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 38px var(--gutter) 42px;

display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: start;
gap: 38px;
}

.asa-mega__column {
min-width: 0;

display: flex;
flex-direction: column;
align-items: stretch;
}

.asa-mega__column-title {
min-height: 62px;
padding: 0 0 17px;

display: flex;
align-items: flex-start;
gap: 12px;

color: #082d5c;

border-bottom: 1px solid #dce5ee;

font-size: 17px;
font-weight: 600;
line-height: 1.35;

text-decoration: none;

transition: color 0.2s ease;
}

.asa-mega__column-title:hover,
.asa-mega__column-title:focus {
color: #009cdb;
}

.asa-mega__column-title i {
flex: 0 0 auto;

margin-top: 2px;

color: #009cdb;

font-size: 21px;
line-height: 1;
}

.asa-mega__column-title span {
display: block;
}

/* Linkovi unutar kolona */

.asa-mega__link {
width: 100%;
padding: 14px 0 0;

display: block;

color: #667b95;

font-size: 15px;
font-weight: 400;
line-height: 1.5;

text-decoration: none;

transition:
color 0.2s ease,
transform 0.2s ease;
}

.asa-mega__link + .asa-mega__link {
padding-top: 12px;
}

.asa-mega__link:hover,
.asa-mega__link:focus {
color: #009cdb;

transform: translateX(3px);
}


.asa-mega__bottom {
width: 100%;

background: #f0f4f8;
border-top: 1px solid rgba(1, 58, 128, 0.08);
}

.asa-mega__bottom-inner {
width: 100%;
max-width: var(--container);
min-height: 76px;
margin: 0 auto;
padding: 14px var(--gutter);

display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

.asa-mega__bottom p {
margin: 0;

color: rgba(0, 26, 61, 0.72);

font-size: 16px;
line-height: 1.5;
}

.asa-mega__cta {
min-width: 186px;
min-height: 42px;
margin: 0;
padding: 11px 26px;

display: inline-flex;
align-items: center;
justify-content: center;

color: #ffffff;
background: #b8ad91;

border: 0;
border-radius: 2px;

font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.8px;

text-align: center;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;

transition:
background 0.2s ease,
opacity 0.2s ease;
}

.asa-mega__cta:hover,
.asa-mega__cta:focus {
color: #ffffff;
background: #a69a7c;
}

/* =========================================================
COMPACT DROPDOWN
========================================================= */

.asa-navbar__item--dropdown {
position: relative;
}

.asa-navbar__item--mega > .asa-navbar__link,
.asa-navbar__item--dropdown > .asa-navbar__link {
display: inline-flex;
align-items: center;
gap: 8px;
}


.asa-navbar__item--mega > .asa-navbar__link i,
.asa-navbar__item--dropdown > .asa-navbar__link i {
font-size: 11px;
line-height: 1;

transition: transform 0.2s ease;
}

.asa-navbar__item--dropdown:hover > .asa-navbar__link i,
.asa-navbar__item--dropdown > .asa-navbar__link.show i {
transform: rotate(180deg);
}

.asa-dropdown {
display: block !important;

position: absolute !important;
top: 100% !important;
left: -24px !important;

min-width: 270px;

margin: 0 !important;
padding: 10px 0 !important;

background: #ffffff;

border: 0 !important;
border-top: 3px solid #009cdb !important;
border-radius: 0 0 4px 4px !important;

box-shadow: 0 16px 48px rgba(0, 26, 61, 0.2);

opacity: 0;
visibility: hidden;
pointer-events: none;

transform: translateY(10px) !important;

transition:
opacity 0.2s,
transform 0.2s,
visibility 0.2s;
}

.asa-navbar__item--dropdown:hover > .asa-dropdown,
.asa-navbar__item--dropdown > .asa-dropdown.show {
opacity: 1;
visibility: visible;
pointer-events: auto;

transform: translateY(0) !important;
}

.asa-navbar__menu .asa-dropdown__link {
margin: 0;
padding: 12px 24px;

display: flex;
align-items: center;
gap: 12px;

color: #001a3d;
background: transparent;

font-size: 18px;
font-weight: 500;
line-height: normal;

text-decoration: none;
white-space: normal;

transition:
background 0.15s,
color 0.15s;
}

.asa-navbar__menu .asa-dropdown__link i {
color: #009cdb;
font-size: 22px;

flex-shrink: 0;
}

.asa-navbar__menu .asa-dropdown__link:hover,
.asa-navbar__menu .asa-dropdown__link:focus {
color: #0553a8;
background: #f0f4f8;
}


/* =========================================================
OFFER BUTTON
========================================================= */

.asa-navbar__actions {
margin: 0 0 0 36px;
padding: 0;

display: flex;
align-items: center;
flex-shrink: 0;
}

.asa-navbar__button {
margin: 0;
padding: 9px 22px;

display: inline-flex;
align-items: center;
justify-content: center;

color: #ffffff;
background: transparent;

border: 1px solid #ffffff;
border-radius: 2px;

font-size: 13px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.8px;

text-transform: uppercase;
text-decoration: none;
white-space: nowrap;

cursor: pointer;

transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
}

.asa-navbar__button:hover {
color: #001a3d;
background: #b8ad91;
border-color: #b8ad91;
}


/* =========================================================
BURGER BUTTON
========================================================= */

.asa-navbar__toggler {
width: 44px;
height: 44px;
margin: 0;
padding: 0;

align-items: center;
justify-content: center;

color: #ffffff;
background: transparent;

border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2px;

box-shadow: none;
}

.asa-navbar__toggler:focus {
box-shadow: none;
}

.asa-navbar__toggler-lines {
width: 22px;

display: flex;
flex-direction: column;
gap: 5px;
}

.asa-navbar__toggler-lines span {
display: block;
width: 100%;
height: 2px;

background: #ffffff;
border-radius: 2px;

transition:
transform 0.2s,
opacity 0.2s;
}


/* =========================================================
ACCENT LINE
========================================================= */

.asa-navigation__accent {
width: 100%;
height: 1px;

background: linear-gradient(
90deg,
rgba(196, 149, 106, 0.5) 0%,
rgba(116, 147, 149, 0.3) 35%,
transparent 70%
);
}