/* Cineora production UI layer
   A final, low-specificity system pass for readability, responsive layout and accessibility. */

:root {
  --ui-bg: #070b12;
  --ui-surface: #0d131f;
  --ui-surface-raised: #121a28;
  --ui-line: rgba(255, 255, 255, 0.11);
  --ui-line-strong: rgba(255, 255, 255, 0.19);
  --ui-text: #f7f8fb;
  --ui-muted: #a7b2c5;
  --ui-red: #f3233b;
  --ui-red-soft: rgba(243, 35, 59, 0.14);
  --ui-focus: #73d4ff;
  --ui-radius-sm: 10px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 22px;
  --ui-shadow: 0 20px 55px rgba(0, 0, 0, 0.42);
  --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
}

body {
  min-width: 320px;
  color: var(--ui-text);
  background-color: var(--ui-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.community-network-strip {
  width: min(1600px, calc(100% - 64px));
  margin: 0 auto 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: rgba(13, 19, 31, .86);
}
.community-network-strip[hidden] { display: none; }
.community-network-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #73d4ff; background: rgba(115,212,255,.1); }
.community-network-strip > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.community-network-strip strong { font-size: 13px; }
.community-network-strip small { color: var(--ui-muted); }
.community-network-state { margin-left: auto; padding: 6px 10px; border-radius: 999px; color: #f4bd58; background: rgba(244,189,88,.1); font-size: 12px; font-weight: 700; }
.community-network-state.is-available { color: #6ce1b9; background: rgba(108,225,185,.1); }

.skip-link {
  position: fixed;
  z-index: 1000000000;
  top: 10px;
  left: 12px;
  padding: 11px 16px;
  border: 1px solid rgba(115, 212, 255, 0.58);
  border-radius: 10px;
  color: #071019;
  background: #eaf9ff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms var(--ui-ease);
}

.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(115, 212, 255, 0.13) !important;
}

button,
a,
select,
input { -webkit-tap-highlight-color: transparent; }

button:disabled,
[aria-disabled="true"] { cursor: not-allowed; opacity: 0.56; }

/* Header */
.site-header {
  height: 68px;
  background: rgba(7, 11, 18, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.site-header::before {
  height: 1px;
  background: linear-gradient(90deg, transparent 8%, rgba(243, 35, 59, 0.9) 38%, rgba(115, 212, 255, 0.58) 62%, transparent 92%);
  opacity: 0.72;
}

.header-container {
  max-width: 1780px;
  min-width: 0;
  padding-inline: clamp(16px, 2.5vw, 42px);
  gap: 16px;
}

.header-left { min-width: 0; }
.pill-nav { --nav-h: 42px; --pill-pad-x: 15px; }
.pill { min-width: 42px; font-size: 13px; }
.header-search-pill { height: 42px; width: clamp(190px, 14vw, 240px); }
.header-search-pill:focus-within { width: clamp(220px, 17vw, 280px); }
.header-action-icon { min-width: 42px; min-height: 42px; }
.bell-toggle { --bt-h: 42px; }
.bell-toggle__button { min-width: 42px; }

/* Hero readability and calmer motion */
.cinema-description {
  max-width: 56ch;
  color: #b7c2d4 !important;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.65 !important;
}

.cinema-meta,
.cinema-benefits { font-size: 12px !important; }
.cinema-action { min-height: 46px; font-size: 14px !important; }
.cinema-control { width: 42px !important; height: 42px !important; }
.cinema-reel-title > span,
.cinema-footer,
.caption-eyebrow small,
.note-pill { font-size: 11px !important; }

/* Discovery and filters */
.filters-container {
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: rgba(13, 19, 31, 0.88) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.055) !important;
}

.filters-container::before { opacity: 0.45 !important; }
.chip,
.premium-select-trigger,
.smart-filter-trigger { min-height: 46px !important; font-size: 13px !important; }
.smart-filter-copy small { font-size: 10px !important; }
.smart-filter-copy strong { font-size: 13px !important; }
.smart-filter-option,
.premium-select-option { min-height: 46px !important; font-size: 13px !important; }
.section-count { color: var(--ui-muted) !important; font-size: 12px !important; }

/* Catalog hierarchy and cards */
.content-wrapper { padding-bottom: 24px; }
.section-title { color: var(--ui-text); font-size: clamp(24px, 2.2vw, 34px) !important; }
.rails-container .section-header { border-radius: 18px !important; }
.rail-description,
.rail-count,
.rail-kicker { font-size: 12px !important; }

.movie-card,
.game-card {
  border-color: var(--ui-line) !important;
  background: linear-gradient(180deg, rgba(18, 26, 40, 0.84), rgba(10, 15, 24, 0.98)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important;
}

.movie-card:focus-within .card-overlay { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .movie-card:hover,
  .game-card:hover {
    transform: translateY(-6px) scale(1.012) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(243, 35, 59, 0.1) !important;
  }

  .movie-card:hover .card-poster,
  .game-card:hover .card-poster { transform: scale(1.045) !important; }
}

.card-title,
.game-card-title { color: #f4f6fa !important; font-size: 15px !important; line-height: 1.35 !important; }
.card-meta,
.game-card-meta { color: #9eabc0 !important; font-size: 12px !important; }
.game-card-eyebrow { font-size: 10px !important; }
.badge-quality,
.badge-audio,
.game-platform-badge,
.game-repack-badge { font-size: 10px !important; }
.card-size.card-series-badge { min-height: 24px; padding: 3px 7px !important; font-size: 10px !important; }
.action-play-btn { min-height: 40px; font-size: 13px; }
.action-btn-sm { width: 40px; height: 40px; }
.game-download-cta,
.game-details-btn { min-height: 44px; }
.game-download-copy small { font-size: 10px !important; }

.btn-load-more {
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  padding-inline: 26px !important;
  border-color: var(--ui-line-strong) !important;
  background: #131b29 !important;
  font-size: 14px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important;
}

#loadMoreBtn[style*="display: none"] { display: none !important; }
#paginationContainer:has(#loadMoreBtn[style*="display: none"]) { display: none !important; }

.btn-load-more:hover {
  border-color: rgba(243, 35, 59, 0.56) !important;
  background: #182131 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38) !important;
}

.btn-load-more .load-main-text { font-size: 14px !important; }
.btn-load-more .load-badge-text { font-size: 12px !important; }

.catalog-empty-state {
  grid-column: 1 / -1;
  width: min(560px, 100%);
  margin: 34px auto;
  padding: clamp(34px, 6vw, 64px) clamp(20px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: radial-gradient(circle at 50% 0, rgba(243, 35, 59, 0.08), transparent 42%), rgba(13, 19, 31, 0.72);
}
.catalog-empty-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(243, 35, 59, 0.28);
  border-radius: 50%;
  color: #ff6275;
  background: rgba(243, 35, 59, 0.1);
  font-size: 25px;
}
.catalog-empty-icon.is-amber { color: #f4bd58; border-color: rgba(244, 189, 88, 0.28); background: rgba(244, 189, 88, 0.09); }
.catalog-empty-state h3 { margin: 0; color: #fff; font-size: 22px; }
.catalog-empty-state p { max-width: 42ch; margin: 9px 0 22px; color: var(--ui-muted); font-size: 14px; line-height: 1.6; }
.catalog-empty-state .btn { min-height: 44px; }

/* Notification and popover surfaces */
.notifications-panel {
  border-radius: 18px;
  border-color: var(--ui-line);
  background: rgba(10, 15, 24, 0.985);
  box-shadow: var(--ui-shadow);
}
.notif-header-btn,
.notif-icon-btn,
.notif-tab,
.notif-action-btn,
.notif-sync-btn { min-height: 40px; }
.notif-icon-btn,
.notif-action-btn { min-width: 40px; }
.notif-header-btn,
.notif-tab,
.notif-sync-btn { padding-inline: 12px; font-size: 12px; }
.notif-item { min-height: 74px; padding: 10px; }
.notif-item-sub,
.notif-footer-text,
.notif-empty-desc { font-size: 12px; }

.mobile-menu-popover {
  width: 250px;
  padding: 8px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(10, 15, 24, 0.99) !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.7);
}
.mobile-menu-popover .mobile-menu-link {
  min-height: 48px;
  padding-inline: 14px;
  color: #d7deea !important;
  background: transparent !important;
  font-size: 14px;
}
.mobile-menu-popover .mobile-menu-link:hover,
.mobile-menu-popover .mobile-menu-link:focus-visible,
.mobile-menu-popover .mobile-menu-link.is-active {
  color: #fff !important;
  border-color: rgba(243, 35, 59, 0.3) !important;
  background: rgba(243, 35, 59, 0.13) !important;
}

/* Player and download dialogs */
.modal-overlay { overscroll-behavior: contain; }
.modal-dialog { max-height: calc(100dvh - 32px); }
.modal-header.cinema-modal-header { min-height: 62px; }
.cinema-hdr-btn,
.modal-close-btn { min-height: 40px !important; }
.cinema-hdr-btn.icon-only,
.modal-close-btn { width: 40px !important; height: 40px !important; }
.modal-title { font-size: 18px !important; }
.modal-badge { font-size: 11px !important; }
.c-btn { min-width: 40px; min-height: 40px; }
.skip-btn { width: 40px !important; height: 40px !important; }
.skip-btn .skip-tag { font-size: 9px !important; }
.time-display { font-size: 12px !important; }
.dropdown-item,
.dropdown-upload-btn,
.sync-btn,
.size-btn { min-height: 42px; font-size: 12px !important; }
.dropdown-header,
.dropdown-section-title,
.dropdown-note { font-size: 12px !important; }
.game-file-row { min-height: 52px; }
.game-file-row a { min-height: 40px; display: inline-flex; align-items: center; }

/* Footer */
.site-footer { border-top-color: var(--ui-line) !important; }
.footer-brand > p,
.footer-live,
.footer-links li a,
.stat-pill small,
.footer-bottom { font-size: 12px !important; }
.footer-links li a { min-height: 42px; }

/* Collapse the full navigation before it crowds search and utility controls. */
@media (max-width: 1320px) {
  .pill-nav-items.desktop-only { display: none !important; }
  .pill-nav .mobile-menu-button.mobile-only { display: flex !important; width: 44px; height: 44px; }
  .mobile-menu-popover.mobile-only { display: block; }
  .pill-nav-container { position: relative; }
  .mobile-menu-popover { top: calc(100% + 12px); left: 0; }
  .header-left { gap: 10px; }
  .header-search-pill { width: min(260px, 24vw); }
  .header-search-pill:focus-within { width: min(300px, 28vw); }
  .bell-toggle__say { display: none; }
  .bell-toggle__button { padding-inline: 10px; }
}

@media (max-width: 900px) {
  .site-header { height: 62px; }
  .header-container { padding-inline: 14px; }
  .header-search-pill { display: none !important; }
  .brand-name { font-size: 19px; }
  .mobile-menu-popover { position: fixed; top: 70px; left: 12px; right: 12px; width: auto; }
  .notifications-panel {
    position: fixed;
    top: 70px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  .grid-section > .section-header {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .catalog-header-tools { width: 100%; justify-content: space-between; }
  .smart-filter { min-width: min(280px, 62vw); }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 70px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .site-header { height: 58px; }
  .header-container { min-height: 58px; padding-block: 0; }
  .brand-play-polygon { width: 34px; height: 34px; }
  .brand-logo-link { min-height: 44px; }
  .header-action-icon,
  .bell-toggle__button,
  .mobile-menu-button { min-width: 44px !important; min-height: 44px !important; }
  .mobile-menu-popover { top: 66px; }

  .cinema-hero { border-radius: 0 0 24px 24px !important; }
  .cinema-gallery { height: 302px !important; }
  .cinema-poster-shell { width: 188px !important; height: 268px !important; }
  .cinema-copy { padding: 24px 18px 28px !important; }
  .cinema-title { font-size: clamp(34px, 10vw, 45px) !important; line-height: 0.98 !important; }
  .cinema-description { font-size: 14px !important; }
  .cinema-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .hero-sling-wrapper,
  .cinema-benefits,
  .cinema-footer { display: none !important; }
  .cinema-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px !important; }
  .cinema-actions > #heroPlayBtn,
  .cinema-actions > #heroDownloadBtn,
  .cinema-actions > #heroListBtn { grid-column: auto !important; }
  .cinema-action { min-width: 0; min-height: 46px; justify-content: center; }
  .cinema-reel { padding-inline: 14px !important; }
  .cinema-reel-heading { align-items: flex-end !important; }
  .cinema-reel-title > span { display: none; }

  .filters-container { margin-inline: 12px !important; border-radius: 18px !important; }
  .filters-right { gap: 8px !important; }
  .premium-select-trigger { min-height: 48px !important; }
  .content-wrapper { padding-inline: 12px !important; }
  .community-network-strip { width: calc(100% - 24px); margin-bottom: 12px; border-radius: 14px; }
  .rails-container .section-header { min-height: auto !important; padding-block: 16px !important; }
  .movies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .grid-section[data-view="games"] .movies-grid,
  .grid-section[data-view="software"] .movies-grid { grid-template-columns: 1fr !important; }
  .card-info { padding: 11px !important; }
  .card-title { font-size: 13.5px !important; }
  .card-meta { font-size: 11px !important; }

  .modal-overlay { padding: 0 !important; align-items: stretch; }
  .modal-dialog,
  .modal-dialog.cinema-theater-dialog,
  .game-modal-dialog {
    width: 100%;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0 !important;
    overflow-y: auto;
  }
  .cinema-modal-header {
    position: sticky;
    z-index: 80;
    top: 0;
    padding: 9px 10px !important;
    border-radius: 0 !important;
  }
  .cinema-modal-header .modal-title-group { gap: 6px; }
  .cinema-modal-header .modal-badge { display: none; }
  .cinema-modal-header .modal-title { font-size: 15px !important; }
  .cinema-modal-header .modal-header-actions { gap: 5px !important; }
  .cinema-modal-header .cinema-hdr-btn,
  .cinema-modal-header .modal-close-btn { min-width: 42px !important; height: 42px !important; min-height: 42px !important; }
  .cinema-player-wrapper { height: 334px !important; min-height: 334px !important; }
  .cinema-controls { left: 6px !important; right: 6px !important; bottom: 6px !important; padding: 7px !important; }
  .controls-left { grid-template-columns: 42px 42px 42px 42px minmax(72px, 1fr) !important; }
  .controls-right { grid-template-columns: repeat(6, minmax(42px, 1fr)) !important; overflow-x: auto; }
  .controls-left .c-btn,
  .controls-right .c-btn { min-height: 42px !important; height: 42px !important; }
  .controls-right .c-btn-badge { max-width: 46px; font-size: 9px !important; }
  .time-display { font-size: 11px !important; }
  .dropdown-panel { max-width: calc(100vw - 24px) !important; }
  .game-modal-header { position: sticky; top: 0; z-index: 5; }

  .notifications-panel {
    top: 66px;
    left: 8px;
    right: 8px;
    max-height: calc(100dvh - 78px);
    border-radius: 16px;
  }
  .notif-header { padding: 10px 12px; }
  .notif-tabs { padding: 8px 10px; }
  .notif-header-btn,
  .notif-icon-btn,
  .notif-tab,
  .notif-action-btn,
  .notif-sync-btn { min-height: 44px; }
  .notif-icon-btn,
  .notif-action-btn { min-width: 44px; }

  .mobile-bottom-bar {
    min-height: 68px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-bar-item { min-width: 0; min-height: 50px; flex: 1; padding: 4px; font-size: 11px; }
  .bottom-bar-item i { font-size: 20px; }
}

@media (max-width: 430px) {
  .header-container { padding-inline: 10px; }
  .brand-name { font-size: 18px; }
  .header-right { gap: 4px; }
  .cinema-gallery { height: 286px !important; }
  .cinema-poster-shell { width: 176px !important; height: 252px !important; }
  .cinema-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important; gap: 7px !important; }
  .cinema-action { padding-inline: 10px !important; font-size: 12px !important; }
  .cinema-benefits { gap: 12px !important; }
  .catalog-header-tools { align-items: stretch; flex-direction: column; }
  .smart-filter { width: 100%; min-width: 0; }
  .section-count { padding-left: 2px; }
  .movies-grid { gap: 10px !important; }
  .badge-quality,
  .badge-audio { font-size: 9px !important; padding: 3px 6px !important; }
  .card-title { font-size: 13px !important; }
  .card-meta > span:first-child { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn-load-more { width: min(100%, 320px) !important; }
  .notif-header-btn { width: 40px; padding: 0; font-size: 0; justify-content: center; }
  .notif-header-btn i { font-size: 16px; }
  .controls-left { grid-template-columns: repeat(4, 42px) minmax(68px, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .movie-card:hover,
  .game-card:hover,
  .btn-load-more:hover { transform: none !important; }
}