/* BetCris.pl Custom Styles */

body {
   color: #1a1a1a;
   background-color: #ffffff;
   font-family: 'Jost', sans-serif;
}

a {
   color: #0096db;
   text-decoration: none;
}

a:hover {
   color: #007ac0;
}

p {
   font-size: 19px;
   color: #1a1a1a;
   line-height: 1.6;
}

h1 {
   font-size: 50px;
   color: #0096db;
   text-transform: uppercase;
   font-weight: 700;
}

h2 {
   font-size: 40px;
   color: #0096db;
   font-weight: 700;
}

h3 {
   font-size: 30px;
   color: #1a1a1a;
   font-weight: 700;
}

h4, h5, h6 {
   color: #1a1a1a;
}

.light-bg-color {
   background-color: #f4f4f4;
}

.dark-bg-color {
   background-color: #0096db;
   color: #ffffff;
}

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

.h-l a {
   color: #0096db;
   font-weight: 400;
}

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

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

.login-buttons {
   color: #000000;
   background-color: #fef32a;
   font-weight: 400;
   border-radius: 8px;
   padding: 10px 20px;
   transition: 0.3s;
}

.login-buttons:hover {
   color: #000000;
   background-color: #e5df00;
}

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

.wp-editor thead {
   background-color: #0096db;
}

.wp-editor tbody tr:nth-child(odd) {
   background-color: #f7f7f7;
}

.wp-editor tbody tr:nth-child(even) {
   background-color: #e9e9e9;
}

.wp-editor th {
   color: #ffffff;
   background-color: #0096db;
}

.wp-editor td, 
.wp-editor li {
   color: #1a1a1a;
}

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

.wp-editor ol li:before {
   color: #0096db;
   background-color: transparent;
}

.expand-button-h button {
   color: #ffffff;
   background-color: #0096db;
   border: none;
   border-radius: 10px;
   padding: 10px 20px;
   font-weight: 400;
   transition: 0.3s;
}

.expand-button-h button:hover {
   background-color: #007ac0;
}

.table-c:before {
   background-image: linear-gradient(0deg, #f4f4f4 0%, rgba(0,150,219,0.15) 100%);
}

.toc-title {
   color: #ffffff;
   font-weight: 400;
}

.toc-h {
   background-color: #0096db !important;
}

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

.toc-h li a {
   color: #ffffff !important;
   transition: color 0.3s ease;
}

.toc-h li a:hover,
.toc-h li:hover a,
.toc-h a:hover {
   color: #fef32a !important;
}

.toc-h li a:active,
.toc-h li a:focus,
.toc-h li.active a,
.toc-h li.current-menu-item a {
   color: #fef32a !important;
}

.toc-icon {
   fill: #ffffff;
}

.wp-bonus-h {
   border: 5px solid #fef32a;
   filter: drop-shadow(0px 9px 20.5px rgba(0,150,219,0.3));
   background-color: #0096db;
}

.wp-bonus-h:before {
   background-color: rgba(0, 150, 219, 0.2);
}

.bonust-sticky-h {
   border: 5px solid #fef32a;
   filter: drop-shadow(0px 9px 20.5px rgba(0,150,219,0.3));
}

.bonust-sticky-h:before {
   background-color: rgba(0, 150, 219, 0.2);
}

.bonus-type {
   color: #ffffff;
   background-color: #0096db;
   font-weight: 400;
}

.bonus-title {
   color: #ffffff;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.join-now {
   color: #000000;
   background-color: #fef32a;
   font-weight: 400;
   padding: 15px 25px;
   border-radius: 12px;
   text-transform: uppercase;
   transition: 0.3s;
}

.join-now:hover {
   background-color: #e5df00;
   transform: scale(1.05);
}

.bonus-small-text {
   color: #0096db;
}

.author-icons {
   fill: #0096db;
}

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

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

.faq-icon {
   fill: #0096db;
}

.pros-title {
   color: #ffffff;
   font-weight: 400;
}

.pros-c li {
   color: #ffffff;
   padding: 5px 0;
}

.written-by-author {
   color: #0096db;
   font-weight: 400;
}

.written-by-name {
   color: #1a1a1a;
}

.footer-text p {
   color: #1a1a1a;
}

footer p {
   color: #1a1a1a;
}

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

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

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



/* Image Optimization & Display */
img {
   max-width: 100%;
   height: auto;
   display: block;
}

img.fit {
   width: 100%;
   height: auto;
   object-fit: cover;
   object-position: center;
}

/* Content Images */
.wp-editor img {
   border-radius: 15px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   max-width: 100%;
   height: auto;
   margin: 20px 0;
   display: block;
}

.wp-editor img.alignright {
   float: right;
   margin-left: 20px;
   margin-bottom: 20px;
   margin-top: 10px;
   max-width: 400px;
   width: 100%;
   height: auto;
}

.wp-editor img.alignleft {
   float: left;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-top: 10px;
   max-width: 400px;
   width: 100%;
   height: auto;
}

/* Banner Images - Full Width */
.wp-bonus-h {
   overflow: hidden;
   position: relative;
}

.wp-bonus-h img,
.bonust-sticky-h img {
   width: 100%;
   height: auto;
   min-height: 400px;
   object-fit: cover;
   object-position: center;
   display: block;
}

/* Logo */
.s-img img {
   max-width: 170px;
   height: auto;
   width: auto;
   display: block;
}

/* Author Avatar */
.rating-author-image img,
.avatar-big img {
   border-radius: 50%;
   object-fit: cover;
   width: 100%;
   height: 100%;
   max-width: 100px;
   max-height: 100px;
   display: block;
}

/* Responsive Images */
@media (max-width: 767px) {
   .wp-editor img.alignright,
   .wp-editor img.alignleft {
      float: none;
      display: block;
      margin: 20px auto;
      max-width: 100%;
      width: 100%;
   }
   
   .wp-bonus-h img,
   .bonust-sticky-h img {
      min-height: 250px;
      object-fit: cover;
   }
   
   .s-img img {
      max-width: 140px;
   }
   
   .wp-editor img {
      max-width: 100%;
      width: 100%;
   }
}

/* Header should always be above banners */
header.sh { 
   position: relative; 
   z-index: 1001; 
}

.wp-bonus-h { 
   position: relative; 
   z-index: 1; 
}

/* Header theme */
.sh-h { 
   background-color: #0096db !important; 
}

.sh-h, 
.sh-h * { 
   color: #ffffff !important; 
}

.sh-h a { 
   color: #0096db !important; 
}

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

h1, 
h2, 
h3 { 
   color: #0096db !important; 
}

.login-buttons { 
   background-color: #fef32a !important; 
   color: #05558e !important; 
   border-color: #fef32a !important; 
}

.open-menu span { 
   background-color: #ffffff !important; 
}

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

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

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

   h1 {
      font-size: 34px;
   }

   h2 {
      font-size: 28px;
   }

   h3 {
      font-size: 24px;
   }
}

@media (max-width: 768px) {
   .sh-h, 
   .sh-h .h-l, 
   .sh-h ul { 
      background-color: #0096db !important; 
   }
   .sh-h .h-l a { 
      color: #ffffff !important; 
   }
   .h-r-h { 
      background-color: #0096db !important; 
   }
}