/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

[data-shortcode='top-rated'],
[data-shortcode='top-rated-best-sites'],
[data-shortcode='top-rated-page'],
[data-shortcode='top-rated-post'],
[data-shortcode='single-post'],
[data-shortcode='single-page'],
[data-shortcode='single'],
[data-shortcode='listing'],
[data-shortcode='other-rated'],
[data-shortcode='other-rated-best-sites'],
[data-shortcode='top-rated-full'] {
  position: relative;
  margin-top: 20px;
  margin-bottom:20px;
}

[data-shortcode='top-rated']:empty,
[data-shortcode='top-rated-best-sites']:empty,
[data-shortcode='top-rated-page']:empty,
[data-shortcode='top-rated-post']:empty,
[data-shortcode='single-post']:empty,
[data-shortcode='single-page']:empty,
[data-shortcode='single']:empty,
[data-shortcode='listing']:empty,
[data-shortcode='other-rated']:empty,
[data-shortcode='other-rated-best-sites']:empty,
[data-shortcode='top-rated-full']:empty {
  display: flex;
  justify-content: center;
}

[data-shortcode='top-rated']:empty:after,
[data-shortcode='top-rated-best-sites']:empty:after,
[data-shortcode='top-rated-page']:empty:after,
[data-shortcode='top-rated-post']:empty:after,
[data-shortcode='single-post']:empty:after,
[data-shortcode='single']:empty:after,
[data-shortcode='single-page']:empty:after,
[data-shortcode='listing']:empty:after,
[data-shortcode='other-rated']:empty:after,
[data-shortcode='other-rated-best-sites']:empty:after,
[data-shortcode='top-rated-full']:empty:after {
  content: "";
  background: #ccc;
  width: 300px;
  height: 10px;
  border-radius: 10px;
  position: absolute;
  top: 100px;
}

[data-shortcode=sticky-brands] {
  width: 50%;
}

[data-shortcode='top-rated']:empty:before,
[data-shortcode='top-rated-best-sites']:empty:before,
[data-shortcode='top-rated-page']:empty:before,
[data-shortcode='top-rated-post']:empty:before,
[data-shortcode='single-post']:empty:before,
[data-shortcode='single']:empty:before,
[data-shortcode='single-page']:empty:before,
[data-shortcode='listing']:empty:before,
[data-shortcode='other-rated']:empty:before,
[data-shortcode='other-rated-best-sites']:empty:before,
[data-shortcode='top-rated-full']:empty:before {
  content: "";
  top: 100px;
  background: #000;
  border-radius: 10px;
  position: relative;
  transform: translateX(-100px);
  z-index: 1;
  width: 100px;
  height: 10px;
  animation: line-bounce 1.6s infinite;
}

@keyframes line-bounce {
  50% {
    transform: translateX(100px);
  }
}

[data-shortcode='top-rated']:empty,
[data-shortcode='top-rated-best-sites']:empty,
[data-shortcode='top-rated-page']:empty {
  min-height: 518px;
}

@media (min-width: 768px) {

  [data-shortcode='top-rated']:empty,
  [data-shortcode='top-rated-best-sites']:empty,
  [data-shortcode='top-rated-page']:empty {
    min-height: 396px;
  }
}

[data-shortcode='top-rated-full']:empty {
  min-height: 782px;
}

@media (min-width: 768px) {
  [data-shortcode='top-rated-full']:empty {
    min-height: 405px;
  }
}

@media (min-width: 1024px) {

  [data-shortcode='top-rated']:empty,
  [data-shortcode='top-rated-best-sites']:empty,
  [data-shortcode='top-rated-page']:empty {
    min-height: 261px;
  }
}

[data-shortcode='top-rated-post']:empty,
[data-shortcode='single-post']:empty,
[data-shortcode='single']:empty {
  min-height: 458px;
}

@media (min-width: 768px) {

  [data-shortcode='top-rated-post']:empty,
  [data-shortcode='single']:empty {
    min-height: 427px;
  }
}

@media (min-width: 1024px) {

  [data-shortcode='top-rated-post']:empty,
  [data-shortcode='single']:empty {
    min-height: 193px;
  }
}


@media (min-width: 1024px) {
  [data-shortcode='single-page']:empty {
    min-height: 229px;
  }
}

[data-shortcode='single-page']:empty {
  min-height: 477px;
}


[data-shortcode='listing']:empty {
  --limit: 1;
  min-height: calc(761px * var(--limit));
  margin-bottom: calc(30px * (var(--limit) - 1));
}

@media (min-width: 768px) {
  [data-shortcode='listing']:empty {
    --limit: 1;
    min-height: calc(665px * var(--limit));
  }
}

@media (min-width: 1024px) {
  [data-shortcode='listing']:empty {
    --limit: 1;
    min-height: calc(331px * var(--limit));
  }
}

[data-shortcode='other-rated']:empty,
[data-shortcode='other-rated-best-sites']:empty {
  --limit: 1;
  min-height: calc(406px * var(--limit));
  /* margin-bottom: gap height * (count of items - 1) + title height */
  margin-bottom: calc(30px * (var(--limit) - 1) + 51px);
}

@media (min-width: 768px) {

  [data-shortcode='other-rated']:empty,
  [data-shortcode='other-rated-best-sites']:empty {
    --limit: 1;
    min-height: calc(379px * var(--limit));
  }
}

@media (min-width: 1024px) {

  [data-shortcode='other-rated']:empty,
  [data-shortcode='other-rated-best-sites']:empty {
    --limit: 1;
    min-height: calc(146px * var(--limit));
  }
}

/* [sticky-brands] */
[data-shortcode='sticky-brands'] {
  margin-top: 0;
}

[data-shortcode='sticky-brands']:empty {
  min-height: 83px;
}

[data-shortcode='sticky-brands']:empty:after,
[data-shortcode='sticky-brands']:empty:before {
  content: unset;
}

[data-shortcode='sticky-brands']:empty {
  background-image: linear-gradient(90deg, #ccc 0, #fefefe 50%, #ccc);
  background-size: 200% 50%;
  border-color: transparent !important;
  -webkit-animation: shimmer 1.5s linear infinite forwards;
  animation: shimmer 1.5s linear infinite forwards;
}

@-webkit-keyframes shimmer {
  0% {
    background-position: 100% 0
  }

  to {
    background-position: -100% 0
  }
}

@keyframes shimmer {
  0% {
    background-position: 100% 0
  }

  to {
    background-position: -100% 0
  }
}

/* wide shortcode  */

[data-shortcode='top-rated-post'],
[data-shortcode='single-post'],
[data-shortcode='other-rated'],
[data-shortcode='other-rated-best-sites'],
[data-shortcode='top-rated-best-sites'] {
  margin: 20px 0px;
}

@media (min-width: 1200px) {

  [data-shortcode='top-rated-post'],
  [data-shortcode='single-post'],
  [data-shortcode='other-rated'],
  [data-shortcode='other-rated-best-sites'],
  [data-shortcode='top-rated-best-sites'] {
    margin: 20px -83px;
  }
}


/*single page loading*/
.bookmaker-overview,
.bookmaker-block {
  overflow: visible;
}

[data-shortcode="single-review-rating"]:empty {
  height: 31px;
  width: 74px;
}

[data-shortcode="single-review-cta-button"]:empty {
  height: 43px;
  width: 190px;
}

[data-shortcode="single-review-country"]:empty {
  height: 31px;
  width: 74px;
}

[data-shortcode="single-review-top-at"]:empty {
  height: 116px;
  width: 245px;
}

[data-shortcode="single-review-suggestions"]:empty {
  margin: 30px 0;
}

[data-shortcode="single-review-bonus"]:empty {
  height: 118px;
  margin: 0 0 30px;
}

[data-shortcode="single-review-languages-block"]:empty {
  height: 220px;
  width: 100px;
}

[data-shortcode*=single-review]:empty {
  background-image: linear-gradient(90deg, #ccc 0, #fefefe 50%, #ccc);
  background-size: 200% 50%;
  border-color: transparent !important;
  -webkit-animation: shimmer 1.5s linear infinite forwards;
  animation: shimmer 1.5s linear infinite forwards;
  border-radius: 8px;
}

/* Single review logo loading related */
@media (min-width: 1200px) {
  [data-shortcode="single-review-logo"] {
    width: 343px;
    height: 100%
  }
}

@media (max-width: 1200px) {
  [data-shortcode="single-review-logo"] {
    height: 180px;
    width: 100%
  }
}

@media (max-width: 768px) {
  [data-shortcode=sticky-brands] {
    width: 100%;
  }
}

@-webkit-keyframes shimmer {
  0% {
    background-position: 100% 0
  }

  to {
    background-position: -100% 0
  }
}

@keyframes shimmer {
  0% {
    background-position: 100% 0
  }

  to {
    background-position: -100% 0
  }
}