/* ==========================================================================
   Ported 1:1 from the original app/globals.css design tokens.
   DO NOT change these values — they define the exact look of the project.
   ========================================================================== */

@font-face {
    font-family: "IRANYekan";
    src: url("../fonts/sans/sans.woff2") format("woff2"),
    url("../fonts/sans/sans.woff") format("woff"),
    url("../fonts/sans/sans.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



.wb-jackpot-widget:not(#wbjp) * {
    border-color: var(--border);
    box-sizing: border-box;
}

.wb-jackpot-widget:not(#wbjp) {
    font-family: "IRANYekan", "Vazirmatn", Tahoma, sans-serif;
    direction: rtl;
    text-align: right;
    /* don't inherit typography from the Elementor section / theme wrapper */
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-shadow: none;
}

/* ==========================================================================
   Host-style reset. Elementor kits and themes style bare elements
   (`.elementor-kit-N button:hover`, `input[type=text]`, `.elementor img`,
   `h2`, `p`, `a`…). Every rule in this file is prefixed with
   `.wb-jackpot-widget:not(#wbjp)` — the `:not(#id)` adds ID-level
   specificity so those globals can never win — and this block puts the
   native elements back to a neutral baseline. `:where()` keeps it at the
   prefix's own weight so every component rule below still beats it.
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) :where(button, input, textarea, select) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    min-height: 0;
    min-width: 0;
}
.wb-jackpot-widget:not(#wbjp) :where(h1, h2, h3, h4, h5, h6, p, label, form) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: none;
    text-shadow: none;
}
.wb-jackpot-widget:not(#wbjp) :where(a, a:hover, a:focus, a:visited, a:active) {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
    background-color: transparent;
}
.wb-jackpot-widget:not(#wbjp) :where(img) {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Jackpot theme — warm wine / cerise / gold, matched to the final game
   render (assets/raw/images/Screenshot.png). Scoped to the widget so the
   host theme is untouched; only re-points the shadcn tokens the
   components already read. The whole machine is drawn in HTML/CSS below —
   no board / lever / base images.
   ========================================================================== */
.wb-jackpot-widget {
    --background: #071e1b;
    --foreground: #f4e7d9;
    --card: #0d2f2a;
    --card-foreground: #f4e7d9;
    --popover: #0d2f2a;
    --popover-foreground: #f4e7d9;
    --primary: #0f6b5c;
    --primary-foreground: #ffffff;
    --secondary: #123a34;
    --secondary-foreground: #f4e7d9;
    --muted: #0d2f2a;
    --muted-foreground: #a8c9c2;
    --accent: #123a34;
    --accent-foreground: #f4e7d9;
    --destructive: #ff5470;
    --border: rgb(255 255 255 / 0.12);
    --input: rgb(255 255 255 / 0.18);
    --ring: #f0c24a;

    --wjp-gold: #f2c14e;
    --wjp-gold-deep: #b9862a;
    --wjp-cerise: #0f6b5c;
    --wjp-cerise-2: #0a4038;
    --wjp-cream: #f6ecd9;
    --wjp-wine: #071e1b;
    --wjp-maroon: #123a34;
    --wjp-bulb: #ffe08a;

    /* دکمه‌ی شناور — پیش‌فرض: همان رنگ‌های پایه‌ی ویجت */
    --wjp-fab-gold: var(--wjp-gold);
    --wjp-fab-gold-deep: var(--wjp-gold-deep);
    --wjp-fab-bulb: var(--wjp-bulb);
    --wjp-fab-face: var(--wjp-cerise);
    --wjp-fab-seven: #c8102e;
    --wjp-fab-label-bg: var(--wjp-cerise-2);
    --wjp-fab-label-bg-2: var(--wjp-wine);
    --wjp-fab-title: var(--wjp-cream);
    --wjp-fab-kicker: var(--wjp-gold);
    --wjp-fab-badge: #e11d48;
    --wjp-fab-badge-text: #ffffff;

    --radius: 0.65rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
}

/* For Chrome, Safari, Edge, Opera */
.wb-jackpot-widget:not(#wbjp) input::-webkit-outer-spin-button,
.wb-jackpot-widget:not(#wbjp) input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
.wb-jackpot-widget:not(#wbjp) input[type="number"] {
    -moz-appearance: textfield;
}

@keyframes wjp-glow {
    0%,
    100% {
        box-shadow:
                0 0 6px var(--wjp-cerise, #0f6b5c),
                0 0 16px var(--wjp-cerise, #0f6b5c),
                0 0 28px rgb(15 108 92 / 0.35);
    }
    50% {
        box-shadow:
                0 0 8px var(--wjp-gold, #f2c14e),
                0 0 20px var(--wjp-gold, #f2c14e),
                0 0 34px rgb(240 194 74 / 0.4);
    }
}

@keyframes wjp-marquee-chase {
    to {
        background-position:
                28px 0,
                -28px 100%,
                0 -28px,
                100% 28px;
    }
}

.wb-jackpot-widget:not(#wbjp) .animate-glow {
    animation: wjp-glow 2s ease-in-out infinite;
}

@keyframes wjp-spin {
    to {
        transform: rotate(360deg);
    }
}
.wb-jackpot-widget:not(#wbjp) .animate-spin {
    animation: wjp-spin 1s linear infinite;
}

@keyframes wjp-caret-blink {
    0%,
    70%,
    100% {
        opacity: 1;
    }
    20%,
    50% {
        opacity: 0;
    }
}
.wb-jackpot-widget:not(#wbjp) .animate-caret-blink {
    animation: wjp-caret-blink 1.25s ease-out infinite;
}

/* ==========================================================================
   Overlay / Drawer (bottom sheet) — visual port of vaul + shadcn Drawer

   Both live inside `.wb-jackpot-panel` and are bounded by it, never by the
   viewport — so in `inline` mode the sheet stays inside the game box instead
   of floating over the page / footer while scrolling:
   - `.overlay` is absolute → covers exactly the panel.
   - `.wjp-drawer-dock` is absolute → fills the panel and clips to it, and
     stacks the sheet at its bottom edge.
   - `.drawer-content` is `position: sticky; bottom: 0` inside the dock: while
     the game box is taller than the screen it rides the bottom of the
     viewport, but a sticky box can never leave its container, so it stops at
     the game's own edges. `overflow: clip` (not `hidden`) on the dock clips
     the slid-down closed sheet without becoming a scroll container, which
     would stop sticky from tracking the page scroll.
   In side / fixed / bottom modes the panel is itself viewport-sized, so the
   result is the same sheet-at-the-bottom-of-the-panel as before.
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) .overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    border-radius: inherit;
    background-color: rgb(0 0 0 / 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.wb-jackpot-widget:not(#wbjp) .overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.wb-jackpot-widget:not(#wbjp) .wjp-drawer-dock {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: inherit;
    overflow: hidden;
    overflow: clip;
    pointer-events: none;
}

.wb-jackpot-widget:not(#wbjp) .drawer-content {
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: min(80vh, calc(100% - 2rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
    border-top: 1px solid var(--border);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    background-color: var(--background);
    max-width: 24rem;
    margin-inline: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.wb-jackpot-widget:not(#wbjp) .drawer-content.is-open {
    transform: translateY(0);
    pointer-events: auto;
}
.wb-jackpot-widget:not(#wbjp) .drawer-handle {
    margin: 1rem auto 0;
    height: 0.375rem;
    width: 88px;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.22);
}

/* ==========================================================================
   Alert dialog — visual port of radix AlertDialog
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) .alert-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: rgb(0 0 0 / 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.wb-jackpot-widget:not(#wbjp) .alert-dialog-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.wb-jackpot-widget:not(#wbjp) .alert-dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 50;
    display: grid;
    width: 100%;
    max-width: calc(100% - 2rem);
    gap: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background-color: var(--background);
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    pointer-events: none;
}
.wb-jackpot-widget:not(#wbjp) .alert-dialog-content.is-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}
@media (min-width: 640px) {
    .wb-jackpot-widget:not(#wbjp) .alert-dialog-content {
        max-width: 24rem;
    }
}

/* ==========================================================================
   Toast (sonner replacement)
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) .toast-root {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 24rem;
    padding: 0 1rem;
    pointer-events: none;
}
.wb-jackpot-widget:not(#wbjp) .toast-item {
    pointer-events: auto;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}
.wb-jackpot-widget:not(#wbjp) .toast-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.wb-jackpot-widget:not(#wbjp) .toast-item.toast-error {
    border-color: var(--destructive);
    color: var(--destructive);
}

/* OTP slot */
.wb-jackpot-widget:not(#wbjp) .otp-slot {
    position: relative;
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--input);
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: all 0.15s ease;
    background-color: transparent;
}
.wb-jackpot-widget:not(#wbjp) .otp-slot.is-active {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgb(from var(--ring) r g b / 0.5);
    z-index: 10;
}
.wb-jackpot-widget:not(#wbjp) .otp-caret {
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wb-jackpot-widget:not(#wbjp) .otp-caret span {
    height: 1rem;
    width: 1px;
    background-color: var(--foreground);
}

/* ==========================================================================
   Generic utilities (referenced directly by class name from JS)
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) .hidden {
    display: none !important;
}
.wb-jackpot-widget:not(#wbjp) .cursor-not-allowed {
    cursor: not-allowed;
}
.wb-jackpot-widget:not(#wbjp) .opacity-55 {
    opacity: 0.55;
}
.wb-jackpot-widget:not(#wbjp) .text-primary-inline {
    color: var(--primary);
}
.wb-jackpot-widget:not(#wbjp) .text-pink {
    color: var(--wjp-cerise, #0f6b5c);
}

/* ==========================================================================
   State screens (loading / missing game / inactive)
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) .state-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.wb-jackpot-widget:not(#wbjp) .state-screen-full {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.wb-jackpot-widget:not(#wbjp) .state-screen-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.wb-jackpot-widget:not(#wbjp) .state-text {
    color: rgb(255 255 255 / 0.7);
}
.wb-jackpot-widget:not(#wbjp) .spinner {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    border-bottom: 2px solid var(--primary);
    animation: wjp-spin 1s linear infinite;
}

/* ==========================================================================
   Game board — sized to fill the modal panel
   ========================================================================== */

.wb-jackpot-widget:not(#wbjp) .game-container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2.25rem 1.25rem 1.75rem;
    background-color: var(--wjp-wine, #051a1c);
    background-image:
            radial-gradient(70% 38% at 50% 22%, rgb(28 110 104 / 0.55), transparent 70%),
            radial-gradient(60% 30% at 50% 100%, rgb(233 185 73 / 0.16), transparent 70%),
            radial-gradient(120% 80% at 50% 50%, #0a2a2c 0%, #051a1c 60%, #031113 100%);
}

/* ==========================================================================
   Slot machine — 100% HTML/CSS/SVG
   ========================================================================== */
.wb-jackpot-widget .wjp-machine {
    --wjp-g1: #fff4c7;
    --wjp-g2: #f5cf6a;
    --wjp-g3: #e2a73a;
    --wjp-g4: #a8741f;
    --wjp-g5: #6e4a12;
    --wjp-t1: #1b5f5a;
    --wjp-t2: #0f4441;
    --wjp-t3: #0a3030;
    --wjp-t4: #061f20;
    --wjp-metal-gold: linear-gradient(180deg, var(--wjp-g1) 0%, var(--wjp-g2) 22%, var(--wjp-g3) 48%, var(--wjp-g4) 78%, var(--wjp-g2) 100%);
}
.wb-jackpot-widget:not(#wbjp) .wjp-machine {
    margin-inline: auto;
    max-width: 23rem;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Dome header ---------------------------------------------------------- */
.wb-jackpot-widget:not(#wbjp) .wjp-marquee {
    position: relative;
    width: 96%;
    aspect-ratio: 1 / 0.8;
    margin-top: 1.4rem;
    margin-bottom: -2.25rem;
    border-radius: 50% 50% 0 0 / 62% 62% 0 0;
    background:
            radial-gradient(90% 70% at 50% 30%, #103b3c 0%, #0a2a2c 55%, #06191b 100%);
    box-shadow:
            inset 0 1px 0 rgb(255 255 255 / 0.08),
            inset 0 30px 60px -30px rgb(0 0 0 / 0.7),
            0 -8px 40px -12px rgb(233 185 73 / 0.25);
    z-index: 1;
}
/* hairline gold rim tracing the dome */
.wb-jackpot-widget:not(#wbjp) .wjp-marquee-lights {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(180deg, #ffe9a6, #e2a73a 45%, rgb(168 116 31 / 0.2) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 6px rgb(245 207 106 / 0.45));
    pointer-events: none;
}
.wb-jackpot-widget:not(#wbjp) .wjp-logo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 23%;
    min-width: 66px;
    aspect-ratio: 1;
    padding: 4px;
    border-radius: 50%;
    background: var(--wjp-metal-gold);
    transform: translate(-50%, -50%);
    box-shadow:
            0 0 0 1px rgb(0 0 0 / 0.55),
            inset 0 1px 0 rgb(255 255 255 / 0.7),
            0 0 18px rgb(245 207 106 / 0.35),
            0 8px 14px rgb(0 0 0 / 0.55);
    z-index: 2;
}
.wb-jackpot-widget:not(#wbjp) .wjp-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20% 16% 22%;
    object-fit: contain;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #ffffff 0%, #f8f1e1 60%, #e8d6ad 100%);
    box-shadow:
            inset 0 0 0 1px rgb(110 74 18 / 0.45),
            inset 0 3px 8px rgb(120 80 20 / 0.3);
}
.wb-jackpot-widget:not(#wbjp) .wjp-marquee-inner {
    position: absolute;
    inset: 20% 6% 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}
.wb-jackpot-widget:not(#wbjp) .wjp-crown {
    width: 9%;
    min-width: 26px;
    height: auto;
    color: var(--wjp-g2);
    filter: drop-shadow(0 2px 0 var(--wjp-g5)) drop-shadow(0 3px 6px rgb(0 0 0 / 0.5));
    margin-bottom: 0.45rem;
}
.wb-jackpot-widget:not(#wbjp) .wjp-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Vazirmatn", "IRANYekan", Tahoma, sans-serif;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.wb-jackpot-widget:not(#wbjp) .wjp-headline-gold {
    font-size: clamp(1.6rem, 9vw, 2.6rem);
    background: linear-gradient(180deg, #fff7d1 0%, #ffd96b 34%, #f0b02f 62%, #c77f16 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0.5px rgb(110 74 18 / 0.6);
    filter:
            drop-shadow(0 1px 0 #c78a22)
            drop-shadow(0 1px 0 #9a6214)
            drop-shadow(0 2px 0 #6e430c)
            drop-shadow(0 2px 0 #4a2c07)
            drop-shadow(0 10px 12px rgb(0 0 0 / 0.6));
}
.wb-jackpot-widget:not(#wbjp) .wjp-headline-white {
    font-size: clamp(1.5rem, 8.2vw, 2.35rem);
    margin-top: 0.1em;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #d6e6e4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
            drop-shadow(0 1px 0 #b9d6d2)
            drop-shadow(0 1px 0 #3f8a84)
            drop-shadow(0 2px 0 #1d5752)
            drop-shadow(0 2px 0 #0c3431)
            drop-shadow(0 10px 12px rgb(0 0 0 / 0.6));
}
.wb-jackpot-widget:not(#wbjp) .wjp-tagline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0.7rem 0 0;
    font-size: clamp(0.72rem, 3.4vw, 0.9rem);
    font-weight: 700;
    color: #f3f7f6;
    white-space: nowrap;
}
.wb-jackpot-widget:not(#wbjp) .wjp-tagline-line {
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--wjp-g2));
}
.wb-jackpot-widget:not(#wbjp) .wjp-tagline-line:last-child {
    background: linear-gradient(90deg, var(--wjp-g2), transparent);
}

/* --- Machine body --------------------------------------------------------- */
.wb-jackpot-widget:not(#wbjp) .wjp-body {
    position: relative;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Cabinet (reels + lever) ---------------------------------------------- */
.wb-jackpot-widget:not(#wbjp) .wjp-cabinet {
    position: relative;
    width: 100%;
    padding: 0.85rem;
    border-radius: 2rem;
    background:
            linear-gradient(180deg, rgb(255 255 255 / 0.14) 0%, transparent 10%),
            linear-gradient(180deg, var(--wjp-t1) 0%, var(--wjp-t2) 35%, var(--wjp-t3) 75%, var(--wjp-t4) 100%);
    box-shadow:
            inset 0 2px 0 rgb(160 230 220 / 0.35),
            inset 0 0 0 1px rgb(120 200 190 / 0.18),
            inset 0 -14px 24px rgb(0 0 0 / 0.45),
            0 0 0 1px rgb(0 0 0 / 0.5),
            0 26px 40px -18px rgb(0 0 0 / 0.85);
    z-index: 2;
}
/* side "ears" of the cabinet */
.wb-jackpot-widget:not(#wbjp) .wjp-ear {
    position: absolute;
    top: 22%;
    height: 52%;
    width: 16px;
    background: linear-gradient(90deg, var(--wjp-t4), var(--wjp-t1) 55%, var(--wjp-t3));
    box-shadow: inset 0 0 0 1px rgb(120 200 190 / 0.2), 0 6px 14px rgb(0 0 0 / 0.5);
    z-index: -1;
}
.wb-jackpot-widget:not(#wbjp) .wjp-ear-start {
    inset-inline-start: -12px;
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
}
.wb-jackpot-widget:not(#wbjp) .wjp-ear-end {
    inset-inline-end: -12px;
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
}

/* --- Lever: socket on the (visual) left ear + gold rod & ball ------------- */
.wb-jackpot-widget:not(#wbjp) .lever-mount {
    position: absolute;
    top: 40%;
    right: -14px;
    width: 26px;
    height: 44px;
    z-index: 4;
    border-radius: 10px;
    background: var(--wjp-metal-gold);
    box-shadow:
            inset 0 0 0 1px rgb(255 255 255 / 0.35),
            inset 0 -4px 6px rgb(0 0 0 / 0.3),
            0 4px 10px rgb(0 0 0 / 0.55);
}
.wb-jackpot-widget:not(#wbjp) .lever-mount::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #3a2a0c, #140e04);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.4);
    z-index: 2;
}
.wb-jackpot-widget:not(#wbjp) .lever {
    position: absolute;
    left: 50%;
    bottom: 50%;
    margin-left: -17px;
    width: 34px;
    height: 118px;
    z-index: 1;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: transform 0.5s ease-out;
}
.wb-jackpot-widget:not(#wbjp) .lever::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 9px;
    height: calc(100% - 26px);
    transform: translateX(-50%);
    border-radius: 5px;
    background: linear-gradient(90deg, var(--wjp-g5), var(--wjp-g2) 38%, var(--wjp-g1) 50%, var(--wjp-g3) 64%, var(--wjp-g5));
    box-shadow: 0 3px 8px rgb(0 0 0 / 0.45);
}
.wb-jackpot-widget:not(#wbjp) .lever::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 34px;
    height: 34px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fffbe6 0%, var(--wjp-g2) 22%, var(--wjp-g3) 55%, var(--wjp-g5) 100%);
    box-shadow:
            inset 0 -4px 8px rgb(80 50 8 / 0.55),
            0 6px 12px rgb(0 0 0 / 0.55);
}

/* --- Reel window: gold bezel + dark well + cream reels -------------------- */
.wb-jackpot-widget:not(#wbjp) .wjp-reel-frame {
    position: relative;
    width: 100%;
    height: min(300px, 74vw);
    border-radius: 1.4rem;
    padding: 5px;
    background: var(--wjp-metal-gold);
    box-shadow:
            0 0 0 1px rgb(0 0 0 / 0.55),
            0 0 18px rgb(245 207 106 / 0.28),
            inset 0 1px 0 rgb(255 255 255 / 0.7);
}
/* payline markers */
.wb-jackpot-widget:not(#wbjp) .wjp-reel-frame::before,
.wb-jackpot-widget:not(#wbjp) .wjp-reel-frame::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-block: 7px solid transparent;
    transform: translateY(-50%);
    z-index: 3;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.6));
}
.wb-jackpot-widget:not(#wbjp) .wjp-reel-frame::before {
    left: 1px;
    border-left: 9px solid var(--wjp-g1);
}
.wb-jackpot-widget:not(#wbjp) .wjp-reel-frame::after {
    right: 1px;
    border-right: 9px solid var(--wjp-g1);
}

.wb-jackpot-widget:not(#wbjp) .reels-row {
    position: relative;
    height: 100%;
    display: flex;
    width: 100%;
    padding: 6px;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #020b0c, #0a2324 50%, #020b0c);
    box-shadow: inset 0 3px 8px rgb(0 0 0 / 0.9), inset 0 0 0 1px rgb(0 0 0 / 0.6);
}
/* glass: top reflection + cylinder shading over the reels */
.wb-jackpot-widget:not(#wbjp) .reels-row::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 0.8rem;
    pointer-events: none;
    z-index: 2;
    background:
            linear-gradient(180deg, rgb(255 255 255 / 0.28) 0%, rgb(255 255 255 / 0.06) 14%, transparent 30%),
            linear-gradient(180deg, rgb(20 14 2 / 0.38) 0%, transparent 26%, transparent 74%, rgb(20 14 2 / 0.42) 100%);
}
.wb-jackpot-widget:not(#wbjp) .reels-inner {
    height: 100%;
    display: flex;
    width: 100%;
    margin-inline: auto;
    gap: 6px;
}
.wb-jackpot-widget:not(#wbjp) .reel-col {
    position: relative;
    flex: 1 1 0%;
    border-radius: 0.8rem;
    overflow: hidden;
    background: linear-gradient(180deg, #e9d8b1 0%, #fbf3e0 20%, #fffaf0 50%, #fbf3e0 80%, #e9d8b1 100%);
    box-shadow:
            inset 0 0 0 2px var(--wjp-g3),
            inset 0 0 0 3px rgb(255 244 199 / 0.7),
            inset 0 0 14px rgb(168 116 31 / 0.35);
}
.wb-jackpot-widget:not(#wbjp) .reel-swiper {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wb-jackpot-widget:not(#wbjp) .reel-slide {
    width: 100%;
    height: 100%;
    padding: 5px 6px;
}
.wb-jackpot-widget:not(#wbjp) .reel-slide-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: transparent;
}
.wb-jackpot-widget:not(#wbjp) .reel-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.2rem;
}
.wb-jackpot-widget:not(#wbjp) .reel-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 3px 3px rgb(90 60 10 / 0.25));
}
.wb-jackpot-widget:not(#wbjp) .reel-text-box {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    justify-content: center;
    align-items: center;
    padding-inline: 0.2rem;
    text-align: center;
    background: transparent;
    width: 100%;
    height: 100%;
}
/* gold coin medallion above each text prize */
.wb-jackpot-widget:not(#wbjp) .reel-text-box::before {
    content: "";
    flex: 0 0 auto;
    width: clamp(26px, 8.5vw, 34px);
    aspect-ratio: 1;
    margin-bottom: 0.2rem;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='a' cx='35%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23fffbe3'/%3E%3Cstop offset='.28' stop-color='%23f7d470'/%3E%3Cstop offset='.68' stop-color='%23e2a73a'/%3E%3Cstop offset='1' stop-color='%2394631a'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a86f1a'/%3E%3Cstop offset='1' stop-color='%23fff0b8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='19.5' fill='%237a5212'/%3E%3Ccircle cx='20' cy='19.6' r='18.6' fill='url(%23a)'/%3E%3Ccircle cx='20' cy='20' r='14.6' fill='none' stroke='url(%23b)' stroke-width='1.8'/%3E%3Cg fill='%238a5a12' transform='translate(0 .8)'%3E%3Cpath d='M20 9.5c3.6 4 3.8 11.6 0 16.5-3.8-4.9-3.6-12.5 0-16.5Z'/%3E%3Cpath d='M8 15.5c5.4 0 10.4 4 11.4 10.5-6 .2-10.6-3.8-11.4-10.5Z'/%3E%3Cpath d='M32 15.5c-5.4 0-10.4 4-11.4 10.5 6 .2 10.6-3.8 11.4-10.5Z'/%3E%3Crect x='19.1' y='25.5' width='1.8' height='5.5' rx='.9'/%3E%3C/g%3E%3Cg fill='%23fff3c4'%3E%3Cpath d='M20 9.5c3.6 4 3.8 11.6 0 16.5-3.8-4.9-3.6-12.5 0-16.5Z'/%3E%3Cpath d='M8 15.5c5.4 0 10.4 4 11.4 10.5-6 .2-10.6-3.8-11.4-10.5Z'/%3E%3Cpath d='M32 15.5c-5.4 0-10.4 4-11.4 10.5 6 .2 10.6-3.8 11.4-10.5Z'/%3E%3Crect x='19.1' y='25.5' width='1.8' height='5.5' rx='.9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 2px 2px rgb(90 60 10 / 0.4));
}
.wb-jackpot-widget:not(#wbjp) .reel-text-title {
    font-size: clamp(9px, 2.6vw, 11px);
    font-weight: 800;
    line-height: 1.2;
    color: #2a2418;
}
.wb-jackpot-widget:not(#wbjp) .reel-text-value {
    font-size: clamp(0.72rem, 3.2vw, 0.9rem);
    font-weight: 900;
    color: #c9790f;
    line-height: 1.1;
}

/* --- Base / plinth (controls + url) --------------------------------------- */
.wb-jackpot-widget:not(#wbjp) .wjp-base {
    position: relative;
    width: 106%;
    margin-top: -1.25rem;
    padding: 2.25rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border-radius: 1.4rem 1.4rem 1.75rem 1.75rem;
    background:
            linear-gradient(180deg, rgb(255 255 255 / 0.1) 0%, transparent 18%),
            linear-gradient(180deg, #0f4240 0%, #0a3032 45%, #061d1f 100%);
    box-shadow:
            inset 0 2px 0 rgb(245 207 106 / 0.55),
            inset 0 0 0 1px rgb(120 200 190 / 0.14),
            0 0 0 1px rgb(0 0 0 / 0.5),
            0 30px 40px -20px rgb(0 0 0 / 0.9);
    z-index: 1;
}

/* --- Controls row (spin + luck) ------------------------------------------- */
.wb-jackpot-widget:not(#wbjp) .controls-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
.wb-jackpot-widget:not(#wbjp) .controls-row-inner {
    display: flex;
    align-items: stretch;
    width: 100%;
    justify-content: space-between;
    gap: 0.65rem;
    height: 3.6rem;
}

.wb-jackpot-widget:not(#wbjp) .spin-btn {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    gap: 0.55rem;
    justify-content: center;
    align-items: center;
    padding-inline: 2rem 0.8rem;
    border: none;
    white-space: nowrap;
    border-radius: 1.1rem;
    cursor: pointer;
    font-family: "Vazirmatn", "IRANYekan", Tahoma, sans-serif;
    font-size: clamp(1.05rem, 5vw, 1.45rem);
    font-weight: 900;
    color: #0b1f1d;
    background: linear-gradient(180deg, #fff1b8 0%, #ffd760 30%, #f2b632 62%, #d18f1c 100%);
    box-shadow:
            inset 0 2px 0 rgb(255 255 255 / 0.85),
            inset 0 -4px 0 rgb(150 95 15 / 0.55),
            0 0 0 2px #7a5212,
            0 0 0 3px rgb(255 226 140 / 0.35),
            0 8px 18px -6px rgb(0 0 0 / 0.7),
            0 0 22px rgb(245 190 70 / 0.3);
    transition: transform 0.12s ease, filter 0.15s ease;
}
/* glossy top half */
.wb-jackpot-widget:not(#wbjp) .spin-btn::before {
    content: "";
    position: absolute;
    inset: 3px 6px 52% 6px;
    border-radius: 0.9rem 0.9rem 0.5rem 0.5rem;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.05));
    pointer-events: none;
}
/* slow sheen sweep */
.wb-jackpot-widget:not(#wbjp) .spin-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.45), transparent);
    transform: skewX(-18deg);
    animation: wjp-sheen 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes wjp-sheen {
    0%, 70% { left: -60%; }
    100%    { left: 130%; }
}
.wb-jackpot-widget:not(#wbjp) .spin-btn > * {
    position: relative;
    z-index: 1;
}
.wb-jackpot-widget:not(#wbjp) .spin-btn-chevron {
    position: absolute !important;
    inset-inline-start: 0.9rem;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%) scaleX(-1);
}
.wb-jackpot-widget:not(#wbjp) .spin-btn-bolt {
    width: 1.5rem;
    height: 1.5rem;
    color: #0b1f1d;
}
.wb-jackpot-widget:not(#wbjp) .spin-btn:hover {
    filter: brightness(1.05);
}
.wb-jackpot-widget:not(#wbjp) .spin-btn:active {
    transform: translateY(2px);
    box-shadow:
            inset 0 2px 0 rgb(255 255 255 / 0.6),
            inset 0 -2px 0 rgb(150 95 15 / 0.55),
            0 0 0 2px #7a5212,
            0 4px 10px -4px rgb(0 0 0 / 0.7);
}
.wb-jackpot-widget:not(#wbjp) .spin-btn:disabled {
    pointer-events: none;
    filter: saturate(0.6) brightness(0.85);
}
.wb-jackpot-widget:not(#wbjp) .icon-sm {
    width: 1rem;
    height: 1rem;
}
.wb-jackpot-widget:not(#wbjp) .icon-md {
    width: 1.25rem;
    height: 1.25rem;
}

.wb-jackpot-widget:not(#wbjp) .luck-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 0 0 36%;
    height: 100%;
    padding-inline: 0.8rem 0.7rem;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #0c2c2d, #051819);
    box-shadow:
            inset 0 0 0 1.5px rgb(64 170 160 / 0.55),
            inset 0 3px 8px rgb(0 0 0 / 0.6),
            0 1px 0 rgb(255 255 255 / 0.06);
}
.wb-jackpot-widget:not(#wbjp) .luck-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.wb-jackpot-widget:not(#wbjp) .luck-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgb(255 255 255 / 0.85);
}
.wb-jackpot-widget:not(#wbjp) .luck-value {
    margin-top: 0.15rem;
    font-family: "Vazirmatn", "IRANYekan", Tahoma, sans-serif;
    font-size: clamp(1.5rem, 7vw, 1.9rem);
    font-weight: 900;
    color: #ffffff;
}
.wb-jackpot-widget:not(#wbjp) .luck-icon {
    flex: 0 0 auto;
    width: clamp(1.5rem, 7vw, 1.9rem);
    height: clamp(1.5rem, 7vw, 1.9rem);
    color: var(--wjp-g2);
    filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.5));
}

/* --- URL bar ---------------------------------------------------------------- */
.wb-jackpot-widget:not(#wbjp) .wjp-urlbar {
    width: 100%;
    border-radius: 1.1rem;
    padding: 2px;
    background: linear-gradient(180deg, var(--wjp-g1), var(--wjp-g3) 50%, var(--wjp-g5));
    box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.7);
}
.wb-jackpot-widget:not(#wbjp) .wjp-urlbar a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 3.1rem;
    padding-inline: 0.75rem;
    border-radius: calc(1.1rem - 2px);
    background: linear-gradient(180deg, #0a2527, #041415);
    box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.7);
    color: #ffffff;
    text-decoration: none;
}
.wb-jackpot-widget:not(#wbjp) .wjp-urlbar-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-family: "Vazirmatn", "IRANYekan", Tahoma, sans-serif;
    font-weight: 800;
    font-size: clamp(0.92rem, 4.7vw, 1.3rem);
    letter-spacing: 0.01em;
    color: #ffffff;
}
.wb-jackpot-widget:not(#wbjp) .wjp-urlbar-globe,
.wb-jackpot-widget:not(#wbjp) .wjp-urlbar-copy,
.wb-jackpot-widget:not(#wbjp) .wjp-urlbar-cursor {
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    color: var(--wjp-g2);
}
.wb-jackpot-widget:not(#wbjp) .wjp-urlbar-copy {
    width: 1.1rem;
    height: 1.1rem;
    color: rgb(255 255 255 / 0.8);
}

/* --- Detached invite footer ------------------------------------------------ */
.wb-jackpot-widget:not(#wbjp) .wjp-invite {
    width: 100%;
    margin-top: 1rem;
}
.wb-jackpot-widget:not(#wbjp) .wjp-invite-btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    border-radius: 1.25rem;
    cursor: pointer;
    font-family: inherit;
    color: #ffffff;
    border: none;
    background:
            linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 40%),
            linear-gradient(180deg, #0b2a2b, #051718);
    box-shadow:
            inset 0 0 0 1.5px rgb(226 167 58 / 0.85),
            inset 0 0 0 3px rgb(0 0 0 / 0.35),
            0 0 16px rgb(245 207 106 / 0.18),
            0 12px 24px -12px rgb(0 0 0 / 0.8);
    transition: transform 0.12s ease;
}
.wb-jackpot-widget:not(#wbjp) .wjp-invite-btn:active {
    transform: scale(0.99);
}
.wb-jackpot-widget:not(#wbjp) .wjp-invite-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}
.wb-jackpot-widget:not(#wbjp) .wjp-invite-title {
    font-weight: 900;
    font-size: clamp(0.92rem, 4.2vw, 1.05rem);
    color: #ffffff;
}
.wb-jackpot-widget:not(#wbjp) .wjp-invite-sub {
    font-size: clamp(0.66rem, 3vw, 0.82rem);
    color: rgb(255 255 255 / 0.85);
}
.wb-jackpot-widget:not(#wbjp) .wjp-invite-divider {
    flex: 0 0 1px;
    align-self: stretch;
    margin-block: 0.2rem;
    background: linear-gradient(180deg, transparent, rgb(226 167 58 / 0.7), transparent);
}
.wb-jackpot-widget:not(#wbjp) .wjp-invite-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    color: var(--wjp-g2);
    filter: drop-shadow(0 2px 0 var(--wjp-g5));
}

@media (max-width: 380px) {
    .wb-jackpot-widget:not(#wbjp) .wjp-urlbar-copy {
        display: none;
    }
    .wb-jackpot-widget:not(#wbjp) .wjp-invite-btn {
        gap: 0.6rem;
        padding-inline: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-jackpot-widget:not(#wbjp) .spin-btn::after {
        animation: none;
        display: none;
    }
    .wb-jackpot-widget:not(#wbjp) .lever {
        transition: none;
    }
}

/* ==========================================================================
   Auth drawer forms (phone / OTP steps)
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) .drawer-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
}
@media (min-width: 768px) {
    .wb-jackpot-widget:not(#wbjp) .drawer-header {
        gap: 0.375rem;
        text-align: left;
    }
}
.wb-jackpot-widget:not(#wbjp) .drawer-title {
    color: var(--wjp-gold, #f0c24a);
    font-size: 1.25rem;
    font-weight: 800;
}
.wb-jackpot-widget:not(#wbjp) .drawer-desc {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.wb-jackpot-widget:not(#wbjp) .field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-inline: 1rem;
}
.wb-jackpot-widget:not(#wbjp) .field-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
}

.wb-jackpot-widget:not(#wbjp) .text-input {
    border: 1px solid var(--input);
    background: transparent;
    height: 2.75rem;
    width: 100%;
    min-width: 0;
    border-radius: var(--radius-md);
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
    outline: none;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    color: var(--foreground);
}
.wb-jackpot-widget:not(#wbjp) .text-input::placeholder {
    color: var(--muted-foreground);
}
.wb-jackpot-widget:not(#wbjp) .text-input:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgb(from var(--ring) r g b / 0.5);
}

.wb-jackpot-widget:not(#wbjp) .drawer-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    padding-bottom: 2rem;
}

.wb-jackpot-widget:not(#wbjp) .otp-step-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.wb-jackpot-widget:not(#wbjp) .otp-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-inline: 1rem;
    justify-content: center;
    align-items: center;
}
.wb-jackpot-widget:not(#wbjp) .otp-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.wb-jackpot-widget:not(#wbjp) .otp-native-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* ==========================================================================
   Buttons (shared)
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition:
            background-color 0.15s ease,
            opacity 0.15s ease;
}
.wb-jackpot-widget:not(#wbjp) .btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}
.wb-jackpot-widget:not(#wbjp) .btn-block {
    width: 100%;
}

.wb-jackpot-widget:not(#wbjp) .btn-primary {
    height: 3rem;
    padding-inline: 1.5rem;
    font-size: 1.125rem;
    background: linear-gradient(135deg, var(--wjp-cerise, #0f6b5c) 0%, var(--wjp-cerise-2, #0a4038) 100%);
    color: var(--primary-foreground);
    box-shadow: 0 8px 20px -6px rgb(15 108 92 / 0.55);
}
.wb-jackpot-widget:not(#wbjp) .btn-primary:hover {
    filter: brightness(1.06);
}

.wb-jackpot-widget:not(#wbjp) .btn-primary-sm {
    height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    background: linear-gradient(135deg, var(--wjp-cerise, #0f6b5c) 0%, var(--wjp-cerise-2, #0a4038) 100%);
    color: var(--primary-foreground);
    box-shadow: 0 8px 20px -6px rgb(15 108 92 / 0.5);
}
.wb-jackpot-widget:not(#wbjp) .btn-primary-sm:hover {
    filter: brightness(1.06);
}

.wb-jackpot-widget:not(#wbjp) .btn-outline {
    height: 2.25rem;
    padding-inline: 1rem;
    font-size: 0.875rem;
    background: var(--background);
    border: 1px solid var(--border);
    color: var(--foreground);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.wb-jackpot-widget:not(#wbjp) .btn-outline:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.wb-jackpot-widget:not(#wbjp) .btn-pink {
    height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    background: rgb(255 255 255 / 0.06);
    border: 1px solid var(--border);
    color: var(--foreground);
}
.wb-jackpot-widget:not(#wbjp) .btn-pink:hover {
    background: rgb(255 255 255 / 0.12);
}

.wb-jackpot-widget:not(#wbjp) .btn-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-bottom-color: #fff;
    animation: wjp-spin 1s linear infinite;
}

.wb-jackpot-widget:not(#wbjp) .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    background: transparent;
    border: none;
    color: inherit;
}
.wb-jackpot-widget:not(#wbjp) .icon-btn:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

/* ==========================================================================
   Game result dialog (GameResultModal)
   ========================================================================== */
.wb-jackpot-widget:not(#wbjp) .visually-hidden-link {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.wb-jackpot-widget:not(#wbjp) .result-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}
@media (min-width: 640px) {
    .wb-jackpot-widget:not(#wbjp) .result-header {
        text-align: left;
    }
}
.wb-jackpot-widget:not(#wbjp) .result-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--wjp-gold, #f0c24a);
}
.wb-jackpot-widget:not(#wbjp) .result-subtitle {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.wb-jackpot-widget:not(#wbjp) .confetti-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.wb-jackpot-widget:not(#wbjp) .confetti-wrap canvas {
    width: 100%;
    height: 100%;
}

.wb-jackpot-widget:not(#wbjp) .result-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.wb-jackpot-widget:not(#wbjp) .win-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.wb-jackpot-widget:not(#wbjp) .product-image {
    object-fit: contain;
    width: 100%;
    height: auto;
    max-height: 300px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
}
.wb-jackpot-widget:not(#wbjp) .product-title {
    text-align: center;
    font-size: 1.125rem;
}

.wb-jackpot-widget:not(#wbjp) .code-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    background: var(--muted);
    width: 100%;
    justify-content: space-between;
}
.wb-jackpot-widget:not(#wbjp) .code-value-wrap {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.wb-jackpot-widget:not(#wbjp) .code-value {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: normal;
}

.wb-jackpot-widget:not(#wbjp) .lose-message-wrap {
    display: flex;
    flex-direction: column;
}
.wb-jackpot-widget:not(#wbjp) .lose-message-title {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}
.wb-jackpot-widget:not(#wbjp) .lose-message-value {
    font-weight: 600;
    line-height: normal;
}

.wb-jackpot-widget:not(#wbjp) .result-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}

/* ==========================================================================
   Widget shell — shortcode trigger + modal panel
   Four modes: side (پیش‌فرض) / fixed / bottom (پیشنهادی) / inline (بدون دکمه)
   ========================================================================== */

.wb-jackpot-widget:not(#wbjp) {
    /* اسکوپ‌شده به همون جایی که شورت‌کد قرار گرفته؛ روی بقیه صفحه اثر نمی‌ذاره */
    display: inline-block;
}

/*
 * دکمه‌ی شناورِ باز کردن (launcher): سکه‌ی طلایی با لامپ‌های چشمک‌زن دور لبه،
 * پنجره‌ی اسلات کوچک که هر چند ثانیه یک‌بار می‌چرخد و روی ۷۷۷ می‌ایستد، نشان
 * و برچسب با برق آرام. رنگ‌ها از توکن‌های --wjp-fab-* خوانده می‌شوند
 * (تنظیمات ← برندینگ ← «دکمه‌ی شناور»).
 */
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger {
    position: fixed;
    left: 20px;
    right: auto;
    bottom: calc(20px + var(--wjp-fab-offset, 0px));
    z-index: 999990;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    font-family: "Vazirmatn", "IRANYekan", Tahoma, sans-serif;
    text-align: right;
    -webkit-tap-highlight-color: transparent;
    animation: wjp-fab-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards;
    transition:
            transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
            opacity 0.2s ease;
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger:hover {
    transform: translateY(-3px);
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger:active {
    transform: translateY(0) scale(0.96);
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger:focus-visible {
    outline: none;
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger:focus-visible .wjp-fab-coin {
    box-shadow:
            0 0 0 3px var(--wjp-fab-label-bg-2),
            0 0 0 5px var(--wjp-fab-gold),
            0 10px 24px -6px rgb(0 0 0 / 0.6);
}
/*
 * جای دکمه (data-position از تنظیمات برندینگ). پیش‌فرض بالا: پایین — چپ.
 * سمت راست و وسط: سکه سمت راست و برچسب سمت چپ آن. وسط‌چین کردن با خاصیت
 * `translate` است تا با transformهای hover / باز شدن تداخل نکند.
 */
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger[data-position^="top"] {
    top: calc(20px - var(--wjp-fab-offset, 0px));
    bottom: auto;
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger[data-position^="middle"] {
    top: 50%;
    bottom: auto;
    translate: 0 calc(-50% - var(--wjp-fab-offset, 0px));
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger[data-position$="-right"] {
    left: auto;
    right: 20px;
    flex-direction: row;
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger[data-position$="-center"] {
    left: 50%;
    right: auto;
    translate: -50% 0;
    flex-direction: row;
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger:is([data-position$="-right"], [data-position$="-center"]) .wjp-fab-label {
    margin-inline: -20px 0;
    padding-inline: 1.9rem 1rem;
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger:is([data-position$="-right"], [data-position$="-center"]) .wjp-fab-badge {
    inset-inline-start: auto;
    inset-inline-end: -4px;
}
/* نوار مدیریت وردپرس بالای صفحه */
body.admin-bar .wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger[data-position^="top"] {
    top: calc(52px - var(--wjp-fab-offset, 0px));
}

/* وقتی پنل باز است دکمه کنار می‌رود */
.wb-jackpot-widget:not(#wbjp).is-open .wb-jackpot-trigger {
    opacity: 0;
    transform: translateY(12px) scale(0.8);
    pointer-events: none;
}

/* --- سکه ------------------------------------------------------------------ */
.wb-jackpot-widget:not(#wbjp) .wjp-fab-coin {
    position: relative;
    z-index: 2;
    flex: none;
    width: 72px;
    height: 72px;
    padding: 7px;
    border-radius: 50%;
    background:
            linear-gradient(155deg,
            color-mix(in srgb, var(--wjp-fab-gold) 30%, #fff) 0%,
            var(--wjp-fab-gold) 30%,
            var(--wjp-fab-gold-deep) 62%,
            color-mix(in srgb, var(--wjp-fab-gold-deep) 60%, #000) 82%,
            var(--wjp-fab-gold) 100%);
    box-shadow:
            inset 0 1px 0 rgb(255 255 255 / 0.8),
            inset 0 -2px 3px rgb(80 50 10 / 0.55),
            0 0 0 1px rgb(0 0 0 / 0.45),
            0 10px 24px -6px rgb(0 0 0 / 0.6),
            0 3px 6px rgb(0 0 0 / 0.3);
    animation: wjp-fab-nudge 7s ease-in-out 2s infinite;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger:hover .wjp-fab-coin {
    transform: rotate(-10deg) scale(1.04);
}
/* لامپ‌های دور لبه — دو دسته که یکی‌درمیان روشن می‌شوند */
.wb-jackpot-widget:not(#wbjp) .wjp-fab-bulbs {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-bulbs circle {
    fill: none;
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-dasharray: 0 2;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-bulbs-a {
    stroke: var(--wjp-fab-bulb);
    filter: drop-shadow(0 0 1.5px var(--wjp-fab-bulb));
    animation: wjp-fab-bulbs 1.4s steps(1, end) infinite;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-bulbs-b {
    stroke: color-mix(in srgb, var(--wjp-fab-gold-deep) 65%, #000);
    stroke-dashoffset: 1;
    animation: wjp-fab-bulbs 1.4s steps(1, end) infinite reverse;
}
/* رویه‌ی تیره‌ی سکه */
.wb-jackpot-widget:not(#wbjp) .wjp-fab-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
            radial-gradient(80% 60% at 50% 20%, rgb(255 255 255 / 0.14), transparent 60%),
            radial-gradient(circle at 50% 45%,
            var(--wjp-fab-face) 0%,
            color-mix(in srgb, var(--wjp-fab-face) 60%, #000) 58%,
            color-mix(in srgb, var(--wjp-fab-face) 30%, #000) 100%);
    box-shadow:
            inset 0 0 0 1.5px rgb(60 38 8 / 0.8),
            inset 0 4px 10px rgb(0 0 0 / 0.55),
            inset 0 -1px 0 rgb(255 255 255 / 0.12);
    overflow: hidden;
}
/* پنجره‌ی اسلات */
.wb-jackpot-widget:not(#wbjp) .wjp-fab-window {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 5px;
    background: linear-gradient(180deg,
    color-mix(in srgb, var(--wjp-fab-gold) 30%, #fff),
    var(--wjp-fab-gold) 45%,
    var(--wjp-fab-gold-deep));
    box-shadow:
            0 0 0 1px rgb(40 25 5 / 0.7),
            0 2px 4px rgb(0 0 0 / 0.5);
    direction: ltr;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-reel {
    position: relative;
    display: block;
    width: 12px;
    height: 20px;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(180deg, #d9ccb0 0%, #fffaf0 30%, #fffaf0 70%, #d9ccb0 100%);
    box-shadow: inset 0 0 0 0.5px rgb(110 74 18 / 0.6);
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-strip {
    display: flex;
    flex-direction: column;
    animation: wjp-fab-roll 6s cubic-bezier(0.25, 0.1, 0.25, 1.35) 2.5s infinite;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-reel:nth-child(2) .wjp-fab-strip {
    animation-delay: 2.65s;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-reel:nth-child(3) .wjp-fab-strip {
    animation-delay: 2.8s;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-strip i {
    display: block;
    height: 20px;
    font-style: normal;
    font-family: "Vazirmatn", Tahoma, sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 20px;
    text-align: center;
    color: var(--wjp-fab-seven);
    text-shadow: 0 1px 0 rgb(0 0 0 / 0.25);
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-strip i:nth-child(2) {
    color: var(--wjp-fab-gold-deep);
    font-size: 11px;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-strip i:nth-child(3) {
    color: var(--wjp-fab-face);
    font-size: 11px;
}
/* نشان */
.wb-jackpot-widget:not(#wbjp) .wjp-fab-badge {
    position: absolute;
    top: -4px;
    inset-inline-start: -4px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 5px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: var(--wjp-fab-badge-text);
    background: linear-gradient(180deg,
    color-mix(in srgb, var(--wjp-fab-badge) 60%, #fff) 0%,
    var(--wjp-fab-badge) 55%,
    color-mix(in srgb, var(--wjp-fab-badge) 70%, #000) 100%);
    box-shadow:
            0 0 0 2px color-mix(in srgb, var(--wjp-fab-gold) 30%, #fff),
            0 0 0 3px rgb(110 74 18 / 0.7),
            inset 0 1px 0 rgb(255 255 255 / 0.5),
            0 3px 6px rgb(0 0 0 / 0.45);
    animation: wjp-fab-badge 3.5s ease-in-out 1.2s infinite;
}

/* --- برچسب ---------------------------------------------------------------- */
.wb-jackpot-widget:not(#wbjp) .wjp-fab-label {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-inline-end: -20px;
    padding-block: 0.5rem;
    padding-inline: 1rem 1.9rem;
    overflow: hidden;
    border-radius: 9999px;
    white-space: nowrap;
    background:
            linear-gradient(180deg, rgb(255 255 255 / 0.1), transparent 55%),
            linear-gradient(180deg, var(--wjp-fab-label-bg) 0%, var(--wjp-fab-label-bg-2) 100%);
    box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--wjp-fab-gold) 55%, transparent),
            inset 0 1px 0 rgb(255 255 255 / 0.18),
            0 8px 20px -6px rgb(0 0 0 / 0.6);
}
/* برق آرام روی برچسب */
.wb-jackpot-widget:not(#wbjp) .wjp-fab-label::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.2), transparent);
    transform: skewX(-18deg);
    animation: wjp-sheen 5s ease-in-out 1s infinite;
    pointer-events: none;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(180deg,
    color-mix(in srgb, var(--wjp-fab-kicker) 35%, #fff) 0%,
    var(--wjp-fab-kicker) 55%,
    color-mix(in srgb, var(--wjp-fab-kicker) 75%, #000) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.wb-jackpot-widget:not(#wbjp) .wjp-fab-title {
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.35;
    color: var(--wjp-fab-title);
    text-shadow: 0 1px 0 rgb(0 0 0 / 0.5);
}

@keyframes wjp-fab-enter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.6);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes wjp-fab-bulbs {
    0%   { opacity: 1; }
    50%  { opacity: 0.35; }
}
@keyframes wjp-fab-roll {
    0%, 70% { transform: translateY(0); }
    88%, 100% { transform: translateY(-75%); }
}
@keyframes wjp-fab-nudge {
    0%, 84%, 100% { rotate: 0deg; }
    87% { rotate: -12deg; }
    90% { rotate: 10deg; }
    93% { rotate: -6deg; }
    96% { rotate: 3deg; }
}
@keyframes wjp-fab-badge {
    0%, 80%, 100% { transform: translateY(0) scale(1); }
    86% { transform: translateY(-4px) scale(1.12); }
    92% { transform: translateY(0) scale(0.95); }
}

@media (max-width: 480px) {
    .wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger {
        left: 12px;
        bottom: calc(12px + var(--wjp-fab-offset, 0px));
    }
    .wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger[data-position$="-right"] {
        right: 12px;
    }
    .wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger[data-position^="top"] {
        top: calc(12px - var(--wjp-fab-offset, 0px));
    }
    body.admin-bar .wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger[data-position^="top"] {
        top: calc(58px - var(--wjp-fab-offset, 0px));
    }
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-coin {
        width: 62px;
        height: 62px;
        padding: 6px;
    }
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-label {
        padding-block: 0.4rem;
        padding-inline: 0.8rem 1.6rem;
    }
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-kicker {
        font-size: 0.62rem;
    }
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-title {
        font-size: 0.82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-jackpot-widget:not(#wbjp) .wb-jackpot-trigger,
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-coin,
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-bulbs circle,
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-strip,
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-badge {
        animation: none;
    }
    .wb-jackpot-widget:not(#wbjp) .wjp-fab-label::after {
        display: none;
    }
}

.wb-jackpot-widget:not(#wbjp) .wb-jackpot-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: rgb(0 0 0 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.wb-jackpot-widget:not(#wbjp).is-open .wb-jackpot-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.wb-jackpot-widget:not(#wbjp) .wb-jackpot-panel {
    position: fixed;
    z-index: 999999;
    background: var(--wjp-wine, #2a0a15);
    background-image: radial-gradient(120% 60% at 50% 0%, rgb(15 108 92 / 0.22), transparent 60%);
    box-shadow: 0 0 40px rgb(0 0 0 / 0.4);
    display: flex;
    flex-direction: column;
}

.wb-jackpot-widget:not(#wbjp) .wb-jackpot-panel .game-container {
    overflow-y: auto;
    border-radius: inherit;
}

.wb-jackpot-widget:not(#wbjp) .wb-jackpot-close {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.12);
    color: #fff;
    cursor: pointer;
}
.wb-jackpot-widget:not(#wbjp) .wb-jackpot-close:hover {
    background: rgb(255 255 255 / 0.22);
}

/*
 * حالت «side»: از بغل صفحه باز می‌شود و بیشتر از نصف صفحه را می‌گیرد.
 * در RTL از سمت راست باز می‌شود.
 */
.wb-jackpot-widget:not(#wbjp)[data-mode="side"] .wb-jackpot-panel {
    top: 0;
    bottom: 0;
    right: 0;
    width: min(640px, 92vw);
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.wb-jackpot-widget:not(#wbjp)[data-mode="side"].is-open .wb-jackpot-panel {
    transform: translateX(0);
}

/*
 * حالت «fixed»: یک تکه‌ی ثابت گوشه‌ی صفحه (شبیه ویجت شناور).
 */
.wb-jackpot-widget:not(#wbjp)[data-mode="fixed"] .wb-jackpot-panel {
    left: 20px;
    bottom: 20px;
    width: min(400px, 92vw);
    height: min(660px, 86vh);
    border-radius: 20px;
    transform: translateY(24px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition:
            transform 0.25s ease,
            opacity 0.25s ease;
}
.wb-jackpot-widget:not(#wbjp)[data-mode="fixed"].is-open .wb-jackpot-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
/* در حالت fixed پس‌زمینه‌ی تیره لازم نیست، فضای بقیه صفحه قابل استفاده بمونه */
.wb-jackpot-widget:not(#wbjp)[data-mode="fixed"] .wb-jackpot-backdrop {
    background: transparent;
}

/*
 * حالت پیشنهادی «bottom»: باتوم‌شیت، هم‌ساختار با دراور ورود با موبایل که
 * از قبل توی همین پروژه استفاده شده — سازگار با بقیه‌ی ساختار.
 */
.wb-jackpot-widget:not(#wbjp)[data-mode="bottom"] .wb-jackpot-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(88vh, 720px);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.wb-jackpot-widget:not(#wbjp)[data-mode="bottom"].is-open .wb-jackpot-panel {
    transform: translateY(0);
}

/*
 * حالت «inline»: ویجت همان‌جایی که شورت‌کد قرار گرفته، داخل جریان صفحه نمایش
 * داده می‌شود — بدون دکمه‌ی باز کردن، پس‌زمینه‌ی تیره و دکمه‌ی بستن.
 */
.wb-jackpot-widget:not(#wbjp)[data-mode="inline"] {
    display: block;
    width: 100%;
}
.wb-jackpot-widget:not(#wbjp)[data-mode="inline"] .wb-jackpot-panel {
    position: relative;
    z-index: auto;
    width: 100%;
    max-width: 32rem;
    min-height: 22rem;
    margin-inline: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}
.wb-jackpot-widget:not(#wbjp)[data-mode="inline"] .wb-jackpot-panel > .state-screen,
.wb-jackpot-widget:not(#wbjp)[data-mode="inline"] .wb-jackpot-panel > .game-container {
    flex: 1 1 auto;
    height: auto;
}
/* دیالوگ نتیجه روی کل صفحه باز می‌شود؛ باید بالای هدر قالب بماند.
   (دراور ورود داخل همین پنل می‌ماند — بخش Overlay / Drawer را ببینید.) */
.wb-jackpot-widget:not(#wbjp)[data-mode="inline"] .alert-dialog-overlay,
.wb-jackpot-widget:not(#wbjp)[data-mode="inline"] .alert-dialog-content {
    z-index: 999999;
}

@media (max-width: 480px) {
    .wb-jackpot-widget:not(#wbjp)[data-mode="fixed"] .wb-jackpot-panel {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
    }
}