.casino-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}

.casino-item {
  border: 1px solid var(--casino-borders, #ddd);
  background-color: var(--casino-bg, #07003b09);
  color: var(--casino-text-color, #000);
  padding: 20px 20px 10px;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--casino-font-lg, 16px);
  line-height: 20px;

  @media screen and (max-width: 768px) {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .casino-title {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(40% - 20px);

    @media screen and (max-width: 768px) {
      width: 100%;
      justify-content: center;
    }

    @media screen and (max-width: 320px) {
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .casino-logo {
      width: 70px;
      height: 70px;
      border-radius: 100%;
      border: 1px solid var(--casino-borders, #ddd);
    }

    .casino-details {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      justify-content: center;
      text-align: center;

      .casino-name {
        font-size: var(--casino-font-lg, 16px);
        font-weight: 700;
      }

      .casino-rating {
        display: flex;
        gap: 5px;
        align-items: center;
        font-size: var(--casino-font-md, 14px);
        font-weight: 700;

        span {
          opacity: 0.7;
        }

        &::before {
          content: '';
          display: block;
          width: 16px;
          height: 16px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cg clip-path='url(%23clip0_298_60573)'%3E%3Cpath d='M16.1263 6.63797C16.0215 6.31398 15.7342 6.08387 15.3942 6.05323L10.7761 5.63391L8.95005 1.35975C8.81541 1.04651 8.50876 0.84375 8.16805 0.84375C7.82734 0.84375 7.5207 1.04651 7.38605 1.36049L5.55995 5.63391L0.94118 6.05323C0.601816 6.08461 0.315187 6.31398 0.209838 6.63797C0.104489 6.96195 0.201781 7.3173 0.458502 7.54131L3.94919 10.6027L2.91987 15.1368C2.84455 15.4702 2.97395 15.8148 3.25057 16.0148C3.39925 16.1222 3.57321 16.1769 3.74863 16.1769C3.89987 16.1769 4.0499 16.1361 4.18455 16.0556L8.16805 13.6748L12.1501 16.0556C12.4415 16.2309 12.8088 16.2149 13.0848 16.0148C13.3615 15.8142 13.4908 15.4695 13.4155 15.1368L12.3862 10.6027L15.8769 7.54192C16.1336 7.3173 16.2316 6.96256 16.1263 6.63797Z' fill='%23FFC107'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_298_60573'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.167969 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        }
      }
    }
  }

  .casino-bonus {
    font-size: var(--casino-font-lg, 16px);
    font-weight: 700;
    width: calc(35% - 20px);
    text-align: center;
    flex: 1 0 calc(35% - 20px);

    @media screen and (max-width: 768px) {
      width: 100%;
    }
  }

  .play-button {
    font-weight: 700;
    line-height: 20px;
    padding: 10px 20px;
    gap: 0 4px;
    text-decoration: none;
    border-radius: 5px;
    background: var(--casino-btn, #009688);
    color: var(--casino-btn-text, #fff);
    transition: 0.3s;

    &:hover {
      background: var(--casino-btn-hover, #00796b);
    }
  }

  .casino-description {
    width: 100%;
    border-top: 1px solid var(--casino-borders, #ddd);

    p:first-of-type {
      margin-top: 10px;
    }

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

  .warning-message {
    font-size: var(--casino-font-sm, 10px);
    width: 100%;
    text-align: center;
    opacity: 0.7;
  }
}