/* --------------------------------------------------
   GLOBAL BACKGROUND
-------------------------------------------------- */

html{
    background:#fcfbf9;
}

body{
    background:linear-gradient(135deg,#fcfbf9 0%,#f8f5f1 100%);
    position:relative;
}

/* Lijevi mali transparentni trokut */

body::before{

    content:"";

    position:fixed;

    left:0;
    bottom:0;

    width:18vw;
    height:55vh;

    background:rgba(244,239,232,.75);

    clip-path:polygon(
        0 100%,
        0 0,
        100% 100%
    );

    z-index:-30;

    pointer-events:none;

}


/* Donji desni veliki poligon */

body::after{

    content:"";

    position:fixed;

    right:0;
    bottom:0;

    width:45vw;
    height:45vw;

    background:#f3ece5;

    clip-path:polygon(100% 0,
                      100% 100%,
                      0 100%);

    z-index:-29;

    pointer-events:none;

}


/* Gornji desni poligon */

.elementor::before{

    content:"";

    position:fixed;

    top:0;
    right:0;

    width:11vw;
    height:20vw;

    background:#e7d4bd;

    clip-path:polygon(100% 0,
                      100% 100%,
                      0 55%);

    z-index:-28;

    pointer-events:none;

}


/* papir efekt */

body{

    background-image:
        linear-gradient(135deg,#fcfbf9,#f8f5f1),
        linear-gradient(45deg,
        rgba(179,154,129,.03) 0,
        rgba(179,154,129,.03) 1px,
        transparent 1px);

    background-size:
        auto,
        90px 90px;

}
body,
#page,
.elementor,
.elementor-location-single,
.elementor-location-archive,
.elementor-location-header,
.elementor-location-footer{
    background:transparent !important;
}
#n2-ss-2,
#n2-ss-2 .n2-ss-slider-1,
#n2-ss-2 .n2-ss-slider-2,
#n2-ss-2 .n2-ss-slider-3 {
    height: calc(100dvh - 120px) !important;
}

@media (min-width: 768px) {
    .page-title-box {
        width: fit-content !important;
        min-width: 27% !important;
        max-width: 70% !important;
        flex: 0 1 auto !important;
        box-sizing: border-box;
        align-items: center !important;
        justify-content: center !important;
    }

    .page-title-box > .elementor-widget-heading {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .page-title-box .elementor-heading-title {
        margin: 0;
        overflow-wrap: break-word;
        word-break: normal;
    }
}

@media (max-width: 767px) {
    .page-title-box {
        min-width: 70% !important;
        max-width: 90% !important;
    }

    .page-title-box > .elementor-widget-heading {
        width: 100%;
        text-align: center;
    }
}

/* dodavanje boje na news kategorije */
.category-hotel-antunovic-zagreb .elementor-widget-post-info .elementor-post-info__terms-list-item {
    background-color: #a01639;
    color: #ffffff;
    padding: 6px 14px;
    display: inline-block;
}
.category-antunovic-hotel-east .elementor-widget-post-info .elementor-post-info__terms-list-item {
    background-color: #bd9c48;
    color: #ffffff;
    padding: 6px 14px;
    display: inline-block;
}

/* Skrivanje gumba menija kad je prazan */
.acf-day-button:has(.elementor-button:not([href])) {
    display: none !important;
}

.main-nav-stretch > li > a {
    font-size: clamp(13px, 1vw, 16px) !important;
}


/* ========================================
   AH CAROUSEL — OSNOVNI IZGLED
   ======================================== */

.ah-carousel {
    overflow: visible;
}

.ah-carousel .swiper {
    overflow: visible !important;
}

.ah-carousel .swiper-slide {
    opacity: .5;
    transform: scale(.86);
    transition:
        opacity .4s ease,
        transform .4s ease;
    z-index: 1;
}

/* Reset prethodnog isticanja */
.ah-carousel .swiper-slide-active,
.ah-carousel .swiper-slide-next {
    opacity: .5;
    transform: scale(.86);
    z-index: 1;
}

/* Povećaj TREĆI slajd od pet vidljivih */
.ah-carousel .swiper-slide-active
+ .swiper-slide
+ .swiper-slide {
    opacity: 1;
    transform: scale(1.08);
    z-index: 5;
}

/* Fotografije */
.ah-carousel .swiper-slide img {
    display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}


/* ========================================
   AH CAROUSEL — STRELICE
   ======================================== */

.ah-carousel .elementor-swiper-button {
    color: #000 !important;
    background: rgba(255, 255, 255, .96);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
    opacity: 1 !important;
    z-index: 20;
}

.ah-carousel .elementor-swiper-button i,
.ah-carousel .elementor-swiper-button svg {
    color: #000 !important;
    fill: #000 !important;
    font-size: 25px;
    width: 25px;
    height: 25px;
}

/* 30 px od rubova */
.ah-carousel .elementor-swiper-button-prev {
    left: 30px !important;
}

.ah-carousel .elementor-swiper-button-next {
    right: 30px !important;
}


/* ========================================
   AH CAROUSEL — MOBITELI
   ======================================== */

@media (max-width: 767px) {

    .ah-carousel .swiper-slide img {
        height: 440px;
    }

    .ah-carousel .swiper-slide {
        transform: scale(.92);
    }

    /* Srednja slika na mobitelu */
    .ah-carousel .swiper-slide-active
    + .swiper-slide {
        opacity: 1;
        transform: scale(1);
        z-index: 5;
    }

    .ah-carousel .elementor-swiper-button {
        width: 46px;
        height: 46px;
    }

    .ah-carousel .elementor-swiper-button i,
    .ah-carousel .elementor-swiper-button svg {
        font-size: 23px;
        width: 23px;
        height: 23px;
    }

    .ah-carousel .elementor-swiper-button-prev {
        left: 12px !important;
    }

    .ah-carousel .elementor-swiper-button-next {
        right: 12px !important;
    }
}

/* AH Carousel — popravi izblijedjele slike na mobitelu */
@media (max-width: 767px) {

    .ah-carousel .swiper-slide,
    .ah-carousel .swiper-slide-active,
    .ah-carousel .swiper-slide-next,
    .ah-carousel .swiper-slide-prev {
        opacity: 1 !important;
    }

    .ah-carousel .swiper-slide img {
        filter: none !important;
    }
}

html, body {
    overflow-x: clip;
}