/* =============================================================
   story.css — Mewan Stories Carousel widget
   Extracted from main.css and split into its own file so the
   story widget can be styled/maintained independently.

   Relies on the CSS custom properties defined in theme.css
   (:root for Day mode, body.theme-night for Night mode) —
   colors, radii and the transition speed all come from there,
   so this file needs no dark-mode-specific overrides for color.

   Supports: RTL (default) and LTR via html[dir=ltr] overrides,
   matching the pattern already used across the theme.
   ============================================================= */


/* ════════════════════════════════════════════════════════════
   THUMBNAILS ROW
   Small circular avatars in the swiper that open the viewer.
   ════════════════════════════════════════════════════════════ */

.story-item {
    width: 100px;
    text-align: center;
    display: block !important;
    text-decoration: none !important;
}

.story-item-title {
    font-size: 13px;
    color: var(--colorText);
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transitionSpeed) ease;
}

.story-item-circle {
    position: relative;
    width: 100px;
    height: 100px;
    margin: auto;
}

/* Ring drawn around the thumbnail. Defaults to the theme's
   primary color so it always matches the site palette; the
   widget's "Thumbnail border color" control (Elementor) can
   override this per-instance via a higher-specificity
   {{WRAPPER}} rule. */
.story-item-circle svg {
    fill: none;
    stroke: var(--colorPrimary);
    stroke-linecap: round;
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    /* FIX: rotate around the circle's own center instead of the
       SVG viewport's top-left corner — previously caused a
       visible "wobble" instead of a clean spin. */
    transform-box: fill-box;
    transform-origin: center;
}

/* "Loading" ring shown for ~1s after a thumbnail is clicked,
   while the large story viewer is preparing to open. */
.story-item-circle.animated svg {
    animation: story-ring-spin 1s linear infinite;
}

.story-item-circle img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 30px) !important;
    height: calc(100% - 30px) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* FIX: the original keyframes used a stroke-dasharray of just
   "4"/"8" against a ~251px circumference circle — effectively
   invisible. Using a proper two-value dasharray (dash gap) makes
   a clearly visible rotating arc, i.e. an actual spinner. */
@keyframes story-ring-spin {
    0% {
        stroke: #8a3ab9;
        stroke-dasharray: 1 250;
        transform: rotate(0deg);
    }
    50% {
        stroke: #ffc100;
        stroke-dasharray: 120 250;
    }
    100% {
        stroke: #cd486b;
        stroke-dasharray: 1 250;
        transform: rotate(360deg);
    }
}


/* ════════════════════════════════════════════════════════════
   FULL-SCREEN STORY VIEWER OVERLAY
   ════════════════════════════════════════════════════════════ */

.stories-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    /* Neutral dark backdrop on purpose (kept independent of the
       day/night theme) — this sits behind full-bleed photos and
       videos, so it must not tint them. */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(7.8px);
    -webkit-backdrop-filter: blur(7.8px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    /* FIX: previously "transition: 300ms" applied to *all*
       properties including `visibility`, which can only ever
       jump instantly — there was no delay coordination, so the
       overlay could pop invisible mid-fade. Delay the hide until
       the opacity fade finishes; switch back instantly on open. */
    transition: opacity var(--transitionSpeed) ease,
    visibility 0s linear var(--transitionSpeed);
}

.stories-wrapper.show {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity var(--transitionSpeed) ease, visibility 0s linear 0s;
}

/* Keep non-active cube-effect slides hidden until the viewer is
   open, avoiding a flash of overlapping slides on first paint. */
.stories-wrapper .swiper-cube .swiper-slide-active,
.stories-wrapper .swiper-cube .swiper-slide-next,
.stories-wrapper .swiper-cube .swiper-slide-next + .swiper-slide,
.stories-wrapper .swiper-cube .swiper-slide-prev {
    opacity: 0;
    visibility: hidden;
}

.stories-wrapper.show .swiper-cube .swiper-slide-active,
.stories-wrapper.show .swiper-cube .swiper-slide-next,
.stories-wrapper.show .swiper-cube .swiper-slide-next + .swiper-slide,
.stories-wrapper.show .swiper-cube .swiper-slide-prev {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Prev/Next nav buttons for the large viewer sit outside the
   card itself. Base position/box styling comes from the shared
   .custom-swiper-button-prev/next rules in main.css; only the
   extra outward offset is story-specific. */
.stories-wrapper .custom-swiper-button-prev {
    right: -70px;
}

.stories-wrapper .custom-swiper-button-next {
    right: auto;
    left: -70px;
}
.stories-wrapper .custom-swiper-button-next,
.stories-wrapper .custom-swiper-button-prev{
    border-radius: var(--borderRadiusMd);
}

html[dir=ltr] .stories-wrapper .custom-swiper-button-next,
html[dir=ltr] .stories-wrapper .custom-swiper-button-prev{
    transform: rotate(180deg);
}
    /* FIX: no LTR mirror existed for these offsets before, so on an
       LTR site both arrows would end up stacked on the same side. */
html[dir=ltr] .stories-wrapper .custom-swiper-button-prev {
    right: auto;
    left: -70px;
}

html[dir=ltr] .stories-wrapper .custom-swiper-button-next {
    left: auto;
    right: -70px;
}


/* ════════════════════════════════════════════════════════════
   LARGE STORY CARD (single slide in the full-screen viewer)
   ════════════════════════════════════════════════════════════ */

.large-stories-swiper {
    width: 420px;
    height: 747px !important;
}

@media (max-height: 767px) {
    .large-stories-swiper {
        width: 337px !important;
        height: 600px !important;
    }
}

/* Progress bar: one segment per story, filled as it plays */
.large-stories-swiper .swiper-pagination {
    padding: 0 20px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.large-stories-swiper .swiper-pagination-bullet {
    height: 2px;
    width: 100%;
    margin: 0 2px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Filled portion of each segment; driven by stories.js via the
   inline `width` set on this span during autoplayTimeLeft. */
.large-stories-swiper .swiper-pagination-bullet > span {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
}

/* Segments after the active one stay fully unfilled */
.large-stories-swiper .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) > span {
    width: 100% !important;
}

/* Segments before the active one are fully filled (already watched) */
.large-stories-swiper .swiper-pagination-bullet-active ~ .swiper-pagination-bullet > span {
    width: 0 !important;
}

.story-item-lg {
    height: 100% !important;
    /* Replaces the previous hardcoded #444 with the theme's dark
       brand color, shown briefly as the media loads in. */
    background: var(--colorSecondary);
    color: #fff;
    border-radius: var(--borderRadiusMd);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.story-item-lg > img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.story-item-lg .story-video-tag {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 19;
    background: #000;
}


/* ── Header row: back button, avatar/title, play-pause/volume ──── */

.story-item-lg-title {
    display: flex;
    align-items: center;
    margin-right: 15px;
    flex-shrink: 0;
}

html[dir=ltr] .story-item-lg-title {
    margin-right: 0;
    margin-left: 15px;
}

.story-video-controls {
    width: 94px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-right: auto;
}

html[dir=ltr] .story-video-controls {
    margin-right: 0;
    margin-left: auto;
}

.story-video-controls-btn {
    color: #fff;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: var(--borderRadiusSm);
    cursor: pointer;
    transition: background 200ms ease;
    background: rgba(0, 0, 0, 0.36);
    -webkit-tap-highlight-color: transparent;
}

.story-video-controls-btn:hover,
.story-video-controls-btn:focus-visible {
    background: rgba(0, 0, 0, 0.8);
}

/* Play/pause icon swap, driven by the .playing class in JS */
.story-video-controls .story-play-pause-btn .not-playing-icon {
    display: none;
}

.story-video-controls .story-play-pause-btn.playing .not-playing-icon {
    display: inline-block;
}

.story-video-controls .story-play-pause-btn.playing .is-playing-icon {
    display: none;
}

/* Buffering spinner: while a video is loading/stalled, stories.js
   toggles .loading on the play/pause button. Both icons hide and a
   small spinning ring takes their place, matching the requested
   Instagram-style "loading ring next to the play button" behavior. */
.story-play-pause-btn {
    position: relative;
}

.story-play-pause-btn.loading .is-playing-icon,
.story-play-pause-btn.loading .not-playing-icon {
    visibility: hidden;
}

.story-play-pause-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: story-spinner-spin 0.7s linear infinite;
}

@keyframes story-spinner-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Muted/unmuted icon swap, driven by the .muted class in JS */
.story-video-controls .story-volume-btn .is-muted-icon {
    display: none;
}

.story-video-controls .story-volume-btn.muted .is-muted-icon {
    display: inline-block;
}

.story-video-controls .story-volume-btn.muted .not-muted-icon {
    display: none;
}

.story-item-lg-content {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 20;
}

.story-item-lg-overly {
    position: absolute;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent);
    top: 0;
    right: 0;
    z-index: 1;
    padding: 25px 25px 50px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.story-item-lg-overly-bottom {
    top: auto;
    bottom: 0;
    padding: 50px 25px 45px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
}

.avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-item-lg-overly .avatar {
    width: 32px;
    height: 32px;
    background: #000;
    border: 2px solid #fff;
}

.story-item-lg-back {
    color: #fff;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: var(--borderRadiusSm);
    cursor: pointer;
    transition: background 200ms ease;
    -webkit-tap-highlight-color: transparent;
}

.story-item-lg-back:hover,
.story-item-lg-back:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

.story-item-lg-overly .title {
    font-size: 13px;
    font-weight: 400;
    max-width: 150px;
}
html[dir=ltr] .story-item-lg-overly .title{
    margin-left: .5rem !important;
    margin-right:0 !important;
}


/* ── Footer: description, CTA button, tagged products ────────────── */

.story-item-lg-description {
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    width: 100%;
    text-align: center;
}

.story-item-lg-btn {
    width: auto;
    display: block;
    background: #fff;
    color: #000;
    border-radius: var(--borderRadiusSm);
    padding: 8px 15px;
    text-align: center;
    text-decoration: none !important;
    transition: background 200ms ease, color 200ms ease;
    margin: 10px auto;
    font-weight: bold;
    box-shadow: 0 2px 0 #00000063 !important;
}

/* Hover now uses the theme's primary color instead of a
   hardcoded black, so the CTA matches the site's brand color. */
.story-item-lg-btn:hover,
.story-item-lg-btn:focus-visible {
    color: #fff;
    background: var(--colorPrimary);
}

.story-item-lg-products {
    margin-top: 10px;
    width: 100% !important;
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
}

.story-item-lg-products::-webkit-scrollbar {
    height: 8px;
}

.story-item-lg-products::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.story-item-lg-products::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.story-item-lg-products::-webkit-scrollbar-thumb:hover {
    background: #fff;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — full-bleed viewer on short/mobile viewports
   ════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .large-stories-swiper .swiper-pagination {
        height: 20px;
    }

    .large-stories-swiper {
        width: 100% !important;
        height: 100% !important;
    }

    .story-item-lg {
        border-radius: 0;
    }
}