.sf_modal {
  .stark_modal_window.stories-viewer {
    --sf-story-modal-width: min(980px, calc(100vw - 48px));
    --sf-story-modal-height: calc(100% - 4em);
    --sf-story-modal-max-height: 90vh;
    --sf-story-modal-radius: 18px;
    --sf-story-viewer-rows: 68px 24px minmax(0, 1fr) 18px;
    --sf-story-stage-padding: 6px 72px 18px;
    --sf-story-card-width: min(42vw, 430px, 39vh);
    --sf-story-slide-gap: 24px;
    --sf-story-side-scale: 0.84;
    --sf-story-side-angle: 35deg;
    --sf-story-side-angle-next: -35deg;
    --sf-story-side-perspective: 900px;
    --sf-story-nav-size: 50px;
    --sf-story-nav-arr-size: 40px;
    --sf-story-nav-offset: calc((var(--sf-story-card-width) / 2) + 56px);
    --sf-story-gesture-display: none;
    width: var(--sf-story-modal-width) !important;
    height: var(--sf-story-modal-height) !important;
    max-height: var(--sf-story-modal-max-height) !important;
    max-width: none !important;
    max-height: none !important;
    grid-template-rows: minmax(0, 1fr);
    margin: 24px auto !important;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: var(--sf-story-modal-radius) !important;

    > .stark_modal_page {
      grid-row: 1;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
}

.sf-story-viewer {
    display: grid;
    grid-template-rows: var(--sf-story-viewer-rows);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: #fff;
    container-type: size;

    .sf-story-viewer__header {
        position: relative;
        z-index: 40;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0.75em;
        min-width: 0;
        padding: 1em 1em 0.5em 2em;
        box-sizing: border-box;
    }

    .sf-story-viewer__brand {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        min-width: 0;

        > img,
        .sf-story-viewer__brand-mark {
            display: grid;
            width: 42px;
            height: 42px;
            box-sizing: border-box;
            place-items: center;
            border-radius: 50%;
            background: #0808083b;
            box-shadow: 0 0 5px 1px #00000069;
            font: 600 17px / 1 var(--sf-font-ui);
            object-fit: cover;
        }

        .sf-story-viewer__brand-name {
            display: flex;
            min-width: 0;
            align-items: baseline;
            gap: 6px;
            overflow: hidden;
            letter-spacing: 0;
            white-space: nowrap;
            font-family: 'Poppins';
            text-transform: capitalize;
            font-size: 22px;
            font-weight: 600;

            strong {
                overflow: hidden;
                font: inherit;
                text-overflow: ellipsis;
            }

            .sf-story-viewer__brand-mobile {
                display: none;
            }

            .sf-story-viewer__brand-section {
                color: #f29d52;
            }
        }
    }

    .sf-story-viewer__menu-wrap {
        position: relative;
        width: 42px;
        height: 42px;
        cursor: pointer;

        .sf-story-viewer__menu-button {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: 8px;
            background: #00000021;
            color: #fff;
            cursor: pointer;

            span {
                position: relative;
                bottom: 0;
                font: 700 17px / 1 var(--sf-font-ui);
                letter-spacing: 0;
            }

            &:hover {
                background: rgb(255 255 255 / 10%);
            }

            &:focus-visible {
                outline: 2px solid #ff8a00;
                outline-offset: 2px;
            }
        }
    }

    .sf-story-viewer__close {
        position: relative;
        width: 42px;
        height: 42px;
        cursor: pointer;
        border-radius: 8px;
        background: #00000021;

        &::before {
            content: "" !important;
            margin-right: 0;
            --icon-stories-close: url(https://starkframe.store/wp-content/plugins/sf-core/shared/design/images/columns.svg);
            mask-size: contain !important;
            mask-repeat: no-repeat;
            background-color: rgb(255 255 255);
            mask-image: var(--icon-stories-close);
            filter: var(--sf-modal-close-filter);
            width: 20px;
            height: 20px;
            position: absolute;
            top: 11px;
            right: 11px;
        }

        &:hover {
            background: rgb(255 255 255 / 10%);
        }

        &:focus-visible {
            outline: 2px solid #ff8a00;
            outline-offset: 2px;
        }
    }

  .sf-story-viewer__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 90;
    display: grid;
    width: max-content;
    min-width: 150px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 8px;
    background: rgb(20 20 20 / 96%);
    box-shadow: 0 12px 30px rgb(0 0 0 / 42%);

    button {
      min-height: 38px;
      padding: 8px 13px;
      border: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;
      font: 500 13px/1.2 var(--sf-font-ui, "Poppins", sans-serif);
      text-align: left;

      &:hover,
      &:focus-visible {
        outline: 0;
        background: rgb(255 255 255 / 10%);
      }
    }
  }

  .sf-story-viewer__progress {
    position: relative;
    z-index: 30;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    align-items: center;
    gap: 6px;
    width: min(440px, calc(100% - 140px));
    justify-self: center;

    .sf-story-viewer__progress-segment {
      display: block;
      width: 100%;
      min-width: 0;
      height: 3px;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 999px;
      background: rgb(255 255 255 / 25%);
      opacity: 1;
      cursor: pointer;

      &.is-complete {
        background: rgb(255 255 255 / 48%);
      }

      &.is-active {
        background: #f29d52;
        box-shadow: 0 0 12px rgb(255 126 0 / 65%);
      }

      &:focus-visible {
        outline: 2px solid #ff8a00;
        outline-offset: 3px;
      }
    }
  }

  .sf-story-viewer__stage {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: var(--sf-story-stage-padding);
    box-sizing: border-box;
  }

  .sf-story-viewer__swiper {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;

    .swiper-wrapper {
      width: 100%;
      height: 100% !important;
      min-height: 0;
      align-items: center;
    }
  }

  .sf-story-viewer__slide {
    width: var(--sf-story-card-width) !important;
    height: auto !important;
    max-height: 100%;
    aspect-ratio: 9 / 16;
    align-self: center;
    opacity: 0.28;
    backface-visibility: hidden;
    transform: perspective(var(--sf-story-side-perspective)) scale(var(--sf-story-side-scale));
    transform-style: preserve-3d;
    transition: opacity 360ms ease, transform 420ms cubic-bezier(0.2, 0.72, 0.2, 1);
    will-change: transform, opacity;
    pointer-events: none;

    &.swiper-slide-active {
      z-index: 4;
      opacity: 1;
      transform: perspective(var(--sf-story-side-perspective)) rotateY(0deg) scale(1);
      transform-origin: center;
      pointer-events: auto;

      .sf-story-viewer__media {
        border-color: #f29d52;
      }
    }

    &.swiper-slide-prev {
      opacity: 0.42;
      transform: perspective(var(--sf-story-side-perspective)) rotateY(var(--sf-story-side-angle)) scale(var(--sf-story-side-scale));
      transform-origin: right center;
      pointer-events: auto;
      cursor: pointer;
    }

    &.swiper-slide-next {
      opacity: 0.42;
      transform: perspective(var(--sf-story-side-perspective)) rotateY(var(--sf-story-side-angle-next)) scale(var(--sf-story-side-scale));
      transform-origin: left center;
      pointer-events: auto;
      cursor: pointer;
    }
  }

  .sf-story-viewer__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1.5px solid rgb(255 255 255 / 16%);
    border-radius: 16px;
    background: #111;

    > img,
    > video {
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
      object-fit: cover;
    }

    > .starkframe-video-wrapper {
      position: relative;
      width: 100%;
      height: 100%;

      > video {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
      }
    }
  }

  .sf-story-viewer__slide:not(.swiper-slide-active) {
    .starkframe-video-wrapper {
      pointer-events: none;
    }
  }

  .sf-story-viewer__media-shade {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 32%;
    background: linear-gradient(to bottom, rgb(0 0 0 / 62%), transparent);
    pointer-events: none;
  }

  .sf-story-viewer__author {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 4;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 40px);
    color: #fff;
    text-shadow: 0 1px 6px rgb(0 0 0 / 70%);
    pointer-events: none;

    .sf-story-viewer__avatar {
      display: block;
      width: 44px;
      height: 44px;
      box-sizing: border-box;
      border: 1px solid rgb(255 255 255 / 72%);
      border-radius: 50%;
      background: #242424;
      object-fit: cover;
    }

    .sf-story-viewer__author-meta {
      display: grid;
      gap: 2px;
      min-width: 0;

      strong,
      time {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      strong {
        font: 600 14px/1.25 var(--sf-font-ui, "Poppins", sans-serif);
      }

      time {
        color: rgb(255 255 255 / 78%);
        font: 400 12px/1.25 var(--sf-font-body, "DM Sans", sans-serif);
      }
    }
  }

  .sf-story-viewer__nav {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: grid;
    width: var(--sf-story-nav-size);
    height: var(--sf-story-nav-size);
    place-items: center;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    color: unset !important;
    background: rgba(24, 24, 27, 0.3) !important;

    &::before {
        width: var(--sf-story-nav-arr-size);
        height: var(--sf-story-nav-arr-size);
        position: absolute;
        top: 4px;
        left: 4px;
        content: "" !important;
        background: url(https://starkframe.store/wp-content/plugins/sf-catalog/assets/images/stark-frame/arr-w.svg) 0% 0% / cover;
    }

    span {
      position: relative;
      bottom: 2px;
      font: 300 46px/1 var(--sf-font-ui, "Poppins", sans-serif);
    }

    &.sf-story-viewer__nav--prev {
        left: calc(50% - var(--sf-story-nav-offset));
        transform: translateY(-50%) rotate(270deg);
    }

    &.sf-story-viewer__nav--next {
        right: calc(50% - var(--sf-story-nav-offset));
        transform: translateY(-50%) rotate(90deg);
    }

    &.swiper-button-disabled {
      opacity: 0;
      pointer-events: none;
    }

    &:hover,
    &:focus-visible {
      outline: 2px solid #ff8a00;
      outline-offset: 3px;
      background: rgb(20 20 20 / 90%);
    }
  }

  .sf-story-viewer__gesture {
    display: var(--sf-story-gesture-display);
    align-items: center;
    justify-content: center;

    span {
      position: relative;
      display: block;
      width: 42px;
      height: 3px;
      border-radius: 999px;
      background: rgb(255 255 255 / 42%);

      &::before,
      &::after {
        content: "";
        position: absolute;
        top: -3px;
        width: 7px;
        height: 7px;
        border-top: 2px solid rgb(255 255 255 / 60%);
        border-left: 2px solid rgb(255 255 255 / 60%);
      }

      &::before {
        left: -1px;
        transform: rotate(-45deg);
      }

      &::after {
        right: -1px;
        transform: rotate(135deg);
      }
    }
  }

  &.is-loading {
    .sf-story-viewer__header,
    .sf-story-viewer__progress,
    .sf-story-viewer__skeleton {
      position: relative;
      overflow: hidden;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgb(255 255 255 / 10%), transparent);
        animation: sf-story-viewer-shimmer 1.35s ease-in-out infinite;
      }
    }

    .sf-story-viewer__header {
      width: 190px;
      height: 42px;
      margin: 13px 0 0 26px;
      padding: 0;
      border-radius: 8px;
      background: rgb(255 255 255 / 8%);
    }

    .sf-story-viewer__progress {
      height: 3px;
      border-radius: 999px;
      background: rgb(255 255 255 / 12%);
    }

    .sf-story-viewer__skeleton {
      width: var(--sf-story-card-width);
      max-height: 100%;
      justify-self: center;
      align-self: center;
      border-radius: 16px;
      aspect-ratio: 9 / 16;
      background: linear-gradient(140deg, #151515, #262626);
    }
  }

  &.sf-story-viewer--empty {
    grid-template-rows: 1fr;
    place-items: center;

    p {
      margin: 0;
      color: rgb(255 255 255 / 72%);
      font: 500 14px/1.4 var(--sf-font-body, "DM Sans", sans-serif);
    }
  }
}

body.sf-mobile {
  .sf_modal .stark_modal_window.stories-viewer {
    --sf-story-modal-width: 100%;
    --sf-story-modal-height: 100dvh;
    --sf-story-modal-radius: 0;
    --sf-story-viewer-rows: 70px 22px minmax(0, 1fr) 34px;
    --sf-story-stage-padding: 4px 0 8px;
    --sf-story-card-width: min(82vw, 430px, 48dvh);
    --sf-story-slide-gap: 12px;
    --sf-story-side-scale: 0.9;
    --sf-story-side-angle: 10deg;
    --sf-story-side-angle-next: -10deg;
    --sf-story-nav-size: 50px;
    --sf-story-nav-offset: calc((var(--sf-story-card-width) / 2) + 4px);
    --sf-story-gesture-display: flex;
    margin: 0 !important;
    border: 0;
  }

  .sf-story-viewer {
    .sf-story-viewer__header {
      padding: 12px 16px 4px;
    }

    .sf-story-viewer__brand {
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;

      .sf-story-viewer__brand-desktop {
        display: none;
      }

      .sf-story-viewer__brand-mobile {
        display: inline;
      }
    }

    .sf-story-viewer__progress {
      width: calc(100% - 48px);
    }

    .sf-story-viewer__media {
      border-radius: 16px;
    }

    .sf-story-viewer__nav {
      background: rgb(4 4 4 / 58%);
    }

    &.is-loading .sf-story-viewer__header {
      margin-left: 16px;
    }
  }
}

@media screen and (max-width: 600px) {
  body:not(.sf-mobile) {
    .sf_modal .stark_modal_window.stories-viewer {
      --sf-story-modal-width: 100%;
      --sf-story-modal-height: 100dvh;
      --sf-story-modal-radius: 0;
      --sf-story-viewer-rows: 70px 22px minmax(0, 1fr) 34px;
      --sf-story-stage-padding: 4px 0 8px;
      --sf-story-card-width: min(82vw, 430px, 48dvh);
      --sf-story-slide-gap: 12px;
      --sf-story-side-scale: 0.9;
      --sf-story-side-angle: 10deg;
      --sf-story-side-angle-next: -10deg;
      --sf-story-nav-size: 50px;
      --sf-story-nav-offset: calc((var(--sf-story-card-width) / 2) + 4px);
      --sf-story-gesture-display: flex;
      margin: 0 !important;
      border: 0;
    }

    .sf-story-viewer {
      .sf-story-viewer__header {
        padding: 12px 16px 4px;
      }

      .sf-story-viewer__progress {
        width: calc(100% - 48px);
      }

      .sf-story-viewer__brand {
        .sf-story-viewer__brand-desktop {
          display: none;
        }

        .sf-story-viewer__brand-mobile {
          display: inline;
        }
      }

      &.is-loading .sf-story-viewer__header {
        margin-left: 16px;
      }
    }
  }
}

@media screen and (min-width: 783px) and (max-width: 900px) {
  body.sf-mobile.admin-bar .sf_modal .stark_modal_window.stories-viewer {
    --sf-story-modal-height: calc(100dvh - 32px);
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar .sf_modal .stark_modal_window.stories-viewer {
    --sf-story-modal-height: calc(100dvh - 46px);
  }
}

@keyframes sf-story-viewer-shimmer {
  to { transform: translateX(100%); }
}