/* =Casino Cards Styles v1.0.8
   ------------------------------------------------------------------ */

/* Container (list view) */
.cc-list { 
  display: grid; 
  gap: 16px; 
}

/* Card */
.cc-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid #eaeef3;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 2px 6px rgba(20,42,74,0.05);
}

/* Left cluster */
.cc-left { 
  display: grid; 
  grid-template-columns: 72px 1fr; 
  gap: 16px; 
  align-items: center; 
}
.cc-logo { 
  width:72px; height:72px; 
  border-radius:16px; 
  overflow:hidden; 
  background:#f6f8fb; 
  display:flex; align-items:center; justify-content:center; 
}
.cc-logo img { 
  width:100%; height:100%; object-fit:cover; display:block; 
}
.cc-logo__placeholder { 
  font-weight:700; font-size:24px; color:#6b7a90; 
}

/* Title + lines */
.cc-title { 
  margin:0 0 4px 0; 
  font-size:20px; line-height:1.25; 
  color:#18223a; 
}

/* Prominent Bonus line (above features) */
.cc-bonus {
  margin: 6px 0 14px;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.4;
  color: #0d1a3a;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ffeaa7 0%, #fab1a0 100%);
  display: inline-block;
}

.cc-headline { 
  font-weight:700; 
  color:#18223a; 
  margin-bottom:10px; 
}

/* Feature pills */
.cc-badges { 
  list-style:none; margin:0; padding:0; 
  display:flex; flex-wrap:wrap; gap:10px; 
}
.cc-badges li {
  padding:8px 12px;
  border-radius:999px;
  background:#e9f7ee;           /* soft green pill */
  font-weight:600; font-size:14px;
  color:#1b6b3d;
}

/* Small print / T&Cs */
.cc-disclaimer { 
  margin-top:10px; 
  font-size:12px; line-height:1.4; 
  color:#6b7a90; 
}

/* Right cluster */
.cc-right { 
  display:flex; 
  flex-direction:column; 
  align-items:flex-end; 
  gap:12px; 
  min-width:220px; 
}

/* Rating */
.cc-rating { 
  display:flex; align-items:center; gap:6px; 
  font-weight:700; color:#2a9a55; 
}
.cc-star { font-size:18px; line-height:1; }
.cc-rating__num { font-size:16px; }

/* Buttons */
.cc-btn { 
  display:inline-flex; align-items:center; justify-content:center; 
  padding:14px 18px; 
  border-radius:999px; 
  font-weight:700; 
  text-decoration:none; 
}
.cc-btn--primary { 
  background:#3a7cff; color:#fff; 
  box-shadow: 0 4px 0 rgba(58,124,255,.18) inset; 
}
.cc-btn--primary:hover { filter:brightness(.98); }
.cc-btn--ghost { border:2px solid #cfe0ff; color:#1f3c82; background:#fff; }
.cc-btn--ghost:hover { background:#f7faff; }
.cc-btn--block { width: 100%; text-align: center; }

/* Responsive */
@media (max-width: 880px) {
  .cc-card { grid-template-columns: 1fr; }
  .cc-right { align-items:flex-start; min-width:0; }
}

/* ------------------------------------------------------------------ */
/* Trio grid (3-up mini cards)                                        */
/* ------------------------------------------------------------------ */

.cc-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 980px) { 
  .cc-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
}
@media (max-width: 640px) { 
  .cc-trio { grid-template-columns: 1fr; } 
}

/* Mini card */
.cc-mini {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid #eaeef3;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 2px 6px rgba(20,42,74,0.05);
  align-content: start;
  min-height: 100%;
}

.cc-mini-logo {
  width: 64px; height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: #f6f8fb;
}
.cc-mini-logo img { width: 100%; height: 100%; object-fit: cover; display:block; }

.cc-mini-title {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.25;
  color: #18223a;
}

.cc-mini-bonus {
  margin: 2px 0 10px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.35;
  color: #0d1a3a;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ffeaa7 0%, #fab1a0 100%);
}

/* Center everything in [casino_trio] mini cards */
.cc-trio .cc-mini{
  justify-items: center;   /* center grid items horizontally */
  text-align: center;      /* center text inside items */
}

.cc-trio .cc-mini-logo{
  /* centered by justify-items; no margin needed */
}

.cc-trio .cc-mini-title{
  text-align: center;
}

/* make the orange bonus pill shrink to its content and center */
.cc-trio .cc-mini-bonus{
  display: inline-block;
  margin: 6px auto 12px;   /* center horizontally */
}
/* Bigger logos on trio cards */
.cc-trio .cc-mini-logo{
  width: 100px;
  height: 100px;
  border-radius: 16px;   /* keep the nice rounded look */
}
@media (max-width:480px){
  .cc-trio .cc-mini-logo{ width:64px; height:64px; }  /* tidy on small phones */
}