/**
 * ===================================================================
 *
 *  DJ Bad Boy Official
 *  url: djbadboy.com.br
 *  02/11/2023
 * -------------------------------------------------------------------
 *
 * TOC:
 * 00. root
 * 01. webfonts and iconfonts
 * 02. base style overrides
 * 03. preloader
 * 04. buttons
 * 05. images
 * 06.
 * 07.
 * 08.
 * 09.
 * 10. container cds
 * 11. form container cds
 * 12.
 * 13. tooltip container
 * 14. preloader
 * 15. circle / loading
 * 16. footer
 * 17. others
 * 18. @medias
 *
 * ===================================================================
 */

/**
 * =================================
 * 00. root
 * =================================
 */
:root {
  --color-primary: #a80000;
  --color-primary-dark: #380000;
  --color-primary-dark-translucent: rgb(56, 0, 0, 0.8);
  --color-primary-translucent: rgba(168, 0, 0, 0.8);
  --color-background: #d8e3fa;
  --color-button-green: #28a745;
  --color-gray: rgb(235, 235, 237);
  --color-gray-translucent: rgb(235, 235, 237, 0.8);
  --color-dark-blue: #2f2b2b;
  --color-ratting: #e9b200;
  --color-disabled: #9c9c9c;
  --color-white: #fff;
  --color-h2: #0e0e0e;
  --color-p: #535353;
}

/**
 * =================================
 * 01. webfonts and iconfonts
 * =================================
 */

/**
 * =================================
 * 02. base style overrides
 * =================================
 */
body {
  background-color: var(--color-dark-blue);
  background: url(https://djbadboy.com.br/assets/img/djBadBoyBgIndexCds.jpg)
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  display: grid;
  place-items: center;
  height: 100vh;
  padding: 24px;
  font-size: 16px;
  font-family: Poppins, sans-serif;
  align-items: flex-start;
}

body h2 {
  color: var(--color-h2);
}

body p {
  color: var(--color-p);
}

* {
  margin: 0px;
  padding: 0px;
}

/**
 * =================================
 * 04. buttons
 * =================================
 */

#top-bar {
  display: flex;
  width: 100%;
  height: 40px;
  background-color: var(--color-primary-dark-translucent);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#top-bar a {
  color: var(--color-disabled);
  text-decoration: none;
  font-size: 25px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

#top-bar a:hover {
  opacity: 0.5;
}

#posts-container {
  padding-top: 45px;
}

#load-more-button {
  border: none;
  border-radius: 10px;
  text-align: center;
  color: var(--color-gray);
  width: 250px;
  height: 80px;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 40px 0;
  background-color: var(--color-primary);
  transition: opacity 3s ease-in;
  z-index: -1;
}

#load-more-button i {
  margin-right: 5px;
}

.scroll-to-top-btn {
  display: none;
  position: fixed;
  width: 30px;
  height: 30px;
  bottom: 20px;
  right: 20px;
  background-color: var(--color-primary-dark-translucent);
  color: var(--color-gray-translucent);
  padding: 10px;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  align-items: center;
  transition: background-color 0.3s;
}

.scroll-to-top-btn i {
  line-height: 30px;
}

.scroll-to-top-btn:hover {
  background-color: var(--color-primary-translucent);
}

/**
 * =================================
 * 05. images
 * =================================
 */
.responsive-image {
  max-width: 500px;
  height: auto;
  margin-bottom: 20px;
}

/**
 * =================================
 * 10. container cds
 * =================================
 */
.container-cds {
  padding: 0;
  margin: 0;
}

.container-cds-card {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-white);
  max-width: clamp(320px, 70vw, 740px);
  min-width: 320px;
  min-height: 280px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.container-cds-card:first-child {
  margin-top: 0;
  /* Ajuste essa margem superior conforme necessário */
}

.playPauseBtn {
  font-size: 16px;
  padding: 10px;
  border-radius: 50%;
  background-color: var(--color-primary-translucent);
  color: var(--color-gray-translucent);
  position: absolute;
  bottom: 10px;
  left: 10px;
  border: none;
  transition: background-color 0.3s, border 0.3s;
  z-index: 1;
  width: 50px;
  height: 50px;
}

.playPauseBtn:hover {
  background-color: var(--color-primary-dark-translucent);
  color: var(--color-gray-translucent);
}

.playPauseBtn i {
  font-size: 25px;
}

.container-cds-card-background {
  flex: 1 1 250px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.container-cds-card-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.2s;
}

.container-cds-card .container-cds-card-background img:hover {
  transform: scale(1.05);
}

.container-cds-card-content {
  flex: 3 1 350px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 16px;
}

.container-cds-card-content > h2 {
  line-height: 1;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  margin-bottom: clamp(0.35rem, 0vw, 0.55rem);
}

.container-cds-card-content > p {
  line-height: 1;
  font-size: clamp(1rem, 1.75vw, 1.1rem);
  font-weight: 400;
  margin: 0 0 6px 0;
  height: 100%;
}

.down-rattings {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0px;
  width: 100%;
}

.down-ratting {
  border-radius: 5px;
  padding: 0 0 15px 0;
  font-size: 15px;
  font-weight: 500;
  min-width: 80px;
}

.down-ratting-span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 2px 0 10px 0;
}

.down-ratting-span span {
  color: var(--color-disabled);
  margin: -15px 0 0 0;
  text-align: center;
  font-size: 10px;
  min-width: 80px;
}

.down-ratting-span .down-ratting-span-left {
  text-align: left;
}

.down-ratting-date-release-left {
  text-align: left;
  padding-top: 5px;
  font-size: 12px !important;
}

.down-ratting .fa {
  color: var(--color-ratting);
}

.container-cds-card-action-buttons {
  border-top: 1px solid var(--color-disabled);
  padding-top: 16px;
  gap: 12px;
  display: flex;
  margin-top: auto;
  flex-wrap: wrap;
}

.container-cds-card-action-buttons form {
  flex: 1 1 calc(50% - 12px);
  flex-basis: 100%;
  margin: 0;
}

.container-cds-card-action-buttons form button {
  background-color: var(--color-gray);
  color: var(--color-dark-blue);
  padding: 12px;
  text-decoration: none;
  border-radius: 5px;
  outline: none;
  border: none;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  transition: ease-in-out 0.3s;
}

.container-cds-card-action-buttons i {
  font-size: 15px;
  padding-right: 5px;
}

.container-cds-card-action-buttons button:hover {
  background-color: var(--color-primary);
  color: var(--color-gray);
  transition: ease-in-out 0.3s;
}

.container-cds-card-action-buttons button:active {
  transform: none;
}

/**
 * =================================
 * 11. form container cds
 * =================================
 */
.container-form-cds {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f1f3f4;
}

.container-form-cds form {
  margin: 0 10px 0 0;
}

.container-form-cds div {
  margin-bottom: 10px;
}

.container-form-cds label {
  display: block;
}

.container-form-cds input[type="text"],
.container-form-cds textarea {
  width: 100%;
  padding: 5px;
}

.container-form-cds audio {
  width: 100%;
}

.container-form-cds input[type="url"],
input[type="file"] {
  width: 100%;
}

.container-form-cds img {
  max-width: 100%;
  max-height: 100%;
  width: 300px;
  height: 300px;
  background: url(https://djbadboy.com.br/assets/img/backgroundCoverImage.jpg)
    no-repeat center center;
  background-size: cover;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  /* Adiciona sombra centrada */
  border: none;
  outline: none;
}

/**
 * =================================
 * 13. tooltip container
 * =================================
 */

.tooltip-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: flex-end;
}

.tooltip {
  visibility: hidden;
  width: 120px;
  background-color: var(--color-dark-blue);
  color: var(--color-gray);
  text-align: center;
  padding: 5px 0;
  margin: 0 0 50px 0;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.tooltip-container:hover .tooltip,
.tooltip-container:focus-within .tooltip {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s ease-out, visibility 1s ease-out;
}

/**
 * =================================
 * 14. preloader
 * =================================
 */
#pre-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px;
  width: 200px;
  height: 200px;
  background-color: transparent;
  border: none;
}

.wrapper .box-wrap {
  width: 70%;
  height: 70%;
  margin: calc((100% - 70%) / 2) calc((100% - 70%) / 2);
  position: relative;
  transform: rotate(-45deg);
}

.wrapper .box-wrap .box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(135, 0, 0, 0.6);
  background: linear-gradient(
    to right,
    #9a0000,
    #250000,
    #dc3232,
    #ba1111,
    #760000,
    #4b0000
  );
  background-position: 0% 50%;
  background-size: 1000% 1000%;
  visibility: hidden;
}

.wrapper .box-wrap .box.one {
  animation: moveGradient 15s infinite, oneMove 3.5s infinite;
}

.wrapper .box-wrap .box.two {
  animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
}

.wrapper .box-wrap .box.three {
  animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
}

.wrapper .box-wrap .box.four {
  animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
}

.wrapper .box-wrap .box.five {
  animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
}

.wrapper .box-wrap .box.six {
  animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
}

@keyframes moveGradient {
  to {
    background-position: 100% 50%;
  }
}

@keyframes oneMove {
  0% {
    visibility: visible;
    clip-path: inset(0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  14.2857% {
    clip-path: inset(0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  28.5714% {
    clip-path: inset(35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  42.8571% {
    clip-path: inset(35% 70% 35% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  57.1428% {
    clip-path: inset(35% 70% 35% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  71.4285% {
    clip-path: inset(0% 70% 70% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  85.7142% {
    clip-path: inset(0% 70% 70% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  100% {
    clip-path: inset(0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }
}

@keyframes twoMove {
  0% {
    visibility: visible;
    clip-path: inset(0% 70% 70% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  14.2857% {
    clip-path: inset(0% 70% 70% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  28.5714% {
    clip-path: inset(0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  42.8571% {
    clip-path: inset(0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  57.1428% {
    clip-path: inset(35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  71.4285% {
    clip-path: inset(35% 70% 35% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  85.7142% {
    clip-path: inset(35% 70% 35% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  100% {
    clip-path: inset(0% 70% 70% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }
}

@keyframes threeMove {
  0% {
    visibility: visible;
    clip-path: inset(35% 70% 35% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  14.2857% {
    clip-path: inset(35% 70% 35% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  28.5714% {
    clip-path: inset(0% 70% 70% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  42.8571% {
    clip-path: inset(0% 70% 70% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  57.1428% {
    clip-path: inset(0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  71.4285% {
    clip-path: inset(0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  85.7142% {
    clip-path: inset(35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  100% {
    clip-path: inset(35% 70% 35% 0 round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }
}

@keyframes fourMove {
  0% {
    visibility: visible;
    clip-path: inset(35% 0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  14.2857% {
    clip-path: inset(35% 0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  28.5714% {
    clip-path: inset(35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  42.8571% {
    clip-path: inset(70% 35% 0% 35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  57.1428% {
    clip-path: inset(70% 35% 0% 35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  71.4285% {
    clip-path: inset(70% 0 0 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  85.7142% {
    clip-path: inset(70% 0 0 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  100% {
    clip-path: inset(35% 0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }
}

@keyframes fiveMove {
  0% {
    visibility: visible;
    clip-path: inset(70% 0 0 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  14.2857% {
    clip-path: inset(70% 0 0 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  28.5714% {
    clip-path: inset(35% 0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  42.8571% {
    clip-path: inset(35% 0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  57.1428% {
    clip-path: inset(35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  71.4285% {
    clip-path: inset(70% 35% 0% 35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  85.7142% {
    clip-path: inset(70% 35% 0% 35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  100% {
    clip-path: inset(70% 0 0 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }
}

@keyframes sixMove {
  0% {
    visibility: visible;
    clip-path: inset(70% 35% 0% 35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  14.2857% {
    clip-path: inset(70% 35% 0% 35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  28.5714% {
    clip-path: inset(70% 0 0 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  42.8571% {
    clip-path: inset(70% 0 0 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  57.1428% {
    clip-path: inset(35% 0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  71.4285% {
    clip-path: inset(35% 0% 35% 70% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  85.7142% {
    clip-path: inset(35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }

  100% {
    clip-path: inset(70% 35% 0% 35% round 5%);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  }
}

/**
 * =================================
 * 15. loading
 * =================================
 */
.loader {
  opacity: 0;
  display: flex;
  align-items: flex-end;
  /* Centraliza verticalmente na parte inferior */
  justify-content: center;
  /* Centraliza horizontalmente */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 5px;
  transition: opacity 0.3s ease-in;
  z-index: -1;
}

.loader.show {
  opacity: 1;
}

.circle {
  width: 5px;
  height: 20px;
  background: linear-gradient(
    45deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  margin: 2px;
  animation: circle 1s linear infinite;
  border-radius: 20px;
}

.circle:nth-child(2) {
  animation-delay: 0.1s;
}

.circle:nth-child(3) {
  animation-delay: 0.2s;
}

.circle:nth-child(4) {
  animation-delay: 0.3s;
}

.circle:nth-child(5) {
  animation-delay: 0.4s;
}

.circle:nth-child(6) {
  animation-delay: 0.5s;
}

.circle:nth-child(7) {
  animation-delay: 0.6s;
}

.circle:nth-child(8) {
  animation-delay: 0.7s;
}

.circle:nth-child(9) {
  animation-delay: 0.8s;
}

.circle:nth-child(10) {
  animation-delay: 0.9s;
}

@keyframes circle {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

/**
* =================================
* 17 others
* =================================
*/

#loader-icon {
  color: #fff;
  /* Cor do ícone de carregamento */
  font-size: 2em;
  /* Tamanho do ícone de carregamento */
}

.no-more-content {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-white);
  max-width: 100%;
  /* Altere a largura máxima para ocupar toda a largura do contêiner pai */
  min-width: 320px;
  min-height: 280px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  margin: 30px 10px;
  /* Adicione um espaçamento interno para evitar que os filhos toquem nas bordas */
}

.load-more-container {
  opacity: 0;
  /* Comece com opacidade 0 para esconder a imagem */
  transition: opacity 1s ease-in;
}

/**
* =================================
* 18 @media
* =================================
*/

/* --- TELAS PEQUENAS --- */
/* Estilos para telas pequenas (por exemplo, telas menores que 768px de largura) */
@media (max-width: 768px) {
  .container {
    max-width: 300px;
    /* Altere o tamanho máximo para 300px em telas pequenas */
  }

  .responsive-image {
    max-width: 250px;
    /* A imagem nunca será maior do que a largura do contêiner pai */
    height: auto;
    /* A altura é ajustada automaticamente para manter a proporção */
  }

  .playPauseBtn {
    width: 80px;
    height: 80px;
  }

  .playPauseBtn i {
    font-size: 35px;
  }

  .tooltip-container:hover .tooltip {
    visibility: hidden;
  }
}

/* Estilos para telas pequenas (por exemplo, telas menores que 902px de largura) */
@media (max-width: 902px) {
  .container-cds-card {
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--color-white);
    max-width: 100%;
    min-width: 320px;
    min-height: 280px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    margin: 30px 10px;
  }
}

/* --- TELAS GRANDES --- */
/* Adicionando media query para telas maiores */
@media screen and (min-width: 715px) {
  .container-cds-card-action-buttons form {
    flex: 1 1 calc(50% - 12px);
  }
}