/**
 * NS Cricket flat button system — single source of truth.
 *
 * Prefer markup: class="rc-btn rc-btn--primary"
 * Legacy aliases (.rc-header__cta, .rc-home__btn, …) map to the same flat styles.
 */

.rc-btn,
.rc-header__cta,
.rc-home__btn,
.rc-footer__btn,
.rc-home__adv-explore,
.rc-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-sizing: border-box;
  min-height: var(--rc-btn-height);
  height: var(--rc-btn-height);
  padding: var(--rc-btn-pad-y) var(--rc-btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--rc-btn-radius);
  background: var(--rc-btn-bg, var(--rc-brand));
  color: var(--rc-btn-fg, #fff) !important;
  font-family: var(--rc-font);
  font-size: var(--rc-btn-font);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  filter: none;
  transform: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.rc-btn span,
.rc-header__cta span,
.rc-home__btn span,
.rc-footer__btn span {
  transition: transform 0.15s ease;
}

/* —— Variants —— */
.rc-btn--primary,
.rc-home__btn,
.rc-footer__btn,
.rc-search__submit {
  --rc-btn-bg: var(--rc-brand);
  --rc-btn-fg: #fff;
}

/* Signup / high-intent CTAs — club red */
.rc-btn--red,
.rc-header__cta {
  --rc-btn-bg: var(--rc-red, #c8102e);
  --rc-btn-fg: #fff;
}

.rc-btn--dark,
.rc-home__adv-explore {
  --rc-btn-bg: var(--rc-ink-strong);
  --rc-btn-fg: #fff;
}

.rc-btn--light,
.rc-home__btn--light {
  --rc-btn-bg: #fff;
  --rc-btn-fg: var(--rc-ink-strong);
  border-color: transparent;
}

.rc-btn--ghost {
  --rc-btn-bg: rgba(255, 255, 255, 0.12);
  --rc-btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.rc-btn--ghost-light {
  --rc-btn-bg: transparent;
  --rc-btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.rc-btn--pill {
  border-radius: 999px;
}

/* —— Hover / focus (flat — no lift, no glow shadow) —— */
.rc-btn:hover,
.rc-btn:focus-visible,
.rc-header__cta:hover,
.rc-header__cta:focus-visible,
.rc-home__btn:hover,
.rc-home__btn:focus-visible,
.rc-footer__btn:hover,
.rc-footer__btn:focus-visible,
.rc-home__adv-explore:hover,
.rc-home__adv-explore:focus-visible,
.rc-search__submit:hover,
.rc-search__submit:focus-visible {
  background: var(--rc-btn-bg-hover, var(--rc-brand-dark));
  color: var(--rc-btn-fg, #fff) !important;
  filter: none;
  transform: none;
  box-shadow: none;
}

.rc-btn--primary:hover,
.rc-btn--primary:focus-visible,
.rc-home__btn:hover,
.rc-home__btn:focus-visible,
.rc-footer__btn:hover,
.rc-footer__btn:focus-visible,
.rc-search__submit:hover,
.rc-search__submit:focus-visible {
  --rc-btn-bg-hover: var(--rc-brand-dark);
}

.rc-btn--red:hover,
.rc-btn--red:focus-visible,
.rc-header__cta:hover,
.rc-header__cta:focus-visible {
  --rc-btn-bg-hover: var(--rc-red-dark, #a00d25);
}

.rc-btn--dark:hover,
.rc-btn--dark:focus-visible,
.rc-home__adv-explore:hover,
.rc-home__adv-explore:focus-visible {
  --rc-btn-bg-hover: #000;
}

.rc-btn--light:hover,
.rc-btn--light:focus-visible,
.rc-home__btn--light:hover,
.rc-home__btn--light:focus-visible {
  --rc-btn-bg-hover: #f0f4fa;
  color: var(--rc-brand-dark) !important;
}

.rc-btn--ghost:hover,
.rc-btn--ghost:focus-visible {
  --rc-btn-bg-hover: rgba(255, 255, 255, 0.22);
}

.rc-btn--ghost-light:hover,
.rc-btn--ghost-light:focus-visible {
  --rc-btn-bg-hover: rgba(255, 255, 255, 0.1);
}

.rc-btn:focus-visible,
.rc-header__cta:focus-visible,
.rc-home__btn:focus-visible,
.rc-footer__btn:focus-visible,
.rc-home__adv-explore:focus-visible,
.rc-search__submit:focus-visible {
  outline: 2px solid var(--rc-brand);
  outline-offset: 2px;
}

.rc-btn:hover span,
.rc-btn:focus-visible span,
.rc-header__cta:hover span,
.rc-header__cta:focus-visible span,
.rc-home__btn:hover span,
.rc-home__btn:focus-visible span,
.rc-footer__btn:hover span,
.rc-footer__btn:focus-visible span {
  transform: translateX(2px);
}

/* Kill legacy 3D / glow modifiers */
.rc-home__btn--glow,
.rc-home__btn--glow:hover,
.rc-home__btn--glow:focus-visible {
  box-shadow: none;
  transform: none;
  filter: none;
}

/* Search submit fills its field — same flat brand, slightly taller for inputs */
.rc-search__submit {
  width: 100%;
  min-height: 2.85rem;
  height: 2.85rem;
  padding-inline: var(--rc-btn-pad-x);
  border-radius: var(--rc-btn-radius);
  font-size: var(--rc-btn-font);
}

.rc-search__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rc-brand);
}