/**
 * Short drama — archive cards and the watch screen.
 *
 * Sizes and colours match the reference build: panel 460px on #191c33, stage on
 * black, episode chips 58x45, accent #7b61ff.
 */

.sv-short-page {
    --sv-short-chip: rgba(255, 255, 255, 0.06);
    --sv-short-chip-hover: rgba(255, 255, 255, 0.14);
    --sv-short-muted: rgba(255, 255, 255, 0.55);
}

/* Sits on the episode template, outside .sv-short-page, so no local palette. */
.sv-short-empty {
    padding: 60px 0;
    color: var(--body);
    text-align: center;
}

/* -------------------------------------------------------------------------- *
 * Watch screen
 * -------------------------------------------------------------------------- */

.sv-short-page {
    display: flex;
    align-items: stretch;
    /* Fills what is left under the header. --sv-header-h is measured in
       drama.js from the actual header height; 90px is only the fallback
       used before JS runs (or if it's disabled).

       100vh is the *largest* possible viewport on mobile — it ignores the
       browser's address/search bar, so whenever that bar is showing (top on
       some Android Chrome builds, bottom on iOS Safari), a plain vh value
       overflows the real visible area. 100dvh tracks the viewport as the bar
       shows/hides, so the stage never runs under it or leaves a gap; the vh
       line stays first as the fallback for browsers without dvh support. */
    min-height: calc(100vh - var(--sv-header-h, 90px));
    min-height: calc(100dvh - var(--sv-header-h, 90px));
}

.sv-short-stage {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000000;
    /* Lets drama.js read a vertical drag as a swipe between episodes
       instead of the browser also scrolling the page underneath it. */
    touch-action: pan-x;
}

/* The whole point of the format: a 9:16 column, as tall as the stage allows. */
.sv-short-player {
    position: relative;
    width: auto;
    height: 100%;
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    aspect-ratio: 9 / 16;
    margin: 0;
    overflow: hidden;
    background: var(--background-item);
}

/* The theme puts 80px under every player; here the stage is the layout. */
.sv-short-player.videos_player:not(.has-embed) {
    margin-bottom: 0;
}

.sv-short-player--locked {
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
}

.sv-short-player--locked::before {
    position: absolute;
    inset: 0;
    background: rgba(8, 9, 16, 0.82);
    content: "";
}

.sv-short-unlock-price {
    margin-inline-end: 0.35em;
}

.sv-short-lock-panel {
    position: relative;
    max-width: 300px;
    padding: 24px;
    color: #ffffff;
    text-align: center;
}

.sv-short-lock-panel i {
    display: block;
    margin-bottom: 12px;
    font-size: 34px;
}

/*
 * The way past the wall that costs attention rather than coins. Deliberately
 * quieter than the Unlock button beside it: it is the second offer on the
 * panel, and the episode it opens closes again on reload.
 */
/* One rule for both shapes it takes: a <button> when the ad is a video break
   played here, an <a> when it is a link opened in a new tab. */
.sv-short-ad-unlock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 18px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: var(--heading);
}

.sv-short-ad-unlock:hover,
.sv-short-ad-unlock:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

/* Inline with the label, unlike the padlock above the panel. */
.sv-short-ad-unlock i {
    display: inline-block;
    margin-bottom: 0;
    font-size: 18px;
}

/* Counting down. Still a live link — the viewer may want the ad tab back — so
   only the wording changes, never the ability to click it. */
.sv-short-ad-unlock.is-waiting {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.65);
}

.sv-short-ad-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

/*
 * The rewarded break, over the whole stage.
 *
 * Given a z-index because the stage controls above are positioned without one:
 * nothing behind an ad should be clickable, least of all the arrows that would
 * swipe it away by accident.
 */
.sv-short-ad-break {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

/* The <video> is what IMA plays into on iOS and Android; the slot is where it
   draws the ad and its own skip button everywhere else. Both fill the stage,
   and which one is in front is the SDK's business, not this file's. */
.sv-short-ad-media,
.sv-short-ad-slot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * The way back from a click-through. Hidden while the ad plays so every click
 * on the creative reaches the creative; shown only once IMA reports the break
 * paused, which is the one moment nothing else on screen can start it again.
 */
.sv-short-ad-resume {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding: 0;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
}

.sv-short-ad-resume:hover {
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
}

/* The display:flex above is an author rule and would otherwise beat the
   browser's own [hidden] { display: none }, leaving the button on screen for
   the whole ad. */
.sv-short-ad-resume[hidden] {
    display: none;
}

.sv-short-ad-status {
    position: relative;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

/* Once a frame of the ad is on screen, the loading line has said its piece. */
.sv-short-ad-break.is-playing .sv-short-ad-status {
    display: none;
}

/*
 * The card that stands in for an episode still being fetched.
 *
 * Switching episode never waits on the network: the gesture slides this in at
 * once, and drama.js drops the real stage into its place when it arrives.
 */
.sv-short-player--pending {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0c12;
}

.sv-short-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, 0.16);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: sv-short-spin 0.8s linear infinite;
}

@keyframes sv-short-spin {

    to {
        transform: rotate(360deg);
    }
}

/* Still a spinner — it has to keep saying "working" — just an unhurried one. */
@media (prefers-reduced-motion: reduce) {

    .sv-short-spinner {
        animation-duration: 2.4s;
    }
}

/*
 * Switching episode slides the two cards past each other — up towards a later
 * episode, down towards an earlier one. That is the direction the swipe
 * gesture already moves in, so a swipe, an arrow, a key and a tap on the
 * episode list all resolve the same way.
 *
 * Only the outgoing card leaves the flow, and it does so with no insets and no
 * margin of its own: an absolutely positioned child of a flex container lands
 * at its static position, which this stage centres. That is the same placement
 * the card had a moment ago as the sole flex item, so going out of flow moves
 * it nowhere — and it leaves the incoming card sitting exactly where a single
 * card always sits, with nothing about its layout resting on this transition.
 */
.sv-short-player.sv-is-leaving {
    position: absolute;
    pointer-events: none;
}

.sv-short-player.sv-is-leaving,
.sv-short-player.sv-is-entering {
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

/* Still swapped, just not travelled: the outgoing card jumps straight off
   stage, where it is clipped, and drama.js removes it on the same timer. */
@media (prefers-reduced-motion: reduce) {

    .sv-short-player.sv-is-leaving,
    .sv-short-player.sv-is-entering {
        transition-duration: 0s;
    }
}

/* Hidden until the viewer taps the stage, gone again after 4s of no
   interaction — drama.js toggles .is-visible and restarts that timer on
   every click inside .sv-short-stage (the buttons here included, since a
   click on them bubbles up to the same handler). */
.sv-short-stage-controls {
    position: absolute;
    inset-inline-end: 20px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sv-short-stage-controls.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* A mouse has no "tap the stage" gesture, so on desktop the controls follow
   the pointer instead — drama.js's click/4s-timer behaviour above is what
   still drives touch devices, which this query excludes. */
@media (hover: hover) and (pointer: fine) {
    .sv-short-stage:hover .sv-short-stage-controls {
        opacity: 1;
        pointer-events: auto;
    }
}

.sv-short-stage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--background-item);
    border: 0;
    border-radius: 999px;
    font-size: 20px;
    color: var(--heading);
}

.sv-short-stage-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.sv-short-stage-btn.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Only meaningful once the panel can be hidden: under the 1199px breakpoint
   below, or in fullscreen (see the ":fullscreen" section under Panel) —
   otherwise desktop keeps the panel on screen at all times. */
.sv-short-panel-toggle {
    display: none;
}

.sv-short-panel-toggle.is-active {
    color: #ffffff;
    background: var(--main);
}

/* -------------------------------------------------------------------------- *
 * Panel
 * -------------------------------------------------------------------------- */

.sv-short-panel {
    flex: 0 0 460px;
    width: 460px;
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    padding: 26px 32px 40px;
    overflow-y: auto;
    background-color: rgba(25, 27, 36, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/*
 * Fullscreen (desktop width): the fullscreen target is .sv-short-page itself
 * (see the fullscreen handler in drama.js), so :fullscreen here matches while
 * the whole watch screen — stage and panel alike — is the fullscreen element.
 * Pinning a 460px panel beside a fullscreen stage defeats the point of going
 * fullscreen, so it becomes the same closed-until-tapped overlay the sub-1199px
 * layout already uses, just anchored to the side instead of the bottom — the
 * :fullscreen selectors below out-specificity the plain-class rules they
 * shadow, so this applies regardless of source order relative to them.
 */
.sv-short-page:fullscreen .sv-short-panel-toggle,
.sv-short-page:-webkit-full-screen .sv-short-panel-toggle {
    display: flex;
}

.sv-short-page:fullscreen .sv-short-panel,
.sv-short-page:-webkit-full-screen .sv-short-panel {
    display: none;
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    flex-direction: column;
    max-height: 100vh;
    z-index: 40;
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.4);
}

.sv-short-page.sv-panel-open:fullscreen .sv-short-panel,
.sv-short-page.sv-panel-open:-webkit-full-screen .sv-short-panel {
    display: flex;
}

.sv-short-panel .sv-short-breadcrumbs {
    margin: 0 0 18px;
    padding: 0;
    color: var(--sv-short-muted);
    font-size: 13px;
    list-style: none;
}

.sv-short-breadcrumbs li {
    display: inline;
}

.sv-short-breadcrumbs .jws-breadcrumbs__separator {
    padding: 0 8px;
}

.sv-short-title {
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.3;
}

.sv-short-panel .jws-category-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.sv-short-panel .jws-category-extra a {
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.sv-short-panel .jws-category-extra a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.sv-short-panel .jws-tool {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 22px;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0 7px;
}

.sv-short-panel .jws-tool>div {
    position: relative;
    width: 33.33%;
    display: flex;
    justify-content: center;
}


.sv-short-panel .jws-tool>div i {
    font-size: 22px;
}

.sv-short-panel .jws-tool>div>a {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 8px;
    justify-content: center;
    width: fit-content;
    gap: 5px;
    font-weight: bold;
}

.sv-short-panel .jws-tool>div>a:hover {
    color: var(--heading);
}

.sv-short-panel .jws-tool .jws-likes .liked i {
    color: var(--main);
}


.sv-short-plot {
    margin-bottom: 26px;
}

.sv-short-plot h6,
.sv-short-episodes-head h6 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.sv-short-plot p {
    margin: 0;
    color: var(--sv-short-muted);
    font-size: 14px;
    line-height: 1.7;
}

.sv-short-episodes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sv-short-episodes-count {
    color: var(--sv-short-muted);
    font-size: 13px;
}

.sv-short-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 14px;
}

.sv-short-range {
    padding: 0;
    color: var(--sv-short-muted);
    font-size: 13px;
    background: none;
    border: 0;
    cursor: pointer;
}

.sv-short-range.active {
    color: var(--main);
    font-weight: 700;
}

.sv-short-episode-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.sv-short-episode {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    background: var(--sv-short-chip);
    border-radius: 8px;
    transition: 0.15s ease;
}

.sv-short-episode:hover {
    color: #ffffff;
    background: var(--sv-short-chip-hover);
}

.sv-short-episode.active {
    color: #ffffff;
    background: var(--main);
}

.sv-short-episode.locked {
    color: rgba(255, 255, 255, 0.4);
}

.sv-short-lock {
    position: absolute;
    top: 4px;
    inset-inline-end: 5px;
    font-size: 10px;
    opacity: 0.75;
}

/* Three bars bouncing, the usual "this one is playing" cue. */
.sv-short-playing {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 14px;
}

.sv-short-playing span {
    display: block;
    width: 3px;
    height: 100%;
    background: #ffffff;
    border-radius: 2px;
    animation: sv-short-bars 0.9s ease-in-out infinite;
}

.sv-short-playing span:nth-child(2) {
    animation-delay: 0.15s;
}

.sv-short-playing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes sv-short-bars {

    0%,
    100% {
        transform: scaleY(0.35);
    }

    50% {
        transform: scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-short-playing span {
        animation: none;
        transform: scaleY(0.6);
    }
}

/* -------------------------------------------------------------------------- *
 * Narrow screens: the panel goes under the stage.
 * -------------------------------------------------------------------------- */

@media (max-width: 1199px) {

    .sv-short-page {
        display: block;
        min-height: calc(100vh - var(--sv-header-h, 90px));
        min-height: calc(100dvh - var(--sv-header-h, 90px));
    }

    /*
     * Size the player from its width here, never from a percentage height.
     *
     * The desktop rule is `height: 100%`, which only resolves because the flex
     * row gives the stage a definite height. Once the page becomes a block the
     * stage has min-height and nothing more, a percentage height resolves to
     * auto, and since every child of the player is absolutely positioned there
     * is no content left to size the box from — the whole 9:16 column collapses
     * to 0x0 and all you see is the stage's black background.
     *
     * A definite width plus aspect-ratio has no such dependency, and filling the
     * width is what a vertical video wants on a phone anyway. The 85vh cap stops
     * a tall column from running off the bottom on wider tablets.
     */
    .sv-short-stage {
        height: auto;
        min-height: calc(100vh - var(--sv-header-h, 90px));
        min-height: calc(100dvh - var(--sv-header-h, 90px));
        padding: 0;
    }

    /*
     * Fullscreen at this width: .sv-short-page is forced to fill the screen
     * exactly by the browser's own fullscreen styling (author CSS can't
     * override that part), which is what makes it a definite height here —
     * unlike the plain block layout above, where the stage has to subtract
     * --sv-header-h itself because nothing else gives it one. There's no
     * header sharing space with it in fullscreen, so subtracting its height
     * would just leave a blank gap the size of the header; filling the
     * fullscreen box outright is both simpler and correct. Higher
     * specificity than the plain .sv-short-stage rule above wins regardless
     * of source order, the same trick the panel's :fullscreen rules use.
     */
    .sv-short-page:fullscreen .sv-short-stage,
    .sv-short-page:-webkit-full-screen .sv-short-stage {
        height: 100%;
        min-height: 0;
    }

    .sv-short-player {
        width: min(100%, calc(85vh * 9 / 16));
        width: min(100%, calc(85dvh * 9 / 16));
        height: 100%;
        max-height: 100%;
        position: absolute !important;
        width: 100%;
    }

    /*
     * On a phone the panel is a fixed sheet over the stage instead of a long
     * block under the player — closed until the viewer asks for it via
     * .sv-short-panel-toggle (drama.js toggles .sv-panel-open on
     * .sv-short-page), which is also why the ordering below — putting the
     * episode grid right after the title — still matters: it's the first
     * thing shown once the sheet opens.
     */
    .sv-short-panel {
        display: none;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        flex-direction: column;
        width: 100%;
        max-height: 80vh;
        z-index: 40;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4);
    }

    .sv-short-page.sv-panel-open .sv-short-panel {
        display: flex;
        animation: fadeInUp 0.5s both;
        padding-inline-end: 60px;
    }

    .sv-short-panel-toggle {
        display: flex;
    }

    /* Above the sheet, and kept visible while it's open — otherwise the
       one button that closes it can auto-hide (or sit under it) with no
       way back. */
    .sv-short-page.sv-panel-open .sv-short-stage-controls {
        z-index: 41;
        opacity: 1;
        pointer-events: auto;
    }

    .sv-short-stage-controls {
        inset-inline-end: 12px;
        bottom: 160px;
    }

    .sv-short-panel>.sv-short-breadcrumbs {
        order: 1;
    }

    .sv-short-panel>.sv-short-title {
        order: 2;
    }

    .sv-short-panel>.sv-short-episodes {
        order: 3;
        margin-bottom: 26px;
    }

    .sv-short-panel>.jws-category-extra {
        order: 4;
    }

    .sv-short-panel>.jws-tool {
        order: 5;
    }

    .sv-short-panel>.sv-short-plot {
        order: 6;
    }
}

@media (max-width: 575px) {
    .sv-short-stage-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .sv-short-panel {
        padding: 20px 16px 32px;
    }

    .sv-short-title {
        font-size: 20px;
    }

    /* auto-fill instead of a fixed column count: chips stay >= 48px (a safe
       touch target) whether the phone is 320px or 480px wide, instead of
       stretching or squeezing 5 fixed columns. */
    .sv-short-episode-grid {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    }

    .sv-short-range {
        padding: 6px 2px;
        font-size: 14px;
    }
}

/* -------------------------------------------------------------------------- *
 * Coin wallet (account area)
 * -------------------------------------------------------------------------- */

.sv-coin-balance {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    background: var(--background-item);
    border-radius: 12px;
}

.sv-coin-balance-value {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--heading);
}

.sv-coin-tabs {
    display: flex;
    gap: 4px;
    margin: 32px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sv-coin-tab {
    padding: 10px 4px;
    margin-bottom: -1px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    font-weight: 600;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: 0.15s ease;
}

.sv-coin-tab+.sv-coin-tab {
    margin-inline-start: 20px;
}

.sv-coin-tab:hover {
    color: #ffffff;
}

.sv-coin-tab.active {
    color: #ffffff;
    border-bottom-color: var(--main, #7b61ff);
}

.sv-coin-tab-panel {
    margin-top: 18px;
}

.sv-coin-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.sv-coin-package {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 20px 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.sv-coin-package-amount {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}

.sv-coin-package-unit {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sv-coin-package-price {
    margin: 6px 0 12px;
    font-size: 15px;
}

.sv-coin-package .sv-short-play {
    min-width: 0;
    width: 100%;
    height: 38px;
}

.sv-coin-table {
    width: 100%;
    border-collapse: collapse;
}

.sv-coin-table th,
.sv-coin-table td {
    padding: 10px 10px 10px 0;
    text-align: start;
    font-size: var(--font-size-sm);
}

.sv-coin-table th {
    color: var(--heading);
}

.sv-coin-table .is-in {
    color: #3fb950;
}

.sv-coin-table .is-out {
    color: #e5484d;
}

.sv-coin-empty {
    padding: 18px 0;
    color: rgba(255, 255, 255, 0.55);
}

/* The unlock button while its request is in flight. */
.sv-short-unlock.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* -------------------------------------------------------------------------- *
 * Buy panel
 *
 * Opens over the watch screen and over the Coins tab, so it carries its own
 * dark palette rather than inheriting either one.
 * -------------------------------------------------------------------------- */

.sv-buy-modal {
    --sv-buy-bg: #1b1b1d;
    --sv-buy-card: #262628;
    --sv-buy-line: rgba(255, 255, 255, 0.08);
    --sv-buy-muted: rgba(255, 255, 255, 0.55);
    --sv-buy-gold: linear-gradient(140deg, #fbe6bd 0%, #f3cd94 100%);
    --sv-buy-red: #e5342b;

    position: fixed;
    z-index: 100000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.sv-buy-modal[hidden] {
    display: none;
}

.sv-buy-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.sv-buy-panel {
    position: relative;
    width: 100%;
    max-width: 780px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    background: rgba(0, 3, 28, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(30px);
}

/*
 * The coin. Sized in em so it scales with whatever text sits beside it,
 * whether that's the CSS-drawn default (no coin glyph in the icon font) or
 * the admin's own image from Drama Coins → General → Coin icon.
 */
.sv-coin-ico {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-inline-end: 0.35em;
    vertical-align: -0.15em;
    border-radius: 50%;
}

.sv-coin-ico:not(.sv-coin-ico--custom) {
    background: radial-gradient(circle at 35% 30%, #ffe9a8 0%, #f0b83f 55%, #c98a1c 100%);
    box-shadow: inset 0 0 0 0.09em rgba(255, 255, 255, 0.45);
}

.sv-coin-ico--custom {
    object-fit: cover;
    border-radius: 0;
}

/* Head ---------------------------------------------------------------------- */

.sv-buy-head {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid var(--sv-buy-line);
}

.sv-buy-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 15px;
}

.sv-buy-meta strong {
    font-weight: 700;
}

.sv-buy-sep {
    width: 1px;
    height: 18px;
    background: var(--sv-buy-line);
}

.sv-buy-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #ffffff;
    font-size: 17px;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s ease;
}

.sv-buy-close:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Body ---------------------------------------------------------------------- */

.sv-buy-body {
    max-height: calc(100vh - 130px);
    padding: 24px 28px 30px;
    overflow-y: auto;
}

.sv-buy-title {
    margin: 26px 0 2px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

.sv-buy-body>.sv-buy-title:first-child {
    margin-top: 0;
}

.sv-buy-sub {
    margin: 0 0 14px;
    color: var(--sv-buy-muted);
    font-size: 13px;
}

.sv-buy-empty {
    margin: 0;
    color: var(--sv-buy-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* Plans --------------------------------------------------------------------- */

.sv-buy-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* An <a> to the PMPro checkout, so it has to shed the theme's link styling. */
.sv-buy-plan {
    position: relative;
    display: block;
    overflow: hidden;
    color: #3d2c10;
    text-decoration: none;
    background: var(--sv-buy-gold);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s ease;
}

.sv-buy-plan:hover,
.sv-buy-plan:focus {
    color: #3d2c10;
    text-decoration: none;
}

.sv-buy-plan:hover {
    transform: translateY(-2px);
}

.sv-buy-plan-main {
    display: block;
    padding: 20px 22px 16px;
}

.sv-buy-plan-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.sv-buy-plan-price {
    display: block;
    margin: 6px 0 8px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}

.sv-buy-plan-price s {
    margin-inline-start: 8px;
    font-size: 17px;
    font-weight: 600;
    opacity: 0.55;
}

.sv-buy-plan-note {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0.8;
}

.sv-buy-plan-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    padding: 10px 22px;
    background: rgba(0, 0, 0, 0.07);
}

.sv-buy-plan-feats span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12.5px;
    font-weight: 500;
}

/* The badge sits on both a plan and a package, so it is styled once. */
.sv-buy-off {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    padding: 3px 9px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--sv-buy-red);
    border-start-end-radius: 10px;
    border-end-start-radius: 10px;
}

/* Packages ------------------------------------------------------------------ */

.sv-buy-packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sv-buy-pack {
    position: relative;
    padding: 18px 18px 16px;
    background: var(--background-item);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s ease;
    color: var(--heading);
}

.sv-buy-pack:hover {
    border-color: var(--main);
}

.sv-buy-pack-total {
    display: block;
    font-size: 20px;
    font-weight: 800;
}

.sv-buy-pack-split {
    display: block;
    margin: 8px 0 16px;
    font-size: 12.5px;
    line-height: 1.6;
}

.sv-buy-pack-price {
    display: block;
    font-size: 17px;
    font-weight: 700;
}


/* Payment ------------------------------------------------------------------- */

.sv-buy-gateways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/*
 * display:flex on the button beats the [hidden] attribute, and the wallet
 * buttons are rendered hidden until the browser says it can open them — without
 * this they would all show and Apple Pay would dead-end on a machine that has
 * never seen it.
 */
.sv-buy-gateway[hidden] {
    display: none;
}

.sv-buy-gateway {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 8px 16px;
    color: #ffffff;
    background: var(--sv-buy-card);
    border: 2px solid var(--sv-buy-line);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s ease;
}

.sv-buy-gateway:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.sv-buy-gateway.is-selected {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.sv-buy-gateway strong {
    font-size: 15px;
    font-weight: 700;
}

.sv-buy-gateway small {
    color: var(--sv-buy-muted);
    font-size: 11.5px;
}

/*
 * Brand marks: these are plain text labels on purpose. Apple and Google both
 * require their own button artwork for a live integration — Apple Pay from the
 * Human Interface Guidelines, Google Pay from its brand guidelines, or both
 * rendered for you by Stripe's Express Checkout Element. Swap them in here.
 */
.sv-buy-gateway--apple_pay strong,
.sv-buy-gateway--google_pay strong,
.sv-buy-gateway--paypal strong {
    letter-spacing: 0.01em;
}

.sv-buy-gateway--paypal strong {
    font-style: italic;
}

/* A card is the buy button, so it shows the request it started. */
.sv-buy-plan.is-busy,
.sv-buy-pack.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.sv-buy-plan:active,
.sv-buy-pack:active {
    transform: scale(0.99);
}

.sv-buy-error {
    margin: 14px 0 0;
    color: #ff6b63;
    font-size: 13px;
}

/* Stop the page behind the panel scrolling with it. */
body.sv-buy-lock {
    overflow: hidden;
}

/* The account page prints the balance and the Top up button side by side. */
.sv-coin-balance .sv-coin-topup {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding: 0 26px;
}

@media (max-width: 1024px) {
    .sv-buy-packs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sv-buy-modal {
        padding: 0;
    }

    .sv-buy-panel {
        max-width: none;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .sv-buy-body {
        max-height: calc(100vh - 82px);
        padding: 20px 18px 28px;
    }

    .sv-buy-head {
        padding: 18px;
    }

    .sv-buy-plans,
    .sv-buy-packs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-buy-plan-price {
        font-size: 24px;
    }
}