.elementor-4623 .elementor-element.elementor-element-512c4257{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-5ffe95ef{--display:flex;}.elementor-4623 .elementor-element.elementor-element-283ed84e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-a7b2416{--display:flex;--min-height:900px;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#D4AF3730;--border-color:#D4AF3730;--border-radius:5px 5px 5px 5px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-76e6f418 .elementor-icon-wrapper{text-align:center;}.elementor-4623 .elementor-element.elementor-element-28d57ab1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-28d57ab1 img{width:100%;}.elementor-4623 .elementor-element.elementor-element-503f7468{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-503f7468 img{width:100%;}.elementor-4623 .elementor-element.elementor-element-141bbe09{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-141bbe09 img{width:100%;}.elementor-4623 .elementor-element.elementor-element-7861b25a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-7861b25a img{width:100%;}.elementor-4623 .elementor-element.elementor-element-44d08d3b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-44d08d3b img{width:100%;}.elementor-4623 .elementor-element.elementor-element-24083a9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-24083a9 img{width:100%;}.elementor-4623 .elementor-element.elementor-element-dca958c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-dca958c img{width:100%;}.elementor-4623 .elementor-element.elementor-element-adda1ff{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-adda1ff img{width:100%;}.elementor-4623 .elementor-element.elementor-element-1966541{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-1966541 img{width:100%;}.elementor-4623 .elementor-element.elementor-element-28d7e16{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-28d7e16 img{width:100%;}.elementor-4623 .elementor-element.elementor-element-8b98515{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-8b98515 img{width:100%;}.elementor-4623 .elementor-element.elementor-element-c9d42a9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4623 .elementor-element.elementor-element-c9d42a9 img{width:100%;}.elementor-4623 .elementor-element.elementor-element-71eca09b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-4b9c6ba5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-42bc7e8c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-5e9aa4d9{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-8456040{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-b633748{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-1df70bc{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-0d84456{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-195c77b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-1fb8b86{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-685eaeaf{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-9ec4409{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4623 .elementor-element.elementor-element-3436ea30{font-weight:bold;}.elementor-4623 .elementor-element.elementor-element-6b061655{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-4623 .elementor-element.elementor-element-15617a5a{--display:flex;}.elementor-4623 .elementor-element.elementor-element-1ad617b2{--display:flex;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for image, class: .elementor-element-7861b25a */.demo-overlay{
position:absolute;
top:0;
left:0;
width:100%;
display:none;
pointer-events:none;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44d08d3b */.demo-overlay{
position:absolute;
top:0;
left:0;
width:100%;
display:none;
pointer-events:none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a7b2416 */.elementor-4623 .elementor-element.elementor-element-a7b2416 {
  position: relative;
}/* End custom CSS */
/* Start custom CSS *//* =========================================================
   1. PAGE / DEMO-PAGE GLOBALS
   ========================================================= */

html,
body {
  margin: 0;
  overflow: hidden;
  background: #0b0f18;
}

body.page-template-default {
  margin: 0;
  padding: 0;
  background: #0b0f18;
}

/* Hide external floating UI on tutorial page */
body:has(.demo-stage-wrap) #cmplz-manage-consent,
body:has(.demo-stage-wrap) [aria-label="Open chat"],
body:has(.demo-stage-wrap) [data-pop="minimized:open"],
body:has(.demo-stage-wrap) [data-id="chat_closed"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
  .tutorial-popup-title {
    font-size: 25px;
    line-height: 1.3;
  }

  .tutorial-popup-text {
    font-size: 20px;
    line-height: 1.5;
  }

/* =========================================================
   2. DEMO STAGE / SCALING WRAPPERS
   ========================================================= */

.demo-stage-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 32px;
  box-sizing: border-box;
  background: #0b0f18;
}

.demo-scale-box {
  position: absolute;
  width: 1400px;
  height: 900px;
}

.demo-canvas {
  position: relative;
  width: 1400px;
  height: 900px;
  transform: scale(var(--demo-scale, 1));
  transform-origin: top left;
  overflow: hidden;
  box-sizing: border-box;
}


/* =========================================================
   3. BASE IMAGE / VIEW / OVERLAY LAYERS
   ========================================================= */

.demo-base,
.demo-view,
.demo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.demo-view,
.demo-overlay {
  display: none;
}


/* =========================================================
   4. DIM LAYER
   ========================================================= */

.demo-dim {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, 0.55);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 30;
}

.demo-dim.visible {
  opacity: 1;
}


/* =========================================================
   5. SPOTLIGHT SYSTEM
   ========================================================= */

.demo-spotlight {
  position: absolute;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  border-radius: 12px;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(5, 10, 20, 0.55),
    0 0 0 2px rgba(212, 175, 55, 0.95),
    0 0 24px rgba(212, 175, 55, 0.55),
    0 0 48px rgba(212, 175, 55, 0.28);
}

.demo-spotlight.visible {
  opacity: 1;
}

/* Desktop spotlight targets */

.bankroll-spotlight {
  top: 4px;
  left: 290px;
  width: 120px;
  height: 50px;
}

.demo-spotlight-bookmakers {
  top: 110px;
  left: 270px;
  width: 250px;
  height: 400px;
}

.demo-spotlight-bet-card {
  top: 182px;
  left: 229px;
  width: 401px;
  height: 636px;
}

.demo-spotlight-dashboard {
  top: 4px;
  left: 172px;
  width: 120px;
  height: 50px;
}

.demo-spotlight-new-alert {
  top: 173px;
  left: 10px;
  width: 455px;
  height: 222px;
}

.demo-spotlight-live-button {
  top: 138px;
  left: 1300px;
  width: 69px;
  height: 35px;
}


/* =========================================================
   6. POPUP BASE STYLING
   ========================================================= */

.demo-popup {
  position: absolute;
  z-index: 50;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform-origin: center center;

  background: #D4AF37;
  color: #0F1523;
  border-radius: 20px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.20);

  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.55),
    0 0 45px rgba(212, 175, 55, 0.45),
    0 0 90px rgba(212, 175, 55, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.22);
}

.demo-popup.visible {
  opacity: 1;
  pointer-events: auto;
}

.tutorial-popup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 620px;
}

/* Popup typography */
.demo-popup h1,
.demo-popup h2,
.demo-popup h3,
.demo-popup h4,
.demo-popup .elementor-heading-title {
  margin: 0 0 14px 0;
  line-height: 1.05;
  font-weight: 700 !important;
  color: #000 !important;
}

.demo-popup p {
  color: #0F1523;
  margin: 0 0 18px 0;
  line-height: 1.55;
  opacity: 0.95;
}


/* =========================================================
   7. POPUP BUTTONS / ACTIONS / PROGRESS
   ========================================================= */

.demo-popup .elementor-button,
.demo-popup button {
  border-radius: 14px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.demo-popup .elementor-button:hover,
.demo-popup button:hover {
  transform: translateY(-2px);
}

.tutorial-popup-actions,
.tutorial-popup-actions > .e-con-inner,
.tutorial-popup-actions.elementor-element,
.tutorial-popup-actions.elementor-element > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

.tutorial-popup-actions .tutorial-next-btn,
.tutorial-popup-actions .tutorial-back-btn,
.tutorial-popup-actions .elementor-widget-button {
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.tutorial-popup-actions .tutorial-next-btn .elementor-button,
.tutorial-popup-actions .tutorial-back-btn .elementor-button {
  min-width: 140px !important;
  height: 44px !important;
  padding: 10px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 14px !important;
}

/* Next button */
.tutorial-next-btn .elementor-button {
  background: #0F1523 !important;
  color: #D4AF37 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.tutorial-next-btn .elementor-button:hover {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(212, 175, 55, 0.35) !important;
}

/* Back button */
.tutorial-back-btn .elementor-button {
  background: transparent !important;
  color: #0F1523 !important;
  border: 2px solid rgba(15, 21, 35, 0.35) !important;
  box-shadow: none !important;
}

.tutorial-back-btn .elementor-button:hover {
  background: rgba(15, 21, 35, 0.08) !important;
  color: #0F1523 !important;
  box-shadow: none !important;
}

/* Progress */
.tutorial-popup-progress {
  margin-top: 4px;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(15, 21, 35, 0.72);
}


/* =========================================================
   8. FINAL STEP BUTTONS
   ========================================================= */

.tutorial-restart-btn .elementor-button,
.tutorial-guides-btn .elementor-button {
  background: transparent !important;
  color: #0F1523 !important;
  border: 2px solid rgba(15, 21, 35, 0.35) !important;
  box-shadow: none !important;
}

.tutorial-restart-btn .elementor-button:hover,
.tutorial-guides-btn .elementor-button:hover {
  background: rgba(15, 21, 35, 0.08) !important;
}

.tutorial-next-btn .elementor-button {
  background: #0F1523 !important;
  color: #D4AF37 !important;
}

.tutorial-popup.has-final-actions .tutorial-restart-btn {
  order: 1;
}

.tutorial-popup.has-final-actions .tutorial-guides-btn {
  order: 2;
}

.tutorial-popup.has-final-actions .tutorial-next-btn {
  order: 3;
}

.tutorial-popup.has-final-actions .tutorial-back-btn {
  display: none !important;
}

.tutorial-popup.has-final-actions .tutorial-restart-btn .elementor-button,
.tutorial-popup.has-final-actions .tutorial-guides-btn .elementor-button,
.tutorial-popup.has-final-actions .tutorial-next-btn .elementor-button {
  height: 50px !important;
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* =========================================================
   9. POPUP ENTRY ANIMATION
   ========================================================= */

.demo-popup.is-animating {
  transform: translateY(14px);
}

.demo-popup.is-popup-centered.is-animating {
  transform: translate(-50%, -50%) translateY(14px);
}


/* =========================================================
   10. CLOSE BUTTON
   ========================================================= */

.tutorial-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 60 !important;
  width: 62px;
  height: 62px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(15, 21, 35, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(212, 175, 55, 0.22);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tutorial-close i,
.tutorial-close svg {
  color: #D4AF37 !important;
  fill: #D4AF37 !important;
  font-size: 32px !important;
  width: 18px;
  height: 18px;
}

.tutorial-close:hover {
  background: rgba(212, 175, 55, 0.14);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(212, 175, 55, 0.35);
  transform: scale(1.06);
}


/* =========================================================
   11. DESKTOP POPUP POSITION PRESETS
   ========================================================= */

/* Welcome / final centered popup */
.is-popup-centered {
  top: 50%;
  left: 50%;
  width: 560px;
  transform: translate(-50%, -50%);
}

.is-popup-centered::before {
  content: none;
}

/* Feed top-menu anchored popup */
.is-popup-menu-anchor {
  top: 80px;
  left: 190px;
  width: 620px;
  transform: none;
}

.is-popup-menu-anchor::before {
  content: "";
  position: absolute;
  left: 145px;
  top: -26px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 26px solid #D4AF37;
  filter:
    drop-shadow(0 -4px 12px rgba(212, 175, 55, 0.45))
    drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.35));
}

/* Full-panel explanatory popup */
.is-popup-panel-view {
  top: 375px;
  left: 80px;
  width: 800px;
  transform: none;
}

.is-popup-panel-view::before {
  content: none;
}

/* Bookmakers step popup */
.is-popup-bookmakers-anchor {
  top: 100px;
  left: 547px;
  width: 700px;
  transform: none;
}

.is-popup-bookmakers-anchor::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 140px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 26px solid #D4AF37;
  filter:
    drop-shadow(-4px 0 12px rgba(212, 175, 55, 0.45))
    drop-shadow(-2px 0 6px rgba(0, 0, 0, 0.35));
}

/* New alert step popup */
.is-popup-new-alert-anchor {
  top: 230px;
  left: 500px;
  width: 620px;
  transform: none;
}

.is-popup-new-alert-anchor::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 95px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 26px solid #D4AF37;
  filter:
    drop-shadow(-4px 0 12px rgba(212, 175, 55, 0.45))
    drop-shadow(-2px 0 6px rgba(0, 0, 0, 0.35));
}

/* Bet card popup */
.is-popup-bet-card-anchor {
  top: 400px;
  left: 657px;
  width: 560px;
  transform: none;
}

.is-popup-bet-card-anchor::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 110px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 26px solid #D4AF37;
  filter:
    drop-shadow(-4px 0 12px rgba(212, 175, 55, 0.45))
    drop-shadow(-2px 0 6px rgba(0, 0, 0, 0.35));
}

/* Dashboard menu anchor step */
.is-popup-dashboard-anchor {
  top: 80px;
  left: 125px;
  width: 620px;
  transform: none;
}

.is-popup-dashboard-anchor::before {
  content: "";
  position: absolute;
  left: 85px;
  top: -26px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 26px solid #D4AF37;
  filter:
    drop-shadow(0 -4px 12px rgba(212, 175, 55, 0.45))
    drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.35));
}

/* Dashboard full-view popup */
.is-popup-dashboard-view {
  top: 70px;
  left: 690px;
  width: 700px;
  transform: none;
}

.is-popup-dashboard-view::before {
  content: none;
}

/* Dashboard live button popup */
.is-popup-live-button {
  top: 210px;
  left: 770px;
  width: 620px;
  transform: none;
}

.is-popup-live-button::before {
  content: "";
  position: absolute;
  left: 545px;
  top: -26px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 26px solid #D4AF37;
  filter:
    drop-shadow(0 -4px 12px rgba(212, 175, 55, 0.45))
    drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.35));
}


/* =========================================================
   12. MOBILE-SPECIFIC OVERRIDES
   Keep at end of file until final reorganization.
   ========================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------------------------
     12.1 CANVAS + LAYERING
     --------------------------------------------------------- */

  .demo-stage-wrap {
    padding: 0;
  }

  .demo-canvas {
    border: none !important;
    box-shadow: none !important;
  }

  .demo-dim {
    z-index: 10 !important;
  }

  .demo-spotlight {
    z-index: 15 !important;
  }

  .demo-popup,
  .tutorial-popup {
    z-index: 20 !important;
  }

  .tutorial-popup,
  .tutorial-popup * {
    opacity: 1 !important;
    filter: none !important;
  }

  /* ---------------------------------------------------------
     12.2 MOBILE POPUP BASE
     --------------------------------------------------------- */

  .tutorial-popup {
    width: 374px;
    max-width: 374px;
    padding: 10px;
    gap: 8px !important;
  }

  .tutorial-popup-title {
    font-size: 15px;
    line-height: 1.2;
  }

  .tutorial-popup-text {
    font-size: 11px;
    line-height: 1.4;
  }

  .demo-popup .elementor-heading-title,
  .demo-popup h1,
  .demo-popup h2,
  .demo-popup h3,
  .demo-popup h4,
  .demo-popup p {
    margin: 0 !important;
  }

  .demo-popup .elementor-heading-title,
  .demo-popup h1,
  .demo-popup h2,
  .demo-popup h3,
  .demo-popup h4 {
    line-height: 1.1 !important;
  }

  .tutorial-popup .elementor-widget-heading {
    margin-bottom: 0 !important;
  }

  .tutorial-popup .elementor-widget-text-editor {
    margin-top: 0 !important;
  }

  .tutorial-popup-progress {
    display: none !important;
  }


  .demo-popup.is-popup-mobile-bottom.is-animating,
  .demo-popup.is-popup-mobile-near-bottom.is-animating,
  .demo-popup.is-popup-mobile-live-button.is-animating,
  .demo-popup.is-popup-mobile-above-menu.is-animating,
  .demo-popup.is-popup-mobile-top.is-animating {
    transform: translateX(-50%) translateY(14px) !important;
  }

  .demo-popup.is-popup-mobile-center.is-animating,
  .demo-popup.is-popup-mobile-alert.is-animating,
  .demo-popup.is-popup-mobile-near-top.is-animating {
    transform: translate(-50%, -50%) translateY(14px) !important;
  }
  /* ---------------------------------------------------------
     12.3 MOBILE POPUP POSITION PRESETS
     --------------------------------------------------------- */

  .is-popup-mobile-bottom {
    top: auto !important;
    left: 50% !important;
    bottom: 240px !important;
    transform: translateX(-50%) !important;
  }

  .is-popup-mobile-near-bottom {
    top: auto !important;
    left: 50% !important;
    bottom: 300px !important;
    transform: translateX(-50%) !important;
  }
  .is-popup-mobile-live-button {
    top: auto !important;
    left: 50% !important;
    bottom: 325px !important;
    transform: translateX(-50%) !important;
  }
  .is-popup-mobile-above-menu {
    top: auto !important;
    left: 50% !important;
    bottom: 90px !important;
    transform: translateX(-50%) !important;
  }

  .is-popup-mobile-center {
    top: 400px !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  .is-popup-mobile-alert {
    top: auto !important;
    left: 50% !important;
    bottom: 260px !important;
    transform: translateX(-50%) !important;
  }

  .is-popup-mobile-top {
    top: 16px !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  .is-popup-mobile-near-top {
    top: auto !important;
    left: 50% !important;
    bottom: 555px !important;
    transform: translateX(-50%) !important;
  }

  /* ---------------------------------------------------------
     12.4 MOBILE SPOTLIGHT TARGETS
     --------------------------------------------------------- */

  .spotlight-mobile {
    position: absolute;
    border-radius: 12px;
    pointer-events: none;
  }

  .spotlight-mobile-bankroll-tab {
    left: 50%;
    bottom: 240px;
    width: 80px;
    height: 50px;
    transform: translateX(-50%);
  }

  .spotlight-mobile-dashboard-tab {
    left: 30%;
    bottom: 240px;
    width: 80px;
    height: 50px;
    transform: translateX(-50%);
  }

  .spotlight-mobile-bookmaker-filter {
    left: 33%;
    bottom: 717px;
    width: 130px;
    height: 45px;
    transform: translateX(-50%);
  }

  .spotlight-mobile-live-button {
    left: 50%;
    bottom: 267px;
    width: 345px;
    height: 46px;
    transform: translateX(-50%);
  }

  .spotlight-mobile-alert {
    left: 50%;
    bottom: 438px;
    width: 360px;
    height: 265px;
    transform: translateX(-50%);
  }

  /* ---------------------------------------------------------
     12.5 MOBILE POPUP ARROWS
     --------------------------------------------------------- */

  .tutorial-popup.is-popup-mobile-arrow-up {
    overflow: visible !important;
  }

  .tutorial-popup.is-popup-mobile-arrow-up::before {
    content: "";
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    z-index: 21;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 10px solid #D4AF37;
  }
  .tutorial-popup.is-popup-mobile-arrow-down {
      overflow: visible !important;
    }
    .tutorial-popup.is-popup-mobile-arrow-down::before {
      content: "";
      position: absolute;
      top: auto !important;
      bottom: -10px !important;
      left: 50%;
      transform: translateX(-50%);
    
      width: 0;
      height: 0;
      z-index: 21;
    
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #D4AF37; /* this creates downward arrow */
    }


  .tutorial-popup.is-arrow-bankroll::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .tutorial-popup.is-arrow-dashboard::before {
    left: 28%;
    transform: translateX(-50%);
  }

  .tutorial-popup.is-arrow-bookmaker::before {
    left: 33%;
    transform: translateX(-50%);
  }

  .tutorial-popup.is-arrow-alert::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .tutorial-popup.is-arrow-live-button::before {
    left: 50%;
    transform: translateX(-50%);
  }

  /* ---------------------------------------------------------
     12.6 MOBILE FINAL STEP BUTTON LAYOUT
     --------------------------------------------------------- */

  .tutorial-popup.has-final-actions .tutorial-popup-actions,
  .tutorial-popup.has-final-actions .tutorial-popup-actions > .e-con-inner,
  .tutorial-popup.has-final-actions .tutorial-popup-actions.elementor-element,
  .tutorial-popup.has-final-actions .tutorial-popup-actions.elementor-element > .e-con-inner {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .tutorial-popup.has-final-actions .tutorial-restart-btn,
  .tutorial-popup.has-final-actions .tutorial-guides-btn {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
  }

  .tutorial-popup.has-final-actions .tutorial-next-btn {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .tutorial-popup.has-final-actions .tutorial-restart-btn .elementor-button,
  .tutorial-popup.has-final-actions .tutorial-guides-btn .elementor-button,
  .tutorial-popup.has-final-actions .tutorial-next-btn .elementor-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}/* End custom CSS */