/* mobile.css — Mobile-only overrides for SoloPayLink
   Goal: modern readable mobile UI without touching desktop styles.css.
   ✅ Cleaned + improved: no duplicates, safer sizing, better mobile typography,
   ✅ safe-area support, prevents overflow, keeps all existing functionality intact.
*/

/* Avoid iOS Safari text resizing */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Prevent sideways scroll from any accidental wide element */
body {
  overflow-x: hidden;
}

/* Media should never force overflow */
img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

/* Better wrapping for long strings (URLs/emails/slugs) */
a,
code,
pre,
.mono,
.code-block,
#resultLink,
#resultLink a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Signed-in badge (used in topbar) */
.badge-signedin {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5ff;
  color: #374151;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================
   Phones (<= 480px)
   ========================================= */
@media (max-width: 480px) {
  /* Typography base:
     - clamp keeps it consistent across tiny/large phones
     - still readable without looking “zoomed”
  */
  body {
    font-size: clamp(17px, 4.2vw, 19px);
    line-height: 1.7;
  }

  /* Privacy + Terms: make legal text slightly bigger on mobile */
.legal-text,
.support-a {
  font-size: 18px !important;   /* +1px from your 16px */
  line-height: 1.75 !important;
}


  /* Safe-area for iPhone notch etc (does nothing on Android) */
  .navbar,
  .topbar {
    padding-left: calc(14px + env(safe-area-inset-left)) !important;
    padding-right: calc(14px + env(safe-area-inset-right)) !important;
  }

  .container,
  .main,
  .section,
  .page-wrap {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Cards */
  .card {
    max-width: 100% !important;
    overflow: hidden;
    padding: 18px !important;
    border-radius: 16px !important;
    margin-bottom: 18px !important;
  }

  /* =========================================
     Topbar / Navbar
     ========================================= */
  .navbar,
  .topbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* If you use .nav-inner (setup/dashboard pages) */
  .nav-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Landing page header uses .nav-right */
  .nav-right,
  .nav-links {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .nav-user {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Logo / Brand */
  .navbar-title,
  .logo {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px;
  }

  /* Nav links / CTA buttons in header */
  .nav-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
  }

  /* If your header CTA uses .nav-cta (pill buttons) */
  .nav-cta {
    padding: 10px 14px !important;
    border-radius: 999px !important;
  }

  /* =========================================
     Headings + text
     ========================================= */
  h1 {
    font-size: clamp(30px, 7.2vw, 36px) !important;
    line-height: 1.12 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: clamp(22px, 5.4vw, 28px) !important;
    line-height: 1.2 !important;
    margin-top: 22px !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em;
  }

  h3 {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }

  p,
  label,
  li {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .muted,
  .help-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  /* Section spacing so page feels “premium” (less empty, less cramped) */
  .section {
    padding-top: 26px !important;
    padding-bottom: 6px !important;
  }

  /* =========================================
     Landing page specific helpers
     (Your index.html uses: .hero, .hero-steps, .hero-step-pill, .primary-btn, .trust-row, .slug-chip)
     ========================================= */
  .hero {
    padding: 22px 16px 22px !important;
    margin: 14px auto 20px !important;
    border-radius: 18px !important;
  }

  .hero p {
    font-size: 16px !important;
    margin-bottom: 14px !important;
  }

  .hero-steps {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  /* Pills wrap nicely on small screens */
  .hero-step-pill {
    font-size: 13px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    max-width: 100%;
    white-space: nowrap;
  }

  /* Make the main CTA look “app-like” on mobile */
  a.primary-btn,
  .primary-btn {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 18px !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Trust row spacing */
  .trust-row {
    margin-top: 12px !important;
    gap: 10px !important;
    font-size: 13px !important;
  }

  /* Slug chips: allow wrap if needed (prevents overflow) */
  .slug-chip {
    max-width: 100% !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    display: block;
    text-align: center;
  }

  /* =========================================
     Forms
     ========================================= */
  /* 16px prevents iOS Safari zoom-in on focus */
  .input,
  select,
  textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  .form-label {
    font-size: 15px !important;
  }

  /* Checkbox labels align nicer */
  .checkbox-group label {
    align-items: flex-start !important;
    line-height: 1.55 !important;
  }

  /* Fix: Working Days grid overflow */
  .days-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Multi-column rows -> single column */
  .row-12 > .col {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .card-title {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  /* =========================================
     Buttons (generic)
     ========================================= */
  .btn,
  button.btn,
  .btn.primary,
  button.primary,
  .btn.secondary,
  .btn.outline {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  /* =========================================
     Slots
     ========================================= */
  .slot-btn {
    font-size: 16px !important;
    padding: 12px 12px !important;
    min-height: 48px !important;
    flex: 1 1 48% !important;
    min-width: 0 !important; /* prevents overflow on very small phones */
  }

  /* =========================================
     Tables
     ========================================= */
  table {
    font-size: 14px !important;
  }

  th,
  td {
    padding: 10px 12px !important;
  }

  th {
    font-size: 12px !important;
    white-space: nowrap;
  }

  .table-container {
    border-radius: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
    /* =========================================
     Dashboard: Option 1 (tables -> cards)
     ========================================= */

  /* Hide dashboard tables on phones */
  #tab-links .table-container,
  #tab-bookings .table-container {
    display: none !important;
  }

  /* Show the new card lists on phones */
  #tab-links .mobile-cards,
  #tab-bookings .mobile-cards {
    display: grid !important;
  }

  /* Make action buttons look good inside cards */
  .mobile-card-actions .btn,
  .mobile-card-actions button.btn {
    width: auto !important;
    margin-bottom: 0 !important;
  }

  /* Keep action-link buttons readable in cards */
  .mobile-card-actions .action-link {
    font-size: 14px;
  }


  /* =========================================
     Dashboard
     ========================================= */
  .dashboard-section {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .dashboard-title {
    font-size: 22px !important;
  }

  .value-text {
    font-size: 18px !important;
  }

  .badge {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  /* =========================================
     FAQ (details)
     ========================================= */
  details.faq-item {
    border-radius: 14px !important;
  }

  /* Your index uses details.faq-item summary with padding in inline CSS,
     but on other pages it may not — so we add a safe mobile default:
  */
  details.faq-item summary {
    padding: 14px 14px !important;
  }

  .faq-q {
    font-size: 16px !important;
  }

  .faq-a,
  details.faq-item .faq-body {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* =========================================
     Footer
     ========================================= */
  .footer {
    font-size: 13px !important;
    padding: 18px 14px !important;
  }

  .footer-links {
    font-size: 13px !important;
    gap: 8px !important;
  }

  /* Phone verify status pill (mobile only) */
  #phoneVerifyStatus {
    font-size: 13px !important;
    padding: 5px 9px !important;
  }
}

/* =========================================
   Small tablets (481–768px)
   ========================================= */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 17px;
    line-height: 1.65;
  }

  .container,
  .main,
  .section,
  .page-wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero h1 {
    font-size: 44px !important;
  }

  .hero p {
    font-size: 17px !important;
  }

  .card {
    padding: 22px !important;
  }

  .slot-btn {
    min-height: 48px !important;
  }

  .days-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
    #tab-links .table-container,
  #tab-bookings .table-container {
    display: none !important;
  }

  #tab-links .mobile-cards,
  #tab-bookings .mobile-cards {
    display: grid !important;
  }

  .mobile-card-actions .btn,
  .mobile-card-actions button.btn {
    width: auto !important;
    margin-bottom: 0 !important;
  }

}