:root {
    --light-blue: #f3faff;
    --dark-light-blue: #D0EBFF;
    --light-green: #18a250;
    --green: #21815d;
    --blue: #0c1d47;
    --gray: #F9FCFF;
    --gray2: #ebf1fa;
    --gray3:#333;
    --gray4:#dde4eb;
    --dark-gray:#a0a0a0;
    --dark-blue: #08173C;
    --container-blue:#0f285a;
    --white:#fff;
    --orange:#f1b728;
    --light-light-blue:#F8F8F8;
    --gold: #f1b728;
    --gold-faint: #fff5db;
    --grayzor: #ced2de;
    --card-gray:#f7f7f7;
    --faint-white:#23335f;
    --change:#7b9bdc;
    --change2:#0038b8;
    --text-icon-positive: #21815d;
    --text-icon-negative:#b20000;
    --text-icon-info:#f1b728;

}

@font-face {
  font-family: 'Rubik';
  src: url('/wp-content/themes/mytheme/assets/fonts/subset-Rubik-Regular.woff2') format('woff2'),
       url('/wp-content/themes/mytheme/assets/fonts/subset-Rubik-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('/wp-content/themes/mytheme/assets/fonts/subset-Rubik-Medium.woff2') format('woff2'),
       url('/wp-content/themes/mytheme/assets/fonts/subset-Rubik-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('/wp-content/themes/mytheme/assets/fonts/subset-Rubik-SemiBold.woff2') format('woff2'),
       url('/wp-content/themes/mytheme/assets/fonts/subset-Rubik-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('/wp-content/themes/mytheme/assets/fonts/subset-Rubik-Bold.woff2') format('woff2'),
       url('/wp-content/themes/mytheme/assets/fonts/subset-Rubik-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
  color:#333;
  font-family: 'Rubik', sans-serif;
}
*, *::before, *::after {
  box-sizing: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul, ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

a, p, h1, h2, h3, h4, h5 {
  text-decoration: none;
  color: inherit;
  margin:0;
  padding: 0;
}
p{
font-size: 1rem;
margin: 1rem 0rem 1.5rem 0rem;
line-height: 1.5rem;
}

strong{
    color: var(--dark-blue);
    font-weight: 500;
}


a{
text-decoration: underline;
color: var(--dark-blue);
}

a:hover{
color:var(--gold);
}

h1{
    font-size: 2.25rem;
    line-height: 2.75rem;
    font-weight: 700;
    color: var(--white);
}
h2{
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--dark-blue);
    margin: 3rem 0rem 1rem 0rem;
}

h3{
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    margin: 1.75rem 0rem .5rem 0rem;
    color: var(--dark-blue);
}
h4{
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    margin: 1rem 0rem .25rem 0rem;
    color: var(--dark-blue);
}

ol{
    margin: 1rem 0rem 1.5rem;
}

ul{
    margin: 1rem 0rem 1.5rem;
}

button, input, textarea, select {
cursor: pointer;
border: none;
font-family: 'Rubik', sans-serif;
}

header {
    background: var(--dark-blue);
    width: 100%; /* Full width header */
    height: 75px;
    padding: 1rem;
}
header .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
header .logo {
    flex: 0 0 auto;
}

header .top-bar {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
}
header .top-bar li {
    position: relative;
}
header .top-bar li a {
    padding: 0.25rem 1rem;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    text-align: start;
}
header .top-bar li a:hover {
    color: #fff;
}
/* Dropdown Menu */
header .top-bar li .sub-menu {
    display: none;
    position: absolute;
    z-index: 999;
    top: 100%;
    inset-inline-start: 0;
    background: #fff;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 0;
    list-style: none;
    width: 200px;
    border-radius: 0.2rem;
}

header .top-bar li .sub-menu a {
    color: black;
    padding: 1rem;
    display: block;
}

header .top-bar > .menu-item-has-children:hover > .sub-menu,
header .top-bar .menu-item-has-children .sub-menu > .menu-item-has-children:hover .sub-menu {
    display: block;
}

header .top-bar .sub-menu li .sub-menu {
    top: 0;
    inset-inline-start: 100%;
}

.site-header{
    position: sticky;
    z-index: 999;
    top: 0;
}

/* Footer Styles */
footer {
    background: var(--dark-blue);
    width: 100%; /* Full-width footer */
    padding: 1rem 1rem; /* Add padding for vertical spacing */
}

footer .container {
    max-width: 1024px; /* Center content with a fixed width */
    padding: 0 16px; /* Add horizontal padding */
    margin: 0 auto; /* Center the container */
    display: flex; /* Use Flexbox for layout */
    justify-content: center; /* Center footer menu items horizontally */
    align-items: center; /* Vertically align items */
}

footer .footer-bar {
    display: flex; /* Align menu items in a row */
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem; /* Space between menu items */
}

footer .footer-bar li a {
    color: #c4cde5;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.875rem;
}

footer .footer-bar li a:hover {
    color: #fff; /* Change color on hover */
}

.margin-p{
    margin: 1rem 0rem 1.5rem 0rem;
}
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.underline{
text-decoration: underline;
}

.show-all{
background: none;
}

.withdrawal-wrap li > button:hover,
.deposit-wrap li > button:hover,
.game-providers-wrap li > button:hover {
  background-color: #f3f6fb; /* example */
}

.insert-block h1,
.insert-block h2,
.insert-block h3,
.insert-block h4,
.insert-block > *:first-child {
    margin-top: 0rem;
}

.insert-block > p:last-child {
    margin-bottom: 0;
}

.insert-block ul li:last-child p {
    margin-bottom: 0;
}

.insert-block ul li:last-child{
    margin-bottom: 0;
}

.opacity-40{
    opacity: 0.4;
}

.opacity-100{
    opacity: 1;
}

.bder{
    border: 1px solid;
}

.bder-horizontal{
    border-bottom: 1px solid;
    border-top: 1px solid;
}

.bder-white{
    color: #fff;
}

.bder-white-faint{
    color: #23335f;
}


.bder-color-gray{
    border-color: var(--gray);
}

.bder-color-grayzor{
    border-color: var(--grayzor);
}

.bder-color-gray2{
    border-color: var(--gray2);
}

.bder-color-dark-gray{
    border-color: var(--gray4);
}

.br{
border-radius: 10px;
}

.br-100{
    border-radius: 100%;
}


.pad{
    padding: .75rem;
}

.pad-bottom{
    padding-bottom: .75rem;
}
.padding-025{
    padding:.25rem;
}

.padding-0375{
        padding:.375rem;
    }

.padding-05{
    padding: .5rem;
}

.padding-2-3{
    padding: 3rem 1rem 3rem 1rem;
}

.padding-horizontal-05{
    padding: .1rem .5rem;
}

.padding-horizontal-1{
    padding: 0rem 1rem;
}

.padding-horizontal-15{
    padding: 0rem 1.5rem;
}

.padding-horizontal-075{
    padding:0rem .75rem;
}

.padding-vertical-075{
    padding: .75rem 0rem;
}

.padding-vertical-05{
        padding: .5rem 0rem;
}

.padding-vertical-3{
    padding:3rem 0rem;
}

.padding-top-4{
    padding-top: 4rem;
}

.desk-pad-hor-1{
    padding-right: 1rem;
    padding-left: 1rem;
}

.padding-vertical-1{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.padding-1{
    padding: 1rem;
}

.padding-2{
    padding: 2rem;
}

.padding-2-1{
    padding: 2rem 1rem;
}

.padding-3-1{
    padding: 3rem 1rem;
}

.padding-5-1{
    padding: 5rem 1rem;
}

.padding-bottom-3{
    padding: 1rem 1rem 3rem 1rem;
}

.margin-0{
    margin: 0;
}

.margin-bottom-1{
    margin-bottom: 1rem;
}

.margin-bottom-0{
    margin-bottom: 0rem;
}

.margin-top-0{
    margin-top: 0rem;
}

.margin-top-1{
    margin-top: 1rem;
}

.margin-top-1p5{
    margin-top: 1.5rem;
}

.margin-vertical-1{
    margin: 1rem 0rem;
}

.margin-vertical-2{
    margin: 2rem 0rem;
}

.margin-vertical-3{
    margin: 3rem 0rem;
}

.margin-vertical-05{
    margin: .5rem 0rem;
}

.height-36{
    height:2.25rem;
}

.width-36{
    width:2.25rem;
}

.height-50{
height:2.25rem
}

.height-175{
    height: 200px;
}

.height-2375{
    height: 2.375rem;
}
.width-175{
    width: 200px;
}

.width-60{
    width:60px;
}

.width-auto{
width: auto;
}

.height-50{
    height: 50%;
}

.height-3{
    height:3rem;
}


.height-5{
    height:5rem;
}

.width-50{
    width: 50%;
}

.width-65{
    width: 65%;
}

.width-70{
    width: 70%;
}


.fw{
    width: 100%;
}

.fh{
    height:100%;
}

.hf{
    width: 50%;
}
.ct{
    font-size: 14px;
    font-weight: 400;
}
.gap-025{
    gap:.25rem;
}

.gap-05{
    gap:.5rem
}
.gap-1{
    gap:1rem
}

.gap-2{
    gap:2rem;
}

.gap-3{
    gap:3rem;
}

.custom-logo{
    width: 70px;
}
.flex{
    display: flex;
}

.flex-nowrap{
    flex-wrap: nowrap;
}

.flex-1{
    flex:1;
}
.row{
display: flex;
flex-direction: row;
}

.col{
display: flex;
flex-direction: column;
}

.grid{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

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

.grid-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.grid-5{
display: grid;
grid-template-columns: repeat(5, 1fr);
}

.grid-6{
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.grid-7{
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.grid-8{
display: grid;
grid-template-columns: repeat(8, 1fr);
}

.no-underline {
    text-decoration: none;
}

.no-underline:hover,
.no-underline:focus {
    text-decoration: none;
}


.text-white{
    color:#fff;
}

.text-gold{
    color: var(--gold);
}

.text-decoration-none{
text-decoration: none;
}

.text-white-paragraph{
    color: #ecf1ff;
}

.text-white-fineprint{
    color: #c4cde5;
}

.text-light-blue{
    color: #6ebeec;
}

.text-pink{
    color: #DB5C6D;
}

.text-color-orange{
    color: var(--orange);
}

.text-color-change{
    color: var(--change2)
}

.text-color-black{
    color:#000;
}
.text-dark-blue{
    color:var(--dark-blue);
}

.text-icon-positive { --oci-before-color: var(--text-icon-positive); }
.text-icon-negative { --oci-before-color: var(--text-icon-negative); }
.text-icon-info { --oci-before-color: var(--container-blue); }


.text-icon-bg-positive { --oci-after-color: #ecfdf4; }  /* light green */
.text-icon-bg-negative { --oci-after-color: #ffe6e6; }  /* light red */
.text-icon-bg-info     { --oci-after-color: var(--light-blue); }  /* light blue */

.text-align-start{
    text-align: start;
}

.text-xxs {
    font-size: 0.625rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-md {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-xxl {
    font-size: 1.5rem;
}

.text-xxxl {
    font-size: 1.75rem;
}

.text-ac{
    text-align: center;
}

.text-hover:hover {
    color: var(--orange);
}

.weight-500{
    font-weight: 500;
}

.weight-600{
    font-weight: 600;
}

.weight-700{
    font-weight: 700;
}

.customitem-text{
    line-height: 1.5rem;
}

.justify-center{
justify-content: center;
}

.justify-content-start{
justify-content: start;
}

.justify-content-end{
justify-content: end;
}

.justify-items-center{
justify-items:center;
}

.justify-content-space-between{
    justify-content: space-between;
}

.align-content-center{
align-content: center;
}

.align-center{
align-items: center;
}

.max-width-1024{
    max-width: 64rem;
    margin-inline: auto;
}

.max-width-1200{
    max-width: 75rem;
    margin-inline: auto;
}

.max-width-768{
    max-width: 48rem;
    margin-inline: auto;
}

.max-width-567{
    max-width: 30rem;
    margin-inline: auto;
}

.max-width-420 {
  max-width: 26.25rem;
  margin-inline: auto;
}

.width-305{
    max-width: 305px;
    width: 100%;

}

.max-width-200{
    max-width: 12.5rem;

}

.max-width-50{
    max-width: 3.125rem;

}

.breadcrumb_last{
    color: #c4cde5;
}


.text-gray3{
    color:var(--gray3);
}

.background-white{
    background-color: #fff;
}

.background-faint-white{
    background-color: var(--faint-white);
}
.background-card-gray{
    background-color: var(--card-gray);
}

.background-dark-light-blue{
    background-color: var(--dark-light-blue);
}

.background-light-light-blue{
    background-color: var(--light-light-blue);
}

.background-blue{
    background-color: var(--blue);
}

.background-container-blue{
    background-color: var(--container-blue);
}

.background-change{
    background-color: var(--change);
}

.background-gold{
    background-color: var(--gold);
}

.bg-gold-faint{
    background-color: var(--gold-faint);
}

.background-light-gray{
    background-color: var(--gray);
}

.background-gray2{
    background-color: var(--gray2);
}

.background-black-transparent{
    background-color: rgba(0, 0, 0, 0.3);
}

.background-black-transparent-dark{
    background-color: rgba(0, 0, 0, 0.035);
}

.background-dark-gray{
    background-color: var(--dark-gray);
}

.background-dark-blue{
    background-color: var(--dark-blue);
}

.no-bg{
    background: none;
}

.height-40{
    max-height: 2.5rem;
}

.cover{
    object-fit: cover;
}


.page-hero {
gap: 3rem;
}

/* Layer 3: Card Image (Positioned Underneath Content) */
.hero-image {
    position: absolute;
    top: 5%;
    left: 1%;
    z-index: 0;
    width: 50%; 
    height: auto;
    max-width: 100%; /* Prevents it from being too large */
}

.accordion {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 1rem 0rem 1.5rem 0rem;
}

.accordion-item {
    border-radius: 10px;
}

.accordion-header {
    padding: 1rem;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[dir="rtl"] .accordion-header{
    background-position: left 1rem center;
}

.accordion-arrow{
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transform: rotate(180deg);
  transition: transform 200ms ease;
}

.accordion-item.active .accordion-arrow{
  transform: rotate(0deg);
}

.accordion-header h3{
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    margin: 0rem;
    color: var(--dark-blue);
}

.accordion-header h4{
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    margin: 0rem;
    color: var(--dark-blue);
}


.accordion-content {
    margin-top: .2rem;
    max-height: 0;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.accordion-content p:first-of-type {
    margin-top: 0;
}

.accordion-content p:last-of-type {
    margin-bottom: 0;
}

.accordion-content img:last-of-type{
    margin-bottom: 0;
}

.accordion-item.active .accordion-content {
    max-height: 100rem;
    padding: 1rem 1rem;
}

.accordion-item.active .accordion-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.progress-container {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;

    /* score expected 1–10 */
    --score: 0;
}


.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-bg {
    fill: none;
    stroke: var(--gray);
    stroke-width: 6;
}

.progress-ring-fill {
    fill: none;
    stroke: var(--green);
    stroke-width: 6;
    stroke-linecap: round;

    stroke-dasharray: 220;
    stroke-dashoffset: calc(220 - (var(--score) / 10) * 220);

    transition: stroke-dashoffset 0.3s ease;
}


.absolute{
    position: absolute;
}

.games-grid {
  grid-auto-rows: 1fr;
}


.customlist .customicon{
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0; 
  padding: 0.25rem;          /* ← THIS controls icon vs background */
  border-radius: 999px;
  background: var(--oci-after-color, transparent);
  color: var(--oci-before-color, currentColor);
  fill: currentColor;
}

.customlist > li.customitem{
  display: flex;
  align-items: flex-start;
}



.breadcrumbs a{
    color: var(--orange);
    text-decoration: none;
}

.breadcrumbs a:hover{
    color: #fff;
}

.disclosure a{
    text-decoration: none;
    color:var(--gray3);
}

.rating-text{
    margin-top: 0.085rem;
}

.ltr-text{
    direction: ltr;
}


.bonus-amount{
    background-color: #FFF3FB;
    border-color: #fcd0ff;
}

.free-spins-amount{
    background-color: var(--light-blue);
    border-color: #d0ebff;
}

.separator{
    height: 1px;
}

/* Breadcrumbs */
.breadcrumbs {
    text-align: start;
    height:auto;
}

.breadcrumbs p{
    margin: 1rem 0rem;
}


.white-space-nowrap{
    white-space: nowrap;
}



.card-value{
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
}


.card-details {
    flex: 3; /* Takes equal width */
    padding: 1rem;
    background-color: #fff;
    border-radius: 5px;
}





.icon-placeholde {
    border: 1px solid var(--gray);
}


/* Scoped styles for game icons */
.available-games .icon-placeholder.inactive {
    background-color: var(--gray2);
    color: var(--dark-gray); /* Dark gray icon color */
}

.available-games .icon-placeholder.active {
    background-color: #fff; /* White background */
    color: var(--orange);
}

/* Ensure SVGs in games inherit color */
.available-games .icon-placeholder svg {
    fill: currentColor; /* Inherit the color of the parent container */
}



/* Inactive state text */
.available-games .icon-placeholder.inactive .placeholder-text {
    color: var(--dark-gray); /* Dark gray for inactive text */
}

/* Active state text */
.available-games .icon-placeholder.active .text-xxs {
    color: #333;
}


.game-icon svg {
    width: 2.125rem;
    height: 2.125rem;
}


.author-picture img{
width: 3.5rem;   
height: 3.5rem;
object-fit: cover;
border-radius: 50%;
}

.stroke{
    outline:solid 2px;
    outline-color: var(--gray2);
}

.language-flag {
    margin-inline-start:-3px;
    width: 1.5rem; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%; /* Makes the image circular */

}

.language-flag:first-child {
    margin-inline-start:0px
}

.language-flag img {
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(37, 55, 74, 0.4); /* Increased opacity to 0.4 and blur to 6px */
}

.language-flag.modal {
    margin-inline-start:0;
    width: 1rem; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%; /* Makes the image circular */

}

.language-flag-more .show-all{
    border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
}

/* Shared styles for buttons */
.cta-button {
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
    padding: 15px 20px;/
}

/* Primary Button */
.cta-button.primary {
    background-color: var(--green);
    color: #fff; /* Text color for primary button */
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.cta-button.primary:hover {
    background-color: #2dad7d;
    color: #fff;
}

.cta-button.secondary {
    background-color: #fff;
    border-color: var(--gray);
    color: var(--gray3);
}

.cta-button.secondary:hover {
    background-color: var(--dark-blue); /* Blue background on hover */
    color: var(--white);
}

.cta-button.tertiary{
    background-color: var(--white);
    color: var(--dark-gray);
}

.cta-button.tertiary:hover{
    background-color: var(--gray);
}

.cta-button.tertiary.review-disabled{
background-color: #fff;
cursor: default;
}

/* Hover effect for button text */
.cta-button:hover span {
    color: #fff;
}

a.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.arrow-btn{
    transition: background-color 0.3s, color 0.3s;
    border-radius: 50%;
    background-color: var(--dark-light-blue);
    height:2rem;
    width:2rem;
}

.casino-card:hover .arrow-btn {
    background-color: var(--dark-blue);
}

.arrow{
    fill: var(--dark-blue);
}

.casino-card:hover .arrow {
    fill: #fff;
}


/* Tab Buttons (Header) */
.tabs-header {
    display: flex;
    gap: .5rem;
    overflow-x:auto ;

}

.tab-button {
    background: var(--gray);
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    color: var(--dark-gray);
    padding: 1rem;
    border-radius: 10px;
}


.content.tab-button{
    background: var(--gray);
}


.tab-button.active {
    box-sizing: border-box; /* Ensure proper dimensions with borders */
    background: var(--gray2);
    color: #000;
}

/* Add hover effect */
.tab-button:hover {
    color:#000;
}

.tab-button.active:hover{
    color: #000;
}


.tab-panel {
    display: none; /* Hide inactive panels */
}

.tab-panel.active {
    display: block;
    background-color: var(--gray2);
    padding: 1rem;
    border-radius: 10px;
    margin-top: 1rem;
}

.tab-panel.active p:last-child{
    margin-bottom: 0rem;
}
.tab-panel.active :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0rem;
}

.content.tab-panel.active{
    display: block;
}



/* General Hero Wrap Styling */
.hero-wrap {
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative; /* Set relative positioning for child absolute elements */
}

/* 1st Div: Ranking Number and Button */
.hero-header {
    height: 20px;
}

/* Ranking Number */
.ranking-number {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 25px;
    height: 25px;
    background-color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-start-start-radius: 10px;
    border-end-end-radius: 10px;
}

.fraction {
    color: #fff;
    opacity: 1;
    font-size: 14px;
}

.casino-button {
    color: #fff;
    border: none;
    cursor: pointer;
}

.hero-logo {
    align-items: center;
}

.hero-logo img {
    width: 100px;
    height: auto;
}

.casino-logo {
    max-width: 100%;
}

/* 3rd Div: Title and Rating */
.hero-footer {
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
}


/* Clickable Icon Link */
.info-icon-link {
    width: 20px; /* Optional: Set the desired size */
    height: 20px;
    cursor: pointer; /* Show pointer to indicate it's clickable */
}

/* Icon Styling */
.info-icon {
    width: 1.5rem; /* Adjust size as needed */
    height: auto;  /* Maintain aspect ratio */
    display: block; /* Avoid extra inline spacing */
}



/* Star Icon */

.rating-star {
    width: 1rem;
    height: 1rem;
    fill: var(--gold);
}

.tabs-header {
  scrollbar-width: thin;
  scrollbar-color: var(--dark-blue) transparent;
}

.tabs-header::-webkit-scrollbar {
  height: 4px;
}

.tabs-header::-webkit-scrollbar-track {
  background: transparent;
}

.tabs-header::-webkit-scrollbar-thumb {
  background-color: var(--dark-blue);
  border-radius: 10px;
}

.card-usps{
    border-color: var(--gray);

}

.casino-usps-wrap{
    justify-content: start;
    align-items: center;
    gap:0.75rem;
}

.casino-usps-wrap img{
    width: 10px;
    height: auto;
}

.sdw{
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
}

.overflow-x-auto{
overflow-x: auto;
}

.overflow-hidden{
    overflow: hidden;
}


.the-post h2:first-child{
    margin-top: 0rem;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin:1.25rem 0rem 2rem 0rem;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

/* Header */
.custom-table thead th {
    padding: 0rem 1rem 1rem 0rem;
    text-align: start;
    border-bottom: 1px solid #dde4eb;
    color: var(--dark-blue);
    font-size: 1rem;
    font-weight: 500;
}

.custom-table thead th:last-child{
    padding: 0rem 0rem 1rem 0rem;

}

/* Body rows */
.custom-table td {
    padding: 1rem 1rem 1rem 0rem;
    text-align: start;
    border: none; /* remove all borders */
    font-size: .875rem;
}

.custom-table td:last-child {
    padding: 1rem 0rem 1rem 0rem;
}

/* Row separators only */
.custom-table tbody tr {
    border-bottom: 1px solid #e9f0f7;
    font-size: .875rem;
}

/* Optional: remove last row line */
.custom-table tbody tr:last-child {
    border-bottom: none;
}

.custom-table tbody tr:last-child td {
    padding-bottom: 0;
}

.custom-table tbody td {
    text-align: start;
}

.custom-table.table-vertical th {
    text-align: start;
    font-weight: 500;
    color: var(--dark-blue);
}

.custom-table.table-vertical td {
    text-align: start;
}

.custom-table.table-vertical tbody tr:last-child td {
    padding-bottom: 1rem;
}


.guide-thumb {
  width: 100%;
  height: 160px;          /* choose the height you want */
  overflow: hidden;       /* crops anything outside the box */
}

.guide-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills the box, crops, no stretching */
  object-position: center;
  display: block;
}



.slider {
  padding-inline-end: 30rem;
  scroll-snap-type: x mandatory; /* optional, still useful for keyboard/touch */
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  display: none;
}

.slider-card {
  flex: 0 0 auto;
  width: 20rem;
  scroll-snap-align: start;
}

/* Slider button SVG arrows (icon-arrow points UP by default) */
.slider-arrow{
  width: 1rem;
  height: 1rem;
}

/* Center the SVG inside your existing square buttons */
.nav-buttons button{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RTL: left button shows ←, right button shows → */
[dir="rtl"] .nav-buttons .left .slider-arrow{
  transform: rotate(90deg);
}

[dir="rtl"] .nav-buttons .right .slider-arrow{
  transform: rotate(-90deg);
}

/* LTR fallback */
[dir="ltr"] .nav-buttons .left .slider-arrow{
  transform: rotate(-90deg);
}

[dir="ltr"] .nav-buttons .right .slider-arrow{
  transform: rotate(90deg);
}


.toggle-box {
  cursor: default;
}

.toggle-box-header {
  display: flex;
  align-items: center;
}

.toggle-box-content {
  display: block;
}

.toggle-box-icon {
  display: none;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  transition: transform .2s ease;
}

.oci-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* Hidden state */
.oci-modal.is-hidden {
  display: none;
}

/* =========================
   Backdrop (invisible click catcher)
   ========================= */

.oci-modal-backdrop {
  position: absolute;
  inset: 0;
  background: transparent; /* no overlay visuals */
}

/* =========================
   Modal panel
   ========================= */

.oci-modal-panel {
  position: absolute;
  top: 80px; /* TEMP – Step 5 will override via JS to anchor under button */
  left: 50%;
  transform: translateX(-50%);

  width: min(1100px, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);

  display: flex;
  flex-direction: column;
}

/* Shadow handled by your utility class */
.oci-modal-panel.sdw {
  /* intentionally empty – sdw class provides shadow */
}

/* =========================
   Header
   ========================= */

.oci-modal-close {
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* =========================
   Scrollable content area
   ========================= */

.oci-modal-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 10rem);
}

/* =========================
   Sections (providers / payments / languages)
   ========================= */

.oci-modal-section {
  width: 100%;
}

.oci-modal-section.is-hidden {
  display: none;
}

.modal-close-icon{
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.logo-list{
    display: flex;
    min-height: 3rem;
    padding-left: 0.05rem;
    padding-right: 0.05rem;
    background: #fff;
    border-radius: 10px;
    border: solid 1px var(--gray2);
    width: 100%;
    align-items: center;
    justify-content:center;

}

.review-sticky-cta{
  transition: transform 200ms ease, opacity 200ms ease, bottom 120ms linear;
}

.review-sticky-cta.is-hidden{
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

.review-sticky-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.hero-button{
    width: 0.75rem;
    height: 0.75rem;
    fill:var(--dark-blue);
}

.hero-button-bg{
    background-color: var(--gray2);
}

.casino-type:hover .hero-button {
    fill: var(--white);
    transition: 0.55s;
}

.casino-type:hover .hero-button-bg {
    background-color: var(--dark-blue);
    transition: 0.55s;
}

.page-counter {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--dark-blue);
}




@media (max-width: 1024px) {

    .grid-4.tablet-grid-1{
    grid-template-columns: repeat(1, 1fr);    
    }

    .grid-4.tablet-grid-2{
    grid-template-columns: repeat(2, 1fr);
    }

    .grid-4.tablet-grid-3{
    grid-template-columns: repeat(3, 1fr);
    }

    .grid-4.tablet-grid-4{
    grid-template-columns: repeat(4, 1fr);
    }

    .grid.tablet-grid-2{
    grid-template-columns: repeat(2, 1fr);
    }

    .grid-5.tablet-grid-4{
    grid-template-columns: repeat(4, 1fr);    
    }

    .hero-paragraph.width-65{
        width: 100%;
    }

    .mob-pad-hor-1{
    padding:0rem 1rem;
    }

    .desk-pad-hor-1{
    padding-right: 0rem;
    padding-left: 0rem;
    }

    .hero-image{
        display: none;
    }

    .tablet.fw{
        width: 100%;
    }

    .grid-3.mobile-grid-1{
    grid-template-columns: repeat(1, 1fr);


    

}


@media (max-width: 768px) {

    .max-width-200.mob-fw{
        max-width: 100%;
    }

    .mob-bder{
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray4);
    }
    .grid-4.tablet-grid-2{
    grid-template-columns: repeat(2, 1fr);
    }
    .grid-4.tablet-grid-2.mobile-grid-1{
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-3.tablet-grid-2{
        grid-template-columns: repeat(2, 1fr);
    }
    .grid.tablet-grid-2.mobile-grid-1{
    grid-template-columns: repeat(1, 1fr);
    }
    .grid-2.mobile-grid-1{
    grid-template-columns: repeat(1, 1fr);
    }

    .grid-5.tablet-grid-4{
    grid-template-columns: repeat(4, 1fr);    
    }

    .cta-button.primary.mobile{
        width: 100%;
    }

    .main-nav{
        display: none;
    }

    .mobile.padding-2-3{
        padding: 2rem 1rem 2rem 1rem;
    }


    .mobile.padding-5-1{
        padding: 2rem 1rem;
    }

    .mobile.padding-top-4{
        padding: 0rem;
    }

    .mobile.padding-vertical-3{
        padding: 2rem 0rem;
    }

    .row.mobile-col{
        flex-direction: column;
    }


    .mobile.padding-vertical-05{
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    .mobile-padding-horizontal-05{
        padding: 0rem 0.5rem;
    }


    .mobile.padding-3-1{
        padding: 1.5rem 1rem;
    }

    .mobile.grid-2{
        grid-template-columns: repeat(1, 1fr);
    }


    .insert-block{
        padding:1rem;
    }

      .toggle-box {
    cursor: pointer;
    }

  .toggle-box-content {
    display: none;
    }

  .toggle-box.open .toggle-box-content {
    display: block;
    }

  .toggle-box-icon {
    display: block;
    }

  /* Sprite arrow points UP by default */
  .toggle-box:not(.open) .toggle-box-icon {
    transform: rotate(180deg);
    }

  .toggle-box.open .toggle-box-icon {
    transform: rotate(0deg);
    }

      /* faint backdrop on mobile */
  .oci-modal-backdrop {
    background: rgba(0,0,0,0.25);
  }

  /* center modal panel on mobile */
  .oci-modal-panel {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: calc(100vw - 2rem);
    max-width: 520px;
    max-height: calc(100vh - 2rem);
  }

  /* make sure scroll area fits nicely */
  .oci-modal-scroll {
    max-height: calc(100vh - 8rem);
  }

  .page-hero {
gap: 1rem;
}

}
@media (max-width: 567px) {
    .grid-4.tablet-grid-3.mobile-grid-1{
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-3.tablet-grid-2.mobile-grid-1{
        grid-template-columns: repeat(1, 1fr);
    }
    .card-list-wrap {
    height: auto; 
    }

    
}


    .expand-icon {
    width: 16px; /* Adjust icon size */
    height: auto; /* Maintain aspect ratio */
    }

    .grid-4{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    }
}