/* Villarabet Next — Phase 13.7.8
   Final mobile polish for HOST PROFILE Reel viewer only.
   Scope: .social-profile-reels-viewer (/social/u/{id}/reels)
   No Home / public Feed / Story / OTP / SMS / Ranking / Comment logic changes. */

.social-profile-reels-viewer{
  position:fixed!important;
  inset:0!important;
  z-index:120!important;
  width:100%!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:#000!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

.social-profile-reels-viewer .social-appbar{display:none!important}

/* Small overlay header: title on the right, back on the left. */
.social-profile-reels-viewer .social-section-head{
  position:absolute!important;
  inset:0 0 auto 0!important;
  z-index:30!important;
  width:100%!important;
  min-height:62px!important;
  margin:0!important;
  padding:calc(10px + env(safe-area-inset-top)) 14px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  color:#fff!important;
  background:linear-gradient(180deg,rgba(0,0,0,.64),rgba(0,0,0,.22) 68%,transparent)!important;
  pointer-events:none!important;
}
.social-profile-reels-viewer .social-section-head h1{
  order:1;
  margin:0!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.35!important;
  text-shadow:0 1px 5px rgba(0,0,0,.72)!important;
}
.social-profile-reels-viewer .profile-reels-back{
  order:2;
  pointer-events:auto!important;
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:50%!important;
  color:#fff!important;
  background:rgba(10,12,11,.36)!important;
  text-decoration:none!important;
  font-size:21px!important;
  line-height:1!important;
  backdrop-filter:blur(9px);
}

.social-profile-reels-viewer .reels-viewer{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  gap:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:contain;
  scroll-snap-type:y mandatory!important;
  scrollbar-width:none;
  background:#000!important;
}
.social-profile-reels-viewer .reels-viewer::-webkit-scrollbar{display:none}

.social-profile-reels-viewer .reel-card{
  position:relative!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:always!important;
  background:#000!important;
}
.social-profile-reels-viewer .reel-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  background:#000!important;
  overflow:hidden!important;
}
.social-profile-reels-viewer .reel-stage>video,
.social-profile-reels-viewer .reel-stage>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#000!important;
}
.social-profile-reels-viewer .reel-gradient{
  position:absolute!important;
  inset:28% 0 0!important;
  z-index:4!important;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.04) 22%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.82) 100%)!important;
  pointer-events:none!important;
}

/* Reserve one clean right rail for actions. Metadata starts AFTER that rail. */
.social-profile-reels-viewer .reel-actions{
  position:absolute!important;
  right:12px!important;
  left:auto!important;
  bottom:calc(112px + env(safe-area-inset-bottom))!important;
  z-index:14!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:9px!important;
  width:46px!important;
}
.social-profile-reels-viewer .icon-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:6px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:50%!important;
  background:rgba(10,13,12,.42)!important;
  color:#fff!important;
  box-shadow:0 4px 14px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(8px);
}
.social-profile-reels-viewer .icon-stack svg{width:22px!important;height:22px!important}
.social-profile-reels-viewer .icon-stack span{margin-top:1px!important;font-size:9px!important;line-height:1!important}
.social-profile-reels-viewer .icon-stack.is-active{color:#ff4770!important}

/* Host identity, caption and booking CTA form one coherent bottom block. */
.social-profile-reels-viewer .reel-meta{
  position:absolute!important;
  right:72px!important;
  left:14px!important;
  bottom:calc(108px + env(safe-area-inset-bottom))!important;
  z-index:12!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:7px!important;
  width:auto!important;
  max-width:none!important;
  max-height:42%!important;
  overflow:visible!important;
  color:#fff!important;
  text-align:right!important;
}
.social-profile-reels-viewer .reel-host{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
  max-width:100%!important;
  color:#fff!important;
  text-decoration:none!important;
  text-shadow:0 1px 5px rgba(0,0,0,.76)!important;
}
.social-profile-reels-viewer .reel-host-avatar{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  flex:0 0 38px!important;
  overflow:hidden!important;
  border:2px solid #fff!important;
  border-radius:50%!important;
  background:#e8eee9!important;
  box-shadow:0 3px 12px rgba(0,0,0,.3)!important;
  color:#184a3b!important;
  text-shadow:none!important;
}
.social-profile-reels-viewer .reel-host-avatar img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.social-profile-reels-viewer .reel-host b{
  display:block!important;
  min-width:0!important;
  max-width:210px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:13px!important;
  font-weight:850!important;
}
.social-profile-reels-viewer .reel-meta p{
  margin:0!important;
  max-width:100%!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:11px!important;
  line-height:1.65!important;
  text-shadow:0 1px 4px rgba(0,0,0,.78)!important;
}
.social-profile-reels-viewer .profile-reel-book-cta{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:auto!important;
  max-width:min(100%,245px)!important;
  min-height:38px!important;
  padding:7px 11px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.95)!important;
  color:#165b46!important;
  box-shadow:0 7px 22px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(10px);
  text-decoration:none!important;
  text-shadow:none!important;
}
.social-profile-reels-viewer .profile-reel-book-cta span{
  flex:0 0 auto!important;
  font-size:11px!important;
  font-weight:900!important;
}
.social-profile-reels-viewer .profile-reel-book-cta small{
  min-width:0!important;
  max-width:125px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  color:#65726d!important;
  font-size:9px!important;
  font-weight:700!important;
}

/* Bottom nav stays inside the safe zone and floats over the video. */
.social-profile-reels-viewer .social-bottom-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
  z-index:40!important;
  width:min(calc(100% - 16px),500px)!important;
  height:76px!important;
  margin:0!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.95)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.3)!important;
  backdrop-filter:blur(12px);
}
.social-profile-reels-viewer .social-bottom-nav a,
.social-profile-reels-viewer .social-bottom-nav button{height:60px!important}

@media (max-width:520px){
  body.social-page{background:#000!important;overflow:hidden!important}
  .social-profile-reels-viewer .reel-card{width:100%!important;max-width:none!important;height:100dvh!important;min-height:100dvh!important}
  .social-profile-reels-viewer .social-section-head{min-height:56px!important;padding:calc(8px + env(safe-area-inset-top)) 12px 10px!important}
  .social-profile-reels-viewer .social-section-head h1{font-size:13px!important;max-width:72%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .social-profile-reels-viewer .profile-reels-back{width:36px!important;height:36px!important;font-size:20px!important}
  .social-profile-reels-viewer .reel-actions{right:10px!important;bottom:calc(100px + env(safe-area-inset-bottom))!important;gap:8px!important;width:43px!important}
  .social-profile-reels-viewer .icon-stack{width:41px!important;height:41px!important;min-width:41px!important;min-height:41px!important;padding:6px!important}
  .social-profile-reels-viewer .icon-stack svg{width:21px!important;height:21px!important}
  .social-profile-reels-viewer .reel-meta{right:64px!important;left:12px!important;bottom:calc(98px + env(safe-area-inset-bottom))!important;gap:6px!important}
  .social-profile-reels-viewer .reel-host-avatar{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex-basis:36px!important}
  .social-profile-reels-viewer .reel-host b{font-size:12.5px!important;max-width:185px!important}
  .social-profile-reels-viewer .profile-reel-book-cta{min-height:36px!important;max-width:225px!important;padding:6px 10px!important}
  .social-profile-reels-viewer .profile-reel-book-cta small{max-width:112px!important}
  .social-profile-reels-viewer .social-bottom-nav{width:calc(100% - 16px)!important;height:74px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;border-radius:25px!important}
}

@media (min-width:900px){
  .social-profile-reels-viewer .reel-card{width:min(460px,100%)!important;max-width:460px!important}
  .social-profile-reels-viewer .social-section-head{left:50%!important;right:auto!important;width:460px!important;transform:translateX(-50%)!important}
  .social-profile-reels-viewer .social-bottom-nav{bottom:18px!important}
}