/**
 * DS Kerempuh Slider - Frontend Styles
 */

/* Outer Wrapper */
.ds-slider-outer-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0px !important;
}

/* Main Wrapper */
.ds-kerempuh-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0px !important;
        -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    background-color: #000;
}

/* Full-width opcija - samo kad je eksplicitno zadano */
.ds-kerempuh-slider-wrapper.full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Swiper Slide */
.ds-kerempuh-slider-wrapper .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Creative effect - Fade + Slide animacija */
.ds-kerempuh-slider-wrapper.swiper-creative .swiper-slide {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.ds-kerempuh-slider-wrapper.swiper-creative .swiper-slide-active {
    opacity: 1;
}

/* Background Image */
.ds-kerempuh-slider-wrapper .slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Overlay */
.ds-kerempuh-slider-wrapper .swiper-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Content Container - AŽURIRANO ZA FLEXBOX */
.ds-kerempuh-slider-wrapper .slide-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ds-kerempuh-slider-wrapper .slide-content-inner {
    max-width: 75%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;

}

/* Slide Predstava Container - NOVI FLEXBOX LAYOUT */
.ds-kerempuh-slider-wrapper .slide-predstava {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
}


.dani-satire-slider-center .ds-kerempuh-slider-wrapper .slide-content-inner {
    margin: 0 auto !important;
    }



 .dani-satire-slider-center .ds-kerempuh-slider-wrapper .slide-main-content {
    margin-top: 5vh !important;
}


 .dani-satire-slider-center .ds-kerempuh-slider-wrapper .slide-subtitle {
    margin-top: 10px;
    margin-bottom: 30px;
}





@media only screen and (min-width: 1000px) {
 .dani-satire-slider-center .ds-kerempuh-slider-wrapper .swiper-pagination {
    margin-top: 6px;
}
}
@media only screen and (max-width: 1000px) {
 .dani-satire-slider-center .ds-kerempuh-slider-wrapper .slide-title {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}
 .dani-satire-slider-center .ds-kerempuh-slider-wrapper .slide-main-content {
    margin-top: 2.4vh !important;
}


.dani-satire-slider-center .slide-content {
    padding-bottom: 30px !important;
}


 .dani-satire-slider-center .swiper-pagination{
    margin-top: 22px !important;
}




}





/* Autor teksta - POZICIONIRAN NA VRH */
.ds-kerempuh-slider-wrapper .slide-author {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    order: -1;
    margin-bottom: auto;
    padding-top: 40px;
}

/* Glavni sadržaj wrapper */
.ds-kerempuh-slider-wrapper .slide-main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}


@media only screen and (min-width: 1000px) {
  .ds-kerempuh-slider-wrapper .slide-main-content {
    margin-top: 20vh;
}
}





/* Title */
.ds-kerempuh-slider-wrapper .slide-title {
    margin: 0 0 20px 0;
    line-height: 0.9;
    text-transform: uppercase;
    text-align: left;
}

.ds-kerempuh-slider-wrapper .slide-title a {
    text-decoration: none;
    color: inherit;
    display: inline-block; /* Ključno za transform */
    transition: transform 0.3s ease; /* Animacija za povećanje */
}

.ds-kerempuh-slider-wrapper .slide-title a:hover {
    transform: scale(1.01); /* Povećaj za 5% */
}

/* Subtitle */
.ds-kerempuh-slider-wrapper .slide-subtitle {
    margin-top: 40px;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0px 30px;
    flex-wrap: wrap;
    font-weight: 600;
    text-transform: uppercase;
}

/* NOVI STILOVI ZA DVA REDA */
.ds-kerempuh-slider-wrapper.schedule-two-lines .slide-subtitle {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.ds-kerempuh-slider-wrapper.schedule-two-lines .subtitle-label {
    width: 100%;
    margin-bottom: 5px;
}

.ds-kerempuh-slider-wrapper.schedule-two-lines .subtitle-date-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
}

/* KOMBINACIJA: CENTRIRANO + DVA REDA */
.ds-kerempuh-slider-wrapper.content-centered.schedule-two-lines .slide-subtitle {
    align-items: center;
}

.ds-kerempuh-slider-wrapper.content-centered.schedule-two-lines .subtitle-label {
    text-align: center;
}

.ds-kerempuh-slider-wrapper.content-centered.schedule-two-lines .subtitle-date-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px; /* Veći razmak između stupaca kad je centrirano */
    width: 100%;
}

.ds-kerempuh-slider-wrapper.content-centered.schedule-two-lines .subtitle-date,
.ds-kerempuh-slider-wrapper.content-centered.schedule-two-lines .slide-duration {
    flex: 0 0 auto; /* Ne širiti elemente */
}

/* Subtitle elementi */
.ds-kerempuh-slider-wrapper .subtitle-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: inherit;
}

.ds-kerempuh-slider-wrapper .subtitle-date {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: inherit;
}

/* Duration */
.ds-kerempuh-slider-wrapper .slide-duration {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    text-transform: uppercase;
}

/* Ikonica trajanja */
.ds-kerempuh-slider-wrapper .duration-icon,
.ds-kerempuh-slider-wrapper .slide-duration img.duration-icon,
.ds-kerempuh-slider-wrapper img.duration-icon {
    width: 12px !important;
    height: 18px !important;
    filter: brightness(0) invert(1);
    display: inline-block;
    vertical-align: middle;
}

/* Excerpt */
.ds-kerempuh-slider-wrapper .slide-excerpt {
    margin: 0 0 40px 0;
    padding-bottom: 40px;
    max-width: 600px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

/* Buttons Container */
.ds-kerempuh-slider-wrapper .slide-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    position: relative;
    z-index: 5;
}

/* Buttons */
.ds-kerempuh-slider-wrapper .btn-raspored,
.ds-kerempuh-slider-wrapper .btn-kupi,
.ds-kerempuh-slider-wrapper .btn-saznaj {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    transition: transform 0.3s ease;
    border: 2px solid transparent;
    padding: 14px 20px !important
}






.ds-kerempuh-slider-wrapper .btn-raspored:hover,
.ds-kerempuh-slider-wrapper .btn-kupi.active:hover,
.ds-kerempuh-slider-wrapper .btn-saznaj:hover {
    transform: scale(1.05);
}

.ds-kerempuh-slider-wrapper .btn-kupi.disabled {
    pointer-events: none;
}



/* OTKAZANO blinking animation */
.ds-kerempuh-slider-wrapper .btn-kupi.disabled.otkazano {
    animation: colorFlip 0.8s infinite;
    border: 2px solid #000 !important;
}

@keyframes colorFlip {
    0%, 50% {
        background: #000;
        color: #fff;
        border-color: #000;
    }
    51%, 100% {
        background: #fff;
        color: #000;
        border-color: #000;
    }
}


/* CENTRIRANJE - kada je opcija uključena */
.ds-kerempuh-slider-wrapper.content-centered .slide-content-inner {
    text-align: center;
}

.ds-kerempuh-slider-wrapper.content-centered .slide-author {
    text-align: center;
}

.ds-kerempuh-slider-wrapper.content-centered .slide-title {
    text-align: center;
}

.ds-kerempuh-slider-wrapper.content-centered .slide-subtitle {
    justify-content: center;
    text-align: center;
}

.ds-kerempuh-slider-wrapper.content-centered .slide-excerpt {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.ds-kerempuh-slider-wrapper.content-centered .slide-buttons {
    justify-content: center;
}

/* SAKRIJ RASPORED - kada je opcija uključena */
.ds-kerempuh-slider-wrapper.hide-schedule .slide-subtitle {
    display: none;
}



/* PAGINATION WRAPPER */
.ds-kerempuh-slider-wrapper .swiper-pagination-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    z-index: 10;
    pointer-events: none;
    padding-bottom: 40px;
}

/* Pagination */
.ds-kerempuh-slider-wrapper .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    pointer-events: all;
}

.ds-kerempuh-slider-wrapper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 1) !important;
    margin: 0 !important;
    position: relative;
    border-radius: 50% !important;
    transition: none;
}

/* Aktivni bullet - počinje kao tockica */
.ds-kerempuh-slider-wrapper .swiper-pagination-bullet-active {
    opacity: 1 !important;
    height: 8px !important;
    width: 8px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    position: relative;
    overflow: visible;
}

/* Progress bar koji se rasteze desno */
.ds-kerempuh-slider-wrapper .swiper-pagination-bullet-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
    transform-origin: left center;
    will-change: width, border-radius;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Animacija - rastezanje desno */
.ds-kerempuh-slider-wrapper .swiper-pagination-bullet-active.animating::after {
    transition: width linear, border-radius linear;
    width: 40px; /* 8px bullet + 22px gap + 16px do centra sljedeće tockice */
    border-radius: 4px;
}


.ds-kerempuh-slider-wrapper .swiper-pagination-bullet-active.shrinking::after {
    transition: width 150ms ease-out, left 150ms ease-out;
    width: 8px;
    left: 31px; /* Također smanji left */
}


/* Force repaint kada se dogodi problem */
.ds-kerempuh-slider-wrapper .swiper-pagination-bullet-active.animating::after,
.ds-kerempuh-slider-wrapper .swiper-pagination-bullet-active.shrinking::after {
    /* Force GPU rendering */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}




@media (hover: none) and (pointer: coarse) {
    .ds-kerempuh-slider-wrapper .swiper-slide {
        -webkit-tap-highlight-color: transparent;
    }
}


/* Navigation Arrows */
.ds-kerempuh-slider-wrapper .swiper-button-prev,
.ds-kerempuh-slider-wrapper .swiper-button-next {
    color: #ffffff;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.ds-kerempuh-slider-wrapper .swiper-button-prev:hover,
.ds-kerempuh-slider-wrapper .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.5);
}

.ds-kerempuh-slider-wrapper .swiper-button-prev:after,
.ds-kerempuh-slider-wrapper .swiper-button-next:after {
    font-size: 20px;
}

/* Empty State */
.ds-kerempuh-slider-empty {
    padding: 60px 20px;
    text-align: center;
    background: #f5f5f5;
    color: #666;
    font-size: 16px;
}

/* Tablet Responsive */
@media (min-width: 768px) and (max-width: 1024px) {
    .ds-kerempuh-slider-wrapper .slide-author {
        padding-top: 30px;
    }

    .ds-kerempuh-slider-wrapper .slide-title {
        font-size: 48px !important;
    }

    .ds-kerempuh-slider-wrapper .slide-subtitle {
        font-size: 16px !important;
    }

    /* Smanji razmak između stupaca na tabletu */
    .ds-kerempuh-slider-wrapper.content-centered.schedule-two-lines .subtitle-date-wrapper {
        gap: 40px;
    }

    .ds-kerempuh-slider-wrapper .swiper-pagination-wrapper {
        height: 70px;
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .ds-kerempuh-slider-wrapper .slide-author {
        padding-top: 0px;
        line-height: 1.1;
    }

    .ds-kerempuh-slider-wrapper .slide-duration {
        margin-left: 0px;
        margin-top: -6px;
    }
.ds-kerempuh-slider-wrapper .slide-subtitle {
    margin-top: 20px;
}


    .ds-kerempuh-slider-wrapper .slide-subtitle {
        margin-bottom: 35px;
    }

    /* Na mobilnim uređajima automatski prikaži u dva reda */
    .ds-kerempuh-slider-wrapper.schedule-two-lines .slide-subtitle,
    .ds-kerempuh-slider-wrapper .slide-subtitle {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
.ds-kerempuh-slider-wrapper .subtitle-label {
    margin-bottom: -4px;
}
    .ds-kerempuh-slider-wrapper.schedule-two-lines .subtitle-date-wrapper,
    .ds-kerempuh-slider-wrapper .subtitle-date-wrapper {
        align-items: center;
        gap: 20px;
    }

    /* Centrirano na mobitelu */
    .ds-kerempuh-slider-wrapper.content-centered.schedule-two-lines .subtitle-date-wrapper,
    .ds-kerempuh-slider-wrapper.content-centered .subtitle-date-wrapper {
        gap: 4px !important;
        flex-direction: column;
        justify-content: center;
    }

    .ds-kerempuh-slider-wrapper .duration-icon,
    .ds-kerempuh-slider-wrapper .slide-duration img.duration-icon,
    .ds-kerempuh-slider-wrapper img.duration-icon {
        width: 10px !important;
        height: 15px !important;
    }

    .ds-kerempuh-slider-wrapper .slide-buttons {
        gap: 10px;
    }

    .ds-kerempuh-slider-wrapper .btn-raspored,
    .ds-kerempuh-slider-wrapper .btn-kupi,
    .ds-kerempuh-slider-wrapper .btn-saznaj {
        font-size: 16px;
    }


.ds-kerempuh-slider-wrapper .btn-raspored,
.ds-kerempuh-slider-wrapper .btn-kupi,
.ds-kerempuh-slider-wrapper .btn-saznaj {
    padding: 6px 14px !important;
}



    .ds-kerempuh-slider-wrapper .swiper-pagination-wrapper {
        height: 60px;
    }

    .ds-kerempuh-slider-wrapper .swiper-button-prev,
    .ds-kerempuh-slider-wrapper .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .ds-kerempuh-slider-wrapper .swiper-button-prev:after,
    .ds-kerempuh-slider-wrapper .swiper-button-next:after {
        font-size: 16px;
    }
        .ds-kerempuh-slider-wrapper .slide-title {
        margin-bottom: 15px;
        line-height: 1 !important;
    }
}

@media (max-width: 480px) {
    .ds-kerempuh-slider-wrapper .slide-content {
        padding: 20px 15px;
    }

    .ds-kerempuh-slider-wrapper .slide-buttons {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }






    .ds-kerempuh-slider-wrapper .btn-raspored,
    .ds-kerempuh-slider-wrapper .btn-kupi,
    .ds-kerempuh-slider-wrapper .btn-saznaj {
        width: auto;
        flex: 0 0 auto;
        font-size: 15px;
           padding: 10px 20px;
        min-width: 150px !important;
        min-height: 42px !important;
        text-align: center !important;
    }

    .ds-kerempuh-slider-wrapper .swiper-pagination-wrapper {
        height: 50px;
    }
}

/* NOVA KLASA - SAKRIJ SUBTITLE LABEL */
.ds-kerempuh-slider-wrapper.hide-subtitle-label .subtitle-label {
    display: none !important;
}

/* Kada je sakrivena labela, prilagodi layout */
.ds-kerempuh-slider-wrapper.hide-subtitle-label .slide-subtitle {
    gap: 0px 30px;
}

/* Za dva reda i sakrivenu labelu */
.ds-kerempuh-slider-wrapper.schedule-two-lines.hide-subtitle-label .subtitle-date-wrapper {
    margin-top: 0;
}

/* Kombinacija: centriran + dva reda + sakrivena labela */
.ds-kerempuh-slider-wrapper.content-centered.schedule-two-lines.hide-subtitle-label .subtitle-date-wrapper {
    justify-content: center;
}






@media (min-width: 1000px) and (max-width: 1380px) {
    .ds-kerempuh-slider-wrapper .slide-content {
    padding: 30px 90px 30px 90px !important;
}
}







@media only screen and (max-width: 999px) {
 .ds-kerempuh-slider-wrapper .slide-content-inner {
    max-width: 90%;
}
.slide-title {
    margin-top: 100px !important;
}

.ds-kerempuh-slider-wrapper .slide-main-content {
    justify-content: flex-start;
}
}

@media screen and (min-width: 1000px) and (max-width: 1500px) {
.ds-kerempuh-slider-wrapper .slide-title a{
	font-size: 76px !important;
}
}

/* ========================================
   FALLBACK SLIDE - kada nema predstava
   ======================================== */

.ds-slider-fallback-wrapper {
    position: relative;
    width: 100%;
}

.ds-kerempuh-slider-fallback {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

.ds-kerempuh-slider-fallback .fallback-slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-kerempuh-slider-fallback .slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.ds-kerempuh-slider-fallback .swiper-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.ds-kerempuh-slider-fallback .slide-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ds-kerempuh-slider-fallback .slide-content-inner {
    max-width: 75%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ds-kerempuh-slider-fallback .fallback-title {
    margin: 0;
    line-height: 0.9;
    text-transform: uppercase;
    text-align: left;
}

/* Fallback centrirano */
.ds-kerempuh-slider-fallback.content-centered .slide-content-inner {
    text-align: center;
    margin: 0 auto;
}

.ds-kerempuh-slider-fallback.content-centered .fallback-title {
    text-align: center;
}

/* Fallback responsive - tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .ds-kerempuh-slider-fallback .slide-content-inner {
        max-width: 85%;
    }
}

/* Fallback responsive - mobile */
@media (max-width: 767px) {
    .ds-kerempuh-slider-fallback .slide-content-inner {
        max-width: 90%;
    }

    .ds-kerempuh-slider-fallback .fallback-title {
        line-height: 1 !important;
    }
}