/* ============================================================================
   NIGHTLUME — MOBILE RESPONSIVE LAYER (FINAL REFACTORED VERSION)
   Link this file LAST, after style_base.css and every page-specific
   stylesheet, so its media queries win on cascade without needing !important.
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────────────
   1. GLOBAL SAFEGUARDS — apply on every page regardless of breakpoint
   ──────────────────────────────────────────────────────────────────────── */

img, svg, video, iframe { max-width: 100%; height: auto; }

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body { overflow-x: hidden; width: 100%; }

/* iOS Safari prevent automatic zoom on form fields */
@media (max-width: 768px) {
  input, textarea, select, .terminal-input { font-size: 16px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   2. BASE / NAV / HERO / BUTTONS (DEAD-CENTERED NAVIGATION FIXED)
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  body { padding-top: calc(var(--nav-height, 70px) + 24px) !important; }

  /* Redefining the container layout context to force centering */
  .nav-container {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: fixed !important;
  }

  /* Absolute spatial centering overlay that ignores surrounding elements */
  .logo { 
    font-size: 15px !important; 
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    display: block !important;
    width: max-content !important;
    white-space: nowrap !important;
    text-align: center !important;
    z-index: 1005 !important;
  }
  
  /* Keep navigation links balanced correctly on the right side */
  .nav-right { 
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; 
    margin-left: auto !important; /* Pushes links to the edge without disturbing the logo position */
  }

  .hero { padding: 90px 16px 40px !important; margin-bottom: 60px !important; text-align: center !important; }
  .intro-text { font-size: 11px !important; letter-spacing: 5px !important; line-height: 1.7 !important; margin-bottom: 16px !important; text-align: center !important; }
  
  .main-title { 
    font-size: 32px !important; 
    letter-spacing: 6px !important; 
    line-height: 1.25 !important; 
    display: flex !important; 
    justify-content: center !important; 
    text-align: center !important;
    width: 100% !important;
  }

  .btn-container { flex-direction: column !important; align-items: center !important; gap: 12px !important; margin-bottom: 40px !important; width: 100% !important; }
  .action-btn { width: 100% !important; max-width: 320px !important; padding: 16px !important; letter-spacing: 2px !important; text-align: center !important; }

  .section-wrapper { margin-bottom: 60px !important; padding: 0 16px !important; width: 100% !important; }
  .section-header { font-size: 15px !important; letter-spacing: 3px !important; margin-bottom: 20px !important; }
}

@media (max-width: 480px) {
  .main-title { font-size: 24px !important; letter-spacing: 4px !important; }
  .intro-text { font-size: 10px !important; letter-spacing: 3px !important; }
  .action-btn { font-size: 10px !important; letter-spacing: 1.5px !important; padding: 14px !important; }
  .btn-reg { padding: 10px 14px !important; font-size: 10px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   3. FEATURE GRID / STATS / TERMINAL / DEV TEAM
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .features-section { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; }
  .feature-large { grid-column: span 2 !important; grid-row: span 1 !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dev-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 700px) {
  .features-section { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 14px !important; }
  .feature-large { grid-column: span 1 !important; }
  .feature-card { padding: 20px !important; }
  .ui-preview { height: 120px !important; }

  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .stat-card { padding: 22px 18px !important; }
  .stat-value { font-size: 28px !important; }

  .dev-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Terminal Sizing Handling */
  .terminal-window { width: 100% !important; max-width: 100% !important; margin-top: 24px !important; overflow: hidden !important; }
  .terminal-body { font-size: 10.5px !important; line-height: 1.5 !important; padding: 16px !important; overflow-x: auto !important; white-space: pre !important; }
  .ascii-logo { font-size: 7px !important; line-height: 1.05 !important; white-space: pre !important; overflow-x: auto !important; display: block !important; width: 100% !important; }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .stat-value { font-size: 24px !important; }
  .ascii-logo { font-size: 5.5px !important; } 
}

/* ────────────────────────────────────────────────────────────────────────
   4. FOOTER
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .footer-content { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; }
  .footer-brand { grid-column: span 2 !important; }
}

@media (max-width: 560px) {
  footer { padding: 50px 16px 30px !important; }
  .footer-content { grid-template-columns: 1fr !important; gap: 30px !important; text-align: left !important; }
  .footer-brand { grid-column: span 1 !important; }
  .footer-brand p { max-width: 100% !important; }
  .footer-bottom { flex-direction: column !important; gap: 10px !important; text-align: center !important; margin-top: 40px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   5. MODAL (signup / logout-confirm)
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .modal-overlay, .auth-overlay { padding: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; }

  .modal-content, .signup-modal, .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 26px 22px !important;
    box-sizing: border-box !important;
  }

  .modal-buttons, .modal-actions { flex-direction: column !important; gap: 10px !important; }
  .modal-buttons button, .modal-actions button { width: 100% !important; margin: 0 !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   6. LEGAL / POLICIES PAGE
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .legal-content { margin: 70px auto 100px !important; padding: 0 16px !important; }
  .legal-tabs { flex-direction: column !important; gap: 6px !important; margin-bottom: 50px !important; }
  .tab-btn { padding: 14px !important; letter-spacing: 2px !important; font-size: 10px !important; width: 100% !important; text-align: center !important; }

  .legal-section h1 { font-size: 30px !important; letter-spacing: 6px !important; }
  .last-updated { margin-bottom: 60px !important; letter-spacing: 3px !important; }
  .legal-section h2 { font-size: 15px !important; letter-spacing: 3px !important; margin-top: 40px !important; }
  .legal-section p, .legal-section li { font-size: 12.5px !important; text-align: left !important; }
  .legal-section li { padding-left: 20px !important; }

  .req-grid { grid-template-columns: 1fr !important; gap: 20px !important; margin: 40px 0 !important; }
  .req-card { padding: 26px !important; }
}

@media (max-width: 420px) {
  .legal-section h1 { font-size: 22px !important; letter-spacing: 3px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   7. PROFILE BENTO GRID
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .profile-grid { width: calc(100% - 32px) !important; gap: 14px !important; margin: 30px auto !important; }
  .bento-item { padding: 22px !important; }
  .val-main { font-size: 32px !important; }
}

@media (max-width: 560px) {
  .profile-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .profile-grid > * {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    width: 100% !important;
  }
  .val-main { font-size: 28px !important; }
  .info-row { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   8. CHECKOUT / PURCHASE PAGE
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr !important; gap: 20px !important; padding: 0 16px !important; }
  .checkout-sidebar { order: -1 !important; }
  .plan-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 560px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .plan-item { padding: 12px 5px !important; }
  .p-price { font-size: 14px !important; }
  .inv-total { font-size: 15px !important; }
  .tech-specs { padding: 12px !important; }
  .btn-download { width: 100% !important; display: block !important; text-align: center !important; }
}

@media (max-width: 380px) {
  .plan-grid { grid-template-columns: 1fr !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   9. AUTH PAGE (login / signup)
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  body.auth-page { padding-top: 90px !important; }
  .auth-container { max-width: 100% !important; padding: 0 16px !important; }
  .auth-container::before { display: none !important; }
  .auth-card { padding: 30px 24px !important; width: 100% !important; }
  .auth-card::after { width: 22px !important; height: 22px !important; }
  .auth-header { margin-bottom: 26px !important; }
  .auth-header h1 { font-size: 17px !important; letter-spacing: 3px !important; }
  .submit-btn { height: 50px !important; font-size: 11px !important; width: 100% !important; }
  .sys-info { position: static !important; display: block !important; margin-top: 18px !important; text-align: center !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   10. ABOUT PAGE — brand block, roadmap, slider, video
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .moon-bg { transform: scale(0.75) translateY(10px) !important; }
  .brand-reveal-content { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .big-n-logo { font-size: 44px !important; padding: 0 16px !important; line-height: 1.4 !important; }
  .roadmap-list li { font-size: 10.5px !important; padding: 8px 0 !important; }
  .video-container { margin-bottom: 34px !important; border-radius: 3px !important; width: 100% !important; }
  .video-container iframe { width: 100% !important; height: 100% !important; }
  .video-overlay { top: 12px !important; left: 12px !important; font-size: 10px !important; gap: 7px !important; }
  .rec-dot { width: 6px !important; height: 6px !important; }
  .nav-rect { width: 16px !important; }
}

@media (max-width: 420px) {
  .big-n-logo { font-size: 32px !important; padding: 0 12px !important; }
  .roadmap-list li { font-size: 10px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   11. CONTACTS PAGE
   ──────────────────────────────────────────────────────────────────────── */

@media (hover: none) {
  .contact-green-link:active { opacity: 0.7 !important; }
}
.contact-green-link:active { opacity: 0.7 !important; }