/* Jerkiss Pro Cams V2 - sharper black/red skin and UX layer */
:root {
  --jk-v2-red: #f21f3a;
  --jk-v2-red-deep: #8f0616;
  --jk-v2-red-hot: #ff4058;
  --jk-v2-black: #020203;
  --jk-v2-panel: rgba(13, 13, 16, .92);
  --jk-v2-panel-2: rgba(22, 14, 17, .94);
  --jk-v2-line: rgba(255, 255, 255, .08);
  --jk-v2-line-red: rgba(242, 31, 58, .32);
  --jk-v2-text: #f8fafc;
  --jk-v2-muted: rgba(248, 250, 252, .68);
  --jk-v2-radius: 22px;
}

body.jerkiss-v2 {
  background:
    radial-gradient(circle at 8% 12%, rgba(242, 31, 58, .22), transparent 26rem),
    radial-gradient(circle at 92% 3%, rgba(255, 64, 88, .13), transparent 24rem),
    linear-gradient(180deg, #020203, #070707 38%, #020203 100%) !important;
}

body.jerkiss-v2::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 46%, rgba(242,31,58,.06) 46% 47%, transparent 47% 100%),
    radial-gradient(circle at 50% 50%, transparent 0, rgba(0,0,0,.38) 100%);
}

.jerkiss-v2 .jk-site-header {
  background: rgba(2, 2, 3, .82) !important;
  border-bottom: 1px solid rgba(242, 31, 58, .30) !important;
}

.jerkiss-v2 .jk-site-header::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,31,58,.9), transparent);
}

.jerkiss-v2 .jk-site-header > .container {
  min-height: 68px;
}

.jerkiss-v2 .jk-logo-img,
.jerkiss-v2 .logo-light,
.jerkiss-v2 .logo-dark {
  height: 52px !important;
  max-width: 245px !important;
}

.jk-v2-menu-fallback {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.jk-v2-menu-fallback a {
  position: relative;
  color: rgba(255,255,255,.76) !important;
  font-weight: 800;
  font-size: .9rem;
}

.jk-v2-menu-fallback a:hover {
  color: #fff !important;
}

.jk-v2-random,
.jk-v2-random:visited {
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .55rem .9rem !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--jk-v2-red), var(--jk-v2-red-deep)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 14px 34px rgba(242,31,58,.20) !important;
}

.jk-v2-random:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.jk-v2-category-strip {
  position: relative;
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: .72rem 1rem !important;
}

.jk-v2-category-strip::before {
  content: "Live";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 33px;
  padding: .38rem .74rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  font-size: .8rem;
  background: linear-gradient(135deg, var(--jk-v2-red), var(--jk-v2-red-deep));
}

.jerkiss-v2 main.w-full.max-w-\[1800px\] {
  padding-top: 9.5rem !important;
}

.jerkiss-v2 .jk-hero {
  min-height: 315px;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .48fr);
  padding: clamp(1.35rem, 3vw, 2.7rem);
  border-radius: 30px;
  border-color: rgba(242,31,58,.42);
  background:
    linear-gradient(130deg, rgba(242,31,58,.24), rgba(12,12,15,.94) 42%, rgba(2,2,3,.98)),
    radial-gradient(circle at 77% 17%, rgba(255,64,88,.28), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.jerkiss-v2 .jk-hero::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 32%, rgba(242,31,58,.10));
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

.jerkiss-v2 .jk-hero h1 {
  max-width: 880px;
  font-size: clamp(2.45rem, 5.8vw, 5.85rem);
  letter-spacing: -.075em;
  text-shadow: 0 18px 42px rgba(0,0,0,.38);
}

.jerkiss-v2 .jk-hero p {
  max-width: 740px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}

.jk-v2-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.15rem;
}

.jk-v2-hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 34px;
  padding: .4rem .7rem;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.09);
  font-size: .82rem;
  font-weight: 800;
}

.jk-v2-hero-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .8rem;
  align-self: stretch;
}

.jk-v2-mini-card {
  padding: 1rem;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.jk-v2-mini-card strong {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.15;
}

.jk-v2-mini-card span {
  display: block;
  margin-top: .35rem;
  color: rgba(255,255,255,.62);
  font-size: .88rem;
}

.jk-v2-online-dot {
  display: inline-block;
  width: .58rem;
  height: .58rem;
  margin-right: .42rem;
  border-radius: 50%;
  background: var(--jk-v2-red-hot);
  box-shadow: 0 0 0 0 rgba(255,64,88,.72);
  animation: jkV2Online 1.55s infinite;
}

.jk-v2-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
}

.jk-v2-stats div {
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}

.jk-v2-stats strong {
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
  font-weight: 950;
}

.jk-v2-stats span {
  margin-top: .35rem;
  color: var(--jk-v2-muted);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.jerkiss-v2 #webcams-grid > .bg-dark-800,
.jerkiss-v2 #related-webcams-grid > .bg-dark-800,
.jerkiss-v2 section.grid > .bg-dark-800,
.jerkiss-v2 .bg-dark-800.rounded.overflow-hidden.shadow {
  border-radius: 21px !important;
}

.jerkiss-v2 #webcams-grid > .bg-dark-800::before,
.jerkiss-v2 #related-webcams-grid > .bg-dark-800::before,
.jerkiss-v2 .bg-dark-800.rounded.overflow-hidden.shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.10), transparent 28%, rgba(242,31,58,.14));
  opacity: .55;
}

.jerkiss-v2 .t-thumb-wrap {
  aspect-ratio: 16/11;
}

.jerkiss-v2 .sidebar {
  width: 19rem !important;
  border-top-right-radius: 28px !important;
}

.jerkiss-v2 #filters-form fieldset legend::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .42rem;
  border-radius: 999px;
  background: var(--jk-v2-red-hot);
}

.jk-v2-block {
  margin: 1.2rem 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: var(--jk-v2-radius);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.025));
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}

.jk-v2-block-head {
  margin-bottom: .75rem;
}

.jk-v2-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .35rem;
  color: #ffc7cf;
  font-size: .76rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.jk-v2-kicker::before {
  content: "";
  width: .48rem;
  height: .48rem;
  border-radius: 99px;
  background: var(--jk-v2-red-hot);
  box-shadow: 0 0 18px rgba(255,64,88,.58);
}

.jk-v2-block h1,
.jk-v2-block h2 {
  margin: 0;
  color: #fff !important;
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1.06;
}

.jk-v2-block h1 {
  font-size: clamp(2rem, 3.6vw, 3.8rem);
}

.jk-v2-block h2 {
  font-size: clamp(1.45rem, 2.3vw, 2.35rem);
}

.jk-v2-block p {
  color: rgba(255,255,255,.72) !important;
  font-size: 1rem;
  line-height: 1.72;
}

.jk-v2-seo-copy {
  display: grid;
  grid-template-columns: minmax(0, .6fr) minmax(0, 1fr);
  gap: 1rem 1.4rem;
  align-items: start;
}

.jk-v2-seo-copy p:first-of-type {
  margin-top: 0;
}

.jk-v2-term-cloud,
.jk-v2-inline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.jk-v2-term-cloud a,
.jk-v2-inline-tags a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 39px;
  padding: .52rem .74rem;
  border-radius: 999px;
  color: rgba(255,255,255,.84) !important;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  font-weight: 850;
  text-decoration: none !important;
}

.jk-v2-term-cloud a:hover,
.jk-v2-inline-tags a:hover {
  color: #fff !important;
  border-color: rgba(242,31,58,.4);
  background: rgba(242,31,58,.16);
}

.jk-v2-term-cloud em {
  min-width: 1.55rem;
  min-height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(242,31,58,.28);
  font-size: .74rem;
  font-style: normal;
}

.jk-v2-faq details {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .85rem 0;
}

.jk-v2-faq details:first-of-type {
  border-top: 0;
}

.jk-v2-faq summary {
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  list-style: none;
}

.jk-v2-faq summary::-webkit-details-marker {
  display: none;
}

.jk-v2-faq summary::after {
  content: "+";
  float: right;
  color: var(--jk-v2-red-hot);
}

.jk-v2-faq details[open] summary::after {
  content: "−";
}

.jk-v2-faq p {
  margin-bottom: 0;
}

.jk-v2-single-seo {
  margin-top: 1.25rem;
}

.jerkiss-v2 .pc-webcam-wrap,
.jerkiss-v2 .pc-info-card {
  border-radius: 28px !important;
}

.jerkiss-v2 .pc-embed {
  border-radius: 26px !important;
}

.jerkiss-v2 .pc-webcam-wrap .bg-primary-500,
.jerkiss-v2 a.bg-primary-500,
.jerkiss-v2 button.bg-primary-500,
.jerkiss-v2 .js-webcams-loadmore,
.jerkiss-v2 .jk-btn-primary {
  position: relative;
  overflow: hidden;
}

.jerkiss-v2 .pc-webcam-wrap .bg-primary-500::before,
.jerkiss-v2 a.bg-primary-500::before,
.jerkiss-v2 button.bg-primary-500::before,
.jerkiss-v2 .js-webcams-loadmore::before,
.jerkiss-v2 .jk-btn-primary::before {
  content: "";
  position: absolute;
  inset: -80% -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transform: translateX(-80%) rotate(18deg);
  transition: transform .65s ease;
}

.jerkiss-v2 .pc-webcam-wrap .bg-primary-500:hover::before,
.jerkiss-v2 a.bg-primary-500:hover::before,
.jerkiss-v2 button.bg-primary-500:hover::before,
.jerkiss-v2 .js-webcams-loadmore:hover::before,
.jerkiss-v2 .jk-btn-primary:hover::before {
  transform: translateX(80%) rotate(18deg);
}

.jk-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(4px);
}

body.jk-menu-open .jk-mobile-overlay {
  display: block;
}

@keyframes jkV2Online {
  0% { box-shadow: 0 0 0 0 rgba(255,64,88,.72); }
  70% { box-shadow: 0 0 0 9px rgba(255,64,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,64,88,0); }
}

@media (min-width: 1024px) {
  .jerkiss-v2 main.w-full.max-w-\[1800px\] {
    padding-left: clamp(.85rem, 2vw, 1.55rem) !important;
    padding-right: clamp(.85rem, 2vw, 1.55rem) !important;
  }
}

@media (max-width: 1023.98px) {
  .jerkiss-v2 main.w-full.max-w-\[1800px\] {
    padding-top: 8.4rem !important;
  }
  .jerkiss-v2 .sidebar {
    top: 0 !important;
    width: min(21rem, 88vw) !important;
    padding-top: 5.5rem;
    border-radius: 0 28px 28px 0 !important;
  }
  .jerkiss-v2 .sidebar.show {
    transform: translateX(0) !important;
  }
  .jerkiss-v2 .jk-hero {
    grid-template-columns: 1fr;
  }
  .jk-v2-hero-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .jk-v2-seo-copy {
    grid-template-columns: 1fr;
  }
  .jk-v2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .jerkiss-v2 .jk-site-header > .container {
    min-height: 58px;
  }
  .jerkiss-v2 .jk-logo-img,
  .jerkiss-v2 .logo-light,
  .jerkiss-v2 .logo-dark {
    height: 40px !important;
    max-width: 178px !important;
  }
  .jerkiss-v2 .jk-hero {
    min-height: 0;
    padding: 1rem;
    border-radius: 24px;
  }
  .jerkiss-v2 .jk-hero h1 {
    font-size: 2.55rem;
  }
  .jk-v2-hero-panel {
    grid-template-columns: 1fr;
  }
  .jk-v2-mini-card {
    padding: .85rem;
  }
  .jk-v2-stats {
    gap: .55rem;
  }
  .jk-v2-stats div {
    min-height: 78px;
    padding: .8rem;
  }
  .jk-v2-stats span {
    font-size: .68rem;
  }
  .jerkiss-v2 #webcams-grid,
  .jerkiss-v2 #related-webcams-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .58rem !important;
  }
  .jk-v2-block {
    border-radius: 18px;
    padding: .95rem;
  }
}

@media (max-width: 399.98px) {
  .jerkiss-v2 .jk-hero h1 {
    font-size: 2.25rem;
  }
  .jerkiss-v2 #webcams-grid,
  .jerkiss-v2 #related-webcams-grid {
    grid-template-columns: 1fr !important;
  }
}