/* frontend/styles/components.css */

/* Bottom nav fixed */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(247,248,250,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  z-index: 50;
}

.bottom-nav-inner{
  height: var(--nav-h);
  max-width: 700px;
  margin: 0 auto;
  padding: 0 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}

.nav-item{
  width: 20%;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color: var(--muted);
  font-size: 12px;
}

.nav-item.active{
  color: var(--text);
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
}

/* Simple section titles */
.section-title{
  margin: 14px 0 10px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.section-subtitle{
  margin: -6px 0 12px;
  font-size: 13px;
  color: var(--muted);
}

/* Rows */
.row{ margin: 10px 0 18px; }
.row-title{
  margin: 10px 0 10px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.row-scroller{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.row-empty{
  color: var(--muted);
  padding: 10px 0;
}

/* Cards (Q141 B responsive via --card-w/--card-h) */
.card{
  flex: 0 0 auto;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}

/* wrapper */
.card-img{
  width:100%;
  height:100%;
  position: relative;
  overflow: hidden;
}

/* image */
.card-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: translateZ(0);
}

/* locked blur */
.card.locked .card-img img{
  filter: blur(14px);
  transform: scale(1.06);
}

/* overlay */
.card-overlay{
  position:absolute;
  inset: 0;
  pointer-events: none;
}

/* tags top-left (reuse .tag) */
.card-overlay .tag{
  position:absolute;
  left: 8px;
  top: 8px;
  pointer-events: none;
  margin-right: 0;
}

/* second tag stack (simple MVP) */
.card-overlay .tag + .tag{
  top: 40px;
}

/* username bottom-left (clickable) */
.card-user{
  position:absolute;
  left: 8px;
  bottom: 8px;
  pointer-events: auto;
  border: 0;
  background: rgba(17,24,39,.72);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

/* footer rating */
.card-footer{
  position:absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  backdrop-filter: blur(6px);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.card-footer-sub{
  font-size: 11px;
  color: var(--muted);
}

/* skeleton */
.card.skel{
  background: linear-gradient(90deg, #eee, #f6f6f6, #eee);
  background-size: 200% 100%;
  animation: sk 1.2s infinite;
}
@keyframes sk {
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* Modal */
.modal-root.hidden{ display:none; }

.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  z-index: 100;
}

.modal-panel{
  position:fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  z-index: 101;
  padding: 16px;
  outline: none;
}

.modal-title{
  margin: 0 0 8px;
  font-size: 16px;
}

.modal-text{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.modal-btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}

.modal-btn.primary{
  background: var(--blue);
  border-color: var(--blue);
  color:#fff;
}

/* Auth */
.auth-card{
  margin: 18px auto 0;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.auth-title{
  margin: 0 0 12px;
  font-size: 18px;
}

.field{
  display:block;
  margin: 10px 0;
}

.field span{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.field input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
}

.field small{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.btn{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  margin-top: 10px;
}

.btn.primary{
  background: var(--blue);
  border-color: var(--blue);
  color:#fff;
}

.auth-foot{
  margin-top: 12px;
  text-align:center;
  color: var(--muted);
  font-size: 14px;
}

.auth-note{
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.gender-pills{
  display:flex;
  gap:10px;
  margin-top: 6px;
}

.gender-pill{
  flex: 1 1 0;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 18px;
  line-height: 44px;
}

.gender-pill.active{
  background: rgba(47,111,237,.10);
  border-color: rgba(47,111,237,.45);
}

/* Media page */
.media-page{ padding-bottom: 12px; }

.media-box{
  margin-top: 8px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.media-loading{
  color: var(--muted);
  padding: 18px;
}

.media-frame{
  position: relative;
  width: 100%;
  background: #000;
}

.media-img, .media-video{
  width: 100%;
  height: auto;
  display:block;
}

.media-img.locked{ filter: blur(14px); transform: scale(1.04); }

.media-watermark{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: .95;
}

.media-meta{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
}

.meta-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:flex-start;
}

.meta-owner{ font-weight: 700; }
.meta-date{ font-size: 13px; color: var(--muted); margin-top: 2px; }

.meta-stats{
  display:flex;
  gap: 12px;
  text-align:right;
}

.stat span{ display:block; font-size: 12px; color: var(--muted); }
.stat strong{ display:block; font-size: 14px; }

.media-access{ margin: 12px 0; }

.tag{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: #fff;
  margin-right: 6px;
}
.tag.ok{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); }
.tag.nsfw{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.35); }
.tag.premium{ background: rgba(147,51,234,.10); border-color: rgba(147,51,234,.35); }

.access-locked .access-msg{ color: var(--muted); margin-bottom: 10px; }
.access-actions{ display:flex; gap: 10px; }

.meta-actions{
  display:flex;
  gap: 10px;
}
.meta-actions .btn{
  flex: 1 1 0;
}

/* Viewer overlay */
.viewer-root.hidden{ display:none; }
.viewer-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index: 200;
}
.viewer-panel{
  position:fixed; inset:0;
  background: var(--bg);
  z-index: 201;
  display:flex;
  flex-direction: column;
}
.viewer-topbar{
  display:flex;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.viewer-back{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:#fff;
}
.viewer-share{
  margin-left:auto;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:#fff;
}
.viewer-mount{
  flex: 1 1 auto;
  overflow:auto;
  padding: 0 12px 12px;
}

/* Rating */
.rating-box{
  margin: 12px 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
}

.rating-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 8px;
}

.rating-label{ font-size: 13px; color: var(--muted); }
.rating-value{ font-size: 14px; }

.rating-slider{
  width: 100%;
  margin: 6px 0 10px;
}

/* Comments */
.comments-box{
  margin: 12px 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
}

.comments-compose{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 10px;
}

.comments-input{
  flex: 1 1 auto;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 0 12px;
}

.comments-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.comment-row{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: var(--card);
}

.comment-head{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.comment-body{
  font-size: 14px;
  line-height: 1.35;
}

/* Q129 — username clickable in comments */
.comment-user{
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

/* Profile */
.profile-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.profile-left{
  display:flex;
  align-items:center;
  gap: 12px;
}

.profile-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(47,111,237,.15), rgba(17,24,39,.05));
}

.profile-username{
  font-weight: 800;
}

.profile-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.profile-stats{
  margin-top: 12px;
  display:flex;
  gap: 10px;
}

.profile-stats .stat{
  flex: 1 1 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
}


.profile-bio{color:var(--muted);font-size:.95rem;max-width:520px;line-height:1.3;margin-top:4px;}


/* Auth legal links (Terms/Legal) */
.auth-legal, .settings-legal {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  opacity: 0.85;
}
.auth-legal a, .settings-legal a { text-decoration: none; }
.auth-legal .sep, .settings-legal .sep { margin: 0 6px; opacity: 0.7; }