/* ===== AGENT EDGE — MASTER MOBILE RESPONSIVE FIXES ===== */
/* Include this file on every page: <link rel="stylesheet" href="mobile-fixes.css"> */

/* ===== GLOBAL MOBILE — 768px and below ===== */
@media (max-width: 768px) {

  /* Body padding */
  body { padding-bottom: 60px !important; }

  /* Page titles */
  h1 { font-size: 24px !important; padding: 0 16px; }
  h2 { font-size: 20px !important; }
  .section-title { font-size: 26px !important; }
  .section-subtitle { font-size: 14px !important; margin-bottom: 30px !important; }
  .page-title { font-size: 26px !important; }

  /* Portal nav — stack vertically */
  .portal-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 12px; }
  .portal-nav a { font-size: 15px !important; margin: 0 !important; padding: 8px 14px; background: rgba(255,255,255,0.5); border-radius: 10px; border: 1px solid rgba(110,127,119,0.15); }

  /* Fixed top-right buttons — stack vertically or resize */
  .profile-icon { left: 12px !important; right: auto !important; width: 40px !important; height: 40px !important; top: 12px !important; }
  .profile-icon svg { width: 18px; height: 18px; }
  .profile-icon .profile-tooltip { display: none !important; }
  .logout-btn { right: 58px !important; top: 16px !important; padding: 6px 10px !important; font-size: 11px !important; }
  .cart-icon { top: 12px !important; right: 12px !important; width: 40px !important; height: 40px !important; }
  .cart-icon svg { width: 20px; height: 20px; }

  /* Push page title below fixed header buttons */
  h1 { margin-top: 50px !important; font-size: 20px !important; }

  /* Tutorial modal — full screen on mobile */
  #mktsInfoModal { align-items: flex-start !important; padding: 0 !important; }
  #mktsInfoModal > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #mktsInfoModal #mktsTutSlides {
    padding: 20px 16px 10px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }
  #mktsInfoModal .tut-title { font-size: 18px !important; }
  #mktsInfoModal .tut-body { font-size: 13px !important; }
  #mktsInfoModal .tut-body p { margin-bottom: 10px !important; }

  /* Guide button — smaller on mobile */
  .mkts-guide-btn { font-size: 11px !important; padding: 6px 14px !important; }

  /* Return/back buttons at bottom */
  .return-home { position: static !important; text-align: center; padding: 20px 16px; }
  .return-main { position: static !important; display: block !important; text-align: center; margin: 20px 16px !important; }
  .back-btn { display: block !important; text-align: center !important; margin: 16px auto !important; }

  /* Page wrap */
  .page-wrap { padding: 0 14px !important; }

  /* Date bar */
  .date-bar { padding: 0 16px !important; font-size: 18px !important; }

  /* Rate ticker — stop animation, stack rates */
  .rate-ticker { padding: 10px 0 !important; }
  .ticker-track { width: 100% !important; animation: none !important; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .ticker-line { width: 100% !important; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 0 12px; }
  .ticker-line:nth-child(2) { display: none !important; } /* Hide the duplicate line */
  .ticker-line span { margin-right: 0 !important; font-size: 13px !important; }
  /* Front-end site ticker */
  .rate-ticker-line { flex-wrap: wrap !important; justify-content: center !important; gap: 6px 14px !important; }
  .rate-ticker-line span { margin-right: 0 !important; font-size: 12px !important; }

  /* Blog/briefing section */
  .blog-section { padding: 30px 18px !important; margin-top: 30px !important; border-radius: 16px !important; }
  .brief-update-time { position: static !important; display: block; text-align: center; margin-bottom: 16px; }

  /* Card grids — single column */
  .blog-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .wing-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .tool-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .posts-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Cards — reduce min height */
  .blog-card { min-height: auto !important; }
  .wing-card { min-height: auto !important; }
  .tool-card { min-height: auto !important; }

  /* Wing card last child centering fix */
  .wing-grid .wing-card:last-child:nth-child(odd) { max-width: none !important; grid-column: auto !important; }

  /* Events */
  .event-row { padding: 8px 16px !important; }
  .events-header { padding: 20px 16px 10px !important; }
  .events-header .events-title { font-size: 18px !important; }
  .brief-header { padding: 20px 16px 10px !important; }
  .brief-header h3 { font-size: 18px !important; }

  /* Week review */
  .week-review-card { padding: 20px 18px !important; }

  /* Content sections with padding */
  .content-section { padding: 30px 18px !important; border-radius: 16px !important; }

  /* Cart modal — full width */
  .cart-modal { max-width: 100% !important; width: 100% !important; border-radius: 18px 18px 0 0 !important; top: auto !important; bottom: -100% !important; transform: none !important; }
  .cart-modal.active { bottom: 0 !important; right: 0 !important; }

  /* Forms */
  .form-row { flex-direction: column !important; gap: 0 !important; }
  .form-input, .form-select, .form-textarea { font-size: 16px !important; } /* Prevents iOS zoom */
  .filter-bar { flex-direction: column !important; gap: 10px !important; }

  /* Signup/profile cards */
  .signup-card { padding: 30px 18px !important; width: 95% !important; }
  .profile-card { padding: 30px 18px !important; }

  /* Scroll boxes */
  .scroll-box { padding: 18px !important; max-height: 200px !important; }

  /* Read more buttons */
  .read-more-btn { font-size: 13px !important; padding: 10px 18px !important; display: block !important; text-align: center !important; }

  /* Admin link */
  #adminLink { display: none !important; }
}

/* ===== SMALL MOBILE — 480px and below ===== */
@media (max-width: 480px) {
  h1 { font-size: 20px !important; }
  .section-title { font-size: 22px !important; }
  .portal-nav a { font-size: 13px !important; padding: 6px 10px; }
  .blog-section { padding: 22px 14px !important; }
  .event-row { padding: 6px 12px !important; }
  .headline { font-size: 14px !important; }
  .day { width: 32px !important; font-size: 13px !important; }
}

/* ===== FLYER PAGES (buyers, sellers, financing, construction, education, open-house) ===== */
@media (max-width: 768px) {
  .flyer-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .flyer-card img { height: 160px !important; }
  .flyer-card h3 { font-size: 14px !important; }

  /* Marketing collection gallery */
  .studio-gallery { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Studio panels (flyer generators) */
  .studio-panel { width: 95% !important; max-width: none !important; padding: 20px !important; }
  .studio-grid { grid-template-columns: 1fr !important; }

  /* Panel thumbnails */
  .panel-thumbs { flex-wrap: wrap !important; gap: 8px !important; }
  .thumb { width: 80px !important; height: 100px !important; }

  /* Lightbox */
  .lightbox-inner { width: 95% !important; max-width: none !important; }
  .lightbox img { max-height: 60vh !important; }
}

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

/* ===== CALCULATOR / REPORT PAGES ===== */
@media (max-width: 768px) {
  /* Generator panels */
  .generator-panel { max-width: 100% !important; margin: 16px !important; padding: 20px 16px !important; }
  .gen-grid { grid-template-columns: 1fr !important; }
  .gen-title { font-size: 16px !important; }

  /* Report views */
  .report-container { padding: 0 10px !important; }
  .report-nav { flex-wrap: wrap !important; gap: 6px !important; }
  .report-nav a, .report-nav button { padding: 8px 14px !important; font-size: 12px !important; }

  /* Report sections */
  .report-page { border-radius: 12px !important; }
  .hero, .rpt-hero { padding: 20px 16px !important; }
  .rpt-section { padding: 16px !important; }

  /* KPI grids */
  .rpt-kpi-grid, .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .rpt-kpi { padding: 12px !important; }
  .rpt-kpi-value { font-size: 20px !important; }

  /* Hero verdicts (calc pages) */
  .hero-verdict { grid-template-columns: 1fr !important; gap: 16px !important; text-align: center !important; }
  .verdict-number { text-align: center !important; padding-right: 0 !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 16px !important; }
  .verdict-amount { font-size: 36px !important; }

  /* Monthly layout (payment calc) */
  .monthly-layout { grid-template-columns: 1fr !important; }

  /* Amortization and comparison tables */
  .amort-table, .comparison-table, .econ-table { font-size: 11px !important; }
  .amort-table th, .amort-table td, .comparison-table th, .comparison-table td { padding: 6px 8px !important; }

  /* Matrix tables (buying power) */
  .matrix-table { font-size: 10px !important; }
  .matrix-table td, .matrix-table th { padding: 4px 6px !important; }

  /* Assumptions bar */
  .assumptions-bar { padding: 12px 16px !important; flex-wrap: wrap !important; }

  /* Bottom line */
  .bottom-line { padding: 16px !important; }
}

/* ===== SCENARIO DESK ===== */
@media (max-width: 768px) {
  .gus-container, .review-container { padding: 20px 16px !important; border-radius: 14px !important; }
  .gus-intro { flex-direction: column !important; text-align: center !important; }
  .gus-intro img { width: 80px !important; height: 80px !important; }
  .scenario-type-row { flex-direction: column !important; }
  .gus-example-chips { flex-direction: column !important; }
  .desk-header h1 { font-size: 26px !important; }
  .page-bg { padding: 20px 12px 60px !important; }
}

/* ===== MARKET PULSE ===== */
@media (max-width: 768px) {
  .pulse-layout { grid-template-columns: 1fr !important; }
  .state-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .chart-container { height: 250px !important; }
}

@media (max-width: 480px) {
  .state-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ===== MARKET INTELLIGENCE (report builder) ===== */
@media (max-width: 768px) {
  .mi-layout { grid-template-columns: 1fr !important; }
  .pool-grid { grid-template-columns: 1fr !important; }
  .kit-grid { grid-template-columns: 1fr !important; }
  .input-grid { grid-template-columns: 1fr !important; }
  .prop-grid { grid-template-columns: 1fr !important; }
}

/* ===== LOAN COMPARISON ===== */
@media (max-width: 768px) {
  .compare-grid { grid-template-columns: 1fr !important; }
  .loan-card { min-width: auto !important; }
}

/* ===== CREDIT SCORE SIMULATOR ===== */
@media (max-width: 768px) {
  .sim-layout { grid-template-columns: 1fr !important; }
  .sim-panel { min-width: auto !important; }
  .score-display { font-size: 48px !important; }
}

/* ===== PROPERTY WEBSITES ===== */
@media (max-width: 768px) {
  .templates-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .template-card { padding: 14px 10px !important; }
  .template-card img { height: 140px !important; }
  .editor-layout { grid-template-columns: 1fr !important; }
  .editor-panel { max-height: none !important; }
}

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

/* ===== MESSAGING — ON DEMAND STUDIO ===== */
@media (max-width: 768px) {
  .ondemand-layout { grid-template-columns: 1fr !important; }
  .platform-checks { grid-template-columns: 1fr 1fr !important; }
}

/* ===== MESSAGING — GRAB & GO ===== */
@media (max-width: 768px) {
  .creator-layout { grid-template-columns: 1fr !important; }
  .creator-modal { width: 98% !important; max-height: 95vh !important; }
  .modal-body { padding: 16px !important; }
  .image-results { grid-template-columns: repeat(2, 1fr) !important; }
  .posts-grid { grid-template-columns: 1fr !important; }
}

/* ===== MESSAGING — IMAGE LIBRARY ===== */
@media (max-width: 768px) {
  .category-grid { grid-template-columns: 1fr !important; }
  .category-card { min-width: auto !important; }
}

/* ===== EDUCATION PAGES ===== */
@media (max-width: 768px) {
  /* Income calculators */
  .calc-layout { grid-template-columns: 1fr !important; }
  .calc-panel { min-width: auto !important; }

  /* Loan guide pages */
  .guide-layout { grid-template-columns: 1fr !important; }
  .guide-sidebar { display: none; } /* Hide sidebar on mobile, content is primary */

  /* Credit tools */
  .credit-layout { grid-template-columns: 1fr !important; }
}

/* ===== BUY VS RENT / WEALTH REPORTS ===== */
@media (max-width: 768px) {
  .comparison-layout { grid-template-columns: 1fr !important; }
  .scenario-grid { grid-template-columns: 1fr !important; }
  .wealth-grid { grid-template-columns: 1fr !important; }
}

/* ===== COLLECTION LANDING PAGES (marketing, advisory, education, messaging) ===== */
@media (max-width: 768px) {
  .panel-grid { grid-template-columns: 1fr !important; }
  .panel-thumbs { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
  .panel-thumbs .thumb { width: 70px !important; height: 90px !important; }

  /* Wing features list */
  .wing-features { font-size: 13px !important; }
  .wing-preview { display: none !important; } /* Hide large preview images on mobile */
  .wing-body { padding: 20px 18px !important; }
  .wing-btn, .panel-btn, .tool-btn { display: block !important; text-align: center !important; width: 100% !important; box-sizing: border-box !important; }
}

/* ===== PROFILE PAGE ===== */
@media (max-width: 768px) {
  .profile-card { width: 95% !important; padding: 30px 18px !important; }
  .headshot-circle { width: 90px !important; height: 90px !important; }
  .pw-section { padding: 14px !important; }
}

/* ===== SELLER STRATEGY CALCULATOR ===== */
@media (max-width: 768px) {
  .strategy-grid { grid-template-columns: 1fr !important; }
  .strategy-card { min-width: auto !important; }
}

/* ===== NEIGHBORHOOD BLUEPRINT / WORTH THE PREMIUM ===== */
@media (max-width: 768px) {
  .blueprint-layout { grid-template-columns: 1fr !important; }
  .premium-layout { grid-template-columns: 1fr !important; }
  .comparison-cards { grid-template-columns: 1fr !important; }
}

/* ===== UNIVERSAL: Prevent horizontal scroll ===== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  * { max-width: 100vw; }
  img { max-width: 100% !important; height: auto !important; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  canvas { max-width: 100% !important; }
}

/* ===== iOS INPUT ZOOM FIX ===== */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="url"],
  select, textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
  }
}