/* ==========================================================================
   COMPKIT — DARK THEME  (fresh, single source of truth)
   Palette matched to the marketing site: warm charcoal + electric blue + gold.
   Game-module accent colours are preserved exactly.
   Loaded last (see functions.php) so it wins. Clear the old
   Customizer "Additional CSS" once this is live.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS  — neutrals flipped to dark, game accents kept as-is
   -------------------------------------------------------------------------- */
:root{
  /* surfaces (from marketing site) */
  --bg:            #131311;   /* page — warm near-black            */
  --bg-2:          #1a1916;   /* raised strips (header/bars)       */
  --card:          #1c1b18;   /* cards / panels                    */
  --card-2:        #211f1b;   /* nested card / hover               */
  --stroke:        rgba(255,255,255,.09);
  --stroke-strong: rgba(255,255,255,.17);

  /* text */
  --ink:           #f4f3f0;   /* primary                           */
  --muted:         #b8b6ae;   /* secondary                         */
  --dim:           #8a887f;   /* tertiary / meta                   */
  --btn-text:      #0d0d0c;

  /* brand highlight */
  --gold:          #ffce4a;
  --gold-deep:     #f5a623;

  /* GAME-MODULE COLOURS — unchanged */
  --blue:          #0082F9;
  --green:         #40B104;
  --game-green:    #97e226;
  --teal:          #d3c41b;
  --yellow:        #F6A903;
  --orange:        #FB6400;
  --purple:        #7C26E3;
  --pink:          #ff5acd;
  --electric-blue: #0082F9;
  --whatsapp:      #25D366;

  /* neutral scale re-pointed for dark so legacy rules read correctly */
  --slate-50:  #211f1b;
  --slate-100: #242320;
  --slate-300: #3a3833;
  --slate-400: #8a887f;
  --slate-500: #b8b6ae;
  --slate-600: #cfcdc5;
  --slate-700: #e6e4dd;

  --shadow-sm: 0 6px 0 rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.45);
  --shadow-md: 0 20px 50px rgba(0,0,0,.45);
  --shadow-lg: 0 26px 80px rgba(0,0,0,.55);
  --radius:    18px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html, body,
#outer-wrap, #wrap, #main, #content-wrap,
.site-content, #content, .separate-layout, .content-area{
  background-color: var(--bg) !important;
  color: var(--ink);
}

body, p, li, dd, dt, td, th, blockquote,
.entry-content, .single .entry{
  color: var(--ink);
}
h1,h2,h3,h4,h5,h6{ color: var(--ink); }
a {
    color: var(--blue)!important;
}
a:hover{ color: var(--gold); }

hr, .sep, .divider{ border-color: var(--stroke) !important; background: var(--stroke); }

/* scrollbar */
*{ scrollbar-color: rgba(148,163,184,.5) transparent; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background: var(--bg-2); }
::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.45); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(148,163,184,.7); }
::selection{ background: var(--gold); color:#000; }

/* --------------------------------------------------------------------------
   3. TOP BAR + DEMO BANNER
   -------------------------------------------------------------------------- */
#top-bar-wrap, #top-bar-wrap-inner, #top-bar, #top-bar-inner,
#top-bar-content, .topbar-content{
  background-color: var(--bg) !important;
  color: var(--muted) !important;
  border-color: var(--stroke) !important;   /* kills OceanWP's light #f6f6f6 border */
}
#top-bar-content a{ color: var(--muted) !important; }
#top-bar-content a:hover{ color: var(--gold) !important; }
@media (max-width: 767px) {
    .elementor-396 .elementor-element.elementor-element-e8699fc {
        padding: 0px 0px 10px 0px!important;
    }
}
.demo-banner{
  background: linear-gradient(180deg, rgba(255,206,74,.10), rgba(255,206,74,.04));
  border: 1px solid rgba(255,206,74,.28);
  color: var(--muted);
  border-radius: 12px;
  margin-top: 8px;
  padding: 8px 8px;
  font-size: 1rem;
  line-height: 1.4;
}
.lty-expand-prize-group, .dashicons.lty-expand-prize-group {
    color: var(--muted) !important;
    background-color: var(--card-2) !important;
}
.lty-instant-winner-prize-group-item-header .lty-instant-winner-group-available-prize {
    background-color: var(--card-2) !important;
}
.demo-banner strong{ color: var(--gold); }
.woocomerce-checkout .cat-prize {
  display: none;
}
/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
#site-header, #site-header-inner,
#site-header.is-sticky, .is-sticky #site-header-inner,
.oceanwp-header-wrap{
  background-color: var(--bg-2) !important;
  border-color: var(--stroke) !important;
  box-shadow: 0 1px 0 var(--stroke) !important;
}

.compkit-header,
.compkit-header-left, .compkit-header-right,
.compkit-header-nav, .compkit-header-wallet{
  background: transparent !important;
  color: var(--ink) !important;
}
.compkit-header a{ color: var(--ink) !important; }

/* LAYOUT — logo left, basket/nav right, on one line
   (this lived in the old Additional CSS; restored here) */
.compkit-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px;
}
.compkit-header-left,
.compkit-header-right,
.compkit-header-nav,
.compkit-header-wallet{
  display: flex !important;
  align-items: center !important;
}
.compkit-header-right{ gap: 16px; }
/* kill OceanWP's float on the inner header blocks so flex controls them */
.compkit-header .custom-header-logo,
.compkit-header .custom-header-nav,
.compkit-header .custom-header-logo.left,
.compkit-header .custom-header-nav.right{
  float: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.compkit-header #site-logo, .compkit-header #site-logo-inner,
.compkit-header #site-navigation-wrap{ margin: 0 !important; float: none !important; }

/* wallet balance = gold */
.compkit-header-wallet .fa-wallet,
.compkit-header-wallet .woocommerce-Price-amount,
.compkit-header-wallet bdi{ color: var(--gold) !important; }

/* --------------------------------------------------------------------------
   5. NAV + CART ICON + MINI-CART
   -------------------------------------------------------------------------- */
#site-navigation a, .dropdown-menu a,
.oceanwp-mobile-menu-icon a{ color: var(--ink) !important; }

/* keep the top menu inline & bullet-free (defensive) */
.compkit-header #menu-top-menu{
  display: flex; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.compkit-header #menu-top-menu > li{ list-style: none; margin: 0; }

/* ticket / cart icon */
.wcmenucart i, .fa-ticket::before{ color: var(--ink) !important; }
.wcmenucart-details.count{
  background: var(--purple) !important;
  color: #fff !important;
  font-weight: 800;
}

/* mini-cart flyout */
.current-shop-items-dropdown, .owp-mini-cart,
.widget_shopping_cart, .widget_shopping_cart_content{
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--stroke) !important;
}
.woocommerce-mini-cart__empty-message,
.owp-cart-title{ color: var(--muted) !important; }

/* mobile menu panel */
.sidr, .sidr-inner, #mobile-menu, .oceanwp-mobile-menu-icon{
  background-color: var(--bg-2) !important;
  color: var(--ink) !important;
}
.sidr a{ color: var(--ink) !important; border-color: var(--stroke) !important; }

/* --------------------------------------------------------------------------
   6. FIXED GAME BAR  +  REAL GAME ICONS  (SVG, tinted per module)
   -------------------------------------------------------------------------- */
#fixed-bottom-menu{
  background: rgba(19,19,17,.92) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--stroke) !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,.5);
}

#menu-game-menu{
  display:flex; align-items:center; justify-content:space-between;
  list-style:none; margin:0; padding:6px 6px; gap:2px;
}
#menu-game-menu > li{ flex:1; text-align:center; }

#menu-game-menu a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; padding:6px 4px; text-decoration:none; border-radius:12px;
  transition: background .15s ease;
}
#menu-game-menu a:hover{
  background: rgba(255,255,255,.05);
}

/* hide the old icon-font AND any raw text label (font-size:0 kills text nodes) */
#menu-game-menu .menu-icon{ font-size:0 !important; line-height:0; color:transparent !important; }
#menu-game-menu .menu-icon i,
#menu-game-menu .menu-text{ display:none !important; }

/* the real icon, painted with the module colour via mask */
#menu-game-menu .menu-icon::before{
  content:""; display:block; width:26px; height:26px; margin:0 auto;
  background-color: var(--game-accent, var(--blue));
  -webkit-mask: var(--game-svg) center / contain no-repeat;
          mask: var(--game-svg) center / contain no-repeat;
  transition: transform .15s ease, filter .15s ease;
}
#menu-game-menu a:hover .menu-icon::before{
  transform: translateY(-2px);
  filter: drop-shadow(0 0 8px var(--game-accent));
}

/* per-game icon + colour map */
#menu-item-5519 { --game-svg:url(../assets/game-icons/football.svg);      --game-accent:var(--green); }
#menu-item-5520 { --game-svg:url(../assets/game-icons/instant-reveal.svg); --game-accent:var(--game-green); }
#menu-item-5521 { --game-svg:url(../assets/game-icons/scratchcard.svg);    --game-accent:var(--orange); }
#menu-item-5522 { --game-svg:url(../assets/game-icons/slots.svg);          --game-accent:var(--purple); }
#menu-item-5523 { --game-svg:url(../assets/game-icons/spin.svg);           --game-accent:var(--blue); }
#menu-item-11951{ --game-svg:url(../assets/game-icons/racecar.svg);        --game-accent:var(--pink); }
#menu-item-11952{ --game-svg:url(../assets/game-icons/grabclaw.svg);       --game-accent:var(--teal); }
#menu-item-11954{ --game-svg:url(../assets/game-icons/balloon-pop.svg);    --game-accent:var(--gold); }
#menu-item-11956{ --game-svg:url(../assets/game-icons/darts.svg);          --game-accent:var(--yellow); }

/* inline buy button stays green (reads fine on dark) */
#menu-game-menu .sign_up_btn a{
  background: var(--green); color:#fff; font-weight:700;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 6px 0 #2E7E03, 0 10px 20px rgba(64,177,4,.35);
}

/* keep content clear of the bar */
footer{ padding-bottom: 84px; }

/* --------------------------------------------------------------------------
   7. CONTENT — cards, sections, WooCommerce
   -------------------------------------------------------------------------- */
.card, article.post, .entry, .widget,
.wc-order-card, .wc-order-meta-item, .wc-order-content, .bundle{
  background-color: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--stroke) !important;
}

/* product tiles */
li.product, .product-inner, ul.products li.product,
.summary.entry-summary, .woocommerce-tabs,
.woocommerce table.shop_table, .cart_totals{
  background-color: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--stroke) !important;
}
.product .price, .woocommerce-Price-amount,
.kl-single-price-tag, .kl-price-title-wrapper{
  color: var(--ink) !important;
}
.lty-price-available-count{ color: var(--game-green) !important; }
.lty-price-won-count{ color: var(--blue) !important; }

/* meta chips / labels */
.wc-order-details span{ background: var(--card-2) !important; color: var(--muted) !important; }
.wc-order-meta-item .label{ color: var(--muted) !important; }
.wc-order-meta-item .value{ color: var(--ink) !important; }

/* ticket perforation dots that used a white fill → match dark bg */
.wc-order-card::before, .wc-order-card::after,
.lty-ticket-number::before, .lty-ticket-number::after,
.lty-instant-winner-prize-group-item-header::before,
.lty-instant-winner-prize-group-item-header::after{
  background: var(--bg) !important;
}

/* WooCommerce tabs */
.woocommerce-tabs ul.tabs li{ background: var(--bg-2) !important; border-color: var(--stroke) !important; }
.woocommerce-tabs ul.tabs li a{ color: var(--muted) !important; }
.woocommerce-tabs ul.tabs li.active a{ color: var(--ink) !important; }

/* let Elementor sections show the dark page behind their gaps */
.elementor-section, .elementor-container, .elementor-column, .e-con{ overflow: visible; }

/* --------------------------------------------------------------------------
   7b. PRODUCT / PRIZE CARDS  (WooCommerce lottery loop — the home grid)
   These fall back to plugin-white once the old Additional CSS is removed,
   so paint them explicitly.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product,
li.entry, li.item-entry, .product-inner, .woo-entry-inner,
.blog-entry-inner, .archive-lottery-meta{
  background-color: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--stroke) !important;
}

/* price + title block */
.kl-price-title-wrapper, .kl-single-price-tag, .kl-single-title{
  background: transparent !important;
}
.kl-single-price-tag .price, .woocommerce-Price-amount,
.kl-single-title a, .product_title a, .entry-title a{
  color: var(--ink) !important;
}
.woocommerce-Price-currencySymbol{ color: var(--muted) !important; }
.product .category a{ color: var(--muted) !important; }

/* price-tag perforation nubs must match the card surface behind the tag
   (luckytrucker set these to var(--bg), which read light before the
   load-order fix). Card is what sits behind them on the product loop. */
.kl-single-price-tag::before,
.kl-single-price-tag::after{
  background: var(--card) !important;
  border-color: var(--stroke) !important;
}
/* price text is painted with --btn-text (dark, for buttons); on the
   transparent tag over a dark card it must be light instead */
.kl-single-price-tag,
.kl-single-price-tag .amount,
.kl-single-price-tag .price,
.kl-single-price-tag .woocommerce-Price-currencySymbol{
  color: var(--ink) !important;
}

/* "Demo Started" status pill */
.lty-lottery-status-loop{
  background: var(--card-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--stroke) !important;
}

/* progress bar */
.lty-lottery-progress-bar{ color: var(--muted) !important; }
.lty-progress-bar{ background: var(--bg-2) !important; }
.lty-progress-count span, .lty-progress-remaining-count,
.lty-progress-bar-start, .lty-progress-bar-end, .lty-progress-bar-notice{
  color: var(--muted) !important;
}

/* --------------------------------------------------------------------------
   7c. INSTANT-WIN PRIZE GROUPS  (the accordion breakdown per prize)
   -------------------------------------------------------------------------- */
.lty-data-table-wrapper,
.lty-instant-winner-prize-group-wrapper{
  background: transparent !important;
}

/* counts row */
.lty-instant-winners-reports-wrapper{
  background: var(--card-2) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}
.lty-instant-winners-reports-wrapper span{ color: var(--ink) !important; }
.lty-price-available-count{ color: var(--game-green) !important; }
.lty-price-won-count{ color: var(--blue) !important; }

/* each prize row (card) */
.lty-instant-winner-prize-group-item{
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
}
.lty-instant-winner-prize-group-item-header{
  background: var(--card-2) !important;
  color: var(--ink) !important;
}
/* perforation dots reveal the item card behind the header notch */
.lty-instant-winner-prize-group-item-header::before,
.lty-instant-winner-prize-group-item-header::after{
  background: var(--card) !important;
}
.lty-instant-winner-prize-group-item-content{
  background: var(--card) !important;
  color: var(--ink) !important;
}
.lty-instant-winner-group-prize-message{ color: var(--ink) !important; }
.lty-instant-winner-group-available-prize,
.lty-instant-winner-group-ticket-numbers-title,
.lty-instant-winner-group-ticket-numbers-header{ color: var(--muted) !important; }
.lty-expand-prize-group, .dashicons.lty-expand-prize-group{ color: var(--muted) !important; }

/* individual ticket chips */
.lty-ticket-number{
  background: var(--bg-2) !important;
  color: var(--ink) !important;
  border: 1px dashed var(--stroke) !important;
}
.lty-ticket-number::before, .lty-ticket-number::after{ background: var(--card) !important; }
.lty-ticket-status{ color: var(--muted) !important; }

/* --------------------------------------------------------------------------
   8. BUTTONS  (module-coloured buttons keep their fill)
   -------------------------------------------------------------------------- */
.owp-btn-normal,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .added_to_cart, .single_add_to_cart_button{
  background-color: var(--purple) !important;
  color: #fff !important;
  border: none !important;
}
.owp-btn-normal:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{
  filter: brightness(1.08);
  color:#fff !important;
}
/* keep the gold "main site" CTA distinct */
.ck-main-site-btn{ background: var(--gold) !important; color:#000 !important; }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
input, select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single,
.qty, .quantity input{
  background-color: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--stroke) !important;
}
input::placeholder, textarea::placeholder{ color: var(--dim) !important; }
.select2-dropdown, .select2-results__option{
  background: var(--card) !important; color: var(--ink) !important;
}

/* 9b. QUANTITY STEPPER — luckytrucker styles it as a white pill
   (input.qty #fff + dark text, .plus/.minus white circles). Match specificity
   so the number is light and the +/- buttons are dark. */
.quantity input.qty{
  background: var(--bg-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35) !important;
}
.quantity .plus, .quantity .minus,
.single-product .quantity .plus, .single-product .quantity .minus{
  background: var(--card-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--stroke) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
}
.quantity .plus:hover, .quantity .minus:hover,
.single-product .quantity .plus:hover, .single-product .quantity .minus:hover{
  background: var(--card) !important;
  color: var(--gold) !important;
}

/* --------------------------------------------------------------------------
   10. CART SIDEBAR + QUICK VIEW
   -------------------------------------------------------------------------- */
#oceanwp-cart-sidebar-wrap .oceanwp-cart-sidebar{
  background: var(--bg-2) !important; color: var(--ink) !important;
}
.oceanwp-cart-sidebar .owp-cart-title,
.oceanwp-cart-close, .owp-qv-close{ color: var(--ink) !important; }
#owp-qv-content, .owp-qv-content-inner{ background: var(--card) !important; color: var(--ink) !important; }
.owp-qv-overlay, .oceanwp-cart-sidebar-overlay{ background: rgba(0,0,0,.6) !important; }

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
#footer, #footer-widgets, .footer-box, #footer-bottom,
.site-footer, .oceanwp-social-menu{
  background-color: var(--bg) !important;
  color: var(--muted) !important;
  border-color: var(--stroke) !important;
}
#footer .widget-title{ color: var(--ink) !important; }
#footer a, #footer-bottom a{ color: var(--muted) !important; }
#footer a:hover{ color: var(--gold) !important; }

/* ==========================================================================
   PORTED LAYOUT  — non-colour rules rescued from the old Additional CSS blob
   (grids, ticket design, bundles, thank-you page, cart sidebar, offsets).
   These are what kept the site laid out; the blob is now retired.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. FUNCTIONAL SHOW / HIDE + game-product spacing
   -------------------------------------------------------------------------- */
.single-product #tab-lty_ticket_logs{ display: none !important; }
.wc-thankyou-wrapper .enhanced-instant-win-reveal,
.has-game-product .cat-prizes{ display: none; }
.wc-thankyou-wrapper .cat-instant-reveal .enhanced-instant-win-reveal{ display: block; }
.has-game-product{ margin-top: 80px; }
.wc-order-details{ font-size: 1.25rem !important; }

/* --------------------------------------------------------------------------
   13. INSTANT-WIN TICKET DESIGN  (perforated cards + 3-col grid + accents)
   -------------------------------------------------------------------------- */
.lty-instant-winner-prize-group-item-content{ padding: 8px 6px !important; }

.lty-instant-winner-group-ticket-numbers-header{ text-align: center !important; margin-bottom: 6px !important; }
.lty-instant-winner-group-ticket-numbers-title{
  margin: 0 !important;
  font-size: .6rem !important; font-weight: 800 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* counts row */
.lty-instant-winners-reports-wrapper{
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  gap: 20px !important; margin-bottom: 12px !important;
  font-family: var(--compkit-font-family, inherit), sans-serif !important;
  white-space: nowrap !important;
}
.lty-instant-winners-reports-wrapper span{
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  font-size: .8rem !important; font-weight: 800 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
}
.lty-price-available-count::before{
  content: "\f06b"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important;
  color: var(--game-green) !important; font-size: .9rem !important;
}
.lty-price-won-count::before{
  content: "\f091"; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important;
  color: var(--blue) !important; font-size: .9rem !important;
}
@media (max-width:600px){
  .lty-instant-winners-reports-wrapper{ gap: 14px !important; }
  .lty-instant-winners-reports-wrapper span{ font-size: .72rem !important; letter-spacing: .08em !important; }
}

/* 3-column ticket grid */
.lty-instant-winner-group-ticket-numbers{
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important;
}

/* individual ticket (perforated) */
.lty-ticket-number{
  position: relative !important; padding: 6px 4px !important;
  text-align: center !important;
  font-family: var(--compkit-font-family, inherit), sans-serif !important;
  font-size: .95rem !important; font-weight: 900 !important; line-height: 1.05 !important;
  background: var(--bg-2) !important; color: var(--ink) !important;
  border-radius: 8px !important; border: 2px dashed var(--ticket-accent, var(--blue)) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.35) !important;
}
.lty-ticket-number::before, .lty-ticket-number::after{
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px;
  background: var(--bg); border-radius: 50%; transform: translateY(-50%); z-index: 2;
}
.lty-ticket-number::before{ left: -5px; border-right: 2px dashed var(--ticket-accent, var(--blue)); }
.lty-ticket-number::after{ right: -5px; border-left: 2px dashed var(--ticket-accent, var(--blue)); }
.lty-ticket-number:nth-child(4n+1){ --ticket-accent: var(--orange); }
.lty-ticket-number:nth-child(4n+2){ --ticket-accent: var(--blue); }
.lty-ticket-number:nth-child(4n+3){ --ticket-accent: var(--purple); }
.lty-ticket-number:nth-child(4n+4){ --ticket-accent: var(--game-green); }

.lty-ticket-status{
  display: block !important; margin-top: 3px !important;
  font-size: .65rem !important; font-weight: 800 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--muted) !important;
}
@media (max-width:600px){
  .lty-ticket-number{ font-size: .7rem !important; padding: 5px 3px !important; }
  .lty-ticket-status{ font-size: .4rem !important; }
}

/* prize-group card + perforated header + alternating accents */
.lty-instant-winner-prize-group-item{ position: relative; border-radius: 14px; overflow: hidden; }
.lty-instant-winner-prize-group-item:nth-child(4n+1){ --ticket-accent: var(--orange); }
.lty-instant-winner-prize-group-item:nth-child(4n+2){ --ticket-accent: var(--blue); }
.lty-instant-winner-prize-group-item:nth-child(4n+3){ --ticket-accent: var(--purple); }
.lty-instant-winner-prize-group-item:nth-child(4n){   --ticket-accent: var(--game-green); }

.lty-instant-winner-prize-group-item-header{
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 2px dashed var(--ticket-accent, var(--blue)) !important;
  border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0,0,0,.25);
  cursor: pointer;
}
.lty-instant-winner-prize-group-item-header::before,
.lty-instant-winner-prize-group-item-header::after{
  content: ""; position: absolute; top: 50%; width: 14px; height: 14px;
  background: var(--bg) !important; border-radius: 50%; transform: translateY(-50%); z-index: 2;
}
.lty-instant-winner-prize-group-item-header::before{ left: -7px; border-right: 2px dashed var(--ticket-accent, var(--blue)); }
.lty-instant-winner-prize-group-item-header::after{ right: -7px; border-left: 2px dashed var(--ticket-accent, var(--blue)); }

.lty-instant-winner-prize-group-item-header img{
  width: 62px !important; height: 62px !important; object-fit: cover; border-radius: 8px; flex-shrink: 0;
}
.lty-instant-winner-prize-group-item-header-content{ display: flex; flex-direction: column; gap: 2px; }
.lty-instant-winner-group-prize-message{
  font-size: .98rem !important; font-weight: 900 !important;
  letter-spacing: .08em !important; text-transform: uppercase; line-height: 1.05 !important;
  color: var(--ink) !important;
}
.lty-instant-winner-group-available-prize{
  font-size: .9rem !important; font-weight: 800 !important;
  letter-spacing: .18em !important; text-transform: uppercase; color: var(--muted) !important;
}
.lty-expand-prize-group{
  margin-left: auto; font-size: 18px !important; color: var(--ticket-accent, var(--muted)) !important;
}

/* --------------------------------------------------------------------------
   14. PRICING GRID + BUNDLE CARDS  (icons repointed to /assets/game-icons)
   -------------------------------------------------------------------------- */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-grid.auto{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pricing-grid .span-2{ grid-column: span 2; }
.pricing-grid > p, .pricing-grid > br{ display: none !important; }
@media(max-width:900px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-grid .span-2{ grid-column: span 1; }
}

.bundle{
  background: var(--card); border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-lg); padding: 56px 26px 34px; margin-top: 36px;
  text-align: center; position: relative;
}
.bundle .badge{
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 5;
  padding: 8px 18px; border-radius: 999px;
  font-size: .75rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
  background: var(--orange); color: #121212; border: 2px solid var(--bg);
}
.bundle-icons{ display: flex; flex-wrap: nowrap !important; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 10px; }
.bundle-icons br{ display: none; }
.bundle-icon{
  width: 96px; height: 96px; border-radius: 18px;
  box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 16px 32px rgba(0,0,0,.45);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; flex: 0 0 auto;
}
.bundle-icon.scratch{ background: var(--orange);     -webkit-mask-image: url('../assets/game-icons/scratchcard.svg');    mask-image: url('../assets/game-icons/scratchcard.svg');    -webkit-mask-size: 72px 72px; mask-size: 72px 72px; }
.bundle-icon.spin{    background: var(--blue);       -webkit-mask-image: url('../assets/game-icons/spin.svg');           mask-image: url('../assets/game-icons/spin.svg');           -webkit-mask-size: 72px 72px; mask-size: 72px 72px; }
.bundle-icon.slots{   background: var(--purple);     -webkit-mask-image: url('../assets/game-icons/slots.svg');          mask-image: url('../assets/game-icons/slots.svg');          -webkit-mask-size: 72px 72px; mask-size: 72px 72px; }
.bundle-icon.reveal{  background: var(--game-green);  -webkit-mask-image: url('../assets/game-icons/instant-reveal.svg'); mask-image: url('../assets/game-icons/instant-reveal.svg'); -webkit-mask-size: 64px 64px; mask-size: 64px 64px; }
.bundle-plus{ font-size: 2.8rem; font-weight: 1000; line-height: 1; opacity: .6; color: var(--muted) !important; flex: 0 0 auto; }
@media (max-width:900px){
  .bundle-icon{ width: 64px; height: 64px; border-radius: 14px; }
  .bundle-icon.scratch, .bundle-icon.spin, .bundle-icon.slots, .bundle-icon.reveal{ -webkit-mask-size: 48px 48px !important; mask-size: 48px 48px !important; }
  .bundle-plus{ font-size: 2rem; }
}
.bundle ul{ list-style: none; padding: 0; margin: 18px auto 0; max-width: 520px; text-align: center; }
.bundle ul li{ margin-bottom: 10px; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.bundle ul li::before{ content: "\2713"; color: var(--green); font-weight: 900; font-size: 1.05rem; }
.bundle .button, .buy-btn.bundle-btn{
  display: inline-block; background: var(--orange) !important; color: #121212;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 24px; margin-top: 18px; border-radius: 8px; border: none;
  box-shadow: 0 10px 0 var(--orange-shadow, #C44E00), 0 18px 40px rgba(251,100,0,.45);
}
.bundle .button:hover, .buy-btn.bundle-btn:hover{ background: var(--orange); transform: translateY(2px); color: #121212 !important; box-shadow: 0 8px 0 var(--orange-shadow, #C44E00), 0 14px 28px rgba(251,100,0,.4); }
.bundle .button:active, .buy-btn.bundle-btn:active{ transform: translateY(6px); box-shadow: 0 4px 0 var(--orange-shadow, #C44E00); }
.bundle .price{ margin: 22px 0 10px; font-size: 3.2rem; font-weight: 1000; line-height: 1; color: var(--purple); letter-spacing: -.02em; font-family: var(--compkit-font-family, inherit), sans-serif; }
.bundle .price::first-letter{ font-size: 2.2rem; vertical-align: top; margin-right: 4px; }
.bundle .price .sub{ font-size: 1rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
@media(max-width:700px){ .bundle .price{ font-size: 2.6rem; } .bundle .price .sub{ font-size: .85rem; } }

/* --------------------------------------------------------------------------
   15. THANK-YOU PAGE  (order meta + order ticket grid/cards)
   -------------------------------------------------------------------------- */
.wc-thankyou-wrapper{ max-width: 1200px; margin: 0 auto; padding: 60px 20px; }
.wc-thankyou-header{ margin-bottom: 50px; }
.wc-thankyou-header h1{ font-size: 32px; margin-bottom: 25px; }

.wc-order-meta{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.wc-order-meta-item{ background: var(--card-2) !important; padding: 20px; border-radius: 12px; }
.wc-order-meta-item .label{ display: block; font-size: 13px; color: var(--muted) !important; margin-bottom: 6px; }
.wc-order-meta-item .value{ font-size: 18px; font-weight: 600; color: var(--ink) !important; }

/* order ticket grid */
.wc-order-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 28px; margin-top: 40px; }
.wc-order-card{
  position: relative; display: flex; align-items: center; gap: 20px;
  background: var(--card) !important; padding: 20px 26px; border-radius: 18px;
  border: 3px dotted var(--blue); box-shadow: var(--shadow-md); overflow: hidden;
}
.wc-order-card::before, .wc-order-card::after{
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; background: var(--bg) !important; border-radius: 50%; z-index: 2;
}
.wc-order-card::before{ left: -13px; }
.wc-order-card::after{ right: -13px; }
.wc-order-image{ position: relative; padding-right: 18px; }
.wc-order-image img{ width: 90px; height: 90px; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-sm); }
.wc-order-image::after{ content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; border-right: 2px dashed var(--stroke); }
.wc-order-content{ display: flex; flex-direction: column; gap: 10px; flex: 1; }
.wc-product-title{ font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0; }
.wc-order-details{ display: flex; gap: 18px; font-size: .95rem; color: var(--muted); justify-content: flex-start; }
.wc-order-details span{ background: var(--card-2); padding: 6px 12px; border-radius: 10px; font-weight: 600; }
.wc-game-section{ margin-top: 4px; font-size: .9rem; color: var(--muted); }
/* dotted colour cycling */
.wc-order-card:nth-child(1){ border-color: var(--blue); }
.wc-order-card:nth-child(2){ border-color: var(--green); }
.wc-order-card:nth-child(3){ border-color: var(--yellow); }
.wc-order-card:nth-child(4){ border-color: var(--orange); }
.wc-order-card:nth-child(5){ border-color: var(--purple); }
.wc-order-card:nth-child(6){ border-color: var(--pink); }
.wc-order-card:nth-child(7n+1){ border-color: var(--electric-blue); }
.wc-order-card:nth-child(7n+2){ border-color: var(--game-green); }
.wc-order-card:nth-child(7n+3){ border-color: var(--teal); }
@media(max-width:520px){
  .wc-order-card{ flex-direction: column; align-items: flex-start; }
  .wc-order-image{ padding-right: 0; width: 100%; }
  .wc-order-image img{ width: 100%; height: 180px; }
  .wc-order-image::after{ display: none; }
  .wc-order-details{ flex-wrap: wrap; }
  .wc-order-card::before, .wc-order-card::after{ display: none; }
}

/* --------------------------------------------------------------------------
   16. CART SIDEBAR — open/close positioning (layout, not just colour)
   -------------------------------------------------------------------------- */
body.owp-cart-sidebar-open #oceanwp-cart-sidebar-wrap{ visibility: visible; opacity: 1; display: block; }
body.owp-cart-sidebar-open #oceanwp-cart-sidebar-wrap .oceanwp-cart-sidebar{
  position: fixed; top: 0; right: 0; left: auto;
  width: 320px; height: 100vh; max-height: 100vh;
  transform: translateX(0); opacity: 1; visibility: visible; z-index: 999999;
}
body.owp-cart-sidebar-open #oceanwp-cart-sidebar-wrap .oceanwp-cart-sidebar-overlay{
  display: block; opacity: 1; visibility: visible; z-index: 999998;
}

/* --------------------------------------------------------------------------
   17. TOP-BAR alignment + ELEMENTOR offsets / clipping
   -------------------------------------------------------------------------- */
@media (min-width: 768px){
  #top-bar-content{ width: 75%; margin-left: auto; margin-right: 0; text-align: right; }
  #top-bar-content .topbar-content{ display: block; }
}
.elementor-section, .elementor-container, .elementor-column{ overflow: visible !important; }

/* Custom home content sections had a "classic" WHITE background set inside
   Elementor's UI (lives in Elementor's generated CSS, not here). Force them
   to the dark page colour so cards no longer sit in a white box.
   `.home-section-var` = the reusable marker class on these sections;
   `.mid-section-sale` = the "Loved What You Just Played" CTA wrapper. */
section.home-section-var,
.elementor-section.home-section-var,
.elementor-element-dd91700,
.elementor-element-dd91700 > .elementor-container,
.mid-section-sale{
  background-color: var(--bg) !important;
  background-image: none !important;
}

@media (min-width: 1300px){ .elementor-element-82bf6d6{ position: relative; top: -60px; } }
@media (min-width: 768px) and (max-width: 1200px){ .elementor-element-82bf6d6{ position: relative; top: -30px; } }
@media (max-width: 767px){ .elementor-element-82bf6d6{ position: relative; top: 0; } }

/* --------------------------------------------------------------------------
   18. CHECKOUT / ORDER SUMMARY  — clean dark forms
   (billing is reduced to email only in functions.php; this styles what's left)
   -------------------------------------------------------------------------- */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2{
  background: transparent !important; box-shadow: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li, form, input, .woocommerce-checkout .form-row.place-order, .woocommerce-checkout #payment, .select2-selection--single {
    background-color: var(--card)!important;
  color: var(--ink)!important;
}
.woocommerce-checkout table.shop_table thead th, .woocommerce #order_review table.shop_table tfoot th {
    background-color: var(--card)!important;
  color: var(--ink)!important;
}
.widget_shopping_cart .total {
    background-color: var(--card)!important;
}
.woocommerce-terms-and-conditions-wrapper {
  font-size: 12px!important;
}
.woocommerce #order_review table.shop_table tbody td {
    background-color: var(--card)!important;
}
/* the two panels: email fieldset + order review */
#customer_details .woocommerce-billing-fields,
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order{
  background: var(--card) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: var(--shadow-md) !important;
}

/* headings */
.woocommerce-checkout h3,
#order_review_heading,
.woocommerce-billing-fields h3{
  color: var(--ink) !important; font-weight: 800 !important;
}

/* labels + inputs */
.woocommerce-checkout label,
.woocommerce form .form-row label{ color: var(--muted) !important; }
.woocommerce-checkout .required, .woocommerce form .required{ color: var(--gold) !important; border: 0 !important; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout input[type="email"],
.woocommerce-checkout textarea{
  background: var(--bg-2) !important; color: var(--ink) !important;
  border: 1px solid var(--stroke) !important; border-radius: 10px !important;
  padding: 12px 14px !important;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout input[type="email"]:focus{
  border-color: var(--gold) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,206,74,.18) !important;
}

/* order-review table */
.woocommerce-checkout-review-order-table{
  background: transparent !important; border: 0 !important;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  background: transparent !important; color: var(--ink) !important;
  border-top: 1px solid var(--stroke) !important; padding: 12px 6px !important;
}
.woocommerce-checkout-review-order-table thead th{ color: var(--muted) !important; }
.woocommerce-checkout-review-order-table .cart_item td{ color: var(--muted) !important; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total .amount{
  color: var(--ink) !important; font-size: 1.15rem !important;
}
.woocommerce-checkout-review-order-table .amount{ color: var(--ink) !important; }

/* payment box (WooCommerce defaults to light greys #ebe9eb / #dfdcde) */
.woocommerce-checkout #payment,
.woocommerce #payment{
  background: var(--bg-2) !important; border-radius: 12px !important;
  border: 1px solid var(--stroke) !important;
}
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom: 1px solid var(--stroke) !important;
}
.woocommerce-checkout #payment .payment_box,
.woocommerce #payment div.payment_box{
  background: var(--card-2) !important; color: var(--muted) !important;
  border-radius: 10px !important;
}
/* the little arrow above a payment box */
.woocommerce-checkout #payment .payment_box::before,
.woocommerce #payment div.payment_box::before{
  border-bottom-color: var(--card-2) !important;
}
.woocommerce-checkout #payment label{ color: var(--ink) !important; }
.woocommerce-checkout #payment .about_paypal{ color: var(--muted) !important; }

/* place-order button */
.woocommerce-checkout #place_order,
.woocommerce #payment #place_order{
  background: var(--green) !important; color: #fff !important;
  border: none !important; border-radius: 10px !important;
  font-weight: 800 !important; letter-spacing: .04em !important;
  padding: 16px 22px !important; width: 100% !important;
  box-shadow: 0 8px 24px rgba(64,177,4,.35) !important;
}
.woocommerce-checkout #place_order:hover{ filter: brightness(1.08); }

/* notices (login / coupon prompts default to pale blue) */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-message{
  background: var(--card-2) !important; color: var(--muted) !important;
  border-top: 3px solid var(--gold) !important;
}
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a{ color: var(--gold) !important; }

/* select2 (if any dropdowns remain) */
.woocommerce-checkout .select2-container--default .select2-selection--single{
  background: var(--bg-2) !important; border: 1px solid var(--stroke) !important; color: var(--ink) !important;
}