/* ═══════════════════════════════════════════════
   ENYXIR — Mobile Responsive CSS
   Adaugă în fiecare pagină HTML (în <head>, după <style>):
   <link rel="stylesheet" href="mobile.css"/>
═══════════════════════════════════════════════ */

html { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════
   BREAKPOINT 768px
═══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  nav { padding: 10px 16px !important; }
  .nav-row2 { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-brand-text { font-size: 1.1rem !important; }
  #navWalletBtn { display: none !important; }

  /* ── HERO (index) ── */
  .hero { padding: 120px 16px 60px !important; }
  .hero-tokens {
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero-token-box {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 360px !important;
  }
  .hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 16px;
  }
  .hero-cta a, .hero-cta button {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ── TOKEN INFO STRIP (index) ── */
  .token-info-strip-wrap {
    padding: 0 16px !important;
  }
  .token-info-strip {
    grid-template-columns: 1fr !important;
  }
  .ti-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── SECTIONS ── */
  .section { padding: 0 16px 60px !important; }

  /* ── CARDS GRID (index) ── */
  .cards-grid { flex-direction: column !important; }
  .card {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── TOKEN CARDS (index) ── */
  .token-cards {
    flex-direction: column !important;
    align-items: center !important;
  }
  .token-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── TOKENOMICS ── */
  .tok-grid { flex-direction: column !important; }
  .tok-item {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── COMMUNITY ── */
  .comm-grid { flex-direction: column !important; }
  .comm-item {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── STATS BAR ── */
  .stats-bar {
    flex-direction: column !important;
    align-items: center !important;
  }
  .stat-item {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── CONTRACT ADDRESS ── */
  .contract-address {
    font-size: 0.58rem !important;
    padding: 12px 14px !important;
    word-break: break-all !important;
    max-width: 100% !important;
  }
  .contract-section { padding: 0 16px 80px !important; }

  /* ── ABOUT BOX ── */
  .about-box { padding: 28px 18px !important; }

  /* ── FOOTER ── */
  footer { padding: 28px 16px !important; }
  .footer-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .footer-links { gap: 6px 14px !important; }

  /* ── COOKIE BAR ── */
  .cookie-inner {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .cookie-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  /* ── PAGE PADDING (pages using .page class) ── */
  .page { padding: 120px 16px 60px !important; }
  main { padding: 120px 16px 60px !important; }

  /* ── AIRDROP ── */
  .airdrop-grid { grid-template-columns: 1fr !important; }
  .ad-card { min-width: 0 !important; }

  /* ── PRESALE ── */
  .presale-block { width: 100% !important; padding: 0 !important; }
  .block-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .card-stats { padding: 0 !important; }

  /* ── ENYX COIN ── */
  .tokens-grid { grid-template-columns: 1fr !important; }
  .compare-table { font-size: 0.68rem !important; }
  .compare-table th, .compare-table td { padding: 9px 8px !important; }
  .how-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── ROADMAP ── */
  .phases-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .phase { padding: 24px 18px !important; }

  /* ── MARKET ── */
  .products-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── PROFIL ── */
  .profile-top {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .profile-stats { flex-direction: column !important; }
  .token-grid { grid-template-columns: 1fr !important; }

  /* ── WHITEPAPER ── */
  .util-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── MODALS ── */
  #walletConnectModal > div {
    width: 92% !important;
    padding: 28px 20px !important;
  }
  .cs-box {
    width: 92% !important;
    padding: 32px 20px !important;
  }
  .modal-box {
    width: 92% !important;
    padding: 28px 20px !important;
  }

  /* ── LANG SWITCHER ── */
  #langSwitcher { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════
   BREAKPOINT 480px
═══════════════════════════════════════════════ */
@media (max-width: 480px) {

  nav { padding: 8px 12px !important; }
  .nav-brand-text { font-size: 1rem !important; }

  .hero { padding: 110px 12px 50px !important; }
  .hero-title { font-size: clamp(2.4rem, 11vw, 3.5rem) !important; }
  .hero-desc { font-size: 0.9rem !important; }

  .btn-primary, .btn-secondary, .btn-silver {
    padding: 13px 20px !important;
    font-size: 0.75rem !important;
  }

  .hero-price-box { padding: 16px 20px !important; }
  .price-value { font-size: 1.6rem !important; }

  .products-grid { grid-template-columns: 1fr !important; }
  .how-grid { grid-template-columns: 1fr !important; }
  .util-grid { grid-template-columns: 1fr !important; }

  .section { padding: 0 12px 50px !important; }
  .page { padding: 110px 12px 50px !important; }
  main { padding: 110px 12px 50px !important; }

  .about-box { padding: 22px 14px !important; }
  .ti-card { padding: 22px 18px !important; }

  /* ── LOGO STÂNGA-DREAPTA (presale, roadmap, whitepaper, faq, contact, profil, enyx-coin) ── */
  .page-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; letter-spacing: 3px !important; }
  .page-title + img, img + .page-title { display: none !important; }
  /* Flex row cu logo stânga-dreapta: reducem logo-urile */
  div[style*="display:flex"][style*="align-items:center"][style*="justify-content:center"] > img {
    height: 36px !important;
    width: 36px !important;
  }
  .compare-table { font-size: 0.6rem !important; }
  .compare-table th, .compare-table td { padding: 7px 6px !important; }

  footer { padding: 22px 12px !important; }

  /* Cookie bar compact */
  .cookie-title { font-size: 0.68rem !important; }
  .cookie-desc { font-size: 0.65rem !important; }
  .btn-cookie-accept, .btn-cookie-decline { font-size: 0.62rem !important; padding: 8px 14px !important; }
}
