/* ========================================
   Design Tokens
   Globalne varijable dizajna (boje, gradienti itd.)
======================================== */

:root {
	/* --gradient-primary: linear-gradient(90deg, #9333ea, #ec4899); */
	--gradient-primary: linear-gradient(90deg, #F58EAD, #D289FF);
}



/* ========================================
   Utilities
   Male reusable klase koje se koriste svuda
======================================== */

/* Gradient background */

.bg-gradient-primary {
	background: var(--gradient-primary);
}


/* Gradient text */

.text-gradient-primary {
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* Gradient button */

.btn-gradient {
	background:var(--gradient-primary);
	color:#fff;
	border:none;
}

.btn-gradient:hover {
	opacity: .9;
	color: #fff;
}


/* Social icons */

.social-btn {
	width: 45px;
	height: 45px;
}

body{
padding-top:80px;
}

/* ========================================
   Navbar
======================================== */

/* LIGHT */
.navbar {
    background: var(--bs-body-bg);
    /* backdrop-filter: blur(10px); */
}

/* dark */
[data-bs-theme="dark"] .navbar {
    background: var(--bs-secondary-bg);
}

.navbar{
height:80px;
}

#hero,
#why-us,
#free-trial,
#faq {
    scroll-margin-top: 100px;
}

.navbar .container{
height:100%;
}

.navbar-nav .nav-link {
    transition: color .2s ease;
	font-size: 18px;        /* bilo ~14px */
    font-weight: 600;
    padding: 0 14px;     
}

.navbar-nav .nav-link:hover {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dropdown-menu{
border-radius:10px;
border:1px solid var(--bs-border-color);
box-shadow:0 10px 30px rgba(0,0,0,.08);
padding:10px 0;
}

.navbar-toggler {
    border-color: var(--bs-border-color);
}

@media (max-width: 991px){

    .navbar-collapse{
        background: var(--bs-body-bg);
        padding: 20px;
        margin-top: 10px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

}

/* =========================
   PREMIUM TOGGLE (DRIBBBLE STYLE)
========================= */

.theme-toggle {
    display: flex;
    align-items: center;
}

/* sakriven checkbox */
#darkToggle {
    display: none;
}

/* wrapper */
.toggle-label {
    width: 64px;
    height: 28px;
    background: var(--bs-body-secondary);
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    transition: all 0.3s ease;
}

/* dark bg */
body[data-bs-theme="dark"] .toggle-label {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

/* BALL */
.toggle-label .ball {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    top: 1px;
    left: 2px;
    transition: all 0.35s cubic-bezier(.68,-0.55,.27,1.55);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);

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

/* IKONE UNUTAR BALL */
.toggle-label .ball i {
    position: absolute;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* SUN default */
.toggle-label .ball .sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #f59e0b;
}

/* MOON hidden */
.toggle-label .ball .moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
    color: #60a5fa;
}

/* DARK MODE */
#darkToggle:checked + .toggle-label .ball {
    transform: translateX(32px);
}

/* 🔥 SAMO DARK MODE kuglica svetlija */
body[data-bs-theme="dark"] #darkToggle:checked + .toggle-label .ball {
    background: #f9fafb;
}

/* ICON SWITCH */
#darkToggle:checked + .toggle-label .ball .sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

#darkToggle:checked + .toggle-label .ball .moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* hover */
.toggle-label:hover {
    transform: scale(1.05);
}

/* optional: svetlija pozadina u light modu */
body[data-bs-theme="light"] .toggle-label {
  background: #ccc;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

#siteLogo {
    transition: opacity 0.2s ease;
}


/* ========================================
   Footer
======================================== */

/* svi linkovi u footeru */

footer a{
color:rgba(255,255,255,.7);
text-decoration:none;
transition:.2s;
}

footer a:hover{
color:#fff;
}

/* liste u footeru */

footer ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

footer li {
	margin-bottom: 8px;
}


/* kontakt lista (malo lepši razmak) */

.footer-contact li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-contact a{
color:rgba(255,255,255,.7);
}

.footer-contact a:hover{
color:#fff;
}



/* ========================================
   Sections
   Stilovi specifični za sekcije stranice
======================================== */

/* ========================================
   HERO VIDEO
======================================== */

.hero-video{
    /* padding: 40px 0; */
    background: var(--bs-body-bg);
}

/* uklanja bootstrap padding da bude full širina */
.hero-video .container{
    padding-left: 0;
    padding-right: 0;
}

/* wrapper */
.hero-video-inner{
    position: relative;
    width: 100%;
    overflow: hidden;
    /* border-radius: 16px; */
    box-shadow: 0 25px 70px rgba(0,0,0,0.15);
}

/* video */
.hero-video-bg{
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width:768px){

    .hero-video{
        padding: 20px 0;
    }

    .hero-video-inner{
        border-radius: 12px;
    }

}

/* ========================================
   Services
======================================== */

.service-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	cursor: pointer;
}

.service-card img {
	transition: transform .4s;
}

.service-card:hover img,
.service-card:hover canvas {
	transform: scale(1.05);
}

.service-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

/* .service-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
} */

.spin-container {
    width: 100%;
    aspect-ratio: 4 / 3; /* 🔥 svi isti */
    overflow: hidden;
    border-radius: 12px;
    background: #f3f4f6;
}

.spin-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 ključ */
}


/* ========================================
   Why us
======================================== */

.why-card{
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
transition:all .3s ease;
}

.why-card:hover{
transform:translateY(-6px);
/* box-shadow:0 18px 40px rgba(0,0,0,.08); */
box-shadow:0 12px 12px rgba(0,0,0,.20);
}

.why-icon{
width:56px;
height:56px;
border-radius:10px;
background:var(--gradient-primary);
color:white;
font-size:22px;
}

/* ========================================
   Metrics
======================================== */

.trial-card{
background: var(--bs-body-secondary);
border-radius:10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition:all .25s ease;
}

.trial-card:hover{
background: var(--bs-tertiary-bg);
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
transform: translateY(-4px);
}

/* ========================================
   Carousel
======================================== */

.product-carousel{
max-width:1100px;
/* height: 560px; */
margin:auto;
overflow:hidden;
}

.product-slide img{
width:100%;
height:auto;
max-height:560px;
object-fit:contain;
}

.swiper-wrapper{
align-items:center;
}

.swiper-slide{
/* width:50%; */
display:flex;
justify-content:center;
}

.product-slide{
transition:all .4s ease;
/* opacity:.4; */
transform:scale(.9);
/* filter:blur(2px); */
}


.swiper-slide-active .product-slide{
opacity:1;
transform:scale(1.05);
filter:none;
z-index:2;
}



.swiper-button-prev,
.swiper-button-next{
width:50px;
height:50px;
background:white;
border-radius:50%;
box-shadow:0 8px 20px rgba(0,0,0,.1);
color:#333;
transition:all .3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover{
transform:scale(1.15);
color:#D289FF;
}

.swiper-pagination-bullet{
cursor:pointer;
}

.swiper-button-prev:after,
.swiper-button-next:after{
font-size:22px;
font-weight:bold;
}


.swiper-pagination-bullet{
width:25px;
height:6px;
border-radius:10px;
background:#d1d5db;
opacity:1;
transition:.3s;
}

.swiper-pagination-bullet-active{
background:var(--gradient-primary);
width:40px;
}

@media (max-width: 768px){

	.product-carousel{
        padding: 0 12px;
    }


    .product-slide img{
		width:100%;
        height: auto;
        max-height: 70vh;
    }

    .product-slide{
        transform: scale(1);
        opacity: 1;
		filter: none;
    }
	.product-slide{
		max-width: 90%;
	}

	.swiper-slide-active .product-slide{
        transform: scale(1.08);
    }

	.swiper-button-prev,
    .swiper-button-next{
        display:none;
    }
	

}




/* ========================================
   FAQ
======================================== */

.accordion-button:not(.collapsed){
    background-color: var(--bs-body-bg);

    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.accordion-button::after{
    filter: grayscale(1);
    transition: .2s;
}

.accordion-button:not(.collapsed)::after{
    filter: none;
    background-image: var(--gradient-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.accordion-item{
/* background:#f8f9fb; */
border-radius:10px;
box-shadow:0 6px 16px rgba(0,0,0,.05);
overflow:hidden;
}

.accordion-button:focus{
box-shadow:none;
border-color:transparent;
}

.accordion-button::after{
transform:scale(.7);
}


/* =========================
   DARK MODE (Bootstrap friendly)
========================= */

body.dark-mode {
    background-color: #0f172a;
    color: #e5e7eb;
}

body.dark-mode section {
    background-color: #0f172a;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #f9fafb;
}

body.dark-mode p {
    color: #d1d5db;
}

/* navbar */
body.dark-mode .navbar {
    background: rgba(43,48,53,1);
}

.navbar-nav .nav-link {
    color: var(--bs-body-color);
    transition: color .2s ease;
}

/* kartice */
body.dark-mode .service-card,
body.dark-mode .why-card,
body.dark-mode .trial-card {
    /* background: #111827; */
    color: #e5e7eb;
}

/* accordion */
body.dark-mode .accordion-item {
    background: #111827;
    color: #e5e7eb;
}

/* dropdown */
body.dark-mode .dropdown-menu {
    background: #111827;
    border-color: #1f2937;
}

/* footer NE DIRAMO (već je dark ✔) */

/* slider bg */
body.dark-mode .spin-slider {
    background: #374151;
}


.lang-switch{
    position: relative;
    color: var(--bs-body-color);
    font-weight: 600;
    padding: .25rem .5rem;
    border: 0;
    box-shadow: none !important;
}

.lang-switch:hover,
.lang-switch:focus,
.lang-switch.show{
    color: var(--bs-body-color);
    text-decoration: none;
}

/* underline */
.lang-switch::after{
    /* Bootstrap strelica ostaje jer je dropdown-toggle */
}

/* napravimo posebnu liniju */
.lang-switch::before{
    content:'';
    position:absolute;
    left:8px;
    right:22px; /* ostavlja mesta za strelicu */
    bottom:-2px;
    height:2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin:left;
    transition:.25s ease;
}

.lang-switch:hover::before,
.lang-switch.show::before{
    transform: scaleX(1);
}

/* Aktivni jezik u dropdown-u */
.dropdown-item.active,
.dropdown-item:active {
    background: var(--gradient-primary);
    color: #fff;
}

/* Hover na ostalim jezicima */
.dropdown-item:hover {
    background: var(--bs-secondary-bg);
}