/* WinSpirit Casino - Clean Consolidated CSS */
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap');

/* CSS Reset */
*,::after,::before{box-sizing:border-box}
blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}
ol[role=list],ul[role=list]{list-style:none}
html{height:100%;scroll-behavior:smooth}
body{min-height:100vh;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
canvas,img,picture,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,h5,p{overflow-wrap:break-word}

/* Body Styles */
.body{
  width:100%;
  margin-top:64px;
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  color:#b6bdcc;
  background-color:#110e1b;
  word-break:break-word
}

.body:before{
  content:"";
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1;
  display:none;
  background:rgba(28,28,28,.1)
}

.body--no-scroll{
  position:relative;
  overflow:hidden;
  touch-action:none
}

.body--no-scroll:before{display:block}

/* Main Layout */
.main{margin-bottom:48px}

/* Lists */
ol,ul{margin:0;padding:0;list-style:none}

/* Buttons */
button{all:unset;box-sizing:border-box}
.btn::after,.btn::before,.btn>span,.btn>svg,.btn>use,button>span,button>svg,button>use{pointer-events:none}

/* Container */  
.container{max-width:1320px;margin:0 auto;padding:0 16px}
.container--col-2{margin:0 auto}
.container--small{max-width:820px !important;margin:0 auto}

/* Typography */
.h1,h1{font-size:24px}
.h2,.h3,h2,h3{font-size:20px}
.caption-1{font-size:14px;line-height:1.7}
.caption-2{font-size:12px;line-height:1.3}
.caption-small{font-size:9px;line-height:1.8;letter-spacing:.02em}

/* Links and disabled elements */
a.disabled,button[disabled]{opacity:.5;cursor:default;pointer-events:none}
.link{color:#00eda6}

/* App Section */
.app{margin-top:32px;padding:6px 16px;text-align:center}
.app__img{width:192px;height:192px;object-fit:cover;margin:0 auto 16px}

/* Button Styles */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background-color:rgba(0,0,0,0);
  border:1px solid transparent;
  user-select:none;
  font-weight:700;
  text-decoration:none;
  color:#fafafa
}

.btn svg{z-index:1;width:24px;height:24px}

.btn--m{min-width:115px;padding:7px 23px;border-radius:23px;font-size:20px;line-height:30px}
.btn--s{min-width:74px;padding:7px 15px;border-radius:20px;font-size:14px;line-height:24px}
.btn--xs{padding:7px 15px;border-radius:16px;font-size:12px;line-height:16px}
.btn--xs svg{width:16px;height:16px}

.btn--primary{color:#110e1b;background-color:#00eda6}
.btn--primary svg{fill:#110e1b}
.btn--secondary{background-color:#4c426b}
.btn--bordered{border-color:#4c426b;box-sizing:content-box}
.btn--fluid{width:100%;box-sizing:border-box}
.btn--reverse{flex-direction:row-reverse}

/* Card Component */
.card{position:relative;flex-shrink:0;overflow:hidden;font-size:0;line-height:1}
.card__label{position:absolute;top:0;right:0;z-index:1;display:flex}
.card__label img{width:24px}
.card__img{min-width:84px;min-height:119px;width:100%;height:100%}

/* Content Styles */
.content{width:100%}
.content strong{font-weight:700}
.content>h1,.content>h2,.content>h3{margin:16px 0;color:#f7f7f7}
.content>p:not([class]):not(:last-child){margin:16px 0}

.content>ul:not([class]){margin-top:16px;margin-left:28px;padding:0;list-style-type:none}
.content>ul:not([class]):not(:last-child){margin-bottom:16px}
.content>ul:not([class]) li{position:relative}
.content>ul:not([class]) li::before{
  content:"";
  position:absolute;
  top:5px;
  left:-28px;
  width:16px;
  height:16px;
  background-color:#b6bdcc;
  border-radius:8px
}
.content>ul:not([class]) li:not(:last-of-type){margin-bottom:16px}

/* Gutenberg unordered lists */
ul.wp-block-list{
  margin-top:16px;
  margin-left:28px;
  padding:0;
  list-style:none
}
ul.wp-block-list:not(:last-child){margin-bottom:16px}
ul.wp-block-list li{position:relative;margin-bottom:12px}
ul.wp-block-list li::before{
  content:"";
  position:absolute;
  top:5px;
  left:-28px;
  width:16px;
  height:16px;
  background-color:#b6bdcc;
  border-radius:8px
}
ul.wp-block-list li:last-of-type{margin-bottom:0}

.content>ol:not([class]){margin-top:16px;margin-left:48px;counter-reset:count}
.content>ol:not([class]):not(:last-child){margin-bottom:16px}
.content>ol:not([class]) li{position:relative;min-height:32px;counter-increment:count}
.content>ol:not([class]) li:before{
  content:counter(count);
  position:absolute;
  top:0;
  left:-48px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  font-size:14px;
  font-weight:700;
  color:#f7f7f7;
  background-color:#cd3fe2;
  border-radius:16px
}
.content>ol:not([class]) li:not(:last-of-type){margin-bottom:16px}

.content a:not([class]){color:#00eda6}

.content>figure img,.content>img,.content>p img,.wp-block-image img{
  background-color:#4c426b;
  border-radius:16px;
  height:auto
}

/* Table Styles */
.content>table,.wp-block-table table{
  display:block;
  margin-bottom:24px;
  color:#f7f7f7;
  overflow-x:auto;
  border-collapse:collapse
}

.content>table tr,.wp-block-table table tr{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  min-height:66px;
  padding:12px 20px;
  background-color:rgba(88,72,139,.18);
  column-gap:10px
}

.content>table tr:first-of-type,.wp-block-table table tr:first-of-type{
  padding-top:16px;
  font-weight:700;
  background-color:rgba(88,72,139,.26);
  border-top-left-radius:16px;
  border-top-right-radius:16px
}

.content>table tr:last-of-type,.wp-block-table table tr:last-of-type{
  padding-bottom:16px;
  background-color:rgba(88,72,139,.26);
  border-bottom-right-radius:16px;
  border-bottom-left-radius:16px
}

/* Blockquote notice styling (reference-like) */
.wp-block-quote{margin:16px 0;padding:12px 16px;border-left:4px solid #4c426b;background:rgba(88,72,139,.18);border-radius:8px}
.wp-block-quote p{margin:0;color:#f7f7f7}

/* Numbered lists style */
.content>ol:not([class]),
ol.wp-block-list{
  counter-reset:count;
  margin-top:16px;margin-left:48px
}
.content>ol:not([class]) li,
ol.wp-block-list li{
  position:relative;min-height:32px;counter-increment:count;margin-bottom:12px
}
.content>ol:not([class]) li:before,
ol.wp-block-list li:before{
  content:counter(count);
  position:absolute;top:0;left:-48px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;font-weight:700;color:#f7f7f7;background-color:#cd3fe2;border-radius:16px
}
/* Remove extra space after last item */
.content>ol:not([class]) li:last-of-type,
ol.wp-block-list li:last-of-type{margin-bottom:0}

.content>table td,.wp-block-table table td{
  min-width:150px;
  line-height:22px;
  word-break:break-word;
  border:0
}

/* Blockquote */
.content blockquote{
  position:relative;
  margin-bottom:24px;
  padding:24px 20px 24px 24px;
  font-weight:700;
  color:#fff;
  background-color:#221c36;
  background-image:linear-gradient(90deg,#221c36 0,#3f1c60 100%);
  border-radius:16px;
  overflow:hidden
}

.content blockquote p{padding-left:40px}

.content blockquote:before{
  content:"";
  position:absolute;
  top:24px;
  left:24px;
  display:block;
  width:24px;
  height:24px;
  margin-right:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23fff' d='M20.486 3.515c-4.686-4.686-12.285-4.687-16.971 0-4.687 4.686-4.686 12.284 0 16.971 4.686 4.685 12.284 4.686 16.971 0 4.686-4.687 4.685-12.285 0-16.971Zm-6.92 13.703a1.565 1.565 0 1 1-3.131 0v-6.261a1.565 1.565 0 1 1 3.13 0v6.26ZM11.971 8.28c-.901 0-1.502-.638-1.484-1.427-.018-.826.583-1.445 1.502-1.445.92 0 1.503.62 1.522 1.445 0 .789-.6 1.427-1.54 1.427Z'/%3E%3C/svg%3E")
}

.content--light{padding:24px 16px 32px;background-color:#30284c}

/* Hero Section */
.hero-slider{
  height:360px;
  overflow:hidden;
  position:relative;
  overscroll-behavior:contain
}

/* Spacing around hero */
.hero-slider{margin-bottom:0}

.hero{
  height:360px;
  background-image:linear-gradient(270deg,#130e20 0,#7000ff 27.89%,#130e20 100%);
  background-color:#221c36
}

.hero__container{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  row-gap:12px;
  height:100%;
  padding:0 16px;
  margin:0;
  background-repeat:no-repeat;
  background-position:-35%;
  background-size:cover;
  z-index:2
}

.hero__bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top 0 left -38%
}

.hero__title,
.hero__subtitle {
  max-width: 262px;
  color: #fafafa;
}

.hero__title {
  margin-bottom: 5px;
  line-height: 30px;
}

.hero__subtitle {
  line-height: 24px;
}

.hero__btn {
  margin-top: 12px;
}
/* Hero tag sizing */
.hero__tag{
  font-size:14px;
  line-height:22px;
}

/* Icons */
.icon-burger{width:27px;height:18px}
.icon-arrow-right{width:8px;height:14px;fill:#00eda6}
.icon-close{width:24px;height:24px;fill:#f7f7f7}
.icon-arrow-down{width:24px;height:24px;fill:#00eda6}
.icon-email{width:24px;height:24px;margin-right:8px;fill:#00eda6}
.icon-copy{width:24px;height:24px;fill:#f7f7f7}

/* Info Section */
.info-wrapper{
  display:block;
  margin-top:8px;
  overflow:hidden;
}

/* Ensure info slider track sizes to content (fix disappearing on scroll) */
.info-wrapper .slider-container{height:auto}

/* Fading edge gradient for info slider track */
.info-wrapper{position:relative}
.info-wrapper::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:40px;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(270deg, rgba(17,14,27,1) 0%, rgba(17,14,27,0) 100%);
}

.info{
  display:inline-grid;
  grid-template-columns:64px auto;
  column-gap:16px;
  align-items:center;
  width:100%;
  min-height:80px;
  padding:8px
}

.info__title{margin-bottom:4px;color:#f7f7f7}

/* Menu Styles */
.menu{
  position:absolute;
  top:0;
  right:-16px;
  z-index:2;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:375px;
  height:calc(var(--vh,1vh)*100);
  padding:16px 0 24px;
  background-color:#30284c;
  transition:transform .3s .3s;
  transform:translateX(100%);
  overflow:hidden
}

.menu--open{transition:transform .3s;transform:translateX(0)}

.menu__inner{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  max-height:calc(var(--vh,1vh)*100 - 100px)
}

.menu__prev,.menu__text{margin-bottom:24px;padding-left:16px;color:#f7f7f7}

.menu__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;
  font-size:0;
  border:0;
  cursor:pointer
}

.menu__list{
  max-height:calc(var(--vh,1vh)*100 - 206px);
  list-style:none;
  overflow-y:auto
}

.menu__item--dropdown{display:flex;align-items:center;padding-right:0}
.menu__link{display:block;flex-grow:1;padding:16px;text-decoration:none;color:#c1b3db;transition:color .3s;cursor:pointer}
.menu__link:hover,
.menu__link:focus {
  color: #00eda6;
}
.menu__arrow{margin-left:auto;padding-right:24px;font-size:0;border:0;fill:#c1b3db;transition:fill .3s}
.menu__arrow:hover svg,
.menu__arrow:focus svg {
  fill: #00eda6;
}
.menu__arrow svg{width:24px;height:24px;fill:#c1b3db}

.menu__dropdown{
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  width:100%;
  max-width:375px;
  height:calc(var(--vh,1vh)*100);
  padding:20px 0 24px;
  background-color:#30284c;
  transition:transform .3s;
  transform:translateX(100%);
  visibility:hidden;
  opacity:0
}

.menu__dropdown--open{
  transform:translateX(0);
  visibility:visible;
  opacity:1
}

.submenu .menu__link{text-transform:none}
.menu__btns{gap:17px;margin:24px 16px 32px}
.menu__ref-btn{width:100%}

/* Promo Section */
.promo-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.promo{display:flex;column-gap:8px}

.promo__item{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  width:304px;
  min-height:424px;
  padding:16px
}

.promo__item-group{width:100%}
.promo__item-img{width:100%;height:224px;border-radius:16px}
.promo__item-timer{gap:8px;margin-bottom:16px;background-color:#30284c;border-radius:12px}
.promo__item-title{margin-top:8px}
.promo__item-btn{width:100%;margin-top:16px;box-sizing:border-box}

/* Social */
.social{display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;row-gap:8px}

.social__link{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:32px;
  height:32px;
  padding:8px;
  background-color:#c1b3db;
  border-radius:16px
}

.social__link svg{fill:#221c36}
.social__icon{max-width:16px;max-height:16px;fill:#221c36}

/* Tags */
.tag{
  align-items:center;
  padding:4px 16px;
  background-color:#221c36;
  border-radius:14px;
  font-size:12px;
  line-height:20px;
  color:#f7f7f7
}

.tag--timer{padding:4px 8px;background-color:#30284c}

/* Timer */
.timer{width:94px;font-size:0}
.timer__day,.timer__dots,.timer__item{font-size:12px;line-height:1.3}
.timer__day{margin-right:8px}

/* Table of Contents */
.toc{
  margin:16px 16px 0;
  background-color:#30284c;
  border-radius:24px;
  overflow:hidden
}

.toc.active .toc__list{display:flex}
.toc.active svg{transform:rotate(180deg)}

.toc__btn{
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  padding:10px 17px 9px 25px;
  line-height:27px;
  color:#f7f7f7
}

.toc__btn svg{width:12px;fill:#f7f7f7}

.toc__list{
  display:none;
  flex-direction:column;
  padding:14px 16px 30px
}

.toc__sublist{margin:16px 0 0 16px}
.toc__item:not(:last-child){margin-bottom:16px}
.toc__link{text-decoration:none;color:#f7f7f7}

/* Top Bonuses */
.top-bonuses{position:absolute;top:12px;right:12px;left:auto;bottom:auto;z-index:8;display:flex;flex-direction:column;gap:8px}

.top-bonus{
  display:none;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  max-width:336px;
  min-height:120px;
  padding:16px;
  background-image:linear-gradient(90deg,#eb03e2 0,#2995fe 100%)
}

.top-bonus.open{display:flex}
.top-bonus__body{display:flex;flex-direction:column}
.top-bonus__img{width:72px;height:72px;margin-right:16px}
.top-bonus__type{margin-bottom:8px;color:#ffdd16}
.top-bonus__title{max-width:176px;margin-bottom:3px;line-height:20px;color:#fff}
.top-bonus__close{margin-left:auto;padding:4px 4px 4px 8px;pointer-events:auto}

/* FAQ */
.faq{margin-top:32px}
.faq__title{margin-bottom:24px;font-size:24px}

.faq__item{
  background-color:rgba(68,56,108,.6);
  border-radius:16px;
  overflow:hidden
}

.faq__item:not(:last-of-type){margin-bottom:16px}
.faq__question{padding:12px 16px;color:#110e1b;background-color:#00eda6}
.faq__answer{padding:24px 16px}

/* Footer */
.footer-menu{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.footer-menu__link{display:inline-block;text-decoration:unset;color:#b6bdcc}

.payments{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

.payments__item{
  height:68px;
  padding:10px 30px;
  border-radius:16px;
  background-color:rgba(68,56,108,.6)
}

.payments__img{height:100%;object-fit:contain;margin:auto}

/* Header */
.header{position:fixed;z-index:60;top:0;left:0;width:100%;background-color:#30284c}

.header__wrapper{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  padding:0; /* spacing controlled by .container */
}

.header__logo-link{text-decoration:unset}
.header__logo-img{max-width:unset}
.header__burger{width:35px;height:26px;margin-right:-4px;padding:4px}
.header__burger svg{fill:#c1b3db}

/* Footer */
.footer__top{display:flex;flex-direction:column;row-gap:8px}
.footer__email{margin-bottom:24px}
.footer__images{display:flex;align-items:center;justify-content:flex-start}
.footer__middle{padding:0 4px 24px;border-bottom:1px solid rgba(68,56,108,.6)}
.footer__bottom{padding:24px 0}

.images-bottom{
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:24px;
  gap:8px 16px
}

.images-bottom__img{max-height:48px}
.images-middle__img:last-of-type{margin-right:0}

.images-bottom__img,.images-middle__img{
  flex-shrink:0;
  width:auto;
  object-fit:contain
}

/* Card List */
.cards__list{
  display:grid;
  grid-template-rows:repeat(2,1fr);
  grid-template-columns:repeat(3,1fr);
  column-gap:17px;
  row-gap:16px;
  margin-bottom:16px;
}

.cards__btn{
  width:100%;
}

/* Utility Classes */
.light{color:#f7f7f7}
.align-center{text-align:center}
.bold{font-weight:700}
.extra-bold{font-weight:800}
.flex{display:flex}
.flex-inline{display:inline-flex}
.space-between{justify-content:space-between}
.items-center{align-items:center}

.tile{background-color:#221c36;border-radius:16px}
.tile-footer{position:relative;padding:16px;background-color:#221c36;border-radius:16px}

.mt-s{margin-top:16px}
.mt-m{margin-top:32px}
.mb-s{margin-bottom:8px}
.mb-m{margin-bottom:16px}
.mb-l{margin-bottom:24px}
.mb-xl{margin-bottom:32px}
.mb-fix{margin-bottom:16px}

.height-s{max-height:40px;margin-right:35px}
.height-m{max-height:48px;margin-right:24px}
.height-l{max-height:60px}

.hidden,.hidden-mob{display:none}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  border:0;
  padding:0;
  white-space:nowrap;
  clip-path:inset(100%);
  clip:rect(0 0 0 0);
  overflow:hidden
}

/* Swiffy Slider CSS */
.swiffy-slider{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  --swiffy-slider-snap-align:center;
  --swiffy-slider-item-width:100%;
  --swiffy-slider-item-gap:1rem;
  --swiffy-slider-item-reveal:0rem;
  --swiffy-slider-item-ratio:2/1;
  --swiffy-slider-item-count:1;
  --swiffy-slider-nav-light:#fff;
  --swiffy-slider-nav-dark:#333;
  --swiffy-slider-nav-zoom:1;
  --swiffy-slider-track-opacity:0.1;
  --swiffy-slider-track-height:0;
  --swiffy-slider-nav-outside-size:3.5rem;
  --swiffy-slider-indicator-outside-size:1.5rem;
  --swiffy-slider-animation-duration:.75s;
  --swiffy-slider-animation-delay:0s;
  --swiffy-slider-animation-timing:ease-in-out
}

.slider-container{
  display:flex;
  height:100%;
  list-style:none;
  margin:0;
  padding:0;
  transition:transform 0.5s ease-in-out;
  will-change:transform
}

.slider-container>*{
  flex:0 0 100%;
  position:relative;
  width:100%;
  height:100%
}

.slider-indicators{
  position:absolute;
  right:2rem;
  bottom:0;
  left:2rem;
  display:flex;
  justify-content:center;
  padding:0;
  margin-bottom:1rem;
  list-style:none
}

.slider-indicators>*{
  box-sizing:content-box;
  flex:0 1 auto;
  width:2rem;
  height:.2rem;
  padding:0;
  border:.4rem solid transparent;
  cursor:pointer;
  background-color:#fff;
  background-clip:padding-box;
  opacity:.5;
  transition:opacity .4s ease
}

.slider-indicators>.active{opacity:1}

.slider-indicators-round .slider-indicators>*{
  width:.5rem;
  height:.5rem;
  border:.4rem solid transparent;
  border-radius:50%
}

.slider-indicators-sm .slider-indicators>*{
  width:8px;
  height:8px;
  border:8px solid transparent
}

.slider-indicators>button{
  background-color:#fcfcfc;
  opacity:0.5;
  border:none;
  cursor:pointer;
  transition:opacity 0.3s ease
}

.slider-indicators>button.active{
  opacity:1
}

.slider-indicators>button:hover{
  opacity:0.8
}

.slider-indicators .active{
  background-color:#00eda6
}

.slider-nav{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  border:0;
  background-color:transparent;
  cursor:pointer;
  padding:0;
  visibility:hidden;
  opacity:.8;
  transition:visibility .1s,opacity .2s linear;
  display:flex;
  align-items:center;
  padding:0 .5rem;
  filter:drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
  transform:scale(var(--swiffy-slider-nav-zoom))
}

.slider-nav::before{
  position:absolute;
  content:"";
  padding:.5rem;
  width:3rem;
  height:3rem
}

.slider-nav::after{
  content:"";
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");
  mask-size:cover;
  background-color:var(--swiffy-slider-nav-light);
  background-origin:content-box;
  width:3rem;
  height:3rem
}

.swiffy-slider:hover .slider-nav{visibility:visible}
.swiffy-slider{touch-action:pan-y}

.slider-nav.slider-nav-next::after{transform:rotate(180deg)}
.slider-nav.slider-nav-next{right:0;left:unset}
.slider-nav-visible .slider-nav{visibility:visible}

.slider-nav-autohide .slider-container{grid:auto/auto-flow column}

.slider-item-show4{--swiffy-slider-item-count:4}
.slider-item-show4 .slider-container{column-gap:10px}
.slider-item-show4 .slider-container>*{flex:0 0 calc((100% - 30px) / 4)}

/* Responsive columns for info slider */
@media screen and (max-width: 599px){
  .slider-item-show4.swiffy-slider{overflow:hidden}
  .slider-item-show4 .slider-container{
    column-gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
  }
  .slider-item-show4 .slider-container>*{
    flex:0 0 70%;
    scroll-snap-align:start;
  }
  .slider-item-show4 .slider-nav,
  .slider-item-show4 .slider-nav-next,
  .slider-item-show4 .slider-indicators{display:none}
  /* slim grey scrollbar */
  .slider-item-show4 .slider-container::-webkit-scrollbar{height:4px}
  .slider-item-show4 .slider-container::-webkit-scrollbar-track{background-color:#2a2540;border-radius:2px}
  .slider-item-show4 .slider-container::-webkit-scrollbar-thumb{background-color:#6e6e6e;border-radius:2px}
}

/* Mobile horizontal scrollbars for promotions and footer logo rows */
@media screen and (max-width: 599px){
  /* Promotions row */
  .promo{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
  }
  .promo > *{scroll-snap-align:start}
  .promo__item{flex:0 0 85%; min-width:auto}
  .promo::-webkit-scrollbar{height:4px}
  .promo::-webkit-scrollbar-track{background-color:#2a2540;border-radius:2px}
  .promo::-webkit-scrollbar-thumb{background-color:#6e6e6e;border-radius:2px}

  /* Footer payments and partners rows */
  .footer__images.images-middle{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    gap:12px;
    padding-bottom:8px;
    justify-content:flex-start;
  }
  .footer__images.images-middle .images-middle__img{flex:0 0 auto; scroll-snap-align:center}
  .footer__images.images-middle::-webkit-scrollbar{height:4px}
  .footer__images.images-middle::-webkit-scrollbar-track{background-color:#2a2540;border-radius:2px}
  .footer__images.images-middle::-webkit-scrollbar-thumb{background-color:#6e6e6e;border-radius:2px}
}

/* Popup (exit intent) */
.popup{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6)
}

.popup-bonus{
  width:100%;
  max-width:420px;
  background:#171425;
  border:1px solid rgba(68,56,108,.6);
  border-radius:16px;
  color:#f7f7f7;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45)
}

.popup-bonus__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  height:60px;
  padding:0 16px 6px 16px;
  background-image:linear-gradient(90deg,#eb03e2 0,#2995fe 100%);
  color:#fff
}
.popup-bonus__icon{
  flex-shrink:0;
  position:absolute;
  right:64px;
  bottom:-10px;
  width:72px;
  height:72px
}

.popup__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  cursor:pointer
}
.popup__close-x{font-size:22px;line-height:1;font-weight:800}

.popup-bonus__title{font-weight:700}
.popup-bonus__text{margin:0 16px 4px}
.popup-bonus__text:first-of-type{margin-top:16px}
.popup-bonus__text--second{margin-bottom:12px}
.popup-bonus__text{font-size:28px;line-height:1.25;text-align:center}
.popup-bonus__text.popup-bonus__text--second{font-size:18px;opacity:.9;text-align:center}

.promo-code{position:relative;margin:18px auto 20px;max-width:360px;padding:0 16px}
.promo-code__button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:56px;
  padding:10px 16px;
  border:3px dashed rgba(255,255,255,.55);
  border-radius:20px;
  background:transparent;
  color:#f7f7f7;
  cursor:pointer
}

.promo-code__button.copied{
  border-color:#00eda6;
  box-shadow:0 0 0 2px rgba(0,237,166,.2) inset;
}

.promo-code__label{padding:6px 10px;border-radius:12px;background:#30284c;color:#fff;font-size:12px;line-height:1.3;margin-right:8px}
.promo-code__code{flex:1;text-align:center;font-weight:800;letter-spacing:.02em;color:#00eda6}
.promo-code__icon{width:20px;height:20px;fill:#f7f7f7;margin-left:8px}
.promo-code__icon--tick{display:none}
.promo-code__button.copied .promo-code__icon--copy{display:none}
.promo-code__button.copied .promo-code__icon--tick{display:inline}
.promo-code__copied{display:none}

.popup-bonus__characteristic{display:flex;justify-content:space-between;margin:10px 16px;color:#b6bdcc}
.popup-bonus__key{color:#b6bdcc}
.popup-bonus__value{color:#f7f7f7;font-weight:700;text-align:right}
.popup-bonus__button{width:calc(100% - 32px);margin:16px;}

/* Popup CTA like original */
.popup-bonus .btn--primary{
  height:56px;
  border-radius:28px;
  font-size:18px;
  background-image:linear-gradient(90deg,#05e58a 0%, #1efc9e 100%);
  color:#091014
}

/* Payment methods table: bold first column on all rows */
.content>table td:first-child,
.wp-block-table table td:first-child{font-weight:700;color:#f7f7f7}

/* Mobile stacking for payment methods table */
@media screen and (max-width: 599px){
  .content>table tr,
  .wp-block-table table tr{flex-direction:column;align-items:flex-start;row-gap:8px}
  .content>table td,
  .wp-block-table table td{min-width:0;width:100%}
}

/* Hide Play/Demo buttons on mobile */
@media screen and (max-width: 599px){
  .card__back .btn{display:none}
  .card__back p{display:none}
}

@media screen and (min-width: 600px) and (max-width: 1023px){
  .slider-item-show4 .slider-container{column-gap:10px}
  .slider-item-show4 .slider-container>*{flex:0 0 calc((100% - 10px) / 2)}
}
.slider-nav-visible .slider-nav{visibility:visible}
.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next){visibility:hidden}
.slider-nav-autohide.slider-item-last-visible .slider-nav.slider-nav-next{visibility:hidden}

/* Responsive Design */
@media screen and (min-width:768px){
  .app{
    display:flex;
    column-gap:32px;
    margin-top:48px;
    padding:24px 55px 24px 24px;
    text-align:left
  }
  
  .app .group{width:100%;margin-top:10px}
  .app__img{margin:0}
  .app__btn:first-of-type{margin-right:14px}
  
  .hero__container{
    background-position:300px;
    background-size:contain
  }
}

@media screen and (min-width:1024px){
  .menu{
    position:static;
    z-index:2;
    align-items:center;
    justify-content:space-between;
    flex-direction:row;
    width:100%;
    max-width:unset;
    height:auto;
    margin:0 0 0 32px;
    padding:0;
    transform:unset;
    overflow:visible
  }
  
  .menu__link{
    padding:5px 0;
    transition:color .3s;
    cursor:pointer
  }
  
  .menu__link:hover,
  .menu__link:focus {
    color:#00eda6
  }
  
  .menu__inner{display:contents}
  .menu__close,.menu__prev,.menu__text{display:none}
  
  .menu__list{
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
    max-height:unset;
    overflow-y:unset
  }

  /* Tablet/desktop: small container narrower */
  .container--small{max-width:760px !important;width:100%}
  
  .menu__item--dropdown{
    position:relative;
  }
  
  .menu__item--dropdown:hover > .menu__dropdown,
  .menu__item--dropdown:focus > .menu__dropdown {
    opacity: 1;
    visibility: visible;
  }

  /* Open dropdown when hovering the arrow itself */
  .menu__arrow:hover + .menu__dropdown,
  .menu__arrow:focus + .menu__dropdown {
    opacity: 1;
    visibility: visible;
  }
  /* Ensure click-open also shows dropdown on desktop */
  .menu__dropdown.menu__dropdown--open {
    opacity: 1;
    visibility: visible;
  }
  
  .menu__item--dropdown:hover > .menu__link,
  .menu__item--dropdown:focus > .menu__link {
    color: #00eda6;
  }
  
  .menu__item--dropdown:hover > .menu__arrow svg,
  .menu__item--dropdown:focus > .menu__arrow svg {
    fill:#00eda6;
  }
  
  .menu__dropdown {
    position: absolute;
    top: 47px;
    right: auto;
    left: -9px;
    width: 209px;
    height: auto;
    padding: 0;
    background-color: #30284c;
    border-radius: 0 0 16px 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    transform: none;
    z-index: 10;
  }
  
  .menu__dropdown::before{
    content:"";
    position:absolute;
    bottom:100%;
    left:0;
    width:100%;
    height:30px;
  }
  
  .submenu{
    padding:10px 0 14px;
    overflow-y:auto;
    max-height:80vh;
  }
  
  .submenu .menu__link{
    padding:8px 20px;
    text-transform:unset;
  }
  
  .menu__arrow:not(.menu__arrow--depth){
    position:relative;
    height:100%;
    margin-left:8px;
    padding:0;
    transition:border .3s;
  }
  
  .menu__arrow:not(.menu__arrow--depth)::before{
    content:"";
    position:absolute;
    top:10px;
    left:2px;
    width:9px;
    height:9px;
    border-right:2px solid #c1b3db;
    border-bottom:2px solid #c1b3db;
    transform:rotate(40deg) skewX(-10deg);
    transition:border-color .3s;
  }
  
  .menu__arrow:not(.menu__arrow--depth) svg{
    display:none;
    padding:0;
  }
  
  .menu__item--dropdown:hover > .menu__arrow::before,
  .menu__item--dropdown:focus > .menu__arrow::before {
    border-right-color:#00eda6;
    border-bottom-color:#00eda6;
  }
  
  .menu__arrow svg{
    width:28px;
    height:28px;
  }
  
  .menu__btns{margin:0 0 0 17px}
  .menu__ref-btn{width:auto}
  
  .header__burger{display:none}
  .hidden-mob{display:block}
}

/* Mobile close button fallback (visible X) */
@media screen and (max-width:1023px){
  .menu__close{width:40px;height:40px}
  .menu__close svg{display:none}
  .menu__close::before,
  .menu__close::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:20px;
    height:2px;
    background:#f7f7f7;
    border-radius:1px;
    transform-origin:center;
  }
  .menu__close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .menu__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
}

@media screen and (min-width:1280px){
  .hero__bg{
    object-fit:contain;
    object-position:top 0 right 10%
  }
  
  .slider-nav{justify-content:center}
  
  .slider-nav::after{
    position:relative;
    z-index:1;
    width:24px;
    height:24px;
    background-color:unset;
    background-image:url('../images/css-icons/icon-arrow.svg');
    background-position:2px center;
    mask:unset;
    -webkit-mask:unset
  }
  
  .slider-nav::before{
    left:0;
    width:46px;
    height:46px;
    background-color:#4c426b;
    border-radius:50%
  }
  
  .slider-nav.slider-nav-next::before{
    right:0;
    left:unset
  }
  
  .slider-nav:hover::before{background-color:#574c7b}
  .slider-nav:active::before{background-color:#362f4c}

  /* Increase spacing below hero on desktop */
  .hero-slider{margin-bottom:8px}
  
  .payments{
    grid-template-columns:repeat(5,1fr);
    gap:16px
  }
  
  .payments__item{height:70px;padding:11px 32px}
}

@media screen and (min-width:1312px){
  .main{margin-bottom:64px}
  .container{max-width:1320px;margin:auto}
  .container--small{max-width:820px !important;width:100%}
  
  .container--col-2{
    position:relative;
    display:grid;
    grid-template-columns:978px auto;
    column-gap:34px
  }
  
  .h1,h1{font-size:32px}
  .h2,h2{font-size:24px}
  
  .btn,.link,a,button{cursor:pointer}
  .link{transition:color .3s}
  .link:focus,.link:hover{color:#66f4ca}
  
  /* Scrollbar styles */
  .scrollbar{scrollbar-color:#a432b5 #110e1b}
  .scrollbar::-webkit-scrollbar{width:6px}
  .scrollbar::-webkit-scrollbar-track{background-color:#110e1b}
  .scrollbar::-webkit-scrollbar-thumb{background-color:#a432b5;border-radius:3px}
  .scrollbar::-webkit-scrollbar-thumb:hover{background-color:#cd3fe2}
  
  .btn{transition:background-color .3s,color .3s,fill .3s}
  .btn--primary:focus,.btn--primary:hover{background-color:#00d595}
  .btn--primary:active{background-color:#00a674}
  .btn--secondary:focus,.btn--secondary:hover{background-color:#574c7b}
  .btn--secondary:active{background-color:#362f4c}
  .btn--bordered:hover{background-color:rgba(88,72,139,.72)}
  .btn--bordered:active{background-color:#8b7cbb}
  
  .card{position:relative;width:200px;height:280px}
  .card:focus .card__img,.card:hover .card__img{
    transition:transform .5s;
    transform:scale3d(1.05,1.05,1.05)
  }
  .card:focus .card__back,.card:hover .card__back{
    opacity:1;
    visibility:visible
  }
  
  .card__back{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    row-gap:16px;
    width:100%;
    height:100%;
    padding:16px;
    border-radius:16px;
    background:linear-gradient(0deg,rgba(28,28,28,.64),rgba(28,28,28,.64)),rgba(0,0,0,.4);
    opacity:0;
    visibility:hidden;
    transition:visibility,opacity .3s;
  }
  
  .card__img{width:100%;height:100%}
  .card__label img{width:32px}
  
  .content--light{padding:32px 48px 48px;border-radius:16px}
  
  .cards__list{
    grid-template-columns:repeat(6,auto);
    grid-template-rows:unset;
    justify-content:space-between
  }
  
  .cards__btn{width:auto}
  
  .footer__top-wrapper{padding:16px 0;background-color:#221c36}
  .footer__top{flex-direction:row;gap:24px}
  .footer__top-item{width:312px}
  .footer__middle{padding:0 0 32px}
  .footer__images{justify-content:center}
}

/* Additional responsive and layout fixes */

/* Desktop dropdown behavior */

/* Hero responsive improvements */
@media screen and (min-width: 1312px) {
  .hero__container {
    justify-content: center;
    padding: 0 0;
    background-position: right;
  }

  .hero__tag {
    margin-bottom: 8px;
  }

  .hero__title,
  .hero__subtitle {
    max-width: 660px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .hero__title {
    margin-bottom: 0;
    line-height: 48px;
  }

  .hero__subtitle {
    line-height: 36px;
  }

  .hero__btn {
    margin-top: 12px;
  }

  .hero__tag{
    font-size:16px;
    line-height:24px;
  }
  
  .container--small{
    max-width:820px;
    width:100%;
  }
  
  .info-wrapper{margin-top:16px}
  .info{min-height:96px;padding:16px}
  
  .menu__list{gap:12px 48px}
  
  .promo-head{margin-bottom:20px}
  .promo{column-gap:24px}
  .promo__item{
    flex-direction:row;
    gap:24px;
    width:648px;
    min-height:272px;
    padding:24px;
  }
  .promo__item-img{
    flex-shrink:0;
    width:292px;
  }
  .promo__item-group{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
  }
  .promo__item-btn{
    width:auto;
    min-width:81px;
    margin-top:32px;
  }
}

/* Ensure full width layout */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Fix container responsive behavior */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0px;
}

/* TOC Sidebar Layout for content pages */
@media screen and (min-width: 1312px) {
  .container--col-2 {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 34px;
    align-items: start;
  }
  
  .toc {
    position: sticky;
    top: 88px;
    margin: 16px 0;
    order: 2;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  
  .content {
    order: 1;
  }
}

/* Mobile responsive fixes */
@media screen and (max-width: 768px) {
  .container {
    padding: 0 12px;
  }
  
  .container--col-2 {
    display: block;
  }
  
  .toc {
    margin: 16px 0;
    position: static;
  }
  
  /* Make small container fluid on phones */
  .container--small {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Fix missing SVG sprite issues */
.icon-arrow-down-alt-1,
.icon-arrow-next,
.icon-burger,
.icon-close,
.icon-arrow-right,
.icon-arrow-down,
.icon-email,
.icon-copy,
.icon-facebook,
.icon-instagram,
.icon-x {
  display: inline-block;
  width: 1em;
  height: 1.5em;
  fill: currentColor;
}

/* Ensure images scale properly */
img {
  max-width: 100%;
  height: auto;
}

/* Fix lazy loading images */
.lazy-img {
  background: #4c426b;
  min-height: 100px;
}

/* Additional mobile menu fixes */
@media screen and (max-width: 1023px) {
  .header__burger {
    display: block;
  }
  
  .menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 375px;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  
  .menu--open {
    transform: translateX(0);
  }
}

/* Fix button hover states */
.btn:hover, .btn:focus {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.btn--primary:hover, .btn--primary:focus {
  background-color: #00d595;
  box-shadow: 0 4px 12px rgba(0, 237, 166, 0.3);
}

.btn--secondary:hover, .btn--secondary:focus {
  background-color: #574c7b;
}