/* ─── HERO LOGO — Tor/no-clamp safe sizing ─── */
.hero-title {
  font-size: 4rem; /* static fallback in case clamp() fails elsewhere */
}

.hero-logo {
  width: 50%;
  max-width: 480px;
  min-width: 180px;
}

.hero-logo img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  .hero-logo {
    width: 75%;
    max-width: 300px;
  }
}



/* =============================================
   XMRVideos RED — No-JS / PHP client extras
   ============================================= */

/* ─── ACTIVATION BAR ─── */
.activation-bar {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 8000;
  background: rgba(12, 12, 12, 0.97);
  border: 1px solid #222;
  border-radius: 12px;
  padding: 0.875rem 1.1rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
  min-width: 220px;
}

.activation-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.activation-input {
  flex: 1;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  color: #e0e0e0;
  font-family: monospace;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  outline: none;
  min-width: 0;
}

.activation-input::placeholder {
  color: #444;
}

.activation-submit {
  background: #1a0a0a;
  border: 1px solid var(--red);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  color: var(--red);
  font-family: monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.activation-submit:hover {
  background: rgba(204, 0, 0, 0.15);
}

.activation-active {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: #4ade80;
  font-family: monospace;
  letter-spacing: 0.05em;
}

.activation-active strong {
  color: #4ade80;
}

.activation-deactivate {
  background: transparent;
  border: none;
  color: var(--white-muted);
  font-size: 0.72rem;
  font-family: monospace;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 0.25rem;
  transition: color 0.15s;
}

.activation-deactivate:hover {
  color: var(--white);
}

/* ─── MODAL used as page-centered card ─── */
.modal-title-wrap {
  flex: 1;
}

/* ─── STEP HINT ─── */
.step-hint {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0;
  font-family: monospace;
}

/* ─── USER-SELECT ALL for addresses ─── */
.invoice-field-value {
  user-select: all;
  -webkit-user-select: all;
}

/* ─── BACK LINK ─── */
.back-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--white-muted);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.15s;
}

.back-link:hover {
  color: var(--white);
}

/* ─── VIDEO CARD LINK WRAPPER ─── */
.video-card a.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ─── BUTTON AS LINK ─── */
a.btn-primary,
a.btn-download {
  display: inline-flex;
  text-decoration: none;
  text-align: center;
  justify-content: center;
}

/* ─── REFRESH NOTICE ─── */
.refresh-notice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--white-muted);
  font-family: monospace;
  margin-top: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--black-3);
  border: var(--border);
  border-radius: var(--radius);
}

/* ─── NOSCRIPT NOTICE (shown only if somehow JS is available but we want to surface info) ─── */
.noscript-note {
  font-size: 0.75rem;
  color: #555;
  font-family: monospace;
  text-align: center;
  margin-top: 2rem;
}

/* =============================================
   SOURCE SELECTOR — checkbox hack, zero JS
   ============================================= */

/* Hide the actual radio inputs */
.src-radio {
  display: none;
}

/* ─── SOURCE SELECTOR LAYOUT ─── */
.source-selector {
  margin-bottom: 2rem;
}

.source-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--white-muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.source-options {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── SOURCE BUTTON BASE ─── */
.src-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  background: var(--black-2);
  border: 1px solid #2a2a2a;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, opacity 0.2s;
  opacity: 0.45;
  min-width: 110px;
}

.src-btn:hover {
  border-color: #444;
  opacity: 0.75;
}

.src-logo {
  height: 28px;
  width: auto;
  display: block;
  mix-blend-mode: screen;
}

/* ─── ACTIVE BUTTON — red glow for xv and ph ─── */
#src-xv:checked ~ .main .source-options .src-btn:nth-child(1),
#src-ph:checked ~ .main .source-options .src-btn:nth-child(3) {
  border-color: var(--red);
  background: rgba(204, 0, 0, 0.1);
  box-shadow: var(--glow-red);
  opacity: 1;
}

/* ─── ACTIVE BUTTON — gold glow for xnxx ─── */
#src-xn:checked ~ .main .source-options .src-btn:nth-child(2) {
  border-color: #d4a017;
  background: rgba(212, 160, 23, 0.1);
  box-shadow: 0 0 20px rgba(212, 160, 23, 0.3);
  opacity: 1;
}

/* ─── HERO LOGO SWAP ─── */
/* Use .hero-logo img.site-logo--gold to match specificity of app.css rule */
.hero-logo img.site-logo--gold    { display: none; }
.hero-logo img.site-logo--premium { display: none; }
.hero-logo img.site-logo--default { display: block; }

/* xnxx: swap hero logo */
#src-xn:checked ~ .main .hero-logo img.site-logo--default { display: none; }
#src-xn:checked ~ .main .hero-logo img.site-logo--gold    { display: block; }
#src-xn:checked ~ .main .hero-logo img.site-logo--premium { display: none; }

/* ph: swap hero logo */
#src-ph:checked ~ .main .hero-logo img.site-logo--default { display: none; }
#src-ph:checked ~ .main .hero-logo img.site-logo--premium { display: block; }
#src-ph:checked ~ .main .hero-logo img.site-logo--gold    { display: none; }

/* xv: enforce default */
#src-xv:checked ~ .main .hero-logo img.site-logo--default { display: block; }
#src-xv:checked ~ .main .hero-logo img.site-logo--gold    { display: none; }
#src-xv:checked ~ .main .hero-logo img.site-logo--premium { display: none; }

/* ─── HEADER LOGO SWAP ─── */
.header-logo img.header-logo--gold    { display: none; }
.header-logo img.header-logo--premium { display: none; }
.header-logo img.header-logo--default { display: block; }

/* xnxx: swap header logo */
#src-xn:checked ~ .header .header-logo img.header-logo--default { display: none; }
#src-xn:checked ~ .header .header-logo img.header-logo--gold    { display: block; }
#src-xn:checked ~ .header .header-logo img.header-logo--premium { display: none; }

/* ph: swap header logo */
#src-ph:checked ~ .header .header-logo img.header-logo--default { display: none; }
#src-ph:checked ~ .header .header-logo img.header-logo--premium { display: block; }
#src-ph:checked ~ .header .header-logo img.header-logo--gold    { display: none; }

/* xv: enforce default */
#src-xv:checked ~ .header .header-logo img.header-logo--default { display: block; }
#src-xv:checked ~ .header .header-logo img.header-logo--gold    { display: none; }
#src-xv:checked ~ .header .header-logo img.header-logo--premium { display: none; }

/* ─── FOOTER LOGO SWAP ─── */
.footer-logo--gold    { display: none; }
.footer-logo--premium { display: none; }
.footer-logo--default { display: block; }

/* xnxx: swap footer logo */
#src-xn:checked ~ .main ~ .footer .footer-logo--default { display: none; }
#src-xn:checked ~ .main ~ .footer .footer-logo--gold    { display: block; }
#src-xn:checked ~ .main ~ .footer .footer-logo--premium { display: none; }

/* ph: swap footer logo */
#src-ph:checked ~ .main ~ .footer .footer-logo--default { display: none; }
#src-ph:checked ~ .main ~ .footer .footer-logo--premium { display: block; }
#src-ph:checked ~ .main ~ .footer .footer-logo--gold    { display: none; }

/* xv: enforce default */
#src-xv:checked ~ .main ~ .footer .footer-logo--default { display: block; }
#src-xv:checked ~ .main ~ .footer .footer-logo--gold    { display: none; }
#src-xv:checked ~ .main ~ .footer .footer-logo--premium { display: none; }

/* ─── FORM SWAP — only one form visible at a time ─── */
/* xn and ph forms hidden by default */
.search-form--xn,
.search-form--ph { display: none; }

/* xn selected */
#src-xn:checked ~ .main .search-form--xv { display: none; }
#src-xn:checked ~ .main .search-form--xn { display: block; }

/* ph selected */
#src-ph:checked ~ .main .search-form--xv { display: none; }
#src-ph:checked ~ .main .search-form--ph { display: block; }

/* =============================================
   XNXX BLUE THEME — pure CSS override
   ============================================= */

/* ─── FULL PAGE BACKGROUND OVERLAY ─── */
/* Can't reach <body> with ~ so we use a fixed pseudo-element on .main */
#src-xn:checked ~ .main::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%,   rgba(0, 30, 140, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%,  rgba(0, 20, 100, 0.3)  0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ─── HERO GRADIENT ─── */
#src-xn:checked ~ .main .hero {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 51, 178, 0.32) 0%, transparent 70%),
    var(--black);
}

/* ─── SEARCH BUTTON ─── */
#src-xn:checked ~ .main .search-btn {
  background: #0033b2;
}
#src-xn:checked ~ .main .search-btn:hover:not(:disabled) {
  background: #0044e0;
}

/* ─── SEARCH BAR FOCUS GLOW ─── */
#src-xn:checked ~ .main .search-wrap:focus-within {
  border-color: #0033b2;
  box-shadow: 0 0 20px rgba(0, 51, 178, 0.4);
}

/* ─── HERO EYEBROW TEXT ─── */
#src-xn:checked ~ .main .hero-eyebrow {
  color: var(--white);
}

/* ─── INFO CARD ICONS ─── */
#src-xn:checked ~ .main .info-icon {
  color: var(--white);
}

/* ─── BADGE DOT ─── */
#src-xn:checked ~ .header .badge-dot {
  background: #0033b2;
  animation: pulse-blue 2s ease infinite;
}

@keyframes pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 51, 178, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(0, 51, 178, 0); }
}

/* ─── ACTIVATION BAR ─── */
#src-xn:checked ~ .main ~ .activation-bar .activation-submit {
  border-color: #0033b2;
  color: var(--white);
  background: #00050f;
}
#src-xn:checked ~ .main ~ .activation-bar .activation-submit:hover {
  background: rgba(0, 51, 178, 0.15);
}
#src-xn:checked ~ .main ~ .activation-bar .activation-input:focus {
  border-color: #0050cc;
}

/* ─── SCROLLBAR ─── */
#src-xn:checked ~ .main::-webkit-scrollbar-thumb {
  background: #0050cc;
}
#src-xn:checked ~ .main::-webkit-scrollbar-thumb:hover {
  background: #1a6aff;
}

/* =============================================
   PORNHUB ORANGE THEME — pure CSS override
   ============================================= */

/* ─── FULL PAGE BACKGROUND OVERLAY ─── */
#src-ph:checked ~ .main::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%,   rgba(255, 153, 0, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%,  rgba(200, 110, 0, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ─── HERO GRADIENT ─── */
#src-ph:checked ~ .main .hero {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 153, 0, 0.2) 0%, transparent 70%),
    var(--black);
}

/* ─── SEARCH BUTTON ─── */
#src-ph:checked ~ .main .search-btn {
  background: #ff9900;
  color: #111;
}
#src-ph:checked ~ .main .search-btn:hover:not(:disabled) {
  background: #ffb340;
  color: #111;
}

/* ─── SEARCH BAR FOCUS GLOW ─── */
#src-ph:checked ~ .main .search-wrap:focus-within {
  border-color: #ff9900;
  box-shadow: 0 0 20px rgba(255, 153, 0, 0.35);
}

/* ─── HERO EYEBROW TEXT ─── */
#src-ph:checked ~ .main .hero-eyebrow {
  color: var(--white);
}

/* ─── INFO CARD ICONS ─── */
#src-ph:checked ~ .main .info-icon {
  color: #ff9900;
}

/* ─── SOURCE BUTTON — orange glow for ph ─── */
#src-ph:checked ~ .main .source-options .src-btn:nth-child(3) {
  border-color: #ff9900;
  background: rgba(255, 153, 0, 0.1);
  box-shadow: 0 0 20px rgba(255, 153, 0, 0.3);
  opacity: 1;
}

/* ─── BADGE DOT ─── */
#src-ph:checked ~ .header .badge-dot {
  background: #ff9900;
  animation: pulse-orange 2s ease infinite;
}

@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(255, 153, 0, 0); }
}

/* ─── ACTIVATION BAR ─── */
#src-ph:checked ~ .main ~ .activation-bar .activation-submit {
  border-color: #ff9900;
  color: #ff9900;
  background: #0f0800;
}
#src-ph:checked ~ .main ~ .activation-bar .activation-submit:hover {
  background: rgba(255, 153, 0, 0.15);
}
#src-ph:checked ~ .main ~ .activation-bar .activation-input:focus {
  border-color: #ff9900;
}

/* ─── SCROLLBAR ─── */
#src-ph:checked ~ .main::-webkit-scrollbar-thumb {
  background: #cc7a00;
}
#src-ph:checked ~ .main::-webkit-scrollbar-thumb:hover {
  background: #ff9900;
}


/* =============================================
   UTIL-BAR POPUPS — checkbox hack, zero JS
   Open:  label[for=popup-X] sets checkbox
   Close: backdrop label[for=popup-X] unchecks it
   ============================================= */

/* ─── All body-level toggle checkboxes/radios hidden ─── */
.nav-toggle,
.popup-toggle,
.popup-radio {
  display: none;
}

/* ─── util-bar layout ─── */
.util-bar {
  position: relative;
}

/* util-item labels look identical to util-item spans */
label.util-item {
  cursor: pointer;
}

/* ─── BACKDROP
     A <label for="popup-X"> that covers the screen.
     Clicking it unchecks the checkbox → closes popup.
     No blur. No animation. Just a flat semi-transparent layer.
     Uses opacity trick: hidden by default via pointer-events/visibility,
     shown when checkbox is checked.
─── */
.popup-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1990;
  background: rgba(0, 0, 0, 0.6);
  cursor: default;
}

#popup-ann:checked  ~ .main .popup-backdrop--ann,
#popup-don:checked  ~ .main .popup-backdrop--don {
  display: block;
}

/* Mirrors popup */
#popup-mir:checked ~ .main .popup-backdrop--mir {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Pricing popup */
#popup-pricing:checked ~ .main .popup-backdrop--pricing {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* ─── POPUP PANEL — hidden until checkbox checked ─── */
.popup-panel {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  /* Single cheap shadow — no stacking, no spread layers */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75);
  max-height: 88vh;
  overflow-y: auto;
  /* Promote to own compositor layer so it doesn't repaint page content */
  will-change: opacity;
}

#popup-ann:checked ~ .main .popup-panel--ann,
#popup-don:checked ~ .main .popup-panel--don {
  display: block;
}

/* Mirrors popup */
#popup-mir:checked ~ .main .popup-panel--mir {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* Pricing popup */
#popup-pricing:checked ~ .main .popup-panel--pricing {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* ─── ANNOUNCE popup width ─── */
.popup-panel--ann {
  width: min(520px, 94vw);
}

/* ─── DONATE popup width ─── */
.popup-panel--don {
  width: min(360px, 94vw);
}

/* ─── PRICING popup width ─── */
.popup-panel--pricing {
  width: min(520px, 94vw);
}

/* ─── Popup header ─── */
.popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid #1e1e1e;
}

.popup-header-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 0.3rem;
}

/* Close button — a label that unchecks the popup checkbox */
.popup-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--white-muted);
  border-radius: 4px;
  margin-top: -2px;
}
.popup-close:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}

/* ─── Toggle row (XMR/BTC, Plain/Signed) ─── */
.popup-toggle-row {
  display: flex;
  padding: 0.75rem 1.25rem 0.25rem;
}

.popup-toggle-btn {
  flex: 1;
  text-align: center;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid #2a2a2a;
  color: var(--white-muted);
  background: var(--black-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.popup-toggle-btn:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none;
}
.popup-toggle-btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
.popup-toggle-btn:hover {
  color: var(--white-dim);
  background: #1e1e1e;
}

/* ─── Active toggle states — driven by body-level radios ─── */
#coin-xmr:checked ~ .main .popup-toggle-btn--xmr {
  background: rgba(204, 0, 0, 0.15);
  border: 1px solid var(--red);
  color: var(--white);
}
#coin-btc:checked ~ .main .popup-toggle-btn--btc {
  background: rgba(247, 147, 26, 0.1);
  border-color: #f7931a;
  color: #f7931a;
}
#ann-plain:checked ~ .main .popup-toggle-btn--plain {
  background: rgba(204, 0, 0, 0.15);
  border: 1px solid var(--red);
  color: var(--white);
}
#ann-signed:checked ~ .main .popup-toggle-btn--signed {
  background: rgba(74, 222, 128, 0.08);
  border-color: #4ade80;
  color: #4ade80;
}

/* ─── DONATE panels ─── */
.donate-panel {
  padding: 1rem 1.25rem 1.25rem;
}

.donate-panel--btc { display: none; }

#coin-btc:checked ~ .main .donate-panel--xmr { display: none; }
#coin-btc:checked ~ .main .donate-panel--btc  { display: block; }

/* ─── QR code ─── */
.donate-qr-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  background: #fff;
  border-radius: 6px;
  padding: 0.75rem;
}

.donate-qr {
  width: 180px;
  height: 180px;
  display: block;
  image-rendering: pixelated;
}

.donate-addr-wrap {
  margin-bottom: 0.75rem;
}

.donate-note {
  font-size: 0.75rem;
  color: var(--white-muted);
  line-height: 1.5;
}

/* ─── ANNOUNCEMENTS list ─── */
.popup-ann-list {
  padding: 0 1.25rem;
  max-height: 52vh;
  overflow-y: auto;
}

.popup-ann-list::-webkit-scrollbar       { width: 4px; }
.popup-ann-list::-webkit-scrollbar-track { background: transparent; }
.popup-ann-list::-webkit-scrollbar-thumb { background: #2a2a2a; }

.ann-entry {
  padding: 1rem 0;
  border-bottom: 1px solid #1a1a1a;
}
.ann-entry:last-child { border-bottom: none; }

.ann-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.ann-date {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--white-muted);
}

.ann-tag {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--red);
  background: rgba(204, 0, 0, 0.12);
  border: 1px solid rgba(204, 0, 0, 0.3);
  padding: 1px 6px;
}

/* Body swap: plain shown by default, signed hidden */
.ann-body--signed { display: none; }

#ann-signed:checked ~ .main .ann-body--plain  { display: none; }
#ann-signed:checked ~ .main .ann-body--signed { display: block; }

.ann-body--plain p,
.ann-message-text {
  font-size: 0.875rem;
  color: var(--white-dim);
  line-height: 1.6;
}

/* ─── PGP signature block ─── */
.ann-sig-block {
  margin-top: 0.75rem;
  background: var(--black-3);
  border: 1px solid #222;
  border-radius: 4px;
  padding: 0.75rem;
}

.ann-sig-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #4ade80;
  margin-bottom: 0.4rem;
}

.ann-sig-pre {
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  color: #4ade80;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
  opacity: 0.8;
  margin: 0;
}

/* ─── Footer fingerprint note ─── */
.popup-pgp-note {
  padding: 0.75rem 1.25rem 1rem;
  font-size: 0.7rem;
  color: var(--white-muted);
  border-top: 1px solid #1a1a1a;
}

.mono {
  font-family: 'Courier New', monospace;
  color: var(--white-dim);
  font-size: 0.68rem;
  user-select: all;
  -webkit-user-select: all;
}

.popup-empty {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--white-muted);
  font-size: 0.85rem;
}