/* rankings.css — v3 light ranking cards with real operator logos, gold score rings, green trust meters, colourful quick-picks */

.rank-list { margin: 26px 0; }
.rank-card { position: relative; overflow: hidden; border: 1px solid #E3DDD2; border-radius: 16px; background: #FFFFFF; box-shadow: 0 8px 26px rgba(26, 35, 50, 0.06); padding: 20px; margin: 0 0 18px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.rank-card:hover { transform: translateY(-3px); border-color: rgba(224, 49, 49, 0.45); box-shadow: 0 18px 44px rgba(26, 35, 50, 0.13); }
.rank-card .rank-card-ghost { position: absolute; top: -28px; right: 6px; font-size: 120px; line-height: 1; font-weight: 800; letter-spacing: -6px; color: #F6F1E8; font-variant-numeric: tabular-nums; z-index: 0; }
.rank-card .rank-card-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rank-card .rank-card-pos { flex: 0 0 auto; background: #1A2332; border-radius: 9px; color: #FFFFFF; font-size: 14px; font-weight: 800; padding: 9px 11px; font-variant-numeric: tabular-nums; }
.rank-card .rank-card-logo { flex: 0 0 auto; width: 54px; height: 54px; }
.rank-card .rank-card-mark { flex: 0 0 auto; width: 54px; height: 54px; font-size: 17px; }
.rank-card .rank-card-name { flex: 1 1 auto; min-width: 150px; }
.rank-card .rank-card-name .rank-card-title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; margin: 0; }
.rank-card .rank-card-name .rank-card-title a { color: #1A2332; }
.rank-card .rank-card-name .rank-card-title a:hover { color: #C42525; }
.rank-card .rank-card-best { margin: 5px 0 0; }
.rank-card .rank-card-score { flex: 0 0 auto; }
.rank-card .rank-card-facts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px 26px; border-top: 1px solid #F0EBE2; margin-top: 16px; padding-top: 14px; }
.rank-card .rank-card-fact { font-size: 11px; line-height: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #8B94A3; }
.rank-card .rank-card-fact .rank-card-fact-value { display: block; color: #1A2332; font-weight: 800; font-size: 15px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rank-card .rank-card-trust { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.rank-card .rank-card-trust .rank-card-trust-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #8B94A3; white-space: nowrap; }
.rank-card .rank-card-trust .rank-card-trust-value { font-size: 13px; font-weight: 800; color: #168A50; font-variant-numeric: tabular-nums; }
.rank-card .rank-card-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.rank-card .rank-card-actions .btn, .rank-card .rank-card-actions .btn-ghost { flex: 1 1 150px; text-align: center; }

@media (min-width: 768px) {
  .rank-card { padding: 22px 26px; }
  .rank-card .rank-card-actions .btn, .rank-card .rank-card-actions .btn-ghost { flex: 0 0 auto; min-width: 170px; }
}

.score-ring { position: relative; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 4px 14px rgba(242, 164, 19, 0.3); }
.score-ring .score-ring-disc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #FFFFFF; }
.score-ring .score-ring-value { font-size: 17px; line-height: 19px; font-weight: 800; color: #1A2332; font-variant-numeric: tabular-nums; }
.score-ring .score-ring-cap { font-size: 8px; line-height: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #8B94A3; }

.trust-meter { display: inline-block; width: 100%; max-width: 180px; height: 7px; border-radius: 40px; background: #EFEAE0; overflow: hidden; }
.trust-meter .trust-meter-fill { display: block; height: 100%; border-radius: 40px; background: linear-gradient(90deg, #1FAF66 0%, #168A50 100%); }

.index-note { background: #FFFFFF; border: 1px solid #E3DDD2; border-left: 4px solid #F2A413; border-radius: 12px; font-size: 14px; line-height: 22px; color: #5B6573; padding: 15px 18px; margin: 22px 0; box-shadow: 0 2px 10px rgba(26, 35, 50, 0.05); }
.compare-extra { margin: 30px 0 0; }

.quick-picks { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 26px 0 8px; }
.quick-pick { position: relative; display: block; background: #FFFFFF; border: 1px solid #E3DDD2; border-radius: 16px; padding: 16px 16px 14px; box-shadow: 0 6px 20px rgba(26, 35, 50, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.quick-pick:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 35, 50, 0.12); text-decoration: none; }
.quick-pick::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; border-radius: 16px 16px 0 0; }
.quick-pick.quick-pick-payout::before { background: linear-gradient(90deg, #1FAF66 0%, #168A50 100%); }
.quick-pick.quick-pick-games::before { background: linear-gradient(90deg, #9B5CF6 0%, #7C3AED 100%); }
.quick-pick.quick-pick-mobile::before { background: linear-gradient(90deg, #4F86F7 0%, #2563EB 100%); }
.quick-pick.quick-pick-deposit::before { background: linear-gradient(90deg, #F6BE3C 0%, #F2A413 100%); }
.quick-pick .quick-pick-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; margin: 4px 0 10px; }
.quick-pick.quick-pick-payout .quick-pick-label { color: #168A50; }
.quick-pick.quick-pick-games .quick-pick-label { color: #7C3AED; }
.quick-pick.quick-pick-mobile .quick-pick-label { color: #2563EB; }
.quick-pick.quick-pick-deposit .quick-pick-label { color: #B97D08; }
.quick-pick .quick-pick-row { display: flex; align-items: center; gap: 12px; }
.quick-pick .oplogo { width: 44px; height: 44px; border-radius: 10px; }
.quick-pick .brandmark { width: 44px; height: 44px; border-radius: 10px; font-size: 14px; }
.quick-pick .quick-pick-name { font-size: 16px; font-weight: 800; color: #1A2332; margin: 0; }
.quick-pick .quick-pick-stat { font-size: 13px; font-weight: 700; color: #5B6573; margin: 2px 0 0; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  .quick-picks { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .quick-picks { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.quick-pick .quick-pick-text { display: flex; flex-direction: column; min-width: 0; }
.rank-card .rank-card-blurb { position: relative; z-index: 1; font-size: 14px; line-height: 21px; color: #5B6573; border-left: 3px solid #F2A413; padding-left: 12px; margin: 13px 0 0; }
.opcell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.opcell .opcell-logo { width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto; }
.opcell .brandmark { width: 38px; height: 38px; border-radius: 9px; font-size: 12px; flex: 0 0 auto; }
.opcell .opcell-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.opcell .opcell-name { font-size: 14px; font-weight: 800; color: #1A2332; line-height: 19px; }
.opcell .opcell-name:hover { color: #C42525; }
.opcell .opcell-sub { font-size: 11px; line-height: 16px; color: #8B94A3; }
.opcell .opcell-review { font-size: 11px; font-weight: 800; line-height: 16px; }
@media (max-width: 767px) {
  .data-table-ranked td[data-label="Casino"] { justify-content: flex-start; }
}
.quick-pick .quick-pick-row { display: flex; align-items: center; gap: 12px; }
.quick-pick .quick-pick-row:hover { text-decoration: none; }
.quick-pick .quick-pick-row:hover .quick-pick-name { color: #C42525; }
.quick-pick .quick-pick-all { display: block; font-size: 12px; font-weight: 800; margin-top: 10px; padding-top: 9px; border-top: 1px solid #F0EBE2; }
.quick-pick .quick-pick-label { display: block; }

/* directory cards — /casinos/ card grid (each card opens the review) */
.dir-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
.dir-grid .dir-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3DDD2; border-radius: 16px; padding: 18px 20px; box-shadow: 0 8px 26px rgba(26, 35, 50, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.dir-grid .dir-card:hover { transform: translateY(-3px); border-color: rgba(224, 49, 49, 0.45); box-shadow: 0 16px 36px rgba(26, 35, 50, 0.12); text-decoration: none; }
.dir-grid .dir-card-top { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.dir-grid .dir-card-logo { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 11px; }
.dir-grid .dir-card-logo.brandmark { font-size: 15px; }
.dir-grid .dir-card-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dir-grid .dir-card-name { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; color: #1A2332; }
.dir-grid .dir-card:hover .dir-card-name { color: #C42525; }
.dir-grid .dir-card-entity { font-size: 12px; line-height: 17px; color: #8B94A3; }
.dir-grid .dir-card-score { flex: 0 0 auto; font-size: 16px; font-weight: 800; color: #1A2332; background: rgba(242, 164, 19, 0.16); border: 1px solid rgba(242, 164, 19, 0.5); border-radius: 10px; padding: 6px 11px; font-variant-numeric: tabular-nums; }
.dir-grid .dir-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.dir-grid .dir-card-pitch { font-size: 14px; line-height: 21px; color: #5B6573; margin: 0 0 12px; }
.dir-grid .dir-card-facts { font-size: 12px; font-weight: 700; color: #168A50; margin: 0 0 12px; }
.dir-grid .dir-card-read { font-size: 13px; font-weight: 800; color: #C42525; margin-top: auto; }

@media (min-width: 768px) {
  .dir-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .dir-grid { grid-template-columns: 1fr 1fr 1fr; }
}