/**
 * kb-widget-enhance.css — premium polish for the MatchTicker day tabs +
 * the "عرض المزيد" link. Classes are added at runtime by kb-widget-enhance.js.
 * Kept separate from the generated Tailwind build (koora-widgets.css) so the
 * latter can be re-synced without clobbering these custom rules.
 *
 * Selectors are scoped under [data-svelte-component="MatchTicker"] and use a
 * two-token specificity (0,2,0) so they win over Tailwind's single-class
 * utilities (0,1,0) without !important. The widget's own active class
 * (bg-[#a8ff03]) is preserved, so [class*="a8ff03"] tracks the active tab.
 */

/* Tab row */
[data-svelte-component="MatchTicker"] .kb-daytabs {
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Each tab */
[data-svelte-component="MatchTicker"] .kb-daytab {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
  will-change: transform;
}

/* Inactive hover lift */
[data-svelte-component="MatchTicker"] .kb-daytab:hover {
  transform: translateY(-1px);
  background-color: rgba(255, 255, 255, .07);
}

/* Active tab — lime gradient + glow + bolder (overrides flat bg-[#a8ff03]) */
[data-svelte-component="MatchTicker"] .kb-daytab[class*="a8ff03"] {
  background: linear-gradient(135deg, #b6ff2e 0%, #a8ff03 45%, #8ed600 100%);
  color: #0a1400;
  font-weight: 800;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(168, 255, 3, .55), 0 0 0 1px rgba(168, 255, 3, .35),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}

[data-svelte-component="MatchTicker"] .kb-daytab[class*="a8ff03"]:hover {
  background: linear-gradient(135deg, #c0ff45 0%, #acff14 45%, #97e000 100%);
  transform: translateY(-2px);
}

/* "عرض المزيد" as a clear, premium link */
[data-svelte-component="MatchTicker"] .kb-viewmore {
  cursor: pointer;
  font-weight: 700;
  color: #8ed600;
  transition: color .15s ease, opacity .15s ease;
}

[data-svelte-component="MatchTicker"] .kb-viewmore:hover {
  color: #a8ff03;
  text-decoration: underline;
  text-underline-offset: 3px;
}