/* ==========================================================================
   PWA Mobile Adjustments (Synced with 3-Color Responsive Theme)
   ========================================================================== */

:root {
  --fm-bottom-gap: 130px; 
}

html, body {
  padding-bottom: calc(var(--fm-bottom-gap) + env(safe-area-inset-bottom));
}

.force-mobile body {
  padding-bottom: 0 !important; 
}
.force-mobile #__fm_canvas {
  padding-bottom: calc(var(--fm-bottom-gap) + env(safe-area-inset-bottom));
}

@media (display-mode: standalone) {
  html, body { width: 100vw; overflow-x: hidden; }
}

/* Same rules if JS added the class proactively */
.force-mobile, .force-mobile body {
  width: 100vw;
  overflow-x: hidden;
  background-color: var(--light) !important; /* Forces the theme background */
}

/* Clamp layout to match the new 400px mobile canvas constraint */
.force-mobile .seo-intro,
.force-mobile section,
.force-mobile footer,
.force-mobile .dd-footer {
  max-width: 400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.force-mobile .center-wrapper .ludo-wrapper {
  width: 100% !important;
  max-width: 400px !important;
}

/* Floating Elements adjusted for forced mobile mode */
.force-mobile.fm-desktop-like #showProfileBtn {
  position: fixed !important;
  bottom: calc(12px + env(safe-area-inset-bottom));
  right: calc(var(--fm-gap, 0px) + -5px);
  transform: scale(var(--fm-scale, 1));
  transform-origin: bottom right;
  z-index: 10010;
}

.force-mobile.fm-desktop-like #helpBtn {
  position: fixed !important;
  bottom: calc(5px + env(safe-area-inset-bottom));
  right: calc(var(--fm-gap, 0px) + -5px);
  transform: scale(var(--fm-scale, 1));
  transform-origin: bottom right;
  z-index: 10005;
}

/* Avoid extra tall sections in force-mobile */
.force-mobile .center-wrapper { min-height: auto !important; }
.force-mobile .ludo-wrapper { min-height: auto !important; }