/* ==========================================================================
   Friendse — Mobile & responsive fix layer (fp-mobile.css)
   --------------------------------------------------------------------------
   Fixes the "bikhra hua" mobile layout: overflow, tiny tap targets, topbar,
   bottom nav, sheets, tables, modals, sticky rails. Purely presentational —
   no functionality is touched.

   Load LAST (after friende-themes.css, fp-feed.css, fp-ads.css, fp-ui-kit.css).
   ========================================================================== */

/* ---------- 1. Nothing overflows sideways ---------- */
/* FIX (MF Team): `overflow-x:hidden` html/body par sticky sidebars ko tor
   deta tha (scroll par sides upar chali jati thin). `clip` same kaam karta
   hai bina scroll container banaye. */
html, body { max-width: 100%; overflow-x: clip; }
.friende-topbar, main, footer { max-width: 100vw; }

/* Long words / URLs in posts & comments must wrap, not stretch the page. */
.fp-post-body, .fp-comment-text, .friende-card p, .fp-feed p, article p { overflow-wrap: anywhere; }

/* Wide tables scroll inside their own box instead of breaking the page. */
table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 1025px) { table { display: table; } }

/* ---------- 2. Top bar ---------- */
.friende-topbar {
  position: sticky; top: 0; z-index: 60;
  padding-top: var(--fp-safe-t, 0px);
  background: color-mix(in srgb, var(--c-surface, #fff) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.friende-topbar-inner { gap: 10px; }

.friende-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--fp-r-pill, 999px);
  font-size: 18px; color: var(--c-text, #111);
  background: color-mix(in srgb, var(--c-text, #111) 5%, transparent);
  transition: background var(--fp-fast, .16s), transform var(--fp-fast, .16s);
  -webkit-tap-highlight-color: transparent;
}
.friende-icon-btn:hover { background: color-mix(in srgb, var(--fp-brand, #4F46E5) 14%, transparent); }
.friende-icon-btn:active { transform: scale(.94); }

.friende-search {
  height: 42px; padding: 0 16px; min-width: 260px;
  font-size: 15px; color: var(--c-text, #111);
  background: color-mix(in srgb, var(--c-text, #111) 5%, transparent);
  border: 1px solid transparent; border-radius: var(--fp-r-pill, 999px);
  outline: none; transition: box-shadow var(--fp-fast, .16s), background var(--fp-fast, .16s);
}
.friende-search:focus { background: var(--c-surface, #fff); border-color: var(--fp-brand, #4F46E5); box-shadow: var(--fp-ring); }

@media (max-width: 900px) {
  .friende-topbar-inner { height: 58px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .friende-search { min-width: 0; width: 100%; font-size: 16px; }
  .friende-topbar-inner form { flex: 1 1 auto; margin-left: 6px !important; min-width: 0; }
  .friende-logo-box { --friende-logo-h: 30px !important; }
}
/* On very small phones the search collapses to keep the bar clean. */
@media (max-width: 420px) {
  .friende-topbar-inner form { display: none; }
}

/* ---------- 3. Bottom navigation (mobile) ---------- */
.friende-mobile-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: stretch;
  padding: 6px 6px calc(6px + var(--fp-safe-b, 0px));
  background: color-mix(in srgb, var(--c-surface, #fff) 92%, transparent);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-top: 1px solid var(--c-border, #e5e7eb);
  box-shadow: 0 -6px 22px rgba(16,24,40,.07);
}
.friende-mobile-nav > a,
.friende-mobile-nav > button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 2px; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--c-text-muted, #6b7280);
  border-radius: 14px; position: relative;
  transition: color var(--fp-fast, .16s), background var(--fp-fast, .16s), transform var(--fp-fast, .16s);
  -webkit-tap-highlight-color: transparent;
}
.friende-mobile-nav > a span,
.friende-mobile-nav > button span { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; }
.friende-mobile-nav > a:active,
.friende-mobile-nav > button:active { transform: scale(.93); }
.friende-mobile-nav > a.active {
  color: var(--fp-brand, #4F46E5);
  background: color-mix(in srgb, var(--fp-brand, #4F46E5) 10%, transparent);
}
.friende-mobile-nav > a.active::before {
  content: ""; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 99px; background: var(--fp-gradient, #4F46E5);
}
.friende-mobile-nav svg { width: 23px; height: 23px; }

@media (max-width: 900px) {
  .friende-mobile-nav { display: flex; }
  /* Bottom bar must never cover the last bit of content. */
  body { padding-bottom: calc(70px + var(--fp-safe-b, 0px)); }
}

/* ---------- 4. "More" panel — right-side drawer with water-drop reveal ---------- */
.friende-more-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(8,11,20,.45); backdrop-filter: blur(4px); }
.friende-more-sheet {
  position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
  z-index: 81; width: min(88vw, 360px); height: 100dvh; max-height: none; overflow-y: auto;
  padding: 10px 16px calc(20px + var(--fp-safe-b, 0px));
  background: var(--c-surface, #fff);
  border-radius: 24px 0 0 24px;
  box-shadow: -18px 0 50px rgba(8,11,20,.28);
  overscroll-behavior: contain;
}
.friende-more-header { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 0 10px; }
.friende-more-handle { display: none; }
.friende-more-close {
  position: absolute; right: 2px; top: 6px; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer; color: var(--c-text, #111);
  background: color-mix(in srgb, var(--c-text, #111) 6%, transparent);
  transition: transform .15s ease, background .15s ease;
}
.friende-more-close:hover { transform: rotate(90deg); }
.friende-more-close:active { transform: scale(.9); }
.friende-more-close svg { width: 17px; height: 17px; }
.friende-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 0 4px; }
@media (max-width: 360px) { .friende-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.friende-more-grid a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 8px; min-height: 92px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: var(--c-text, #111); text-decoration: none;
  background: var(--c-surface-2, #f9fafb); border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 18px; transition: transform var(--fp-fast, .16s), background var(--fp-fast, .16s);
}
.friende-more-grid a:active { transform: scale(.96); background: color-mix(in srgb, var(--fp-brand, #4F46E5) 10%, transparent); }
.friende-more-icon { font-size: 22px; line-height: 1; }

/* Sheet / backdrop transitions used by the Alpine x-transition classes. */
.friende-more-backdrop-enter, .friende-more-backdrop-leave { transition: opacity .3s ease; }
.friende-more-backdrop-enter-start, .friende-more-backdrop-leave-end { opacity: 0; }
.friende-more-backdrop-enter-end, .friende-more-backdrop-leave-start { opacity: 1; }

/* Panel slides in from the right with a soft fluid overshoot. */
.friende-more-sheet-enter { transition: transform .45s cubic-bezier(.2,1.15,.32,1); }
.friende-more-sheet-enter-start { transform: translateX(102%) !important; }
.friende-more-sheet-enter-end { transform: translateX(0) !important; }
.friende-more-sheet-leave { transition: transform .3s cubic-bezier(.5,0,.75,0); }
.friende-more-sheet-leave-start { transform: translateX(0) !important; }
.friende-more-sheet-leave-end { transform: translateX(102%) !important; }

/* Water-drop scatter: each tile lands like a droplet — small, sliding in
   from the right, then popping past its size and settling. Runs every time
   the panel opens because Alpine hides the sheet with display:none. */
@keyframes friendeDropIn {
  0%   { opacity: 0; transform: translateX(46px) scale(.35); }
  60%  { opacity: 1; transform: translateX(-4px) scale(1.07); }
  80%  { transform: translateX(2px) scale(.98); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.friende-more-grid a { animation: friendeDropIn .45s cubic-bezier(.34,1.4,.5,1) both; }
.friende-more-grid a:nth-child(1)  { animation-delay: .05s; }
.friende-more-grid a:nth-child(2)  { animation-delay: .08s; }
.friende-more-grid a:nth-child(3)  { animation-delay: .11s; }
.friende-more-grid a:nth-child(4)  { animation-delay: .14s; }
.friende-more-grid a:nth-child(5)  { animation-delay: .17s; }
.friende-more-grid a:nth-child(6)  { animation-delay: .20s; }
.friende-more-grid a:nth-child(7)  { animation-delay: .23s; }
.friende-more-grid a:nth-child(8)  { animation-delay: .26s; }
.friende-more-grid a:nth-child(9)  { animation-delay: .29s; }
.friende-more-grid a:nth-child(10) { animation-delay: .32s; }
.friende-more-grid a:nth-child(11) { animation-delay: .35s; }
.friende-more-grid a:nth-child(12) { animation-delay: .38s; }
.friende-more-grid a:nth-child(13) { animation-delay: .41s; }
.friende-more-grid a:nth-child(14) { animation-delay: .44s; }
.friende-more-grid a:nth-child(n+15) { animation-delay: .47s; }

@media (prefers-reduced-motion: reduce) {
  .friende-more-grid a { animation: none; }
  .friende-more-sheet-enter, .friende-more-sheet-leave { transition-duration: .15s; }
}

/* ---------- 5. Layout rails on small screens ---------- */
@media (max-width: 1100px) {
  .fp-ad-rail--right, .friende-rightbar { display: none !important; }
}
@media (max-width: 900px) {
  .friende-sidebar { display: none !important; }
  main > .max-w-\[1440px\], main > div { padding-left: 12px !important; padding-right: 12px !important; }
  .friende-card, .fp-card { border-radius: 16px; }
}

/* Comfortable content column on phones. */
@media (max-width: 640px) {
  .fp-feed, .fp-shell, .friende-main { width: 100%; }
  .fp-post-card, .friende-card { margin-left: 0; margin-right: 0; }
}

/* ---------- 6. Touch targets & inputs everywhere ---------- */
@media (max-width: 900px) {
  a, button, [role="button"], .friende-icon-btn { -webkit-tap-highlight-color: transparent; }
  button, .btn, [type="submit"] { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  /* Modals become full-width sheets with breathing room. */
  .fp-modal, .friende-modal { width: calc(100vw - 24px) !important; max-width: 100% !important; border-radius: 20px !important; }
}

/* ---------- 7. Footer ---------- */
@media (max-width: 900px) {
  footer { padding-bottom: calc(18px + var(--fp-safe-b, 0px)); text-align: center; }
  footer .grid { gap: 18px; }
}

/* ---------- 8. Images load without layout jump (speed/CLS) ---------- */
img[loading="lazy"] { background: color-mix(in srgb, var(--c-text, #111) 5%, transparent); }

/* ---------- 4b. "More" panel portal (FIX — MF Team) ----------------------
   Panel ab Alpine ke x-teleport se seedha <body> me render hota hai. Pehle
   yeh markup .friende-mobile-nav ke andar tha aur us bar par backdrop-filter
   lagi hai; filter apne subtree ke position:fixed children ka containing
   block ban jata hai, is liye drawer side se aane ke bajaye bottom bar ke
   andar neeche pada nazar aata tha. Neeche ke rules sirf position/stacking
   pakke karte hain — links, icons aur behaviour same hai. */
.friende-more-portal { display: contents; }
body > .friende-more-portal > .friende-more-backdrop { position: fixed; inset: 0; z-index: 1080; }
body > .friende-more-portal > .friende-more-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  z-index: 1081; width: min(88vw, 360px); height: 100dvh; max-height: none;
  transform: translateX(0);
}

/* FIX: Modern Light-Red Close Button & Header */
.friende-more-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 44px !important;
  padding: 6px 0 12px 0 !important;
  margin-bottom: 8px !important;
}
.friende-more-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  color: #ef4444 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.1) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.friende-more-close:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  transform: rotate(90deg) !important;
}
.friende-more-close:active {
  transform: scale(0.92) !important;
}
.friende-more-close svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #ef4444 !important;
  stroke-width: 2.2 !important;
}

/* FIX: Modern Light-Red Close Button & Header */
.friende-more-sheet {
  padding-top: 8px !important;
}
.friende-more-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: auto !important;
  padding: 2px 0 6px 0 !important;
  margin: 0 0 4px 0 !important;
  border-bottom: 1px solid var(--c-border, rgba(140, 140, 140, 0.12)) !important;
}
.friende-more-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  color: #ef4444 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.1) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.friende-more-close:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  transform: rotate(90deg) !important;
}
.friende-more-close:active {
  transform: scale(0.92) !important;
}
.friende-more-close svg {
  width: 15px !important;
  height: 15px !important;
  stroke: #ef4444 !important;
  stroke-width: 2.2 !important;
}
.friende-more-grid {
  padding-top: 4px !important;
}

/* FIX: Modern Light-Red Close Button & Header */
.friende-more-sheet {
  padding-top: 8px !important;
}
.friende-more-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: auto !important;
  padding: 4px 2px 8px 2px !important;
  margin: 0 0 6px 0 !important;
  border-bottom: 1px solid var(--c-border, rgba(140, 140, 140, 0.12)) !important;
}
.friende-more-handle {
  display: block !important;
  width: 38px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: var(--c-border, rgba(140, 140, 140, 0.28)) !important;
  margin: 0 auto 0 4px !important;
  opacity: 0.65 !important;
}
.friende-more-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.14), rgba(220, 38, 38, 0.06)) !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  color: #ef4444 !important;
  box-shadow: 0 3px 10px -1px rgba(239, 68, 68, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.friende-more-close:hover {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.22), rgba(220, 38, 38, 0.12)) !important;
  box-shadow: 0 4px 14px -1px rgba(239, 68, 68, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  transform: rotate(90deg) scale(1.05) !important;
}
.friende-more-close:active {
  transform: scale(0.9) !important;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.2) !important;
}
.friende-more-close svg {
  width: 15px !important;
  height: 15px !important;
  stroke: #ef4444 !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.friende-more-grid {
  padding-top: 4px !important;
}
/* --- Professional Brand Close Button --- */
.friende-more-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 14px 6px !important;
  margin-bottom: 2px !important;
}
.friende-more-handle { display: none !important; }
.friende-more-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--c-surface-2, #f3f4f6) !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  color: var(--c-text, #111827) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.friende-more-close:hover {
  background: color-mix(in srgb, var(--c-primary, #4f46e5) 12%, var(--c-surface-2, #f3f4f6)) !important;
  border-color: color-mix(in srgb, var(--c-primary, #4f46e5) 35%, var(--c-border, #e5e7eb)) !important;
  color: var(--c-primary, #4f46e5) !important;
  transform: scale(1.04) !important;
}
.friende-more-close:active {
  transform: scale(0.92) !important;
  background: color-mix(in srgb, var(--c-primary, #4f46e5) 20%, var(--c-surface-2, #f3f4f6)) !important;
}
.friende-more-close svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.3 !important;
}
.friende-more-grid {
  padding-top: 4px !important;
}
/* --- Modern Circular Header Menu Icons --- */
@media (max-width: 900px) {
  .friende-topbar-inner .ml-auto {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }
  .friende-topbar-inner .friende-icon-btn,
  .friende-topbar-inner [x-data="pushSubscriber()"] > button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid var(--c-border, #e5e7eb) !important;
    background: var(--c-surface-2, #f8fafc) !important;
    color: var(--c-text, #111827) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: transform .15s ease, background .15s ease, border-color .15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .friende-topbar-inner .friende-icon-btn:active,
  .friende-topbar-inner [x-data="pushSubscriber()"] > button:active {
    transform: scale(0.92) !important;
    background: color-mix(in srgb, var(--c-primary, #4f46e5) 12%, var(--c-surface-2, #f8fafc)) !important;
  }
  .friende-topbar-inner .friende-icon-btn svg,
  .friende-topbar-inner [x-data="pushSubscriber()"] > button svg {
    width: 18px !important;
    height: 18px !important;
  }
  .friende-topbar-inner .fp-nav-bell {
    position: relative !important;
  }
  .friende-topbar-inner .fp-nav-badge {
    top: -3px !important;
    right: -3px !important;
  }
}