/*--------------------------- 
Add Plugin Front-End CSS here 
---------------------------*/
/*---------------------------
CSS Gradients
---------------------------*/
.gr-bloody-mary {
background: #FF512F;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #DD2476, #FF512F);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #DD2476, #FF512F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.gr-rose-water {
background: #E55D87;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #5FC3E4, #E55D87);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #5FC3E4, #E55D87); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.gr-horizon {
background: #003973;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #E5E5BE, #003973);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #E5E5BE, #003973); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.gr-intuitive-purple {
background: #DA22FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9733EE, #DA22FF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #9733EE, #DA22FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.gr-sport-red {
background: #e52d27;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #b31217, #e52d27);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #b31217, #e52d27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.gr-ocean-beach {
background: #108dc7;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ef8e38, #108dc7);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ef8e38, #108dc7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* .locked-training:before {
    content: "\f023"; 
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900; 
    margin-right: 5px;
    font-size: 16px; Prilagodi veličinu ikonice
    color: #ff0000; Prilagodi boju ikonice
}
 */
.locked-training .wpgb-card-media-thumbnail {
    position: relative; /* Ovo omogućava da se ikona katanca pozicionira relativno u odnosu na thumbnail */
}

.locked-training .wpgb-card-media-thumbnail::before {
    content: "\f023"; /* Font Awesome kod za ikonu katanca */
    font-family: "Font Awesome 5 Free"; /* Font za ikonu */
    font-weight: 900; /* Podebljana ikona */
    font-size: 48px; /* Veličina ikone */
    color: rgba(255, 255, 255, 0.8); /* Boja katanca */
    position: absolute;
    top: 40%; /* Malo iznad centra */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Prikazujemo ikonu iznad svega */
}
.locked-training .wpgb-card-media-thumbnail::after {
    content: "Dostupno samo za registrovane korisnike"; /* Tekst ispod katanca */
    font-family: Arial, sans-serif; /* Font za tekst */
    font-size: 16px; /* Veličina teksta */
    color: rgba(255, 255, 255, 0.9); /* Boja teksta */
    position: absolute;
    top: 55%; /* Malo ispod ikone */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Prikazujemo tekst iznad svega */
    text-align: center; /* Poravnanje teksta */
    width: 100%; /* Širina teksta */
    padding: 5px; /* Prostor oko teksta */
}

.locked-training .wpgb-card-media-overlay {
    background-color: rgba(0, 0, 0, 0.3) !important; /* Tamni overlay sa 30% transparentnosti */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Pozicioniranje iza ikone katanca i teksta */
	opacity:1 !important;
}


.wishlist-container {
    position: absolute;
    top: 0px;
    right: 24px;
}
.wishlist-toggle {
	background: none;
	border: none;
	cursor: pointer;
}
.wishlist-toggle .fa-heart {
    color: #ffffff;
    font-size: 24px;
    transition: color .3s;
}
.page-id-99 .wishlist-toggle .fa-regular.fa-heart {
	display:none;
}
.page-id-99 .wishlist-toggle .fa-regular.fa-heart.wishlist-active {
	display:block;
	
}
.wishlist-toggle .fa-heart.wishlist-active {
    color: #ffffff;
}
.single .wishlist-toggle .fa-heart.wishlist-active {
    color: #E08B63;
}
.wishlist-toggle .fa-heart {
    color: #E08B63;
}
.wishlist-toggle .fa-heart {
    display:none;
}
.wishlist-toggle .fa-heart.wishlist-active {
    display:block;
}
.single .wishlist-toggle.wishlist-active .fa-heart {
    display:block;
}
.single .wishlist-toggle .fa-heart.fa-regular {
    display:block;
}
.page-id-744 .wp-grid-builder .wpgb-card-24 .wishlist-container {
    position: absolute;
    top: -28px;
    left: -291px;
}
.page-id-744 .wp-grid-builder .wpgb-card-24 .wishlist-toggle .fa-heart {
    font-size: 19px;
}
.wp-grid-builder .wpgb-card-24 .wpgb-block-10 {
    border-width: 0 !important;
}
.page-id-744 .wp-grid-builder .wpgb-card-24 .wishlist-toggle .fa-heart.wishlist-active {
    color: #ffffff;
}

.page-id-99 .wishlist-container {
    position: absolute;
    top: -28px;
    left: -68px;
    right: unset;
}
.page-id-99 .wishlist-container .fa-heart:before {
    font-size: 22px;
}
/*---------------------------
CSS Filters
---------------------------*/
.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}
/*---------------------------
Transition Classes
---------------------------*/
/*---------------------------
Animation Classes 
---------------------------*/
/*--------------------------- 
Responsive CSS here 
*
*   Remember these queries are a good start
*   but media queries go much deeper than this.
*
---------------------------*/
/*
Medium/Large Screens 
*/
@media only screen and (max-width: 1430px) {
    
}
/*
Medium Screens 
*/
@media only screen and (max-width: 1280px) {
    
}
/*
Large Tablet Screens 
*/
@media only screen and (max-width: 980px) {
    
}
/*
Medium Tablet Screens 
*/
@media only screen and (max-width: 768px) {
	.user-menu-dropdown {
        margin-left: 5px;
    }

    .dropdown-toggle svg {
        width: 14px;
        height: 14px;
    }

    .dropdown-menu {
        min-width: 100px;
    }

}
/*
Small Tablet/Largest Phone Screens 
*/
@media only screen and (max-width: 600px) {
    
}
/*
Large Phone Screens 
*/
@media only screen and (max-width: 420px) {
    
}
/*
Medium Phone Screens 
*/
@media only screen and (max-width: 380px) {
    
}
/*
Small Phone / Apple Watch Screens 
*/
@media only screen and (max-width: 320px) {
    
}

#site-header .user-menu-dropdown {
    position: relative;
    display: inline-block;
    margin-left: 10px; /* Razmak između korisničkog dugmeta i dropdown menija */
}

#site-header .dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0 5px;
    display: flex;
    align-items: center;
}

#site-header .dropdown-toggle i {
    color: #333; /* Boja ikonice */
    font-size: 18px; /* Veličina ikonice */
}

#site-header .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    min-width: 120px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    border-radius: 4px;
}

#site-header .dropdown-menu.show {
    display: block;
}

#site-header .dropdown-menu .dropdown-item {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333333;
}

#site-header .dropdown-menu .dropdown-item:hover {
    background-color: #f1f1f1;
    color: #000000;
}

#site-header .user-menu-dropdown .dropdown-toggle:focus {
    outline: none;
}
.dropdown-menu {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

.dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
}