/* ============================================================
   RATING CARDS — Pop-Art Casino
   rating-cards.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;700&display=swap');

/* ── Animations ─────────────────────────────────────────────── */
@keyframes float-in {
  from { opacity: 0; transform: translateY(28px) scale(.97) }
  to   { opacity: 1; transform: translateY(0)    scale(1)   }
}

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

@keyframes pulse-top {
  0%,100% { box-shadow: 0 0 0 0   rgba(220,38,38,.5),  6px 6px 0 #1a1a1a }
  60%     { box-shadow: 0 0 0 12px rgba(220,38,38,0),   6px 6px 0 #1a1a1a }
}

@keyframes streak {
  0%   { left: -120% }
  100% { left:  130% }
}

@keyframes badge-bounce {
  0%   { transform: scale(.5)  rotate(-12deg) }
  70%  { transform: scale(1.1) rotate(3deg)   }
  100% { transform: scale(1)   rotate(0)      }
}

@keyframes btn-shine {
  0%,100% { box-shadow: 0 4px 0 #991b1b, 0 6px 20px rgba(220,38,38,.5)                      }
  50%     { box-shadow: 0 4px 0 #991b1b, 0 6px 32px rgba(220,38,38,.9), 0 0 50px rgba(220,38,38,.25) }
}

@keyframes rank-pop {
  0%   { transform: rotate(-15deg) scale(0)  }
  60%  { transform: rotate(5deg)   scale(1.1) }
  100% { transform: rotate(0)      scale(1)  }
}

@keyframes wiggle {
  0%,100% { transform: rotate(0)   }
  25%     { transform: rotate(-3deg) }
  75%     { transform: rotate(3deg)  }
}

/* ── Container ─────────────────────────────────────────────── */
.rating-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 32px 0 48px;
  font-family: 'Inter', sans-serif;
}

/* ── Single Card ────────────────────────────────────────────── */
.rc-card {
  display: grid;
  grid-template-columns: 170px 1fr minmax(260px, 360px) 165px;
  align-items: stretch;
  background: #ffffff;
  border: 3px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #1a1a1a;
  overflow: visible;
  position: relative;
  animation: float-in .55s cubic-bezier(.22, 1, .36, 1) both;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}

.rc-card:nth-child(1) { animation-delay: .04s }
.rc-card:nth-child(2) { animation-delay: .11s }
.rc-card:nth-child(3) { animation-delay: .18s }
.rc-card:nth-child(4) { animation-delay: .25s }
.rc-card:nth-child(5) { animation-delay: .32s }
.rc-card:nth-child(6) { animation-delay: .39s }

.rc-card:hover {
  transform: translate(-3px, -4px);
  box-shadow: 9px 10px 0 #1a1a1a;
}

.rc-card:hover .rc-btn {
  animation: wiggle .35s ease;
}

/* ── Top card (#1) ──────────────────────────────────────────── */
.rc-card[data-rank="1"] {
  border-color: #dc2626;
  box-shadow: 6px 6px 0 #dc2626;
  animation: float-in .55s cubic-bezier(.22, 1, .36, 1) both,
             pulse-top 2.4s 1.2s infinite;
}

.rc-card[data-rank="1"]:hover {
  box-shadow: 9px 10px 0 #dc2626;
  animation: pulse-top 2.4s infinite;
}

/* ── Streak shine on hover ──────────────────────────────────── */
.rc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 10;
}

.rc-card:hover::before {
  animation: streak .55s ease forwards;
}

/* ── Rank badge ─────────────────────────────────────────────── */
.rc-card[data-rank]::after {
  content: attr(data-rank);
  position: absolute;
  top: 0;
  left: 0;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  background: #1a1a1a;
  border-radius: 0 0 12px 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: #fff;
  letter-spacing: .06em;
  z-index: 30;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}

.rc-card[data-rank="1"]::after {
  background: #dc2626;
}

/* HOT badge — add class rc-hot to the top card in PHP */
.rc-hot > .rc-logo::before {
  content: 'HOT';
  position: absolute;
  top: 8px;
  right: 10px;
  background: #dc2626;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  padding: 3px 10px;
  border-radius: 4px;
  border: 2px solid #1a1a1a;
  z-index: 5;
  animation: badge-bounce .55s cubic-bezier(.22, 1, .36, 1) .7s both;
}

/* ── Logo cell ──────────────────────────────────────────────── */
.rc-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  background: #EFF6FF;
  border-right: 3px solid #1a1a1a;
  min-height: 120px;
}

.rc-card[data-rank="1"] .rc-logo {
  background: #FFF1F2;
}

.rc-logo a {
  display: block;
  line-height: 0;
}

.rc-logo img {
  width: 130px;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  transition: transform .25s ease;
}

.rc-card:hover .rc-logo img {
  transform: scale(1.05);
}

/* ── Features cell ──────────────────────────────────────────── */
.rc-features {
  padding: 18px 20px;
  border-right: 3px solid #1a1a1a;
  display: flex;
  align-items: center;
}

.rc-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rc-features-list li,
.rc-features ul li,
.rc-features .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 400;
  color: #374151;
  line-height: 1.45;
  white-space: normal;
}

.rc-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rc-features span {
  white-space: normal !important;
}

.rc-features .feature-item {
  margin-bottom: 0;
}

/* ── Bonus cell ─────────────────────────────────────────────── */
.rc-bonus {
  padding: 18px 22px;
  text-align: center;
  border-right: 3px solid #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.rc-bonus-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: .15em;
  padding: 3px 12px;
  border-radius: 4px;
  border: 1.5px solid #1e40af;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.rc-bonus-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: .02em;
  color: #1a1a1a;
  line-height: 1.1;
  text-align: center;
}

.rc-card[data-rank="1"] .rc-bonus-text {
  background: linear-gradient(90deg, #dc2626, #ea580c, #dc2626);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-red 2.5s linear infinite;
}

.rc-bonus p,
.rc-bonus strong,
.rc-bonus span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: #1a1a1a;
  line-height: 1.2;
  white-space: normal;
}

/* ── CTA cell ───────────────────────────────────────────────── */
.rc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  background: #f9fafb;
}

.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #1a1a1a;
  color: #fff !important;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 15px 24px;
  border-radius: 10px;
  border: 2.5px solid #1a1a1a;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 0 #555, 0 6px 16px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.rc-btn:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 4px 0 #991b1b, 0 6px 24px rgba(220,38,38,.45) !important;
  transform: translateY(-2px);
}

.rc-btn svg {
  width: 16px;
  height: 16px;
}

/* ── #1 card CTA ────────────────────────────────────────────── */
.rc-card[data-rank="1"] .rc-btn {
  background: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 4px 0 #991b1b, 0 6px 20px rgba(220,38,38,.5);
  animation: btn-shine 2s ease-in-out infinite;
}

.rc-card[data-rank="1"] .rc-btn:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  box-shadow: 0 4px 0 #7f1d1d, 0 6px 28px rgba(220,38,38,.7) !important;
}

.rc-card[data-rank="1"] .rc-cta {
  background: #fff5f5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
  .rc-card {
    grid-template-columns: 150px 1fr 220px 148px;
  }
  .rc-logo           { padding: 18px 14px; }
  .rc-logo img       { width: 116px; }
  .rc-features       { padding: 15px 16px; }
  .rc-features-list li,
  .rc-features ul li,
  .rc-features .feature-item { font-size: 13px; flex-wrap: wrap; }
  .rc-bonus          { padding: 15px 14px; }
  .rc-bonus-text     { font-size: 22px; }
  .rc-cta            { padding: 15px 14px; }
  .rc-btn            { padding: 13px 18px; font-size: 16px; }
}

@media (max-width: 1059px) {
  .rc-card {
    grid-template-columns: 148px 1fr auto;
    grid-template-rows: auto auto;
  }

  .rc-logo {
    grid-column: 1;
    grid-row: 1 / 3;
    border-right: 3px solid #1a1a1a;
    border-bottom: none;
    align-self: stretch;
    padding: 20px 14px;
    min-height: auto;
  }
  .rc-logo img { width: 112px; }

  .rc-features {
    grid-column: 2;
    grid-row: 1;
    border-right: 3px solid #1a1a1a;
    border-bottom: 3px solid #1a1a1a;
    padding: 16px 16px;
    align-self: center;
  }

  .rc-bonus {
    grid-column: 2;
    grid-row: 2;
    border-right: 3px solid #1a1a1a;
    border-bottom: none;
    padding: 14px 16px;
    text-align: left;
    align-items: flex-start;
  }
  .rc-bonus-text { font-size: 20px; }

  .rc-cta {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 14px;
  }

  .rc-btn { padding: 13px 18px; font-size: 16px; }
}

@media (max-width: 767px) {
  .rc-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    border-radius: 14px;
    box-shadow: 4px 4px 0 #1a1a1a;
  }

  .rc-card[data-rank="1"] {
    box-shadow: 4px 4px 0 #dc2626;
  }

  .rc-logo, .rc-features, .rc-bonus, .rc-cta {
    grid-column: 1;
    border-right: none;
  }

  .rc-logo {
    grid-row: 1;
    border-bottom: 3px solid #1a1a1a;
    border-radius: 0;
    padding: 28px 20px 20px;
    min-height: auto;
    justify-content: center;
  }
  .rc-logo img { width: 160px; }

  .rc-features {
    grid-row: 2;
    border-bottom: 3px solid #1a1a1a;
    padding: 16px 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 13px;
  }

  .rc-features-list li,
  .rc-features ul li,
  .rc-features .feature-item {
    flex-wrap: wrap;
    justify-content: center;
  }
  .rc-features ul { align-items: center; }

  .rc-bonus {
    grid-row: 3;
    border-bottom: 3px solid #1a1a1a;
    padding: 18px 20px;
    text-align: center;
    align-items: center;
  }
  .rc-bonus-text  { font-size: 28px; }
  .rc-bonus-badge { font-size: 12px; padding: 4px 14px; }

  .rc-cta {
    grid-row: 4;
    padding: 18px 20px 22px;
    background: #f9fafb;
  }

  .rc-btn {
    width: 100%;
    max-width: 300px;
    padding: 16px 28px;
    font-size: 18px;
    justify-content: center;
  }

  .rc-card:hover {
    transform: none;
    box-shadow: 4px 4px 0 #1a1a1a;
  }

  .rc-card[data-rank="1"]:hover {
    box-shadow: 4px 4px 0 #dc2626;
  }
}