/*
========================================
FOUC PREVENCIJA - COMPARE SEKCIJA
========================================
Sprečava "flash" ring-a i overlay-a pre inicijalizacije.
Rešava problem kada se ring i overlay ne pojave tokom Barba.js tranzicija.
*/

/* INICIJALNO: Sakrij ring i overlay dok JavaScript ne postavi 'compare-ready' klasu */
body:not(.compare-ready) .cmp-section .ring,
body:not(.compare-ready) .cmp-section .over {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* KADA JE SPREMNO: Prikaži ring i overlay */
body.compare-ready .cmp-section .ring,
body.compare-ready .cmp-section .over {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease, visibility 0s;
}

/*
========================================
COMPARE SEKCIJA - OSNOVNI KONTEJNER
========================================
*/
.cmp-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
}

/*
========================================
CMP WRAPPER - GLAVNI CONTAINER
========================================
*/
.cmp {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #eee;
}

/*
========================================
SLIKE - BASE I OVERLAY
========================================
Dve slike koje se overlapuju.
Overlay slika se otkriva putem clip-path-a.
*/
.cmp .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/*
========================================
OVERLAY DIV - CLIP-PATH CONTAINER
========================================
Ovaj div se koristi za clip-path efekat.
JavaScript dinamički menja clip-path vrednost.
*/
.over {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

/*
========================================
RING - INDIKATOR POZICIJE
========================================
Beli krug koji prati poziciju miša/touch-a.
*/
.ring {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    border: 8px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    /*Pomeramo ceo krug za pola njegove širine/visine unazad.
    Sada će x,y koordinate koje pošaljemo iz JS-a biti TAČNO u centru kruga. */
    transform-origin: center center;
    transform: translate(-50%, -50%);    
    will-change: transform, width, height;
    z-index: 10;
}

.cmp-links {
    position: absolute;
    /* bottom: 22%; */
    left: 5%;
    z-index: 4;
}

.digital-link {
    display: flex;
    align-items: center;
    color: #E8235B;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

.digital-link span {
    margin-right: 10px;
}
.digital-link .button-icon {   
    width: 25px; 
    height: 25px; 
    transition: transform 0.8s ease;
    flex-shrink: 0;
    margin-bottom: 5px; 
}
.digital-link:hover .button-icon {
    transform: rotate(90deg);
}

.cmp-expertise {
    position: absolute;
    top: 28%;
    right: -6%;
    transform-origin: 50% 50%;
    transform: translateY(-50%) rotate(-90deg);
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 4;
    display: none; /* Sakriven na mobilnom */
}

.cmp-section .cairon-container {
    position: absolute;
    left: 50%;
    /* bottom: -2%; */
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
}

/* samsung, android, ios*/
@media (max-width: 767px) {
    .android-device .cmp-section .cairon-container {
        bottom: 4.3vh;
    }
    .android-device .cmp-section .cmp-links {
        bottom: 27.5vh;
    }

    .ios-device .cmp-section .cairon-container {
        bottom: 0.4vh;
    }
    .ios-device .cmp-section .cmp-links {
        bottom: 23vh;
    }

    .samsung-browser .cmp-section .cairon-container {
        bottom: 8vh;
    }
    .samsung-browser .cmp-section .cmp-links {
        bottom: 32vh;
    }
}

@media (min-width: 768px) {   
    .cmp-links {
        bottom: 20%;
        left: 5%;
    }
   
    .digital-link {
        font-size: 30px;
    }
    .digital-link .button-icon {   
        width: 43px; 
        height: 43px; 
    }    
   
    .cmp-expertise {
        display: block;
    }   
}
@media (min-width: 992px) {
    .cmp-links {
        bottom: 30%;
        left: 10%;
    }
    .cmp-expertise {
        right: -3.5%;
    }
}
@media (min-width: 1025px) {   
    .cmp-section .cairon-container {        
        bottom: 2%;
    }
     .cmp-links {
        bottom: 34%;
        left: 10%;
    }
    .digital-link {
        font-size: 34px;
    }
    .digital-link .button-icon {   
        width: 53px; 
        height: 53px; 
        margin-bottom: 0px;
    }
     .cmp-expertise {
        right: -2.5%;        
    }
}

@media (min-width: 1400px) {
    .cmp-section .cairon-container {
        bottom: -2%;
    } 
    .cmp-expertise {
        right: -4.5%;
        font-size: 27px;
    }   
}
@media (min-width: 1500px) {
    .cmp-section .cairon-container {
        bottom: -4%;
    }
}
@media (min-width: 1600px) {
    .cmp-section .cairon-container {
        bottom: -3%;
    }
    .digital-link {
        font-size: 40px;
    }
    .cmp-expertise {
        right: -3.5%;
    }
}
@media (min-width: 1920px) {
    .cmp-section .cairon-container {
        bottom: 0%;
    }
}
@media (min-width: 2560px) {
    .cmp-expertise {
        right: -2.5%;
    }
}