/* ===============================
   MOBILE COMPATIBILITY LAYER
   CORE + MODAL SAFE
   =============================== */

@media (max-width: 768px) {

  html, body {
    overflow-x: hidden !important;
  }

  /* Width clamps */
  [class*="w-["],
  .w-\[600px\],
  .w-\[800px\] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Grid stacking */
  .grid,
  .md\:grid-cols-2,
  .md\:grid-cols-4,
  .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Inputs / buttons */
  button,
  input {
    min-height: 44px;
    font-size: 16px !important;
  }

  /* Headings */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.2rem !important; }

  /* ===============================
     SIGNUP / LOGIN MODAL FIX
     =============================== */

  #signupModal,
  #loginModal,
  #keyStatusModal {
    align-items: flex-start !important;
    padding: 12px !important;
    z-index: 9999 !important; /* Ensure modal is on top */
  }

  #signupModal > div,
  #loginModal > div,
  #keyStatusModal > div {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    width: 100% !important;
    margin-top: 20px;
  }

  /* ===============================
     HIDE HEADER & NAV (MOBILE ONLY)
     =============================== */

  /* Targets the fixed navbar container specifically */
  body.modal-open .fixed.top-6.left-0.right-0 {
    display: none !important;
  }

  /* Additional safety to prevent body scrolling behind modal */
  body.modal-open {
    overflow: hidden !important;
    height: 100vh;
  }
}
/* =========================================
   FORCE HERO BOXES SIDE-BY-SIDE (MOBILE)
   ========================================= */

@media (max-width: 768px) {

  /* HARD override: never stack */
  .hero-actions-boxes {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Each box = half screen */
  .hero-actions-boxes > div {
    width: 50% !important;
    max-width: 50% !important;
    padding: 12px !important;
  }

  /* Titles */
  .hero-actions-boxes h3 {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.12em;
  }

  /* Buttons inside boxes */
  .hero-actions-boxes button,
  .hero-actions-boxes a {
    font-size: 12px !important;
    padding: 10px 12px !important;
    border-radius: 999px !important;
    width: 100% !important;
  }

  .hero-actions-boxes img {
    height: 14px !important;
  }
}

/* =========================================
   MOBILE FIX: HERO ACTION BOXES
   ========================================= */

@media (max-width: 768px) {

  /* Force the two boxes to sit side-by-side */
  .hero-actions-boxes {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: stretch;
  }

  /* Each box takes half width */
  .hero-actions-boxes > div {
    width: 50% !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  /* Box titles (MORE / SOCIALS) */
  .hero-actions-boxes h3 {
    font-size: 11px !important;
    letter-spacing: 0.12em;
    margin-bottom: 8px !important;
  }

  /* Buttons inside boxes */
  .hero-actions-boxes button,
  .hero-actions-boxes a {
    font-size: 12px !important;
    padding: 10px 12px !important;
    min-height: unset !important;
    border-radius: 999px !important;
  }

  /* Icons inside buttons */
  .hero-actions-boxes img {
    height: 14px !important;
  }

}
/* =========================================
   MOBILE POLISH: SYSTEM FLOW (REAL SELECTORS)
   ========================================= */

@media (max-width: 768px) {

  /* Outer spacing: reduce huge margins */
  .p-8.md\:p-12.max-w-6xl.mx-auto {
    padding: 16px !important;
  }

  /* Glass card */
  .premium-glass.rounded-2xl {
    border-radius: 20px !important;
  }

  /* Header */
  .premium-glass > .px-6.py-5 {
    padding: 14px 16px !important;
    text-align: center;
  }

  .premium-glass > .px-6.py-5 p {
    font-size: 10px !important;
    letter-spacing: 0.18em;
  }

  .premium-glass > .px-6.py-5 h3 {
    font-size: 16px !important;
    margin-top: 2px;
  }

  /* EACH STEP ROW */
  .premium-glass .divide-y > div {
    grid-template-columns: 36px 1fr !important;
    row-gap: 6px;
    padding: 14px 16px !important;
  }

  /* Step number (01, 02...) */
  .premium-glass .divide-y > div > div:first-child {
    font-size: 11px !important;
    opacity: 0.6;
  }

  /* Step text block */
  .premium-glass .divide-y > div > div:nth-child(2) h4 {
    font-size: 14px !important;
    margin-bottom: 2px;
  }

  .premium-glass .divide-y > div > div:nth-child(2) p {
    font-size: 11px !important;
    line-height: 1.4;
  }

  /* Status / action column → move under text */
  .premium-glass .divide-y > div > div:last-child {
    grid-column: 2 / -1 !important;
    text-align: left !important;
    margin-top: 6px;
  }

  /* Status pills */
  .premium-glass span.inline-block {
    font-size: 9px !important;
    padding: 4px 10px !important;
    border-radius: 999px;
  }

  /* ACTIVATE button */
  .premium-glass button {
    font-size: 11px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
  }
}