.casino-list-section *, .casino-list-section *::before, .casino-list-section *::after { box-sizing: border-box; }
.casino-list-section{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:#111827;
  --card-bg:#fff; --muted:#6b7280; --line:#e5e7eb; --chip:#f3f4f6;
  --primary:#d20a0a; --primary-50:#fef2f2;
}

.top-casinos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }
.casino-card-second{ grid-column:1/2; grid-row:1; }
.casino-card-first { grid-column:2/3; grid-row:1; }
.casino-card-third { grid-column:3/4; grid-row:1; }

.casino-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 6px 18px rgba(17,24,39,.06); position:relative; overflow:visible;
  transition:transform .18s ease, box-shadow .18s ease;
}
.casino-card:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(17,24,39,.10); }
.casino-card-first{ border-width:2px; border-color:#fee2e2; box-shadow:0 10px 28px rgba(210,10,10,.18); }

.casino-card-header{ padding:0; height:0; }
.casino-card-header .casino-rank{
  position:absolute; top:-16px; left:-12px; z-index:6;
  padding:8px 14px; font:800 14px/1 Inter,system-ui,sans-serif; color:#fff;
  background:#0f172a; border-radius:16px; box-shadow:0 10px 22px rgba(15,23,42,.25);
}

.casino-card-main{ padding:14px; }
.casino-logo-section{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.casino-logo{ width:72px; height:48px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:#fff; }
.casino-logo-img{ width:70px; height:47px; object-fit:contain; display:block; }
.casino-rating .casino-name{ margin:0 0 4px; font-weight:600; }

.rating-stars .stars-container{ display:inline-flex; align-items:center; gap:8px; }
.rating-score{ font-weight:700; font-size:12px; color:#991b1b; }

.casino-bonus{ margin:10px 0 12px; }
.casino-bonus .bonus-text{ margin:0 0 8px; font-weight:600; }
.bonus-features{ display:flex; flex-wrap:wrap; gap:6px; }
.bonus-features .feature{ font-size:12px; color:#374151; background:var(--chip); border:1px solid var(--line); padding:4px 8px; border-radius:999px; }

.casino-actions{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.btn.btn-primary.bonus-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px; border-radius:999px; font-weight:700; color:#fff; text-decoration:none;
  background:var(--primary); border:1px solid #dc2626; box-shadow:0 2px 0 rgba(210,10,10,.35) inset;
}
.btn.btn-primary.bonus-btn::before{ content:"▶"; font-size:12px; transform:translateY(-1px); }
.review-link{ font-size:13px; color:#2563eb; text-decoration:none; } .review-link:hover{ text-decoration:underline; }

.casino-table-section{ margin-top:10px; }
.casino-table{ background:transparent; border:0; box-shadow:none; overflow:visible; }
.table-body{ padding:6px 0; }

.table-row{
  position:relative;
  display:grid;
  grid-template-columns: 56px 230px 1fr 150px 200px 170px; /* rank | logo | bonus | stats | pay | actions */
  gap:12px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 8px 20px rgba(17,24,39,.08);
  padding:16px 12px 16px 14px;          
  margin:12px 0; overflow:visible;
}
.table-row:first-child{ border-top:0; }

.rank-cell .casino-rank{
  position:absolute; top:-16px; left:-12px; z-index:6;
  padding:8px 14px; font:800 14px/1 Inter,system-ui,sans-serif; color:#fff;
  background:#0f172a; border-radius:16px; box-shadow:0 10px 22px rgba(15,23,42,.25);
}

.logo-cell{ display:flex; align-items:center; gap:12px; margin-left:-4px; } 
.logo-cell .casino-rating .casino-name{ margin:0 0 6px; }

.bonus-cell .bonus-text{ display:block; font-weight:600; margin-bottom:6px; }
.bonus-cell .bonus-features{ gap:6px; }

.stats-cell, .payment-cell{ align-self:flex-start; padding-top:8px; }
.stats-cell{ display:grid; gap:6px; }
.stats-cell .stat-item{ background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.stat-label{ display:block; font-size:11px; color:var(--muted); }
.stat-value{ font-weight:700; }

.payment-cell .payment-label{ display:none; } 
.payment-icons{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.payment-icon img{ width:34px; height:22px; object-fit:contain; display:block; filter:saturate(1.05) contrast(1.05); }
.payment-more{ font-size:12px; color:#991b1b; background:var(--primary-50); border:1px solid #fecaca; padding:2px 8px; border-radius:999px; font-weight:700; }

.action-cell{
  grid-column:6; display:flex; flex-direction:column; gap:8px;
  align-items:flex-end; text-align:right;
}
.action-cell .bonus-btn{ width:100%; }

@media (max-width:980px){
  .top-casinos-grid{ grid-template-columns:1fr 1fr; }
  .casino-card-first{ grid-column:1/-1; }
  .table-row{
    grid-template-columns:56px 1fr 1fr;
    grid-template-areas:
      "rank logo logo"
      "bonus bonus bonus"
      "stats payment actions";
  }
  .rank-cell{ grid-area:rank; }
  .logo-cell{ grid-area:logo; }
  .bonus-cell{ grid-area:bonus; }
  .stats-cell{ grid-area:stats; }
  .payment-cell{ grid-area:payment; }
  .action-cell{ grid-area:actions; align-items:flex-end; }
}
@media (max-width:640px){
  .top-casinos-grid{ grid-template-columns:1fr; }
  .casino-card-first, .casino-card-second, .casino-card-third{ grid-column:1/-1; }
  .casino-actions{ flex-wrap:wrap; }
  .table-row{
    grid-template-columns:1fr;
    grid-template-areas:"rank" "logo" "bonus" "actions" "stats" "payment";
  }
  .action-cell{ align-items:flex-start; text-align:left; }
	.top-casinos-grid {
		display: flex;
    flex-direction: column;
	}
}

.top-casinos-grid .casino-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.top-casinos-grid .payment-methods{ margin-top: 10px; }

.table-row{
  grid-template-columns: 56px 230px 1fr 340px 170px !important;
  grid-template-rows: auto auto;         
  align-items: start;
}

.table-row .logo-cell{ margin-left: -6px; }

.table-row .stats-cell{
  grid-column: 4 !important;
  grid-row: 1 !important;
  align-self: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 0;
}

.table-row .payment-cell{
  grid-column: 4 !important;
  grid-row: 2 !important;
  align-self: start;
  margin-top: 10px;
}
.table-row .payment-cell .payment-label{ display: none; } 

.table-row .action-cell{
  grid-column: 5 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  text-align: right;
}

.table-row .stats-cell .stat-item{
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.payment-icons{ gap: 8px; }
.payment-icon img{ width: 34px; height: 22px; object-fit: contain; }

@media (max-width: 980px){
  .table-row{
    grid-template-columns: 56px 1fr 1fr !important;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "rank logo logo"
      "bonus bonus bonus"
      "middle middle actions";
  }
  .rank-cell{ grid-area: rank; }
  .logo-cell{ grid-area: logo; }
  .bonus-cell{ grid-area: bonus; }
  .table-row .stats-cell{ grid-column: auto; grid-row: auto; }
  .table-row .payment-cell{ grid-column: auto; grid-row: auto; margin-top: 8px; }
}
@media (max-width: 640px){
  .table-row{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;
    grid-template-areas: none;
  }
  .action-cell{ align-items: flex-start; text-align: left; }
}

.top-casinos-grid .casino-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:8px;
}
.top-casinos-grid .casino-stats .stat-item{
  background:#f8fafc !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:10px 12px !important;
}

.table-row{
  grid-template-columns:56px 190px 1fr 160px 200px 170px !important;
  align-items:start;
}

.table-row .logo-cell{ margin-left:-6px; }

.table-row .stats-cell{
  grid-column:4 !important;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-self:start;
  padding-top:0;
}
.table-row .stats-cell .stat-item{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}

.table-row .payment-cell{
  grid-column:5 !important;
  align-self:start;
  margin-top:0 !important;
}
.table-row .payment-cell .payment-label{ display:none; }
.table-row .payment-cell .payment-icons{ gap:8px; }
.table-row .payment-cell .payment-icon img{ width:34px; height:22px; object-fit:contain; }

.table-row .action-cell{
  grid-column:6 !important;
  display:flex; flex-direction:column; gap:8px;
  align-items:flex-end; text-align:right;
}
.table-row .action-cell .bonus-btn{ width:100%; }

@media (max-width:980px){
  .table-row{
    grid-template-columns:56px 190px 1fr;
    grid-auto-rows:auto;
  }
  .table-row .stats-cell{ grid-column:3 !important; }
  .table-row .payment-cell{ grid-column:3 !important; margin-top:10px !important; }
  .table-row .action-cell{ grid-column:3 !important; align-items:flex-end; }
}
@media (max-width:640px){
  .table-row{
    grid-template-columns:1fr !important;
  }
  .table-row .stats-cell,
  .table-row .payment-cell,
  .table-row .action-cell{ grid-column:1 !important; }
  .table-row .action-cell{ align-items:flex-start; text-align:left; }
}
.table-row{
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.table-row .rank-cell{
  order: 1;
  flex: 0 0 0;         
  padding: 0;
}
.table-row .logo-cell{
  order: 2;
  flex: 0 0 180px;      
  margin-left: -6px;    
  display: flex; align-items: center; gap: 12px;
}
.table-row .bonus-cell{
  order: 3;
  flex: 1 1 auto;       
  min-width: 0;
}

.table-row .stats-cell{
  order: 4;
  flex: 0 0 160px;
  align-self: flex-start;
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 0;
}
.table-row .stats-cell .stat-item{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}
.stat-label{ display:block; font-size:11px; color:var(--muted); }
.stat-value{ font-weight:700; }

.table-row .payment-cell{
  order: 5;
  flex: 0 0 200px;
  align-self: flex-start;
  margin-top: 0 !important;
}
.table-row .payment-cell .payment-label{ display:none; }
.table-row .payment-cell .payment-icons{ display:flex; flex-wrap:wrap; gap:8px; }
.table-row .payment-cell .payment-icon img{ width:34px; height:22px; object-fit:contain; }

.table-row .action-cell{
  order: 6;
  flex: 0 0 170px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end; text-align: right;
}
.table-row .action-cell .bonus-btn{ width:100%; }

.table-row{ position: relative; }
.table-row .rank-cell .casino-rank{
  position:absolute; top:-16px; left:-12px; z-index:6;
  padding:8px 14px; font:800 14px/1 Inter,system-ui,sans-serif; color:#fff;
  background:#0f172a; border-radius:16px; box-shadow:0 10px 22px rgba(15,23,42,.25);
}

@media (max-width: 980px){
  .table-row{ flex-wrap: wrap; }
  .table-row .logo-cell{ flex: 1 1 100%; margin-left: 0; order: 2; }
  .table-row .bonus-cell{ flex: 1 1 100%; order: 3; }

  .table-row .stats-cell{ flex: 1 1 300px; order: 4; }
  .table-row .payment-cell{ flex: 1 1 300px; order: 5; margin-top: 8px; }

  .table-row .action-cell{ flex: 1 1 100%; order: 6; align-items: flex-end; }
}

@media (max-width: 640px){
  .table-row .logo-cell,
  .table-row .bonus-cell,
  .table-row .stats-cell,
  .table-row .payment-cell,
  .table-row .action-cell{ flex: 1 1 100%; }
  .table-row .action-cell{ align-items: flex-start; text-align: left; }
}
.rating-stars { display:inline-block; vertical-align:middle; }
.rating-stars .stars-container { display:inline-flex; align-items:center; gap:8px; }
.rating-stars .stars-box { display:inline-block; }

.rating-stars .stars-background{
  --bar-w: 112px;     
  --bar-h: 9px;       
  position: relative !important;
  display: inline-block !important;
  width: var(--bar-w) !important;
  height: var(--bar-h) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: url(/wp-content/uploads/2026/01/grey.svg) left center / 100% 100% no-repeat !important;
}

.rating-stars .stars-fill{
  position: absolute !important;
  left: 0 !important;
  right: auto !important;   
  top: 0 !important;
  bottom: auto !important;
  display: block !important;
  height: 100% !important;
  min-width: 1px;           
  background: url(/wp-content/uploads/2026/01/red.svg) left center / 100% 100% no-repeat !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  will-change: width;
}

.rating-stars .rating-score{
  font-weight:700; font-size:12px; color:#991b1b;
}
a.btn.btn-primary.bonus-btn {
    color: #fff;
}