/* phub-style.css
 * Pornhub-inspired dark skin for Kitties theme.
 * This file should load AFTER kitties.base.css.
 */

:root{
  --phub-accent:#ff9900;
  --phub-bg:#0f0f0f;
  --phub-fg:#eee;
  --phub-muted:#aaa;
}

/* =======================================================
   Mama's Kitties Theme - kitties.css
   Version: 1.0.6.a (DRAFT)
   Date: 2025-08-24
   Status: MERGED — 1.0.5.a baseline kept intact +
           subnav parity, specificity & spacing refinements
   Notes:
   - All 1.0.5.a sections preserved.
   - Subnav unified to match top navbar exactly.
   - Dropdowns tightened (even if subnav uses flat links today).
   ======================================================= */

/* ===== 1) Global ===== */
body {
  background-color: #181818;
  color: #e6e6e6;
  font-family: Arial, sans-serif;
}


/* ===== 2) Top Navbar ===== */
.navbar {
  background-color: #111 !important;
}

.navbar .nav-link {
  color: #ccc;
  font-size: 0.85rem;        /* from 1.0.5.a refinement */
  font-weight: 700;          /* bold like reference */
  text-transform: uppercase; /* match reference */
  padding: 0.5rem 0.75rem;   /* compact spacing */
  letter-spacing: 0.5px;     /* subtle separation */
}

.navbar .nav-link:hover {
  color: #ff9900;
}


/* Brand / Navbar title */
.navbar-brand {
  font-weight: bold;
  color: #ff9900 !important;
}

.navbar-brand:hover {
  color: #ffa733 !important;
}


/* ===== 3) Hero Header ===== */
.lk-hero {
  padding: 1.5rem;
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.lk-hero h1 {
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  margin: 0;
  letter-spacing: 0.5px;
  border-bottom: 3px solid #ff9900;
  display: inline-block;
  padding-bottom: 0.3rem;
}


/* ===== 4) Category Bar (Unified Hover + Active) ===== */
.lk-category-bar {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.5rem;
}

.lk-cat {
  position: relative;
  color: #aaa;
  text-decoration: none;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  border: 1px solid transparent;
}

.lk-cat:hover {
  background: rgba(255,153,0,0.15);
  color: #ff9900;
}

.lk-cat.active {
  background: #ff9900;
  color: #111;
  font-weight: 600;
  border: 1px solid #ff9900;
  box-shadow: 0 2px 10px rgba(255,153,0,0.25);
}

.lk-cat.active:hover {
  background: rgba(255,153,0,0.15);
  color: #ff9900;
  border: 1px solid #ffa733;
}

.lk-card {
  background: #1a1a1a;
  border-radius: 6px;
  overflow: hidden;
  padding: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.lk-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; transition: opacity 0.3s ease; z-index: 1;
}

.lk-thumb::after {
  content: "";
  position: absolute; bottom: 0; left: 0;
  height: 4px; width: 0;
  background: #ff9900;
  transition: width 0.3s ease; z-index: 2;
}

.lk-duration {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.8); color: #fff;
  font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; z-index: 3;
}

.lk-title {
  font-size: 0.9rem; font-weight: 600;
  margin-top: 6px; margin-bottom: 2px;
  color: #f1f1f1; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.lk-title:hover { color: #ff9900; cursor: pointer; }

.lk-meta { font-size: 0.75rem; color: #aaa; margin: 0; }


/* ===== 6) Footer ===== */
.footer { background: #111; color: #888; padding: 1rem 0; }

.footer small { color: #666; }

.k-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1040;
}


/* Under-navbar sidebar placement + width var */
#sidebarMenu {
  position: fixed;
  top: var(--navbar-height, 56px);
  left: -260px;
  width: var(--sidebar-width, 260px);
  height: calc(100vh - var(--navbar-height, 56px));
  background: #111;
  border-right: 1px solid #333;
  z-index: 1051;
  transition: left 0.25s ease, width 0.25s ease;
  overflow-y: auto;
}


#sidebarBackdrop {
  position: fixed;
  top: var(--navbar-height, 56px);
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1050;
}


#sidebarMenu .nav-link {
  color: #ccc; padding: 0.5rem 1rem; border-radius: 4px; white-space: nowrap;
}

#sidebarMenu .nav-link:hover {
  background: rgba(255,153,0,0.15);
  color: #ff9900;
}


/* Hamburger */
.k-burger { color: inherit; font-size: 1.25rem; }


/* Sidebar refinement block (kept intact) */
.sidebar {
  background: #111; color: #ccc; padding: 1rem;
}

.sidebar h6 {
  font-size: 0.75rem; text-transform: uppercase;
  color: #ff9900; margin-bottom: 0.5rem;
}

.sidebar .nav-link {
  color: #bbb; padding: 0.25rem 0.5rem; border-radius: 4px;
}

.sidebar .nav-link:hover {
  background: rgba(255,153,0,0.1); color: #ff9900;
}


/* ===== 8) Forms in Navbar ===== */
.navbar .form-control {
  background: #222 !important; color: #fff !important;
}

.navbar .form-control::placeholder { color: #888; }

.navbar .btn-outline-light {
  border-color: #666; color: #ccc;
}

.navbar .btn-outline-light:hover {
  background: #ff9900; color: #111;
}

.usmsg {
  background: #222; border: 1px solid #444; color: #eee;
  padding: 0.5rem 1rem; border-radius: 6px;
}


/* ===== 10) Utilities ===== */
.text-orange { color: #ff9900 !important; }

.text-orange:hover { color: #ffa733 !important; }


.bg-orange { background-color: #ff9900 !important; color: #111 !important; }

.bg-orange:hover { background-color: #ffa733 !important; color: #111 !important; }


.border-orange { border: 1px solid #ff9900 !important; }

.border-orange:hover { border-color: #ffa733 !important; }


.btn-orange {
  background-color: #ff9900; color: #111;
  border: 1px solid #ff9900; border-radius: 4px; font-weight: 600;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-orange:hover, .btn-orange:focus {
  background-color: #ffa733; border-color: #ffa733; color: #111;
}

.btn-orange:active {
  background-color: #e68a00; border-color: #e68a00; color: #111;
}


/* ===== 11) Subnav — Unified with Main Navbar ===== */
nav.lk-subnav.navbar {
  background-color: #111 !important;      /* match top navbar */
  border-bottom: 1px solid #222 !important;
  margin: 0; padding: 0;
  min-height: var(--navbar-height, 56px);
}

nav.lk-subnav.navbar .nav-link {
  color: #ccc !important;
  font-weight: 700;
  font-size: 0.70rem;                      /* per your change */
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.45rem 0.75rem;                /* reduced height */
  margin: 0 0.1rem;                        /* tighten gaps */
  border-radius: 4px;
  border: none !important;
  text-decoration: none !important;        /* kill underline */
  transition: background 0.25s ease, color 0.25s ease;
}

nav.lk-subnav.navbar .nav-link:hover,
nav.lk-subnav.navbar .nav-link:focus {
  background-color: #222 !important;
  color: #ff9900 !important;
}

nav.lk-subnav.navbar .nav-link.active {
  background-color: #ff9900 !important;
  color: #111 !important;
}


/* ===== 12) Dropdowns ===== */
.lk-subnav .dropdown-menu,
.navbar .dropdown-menu {
  background: #181818;
  border: 1px solid #333;
  border-radius: 4px;
  margin-top: 0.25rem;
  padding: 0.25rem 0;
  min-width: 10rem;
}

.lk-subnav .dropdown-item,
.navbar .dropdown-item {
  font-size: 0.70rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #ccc;
  padding: 0.4rem 0.75rem;
  letter-spacing: 0.4px;
}

.lk-subnav .dropdown-item:hover,
.navbar .dropdown-item:hover {
  background: rgba(255,153,0,0.15);
  color: #ff9900;
}

/* === Subnav Hover Preview Bar (append-only) === */






/* chips & overlays */
.k-chip{display:inline-flex;align-items:center;gap:.4ch;font-size:.75rem;padding:.15rem .5rem;border-radius:999px;background:#1e1e1e;color:#ddd;border:1px solid #2a2a2a}
.k-chip-badge{border-color:#444;background:#141414}

.k-card{background:#181818;border:1px solid #242424;border-radius:12px;overflow:hidden;transition:transform .1s ease, box-shadow .1s ease}
.k-card:hover{transform:translateY(-2px);box-shadow:0 10px 18px rgba(0,0,0,.55)}
.k-card .k-title{font-weight:600;padding:10px 12px}
.k-card .k-title a{color:#eee;text-decoration:none}
.k-card .k-title a:hover{color:var(--phub-accent)}
.k-card .k-meta{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 12px;color:#aaa}

.k-thumb{position:relative;display:block;aspect-ratio:16/9;background:#0c0c0c}
.k-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.k-thumb .k-time{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;font-size:.75rem;padding:.15rem .4rem;border-radius:6px;border:1px solid rgba(255,255,255,.1)}
.k-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.k-search{flex:1;display:flex}

/* --- Search input: orange outline (unified) --- */
.k-search-input.form-control{
  border: 2px solid var(--phub-accent) !important; /* always orange */
  border-radius: 6px;
  background-color: #1a1a1a;
  color: #fff;
}
.k-search-input.form-control::placeholder{
  color: var(--phub-muted, #bbb);
  opacity: .8;
}
.k-search-input.form-control:hover{
  border-color: var(--phub-accent) !important;
}
.k-search-input.form-control:focus{
  border-color: #ffa64d !important; /* lighter orange */
  box-shadow: 0 0 0 0.2rem rgba(255,153,0,.35) !important; /* orange glow */
  outline: 0;
}
/* =======================================================
   Accent Unification — Alerts, Pagination, Progress
   ======================================================= */

/* ---------- Alerts (dark-friendly) ---------- */
.alert {
  background-color: #1a1a1a;
  color: #eee;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
}

/* Orange / "primary" alert mapped to accent */
.alert-primary {
  --bs-alert-color: #111;                         /* text inside colored pills, badges */
  --bs-alert-bg: rgba(255,153,0,0.12);            /* subtle orange fill */
  --bs-alert-border-color: rgba(255,153,0,0.35);  /* orange border */
  background-color: var(--bs-alert-bg) !important;
  border-color: var(--bs-alert-border-color) !important;
  color: #ffdca3;                                  /* readable warm text */
}
.alert-primary .alert-link {
  color: var(--phub-accent-400) !important;
}

/* Status-like helpers (optional, keeps dark look consistent) */
.alert-success { background:#132019; border-color:#21452c; color:#c8f0d6; }
.alert-danger  { background:#221314; border-color:#4a2528; color:#f2c3c6; }
.alert-warning { background:#241d12; border-color:#4b3a1f; color:#f2dfba; }
.alert-info    { background:#121d22; border-color:#24414a; color:#bfe8f5; }

/* ---------- Pagination ---------- */
.pagination { --k-pg-bg: #1a1a1a; --k-pg-bd: #2a2a2a; }

.page-item .page-link {
  background: var(--k-pg-bg);
  color: var(--phub-accent);
  border: 1px solid var(--k-pg-bd);
  border-radius: 6px;
}
.page-item .page-link:hover {
  background: var(--phub-accent);
  color: #111;
  border-color: var(--phub-accent);
}
.page-item .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(255,153,0,.25);
  outline: 0;
}
.page-item.active .page-link {
  background: var(--phub-accent) !important;
  color: #111 !important;
  border-color: var(--phub-accent) !important;
}
.page-item.disabled .page-link {
  color: #666;
  background: #151515;
  border-color: #2a2a2a;
}

/* ---------- Progress Bars ---------- */
.progress {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  height: 0.75rem;             /* a bit sleeker */
}
.progress-bar {
  background-color: var(--phub-accent);
}
.progress-bar.bg-success { background-color:#2ecc71 !important; }
.progress-bar.bg-info    { background-color:#3498db !important; }
.progress-bar.bg-warning { background-color:#f1c40f !important; color:#111; }
.progress-bar.bg-danger  { background-color:#e74c3c !important; }
#lkPreview { transition: opacity .15s ease; }
#lkPreview iframe { display:block; width:100%; height:65vh; border:0; background:#111; }
#lkPreview .btn-group .btn { border-radius: 6px; }

/* --- MK Subnav Preview (canonical) --- */
:root { --navbar-height:56px; --subnav-height:48px; } /* define once */

.lk-subnav-preview { 
  position: relative; 
  width: 100%; 
  transition: opacity .15s ease;
}

.lk-subnav-preview iframe{
  display: block; 
  width: 100%;
  height: calc(100vh - var(--navbar-height) - var(--subnav-height));
  border: 0; 
  background: #111;
}

/* Hover overlay must not change spacing vs page */
.lk-subnav-preview,
.lk-subnav-peek { 
  background: transparent !important; 
  border: 0 !important; 
  padding: 0 !important; 
}

.lk-subnav-peek-content.k-peek-reset { 
  display: block; 
  padding: 0 !important; 
  margin: 0 !important; 
  background: transparent !important; 
}

.lk-subnav-peek-content .container,
.lk-subnav-peek-content .container-fluid {
  max-width: none !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.lk-subnav-peek-content #content { margin: 0 !important; }