/* Casino Offers Plugin — light theme, roamer palette
   Element rules are unconditional (no media-query lock).
   No CSS vars — hardcoded colors to avoid cascade failures.
*/

/* ── Containers ── */
.sp-offers-wrap  { margin: 24px 0; }
.sp-offers-default { display: flex; flex-direction: column; gap: 16px; }

/* ── Card ── */
.co-offer-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 40px 20px 16px;
  background: #ffffff;
  border: 1px solid #cce0d6;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(27,79,62,.11);
  color: #1c2b23;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  box-sizing: border-box;
  transition: box-shadow .2s;
}
.co-offer-card:hover {
  box-shadow: 0 4px 20px rgba(27,79,62,.2);
}

/* ── Badge ribbon ── */
.co-badge {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: #c8860a;
  color: #fff;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
}

/* ── Rank circle ── */
.co-rank {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1b4f3e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  border-radius: 50%;
}

/* ── Logo ── */
.co-logo-wrap {
  flex-shrink: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-logo-wrap img {
  max-width: 80px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* ── Info block ── */
.co-info { flex: 1 1 160px; min-width: 0; }

.co-name {
  font-size: 16px;
  font-weight: 700;
  color: #1c2b23;
  margin-bottom: 4px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* ── Stars ── */
.co-stars { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.co-star  { font-size: 15px; line-height: 1; }
.co-star-full, .co-star-half { color: #c8860a; }
.co-star-empty { color: #cce0d6; }
.co-rating-num { font-size: 12px; font-weight: 600; color: #55705e; margin-left: 4px; }

/* ── Features ── */
.co-features { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.co-feature {
  background: #edf7f1;
  color: #256b52;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Bonus ── */
.co-bonus-wrap { flex: 1 1 130px; text-align: center; }
.co-bonus-title {
  font-size: 15px;
  font-weight: 800;
  color: #c8860a;
  line-height: 1.3;
}
.co-bonus-desc { font-size: 11px; color: #55705e; line-height: 1.4; }

/* ── CTA ── */
.co-cta-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.co-cta-btn {
  display: inline-block;
  background: #1b4f3e !important;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s;
  border: none;
  cursor: pointer;
}
.co-cta-btn:hover,
.co-cta-btn:focus {
  background: #256b52 !important;
  color: #ffffff !important;
}

/* ── T&C ── */
.co-tc { font-size: 10px; color: #88a090; text-align: center; line-height: 1.4; }
.co-tc a { color: #88a090; text-decoration: none; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .co-offer-card  { padding: 36px 14px 14px; gap: 10px; }
  .co-logo-wrap   { width: 60px; }
  .co-logo-wrap img { max-width: 60px; max-height: 44px; }
  .co-bonus-wrap  { flex: 1 1 100%; }
  .co-cta-wrap    { flex: 1 1 100%; }
  .co-cta-btn     { display: block; width: 100%; text-align: center; }
}