/* BoredFlix theme for AURA7 Theme Switcher - dark blue contained - v3 */
:root {
  --bf-bg: #0f1a2e;
  --bf-panel: #16233d;
  --bf-card: #1c2c4b;
  --bf-line: #24365a;
  --bf-text: #f2f5fb;
  --bf-muted: #9fb0cc;
  --bf-body: #d3dcec;
  --bf-red: #e50914;
  --bf-red-2: #ff2a36;
  --bf-red-soft: rgba(229, 9, 20, 0.14);
  --bf-radius: 16px;
  --bf-max: 1140px;
}

body {
  background: var(--bf-bg);
  color: var(--bf-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.7;
  margin: 0;
}

a { color: var(--bf-red-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.bf-wrap { max-width: var(--bf-max); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.bf-page { padding: 0 0 40px; }

/* Scrollbars */
html { scrollbar-color: var(--bf-line) var(--bf-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bf-bg); }
::-webkit-scrollbar-thumb { background: var(--bf-line); border-radius: 10px; }

/* Reset AURA7 wrappers around our header and footer */
.site-header.site-header-custom { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; }
.site-footer { background: transparent; border: 0; padding: 0; margin-top: 0; }
.site-header-custom .bf-header { position: static; }

/* Header */
.bf-header { position: sticky; top: 0; z-index: 50; padding: 12px 20px 12px; background: var(--bf-bg); }
.bf-header-in { max-width: calc(var(--bf-max) - 40px); margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--bf-panel); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); box-sizing: border-box; }
.bf-logo img { height: 38px; width: auto; display: block; }
.bf-menu-toggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.bf-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 40px; padding: 0 10px; border: 1px solid var(--bf-line); border-radius: 10px; background: var(--bf-card); cursor: pointer; box-sizing: border-box; }
.bf-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.bf-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; justify-content: center; }
.bf-nav a { color: var(--bf-muted); padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.bf-nav a:hover { color: #fff; background: var(--bf-card); text-decoration: none; }

/* Active menu item */
body:has([data-page="home"]) .bf-nav a[data-nav="home"],
body:has([data-page="movies"]) .bf-nav a[data-nav="movies"],
body:has([data-page="tv"]) .bf-nav a[data-nav="tv"],
body:has([data-page="app"]) .bf-nav a[data-nav="app"],
body:has([data-page="alternatives"]) .bf-nav a[data-nav="alternatives"],
body:has([data-page="safe"]) .bf-nav a[data-nav="safe"] { color: #fff; background: var(--bf-red-soft); }
body:has([data-page="watch"]) .bf-header .bf-btn { background: var(--bf-red-2); box-shadow: 0 0 0 3px var(--bf-red-soft); }

/* Buttons */
.bf-btn { display: inline-block; background: var(--bf-red); color: #fff; font-weight: 700; padding: 11px 22px; border-radius: 10px; border: 0; }
.bf-btn:hover { background: var(--bf-red-2); text-decoration: none; color: #fff; }
.bf-btn-lg { font-size: 19px; padding: 15px 34px; }
.bf-btn-ghost { display: inline-block; color: var(--bf-text); border: 1px solid var(--bf-line); background: var(--bf-card); padding: 11px 22px; border-radius: 10px; font-weight: 600; }
.bf-btn-ghost:hover { border-color: var(--bf-red); text-decoration: none; color: #fff; }

/* Hero (contained box) */
.bf-hero { width: calc(100% - 40px); max-width: calc(var(--bf-max) - 40px); margin: 8px auto 0; padding: 56px 0 40px; text-align: center; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); background: radial-gradient(ellipse at top, rgba(229, 9, 20, 0.20), transparent 60%), var(--bf-panel); box-sizing: border-box; }
.bf-hero .bf-wrap { padding: 0 28px; }
.bf-hero h1 { font-size: 44px; line-height: 1.15; margin: 0 0 16px; font-weight: 800; }
.bf-hero p { max-width: 760px; margin: 0 auto 26px; color: var(--bf-muted); font-size: 18px; }
.bf-hero-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.bf-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.bf-badge { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 999px; padding: 6px 14px; font-size: 14px; color: var(--bf-body); }

/* Sections (contained boxes) */
.bf-section { background: var(--bf-panel); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 30px 30px 18px; margin-top: 20px; }
.bf-section h2 { font-size: 28px; line-height: 1.25; margin: 0 0 14px; }
.bf-section h2 + p, .bf-section h2 + div { margin-top: 0; }
.bf-section p + h2, .bf-section div + h2 { margin-top: 28px; }
.bf-section h3 { font-size: 20px; margin: 22px 0 8px; }
.bf-section p { color: var(--bf-body); margin: 0 0 14px; }
.bf-section ul, .bf-section ol { color: var(--bf-body); padding-left: 22px; margin: 0 0 16px; }
.bf-section li { margin-bottom: 8px; }
.bf-lead { font-size: 18px; color: var(--bf-text); }

/* Cards */
.bf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.bf-card { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 12px; padding: 20px; }
.bf-card h3 { margin: 0 0 8px; font-size: 18px; color: #fff; }
.bf-card p { margin: 0; color: var(--bf-muted); font-size: 15px; }
.bf-card-link { display: block; color: var(--bf-text); }
.bf-card-link:hover { border-color: var(--bf-red); text-decoration: none; }
.bf-num { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: var(--bf-red); color: #fff; font-weight: 800; margin-bottom: 10px; }

/* Tables */
.bf-table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--bf-line); border-radius: 12px; }
.bf-table { width: 100%; border-collapse: collapse; min-width: 540px; }
.bf-table th, .bf-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--bf-line); font-size: 15px; }
.bf-table th { background: var(--bf-card); color: #fff; }
.bf-table td { color: var(--bf-body); }
.bf-table tr:last-child td { border-bottom: 0; }

/* Notes */
.bf-note { background: var(--bf-red-soft); border-left: 4px solid var(--bf-red); padding: 14px 18px; border-radius: 8px; margin: 18px 0; color: var(--bf-text); }
.bf-answer { background: var(--bf-card); border: 1px solid var(--bf-line); border-radius: 12px; padding: 18px 20px; margin: 4px 0 18px; font-size: 17px; color: var(--bf-text); }

/* CTA box */
.bf-cta { text-align: center; background: linear-gradient(135deg, #2a1424, var(--bf-panel)); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 36px 20px; margin: 20px 0 0; }
.bf-cta h2 { margin: 0 0 10px; font-size: 28px; }
.bf-cta p { color: var(--bf-muted); margin: 0 0 20px; }

/* FAQ */
.bf-faq h3 { background: var(--bf-card); border: 1px solid var(--bf-line); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 14px 18px 6px; margin: 14px 0 0; font-size: 17px; }
.bf-faq p { background: var(--bf-card); border: 1px solid var(--bf-line); border-top: 0; border-radius: 0 0 10px 10px; padding: 0 18px 14px; margin: 0; color: var(--bf-muted); }

/* Footer (contained) */
.bf-footer { padding: 0 20px 20px; margin-top: 30px; }
.bf-footer-in { max-width: calc(var(--bf-max) - 40px); margin: 0 auto; padding: 32px 28px 22px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; background: var(--bf-panel); border: 1px solid var(--bf-line); border-radius: var(--bf-radius) var(--bf-radius) 0 0; border-bottom: 0; box-sizing: border-box; }
.bf-footer h4 { margin: 0 0 10px; color: #fff; font-size: 15px; }
.bf-footer p { color: var(--bf-muted); font-size: 14px; margin: 12px 0 0; }
.bf-footer ul { list-style: none; padding: 0; margin: 0; }
.bf-footer li { margin-bottom: 6px; }
.bf-footer a { color: var(--bf-muted); font-size: 14px; }
.bf-footer a:hover { color: #fff; }
.bf-footer-bottom { max-width: calc(var(--bf-max) - 40px); margin: 0 auto; padding: 14px 28px 18px; background: var(--bf-panel); border: 1px solid var(--bf-line); border-top: 1px solid var(--bf-line); border-radius: 0 0 var(--bf-radius) var(--bf-radius); color: #7d8fae; font-size: 13px; box-sizing: border-box; }

/* Tablet and mobile header: CSS only hamburger */
@media (max-width: 1024px) {
  .bf-header .bf-btn { margin-left: auto; padding: 9px 16px; order: 1; }
  .bf-burger { display: flex; order: 2; }
  .bf-nav { order: 3; flex: 0 0 100%; display: none; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--bf-line); margin-top: 2px; }
  .bf-nav a { padding: 10px 12px; font-size: 15px; }
  .bf-menu-toggle:checked ~ .bf-nav { display: flex; }
  .bf-menu-toggle:checked ~ .bf-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bf-menu-toggle:checked ~ .bf-burger span:nth-child(2) { opacity: 0; }
  .bf-menu-toggle:checked ~ .bf-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Mobile */
@media (max-width: 760px) {
  .bf-header .bf-btn { display: none; }
  .bf-burger { margin-left: auto; }
  .bf-wrap { padding: 0 16px; }
  .bf-header { padding: 10px 16px 0; }
  .bf-header-in { gap: 10px; padding: 10px 12px; }
  .bf-logo img { height: 32px; }
  .bf-hero { width: calc(100% - 32px); margin-top: 16px; padding: 36px 0 28px; }
  .bf-hero .bf-wrap { padding: 0 16px; }
  .bf-hero h1 { font-size: 30px; }
  .bf-hero p { font-size: 16px; }
  .bf-section { padding: 22px 18px 10px; margin-top: 16px; }
  .bf-section h2, .bf-cta h2 { font-size: 23px; }
  .bf-footer { padding: 0 16px 16px; }
  .bf-footer-in { grid-template-columns: 1fr; padding: 24px 18px 16px; }
  .bf-footer-bottom { padding: 14px 18px; }
}