/* Front-end styles */
.vis-stories-wrapper,
.vis-stories-wrapper *,
.vis-modal,
.vis-modal * {
    box-sizing: border-box !important;
}

.vis-stories-wrapper {
    width: 100% !important;
    overflow: hidden !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

.vis-stories-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 4px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
    align-items: flex-start !important;
}

.vis-stories-row::-webkit-scrollbar {
    display: none !important;
}

.vis-stories-wrapper .vis-story {
    all: unset !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    cursor: pointer !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    flex: 0 0 92px !important;
    text-align: center !important;
    font-family: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: normal !important;
}

.vis-stories-wrapper .vis-story-ring {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
    margin: 0 auto 8px !important;
    border-radius: 50% !important;
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5) !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
}

.vis-stories-wrapper .vis-story-ring img {
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #fff !important;
    border: 3px solid #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.vis-stories-wrapper .vis-story-title {
    display: block !important;
    width: 92px !important;
    max-width: 92px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: #222 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vis-stories-wrapper .vis-story.vis-viewed .vis-story-ring {
    background: #c7c7c7 !important;
}

.vis-stories-wrapper .vis-story.vis-viewed .vis-story-title {
    color: #777 !important;
}



.vis-modal {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.88) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.vis-modal.is-open {
    display: flex !important;
}

.vis-modal-content {
    position: relative !important;
    width: min(420px, 96vw) !important;
    background: #111 !important;
    border-radius: 18px !important;
    padding: 18px !important;
    color: #fff !important;
    box-shadow: 0 20px 80px rgba(0,0,0,0.45) !important;
}

.vis-close {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 32px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
    box-shadow: none !important;
    z-index: 10 !important;
}

.vis-modal-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 36px 14px 0 !important;
}

.vis-modal-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
}

.vis-story-counter {
    flex: 0 0 auto !important;
    color: #fff !important;
    background: rgba(255,255,255,0.16) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.vis-video-box {
    position: relative !important;
    width: 100% !important;
    padding-top: 177.77% !important;
    background: #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.vis-video-box iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

.vis-image-box {
    display: none;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 520px !important;
    max-height: 70vh !important;
    background: #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.vis-image-box.is-active {
    display: flex !important;
}

.vis-image-box img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 70vh !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.vis-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
    font-size: 24px !important;
    line-height: 38px !important;
    text-align: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.vis-prev {
    left: 10px !important;
}

.vis-next {
    right: 10px !important;
}

.vis-story-stats {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 14px !important;
    color: #fff !important;
}

.vis-people-saw {
    font-size: 13px !important;
    color: rgba(255,255,255,0.82) !important;
}

.vis-reactions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.vis-reactions button {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    background: rgba(255,255,255,0.16) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 7px 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.vis-reactions button.is-active {
    background: #fff !important;
    color: #111 !important;
    font-weight: 700 !important;
}

.vis-story-button {
    display: none !important;
    margin-top: 14px !important;
    background: #fff !important;
    color: #111 !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.vis-story-button.is-visible {
    display: block !important;
}


.vis-hidden {
    display: none !important;
}








.vis-stories-wrapper .vis-story.vis-unviewed .vis-story-ring img {
    position: relative !important;
    z-index: 2 !important;
}










/* Unopened story: static circle with animated golden pulse and border shine */
.vis-stories-wrapper .vis-story.vis-unviewed .vis-story-ring {
    position: relative !important;
    isolation: isolate !important;
    background: linear-gradient(45deg, #ffd700, #ffb300, #fff2a8, #ffd700) !important;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.45), 0 0 14px rgba(255, 215, 0, 0.25) !important;
    animation: vis-gold-pulse 1.8s ease-in-out infinite !important;
    transform: none !important;
}

.vis-stories-wrapper .vis-story.vis-unviewed .vis-story-ring::before {
    content: "" !important;
    position: absolute !important;
    inset: -5px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.35), rgba(255, 215, 0, 0) 68%) !important;
    opacity: 0.6 !important;
    animation: vis-gold-halo 1.8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.vis-stories-wrapper .vis-story.vis-unviewed .vis-story-ring::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    padding: 4px !important;
    background: conic-gradient(
        from 0deg,
        rgba(255, 215, 0, 0) 0deg,
        rgba(255, 255, 255, 0) 35deg,
        rgba(255, 255, 255, 0.95) 55deg,
        rgba(255, 241, 120, 0.85) 72deg,
        rgba(255, 215, 0, 0) 105deg,
        rgba(255, 215, 0, 0) 360deg
    ) !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: vis-gold-border-shine 2.4s linear infinite !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.vis-stories-wrapper .vis-story.vis-unviewed .vis-story-ring img {
    position: relative !important;
    z-index: 2 !important;
    transform: none !important;
    animation: none !important;
}

@keyframes vis-gold-pulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(255, 215, 0, 0.45), 0 0 14px rgba(255, 215, 0, 0.25);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 16px rgba(255, 215, 0, 0.95), 0 0 34px rgba(255, 179, 0, 0.65);
        filter: brightness(1.08);
    }
}

@keyframes vis-gold-halo {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.96);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.08);
    }
}

@keyframes vis-gold-border-shine {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}









/* HTML Embed Story: full HTML/CSS/JS rendered in iframe */
.vis-html-box {
    display: none !important;
    width: 100% !important;
    height: 640px !important;
    max-height: 70vh !important;
    background: #000 !important;
    border: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.vis-html-box.is-active {
    display: block !important;
}

@media (max-width: 520px) {
    .vis-html-box {
        height: 70vh !important;
    }
}


/* Built-in quiz story types */
.vis-quiz-box {
    display: none !important;
    width: 100% !important;
    height: 640px !important;
    max-height: 70vh !important;
    background: linear-gradient(180deg, #5b2cff, #ff4ecd) !important;
    color: var(--vis-question-text-color, #fff) !important;
    border-radius: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 22px !important;
}

.vis-quiz-box.is-active {
    display: block !important;
}

.vis-quiz-inner h2 {
    color: #fff !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    margin: 0 0 20px !important;
}

.vis-quiz-question {
    font-size: 17px !important;
    line-height: 1.55 !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    margin-bottom: 20px !important;
}

.vis-calc-answer-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 18px !important;
    margin: 20px 0 !important;
}

.vis-calc-input {
    width: 160px !important;
    max-width: 55% !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-size: 20px !important;
    text-align: center !important;
    background: #fff !important;
    color: #111 !important;
}

.vis-quiz-check,
.vis-mcq-option {
    width: 100% !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 8px 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.vis-quiz-check {
    text-align: center !important;
    font-weight: 700 !important;
    background: #ffd700 !important;
}

.vis-mcq-option.is-correct,
.vis-quiz-result.is-correct {
    background: #00c875 !important;
    color: #fff !important;
}

.vis-mcq-option.is-wrong,
.vis-quiz-result.is-wrong {
    background: #ff4d4f !important;
    color: #fff !important;
}

.vis-quiz-result {
    display: block !important;
    margin-top: 14px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.vis-quiz-result:empty {
    display: none !important;
}

.vis-quiz-explanation {
    display: none !important;
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.12) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.vis-quiz-explanation.is-visible {
    display: block !important;
}

.vis-clinical-progress,
.vis-clinical-score {
    display: inline-block !important;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    margin-bottom: 12px !important;
}

.vis-clinical-next {
    width: 100% !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 14px 0 !important;
    background: #ffd700 !important;
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}


.vis-mcq-option strong {
    margin-right: 6px !important;
}


/* Per-story gradient colours for question story types */
.vis-quiz-box {
    color: var(--vis-question-text-color, #fff) !important;
}

.vis-quiz-inner,
.vis-quiz-inner h2,
.vis-quiz-question,
.vis-calc-answer-row,
.vis-clinical-progress,
.vis-clinical-score {
    color: var(--vis-question-text-color, #fff) !important;
}


/* v3.1 gradient fix */
.vis-quiz-box.is-active {
    background-color: transparent !important;
    color: var(--vis-question-text-color, #fff) !important;
}

.vis-quiz-box .vis-quiz-question {
    background: rgba(255,255,255,0.18) !important;
}


/* Vimeo video layout options */
.vis-video-box.vis-video-vertical {
    padding-top: 177.77% !important;
}

.vis-video-box.vis-video-horizontal {
    padding-top: 56.25% !important;
}

.vis-modal-content.vis-horizontal-mode {
    width: min(760px, 96vw) !important;
}