/* Stories widget (elementor/widgets/stories_swiper.php, js/jiawaz-stories.js).
   Style controls only write variables on the widget wrapper:
   --jz-story-w / -h / -radius (cover), --jz-story-ring-w, --jz-story-gap, --jz-story-gap-color,
   --jz-story-ring-solid, --jz-story-seen, --jz-stories-backdrop, --jz-stories-radius, --jz-stories-btn-*. */

@property --jz-ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* ------------------------------------------------------------------ covers */
.jz-story-thumb{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%; /* a cover larger than its slide (many items per view) shrinks instead of overlapping */
    text-align: center;
    text-decoration: none !important;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.jz-story-thumb__ring{
    --r: 50%;
    position: relative;
    display: block;
    flex-shrink: 0;
    width: var(--jz-story-w, 80px);
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: var(--r);
    /* inner radii follow the outer one (concentric), but never drop to a sharp corner when the ring /
       space is as wide as the radius: the image keeps at least half of the cover's rounding */
    --jz-r-in: max(calc(var(--r) - var(--jz-story-ring-w, 2.5px)), calc(var(--r) * .75));
    --jz-r-img: max(calc(var(--r) - var(--jz-story-ring-w, 2.5px) - var(--jz-story-gap, 3px)), calc(var(--r) * .5));
}
.jz-story-thumb.is-square .jz-story-thumb__ring{
    --r: var(--jz-story-radius, 18px);
    height: var(--jz-story-h, auto);
}
/* the ring: a gradient box under the image, the image box covers all but its edge */
.jz-story-thumb__ring::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(45deg, #feda75 5%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
    transition: opacity .2s;
}
.jz-story-thumb.is-solid .jz-story-thumb__ring::before{
    background: var(--jz-story-ring-solid);
}
.jz-story-thumb.is-seen .jz-story-thumb__ring::before{
    background: var(--jz-story-seen, #c9c9cf);
}
.jz-story-thumb__img{
    position: absolute;
    inset: var(--jz-story-ring-w, 2.5px);
    display: block;
    overflow: hidden;
    padding: var(--jz-story-gap, 3px);
    border-radius: var(--jz-r-in);
    background: var(--jz-story-gap-color, var(--colorBackground, #fff));
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.jz-story-thumb:not(.is-square) .jz-story-thumb__img{
    border-radius: 50%;
}
/* (.jz-story-thumb prefix: Elementor's ".elementor img { border-radius: 0 }" loads later with the same weight) */
.jz-story-thumb .jz-story-thumb__img img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    border-radius: var(--jz-r-img);
}
.jz-story-thumb:not(.is-square) .jz-story-thumb__img img{
    border-radius: 50%;
}
.jz-story-thumb:active .jz-story-thumb__img{
    transform: scale(.95);
}
.jz-story-thumb:focus-visible{
    outline: none;
}
.jz-story-thumb:focus-visible .jz-story-thumb__ring{
    outline: 2px solid var(--colorPrimary, #E8A20D);
    outline-offset: 3px;
}
/* Instagram: after a tap the ring turns into rotating segments until the story opens */
.jz-story-thumb.is-loading .jz-story-thumb__ring::before{
    -webkit-mask: repeating-conic-gradient(from var(--jz-ring-angle), #000 0 15deg, transparent 15deg 22.5deg);
    mask: repeating-conic-gradient(from var(--jz-ring-angle), #000 0 15deg, transparent 15deg 22.5deg);
    animation: jz-story-ring 1s linear infinite;
}
.jz-story-thumb.is-loading .jz-story-thumb__img{
    transform: scale(.94);
}
@keyframes jz-story-ring{
    to{
        --jz-ring-angle: 360deg;
    }
}
@media (prefers-reduced-motion: reduce){
    .jz-story-thumb.is-loading .jz-story-thumb__ring::before{
        animation-duration: 3s;
    }
}
.jz-story-thumb__title.story-item-title{
    max-width: max(100%, var(--jz-story-w, 80px));
    margin: 0;
}
/* "Title on the image": a tall rounded card, the title at the bottom on a highlight
   (.jz-story-thumb__hl: the whole band, or only the text with .is-pill; Elementor's background control) */
.jz-story-thumb.is-overlay .jz-story-thumb__ring{
    --r: var(--jz-story-radius, 16px);
    width: var(--jz-story-w, 96px);
    aspect-ratio: 9 / 14;
}
.jz-story-thumb.is-overlay .jz-story-thumb__img{
    position: absolute;
}
.jz-story-thumb__label{
    position: absolute;
    inset: auto var(--jz-story-hl-offset, 0px) var(--jz-story-hl-offset, 0px);
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: var(--jz-story-hl-align, center);
    min-height: var(--jz-story-hl-h, 55%);
    padding: var(--jz-story-hl-pad, 18px 7px 7px);
    border-radius: var(--jz-story-hl-radius, 0 0 var(--jz-r-img) var(--jz-r-img));
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    pointer-events: none;
}
/* the image box's padding (space around the image) also frames the band */
.jz-story-thumb.is-overlay .jz-story-thumb__label{
    margin: var(--jz-story-gap, 3px);
}
.jz-story-thumb__label-text.story-item-title{
    display: -webkit-box;
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: var(--jz-story-hl-align, center);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.jz-story-thumb.is-pill .jz-story-thumb__label{
    min-height: 0;
    padding: 0;
    background: none;
}
.jz-story-thumb.is-pill .jz-story-thumb__label-text{
    padding: var(--jz-story-hl-pad, 3px 9px);
    border-radius: var(--jz-story-hl-radius, 999px);
    background: var(--colorPrimary, #E8A20D);
    text-shadow: none;
}
.jz-story-thumb.is-pill .jz-story-thumb__label{
    inset: auto var(--jz-story-hl-offset, 6px) var(--jz-story-hl-offset, 6px);
}
.small-stories-swiper .swiper-slide{
    display: flex;
    justify-content: center;
}

/* ------------------------------------------------------------------ viewer */
html.jz-stories-open{
    overflow: hidden;
}
.jz-stories{
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none; /* .is-visible while open / closing: Swiper's cube CSS keeps slides visible + clickable */
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, visibility 0s .25s;
}
.jz-stories.is-visible{
    display: flex;
}
.jz-stories:not(.is-open),
.jz-stories:not(.is-open) *{
    pointer-events: none !important;
}
.jz-stories.is-open{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .25s;
}
.jz-stories__backdrop{
    position: absolute;
    inset: 0;
    background: var(--jz-stories-backdrop, rgba(18, 18, 18, .95));
}
.jz-stories__frame{
    --jz-frame-w: min(420px, 100vw, calc(92vh * 9 / 16));
    position: relative;
    width: var(--jz-frame-w);
    height: calc(var(--jz-frame-w) * 16 / 9);
    transform: scale(.92);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.1);
}
.jz-stories.is-open .jz-stories__frame{
    transform: none;
}
.jz-stories__swiper{
    width: 100%;
    height: 100%;
    overflow: visible;
}
.jz-stories--slide .jz-stories__swiper,
.jz-stories--fade .jz-stories__swiper{
    overflow: hidden;
    border-radius: var(--jz-stories-radius, 14px);
}
.jz-stories .jz-story{
    height: 100%;
}
.jz-stories--cube .jz-story:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next){
    visibility: hidden;
}
.jz-story__card{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--jz-stories-radius, 14px);
    background: #111;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none; /* taps, hold and swipe down reach the player (no browser scroll / cancel) */
}
/* readable header / footer over any media */
.jz-story__card::before,
.jz-story__card::after{
    content: '';
    position: absolute;
    inset-inline: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity .2s;
}
.jz-story__card::before{
    top: 0;
    height: 110px;
    background: linear-gradient(rgba(0, 0, 0, .55), transparent);
}
.jz-story__slides,
.jz-story__slide{
    position: absolute;
    inset: 0;
}
.jz-story__slide{
    visibility: hidden;
}
.jz-story__slide.is-active{
    visibility: visible;
}
/* always the full width of the story, aspect ratio kept (js/jiawaz-stories.js fit()): a taller medium is
   cropped at the top / bottom (cover), a wider one is shown whole and centered (.is-contain) on a blurred copy.
   Prefixed: Elementor's ".elementor img { height: auto; max-width: 100% }" also matches inside the portal box */
.jz-stories .jz-story__media{
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
}
.jz-stories .jz-story__slide.is-contain .jz-story__media{
    object-fit: contain;
}
.jz-story__slide::before{
    content: '';
    position: absolute;
    inset: -40px;
    background: var(--jz-story-bg, none) center / cover no-repeat;
    filter: blur(28px) brightness(.55);
    opacity: 0;
    transition: opacity .3s;
}
.jz-story__slide.is-contain::before{
    opacity: 1;
}
.jz-story__slides{
    overflow: hidden;
}

/* progress bars */
.jz-story__bars{
    position: absolute;
    inset: 10px 10px auto;
    z-index: 3;
    display: flex;
    gap: 4px;
    direction: ltr; /* fill from the start of the reading order: flipped below for RTL pages */
}
[dir=rtl] .jz-story__bars,
.rtl .jz-story__bars{
    flex-direction: row-reverse;
}
.jz-story__bar{
    position: relative;
    flex: 1;
    height: 2.5px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
}
.jz-story__bar > i{
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: #fff;
    border-radius: inherit;
}
[dir=rtl] .jz-story__bar > i,
.rtl .jz-story__bar > i{
    inset: 0 0 0 auto;
}

/* header */
.jz-story__head{
    position: absolute;
    inset: 22px 10px auto;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: opacity .2s;
}
.jz-story__avatar{
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    background: #333;
}
.jz-story__avatar img{
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.jz-story__name{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.jz-story__time{
    margin-inline-start: 4px;
    font-size: 12px;
    font-weight: 400;
    opacity: .75;
}
.jz-story__tools{
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}
.jz-story__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.jz-story__btn:hover,
.jz-story__btn:focus-visible{
    background: rgba(255, 255, 255, .15);
    outline: none;
}
.jz-story__close svg{
    width: 24px;
    height: 24px;
}
.jz-story__icon-play,
.jz-story__icon-muted,
.jz-stories.is-paused .jz-story__icon-pause,
.jz-stories.is-muted .jz-story__icon-sound{
    display: none;
}
.jz-story__icon-pause,
.jz-story__icon-sound,
.jz-stories.is-paused .jz-story__icon-play,
.jz-stories.is-muted .jz-story__icon-muted{
    display: inline-flex;
}

/* footer: text, link, products */
.jz-story__foot{
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 14px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .6));
    transition: opacity .2s;
}
.jz-story__text{
    max-height: 9em;
    overflow: auto;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.jz-story__cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--jz-stories-btn-bg, #fff);
    color: var(--jz-stories-btn-color, #111) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    transition: transform .15s;
}
.jz-story__cta:active{
    transform: scale(.96);
}
.jz-story__cta svg{
    width: 16px;
    height: 16px;
}
.jz-story__products{
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    touch-action: pan-x;
}
.jz-story__products::-webkit-scrollbar{
    display: none;
}
.jz-story__product{
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    width: min(230px, 78%);
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    color: #222 !important;
    text-decoration: none !important;
}
.jz-story__products > .jz-story__product:only-child{
    width: 100%;
}
.jz-story__product img{
    flex-shrink: 0;
    width: 48px !important;
    height: 48px !important;
    object-fit: cover;
    border-radius: 8px;
}
.jz-story__product-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.jz-story__product-title{
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.jz-story__product-price{
    font-size: 12px;
    color: var(--colorPrimary, #E8A20D);
}
.jz-story__product-price del{
    color: #999;
    font-size: 11px;
}
.jz-story__product-price ins{
    text-decoration: none;
}

/* holding a story: only the media stays, like Instagram */
.jz-stories.is-holding .jz-story__head,
.jz-stories.is-holding .jz-story__foot,
.jz-stories.is-holding .jz-story__bars,
.jz-stories.is-holding .jz-story__card::before{
    opacity: 0;
}

/* buffering */
.jz-story__card.is-buffering::after{
    inset: 0;
    z-index: 4;
    width: 46px;
    height: 46px;
    margin: auto;
    border: 3px solid rgba(255, 255, 255, .28);
    border-top-color: #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, .28);
    animation: jz-story-spin .8s linear infinite;
}
/* while loading, the bar of the active slide shimmers too (Instagram-like hint that something is coming) */
.jz-story__card.is-buffering .jz-story__bar{
    background: linear-gradient(90deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .6), rgba(255, 255, 255, .25)) 0 0 / 200% 100%;
    animation: jz-story-shimmer 1.2s linear infinite;
}
@keyframes jz-story-shimmer{
    to{
        background-position: -200% 0;
    }
}
@keyframes jz-story-spin{
    to{
        transform: rotate(360deg);
    }
}

/* neighbouring groups (slide effect / cube edges) are dimmed */
.jz-stories .jz-story:not(.swiper-slide-active) .jz-story__card > *{
    pointer-events: none;
}

/* arrows: beside the frame on large screens */
.jz-stories__arrow{
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #111;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    transition: transform .15s, background .15s;
}
.jz-stories__arrow:hover{
    background: #fff;
    transform: scale(1.06);
}
.jz-stories__arrow--prev{
    inset-inline-start: -60px;
}
.jz-stories__arrow--next{
    inset-inline-end: -60px;
}
/* the icon is a "›": it points to the end of the reading order */
html:not([dir=rtl]) .jz-stories__arrow--prev svg,
[dir=rtl] .jz-stories__arrow--next svg{
    transform: scaleX(-1);
}

@media (max-width: 576px){
    .jz-stories__frame{
        --jz-frame-w: 100vw;
        height: 100%;
        transform: translateY(24px);
    }
    .jz-stories__frame,
    .jz-story__card,
    .jz-stories--slide .jz-stories__swiper,
    .jz-stories--fade .jz-stories__swiper{
        border-radius: 0;
    }
    .jz-stories__arrow{
        display: none;
    }
    .jz-story__bars{
        top: max(10px, env(safe-area-inset-top));
    }
    .jz-story__head{
        top: calc(max(10px, env(safe-area-inset-top)) + 12px);
    }
    .jz-story__foot{
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}
@media (max-width: 767px){
    .jz-story-thumb__ring{
        width: var(--jz-story-w, 70px);
    }
    .jz-story-thumb__title.story-item-title{
        max-width: max(100%, var(--jz-story-w, 70px));
        font-size: 12px;
    }
}