/* O2F Home V2 stability patch: bottom nav + smooth scroll + footer safety */

/* ── Body / page ── */
body:has(.o2f-v2),body:has(.o2f-v2-ar){
  overflow-x:hidden!important;
  background:#06110d!important;
  scroll-behavior:smooth!important;
}

/* Keep the Home V2 wrappers from creating a containing block that breaks fixed elements */
.o2f-v2,.o2f-v2-ar{
  overflow:visible!important;
  contain:none!important;
  transform:none!important;
  filter:none!important;
  perspective:none!important;
  background:transparent!important;
}

/* ── Background parallax element — sibling of .o2f-v2 for correct fixed positioning ── */
/* .o2f-bg is placed BEFORE .o2f-v2 in HTML so it stays fixed to the viewport, not clipped by page content */
.o2f-bg,#o2fBg{
  position:fixed!important;
  inset:-14%!important;
  z-index:0!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  filter:saturate(1.08) contrast(1.05)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  will-change:transform!important;
  transform:translate3d(0,var(--bg-y,0),0) scale(var(--bg-s,1.14))!important;
  backface-visibility:hidden!important;
  pointer-events:none!important;
}

/* Fixed overlays must not create accidental scroll/paint containers */
.o2f-v2:before,.o2f-v2-ar:before{
  position:fixed!important;
  pointer-events:none!important;
}

/* ── GPU layer hints ── */
.o2f-v2 .glass,.o2f-v2-ar .glass{transform:translateZ(0);backface-visibility:hidden}
.o2f-v2 .marquee-row,.o2f-v2-ar .marquee-row{will-change:transform}

/* ── Dock: always at the bottom of the viewport, never at the bottom of the page ── */
.o2f-v2 .dock,.o2f-v2-ar .dock{
  position:fixed!important;
  top:auto!important;
  bottom:18px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  z-index:9999!important;
  contain:none!important;
}

/* ── Hide site header/footer/chatbot/whatsapp on v2 pages ── */
body:has(.o2f-v2) header[data-site-header],
body:has(.o2f-v2-ar) header[data-site-header],
body:has(.o2f-v2) .o2f-site-footer,
body:has(.o2f-v2-ar) .o2f-site-footer,
body:has(.o2f-v2) #whatsapp-float,
body:has(.o2f-v2-ar) #whatsapp-float,
body:has(.o2f-v2) [class*="whatsapp-float"],
body:has(.o2f-v2-ar) [class*="whatsapp-float"],
body:has(.o2f-v2) [id*="chatbot"],
body:has(.o2f-v2-ar) [id*="chatbot"],
body:has(.o2f-v2) [class*="chatbot"],
body:has(.o2f-v2-ar) [class*="chatbot"]{
  display:none!important;
}

/* ── Responsive dock ── */
@media(max-width:1050px){
  .o2f-v2 .dock,.o2f-v2-ar .dock{top:auto!important;bottom:18px!important}
  .o2f-v2 .hero,.o2f-v2-ar .hero{padding-top:70px!important;padding-bottom:105px!important}
}
@media(max-width:720px){
  .o2f-v2 .dock,.o2f-v2-ar .dock{
    top:auto!important;
    bottom:calc(18px + env(safe-area-inset-bottom))!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 18px)!important;
    max-width:470px!important;
    overflow:visible!important;
  }
  .o2f-v2 .hero,.o2f-v2-ar .hero{padding-top:64px!important;padding-bottom:120px!important}
  .o2f-v2 .final,.o2f-v2-ar .final{padding-bottom:160px!important}
  .o2f-v2 .social-panel,.o2f-v2-ar .social-panel{
    top:auto!important;
    bottom:calc(88px + env(safe-area-inset-bottom))!important;
  }
}

/* ── Footer safety ── */
.o2f-v2 .v2-footer,.o2f-v2-ar .v2-footer{
  position:relative!important;
  z-index:3!important;
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .o2f-v2 *,.o2f-v2-ar *{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .o2f-v2 .marquee-row,.o2f-v2-ar .marquee-row{animation:none!important}
}

/* Comments marquee: final live override loaded after older hotfix CSS */
.o2f-v2 .stories-section .marquee,
.o2f-v2-ar .stories-section .marquee{
  position:relative!important;
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  display:grid!important;
  gap:16px!important;
  overflow:hidden!important;
  padding-block:4px!important;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)!important;
}
.o2f-v2 .stories-section .marquee-row,
.o2f-v2-ar .stories-section .marquee-row{
  display:flex!important;
  align-items:stretch!important;
  gap:16px!important;
  width:max-content!important;
  min-width:200%!important;
  will-change:transform!important;
}
.o2f-v2 .stories-section .marquee-row.row-a{animation:homeV2CommentsLeft 72s linear infinite!important}
.o2f-v2 .stories-section .marquee-row.row-b{animation:homeV2CommentsRight 86s linear infinite!important;animation-delay:-28s!important}
.o2f-v2-ar .stories-section .marquee-row.row-a{animation:homeV2CommentsRight 72s linear infinite!important}
.o2f-v2-ar .stories-section .marquee-row.row-b{animation:homeV2CommentsLeft 86s linear infinite!important;animation-delay:-28s!important}
.o2f-v2 .stories-section .marquee-row:hover,
.o2f-v2-ar .stories-section .marquee-row:hover{animation-play-state:paused!important}
.o2f-v2 .stories-section .comment-card,
.o2f-v2-ar .stories-section .comment-card{
  flex:0 0 clamp(290px,28vw,380px)!important;
  width:clamp(290px,28vw,380px)!important;
  min-height:230px!important;
  padding:22px!important;
  border-radius:26px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  overflow:hidden!important;
}
.o2f-v2 .stories-section .comment-card p,
.o2f-v2-ar .stories-section .comment-card p,
.o2f-v2 .stories-section .comment-card b,
.o2f-v2-ar .stories-section .comment-card b{
  overflow-wrap:anywhere!important;
  text-wrap:pretty!important;
}
@keyframes homeV2CommentsLeft{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes homeV2CommentsRight{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@media(max-width:720px){
  .o2f-v2 .stories-section .marquee,
  .o2f-v2-ar .stories-section .marquee{
    gap:12px!important;
    mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)!important;
  }
  .o2f-v2 .stories-section .marquee-row,
  .o2f-v2-ar .stories-section .marquee-row{gap:12px!important}
  .o2f-v2 .stories-section .marquee-row.row-a,
  .o2f-v2-ar .stories-section .marquee-row.row-a{animation-duration:82s!important}
  .o2f-v2 .stories-section .marquee-row.row-b,
  .o2f-v2-ar .stories-section .marquee-row.row-b{animation-duration:96s!important}
  .o2f-v2 .stories-section .comment-card,
  .o2f-v2-ar .stories-section .comment-card{
    flex-basis:min(78vw,300px)!important;
    width:min(78vw,300px)!important;
    min-height:210px!important;
  }
}