/* /2025/paketi/paketi.css */

.adv-paketi-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 260ms ease, visibility 0ms linear 260ms;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.adv-paketi-overlay--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition: opacity 260ms ease, visibility 0ms linear 0ms;
}

.adv-paketi-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    opacity: 0;
    transition: opacity 320ms ease;
}
.adv-paketi-overlay--visible .adv-paketi-backdrop {
    opacity: 1;
}



.adv-paketi-popup {
    position: relative;
    z-index: 1;
    border-radius: 14px;
    padding: 22px 26px;
    max-width: 520px;
    width: 92%;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.7);
    color: #f9fafb;
    box-sizing: border-box;
	cursor:pointer;
}
.adv-paketi-popup:hover .adv-paketi-cta{
	    background: #52b159;
}



.adv-paketi-inner {
    max-width: 460px;
    margin: 0 auto;
}

.adv-paketi-packages strong {
    font-weight: 600;
    font-size: 22px;
    color: #ffbfab;
}

.adv-paketi-toprow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.adv-paketi-limited {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(248, 250, 252, 0.2);
    padding-bottom: 3px;
}

.adv-paketi-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 23px;
}

.adv-paketi-timer-icon {
    opacity: 0.85;
	margin-right:4px;
}

.adv-paketi-timer-value {
    font-variant-numeric: tabular-nums;
}

/* close button */

.adv-paketi-close {
    position: absolute !important;
    top: -25px;
    right: -16px;
    border: none;
    background: transparent;
    color: #e5e7eb;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    padding: 30px;
}

.adv-paketi-close:hover {
    color: #B20000;
}

/* text blocks */

.adv-paketi-headline {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
    text-align: center;
}

.adv-paketi-subheadline {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 10px;
    text-align: center;
}

.adv-paketi-price-block {
    margin-top: 10px;
    margin-bottom: 14px;
}

.adv-paketi-crossed {
    text-decoration: line-through;
    opacity: 0.8;
    text-align: center;
    margin-bottom: -10px;
    font-size: 26px;
    color: #f16b5d;
    font-family: Arial, Helvetica, sans-serif;
}

.adv-paketi-price-line {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
}

.adv-paketi-price-main {
    font-size: 50px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
}

.adv-paketi-price-suffix {
    font-size: 14px;
}

.adv-paketi-after-price {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 6px;
    text-align: center;
	letter-spacing: 1px;
}

/* CTA */

.adv-paketi-cta-wrap {
    margin-top: 10px;
    margin-bottom: 32px;
    text-align: center;
}

.adv-paketi-cta {
    border: none;
    border-radius: 999px;
    padding: 8px 22px;
    font-size: 22px;
    font-weight: 600;
    background: #f97316;
    color: #111827;
    cursor: pointer;

    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
    will-change: transform;
}

.adv-paketi-cta:hover {
    background: #fb923c;
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.adv-paketi-cta:active {
    transform: scale(0.98);
}

/* packages left */

.adv-paketi-packages {
    font-size: 16px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.adv-paketi-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(248, 250, 252, 0.4);
}

.adv-paketi-dot-full {
    background: #f9fafb;
}

.adv-paketi-dot-empty {
    background: transparent;
}

/* small hint (if needed in preview mode later) */

.adv-paketi-hint {
    margin-top: 8px;
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
}





/* ------- Packages line: number + dots alignment ------- */

.adv-paketi-packages {
    gap: 8px;                 /* was 4px, a bit tight */
    line-height: 1;           /* helps baseline issues */
}

.adv-paketi-packages-label {
    opacity: 0.95;
}

.adv-paketi-packages-num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.adv-paketi-packages-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transform: translateY(2px);   /* visually centers dots with text */
}

/* ------- Dots: improve contrast on busy backgrounds ------- */

.adv-paketi-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.adv-paketi-dot-full {
    background: rgba(255, 255, 255, 0.95);
	background: rgb(246 195 46);
}

.adv-paketi-dot-empty {
    background: rgba(255, 255, 255, 0.18);
}























/* ------- Premium reveal animation (staggered sections) ------- */



@keyframes advPaketiCtaBounce {
    0% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-1px) scale(1.04);
    }
    70% {
        transform: translateY(0) scale(0.99);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.adv-paketi-popup.adv-paketi-animate-in .adv-paketi-cta {
    animation: advPaketiCtaBounce 480ms cubic-bezier(0.22, 0.7, 0.25, 1.05) 360ms both;
}






/* Subtle pop‑in for the whole card */
.adv-paketi-popup {
    transform: translateY(10px) scale(0.995);
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 420ms ease;
}

.adv-paketi-overlay--visible .adv-paketi-popup {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Keyframes for inner blocks */
@keyframes advPaketiSectionIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


@keyframes advPaketiCtaIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
        filter: blur(2px);
    }
    55% {
        opacity: 1;
        transform: translateY(-2px) scale(1.06); /* overshoot */
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.adv-paketi-overlay--visible .adv-paketi-cta-wrap {
    animation: advPaketiCtaIn 560ms cubic-bezier(0.22, 0.7, 0.25, 1.05) 320ms both;
}

/* Default hidden state once overlay is visible */
.adv-paketi-overlay--visible .adv-paketi-toprow,
.adv-paketi-overlay--visible .adv-paketi-headline,
.adv-paketi-overlay--visible .adv-paketi-subheadline,
.adv-paketi-overlay--visible .adv-paketi-price-block,
.adv-paketi-overlay--visible .adv-paketi-cta-wrap,
.adv-paketi-overlay--visible .adv-paketi-packages {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
}

/* One‑by‑one animation with staggered delays */
.adv-paketi-overlay--visible .adv-paketi-toprow {
    animation: advPaketiSectionIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 80ms both;
}

.adv-paketi-overlay--visible .adv-paketi-headline,
.adv-paketi-overlay--visible .adv-paketi-subheadline {
    animation: advPaketiSectionIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 160ms both;
}

.adv-paketi-overlay--visible .adv-paketi-price-block {
    animation: advPaketiSectionIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 240ms both;
}


.adv-paketi-overlay--visible .adv-paketi-packages {
    animation: advPaketiSectionIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 400ms both;
}

/* Respect reduced motion, but just make everything static instead of broken */
@media (prefers-reduced-motion: reduce) {
    .adv-paketi-popup {
        transition: none;
        transform: none;
        opacity: 1;
    }
	
    .adv-paketi-popup.adv-paketi-animate-in .adv-paketi-cta {
        animation: none !important;
        transform: none;
    }

    .adv-paketi-overlay--visible .adv-paketi-toprow,
    .adv-paketi-overlay--visible .adv-paketi-headline,
    .adv-paketi-overlay--visible .adv-paketi-subheadline,
    .adv-paketi-overlay--visible .adv-paketi-price-block,
    .adv-paketi-overlay--visible .adv-paketi-cta-wrap,
    .adv-paketi-overlay--visible .adv-paketi-packages {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}


.adv-paketi-limited-until {
    font-size: 13px;
    opacity: 0.85;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 6px;
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: 0.8px;
    border-bottom: 2px solid #ffb109;
    color: #ffd9a7;
}




/* ------- Promo paketi dots: suptilna "premium" animacija za popunjene točkice ------- */
.adv-paketi-packages-dots .adv-paketi-dot-full{
  position: relative;
  will-change: transform, opacity, filter;
  animation: adv_paketi_dotPulse 1.4s ease-in-out infinite;
}

/* ------- Suptilni “glow” sloj (ne mijenja layout) ------- */
.adv-paketi-packages-dots .adv-paketi-dot-full::after{
  content: "";
  position: absolute;
  inset: -3px;               /* malo šire od same točke */
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.90);
  will-change: transform, opacity;
  animation: adv_paketi_dotGlow 1.9s ease-in-out infinite;
}

/* ------- Lagani “breath” efekt: mikro-scale + nijansa/kontrast ------- */
@keyframes adv_paketi_dotPulse{
  0%   { transform: scale(1);    filter: brightness(0.5) saturate(1); }
  45%  { transform: scale(1.06); filter: brightness(1.12) saturate(1.10); }
  100% { transform: scale(1);    filter: brightness(0.8) saturate(1); }
}

/* ------- Soft halo: diskretan, bez agresivnog bljeskanja ------- */
@keyframes adv_paketi_dotGlow{
  0%   { opacity: 0.00; transform: scale(0.90); box-shadow: 0 0 0 rgba(255,255,255,0); }
  45%  { opacity: 0.18; transform: scale(1.40); box-shadow: 0 0 10px rgba(255,255,255,0.12); }
  100% { opacity: 0.00; transform: scale(0.90); box-shadow: 0 0 0 rgba(255,255,255,0); }
}

/* ------- Fine tuning: lagani “stagger” da ne pulsiraju sve identično ------- */
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(1){ animation-delay: 0s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(2){ animation-delay: 0.22s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(3){ animation-delay: 0.14s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(4){ animation-delay: 0.66s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(5){ animation-delay: 0.38s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(6){ animation-delay: 0.10s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(7){ animation-delay: 0.72s; }

.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(1)::after{ animation-delay: 0s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(2)::after{ animation-delay: 0.12s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(3)::after{ animation-delay: 0.24s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(4)::after{ animation-delay: 0.36s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(5)::after{ animation-delay: 0.48s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(6)::after{ animation-delay: 0.60s; }
.adv-paketi-packages-dots .adv-paketi-dot-full:nth-child(7)::after{ animation-delay: 0.72s; }

/* ------- Accessibility: poštuj reduced motion ------- */
@media (prefers-reduced-motion: reduce){
  .adv-paketi-packages-dots .adv-paketi-dot-full,
  .adv-paketi-packages-dots .adv-paketi-dot-full::after{
    animation: none !important;
  }
}



























/* VARIJACIJE */

/* default dark-blue theme; can be overridden via theme_class on popup div */
.paket_theme_default.adv-paketi-popup {
    background: #020617;
	background-image:url('/2025/assets/articleImages/sksjf1771578478.jpg');
	background-size: contain;
}


/* ------- Overlay layer over background image ------- */
.paket_theme_default {
    position: relative;          /* required for absolute overlay */
    overflow: hidden;            /* safety */
}





/* paket_theme_gif */
.paket_theme_gif.adv-paketi-popup {
    background: #020617;
	background-image:url('/2025/assets/articleImages/sksjf1771578478.jpg');
	background-image:url('/2025/assets/articleImages/lyvbz1771593090.gif');
	background-size: contain;
}


/* ------- Overlay layer over background image ------- */
.paket_theme_gif {
    position: relative;          /* required for absolute overlay */
    overflow: hidden;            /* safety */
}

/* ------- 90% black transparent layer ------- */
.paket_theme_gif::before {
    content: "";
    position: absolute;
    inset: 0;                    /* shorthand for top:0; right:0; bottom:0; left:0 */
    background: rgba(0, 0, 0, 0.9);  /* 90% black */
	background: rgb(55 52 31 / 85%);
    z-index: 1;
    pointer-events: none;        /* don't block clicks */
}

/* ------- Make content appear above overlay ------- */
.paket_theme_gif > * {
    position: relative;
    z-index: 2;
}
.paket_theme_gif .adv-paketi-crossed {
    /* font-size: 13px; */
    color: #f0aa8f;
}