/* ════════════════════════════════════════
   footer_fix.css
   Add <link rel="stylesheet" href="css/footer_fix.css"/>
   to superpremium_plus.html and megapremium_plus.html
   BEFORE </body>
   ════════════════════════════════════════ */

/* Force footer to be visible on all pages */
footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  background: #060a10 !important;
  border-top: 1px solid #1a2540 !important;
  padding: 20px 16px 28px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #4b5e7a !important;
  font-family: 'DM Sans', sans-serif !important;
  flex-shrink: 0 !important;
}
footer a { color: #4b5e7a !important; text-decoration: none !important; margin: 0 10px !important; }
footer a:hover { color: #00d4aa !important; }
footer strong { color: #94a3b8 !important; }

/* Fix: if the layout uses height:100vh overflow:hidden, footer gets clipped.
   This makes the page body scrollable so footer shows. */
body {
  overflow-y: auto !important;
  min-height: 100vh !important;
}

/* For the chat layout specifically — ensure footer is below the flex layout */
.layout {
  min-height: calc(100vh - 80px) !important; /* leave room for footer */
}

/* On mobile, footer should be fully visible at bottom */
@media (max-width: 600px) {
  footer {
    padding: 16px 12px 20px !important;
    font-size: 11px !important;
  }
}