.bookmaker-table { display: flex; flex-direction: column; gap: 12px; }

.bookmaker-row { position: relative; background: #FFFFFF; border: 1px solid #E1E8F0; border-radius: 12px; padding: 14px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "rank brand" "details details" "bonus bonus" "cta cta" "footer footer"; gap: 12px; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.bookmaker-row:hover { border-color: #00C853; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(10, 22, 40, 0.08); }
.bookmaker-row.is-top { border-color: #00C853; box-shadow: 0 8px 24px rgba(0, 200, 83, 0.12); }
.bookmaker-row.is-top::before { content: "TOP"; position: absolute; top: -12px; left: 70px; padding: 4px 12px; background: #7C3AED; color: #FFFFFF; font-size: 11px; font-weight: 900; letter-spacing: 2px; border-radius: 4px; }
@media (min-width: 768px) {
  .bookmaker-row.is-top::before { left: 20px; }
}

.bookmaker-row .row-rank { grid-area: rank; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, #0A1628 0%, #2A3A4E 100%); color: #FFFFFF; font-size: 17px; font-weight: 900; border-radius: 8px; font-variant-numeric: tabular-nums; }
.bookmaker-row.is-top .row-rank { background: linear-gradient(135deg, #00C853 0%, #008A3A 100%); }

.bookmaker-row .row-brand { grid-area: brand; display: flex; align-items: center; gap: 12px; }
.bookmaker-row .row-brand .brand-logo-wrap { flex-shrink: 0; width: 92px; height: 50px; padding: 4px 6px; border-radius: 8px; overflow: hidden; background: #FFFFFF; border: 1px solid #E1E8F0; display: flex; align-items: center; justify-content: center; }
.bookmaker-row .row-brand .brand-logo-wrap .brand-logo { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.bookmaker-row[data-id="sts"] .brand-logo { transform: scale(1.15); }
.bookmaker-row[data-id="superbet"] .brand-logo { transform: scale(1.05); }
.bookmaker-row .row-brand .brand-info { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.bookmaker-row .row-brand .brand-info .brand-name { font-size: 18px; font-weight: 800; color: #0A1628; letter-spacing: -0.3px; }
.bookmaker-row .row-brand .brand-info .brand-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.bookmaker-row .row-brand .brand-info .brand-rating .rating-value { font-weight: 800; color: #0A1628; font-variant-numeric: tabular-nums; }
.bookmaker-row .row-brand .brand-info .brand-rating .rating-stars { display: inline-flex; gap: 2px; }
.bookmaker-row .row-brand .brand-info .brand-rating .rating-stars .star-icon { width: 14px; height: 14px; }
.bookmaker-row .row-brand .brand-info .brand-rating .rating-stars .star-icon.is-filled { color: #FFB300; }
.bookmaker-row .row-brand .brand-info .brand-rating .rating-stars .star-icon.is-empty { color: #E1E8F0; }
.bookmaker-row .row-brand .brand-info .brand-rating .rating-count { color: #5A6A7E; font-weight: 500; }

.bookmaker-row .row-details { grid-area: details; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed #E1E8F0; }
.bookmaker-row .row-details .details-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bookmaker-row .row-details .details-features { display: flex; flex-wrap: wrap; gap: 6px; }

.bookmaker-row .row-bonus { grid-area: bonus; padding: 10px 12px; background: linear-gradient(135deg, rgba(0, 200, 83, 0.06) 0%, rgba(41, 98, 255, 0.06) 100%); border-radius: 8px; border-left: 3px solid #00C853; }
.bookmaker-row .row-bonus .bonus-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #2962FF; margin-bottom: 3px; }
.bookmaker-row .row-bonus .bonus-amount { font-size: 14px; font-weight: 800; color: #0A1628; line-height: 1.25; letter-spacing: -0.3px; margin-bottom: 4px; }
.bookmaker-row .row-bonus .bonus-terms { font-size: 10px; color: #5A6A7E; line-height: 1.4; }

.bookmaker-row .row-footer { grid-area: footer; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #E1E8F0; }
.bookmaker-row .row-footer .footer-meta { font-size: 11px; color: #5A6A7E; font-weight: 500; }
.bookmaker-row .row-footer .footer-meta .meta-sponsor { color: #FF3D00; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.bookmaker-row .row-cta { grid-area: cta; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.bookmaker-row .row-cta .row-cta-button { width: 100%; }
.bookmaker-row .row-cta .cta-button { width: 100%; }
.bookmaker-row .row-cta .review-link { font-size: 13px; font-weight: 600; color: #2962FF; }

.bookmaker-rank-1 { background: linear-gradient(135deg, #00C853 0%, #2962FF 100%); }
.bookmaker-rank-2 { background: linear-gradient(135deg, #2962FF 0%, #5DA0FF 100%); }
.bookmaker-rank-3 { background: linear-gradient(135deg, #FFB300 0%, #FF8800 100%); }

.empty-state { text-align: center; padding: 60px 20px; background: #F7F9FC; border-radius: 12px; }
.empty-state .empty-title { font-size: 18px; font-weight: 700; color: #0A1628; margin-bottom: 8px; }
.empty-state .empty-text { font-size: 14px; color: #5A6A7E; }

@media (min-width: 768px) {
  .bookmaker-row { grid-template-columns: 44px 240px 1fr 170px; grid-template-areas: "rank brand bonus cta" "rank details details cta" "rank footer footer footer"; padding: 14px 16px; gap: 14px; align-items: center; }
  .bookmaker-row .row-rank { width: 44px; height: 44px; font-size: 18px; }
  .bookmaker-row .row-brand .brand-logo-wrap { width: 92px; height: 50px; padding: 4px 6px; }
  .bookmaker-row .row-brand .brand-info .brand-name { font-size: 17px; }
  .bookmaker-row .row-bonus { padding: 12px 16px; }
  .bookmaker-row .row-bonus .bonus-amount { font-size: 16px; }
  .bookmaker-row .row-bonus .bonus-label { font-size: 10px; }
  .bookmaker-row .row-bonus .bonus-terms { font-size: 11px; line-height: 1.4; }
  .bookmaker-row .row-cta { grid-area: cta; flex-direction: column; gap: 6px; align-items: stretch; }
  .bookmaker-row .row-cta .row-cta-button { width: 100%; }
  .bookmaker-row .row-cta .cta-button { width: 100%; padding: 10px 12px; font-size: 11px; letter-spacing: 0.8px; white-space: nowrap; }
  .bookmaker-row .row-footer { padding-top: 6px; }
  .bookmaker-row .row-footer .footer-meta { font-size: 10px; }
  .bookmaker-row .row-cta .footer-meta { font-size: 10px; }
  .bookmaker-row .row-details { padding-top: 0; border-top: 0; flex-direction: row; align-items: center; }
}

@media (min-width: 1024px) {
  .bookmaker-row { grid-template-columns: 44px 260px 1fr 180px; }
  .bookmaker-row .row-bonus .bonus-amount { font-size: 17px; }
  .bookmaker-row .row-bonus .bonus-label { font-size: 11px; letter-spacing: 1.8px; }
}

.bookmaker-row .row-brand .brand-logo-wrap.brand-logo-wrap { padding: 0; }
.bookmaker-row .row-brand .brand-logo-wrap .brand-logo.brand-logo { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 6px; }

/* Square-ish logos with own bg: cover fills perfectly */
.bookmaker-row[data-id="sts"] .row-brand .brand-logo-wrap .brand-logo, .bookmaker-row[data-id="traf"] .row-brand .brand-logo-wrap .brand-logo { object-fit: cover; }
.bookmaker-row[data-id="betfan"] .row-brand .brand-logo-wrap { background: #00153B; border-color: #00153B; }

/* Wide-wordmark logos with own bg: contain + wrapper bg matching brand color */
.bookmaker-row[data-id="fortuna"] .row-brand .brand-logo-wrap { background: #FFD400; border-color: #FFD400; }
.bookmaker-row[data-id="betcris"] .row-brand .brand-logo-wrap { background: #E30613; border-color: #E30613; }
.bookmaker-row[data-id="lebull"] .row-brand .brand-logo-wrap { background: #0A2A52; border-color: #0A2A52; }
.bookmaker-row[data-id="etoto"] .row-brand .brand-logo-wrap { background: #00153B; border-color: #00153B; }
.bookmaker-row[data-id="admiralbet"] .row-brand .brand-logo-wrap { background: #003B8B; border-color: #003B8B; }
.bookmaker-row[data-id="lvbet"] .row-brand .brand-logo-wrap { background: #0A1628; border-color: #0A1628; }
.bookmaker-row[data-id="betclic"] .row-brand .brand-logo-wrap { background: #C8102E; border-color: #C8102E; }
.bookmaker-row[data-id="betters"] .row-brand .brand-logo-wrap { background: #1A1A1A; border-color: #1A1A1A; }
.bookmaker-row[data-id="fuksiarz"] .row-brand .brand-logo-wrap { background: #CF3232; border-color: #CF3232; }