/* =========================================================
   FILE: assets/css/app.css
   THEME: American Woodland v2 🌲🪵 (SYNC PACK)
   - Aligns perfectly with header.php / footer.php / index.php
   - Bootstrap-friendly (no white UI)
   - Solid contrast + consistent spacing
   - Modal + Dock + Search suggest fully styled
   - Includes: MODELS pack + FAVORITES pack ✅
========================================================= */

/* -------------------------
   Theme variables
------------------------- */
:root{
  --bg:      #12130f;   /* deep pine night */
  --panel:   #171812;   /* dark moss */
  --panel2:  #1c1e16;   /* moss+ */
  --card:    rgba(135,179,109,.05);
  --border:  #2a2d23;   /* bark border */
  --border2: rgba(232,227,212,.10);

  --text:    #e8e3d4;   /* parchment */
  --text2:   rgba(232,227,212,.72);
  --muted:   #a9b0a1;   /* sage muted */

  --leaf:    #87b36d;   /* primary green */
  --ring:    #9fcf7c;   /* focus */
  --amber:   #d2a24f;   /* campfire */
  --danger:  #d07a6e;   /* clay red */

  --glass:   rgba(18,19,15,.72);
  --glass2:  rgba(18,19,15,.52);

  --r12: 12px;
  --r14: 14px;
  --r16: 16px;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* -------------------------
   Base / resets
------------------------- */
html, body{
  height:100%;
  background: var(--bg);
  color: var(--text);
}

body{
  margin:0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main{ background: transparent; }

a{ color: rgba(159,207,124,.92); text-decoration:none; }
a:hover{ color: rgba(210,162,79,.95); text-decoration: underline; }

.muted{ color: var(--muted); }
.smallcode{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: .85rem;
  color: var(--text2);
}

/* Bootstrap containers: keep default */
.container{ }

/* -------------------------
   Bootstrap re-skin (minimal)
------------------------- */
.btn{
  border-radius: var(--r12) !important;
}

.btn-outline-light{
  border-color: rgba(159,207,124,.22) !important;
  color: var(--text) !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus{
  background: rgba(135,179,109,.12) !important;
  border-color: rgba(159,207,124,.36) !important;
  color: var(--text) !important;
}

.badge{
  border-radius: 999px !important;
}
.badge.text-bg-info{
  background: rgba(159,207,124,.18) !important;
  border: 1px solid rgba(159,207,124,.35) !important;
  color: rgba(232,227,212,.92) !important;
}
.badge.text-bg-secondary{
  background: rgba(232,227,212,.10) !important;
  border: 1px solid rgba(232,227,212,.16) !important;
  color: rgba(232,227,212,.85) !important;
}
.text-success{ color: rgba(159,207,124,.95) !important; }

/* Cards from bootstrap */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r16);
}

/* Inputs */
.form-control,
.form-select,
input, select, textarea{
  background: #10110c;
  color: var(--text);
  border-color: rgba(159,207,124,.20);
}
.form-control:focus,
.form-select:focus,
input:focus, select:focus, textarea:focus{
  box-shadow: 0 0 0 .18rem rgba(159,207,124,.18) !important;
  border-color: rgba(159,207,124,.42) !important;
}

/* -------------------------
   NAVBAR (header.php)
------------------------- */
.app-nav{
  background: rgba(16,17,12,.92);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid rgba(159,207,124,.10);
}

/* NAV BADGES (header.php markup) */
.mfc-navbtn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-right: 2.55rem;
  padding-left: 2.55rem;
}

.mfc-navbadge{
  position:absolute;
  top:-7px;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:18px;
  text-align:center;
  color:#fff;
  background: rgba(135,179,109,.95);
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
  user-select:none;
  pointer-events:none;
}

.mfc-navbadge--tr{ right:-7px; }
.mfc-navbadge--tl{ left:-7px; }
.mfc-navbadge--br{ right:-7px; top:auto; bottom:-7px; }

.mfc-navbadge--gold{ background: rgba(210,162,79,.95); color:#111; }
.mfc-navbadge--green{ background: rgba(135,179,109,.95); }
.mfc-navbadge--red{ background: rgba(208,122,110,.95); }

/* Favorites badges (header.php markup) */
.nav-badge{
  position:absolute;
  top:-8px;
  right:-8px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  line-height:1;
  background: rgba(232,227,212,.14);
  border:1px solid rgba(232,227,212,.20);
  color:#fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.nav-badge.is-hidden{ display:none; }
.nav-badge--on{
  right:16px;
  background: rgba(159,207,124,.18);
  border-color: rgba(159,207,124,.32);
}

/* -------------------------
   Player hero (index.php)
------------------------- */
.hero{
  background: var(--panel);
  border-radius: var(--r16);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

.avatar{
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: #14150f;
  border: 1px solid rgba(159,207,124,.18);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgba(159,207,124,.22);
  background: rgba(135,179,109,.08);
  color: var(--text);
  font-size: .9rem;
  text-decoration:none;
}
.pill:hover{ background: rgba(135,179,109,.13); text-decoration:none; }
.pill:focus{ outline:2px solid var(--ring); outline-offset:2px; }

.pill--profile{ border-color: rgba(159,207,124,.40); }
.pill--profile:hover{ background: rgba(159,207,124,.12); }

.pill--videos{
  border-color: rgba(210,162,79,.42);
  color: #fff3dd;
}
.pill--videos:hover{ background: rgba(210,162,79,.14); }

video#mfcVideo{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  display:block;
  background:#000;
}

/* Toolbar */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding:.65rem .75rem;
  border-top:1px solid rgba(232,227,212,.10);
  background: var(--glass);
  backdrop-filter: saturate(120%) blur(8px);
}

.toolbtn{
  border: 1px solid rgba(159,207,124,.20);
  background: rgba(135,179,109,.08);
  color: var(--text);
  border-radius: var(--r12);
  padding: .35rem .6rem;
  font-size: .92rem;
  text-decoration:none;
  cursor:pointer;
}
.toolbtn:hover{ background: rgba(135,179,109,.13); }
.toolbtn:disabled{ opacity:.45; cursor:not-allowed; }

/* Shortcut line */
.kbdline{
  padding: .55rem .75rem .75rem;
  color: rgba(232,227,212,.78);
  font-size: .92rem;
  border-top: 1px solid rgba(232,227,212,.10);
  background: var(--glass2);
}
.kbdline b{ color: var(--text); font-weight: 700; }

.kbdpill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-left:.5rem;
  padding:.15rem .55rem;
  border-radius:999px;
  border:1px solid rgba(232,227,212,.16);
  background: rgba(135,179,109,.08);
  color: var(--text);
  font-size: .82rem;
  font-weight: 900;
}
.kbdpill.on{
  border-color: rgba(210,162,79,.38);
  background: rgba(210,162,79,.14);
  color:#fff3dd;
}
.kbdpill.off{
  border-color: rgba(208,122,110,.34);
  background: rgba(208,122,110,.12);
  color:#ffe7e4;
}

/* Social row (index.php) */
.socialRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.socialPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(232,227,212,.14);
  background: rgba(0,0,0,.20);
  text-decoration:none;
  color: var(--text);
  transition: all .15s ease;
}
.socialPill:hover{
  border-color: rgba(159,207,124,.28);
  background: rgba(135,179,109,.10);
  text-decoration:none;
}
.socialIcon{ font-size:16px; line-height:1; }
.socialHandle{ font-size:.85rem; opacity:.9; }

/* -------------------------
   Sidebar cards (index.php)
------------------------- */
.side-card{
  border: 1px solid rgba(159,207,124,.16);
  background: rgba(135,179,109,.05);
  border-radius: var(--r14);
  padding: 12px;
  color: var(--text);
}

.rec-fixwrap{ position: relative; }

.rec-card{
  border: 1px solid rgba(159,207,124,.18);
  background: rgba(135,179,109,.06);
  border-radius: var(--r14);
  padding: 12px;
  text-align: center;
  color: var(--text);
}

.rec-fixwrap .rec-card{
  position: sticky;
  top: 84px;
  z-index: 20;
}

@media (max-width: 991px){
  .rec-fixwrap .rec-card{ position: static; top:auto; }
}

.rec-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .65rem .95rem;
  border-radius: var(--r12);
  border: 1px solid rgba(208,122,110,.38);
  background: rgba(208,122,110,.12);
  color:#ffe7e4;
  font-weight: 900;
  cursor:pointer;
  text-decoration:none;
}
.rec-btn:hover{ background: rgba(208,122,110,.18); }
.rec-btn:disabled{ opacity:.45; cursor:not-allowed; }

.rec-sub{
  color: rgba(232,227,212,.72);
  font-size: .92rem;
  margin-top: 8px;
}

#anStatus{
  padding: 8px 10px;
  border: 1px solid rgba(232,227,212,.12);
  border-radius: 10px;
  background: rgba(135,179,109,.06);
  color: var(--text);
}

/* -------------------------
   Modal (index.php)
------------------------- */
.m-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.60);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.m-overlay.is-open{ display:flex; }

.m-card{
  width: min(520px, 92vw);
  background: #14150f;
  border: 1px solid rgba(159,207,124,.18);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
  color: var(--text);
}
.m-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(232,227,212,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.m-body{ padding: 16px; }
.m-foot{
  padding: 14px 16px;
  border-top: 1px solid rgba(232,227,212,.10);
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.m-x{
  background: transparent;
  border: 0;
  color: rgba(232,227,212,.85);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.m-label{
  color: rgba(232,227,212,.88);
  font-size: .95rem;
  margin-bottom: 6px;
}
.m-input{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--r12);
  border: 1px solid rgba(159,207,124,.20);
  background: #10110c;
  color: var(--text);
}
.m-note{
  color: rgba(232,227,212,.68);
  font-size: .9rem;
  margin-top: 10px;
}

/* -------------------------
   Dock (footer.php injects #recDockRoot + rec-dock.js)
------------------------- */
.dock{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 340px;
  max-width: 92vw;

  background: rgba(20,21,15,.96);
  border: 1px solid rgba(159,207,124,.20);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
  z-index: 9998;

  display:flex;
  flex-direction: column;
  max-height: min(72vh, 620px);
  overflow: hidden;

  backdrop-filter: saturate(120%) blur(8px);
}

.dock.min{
  width: 220px;
  max-height: 56px;
}

.dock-head{
  flex: 0 0 auto;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
  background: rgba(16,17,12,.70);
  border-bottom: 1px solid rgba(232,227,212,.10);
}

.dock-title{ font-weight: 900; font-size: .95rem; color: var(--text); }

.dock-badge{
  font-size: .82rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(159,207,124,.22);
  background: rgba(135,179,109,.10);
  color: var(--text);
}

.dock-body{
  display:none;
  padding: 10px 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.dock.open .dock-body{ display:block; }

.dock-body::-webkit-scrollbar{ width: 10px; }
.dock-body::-webkit-scrollbar-thumb{
  background: rgba(159,207,124,.16);
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
  border-radius: 999px;
}
.dock-body::-webkit-scrollbar-thumb:hover{
  background: rgba(159,207,124,.24);
}

/* Dock job items */
.job{
  padding: 10px;
  border: 1px solid rgba(232,227,212,.10);
  border-radius: var(--r12);
  background: rgba(135,179,109,.06);
  margin-bottom: 10px;
}
.job:last-child{ margin-bottom:0; }

.job-top{ display:flex; justify-content:space-between; gap:10px; }
.job-u{ font-weight: 900; color: var(--text); }
.job-st{ color: rgba(232,227,212,.70); font-size: .88rem; }
.job-line{ margin-top: 6px; color: rgba(232,227,212,.86); font-size: .9rem; line-height: 1.4; }

.job-actions{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }

.a-btn{
  padding: .38rem .6rem;
  border-radius: 10px;
  border: 1px solid rgba(159,207,124,.22);
  background: rgba(135,179,109,.10);
  color: var(--text);
  text-decoration:none;
  font-size: .9rem;
  cursor:pointer;
}
.a-btn:hover{ background: rgba(135,179,109,.15); }

.a-danger{
  border-color: rgba(208,122,110,.40);
  background: rgba(208,122,110,.12);
  color:#ffe7e4;
}
.a-danger:hover{ background: rgba(208,122,110,.18); }

.prog{
  margin-top: 8px;
  height: 8px;
  background: #0f100b;
  border: 1px solid rgba(159,207,124,.18);
  border-radius: 999px;
  overflow:hidden;
}
.prog > div{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(135,179,109,.95), rgba(210,162,79,.92));
}

/* -------------------------
   Online search autosuggest (online_search.php)
------------------------- */
#mfcSearchCard{ position: relative; }

#mfcSearchCard .mfc-suggest{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  right:0;
  max-height: 320px;
  overflow:auto;
  border: 1px solid rgba(159,207,124,.20);
  background: rgba(20,21,15,.97);
  border-radius: var(--r12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
}

#mfcSearchCard .mfc-suggest-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(232,227,212,.10);
  background: rgba(16,17,12,.92);
  backdrop-filter: blur(6px);
}
#mfcSearchCard .mfc-suggest-title{ font-weight: 900; color: var(--text); }
#mfcSearchCard .mfc-suggest-hint{ font-size: 12px; opacity: .75; color: rgba(232,227,212,.75); }

#mfcSearchCard .mfc-suggest-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  cursor:pointer;
  border-bottom: 1px solid rgba(232,227,212,.08);
  user-select:none;
}
#mfcSearchCard .mfc-suggest-item:last-child{ border-bottom:0; }

#mfcSearchCard .mfc-suggest-item:hover,
#mfcSearchCard .mfc-suggest-item.active{
  background: rgba(159,207,124,.12);
}

#mfcSearchCard .mfc-suggest-u{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight: 900;
  overflow:hidden;
  white-space:nowrap;
  min-width:0;
  color: var(--text);
}
#mfcSearchCard .mfc-suggest-u .mfc-u{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

#mfcSearchCard .mfc-suggest-score{
  font-size: 12px;
  opacity: .85;
  white-space: nowrap;
  color: rgba(232,227,212,.75);
}

#mfcSearchCard .mfc-hi{
  background: rgba(210,162,79,.22);
  color: inherit;
  padding: 0 2px;
  border-radius: 4px;
}
#mfcSearchCard .mfc-badge{
  margin-left: 2px;
  font-weight: 900;
  color: rgba(159,207,124,.95);
}

@media (max-width: 991px){
  #mfcSearchCard .mfc-suggest{ max-height: 280px; }
}

/* -------------------------
   Footer (footer.php)
------------------------- */
.app-footer{
  margin-top: 22px;
  border-top: 1px solid rgba(232,227,212,.10);
  background: rgba(16,17,12,.62);
}
.app-footer__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 14px 18px;
}

.app-footer__top{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
  color: rgba(232,227,212,.72);
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(232,227,212,.10);
  margin-bottom: 14px;
}
.app-footer__top b{ color: rgba(232,227,212,.92); }
.app-footer__top .sep{ opacity: .55; }

.app-footer__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 900px){
  .app-footer__grid{ grid-template-columns: 1fr 1.2fr 1fr; gap: 28px; }
}

.app-footer__h{
  font-weight: 900;
  letter-spacing: .3px;
  font-size: 13px;
  margin: 0 0 10px 0;
  color: rgba(232,227,212,.92);
}

.app-footer__btns{ display:flex; gap:10px; flex-wrap:wrap; }
.fbtn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding: .32rem .65rem;
  border-radius: 10px;
  border: 1px solid rgba(159,207,124,.20);
  background: rgba(135,179,109,.08);
  color: rgba(232,227,212,.95);
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
}
.fbtn:hover{ background: rgba(135,179,109,.13); text-decoration:none; }

.app-footer__muted{
  margin-top: 10px;
  color: rgba(232,227,212,.70);
  font-size: 13px;
  line-height: 1.35;
}

.app-footer__links{ list-style:none; padding:0; margin:0; }
.app-footer__links li{ margin: 4px 0; }
.app-footer__links a{
  color: rgba(232,227,212,.92);
  text-decoration:none;
  font-size: 13px;
}
.app-footer__links a:hover{ text-decoration: underline; opacity: .95; }

/* FAQ */
.faq-simple{ display:grid; gap:8px; }
.faq-q{
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(232,227,212,.70);
  font-size: 13px;
  cursor:pointer;
  user-select:none;
  background: transparent;
  border: 0;
  padding: 0;
  text-align:left;
}
.faq-q:hover{ color: rgba(232,227,212,.88); }
.faq-q .tri{ width:14px; opacity:.75; transition: transform .12s ease; }
.faq-a{
  display:none;
  margin-left: 22px;
  color: rgba(232,227,212,.72);
  font-size: 13px;
  line-height: 1.4;
}
.faq-item.is-open .faq-a{ display:block; }
.faq-item.is-open .tri{ transform: rotate(90deg); }

/* -------------------------
   Model / Video helpers (used across pages)
------------------------- */
.modelCard{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r14);
  color: var(--text);
}

/* Video thumbs grid (video.php) */
.thumb8grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px){
  .thumb8grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px){
  .thumb8grid{ grid-template-columns: repeat(8, 1fr); }
}
.thumb8item img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 10px;
  background:#000;
}
.thumb8cap{
  font-size: .78rem;
  line-height: 1.15;
  margin-top: 6px;
  opacity: .85;
}
.thumb8cap strong{
  display:block;
  font-weight: 900;
  opacity: .95;
}

/* -------------------------
   Responsive tweaks
------------------------- */
@media (max-width: 480px){
  .toolbar{ gap:.35rem; }
  .toolbtn{ padding:.30rem .50rem; font-size:.85rem; }

  .dock{
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    bottom: 10px;
    max-height: 55vh;
    border-radius: var(--r14);
  }
  .dock.min{ max-height: 56px; }
}

@media (max-width: 768px){
  .dock{ max-height: 60vh; }
}

@media (min-width: 1200px){
  .dock{
    max-height: min(76vh, 720px);
    right: 18px;
    bottom: 18px;
  }
}

/* -------------------------
   HARD SAFETY NET (prevents "white page")
------------------------- */
html, body{ background: var(--bg) !important; color: var(--text) !important; }
.card, .side-card, .rec-card, .m-card, .modelCard{
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* =========================================================
   MODELS GRID + FILTERS PACK (uses global app.css) ✅
   - Supports your models.php markup (mfc-*)
   - No root override (keeps American Woodland v2)
========================================================= */

/* Make sure labels/headlines are visible on dark */
h1,h2,h3,h4,h5,h6{ color: var(--text) !important; }
.form-label{ color: var(--text) !important; }
.text-muted{ color: var(--text2) !important; }
.text-white{ color: #fff !important; }

/* Base card wrapper used on models page */
.mfc-card{
  background: rgba(135,179,109,.05);
  border: 1px solid rgba(232,227,212,.10);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
}

/* Filter bar layout */
.mfc-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.mfc-field{ min-width: 170px; flex: 1 1 200px; }
.mfc-field--age{ min-width: 120px; flex: 0 0 130px; }
.mfc-field--sort{ min-width: 160px; flex: 0 0 180px; }
.mfc-field--videos{ min-width: 140px; flex: 0 0 160px; }
.mfc-actions{ display:flex; gap:10px; align-items:flex-end; flex: 0 0 auto; }

@media (min-width: 992px){
  .mfc-filters{ flex-wrap:nowrap; }
  .mfc-field{ flex: 1 1 auto; }
}

/* Dark inputs/selects inside filters */
.mfc-filters input[type="search"],
.mfc-filters input[name="q"],
.mfc-filters select{
  background: #10110c !important;
  border: 1px solid rgba(159,207,124,.20) !important;
  color: var(--text) !important;
}
.mfc-filters input[type="search"]::placeholder,
.mfc-filters input[name="q"]::placeholder{
  color: rgba(232,227,212,.60) !important;
}
.mfc-filters input[type="search"]:focus,
.mfc-filters input[name="q"]:focus,
.mfc-filters select:focus{
  background: #0f100b !important;
  border-color: rgba(159,207,124,.42) !important;
  box-shadow: 0 0 0 .18rem rgba(159,207,124,.18) !important;
  color: var(--text) !important;
}

/* Tile card */
.mfc-tile{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(232,227,212,.10);
  border-radius: var(--r16);
  overflow:hidden;
  background: rgba(0,0,0,.25);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.mfc-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(159,207,124,.28);
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
  text-decoration:none;
}

/* Square thumb */
.mfc-thumb{
  position: relative;
  aspect-ratio: 1 / 1;
  background:#000;
  overflow:hidden;
}
.mfc-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}
.mfc-thumb-empty{
  height: 100%;
  width: 100%;
}

/* Overlay gradient */
.mfc-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.55) 35%,
      rgba(0,0,0,.18) 65%,
      rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Badges row */
.mfc-badges{
  position:absolute;
  left:10px;
  right:10px;
  bottom:60px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  z-index:2;
}
.mfc-badge{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 800;
  letter-spacing: .1px;
}

/* Titlebar */
.mfc-titlebar{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:2;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.mfc-title{
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Online/Offline badge */
.mfc-live-badge{
  position:absolute;
  top:10px; left:10px;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  z-index:5;
}
.mfc-live-badge--on{ box-shadow:0 0 0 1px rgba(40,255,120,.22) inset; }
.mfc-live-badge--off{ opacity:.85; }

.mfc-live-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}
.mfc-live-dot--on{ background:#33ff88; }
.mfc-live-dot--off{ background:#ff6b6b; }

/* Badge click button */
.mfc-live-badge-btn{
  appearance: none;
  -webkit-appearance: none;
  cursor:pointer;
}
.mfc-live-badge-btn:focus{
  outline:none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

/* Favorites button (support both JS classes: is-on / is-fav) */
.mfc-fav-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:6;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(10,14,22,.55);
  color:#fff;
  font-weight:900;
  line-height:32px;
  text-align:center;
  cursor:pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mfc-fav-btn:hover{ transform: scale(1.04); }
.mfc-fav-btn.is-on,
.mfc-fav-btn.is-fav{
  background: rgba(210,162,79,.18);
  border-color: rgba(210,162,79,.35);
  box-shadow: 0 0 0 1px rgba(210,162,79,.25) inset;
}
.mfc-fav-btn:focus{ outline:2px solid rgba(159,207,124,.30); outline-offset:2px; }

/* Video count badge (under star) */
.mfc-vidcount{
  position:absolute;
  top:50px;
  right:10px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.mfc-vidcount-ico{ line-height: 1; }
.mfc-vidcount-num{ line-height: 1; }

/* =========================================================
   FAVORITES PAGE PACK (merged from favorites.css) ✅
   - Uses your .fav-* markup
   - Styled to match American Woodland v2
========================================================= */

.fav-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.fav-stat{
  flex:0 0 auto;
  padding:10px 12px;
  border:1px solid rgba(232,227,212,.10);
  border-radius:12px;
  background: rgba(16,17,12,.45);
}
.fav-stat-n{
  font-size:20px;
  font-weight:900;
  line-height:1.1;
  color: var(--text);
}
.fav-stat-l{
  font-size:12px;
  opacity:.75;
  color: var(--text2);
}

.fav-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.fav-section-title{
  font-weight:900;
  letter-spacing:.2px;
  color: var(--text);
}
.fav-section-sub{
  font-size:12px;
  opacity:.75;
  color: var(--text2);
}

/* Card tile similar feel to models.php */
.fav-tile{
  display:block;
  text-decoration:none;
  color:inherit;
}
.fav-thumb{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border: 1px solid rgba(232,227,212,.10);
  background: #0f100b;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.fav-thumb img{
  width:100%;
  height:auto;
  display:block;
}
.fav-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.fav-titlebar{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.fav-title{
  font-weight:900;
  text-shadow: 0 4px 16px rgba(0,0,0,.7);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  color:#fff;
}

.fav-badges{
  position:absolute;
  left:10px;
  top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.fav-badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:#fff;
  font-weight:800;
}

/* Online badge */
.fav-live{
  position:absolute;
  top:10px;
  right:10px;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:#fff;
  font-weight:900;
}
.fav-live.on{ box-shadow:0 0 0 1px rgba(40,255,120,.25) inset; }
.fav-live.off{ opacity:.85; }

/* Remove X */
.fav-x{
  position:absolute;
  top:10px;
  left:10px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  user-select:none;
}
.fav-x:hover{ background: rgba(255,255,255,.10); }

/* Live open button */
.fav-live-open{
  position:absolute;
  bottom:10px;
  right:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  cursor:pointer;
}
.fav-live-open:hover{ background: rgba(255,255,255,.10); }