/* 
  REZOAN Theme - Final Polished Core Styles 
  Design: Dark Mode, Neon Accents, Glassmorphism, Floating Nav
*/

:root {
  /* Colors */
  --bg-body: #050505;
  --bg-card: #0f0f0f;
  --bg-glass: rgba(10, 10, 10, 0.6);

  --primary: #ccfd33;
  /* Neon Lime */
  --primary-glow: rgba(204, 253, 51, 0.4);

  --accent: #00f0ff;
  /* Neon Cyan */
  --accent-glow: rgba(0, 240, 255, 0.4);

  --purple: #bd00ff;

  --text-main: #ffffff;
  --text-muted: #888888;

  --border-subtle: rgba(255, 255, 255, 0.08);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Layout */
  --container-width: 1200px;
  --header-height: 60px;
  --nav-height: 80px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 999px;

  /* Transitions */
  --trans-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --trans-smooth: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-body);
  font-family: 'Outfit', 'Baloo Da 2', sans-serif;
  color: var(--text-main);
  min-height: 100vh;
  /* Smooth overall scrolling */
  scroll-behavior: smooth;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 100px;
  /* Space for bottom nav */
}

main,
.content-sheet,
.news-panel {
  padding-bottom: 110px !important;
  /* Ensure content doesn't get hidden */
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#app-root {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  position: relative;
  animation: fadeIn 0.6s ease-out;
}

/* Typography */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--trans-fast);
}

/* Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

/* No hiding logic. Mobile First Everywhere. */
.hidden-desktop {
  display: flex;
}

.hidden-mobile {
  display: none;
}

/* Scrollbar Hiding */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* --- HEADER --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Enhanced Glass */
  background: rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* border-bottom: 1px solid var(--border-subtle); REMOVED */
}

.logo {
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
}

.logo span {
  color: transparent;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- NAVIGATION --- */
.desktop-nav {
  display: none;
  /* Hide standard desktop nav */
}

/* Floating Pill Bottom Nav */
.bottom-nav {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 380px;
  height: 72px;

  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 5000;
  transition: transform 0.3s;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  gap: 4px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all var(--trans-fast);
}

.nav-item i {
  font-size: 24px;
  transition: transform 0.2s;
}

.nav-item span {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.3;
  /* Muted */
  filter: blur(1.5px);
  /* Blurred as requested */
  transform: translateY(2px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active Interactions */
.nav-item.active {
  color: #fff;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}

.nav-item.active i {
  color: var(--accent);
  filter: drop-shadow(0 0 5px var(--accent-glow));
  transform: translateY(-2px);
}

.nav-item.active span {
  color: var(--accent);
  opacity: 1;
  filter: blur(0);
  /* Clear for active */
  transform: translateY(0);
}

/* --- COMPONENTS --- */

/* Buttons */
.btn {
  border: none;
  background: #222;
  color: #fff;
  padding: 14px 28px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--trans-fast);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--primary);
  color: #000;
  box-shadow: 0 0 20px var(--primary-glow);
}

.btn-primary:hover {
  box-shadow: 0 0 30px var(--primary-glow);
  filter: brightness(1.1);
}

/* Product Cards */
.grid-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
}

.product-card {
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.product-image {
  width: 100%;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-info {
  padding: 12px;
}

.product-title {
  font-size: 0.9rem;
  color: #ddd;
  margin-bottom: 6px;
}

.product-price {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.add-btn-icon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  transition: var(--trans-fast);
}

.add-btn-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* --- SECTION TITLES --- */
.section-title {
  padding: 24px 16px 12px;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title::before {
  content: '';
  display: block;
  width: 4px;
  height: 24px;
  background: var(--primary);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--primary);
}

/* --- DESKTOP (MOBILE EMULATION) --- */
@media (min-width: 1024px) {

  /* Enforce Mobile Constraints on Desktop */
  #app-root {
    max-width: 480px;
    /* Lock to Mobile Width */
    margin: 0 auto;
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    min-height: 100vh;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    /* Force containment */
    position: relative;
    /* Ensure relative context for absolute children */
  }

  /* Ensure nav stays fixed relative to the container? 
     Fixed positioning relates to viewport, so we need to be careful.
     If we want the nav inside the "phone", it needs absolute positioning relative to #app-root (which needs transform or filter to contain fixed? No standard reliable way).
     However, standard behavior for "Desktop Mobile View" is usually center screen. 
     The fixed bottom nav will span the full screen width if we are not careful.
  */
  .bottom-nav {
    /* Hack to keep it centered on the "Phone" */
    width: 380px;
    /* Max width constraint takes care of it usually, but let's be safe */
    left: 50%;
    transform: translateX(-50%);
  }
}

/* --- MISSING MODULE STYLES (Restored) --- */

/* 1. Hero Slider (Horizontal Scroll) */
.hero-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 16px;
  margin-top: 10px;
}

.hero-slider::-webkit-scrollbar {
  display: none;
}

.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* 2. Grid Menu (Category Icons) */
.grid-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
  /* Row gap 16, Col gap 8 */
  padding: 0 16px;
  margin-bottom: 24px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.menu-item:active {
  transform: scale(0.95);
}

.menu-icon-box {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--primary);
  transition: all 0.2s;
}

.menu-item:hover .menu-icon-box {
  border-color: var(--primary);
  background: rgba(204, 253, 51, 0.1);
}

.menu-label {
  font-size: 0.8rem;
  color: #aaa;
  font-weight: 500;
}

/* 3. Offers Scroller (Horizontal) */
.offers-scroller {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 24px;
  scrollbar-width: none;
  padding-bottom: 8px;
  /* Space for shadow */
}

.offers-scroller::-webkit-scrollbar {
  display: none;
}

.offer-card-mini {
  flex: 0 0 140px;
  /* Fixed width cards */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.2s;
}

.offer-card-mini:active {
  transform: scale(0.98);
}

.offer-thumb {
  height: 100px;
  width: 100%;
  background-size: cover;
  background-position: center;
}

.offer-details {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offer-tag {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 800;
  color: #000;
  background: #fff;
  /* Default */
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.offer-text {
  font-size: 0.85rem;
  color: #ddd;
  font-weight: 600;
  line-height: 1.3;
}