/*
Theme Name: GoodBro98
Theme URI: https://goodbro98.com
Description: Premium dark video blog theme for GoodBro98
Version: 1.0
Author: GoodBro98
Author URI: https://goodbro98.com
Text Domain: goodbro98
*/

*{margin:0;padding:0;box-sizing:border-box;font-family:'Georgia',serif}
html{scroll-behavior:smooth}
body{background:#0a0a0a;color:#fff;min-height:100vh}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}

/* ── HEADER ── */
.site-header{background:#0a0a0a;padding:18px 16px 12px;border-bottom:1px solid #c9a84c33;text-align:center;position:relative;z-index:1}
.site-logo img{width:clamp(180px,55vw,300px);height:auto;display:block;margin:0 auto}
.tagline{font-size:9px;letter-spacing:5px;color:#c9a84c88;text-transform:uppercase;margin-top:6px}
.header-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,#c9a84c,transparent);margin:10px auto}
.search-wrap{margin:12px auto 0;max-width:600px;background:#141414;border:1px solid #c9a84c33;border-radius:4px;padding:9px 16px;display:flex;align-items:center;gap:10px}
.search-wrap input{background:none;border:none;outline:none;color:#ddd;font-size:13px;width:100%;letter-spacing:.5px}
.search-wrap input::placeholder{color:#444}
.search-icon{color:#c9a84c;font-size:15px}

/* ── TOPBAR (single) ── */
.topbar{background:#0a0a0a;padding:10px 16px;border-bottom:1px solid #c9a84c22;display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.back-btn{width:34px;height:34px;border-radius:50%;border:1px solid #c9a84c44;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:#c9a84c}
.back-btn svg{width:16px;height:16px;fill:#c9a84c}
.topbar-logo img{height:36px;width:auto}

/* ── TELEGRAM BANNER ── */
.tg-banner{margin:14px 16px 0;background:#141414;border:1px solid #229ed933;border-radius:6px;padding:13px 16px;display:flex;align-items:center;gap:12px;cursor:pointer}
.tg-icon{width:38px;height:38px;background:#229ed9;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tg-icon svg{width:20px;height:20px;fill:#fff}
.tg-text p{font-size:13px;font-weight:700;color:#fff;letter-spacing:.5px}
.tg-text span{font-size:10px;color:#555;letter-spacing:.5px}
.tg-arrow{margin-left:auto;color:#229ed9;font-size:20px}

/* ── CATEGORY TABS ── */
.cats{display:flex;gap:6px;padding:14px 16px;overflow-x:auto;scrollbar-width:none;max-width:1200px;margin:0 auto}
.cats::-webkit-scrollbar{display:none}
.cat-link{padding:6px 16px;border-radius:2px;font-size:11px;white-space:nowrap;cursor:pointer;background:#141414;color:#888;border:1px solid #2a2a2a;letter-spacing:1px;text-transform:uppercase;transition:all .2s}
.cat-link:hover,.cat-link.active{background:#c9a84c11;color:#c9a84c;border-color:#c9a84c66}

/* ── SECTION HEADER ── */
.section-head{padding:16px 16px 10px;display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto}
.section-head h2{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c}
.section-head a{font-size:10px;color:#555;letter-spacing:1px}

/* ── FEATURED ── */
.featured-wrap{margin:0 16px 16px;max-width:1168px;margin-left:auto;margin-right:auto}
.featured{border-radius:6px;overflow:hidden;position:relative;cursor:pointer;border:1px solid #c9a84c22;display:block}
.feat-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#1a1500,#2a1f00);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.feat-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feat-emoji{font-size:52px;opacity:.35}
.feat-overlay{position:absolute;inset:0;background:linear-gradient(to top,#000000f0 45%,transparent 100%)}
.feat-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:2px solid #c9a84c;display:flex;align-items:center;justify-content:center;background:#c9a84c18}
.feat-play svg{width:22px;height:22px;fill:#c9a84c;margin-left:3px}
.feat-info{position:absolute;bottom:0;left:0;right:0;padding:14px}
.feat-badge{display:inline-block;background:#c9a84c;color:#000;font-size:9px;font-weight:700;padding:2px 8px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.hd-badge{display:inline-block;background:#1a6ecc;color:#fff;font-size:9px;font-weight:700;padding:2px 8px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;margin-left:4px}
.feat-title{font-size:15px;font-weight:600;line-height:1.4;color:#fff}
.feat-meta{font-size:11px;color:#c9a84c88;margin-top:5px;letter-spacing:.5px}

/* ── VIDEO GRID ── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px;max-width:1200px;margin:0 auto}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(5,1fr)}}
.card{background:#111;border-radius:6px;overflow:hidden;cursor:pointer;border:1px solid #1e1e1e;transition:border-color .25s;display:block}
.card:hover{border-color:#c9a84c55}
.thumb{aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(160deg,#0f0f1a,#1a1030)}
.thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.thumb-emoji{font-size:36px;opacity:.28}
.play-sm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play-sm svg{width:34px;height:34px;fill:#c9a84c;opacity:.9}
.card-dur{position:absolute;bottom:7px;right:7px;background:#000000cc;color:#c9a84c;font-size:9px;padding:2px 7px;border-radius:2px;letter-spacing:.5px;font-weight:600}
.card-badge{position:absolute;top:7px;left:7px;background:#c9a84c;color:#000;font-size:8px;font-weight:700;padding:2px 7px;letter-spacing:.5px;text-transform:uppercase}
.card-hd{position:absolute;top:7px;right:7px;background:#1a6ecc;color:#fff;font-size:8px;font-weight:700;padding:2px 6px;letter-spacing:.5px;text-transform:uppercase}
.card-body{padding:9px 10px 11px}
.card-title{font-size:11px;font-weight:600;color:#ddd;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:.2px}
.card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.card-views{font-size:9px;color:#555;letter-spacing:.5px}
.card-date{font-size:9px;color:#444}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:24px 16px 18px;flex-wrap:wrap}
.pg{width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;border:1px solid #2a2a2a;background:#141414;color:#777;letter-spacing:.5px}
.pg.current,.pg:hover{background:#c9a84c11;border-color:#c9a84c66;color:#c9a84c;font-weight:700}
.pg-next,.pg-prev{width:auto;padding:0 14px;color:#c9a84c;border-color:#c9a84c44;background:#c9a84c0a;font-size:11px;letter-spacing:1px;text-transform:uppercase}

/* ── MEMBERSHIP CARD ── */
.promo-wrap{margin:4px 16px 18px;border-radius:6px;overflow:hidden;border:1px solid #c9a84c33;display:block;max-width:1168px;margin-left:auto;margin-right:auto}
.promo-inner{background:linear-gradient(135deg,#1a1200,#2a1f00,#111);padding:22px 20px;text-align:center;position:relative}
.promo-top{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c88;margin-bottom:8px}
.promo-title{font-size:22px;font-weight:700;color:#c9a84c;letter-spacing:1px;line-height:1.2;margin-bottom:6px}
.promo-sub{font-size:11px;color:#888;letter-spacing:.5px;margin-bottom:16px;line-height:1.6}
.promo-btn{display:inline-block;background:#c9a84c;color:#000;font-size:11px;font-weight:700;padding:8px 22px;border-radius:2px;letter-spacing:2px;text-transform:uppercase}
.promo-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,#c9a84c,transparent)}

/* ── FOOTER ── */
.site-footer{background:#0a0a0a;border-top:1px solid #c9a84c11;padding:20px 16px 90px;text-align:center}
.footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:10px;flex-wrap:wrap}
.footer-links a{font-size:10px;color:#555;letter-spacing:1px;text-transform:uppercase}
.footer-copy{font-size:10px;color:#333;letter-spacing:.5px}
.footer-copy span{color:#c9a84c44}

/* ── BOTTOM NAV ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#0a0a0a;border-top:1px solid #c9a84c22;display:flex;justify-content:center;padding:10px 0 14px;z-index:99}
.bn{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:#444;font-size:9px;letter-spacing:1px;text-transform:uppercase}
.bn.active,.bn:hover{color:#c9a84c}
.bn svg{width:18px;height:18px}

/* ── PLAYER PAGE ── */
.player-wrap{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden}
.player-iframe{width:100%;height:100%;border:none}
.player-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#1a1500,#2a1f00,#111);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;position:absolute;inset:0}
.big-play{width:68px;height:68px;border-radius:50%;border:2px solid #c9a84c;display:flex;align-items:center;justify-content:center;background:#c9a84c18}
.big-play svg{width:28px;height:28px;fill:#c9a84c;margin-left:4px}
.player-label{font-size:11px;color:#c9a84c88;letter-spacing:3px;text-transform:uppercase}
.lulu-badge{position:absolute;top:10px;right:10px;background:#c9a84c;color:#000;font-size:8px;font-weight:700;padding:3px 8px;letter-spacing:1px;text-transform:uppercase;border-radius:2px;z-index:5}
.video-info{padding:16px;max-width:800px}
.v-category{font-size:9px;color:#c9a84c;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
.v-title{font-size:17px;font-weight:700;line-height:1.4;color:#fff;letter-spacing:.3px}
.v-divider{width:100%;height:1px;background:linear-gradient(90deg,#c9a84c44,transparent);margin:12px 0}
.v-meta{display:flex;align-items:center}
.v-meta-item{display:flex;flex-direction:column;align-items:center;flex:1;gap:2px}
.v-meta-item+.v-meta-item{border-left:1px solid #1e1e1e}
.v-meta-val{font-size:13px;font-weight:600;color:#fff}
.v-meta-key{font-size:9px;color:#555;letter-spacing:1px;text-transform:uppercase}

/* ── ACTION BUTTONS ── */
.action-btns{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 16px 4px;max-width:400px;margin:0 auto}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#1a1200,#2a1f00,#1a1200);border:1px solid #c9a84c;color:#c9a84c;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:11px 24px;border-radius:3px;cursor:pointer;width:100%;animation:glow 2.5s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 14px #c9a84c44,inset 0 0 14px #c9a84c08}50%{box-shadow:0 0 24px #c9a84c77,inset 0 0 22px #c9a84c14}}
.dmca-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,#1a0000,#2a0500,#1a0000);border:1px solid #c0392b44;color:#c0392b;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:9px 22px;border-radius:3px;width:100%}

/* ── DESCRIPTION / TAGS ── */
.desc-wrap{padding:16px 16px 10px;max-width:800px}
.desc-label{font-size:9px;color:#c9a84c;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.desc-text{font-size:12px;color:#777;line-height:1.8;letter-spacing:.3px}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 16px}
.tag{background:#141414;border:1px solid #c9a84c22;color:#c9a84c88;font-size:9px;padding:4px 10px;border-radius:2px;letter-spacing:1px;text-transform:uppercase}

/* ── RELATED VIDEOS ── */
.related-label{padding:14px 16px 10px;display:flex;align-items:center;justify-content:space-between}
.related-label h2{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c}
.rel-list{display:flex;flex-direction:column;gap:10px;padding:0 16px 90px}
.rel-card{display:flex;gap:10px;cursor:pointer;align-items:flex-start;border-radius:4px;transition:background .2s;padding:4px;margin:-4px}
.rel-card:hover{background:#141414}
.rel-thumb{width:110px;flex-shrink:0;aspect-ratio:9/14;border-radius:4px;overflow:hidden;position:relative;border:1px solid #c9a84c11}
.rel-thumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0f0f1a,#1a1030)}
.rel-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.rel-emoji{font-size:22px;opacity:.3}
.rel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.rel-play svg{width:24px;height:24px;fill:#c9a84c;opacity:.85}
.rel-dur{position:absolute;bottom:4px;right:4px;background:#000000cc;color:#c9a84c;font-size:8px;padding:2px 5px;border-radius:2px;letter-spacing:.5px}
.rel-info{flex:1;padding-top:2px}
.rel-cat{font-size:8px;color:#c9a84c88;letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.rel-title{font-size:12px;font-weight:600;color:#ddd;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rel-meta{font-size:9px;color:#555;margin-top:6px;letter-spacing:.5px}

/* ── DESKTOP LAYOUT ── */
@media(min-width:960px){
  .site-header{padding:18px 40px 14px}
  .tg-banner{max-width:1168px;margin-left:auto;margin-right:auto}
  .featured-wrap{margin:0 auto 16px;padding:0 40px}
  .grid{padding:0 40px}
  .section-head{padding:16px 40px 10px}
  .cats{padding:14px 40px}
  .player-wrap{max-width:960px;margin:0 auto}
  .video-info{max-width:960px;margin:0 auto;padding:16px 24px}
  .action-btns{max-width:480px}
  .desc-wrap{max-width:960px;margin:0 auto;padding:16px 24px}
  .tags{max-width:960px;margin:0 auto;padding:0 24px 16px}
  .related-label{max-width:960px;margin:0 auto;padding:14px 24px 10px}
  .rel-list{max-width:960px;margin:0 auto;padding:0 24px 90px}
  .promo-wrap{margin:4px 40px 18px}
  .site-footer{padding:20px 40px 90px}
}

/* ── NO RESULTS ── */
.no-posts{text-align:center;padding:60px 20px;color:#444;font-size:13px;letter-spacing:1px}

/* ═══════════════════════════════════════════════════════════
   CROSS-PLATFORM ALIGNMENT — iOS · Android · Desktop
   ═══════════════════════════════════════════════════════════ */

/* iOS safe areas (notch, home bar) */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* Prevent iOS font size auto-boost */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Smooth momentum scrolling on iOS */
body { -webkit-overflow-scrolling: touch; overflow-x: hidden; }

/* Fix tap highlight on iOS/Android */
a, button, .card, .cat-link, .pg, .tg-banner, .bn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Fix 300ms click delay on older Android */
* { touch-action: manipulation; }

/* Bottom nav — push up above iOS home indicator */
.bottom-nav {
  padding-bottom: calc(14px + var(--safe-bottom));
}

/* Site header — normal scroll, no sticky */
.site-header {
  padding-top: 18px;
}

/* Topbar (single page) — normal scroll */
.topbar {
  padding-top: 10px;
}

/* Footer — above home indicator */
.site-footer {
  padding-bottom: calc(90px + var(--safe-bottom));
}

/* Prevent horizontal scroll on all screens */
.cats, .grid, .rel-list, .pagination { max-width: 100vw; }
img { display: block; }

/* Player portrait mode (9:16 content, use 3:4 ratio) */
.player-portrait { aspect-ratio: 3/4 !important; }
.player-portrait .player-placeholder,
.player-portrait .player-iframe { aspect-ratio: 3/4; }

/* Player thumbnail background image */
.player-thumb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.player-thumb-overlay {
  position: absolute;
  inset: 0;
  background: #00000066;
  z-index: 1;
}
.player-placeholder .big-play,
.player-placeholder .player-label { position: relative; z-index: 2; }

/* ── SHOW MORE BUTTON — Premium style ── */
.desc-text { position: relative; }
.desc-inner { transition: max-height .4s ease; }
.desc-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50px;
  background: linear-gradient(to top, #0a0a0a 60%, transparent);
  pointer-events: none;
}
.show-more-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #c9a84c33;
  color: #c9a84c;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 12px;
  transition: border-color .2s, background .2s;
  font-family: 'Georgia', serif;
}
.show-more-btn:hover { background: #c9a84c11; border-color: #c9a84c66; }
.smb-icon { width: 14px; height: 14px; stroke: #c9a84c; }

/* ── TAGS SEO ONLY — hidden from display ── */
.tags-seo { display: none; visibility: hidden; height: 0; overflow: hidden; }

/* ── PAGINATION — clean, no bullets ── */
.pagination ul { list-style: none; display: contents; }
.pagination li { display: contents; }
.pg.dots { border: none; background: none; color: #444; cursor: default; font-size: 14px; }
.pg.pg-prev, .pg.pg-next {
  width: auto;
  padding: 0 14px;
  color: #c9a84c;
  border-color: #c9a84c44;
  background: #c9a84c0a;
  font-size: 11px;
  letter-spacing: 1px;
}

/* ── DESKTOP CENTERING FIXES ── */
@media (min-width: 960px) {
  .tg-banner { max-width: 1168px; margin-left: auto; margin-right: auto; margin-top: 14px; }
  .pagination { max-width: 1200px; margin: 0 auto; }
  .promo-wrap { max-width: 1168px; margin: 4px auto 18px; }
  .video-info, .action-btns, .desc-wrap, .tags-seo,
  .related-label, .rel-list { max-width: 960px; margin-left: auto; margin-right: auto; }
}

/* ── MOBILE (≤480px) tweaks ── */
@media (max-width: 480px) {
  .feat-title { font-size: 13px; }
  .card-title { font-size: 10px; }
  .v-title { font-size: 15px; }
  .dl-btn { font-size: 10px; padding: 11px 16px; }
  .grid { gap: 8px; padding: 0 10px; }
  .pagination { gap: 4px; }
  .pg { width: 32px; height: 32px; font-size: 11px; }
}

/* ── TABLET (641–959px) ── */
@media (min-width: 641px) and (max-width: 959px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   V3 FIX — Kill ALL sticky/fixed on header, force normal flow
   Works on iOS Safari, Android Chrome, Desktop all browsers
   ═══════════════════════════════════════════════════════════ */

/* Nuclear override — nothing in header sticks */
.site-header,
.site-header *,
.topbar,
.topbar * {
  position: static !important;
}

/* Re-apply only what header elements need */
.site-logo { display: block; }
.search-wrap { display: flex; position: static !important; }
.back-btn {
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #c9a84c44;
  flex-shrink: 0;
}
.topbar { display: flex !important; align-items: center !important; }

/* WordPress admin bar fix — prevent it from pushing/sticking content */
#wpadminbar {
  position: absolute !important;
}
html.wp-toolbar {
  padding-top: 0 !important;
}
body.admin-bar .site-header,
body.admin-bar .topbar {
  top: auto !important;
  margin-top: 0 !important;
}
/* Remove WordPress body top margin from admin bar */
body.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure body itself never gets transform/overflow that breaks scroll */
html, body {
  position: static !important;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto !important;
  transform: none !important;
}

/* Only bottom-nav stays fixed — everything else scrolls */
.bottom-nav {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* ── RELATED PAGINATION ─────────────────────────────────────── */
.rel-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 16px 4px;margin-bottom:4px;max-width:960px;margin-left:auto;margin-right:auto}
.rel-page-btn{display:inline-flex;align-items:center;padding:8px 20px;background:#141414;border:1px solid #c9a84c55;color:#c9a84c;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:background .2s,border-color .2s}
.rel-page-btn:hover{background:#c9a84c11;border-color:#c9a84c;color:#c9a84c}
.rel-page-btn.disabled{color:#444;border-color:#2a2a2a;pointer-events:none;cursor:default}
.rel-page-info{font-size:10px;color:#555;letter-spacing:1px;text-transform:uppercase}