/* BigClash Casino Custom Styles */

body {
   color: #ffffff;
   background-color: #0b101e;
}

a {
   color: #ffffff;
}

p {
   font-size: 19px;
   color: #ffffff;
}

h1 {
   font-size: 50px;
}

h2 {
   font-size: 40px;
}

h3 {
   font-size: 30px;
}

h4 {
   font-size: 24px;
}

h5 {
   font-size: 22px;
}

h6 {
   font-size: 20px;
}

a:hover {
   color: #ffffff;
}

.light-bg-color {
   background-color: #13182a;
}

/* Header and main backgrounds */
.sh-h {
   background-color: rgb(19 24 42);
}

.site-main {
   background-color: rgb(11 16 30);
}

.dark-bg-color {
   background-color: #00113a;
}

.br-15 {
   border-radius: 15px;
}

.h-l a {
   color: #ffffff;
}

.h-l a:hover {
   color: #ffffff;
}

.current-menu-item a {
   color: #ffffff;
}

/* Button theme variables */
:root {
   --stb-gradient-200: linear-gradient(180deg, #f6e39b 0%, #e6b74a 50%, #c88f2a 100%);
   --stb-button-text-bright: #ffecb3;
   --stb-button-secondary: linear-gradient(180deg, #0f1a33 0%, #1b274a 100%);
}

.login-buttons {
   color: var(--stb-button-text-bright);
   background: linear-gradient(180deg, #1a1f2d 0%, #0f1a33 100%);
   padding: 0 36px;
   border-radius: 999px;
   box-shadow: inset 0 6px 14px rgba(0,0,0,.4), inset 0 -4px 10px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.4);
   position: relative;
}

.login-buttons:hover {
   filter: brightness(1.08);
}

/* Button outline color */
.login-buttons,
.join-now {
   border-width: 2px;
   border-style: solid;
   border-color: rgb(255 207 110);
}

.open-menu>span {
   border-bottom: 3px solid #194290;
}

.wp-editor table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   margin: 30px 0;
   background: linear-gradient(180deg, rgba(19,24,42,0.85) 0%, rgba(7,13,27,0.9) 100%);
   border: 1px solid rgba(255, 207, 110, 0.25);
   border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 18px 35px rgba(2, 8, 18, 0.35);
}

.wp-editor thead {
   background: linear-gradient(180deg, rgba(255, 207, 110, 0.9) 0%, rgba(230, 180, 80, 0.9) 100%);
}

.wp-editor thead tr {
   border-bottom: 2px solid rgba(255, 207, 110, 0.5);
}

.wp-editor tbody tr {
   background: linear-gradient(180deg, rgba(19,24,42,0.85) 0%, rgba(7,13,27,0.9) 100%);
   transition: background-color 0.3s ease, transform 0.2s ease;
   border-bottom: 1px solid rgba(255, 207, 110, 0.1);
}

.wp-editor tbody tr:nth-child(odd) {
   background: linear-gradient(180deg, rgba(19,24,42,0.75) 0%, rgba(7,13,27,0.85) 100%);
}

.wp-editor tbody tr:nth-child(even) {
   background: linear-gradient(180deg, rgba(19,24,42,0.85) 0%, rgba(7,13,27,0.9) 100%);
}

.wp-editor tbody tr:hover {
   background: linear-gradient(180deg, rgba(255, 207, 110, 0.15) 0%, rgba(255, 207, 110, 0.1) 100%);
   transform: translateX(4px);
   border-left: 3px solid rgba(255, 207, 110, 0.8);
}

.wp-editor tbody tr:last-child {
   border-bottom: none;
}

.wp-editor th {
   color: #0b101e;
   font-weight: 800;
   font-size: 16px;
   padding: 20px 16px;
   text-align: left;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.wp-editor td {
   color: #dce2f5;
   padding: 18px 16px;
   font-size: 15px;
   line-height: 1.5;
   vertical-align: top;
}

.wp-editor tbody tr:hover td {
   color: #ffffff;
}

.wp-editor li {
   color: #ffffff;
}

.wp-editor ul li:before {
   background-color: #ffffff;
}

.wp-editor ol li:before {
   color: #ffffff;
   background-color: #ffffff;
}

.expand-button-h button {
   color: #ffffff;
   background-color: #1b6dc1;
}

.expand-button-h button:hover {
   background-color: #135aa4;
}

.table-c:before {
   background-image: linear-gradient(0deg, #06183f 0%, rgba(19,57,91,0) 100%);
}

.toc-title {
   color: #ffffff;
}

.toc-h li:before {
   background-color: #ffffff;
}

.toc-icon {
   fill: #ffffff;
}

.wp-bonus-h {
   border: 2px solid rgb(255 207 110);
   filter: none;
}

.wp-bonus-h:before {
   background-color: rgba(0, 0, 53, 0.5);
}

.bonust-sticky-h {
   border: 5px solid #05db27;
   filter: drop-shadow(0px 9px 20.5px rgba(0,51,255,0.27));
}

.bonust-sticky-h:before {
   background-color: rgba(0, 0, 53, 0.5);
}

.bonus-type {
   color: #ffffff;
   background-color: #fa5050;
}

.bonus-title {
   color: #ffffff;
}

.join-now {
   color: var(--stb-button-text-bright);
   background: linear-gradient(180deg, #3a6ee0 0%, #244da8 100%);
   padding: 0 36px;
   border-radius: 999px;
   box-shadow: inset 0 6px 14px rgba(0,0,0,.4), inset 0 -4px 10px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.4);
   position: relative;
}

/* Ensure text is perfectly centered inside buttons */
.login-buttons,
.join-now {
   display: inline-grid;
   place-items: center;
   text-align: center;
   padding-top: 0;
   padding-bottom: 0;
}

.join-now:hover {
   filter: brightness(1.06);
}

/* Gold side ornaments like reference */
.login-buttons:before,
.login-buttons:after,
.join-now:before,
.join-now:after {
   content: "";
   position: absolute;
   top: 50%;
   width: 20px;
   height: 30px;
   transform: translateY(-50%);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   pointer-events: none;
}

.login-buttons:before,
.join-now:before { left: 12px; background-image: url('images/button-border-gold-left.png'); }
.login-buttons:after,
.join-now:after { right: 12px; background-image: url('images/button-border-gold-right.png'); }

.wp-editor img,
.light-bg-color img {
   width: auto;
   max-width: 100%;
   height: auto;
   display: block;
   image-rendering: auto;
   border-radius: 18px;
}

.wp-bonus-h {
   overflow: hidden;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.wp-bonus-h picture {
   display: block;
}

.wp-bonus-h picture img,
.wp-bonus-h img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}

.wp-bonus-c {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 20px;
   width: 100%;
   padding: 40px 20px;
}

.bonus-small-text {
   color: #fa5050;
}

.author-icons {
   fill: #fa5050;
}

.rating-h p {
   color: #fa5050;
}

.rating-h span {
   color: #ffffff;
}

.faq-icon {
   fill: #fa5050;
}

.faq-s {
   padding-top: 60px;
   padding-bottom: 60px;
   background: linear-gradient(180deg, rgba(10,15,28,0) 0%, rgba(10,15,28,0.75) 100%);
}

.faq-c {
   display: grid;
   gap: 20px;
}

.faq-item {
   background: linear-gradient(180deg, rgba(19,24,42,0.85) 0%, rgba(7,13,27,0.9) 100%);
   border: 1px solid rgba(255, 207, 110, 0.25);
   border-radius: 18px;
   box-shadow: 0 18px 35px rgba(2, 8, 18, 0.35);
   overflow: hidden;
   transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
   border-color: rgba(255, 207, 110, 0.8);
   transform: translateY(-4px);
   box-shadow: 0 25px 40px rgba(2, 8, 18, 0.45);
}

.faq-item.is-open {
   border-color: rgba(255, 207, 110, 0.8);
   box-shadow: 0 25px 40px rgba(2, 8, 18, 0.45);
}

.faq-q {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 24px 30px;
   cursor: pointer;
   background: rgba(10, 15, 28, 0.35);
}

.faq-q h3 {
   margin: 0;
   font-size: 24px;
   color: #ffffff;
}

.faq-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background-color: rgba(255, 207, 110, 0.12);
   color: #ffcf6e;
   font-size: 26px;
   transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.faq-item.is-open .faq-icon {
   transform: rotate(45deg);
   background-color: rgba(255, 207, 110, 0.25);
   color: #ffd98d;
}

.faq-item:hover .faq-icon {
   background-color: rgba(255, 207, 110, 0.25);
   color: #ffd98d;
}

.faq-a {
   padding: 0 30px;
   font-size: 18px;
   line-height: 1.6;
   color: #dce2f5;
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.faq-item.is-open .faq-a {
   padding: 0 30px 24px;
   max-height: 600px;
   opacity: 1;
}

.faq-a p {
   margin: 0;
   color: inherit;
}

.pros-title {
   color: #ffffff;
}

.pros-c li {
   color: #ffffff;
}

.written-by-author {
   color: #fa5050;
}

.written-by-name {
   color: #ffffff;
}

.footer-text p {
   color: #fa5050;
}

.big-bonus-h .bonus-title p {
   font-size: 47px;
}

.big-bonus-h .bonus-type {
   font-size: 15px;
}

.bonus-join-now {
   font-size: 25px;
}

.bonust-sticky-h .bonus-title {
   font-size: 32px;
}

@media (max-width: 767px) {
   p {
      font-size: 17px;
   }

   .big-bonus-h .bonus-title p {
      font-size: 30px;
   }

   .big-bonus-h .bonus-type {
      font-size: 15px;
   }

   .bonus-join-now {
      font-size: 20px;
   }

   .bonust-sticky-h .bonus-title {
      font-size: 18px;
   }

   h1 {
      font-size: 32px;
   }

   h2 {
      font-size: 30px;
   }

   h3 {
      font-size: 26px;
   }

   h4 {
      font-size: 22px;
   }

   h5 {
      font-size: 20px;
   }

   h6 {
      font-size: 20px;
   }

   .faq-s {
      padding-top: 40px;
      padding-bottom: 40px;
   }

   .faq-q {
      padding: 20px 22px;
      align-items: flex-start;
   }

   .faq-q h3 {
      font-size: 20px;
   }

   .faq-a {
      padding: 0 22px 20px;
      font-size: 16px;
      max-height: 0;
   }

   .faq-item.is-open .faq-a {
      padding: 0 22px 20px;
   }

   .faq-icon {
      width: 36px;
      height: 36px;
      font-size: 22px;
   }

   .wp-editor table {
      border-radius: 12px;
      margin: 20px 0;
   }

   .wp-editor th {
      font-size: 13px;
      padding: 14px 10px;
   }

   .wp-editor td {
      font-size: 13px;
      padding: 12px 10px;
   }

   .wp-editor tbody tr:hover {
      transform: translateX(2px);
   }
}

/* Sticky Banner */
.sticky-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 200px;
   background-image: url('../images/a24cb4d6-db56-42b5-aa28-e237680620d9-specialbannershopdesktop.webp');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   z-index: 1000;
   transform: translateY(100%);
   transition: transform 0.4s ease-in-out;
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
   border-top: 2px solid rgb(255 207 110);
}

.sticky-banner.is-visible {
   transform: translateY(0);
}

.sticky-banner .container {
   height: 100%;
}

.sticky-banner .row {
   height: 100%;
}

.sticky-banner-text {
   font-size: 28px;
   font-weight: 800;
   color: #ffffff;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   line-height: 1.2;
}

.sticky-banner-btn {
   font-size: 20px;
   white-space: nowrap;
}

@media (max-width: 767px) {
   .sticky-banner {
      height: 160px;
   }

   .sticky-banner-text {
      font-size: 20px;
      text-align: center;
      margin-bottom: 10px !important;
   }

   .sticky-banner-btn {
      font-size: 16px;
      padding: 0 24px;
   }
}