/* NoirPlay V28 — Theme Pack */

/* Shared theme picker */
.theme-picker{
  position:relative;
  flex:0 0 auto;
}
.theme-toggle{
  position:relative;
}
.theme-chevron{
  margin-left:1px;
  color:var(--muted-2);
  font-size:10px;
  line-height:1;
}
.theme-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 9px);
  z-index:280;
  width:260px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 20px 56px rgba(0,0,0,.30);
}
.theme-dropdown button{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:7px 8px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.theme-dropdown button:hover{
  background:var(--surface-2);
}
.theme-dropdown button.active{
  border-color:color-mix(in srgb,var(--red) 45%,var(--line) 55%);
  background:color-mix(in srgb,var(--red) 9%,var(--surface-2) 91%);
}
.theme-swatch{
  width:26px;
  height:26px;
  display:block;
  border:1px solid rgba(255,255,255,.13);
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.swatch-noir{background:linear-gradient(135deg,#111318 0 68%,#e50914 68%)}
.swatch-light{background:linear-gradient(135deg,#fff 0 68%,#e50914 68%);border-color:#d9dde3}
.swatch-hub{background:linear-gradient(135deg,#111 0 68%,#ff9900 68%)}
.swatch-xvideos{background:linear-gradient(135deg,#101014 0 68%,#d71920 68%)}
.swatch-xnxx{background:linear-gradient(135deg,#0c1424 0 56%,#2f6dff 56% 78%,#df2028 78%)}
.swatch-servi{background:linear-gradient(135deg,#16090d 0 68%,#ff2749 68%)}
.theme-option-copy{
  min-width:0;
}
.theme-option-copy b,
.theme-option-copy small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.theme-option-copy b{
  font-size:10px;
}
.theme-option-copy small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

/* Theme: Hub Orange — black + orange, inspired by Pornhub */
html[data-theme="hub"]{
  --red:#ff9900;
  --red-2:#ffad2f;
  --red-soft:rgba(255,153,0,.14);
  --bg:#050505;
  --bg-elev:#0b0b0b;
  --surface:#111111;
  --surface-2:#191919;
  --surface-3:#232323;
  --line:#303030;
  --line-soft:#242424;
  --text:#f5f5f5;
  --text-strong:#ffffff;
  --muted:#aaaaaa;
  --muted-2:#707070;
  --input:#0d0d0d;
  --header:rgba(5,5,5,.94);
  --card-hover:#1c1c1c;
}
html[data-theme="hub"] body{
  background:
    radial-gradient(circle at 50% -140px,rgba(255,153,0,.11),transparent 360px),
    #050505;
}
html[data-theme="hub"] .btn-red,
html[data-theme="hub"] .search button,
html[data-theme="hub"] .badge{
  color:#111!important;
  font-weight:900;
}
html[data-theme="hub"] .home-badge small{
  color:#ffc76c!important;
}
html[data-theme="hub"] .home-hero,
html[data-theme="hub"] .home-section,
html[data-theme="hub"] .home-catalog-panel{
  border-radius:14px!important;
}
html[data-theme="hub"] .video-thumb{
  border-radius:8px!important;
}

/* Theme: X Red — dark + strong red, inspired by XVideos */
html[data-theme="xvideos"]{
  --red:#d71920;
  --red-2:#ef2d34;
  --red-soft:rgba(215,25,32,.14);
  --bg:#09090b;
  --bg-elev:#0d0d10;
  --surface:#121215;
  --surface-2:#19191d;
  --surface-3:#222228;
  --line:#303037;
  --line-soft:#25252b;
  --text:#f4f4f5;
  --text-strong:#ffffff;
  --muted:#a1a1a7;
  --muted-2:#696970;
  --input:#0e0e11;
  --header:rgba(9,9,11,.95);
  --card-hover:#1d1d22;
}
html[data-theme="xvideos"] body{
  background:
    linear-gradient(180deg,rgba(215,25,32,.07),transparent 210px),
    #09090b;
}
html[data-theme="xvideos"] .home-hero,
html[data-theme="xvideos"] .home-section,
html[data-theme="xvideos"] .home-catalog-panel,
html[data-theme="xvideos"] .video-info-card,
html[data-theme="xvideos"] .comments-card{
  border-radius:8px!important;
}
html[data-theme="xvideos"] .video-thumb,
html[data-theme="xvideos"] .btn,
html[data-theme="xvideos"] .search,
html[data-theme="xvideos"] .source-button{
  border-radius:6px!important;
}

/* Theme: XN Blue — navy + blue with red secondary accent, inspired by XNXX */
html[data-theme="xnxx"]{
  --red:#2f6dff;
  --red-2:#5688ff;
  --red-soft:rgba(47,109,255,.15);
  --bg:#070b13;
  --bg-elev:#0a1020;
  --surface:#0e1626;
  --surface-2:#141f32;
  --surface-3:#1a2940;
  --line:#263a58;
  --line-soft:#1c2c45;
  --text:#eff5ff;
  --text-strong:#ffffff;
  --muted:#9aabc4;
  --muted-2:#60728d;
  --input:#0a1220;
  --header:rgba(7,11,19,.95);
  --card-hover:#162238;
}
html[data-theme="xnxx"] body{
  background:
    radial-gradient(circle at 48% -120px,rgba(47,109,255,.16),transparent 370px),
    #070b13;
}
html[data-theme="xnxx"] .badge,
html[data-theme="xnxx"] .live-dot,
html[data-theme="xnxx"] .status-dot{
  background:#df2028!important;
}
html[data-theme="xnxx"] .home-badge small{
  color:#ff8589!important;
  background:rgba(223,32,40,.12)!important;
}
html[data-theme="xnxx"] .video-card:hover .video-thumb{
  border-color:rgba(47,109,255,.42)!important;
}

/* Theme: Servi Red — burgundy black + vivid red, inspired by Serviporno */
html[data-theme="servi"]{
  --red:#f12745;
  --red-2:#ff4862;
  --red-soft:rgba(241,39,69,.16);
  --bg:#0b0709;
  --bg-elev:#10090c;
  --surface:#160d11;
  --surface-2:#201218;
  --surface-3:#2a1820;
  --line:#3b252d;
  --line-soft:#2c1c22;
  --text:#f8f0f3;
  --text-strong:#ffffff;
  --muted:#b39ba4;
  --muted-2:#765f68;
  --input:#10090c;
  --header:rgba(11,7,9,.95);
  --card-hover:#25151b;
}
html[data-theme="servi"] body{
  background:
    radial-gradient(circle at 50% -150px,rgba(241,39,69,.15),transparent 370px),
    linear-gradient(180deg,#0d080a,#0b0709);
}
html[data-theme="servi"] .home-hero{
  background:
    radial-gradient(circle at 85% 18%,rgba(241,39,69,.18),transparent 30%),
    linear-gradient(145deg,#1a0d12,#110a0d)!important;
}
html[data-theme="servi"] .btn-red{
  box-shadow:0 10px 24px rgba(241,39,69,.14);
}

/* Light picker correction */
html[data-theme="light"] .theme-dropdown{
  box-shadow:0 20px 48px rgba(25,35,50,.15);
}
html[data-theme="light"] .theme-swatch{
  border-color:#d4d9df;
}

/* Compact home hero refresh */
.home-hero{
  min-height:245px!important;
}
.home-hero-copy{
  padding-top:28px!important;
  padding-bottom:28px!important;
}
.home-hero h1{
  max-width:760px!important;
  font-size:clamp(32px,3.8vw,50px)!important;
}
.home-hero-actions{
  display:flex!important;
  gap:8px!important;
}
.home-secondary-action{
  min-height:46px!important;
  padding-inline:18px!important;
  border-radius:12px!important;
}
.home-hero-side{
  padding-top:18px!important;
  padding-bottom:18px!important;
}

/* Mobile theme picker */
@media(max-width:560px){
  .theme-label,
  .theme-chevron{
    display:none!important;
  }
  .theme-toggle{
    width:40px!important;
    min-width:40px!important;
    padding:7px!important;
    justify-content:center!important;
  }
  .theme-dropdown{
    position:fixed;
    left:8px;
    right:8px;
    top:calc(60px + env(safe-area-inset-top));
    width:auto;
    max-height:min(72vh,520px);
    overflow:auto;
    padding:8px;
    border-radius:14px;
  }
  .theme-dropdown button{
    min-height:52px;
  }
  .home-hero{
    min-height:0!important;
  }
  .home-hero-copy{
    padding-top:20px!important;
    padding-bottom:20px!important;
  }
  .home-hero h1{
    font-size:clamp(28px,9vw,36px)!important;
  }
  .home-hero-actions{
    display:grid!important;
    grid-template-columns:1fr;
  }
  .home-primary-action,
  .home-secondary-action{
    width:100%;
  }
}