/* 🔥 Free Fire Marketplace Stylesheet */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #0B0B0F;
  color: #fff;
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0d0e14;
}

::-webkit-scrollbar-thumb {
  background: #26262f;
  border-radius: 999px;
  border: 2px solid #0d0e14;
}

::-webkit-scrollbar-thumb:hover {
  background: #3a3a45;
}

input, select, textarea, button {
  font-family: inherit;
}

input::placeholder, textarea::placeholder {
  color: #5c6270;
}

/* Animations */
@keyframes ffFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes ffEmber {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translateY(-220px); opacity: 0; }
}

@keyframes ffShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ffGold {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

@keyframes ffDot {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes ffBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .32; }
}

@keyframes ffUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ffFlame {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: .8; }
  50% { transform: scale(1.14) rotate(2deg); opacity: 1; }
}

@keyframes ffSpin {
  to { transform: rotate(360deg); }
}

@keyframes ffScan {
  0% { transform: translateY(-120%); }
  100% { transform: translateY(320%); }
}

@keyframes ffRing {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.04); }
}

/* Utility Hover Classes */
.hover-trend-card {
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.hover-trend-card:hover {
  transform: translateY(-3px) !important;
}

.hover-listing-card {
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.hover-listing-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 176, 32, 0.4) !important;
}

.hover-summary-card {
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.hover-summary-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 176, 32, 0.35) !important;
}

/* ==================================================================
   Responsividad (móvil / tablet / desktop)
   El layout base usa estilos inline; aquí los sobrescribimos por ID
   con !important. La hamburguesa vive en header.php y el toggle del
   drawer en app.js (window.ffToggleSidebar).
   ================================================================== */

/* El botón hamburguesa solo aparece cuando el sidebar es drawer. */
.ff-hamburger { display: none; }

/* Contenedor de scroll horizontal para tablas anchas del panel. */
.ff-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  /* Sidebar → drawer off-canvas */
  #sidebar-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 264px !important;
    max-width: 82vw !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease;
    z-index: 200 !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, .6);
  }
  body.ff-sidebar-open #sidebar-container {
    transform: translateX(0) !important;
  }
  #ff-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 150;
    display: none;
  }
  .ff-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Topbar: dejar que el cluster derecho baje a otra línea en pantallas chicas. */
@media (max-width: 640px) {
  #topbar-container {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
}

/* Evitar scroll horizontal accidental del documento en móvil. */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* Lobby: el aside de filtros (2ª columna) baja debajo del listado. */
@media (max-width: 860px) {
  #lobby-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  #top-trends-grid { grid-template-columns: 1fr !important; }
}

/* Panel admin: la navegación lateral (216px) pasa arriba en una sola columna. */
@media (max-width: 860px) {
  #admin-grid { grid-template-columns: 1fr !important; }
}