/* Unified UI system: cards, modals, buttons + re-engagement prompt */

:root {
  --rf-ui-radius-card: 4px;
  --rf-ui-radius-modal: 4px;
  --rf-ui-radius-btn: 6px;
  --rf-ui-card-bg: rgba(20, 20, 20, 0.92);
  --rf-ui-card-border: rgba(255, 255, 255, 0.12);
  --rf-ui-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  --rf-ui-modal-bg: #181818;
  --rf-ui-modal-border: rgba(255, 255, 255, 0.16);
  --rf-ui-modal-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  --rf-ui-btn-primary-bg: #ffffff;
  --rf-ui-btn-primary-fg: #111111;
  --rf-ui-btn-secondary-bg: rgba(109, 109, 110, 0.72);
  --rf-ui-btn-secondary-fg: #ffffff;
  --rf-ui-btn-border: rgba(255, 255, 255, 0.2);
  --rf-ui-focus: rgba(229, 9, 20, 0.55);
}

body.nfAccount,
body.rf-modern-static,
body.rf-modern-login {
  --rf-ui-card-bg: #ffffff;
  --rf-ui-card-border: rgba(15, 23, 42, 0.14);
  --rf-ui-card-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
  --rf-ui-modal-bg: #ffffff;
  --rf-ui-modal-border: rgba(15, 23, 42, 0.12);
  --rf-ui-modal-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
  --rf-ui-btn-primary-bg: #111111;
  --rf-ui-btn-primary-fg: #ffffff;
  --rf-ui-btn-secondary-bg: #f1f5f9;
  --rf-ui-btn-secondary-fg: #0f172a;
  --rf-ui-btn-border: rgba(15, 23, 42, 0.15);
}

.rfUiCard {
  border-radius: var(--rf-ui-radius-card) !important;
  border: 0.1px solid var(--rf-ui-card-border);
  background: var(--rf-ui-card-bg);
  box-shadow: var(--rf-ui-card-shadow);
  overflow: hidden;
}

.rfUiCard:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.rfUiModal {
  border-radius: 4px !important;
  border: 0;
  background: var(--rf-ui-modal-bg);
  box-shadow: var(--rf-ui-modal-shadow);
  overflow: hidden;
}

/* Ensure modal "More Like This" cards stay square and borderless. */
.nfModal__mlCard.rfUiCard {
  border-radius: 4px !important;
  border: 0 !important;
}

/* Hard overrides: 4px radius + no borders for tiles, previews, and modals. */
.rows .card,
.featuredStrip__rail .featuredCard,
.watchDrawer__grid .wdTile__imgWrap,
.card,
.featuredCard{
  border-radius: 4px !important;
  border: 0 !important;
}

.rows .card__media,
.card__media,
.featuredStrip__rail .featuredCard,
.watchDrawer__grid .wdTile__imgWrap{
  border-radius: inherit;
}

.hoverPopover,
.hoverPopover__media,
.hoverPopover__preview,
.hoverPopover__poster,
.hoverPopover__video{
  /*border-radius: 4px !important;*/
  border: 0 !important;
  overflow: hidden;
}

.modalBackdrop .modal,
.rfUiModal{
  border-radius: 4px !important;
  border: 0 !important;
}

.nfModal__mlCard,
.nfModal__mlCard.rfUiCard{
  border-radius: 4px !important;
  border: 0 !important;
}

.nfModal__mlPlus{
  width: 34px !important;
  height: 34px !important;
}

.rfUiBtn {
  min-height: 42px;
  border-radius: var(--rf-ui-radius-btn) !important;
  border: 1px solid var(--rf-ui-btn-border);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.rfUiBtn:hover {
  transform: translateY(-1px);
}

.rfUiBtn:active {
  transform: translateY(0);
}

.rfUiBtn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--rf-ui-focus);
}

.rfUiBtn.rfUiBtn--primary {
  background: var(--rf-ui-btn-primary-bg);
  color: var(--rf-ui-btn-primary-fg);
  border-color: transparent;
}

.rfUiBtn.rfUiBtn--primary:hover {
  filter: brightness(0.96);
}

.rfUiBtn.rfUiBtn--secondary {
  background: var(--rf-ui-btn-secondary-bg);
  color: var(--rf-ui-btn-secondary-fg);
}

.rfUiBtn.rfUiBtn--secondary:hover {
  filter: brightness(1.03);
}

/* Keep poster/media fit aligned across cards */
.rfUiCard .card__media,
.rfUiCard .poster {
  width: 100%;
  height: 100%;
}

.rfUiCard .card__media img,
.rfUiCard .poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Re-engagement prompt */
.rfReengage {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100001;
  max-width: min(420px, calc(100vw - 24px));
  border-radius: 14px;
  border: 1px solid var(--rf-ui-card-border);
  background: rgba(14, 14, 14, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  color: #fff;
  padding: 12px;
  display: grid;
  gap: 10px;
  backdrop-filter: blur(8px);
}

.rfReengage__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.rfReengage__body {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

.rfReengage__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.rfReengage__actions .rfUiBtn {
  min-height: 38px;
  padding: 0 12px;
}

@media (max-width: 760px) {
  .rfReengage {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: none;
  }
}

/* Mobile theme sync: use the same tokens as desktop theme.css.php */
body.rf-mobile-app{
  --rfm-bg: var(--rf-theme-page-bg, #141414) !important;
  --rfm-surface: var(--rf-theme-card-bg, #1f1f1f) !important;
  --rfm-surface-soft: var(--rf-theme-card-bg, #1f1f1f) !important;
  --rfm-text: var(--rf-theme-text-primary, #ffffff) !important;
  --rfm-muted: var(--rf-theme-text-muted, #b3b3b3) !important;
  --rfm-accent: var(--rf-theme-accent, #e50914) !important;
  --rfm-accent-2: var(--rf-theme-accent, #e50914) !important;
  --rfm-outline: var(--rf-theme-border, rgba(255,255,255,.16)) !important;
  --rfm-btn-primary-bg: var(--rf-theme-btn-primary-bg, #ffffff) !important;
  --rfm-btn-primary-text: var(--rf-theme-btn-primary-text, #111111) !important;
  --rfm-btn-secondary-bg: var(--rf-theme-btn-secondary-bg, rgba(109,109,110,.7)) !important;
  --rfm-btn-secondary-text: var(--rf-theme-btn-secondary-text, #ffffff) !important;
  background: var(--rfm-bg) !important;
  color: var(--rfm-text) !important;
}

body.rf-mobile-app .rfm-hero{
  border-bottom-color: var(--rfm-outline) !important;
}

body.rf-mobile-app .rfm-topbar{
  background: transparent !important;
}

body.rf-mobile-app .rfm-iconBtn,
body.rf-mobile-app .rfm-backLink,
body.rf-mobile-app .rfm-logoPlaceholder,
body.rf-mobile-app .rfm-brand{
  background: var(--rfm-surface) !important;
  border: 1px solid var(--rfm-outline) !important;
  color: var(--rfm-text) !important;
}

body.rf-mobile-app .rfm-status,
body.rf-mobile-app .rfm-chip{
  border: 1px solid var(--rfm-outline) !important;
  background: var(--rfm-surface-soft) !important;
  color: var(--rfm-muted) !important;
}

body.rf-mobile-app .rfm-chip.isActive{
  background: var(--rfm-accent) !important;
  color: var(--rfm-text) !important;
  border-color: transparent !important;
}

body.rf-mobile-app .rfm-btnPrimary{
  background: var(--rfm-btn-primary-bg) !important;
  color: var(--rfm-btn-primary-text) !important;
  border-color: var(--rfm-outline) !important;
}

body.rf-mobile-app .rfm-btnSecondary{
  background: var(--rfm-btn-secondary-bg) !important;
  color: var(--rfm-btn-secondary-text) !important;
  border-color: var(--rfm-outline) !important;
}

body.rf-mobile-app .rfm-topMenuPanel{
  background: rgba(0,0,0,.14) !important;
}

body.rf-mobile-app .rfm-topMenuCard,
body.rf-mobile-app .rfmTabBar{
  background: var(--rfm-surface) !important;
  border: 1px solid var(--rfm-outline) !important;
  box-shadow: none !important;
}

body.rf-mobile-app .rfm-topMenuItem:hover{
  background: rgba(0,0,0,.05) !important;
}

body.rf-mobile-app .row__viewport::before,
body.rf-mobile-app .row__viewport::after{
  background: linear-gradient(90deg, var(--rfm-bg), rgba(0,0,0,0)) !important;
}
body.rf-mobile-app .row__viewport::after{
  background: linear-gradient(270deg, var(--rfm-bg), rgba(0,0,0,0)) !important;
}

body.rf-mobile-app .card{
  background: var(--rfm-surface) !important;
}

body.rf-mobile-app .badge-lock{
  background: var(--rfm-surface-soft) !important;
  border: 1px solid var(--rfm-outline) !important;
  color: var(--rfm-text) !important;
}

body.rf-mobile-app .modalBackdrop .modal{
  background: var(--rf-theme-card-bg) !important;
  color: var(--rf-theme-text-primary) !important;
  border-color: var(--rf-theme-border) !important;
}

@supports (color: color-mix(in srgb, white 50%, transparent)) {
  body.rf-mobile-app .rfm-topMenuPanel{
    background: color-mix(in srgb, var(--rfm-bg) 82%, transparent) !important;
  }
  body.rf-mobile-app .rfm-topMenuItem:hover{
    background: color-mix(in srgb, var(--rfm-text) 10%, transparent) !important;
  }
}