/* ====== BASE ====== */
:root{
  --bg:#000;
  --text:#fff;
  --muted:#aaa;
  --line:#222;
  --cardline:#111;
  --accent:#ff2d55;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{ color: inherit; text-decoration: none; }

.page{ background: var(--bg); }

/* freeze background when modal open */
body.modal-open{ overflow: hidden; }

/* ====== BUTTONS ====== */
.btn{
  padding:14px 34px;
  border:2px solid #fff;
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition: .25s;
  border-radius:10px;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{ background:#fff; color:#000; }

.btn-full{ width:100%; margin-top:10px; }
.btn-small{ padding:10px 16px; font-size:14px; }
.btn-link{ display:inline-block; }

/* ====== INDEX HERO ====== */
.hero{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  z-index:-1;
}
.hero-content{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align:center;
  padding: 0 16px;
  width: min(900px, 92vw);
}
.hero-content h1{
  font-size: 60px;
  margin:0 0 28px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.buttons{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap: wrap;
}

/* ====== SECTIONS + GRID (index) ====== */
.section{
  padding:70px 10%;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}

.section h2{
  margin:0;
  font-size:28px;
}

.see-more{
  font-size:14px;
  opacity:.85;
  border:1px solid #333;
  padding:8px 12px;
  border-radius:999px;
}
.see-more:hover{ opacity:1; border-color:#555; }

.divider{
  height:1px;
  background: var(--line);
  margin:0 10%;
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:22px;
}

.video-card{
  position: relative;
}

.video-card video,
.video-card img{
  width:100%;
  border-radius:14px;
  display:block;
}

.thumb{
  aspect-ratio: 16/9;
  object-fit: cover;
}

.blur img{ filter: blur(16px); }

.unlock{
  position:absolute;
  top:12px;
  left:12px;
  background: rgba(0,0,0,.72);
  padding:6px 10px;
  font-size:14px;
  border-radius: 999px;
}

.video-title{
  margin-top:10px;
  font-size:15px;
  font-weight:600;
  color:#fff;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.meta{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-top:8px;
  font-size:14px;
  color: var(--muted);
}

/* ====== LIKE (instagram-style) ====== */
.like{
  display:flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  color: var(--muted); /* цифра */
}
.like .like-count{ color: var(--muted); } /* цифра всегда серая */

.heart-icon{
  width:18px;
  height:18px;
  display:inline-block;
  background-size:18px 18px;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

.like.active .heart-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff2d55'%3E%3Cpath d='M12 21s-7.2-4.6-9.6-9C.6 8.7 2.4 5.6 5.6 4.7c1.9-.5 3.9.1 5.2 1.6L12 7.6l1.2-1.3c1.3-1.5 3.3-2.1 5.2-1.6 3.2.9 5 4 3.2 7.3C19.2 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}

@keyframes heartPop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.25); }
  70%{ transform: scale(0.95); }
  100%{ transform: scale(1); }
}
.like.pulse .heart-icon{ animation: heartPop 280ms ease-out; }

.paywall{ cursor:pointer; }

/* ====== VIDEOS PAGE: CHANNEL HEADER ====== */
.channel{ position:relative; }

.channel-cover{
  height:220px;
  background-size:cover;
  background-position:center;
  border-bottom:1px solid var(--line);
}

/* ===== Sticky top menu on videos page ===== */
.channel-bar{
  position: sticky;
  top: 0;
  z-index: 50;

  padding: 14px 10%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.topbar-link{ opacity:.9; }
.topbar-link:hover{ opacity:1; text-decoration: underline; }

.channel-title{ display:flex; flex-direction:column; gap:2px; }
.channel-name{ font-weight:800; font-size:18px; }
.channel-sub{ color: var(--muted); font-size:13px; }

/* ====== TABS ====== */
.tabs{
  display:flex;
  gap:10px;
  margin-bottom: 22px;
}
.tab{
  border:1px solid #333;
  background:transparent;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  opacity:.85;
}
.tab.active{
  opacity:1;
  border-color:#666;
  background: rgba(255,255,255,.08);
}
.tab-panel{ display:none; }
.tab-panel.show{ display:block; }

/* ====== LIST (videos.html) ====== */
.list-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.video-row{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
  align-items:start;
}

.thumb-wrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--cardline);
}

.video-row .video{
  width:100%;
  display:block;
  border-radius:0;
}

.thumb-wrap .thumb{
  width:100%;
  display:block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.row-info{ padding-top:2px; }
.video-title.big{ font-size:16px; margin-top:0; }

.hidden{ display:none !important; }

.feed-hint{
  margin-top:18px;
  text-align:center;
  color:#777;
  font-size:13px;
}

/* Loader under list */
.feed-loader{
  display:none;
  justify-content:center;
  margin-top: 14px;
}
.feed-loader.show{ display:flex; }
.feed-loader span{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* locked note */
.locked-note{ margin-top:10px; }
.locked-box{
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  background: rgba(255,255,255,.04);
}
.locked-title{ font-weight:800; margin-bottom:6px; }
.locked-sub{ color: var(--muted); margin-bottom:14px; }

/* ====== FOOTER ====== */
.footer{
  padding:40px 10%;
  display:flex;
  justify-content:space-between;
  gap:40px;
  border-top:1px solid var(--line);
  flex-wrap: wrap;
}
.footer-title{ margin:0 0 12px; font-weight:700; }
.footer-link{ display:block; margin:8px 0; opacity:.85; }
.footer-link:hover{ opacity:1; text-decoration:underline; }
.friends img{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  margin-right:10px;
}

/* ====== POPUP (ALWAYS ON TOP) ====== */
.popup{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.86);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index: 9999; /* key fix */
}
.popup.show{ display:flex; }

.popup-content{
  background:#111;
  padding:34px;
  width: min(380px, 92vw);
  border-radius:14px;
  text-align:center;
  border:1px solid var(--line);

  max-height: calc(100vh - 60px); /* вместо 85vh */
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;      /* old Edge */
}

.popup-content::-webkit-scrollbar{
  width:0;
  height:0;
}
.popup-content .sub{ margin:0 0 16px; color: var(--muted); }

.popup input{
  width:100%;
  padding:12px;
  margin:10px 0;
  background:#000;
  border:1px solid #333;
  color:#fff;
  border-radius:10px;
  outline:none;
}

.close{
  margin-top:14px;
  cursor:pointer;
  color: var(--muted);
  background:transparent;
  border:none;
}
.close:hover{ color:#fff; }

/* ====== RESPONSIVE ====== */
@media (max-width: 820px){
  .video-row{ grid-template-columns: 1fr; }
  .channel-bar{ padding:14px 7%; }
  .section{ padding:55px 7%; }
  .divider{ margin:0 7%; }
  .hero-content h1{ font-size: 42px; }
}

/* ===== FOOTER (premium style, keeps your dark background) ===== */
.site-footer{
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}

.footer-inner{
  padding: 42px 10%;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1.4fr;
  gap: 28px;
  align-items: start;
}

.footer-divider{
  width: 1px;
  background: rgba(255,255,255,0.12);
  height: 100%;
  min-height: 220px;
}

.footer-title{
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.footer-link{
  display: block;
  margin: 14px 0;
  color: rgba(255,255,255,0.80);
  opacity: 0.95;
}

.footer-link:hover{
  color: #fff;
  text-decoration: underline;
}

.footer-col-right{
  text-align: center;
}

.footer-script{
  font-size: 22px;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  margin-bottom: 16px;
}

.footer-socials{
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}

.social-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.04);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.social-btn svg{
  width: 22px;
  height: 22px;
}

.social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.26);
}

.footer-apps{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.footer-apps-title{
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.92);
}

.footer-badges{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.store-badge{
  width: 170px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 12px;
  background: rgba(0,0,0,0.55);
  text-align: left;
  transition: transform .15s ease, border-color .2s ease;
}

.store-badge:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.30);
}

.store-small{
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.store-big{
  display: block;
  font-size: 18px;
  font-weight: 800;
  margin-top: 2px;
}

/* bottom bar */
.footer-bottom{
  padding: 16px 10%;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.72);
}

.footer-bottom-left, .footer-bottom-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-bottom-center{
  opacity: 0.85;
}

.heart{ color: #ff2d55; }

.badge-18{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
  font-weight: 800;
}

/* responsive */
@media (max-width: 980px){
  .footer-inner{
    grid-template-columns: 1fr;
  }
  .footer-divider{
    display:none;
  }
  .footer-col-right{
    text-align: left;
  }
  .footer-socials,
  .footer-badges{
    justify-content: flex-start;
  }
}

/* ===== Unified Free/Adult buttons (works for <a> and <button>) ===== */
.header-tabs, .video-tabs{
  display:flex;
  gap:10px;
  align-items:center;
}

/* отступ под нижними табами (чтобы не прилипали к контенту) */
.video-tabs{
  margin: 18px 0 22px;
}

.tab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 10px 16px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;

  color:#fff;
  font-size:14px;
  line-height: 1;
  cursor:pointer;

  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}

.tab-btn:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.55);
}

.tab-btn.active{
  background:#fff;
  color:#000;
  border-color:#fff;
  font-weight:700;
}

/* ===== One-time Premium Popup ===== */

.popup-content{
  background: linear-gradient(180deg,#121212,#080808);
  padding: 18px 24px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  width: min(380px, 92vw);
}

.premium-box{
  text-align:center;
}

.premium-icon{
  font-size: 34px;
  margin: 0 0 6px;
  line-height: 1;
}

.premium-title{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.premium-sub{
  margin: 4px 0 12px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  line-height: 1.35;
}

.premium-price{
  font-size: 36px;
  font-weight: 900;
  margin: 0 0 14px;
  line-height: 1;
}

.premium-benefits{
  list-style:none;
  padding:0;
  margin: 0 0 16px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  color: rgba(255,255,255,0.85);
}

.premium-btn{
  width:100%;
  padding:14px;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  background: linear-gradient(90deg,#ff2d55,#ff6a00);
  border:none;
  color:#fff;
  transition: transform .15s ease, opacity .2s ease;
}

.premium-btn:hover{
  transform: translateY(-2px);
  opacity:.95;
}

.premium-note{
  font-size:12px;
  line-height:1.3;
  color:rgba(255,255,255,0.55);
  margin-top:6px;
}

.premium-close{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  border:none;
  background:none;
  cursor:pointer;
}

.premium-close:hover{
  color:#fff;
}

.premium-login-note {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.85;
}

.login-link {
  background: none;
  border: none;
  color: #ff7be5;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
}

.login-link:hover {
  text-decoration: underline;
}

/* Paid users: show clear previews */
.adult-unlocked .unlock {
  display: none !important;
}
/* ===== VIDEOS PAGE GRID (4x2 like homepage) ===== */

.videos-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
  margin-top:20px;
}

@media (max-width:1100px){
  .videos-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:760px){
  .videos-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* locked adult preview blur */

.video-card.locked video,
.video-card.locked img{
  filter: blur(18px) brightness(.55);
  pointer-events:none;
}

.video-card.locked::after{
  content:"Unlock";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.7);
  padding:8px 18px;
  border-radius:999px;
  font-size:14px;
}

/* ===== FIX: videos page cards should look like homepage cards ===== */

/* чтобы не было горизонтального скролла */
.videos-grid{
  overflow-x: hidden;
}

/* превращаем "row" в обычную карточку */
.videos-grid .video-row{
  display: block !important;     /* отменяем grid 320px + 1fr */
  min-width: 0;
}

/* убираем "плашку-обертку" под левую часть */
.videos-grid .thumb-wrap{
  border-radius: 16px;
  overflow: hidden;
}

/* видео/картинка ровно по ширине колонки */
.videos-grid .video,
.videos-grid .thumb{
  width: 100%;
  display: block;
}

/* инфо теперь под видео, а не справа */
.videos-grid .row-info{
  padding-top: 10px;
}

/* заголовок как на главной */
.videos-grid .video-title.big{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* мета снизу, как YouTube */
.videos-grid .meta{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-top: 6px;
}

.more-wrapper{
  display:flex;
  justify-content:center;
  margin-top: 30px;
  margin-bottom: 10px;
}

.more-btn{
  padding:12px 28px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition: all .2s ease;
}

.more-btn:hover{
  background:rgba(255,255,255,0.15);
}

/* Stop blinking text caret on page clicks */
body {
  caret-color: transparent;
}

/* But keep caret visible in inputs */
input, textarea, [contenteditable="true"] {
  caret-color: auto;
}

/* Secret Gallery footer link (always highlighted) */
.footer-secret{
  color: #ff2f2f !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  position: relative;

  /* subtle "badge" feel */
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 47, 47, 0.10);
  border: 1px solid rgba(255, 47, 47, 0.28);

  /* gentle glow + pulse */
  text-shadow: 0 0 10px rgba(255, 47, 47, 0.35);
  animation: secretPulse 1.9s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* fire emoji */
.footer-secret::after{
  content: "🔥";
  font-size: 12px;
  transform: translateY(-0.5px);
  filter: drop-shadow(0 0 6px rgba(255, 120, 0, 0.35));
}

/* hover: spicy but elegant */
.footer-secret:hover{
  color: #ff6a6a !important;
  background: rgba(255, 47, 47, 0.14);
  border-color: rgba(255, 47, 47, 0.42);
  text-shadow: 0 0 14px rgba(255, 47, 47, 0.55);
  transform: translateY(-1px);
}

/* small pulse: glow + micro scale */
@keyframes secretPulse{
  0%, 100%{
    box-shadow: 0 0 0 rgba(255, 47, 47, 0);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50%{
    box-shadow: 0 0 14px rgba(255, 47, 47, 0.22);
    transform: translateY(0) scale(1.03);
    opacity: 0.98;
  }
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .footer-secret{ animation: none; }
}

.count-raw { display: none; }

/* make photos feel separated and not "glued" */
.about-side{ display:flex; flex-direction:column; gap:14px; }

.about-photo{
  width:100%;
  border-radius: 18px;
  display:block;
  border: 1px solid rgba(255,255,255,.12);
  background:#0b0b0b;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  overflow:hidden;
}

/* second photo: keep natural look (no forced crop) */
.about-photo--second{
  aspect-ratio: auto;
  object-fit: contain; /* or cover, but contain = no crop */
  background: rgba(255,255,255,.02);
  padding: 8px;            /* gives that “frame” feeling */
  border-radius: 18px;
}
.coffee-link{
  color: #fff;
  font-weight: 700;
  padding: 2px 6px;
  border-bottom: 2px solid #ff2d55;
  transition: all .2s ease;
}

.coffee-link:hover{
  background: #ff2d55;
  color: #000;
}

/* Coffee button subtle highlight */
.coffee-btn {
  position: relative;
  color: #d8b38a; /* мягкий кофейный оттенок */
}

.coffee-btn:hover {
  color: #f1c27d; /* теплее при ховере */
}

/* лёгкое тёплое свечение */
.coffee-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241,194,125,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.coffee-btn:hover::after {
  opacity: 1;
}

.footer-legal-bar{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.footer-legal-bar a{
  color: inherit;
  text-decoration: underline;
}

.about-note{
  font-size:14px;
  color:var(--muted);
  margin-bottom:12px;
}