/* DOD Product Blocks: front styles. Ported 1:1 from the Connecting snippets. */

/* ===== 1. headline above the title (was "Three words above product name") ===== */
.dod-pb-top{margin:0}
.dod-pb-words{font-size:1.1em;font-weight:700;letter-spacing:1px;text-align:center;color:#ff4d4f;margin:0 0 10px 0;background-color:#fff0f0;line-height:1.4;border:1px solid #ff4d4f;border-radius:5px;width:fit-content;padding-inline:10px}
@media only screen and (max-width:480px){.dod-pb-words{font-size:1rem!important}}
.dod-pb-top--switch{text-align:right;margin:0 0 5px 0;padding:0}
.dod-pb-switch{display:inline-block;font-size:.85em;font-weight:700;letter-spacing:1px;color:#ff4d4f;background-color:#fff0f0;border:1px solid #ff4d4f;border-radius:25px;padding:5px 20px;text-decoration:none;direction:rtl;margin:0;transition:background-color .2s,color .2s}
.dod-pb-switch:hover,.dod-pb-switch:focus{background-color:#ff4d4f;color:#fff}

/* ===== 2. offer: banner, tiers, scratch card ===== */
/* ---------- BUNDLE SELECTOR ---------- */
.bundle-selector-wrapper { display:flex; flex-direction:row; gap:10px; justify-content:center; flex-wrap:nowrap !important; margin-bottom:30px; }
.bundle-card { position:relative; height:100%; width:100%; max-width:33.33%; border:2px solid #ffdada; border-radius:12px; padding:10px; text-align:center; cursor:pointer; background:#fff; transition:all .2s ease-in-out; box-sizing:border-box; }
.bundle-card:hover { border:2px solid #ff4d4f; background-color:#fff0f0; }
.bundle-card input[type="radio"] { display:none; }
.bundle-card img { width:100%; max-width:100%; height:auto; margin-top:20px; }
.bundle-label { font-weight:bold; font-size:16px; margin:0 0 5px; }
.bundle-save { color:#666; font-size:14px; }
.bundle-price { color:#e63946; font-weight:bold; font-size:18px; }
.bundle-old-price { text-decoration:line-through; color:#999; font-size:14px; display:block; margin-top:4px; }
.bundle-tag { position:absolute; top:-2px; left:0; right:0; background:#ff4d4f; color:#fff; font-weight:bold; padding:6px 0; border-top-left-radius:10px; border-top-right-radius:10px; font-size:14px; }
.bundle-card.active { border:2px solid #ff4d4f; background-color:#fff0f0; }
.bundle-card.bundle-card--plain { padding-top:0; margin-top:25px; padding-bottom:10px; }
.bundle-card--plain img { margin-top:5px; }
.bundle-card--plain .bundle-label { margin:0 0 5px !important; }
.offer-banner { display:flex; align-items:center; justify-content:center; gap:10px; font-size:.8em; font-weight:bold; margin-bottom:10px; margin-top:10px; }
.line { flex-grow:1; height:2px; background-color:red; }
.offer-text { white-space:nowrap; }
@media screen and (max-width:550px){ .bundle-card--plain img{ margin-top:10px; } .bundle-card--plain .bundle-label{ margin:5px 0 5px; } }
@media screen and (max-width:768px){
.bundle-selector-wrapper{ flex-direction:row; }
.bundle-card{ max-width:33.33%; }
.bundle-price{ font-size:15px; }
.bundle-old-price{ font-size:13px; }
.bundle-label{ font-size:15px; }
.bundle-save{ font-size:13px; }
}

/* ---------- SCRATCH-CARD ADD-ON ---------- */
.scratch-addon { margin:0 0 28px; border:2px dashed #ffdada; border-radius:14px; padding:14px; background:#fff; transition:all .25s ease; }
.scratch-addon.active { border:2px solid #ff4d4f; background:#fff7f7; }
.scratch-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:bold; font-size:16px; color:#333; user-select:none; }
.scratch-toggle input[type="checkbox"] { width:22px; height:22px; accent-color:#ff4d4f; cursor:pointer; flex:0 0 auto; }
.scratch-toggle-text { flex:1 1 auto; }
.scratch-toggle-price { flex:0 0 auto; color:#e63946; font-weight:bold; font-size:16px; white-space:nowrap; }
.scratch-addon.active .scratch-toggle { color:#e63946; }
.scratch-sub { display:none; font-size:13px; color:#888; margin:6px 0 0 32px; }
.scratch-addon.active .scratch-sub { display:block; }
.scratch-body { display:flex; align-items:center; gap:12px; margin-top:0; max-height:0; overflow:hidden; opacity:0; filter:grayscale(1); pointer-events:none; transition:max-height .3s ease, opacity .3s ease, filter .3s ease, margin-top .3s ease; }
.scratch-addon.active .scratch-body { margin-top:12px; max-height:300px; opacity:1; filter:none; pointer-events:auto; }
.scratch-preview-wrap { position:relative; flex:0 0 auto; display:inline-block; line-height:0; cursor:zoom-in; }
.scratch-preview { width:64px; height:auto; border-radius:6px; display:block; }
.scratch-zoom-icon { position:absolute; bottom:3px; left:3px; width:18px; height:18px; background:rgba(0,0,0,.6); border-radius:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.scratch-zoom-icon svg { width:11px; height:11px; }
.scratch-select { flex:1 1 auto; max-width:240px; padding:9px 12px; padding-left:32px; font-size:15px; font-weight:bold; color:#333; border:2px solid #ffdada; border-radius:10px; background-color:#fff; cursor:pointer; text-align:right; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23e63946'%20stroke-width='3'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 12px center; }
.scratch-select:focus { outline:none; border-color:#ff4d4f; }
.scratch-zoom-overlay { display:none; position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.82); align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
.scratch-zoom-overlay.open { display:flex; }
.scratch-zoom-inner { position:relative; display:inline-block; line-height:0; }
.scratch-zoom-inner img { max-width:min(90vw, 380px); max-height:80vh; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.scratch-zoom-close { position:absolute; top:8px; right:8px; width:40px; height:40px; border:none; border-radius:50%; background:#fff; color:#333; font-size:24px; line-height:40px; text-align:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.4); padding:0; }
.scratch-zoom-close:hover { background:#ff4d4f; color:#fff; }
@media screen and (max-width:768px){
.scratch-toggle { font-size:15px; }
.scratch-toggle-price { font-size:15px; }
.scratch-preview { width:56px; }
.scratch-select { font-size:14px; padding:8px 10px; padding-left:30px; max-width:none; }
}

/* ===== 3. tiles, videos, quick answers ===== */
.dod.dod-under{display:block!important;width:100%!important;max-width:100%;flex:0 0 100%;clear:both;direction:rtl;text-align:right;color:#2A161E;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;margin:0!important;padding:22px 0 0!important}
.dod-under .dod-tiles,.dod-under .dod-videos,.dod-under .dod-videos__track,.dod-under .dod-qa,.dod-under .dod-acc,.dod-under .dod-qslide,.dod-under .dod-qdeck{width:100%!important;max-width:100%;float:none}
.dod *,.dod *::before,.dod *::after{box-sizing:border-box}
.dod img{max-width:100%;height:auto;display:block}
.dod p{margin:0 0 12px}
.dod a{color:inherit}
.dod ul{margin:0;padding:0;list-style:none}
.dod button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;width:auto;cursor:pointer;line-height:inherit;border-radius:0}
.dod :focus-visible{outline:3px solid #E3254C;outline-offset:3px}
.dod-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 1. tiles */
.dod-under ul.dod-tiles{display:flex!important;flex-wrap:wrap;gap:8px;margin:0 0 18px!important;padding:0!important;list-style:none!important}
.dod-under ul.dod-tiles>li[hidden]{display:none!important}
.dod-under ul.dod-tiles>li{flex:1 1 calc(50% - 4px);display:flex!important;gap:9px;align-items:center;list-style:none!important;background:#fff;border:1px solid rgba(42,22,30,.13);border-radius:12px;padding:9px 10px;line-height:1.25;min-width:0;margin:0}
.dod-tiles .dod-ico{width:20px;height:20px;color:#5C0F2E}
.dod-tiles b{display:block;font-size:13.5px;color:#2A161E;font-weight:700}
.dod-tiles small{display:block;font-size:12px;color:rgba(42,22,30,.66)}
.dod-tiles li.is-low b{color:#B4372A}
/* 2. videos */
.dod-videos{margin:0 0 18px}
.dod-videos__title{font-weight:800;color:#5C0F2E;margin:0 0 10px;font-size:16px}
.dod-videos__track{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:thin;margin:0}
.dod-under button.dod-video{position:relative;flex:0 0 112px;width:112px!important;min-width:0;height:auto!important;margin:0!important;border:0!important;box-shadow:none!important;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#5C0F2E,#E3254C);scroll-snap-align:start;display:block;padding:0!important}
.dod-video__poster{width:100%;height:100%;object-fit:cover}
.dod-video__play{position:absolute;bottom:10px;left:10px;width:34px;height:34px;display:block;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));transition:opacity .3s}
.dod-under button.dod-video:hover .dod-video__play{opacity:.85}
.dod-video__play svg{width:100%;height:100%;display:block}
/* 3. quick answers */
.dod-qa{margin:0 0 6px;border-top:1px solid rgba(42,22,30,.13)}

.dod-under .dod-acc{margin:0!important;padding:0!important;border:0;border-bottom:1px solid rgba(42,22,30,.13)!important;background:none!important}
.dod-under .dod-acc>.dod-acc__q{width:100%!important;text-align:right!important;min-height:0!important;height:auto!important;border-radius:0!important;box-shadow:none!important;cursor:pointer;display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:14px 0!important;margin:0!important;border:0!important;font-weight:700!important;font-size:16px!important;line-height:1.4!important;letter-spacing:0!important;text-transform:none!important;color:#2A161E!important;background:none!important}

.dod-under .dod-acc>.dod-acc__q::after,.dod-under .dod-acc>.dod-acc__q::before{content:none!important;display:none!important}
.dod-under .dod-acc__body[hidden]{display:none!important}
.dod-chev{width:14px;height:14px;flex:none;color:#5C0F2E;transition:transform .2s}
.dod-acc.is-open>.dod-acc__q .dod-chev{transform:rotate(180deg)}
.dod-acc__body{padding:0 0 18px;font-size:15px;font-weight:500}
.dod-acc__body ul{display:grid;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.dod-acc__body li{margin:0}
.dod-acc__body a{color:#E3254C;font-weight:600}
/* the real cards */
.dod-qslide{margin:2px 0 6px}
.dod .dod-acc__body .dod-qchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;list-style:none}
.dod-qchips li{margin:0;font-size:13px;font-weight:600;color:#5C0F2E;background:#FCEBEE;border-radius:999px;padding:3px 11px}
.dod-qchips b{color:#E3254C;font-weight:800}
.dod-qdeck{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin:0;padding:6px 4px 18px}
.dod-qdeck::-webkit-scrollbar{display:none}
.dod-under .dod-pcard,.dod-under .dod-pcard__img{animation:none!important;transform:none!important}
.dod-pcard{flex:0 0 42%;max-width:160px;margin:0;scroll-snap-align:start;display:grid;gap:8px;justify-items:center}
.dod-pcard__img{width:100%;aspect-ratio:5/7;border-radius:14px;box-shadow:0 8px 18px rgba(20,16,18,.22);background:#141012;cursor:zoom-in}
.dod-pcard figcaption{font-size:12px;font-weight:700;color:#5C0F2E;background:#FCEBEE;padding:2px 12px;border-radius:999px}
.dod-qdots{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 2px}
.dod-qdots i{width:7px;height:7px;border-radius:50%;background:rgba(92,15,46,.22);transition:width .2s,background-color .2s}
.dod-qdots i.is-on{width:18px;border-radius:4px;background:#E3254C}
.dod-qhint{font-size:12.5px;color:rgba(42,22,30,.66);margin-right:8px;transition:opacity .3s}
.dod-qslide.is-swiped .dod-qhint{opacity:0}
.dod-cardsnote{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;font-size:14.5px;line-height:1.5;font-weight:600;color:#5C0F2E;background:#FDF1F3;border-radius:14px;padding:11px 13px}
.dod-cardsnote .dod-ico{width:20px;height:20px;color:#1F7A4D;flex:none;margin-top:2px;stroke-width:2.6}
/* video modal */
.dod-modal{position:fixed;inset:0;z-index:99999;background:rgba(18,6,11,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;direction:ltr;padding:24px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dod-modal[hidden]{display:none}
.dod-modal__box{position:relative;cursor:default;line-height:0}
.dod-modal__stage{display:block}
.dod-modal__stage img{display:block;width:min(84vw,400px,calc(82vh * 5 / 7));height:auto;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.dod-modal__stage iframe{display:block;width:min(84vw,calc(84vh * 9 / 16));aspect-ratio:9/16;border:0;border-radius:16px;background:#000}
button.dod-modal__close{position:absolute!important;top:-16px!important;right:-16px!important;left:auto!important;z-index:2;width:40px!important;height:40px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:#fff!important;color:#2A161E!important;box-shadow:0 4px 14px rgba(0,0,0,.35)!important;display:grid!important;place-items:center;cursor:pointer}
button.dod-modal__close svg{width:18px;height:18px}
.dod-modal__hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:13px;direction:rtl;pointer-events:none}
@media (min-width:960px){
.dod-tiles li{padding:11px 12px}
.dod-tiles b{font-size:14.5px}
.dod-tiles small{font-size:13px}
.dod-pcard{flex-basis:150px}
}
@media (prefers-reduced-motion:reduce){.dod *,.dod *::before,.dod *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== 4. floating "choose a game" button (was "Anchor button") ===== */
.float-btn.dod-pb-float{gap:10px!important;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background-color:#E03030;color:#fff;font-weight:bold;text-decoration:none;display:flex;align-items:center;padding:5px 0 5px 20px!important;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.2);transition:opacity .3s ease-in-out,visibility .3s;z-index:9999;opacity:0;visibility:hidden;white-space:nowrap}
.float-btn.dod-pb-float.show{opacity:1;visibility:visible}
.float-btn.dod-pb-float:hover{background-color:#c02727;color:#fff}
.dod-pb-float .btn-img{height:70px;width:auto;margin-top:-30px}
.dod-pb-float .btn-text{font-size:1.5em;margin-right:-6px;text-transform:uppercase}
.dod-pb-float .btn-arrow{margin-right:auto;font-size:20px;display:flex;align-items:center}
.dod-pb-float:not(:has(.btn-img)){padding:12px 20px!important}
@media only screen and (max-width:600px) and (min-width:440px){.float-btn.dod-pb-float{gap:20px!important;width:70%;padding:5px 0 5px 20px!important;justify-content:space-between}.dod-pb-float .btn-text{font-size:25px!important;margin-right:-6px}.dod-pb-float .btn-arrow{margin-right:unset!important}}
@media only screen and (max-width:439px) and (min-width:301px){.float-btn.dod-pb-float{gap:20px!important;width:90%;padding:0 0 0 20px!important;justify-content:space-between}.dod-pb-float .btn-text{font-size:1.5em!important;margin-right:-6px}.dod-pb-float .btn-img{height:55px!important}.dod-pb-float .btn-arrow{margin-right:unset!important}}
@media only screen and (max-width:300px){.float-btn.dod-pb-float{gap:5px!important;width:90%;justify-content:space-between}.dod-pb-float .btn-text{font-size:1em!important;margin-right:-6px}.dod-pb-float .btn-img{height:48px!important}.dod-pb-float .btn-arrow{margin-right:unset!important}}
/* text cards: real card text drawn as a card (no image needed) */
.dod-tcard{--dod-tc-bg:#F4F0EA;--dod-tc-fg:#5C0F2E;box-sizing:border-box;width:100%;aspect-ratio:5/7;border-radius:14px;box-shadow:0 8px 18px rgba(20,16,18,.22);background:var(--dod-tc-bg);color:var(--dod-tc-fg);display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;text-align:center;direction:rtl;padding:11% 9% 9%;font-size:10px;line-height:1.3;cursor:zoom-in;overflow:hidden;font-family:inherit}
.dod-qdeck[style] .dod-tcard{--dod-tc-bg:inherit;--dod-tc-fg:inherit}
.dod-tcard__cat{font-size:1.15em;font-weight:500;opacity:.9;min-height:1.3em}
.dod-tcard__txt{font-size:1.5em;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.dod-tcard.is-m .dod-tcard__txt{font-size:1.35em}
.dod-tcard.is-l .dod-tcard__txt{font-size:1.2em}
.dod-tcard.is-xl .dod-tcard__txt{font-size:1.05em}
.dod-tcard__brand{font-size:.9em;opacity:.85}
.dod-tcard:focus-visible{outline:2px solid #E3254C;outline-offset:3px}
.dod-modal__stage .dod-tcard{width:min(84vw,380px,calc(82vh * 5 / 7));font-size:min(5.6vw,25px);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);cursor:default}
.dod-qdeck--wide .dod-pcard{flex:0 0 72%;max-width:250px;flex-basis:240px}
.dod-qdeck--wide .dod-pcard__img{aspect-ratio:7/5;object-fit:cover}
.dod-modal__stage img.is-wide{width:min(94vw,760px,calc(82vh * 7 / 5))}