/* ===========================================================================
   fp-safety.css — Friendse (MF Team)
   ---------------------------------------------------------------------------
   Purpose: "page tootne" se bachao ki aakhri safety layer.

   Problem jo fix ho raha hai:
   Agar kisi wajah se style/script late load ho (slow net, browser cache,
   extension block), to pehle poora page bina kisi layout ke khul jata tha —
   images screen se bahar, status/reel media bara ho kar page todta tha,
   aur splash screen ke neeche page scroll nahi hota tha.

   Ye file sirf defensive rules rakhti hai (koi design change nahi).
   Layout ke head me sabse aakhir me load hoti hai.
   =========================================================================== */

/* 1) Koi bhi media apne container se bahar na jaye -------------------------- */
img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* 2) Status / Reel media ki safe height — CSS na aaye to bhi screen na tootay */
.fp-status-media img,
.fp-status-media video,
.fp-reel-media img,
.fp-reel-media video,
.status-media img,
.status-media video,
[data-status-media] img,
[data-status-media] video {
  max-height: 80vh;
  width: 100%;
  object-fit: contain;
}

/* 3) Horizontal scroll kabhi na aaye --------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 4) Splash lock fail-safe: 10s ke baad page hamesha scroll ho -------------- */
@keyframes fpSafetyUnlock {
  to {
    overflow: auto;
  }
}
html.fp-splash-lock {
  animation: fpSafetyUnlock 0s linear 10s forwards;
}

/* 5) Alpine x-cloak — script late aaye to adhoore popup flash na hon -------- */
[x-cloak] {
  display: none !important;
}

/* 6) Agar Tailwind bilkul load na ho paye, tab bhi page parhne layak rahe --- */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}