/* ============================================================
   MOBILE APP-VIEW SYSTEM & SHELL
   ============================================================ */

/* Mobile App Shell Basics */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --app-bar-height: 60px;
  --app-bottom-bar: 80px;
}

/* Mobile hide logic (default hidden on desktop) */
.mobile-only { display: none !important; }
.mobile-only-flex { display: none !important; }
.mobile-sticky-action-bar { display: none !important; }

@media (max-width: 768px) {
  /* Prevent horizontal scroll, force app view */
  html, body {
    overflow-x: hidden;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  /* Show mobile-only elements */
  .mobile-only { display: block !important; }
  .mobile-only-flex { display: flex !important; }
  .mobile-sticky-action-bar { display: flex !important; }
  .desktop-only { display: none !important; }
  .floating-wa-btn { display: none !important; } /* Replaced by sticky bar */

  body {
    padding-top: calc(var(--app-bar-height) + var(--safe-area-top)) !important;
    padding-bottom: calc(var(--app-bottom-bar) + var(--safe-area-bottom) + 20px) !important;
    background: #0b0d13 !important; /* Pitch black / dark gray app wrapper */
  }

  /* Typography Scale */
  body, h1, h2, h3, h4, h5, h6, p, a, span, div, input, button {
    font-family: 'Lexend', -apple-system, sans-serif !important;
  }
  
  h1, .hero-title, .section-title-mega { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -0.02em; font-weight: 700 !important; }
  h2, .section-title, .category-title   { font-size: 20px !important; line-height: 1.3 !important; font-weight: 600 !important; }
  h3, .cta-title                        { font-size: 18px !important; line-height: 1.3 !important; font-weight: 500 !important; }
  p, .hero-subtitle, .section-subtitle  { font-size: 14px !important; line-height: 1.5 !important; color: #a1a1aa !important; }

  /* App Surface Language (Cards & Sections) */
  .hero-section {
    padding: 30px 16px 40px !important;
    background: transparent !important; /* Remove heavy gradients */
  }

  .programs-section, .features-section, .steps-section, .faq-section, .cta-section {
    padding: 30px 16px !important;
    background: #000 !important; /* Pure black */
  }

  /* StanShop aesthetic: No heavy shadow, strict thin border, compact padding */
  .neomorph-card, .program-card, .feature-card, .step-item, .testimonial-card, .panel, .summary-card-shell, .supported-seo-card, .mp-card, .calc-card, .u-card {
    background: #121212 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
  }
  
  /* Safe Area Spacing on main structural shells */
  .page-shell, .grid-main {
    padding: 12px 0 !important;
    margin-top: 0 !important;
  }
  
  .grid-main {
    gap: 12px !important;
  }

  /* Form Fields Overrides */
  .input-container {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 0 !important;
  }
  
  .input-container input, .input-container select, .input-container textarea {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 16px !important;
    min-height: 56px !important;
  }
  
  /* Primary Action Buttons */
  .cashard-submit-btn, .btn-sell, .stan-btn-primary {
    background: #fff !important;
    color: #000 !important;
    border-radius: 99px !important;
    height: 56px !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .cashard-submit-btn::before, .cashard-submit-btn::after {
    display: none !important;
  }

  /* Add StanShop Coin Badge Style over the native rates */
  .program-rate, .card-gradient-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: rgba(168, 85, 247, 0.15) !important; /* light purple matching standard StanShop vibes */
    color: #c084fc !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    box-shadow: none !important;
  }
  
  .program-min {
    display: block !important;
    margin-top: 4px;
    font-size: 13px !important;
    color: #fff !important;
    font-weight: 500 !important;
    text-decoration: line-through; /* Mimic old strike price */
    opacity: 0.5;
  }

  /* Space reduction */
  .section-header-mega, .section-header { margin-bottom: 30px !important; }

  /* Forms & Touch Targets */
  input, select, textarea, .form-input, .form-select, .oi4-inp, .neomorph-inset {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    padding: 16px 20px !important;
    border-radius: 16px !important;
    height: 56px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }

  button, .btn, .neomorph-button, .btn-xl, .oi4-btn, .btn-view-all {
    border-radius: 99px !important; /* App pill buttons */
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0 24px !important;
    width: 100% !important;
  }



  /* Native App Header Override */
  #cashard-nav { display: none !important; }
  .nav-mobile { display: none !important; }

  .app-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: #12141A;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10000;
      border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .app-header .logo { font-size: 20px; font-weight: 800; color: #FFB800; text-decoration: none; letter-spacing: -0.5px; }
  .app-header .logo span { color: #FFF; }
  .app-header .icons { display: flex; align-items: center; gap: 16px; color: #ced4da; font-size: 20px; }
  .app-header .user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,184,0,0.5); }


  .nav-logo-text { font-size: 20px !important; }
  .mobile-menu-btn { font-size: 24px !important; color: #fff !important; }

  /* Hide raw desktop elements safely */
  .desktop-only { display: none !important; }
  .floating-wa-btn { display: none !important; }
  .cs-topbar { display: none !important; } /* Hide bulky announcement bar on mobile app view */
  .ticker-wrap { display: none !important; } /* Hide heavy stock ticker on mobile app view */

  /* ============================================================
     LAYOUT GRID COLLAPSE — Force single-column on all pages
     ============================================================ */
  
  /* Sell Flow — 2-col grid to single column */
  .grid-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  
  .page-shell {
    padding: 16px 0 40px !important;
    margin-top: 0 !important;
  }
  
  /* Sell Hub */
  .hub-categories,
  .hub-hiw-grid,
  .hub-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .hub-hero h1 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  
  .hub-hero-sub {
    font-size: 14px !important;
    padding: 0 8px !important;
  }
  
  .hub-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  .hub-stat {
    padding: 12px 16px !important;
    text-align: center !important;
  }
  
  .hub-stat-num {
    font-size: 22px !important;
  }
  
  .hub-cat-card {
    padding: 20px !important;
  }
  
  .hub-cat-title {
    font-size: 18px !important;
  }
  
  .hub-section-title {
    font-size: 22px !important;
  }
  
  .hub-hiw-card {
    padding: 20px !important;
  }
  
  .hub-trust-item {
    padding: 16px !important;
  }
  
  .hub-cta-btn {
    padding: 14px 28px !important;
    font-size: 15px !important;
    width: 100% !important;
    justify-content: center !important;
  }
  
  .hub-cta-bottom {
    padding: 40px 16px !important;
  }
  
  /* Sell Form — payout card and supported section */
  .outer-payout {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .supported-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  .supported-seo-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .supported-section {
    margin-top: 24px !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }
  
  .supported-title {
    font-size: 22px !important;
  }
  
  .grid-step3 {
    grid-template-columns: 1fr !important;
  }
  
  .submit-row {
    justify-content: center !important;
  }
  
  .cashard-submit-btn {
    width: 100% !important;
  }
  
  .program-card-animated {
    max-width: 100% !important;
  }
  
  /* Summary sidebar — needs to look clean when stacked */
  aside[aria-label="Order summary & payout details"] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  
  /* ============================================================
     HOMEPAGE V2 — Desktop CSS overrides
     ============================================================ */
  .hero-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .hero-title {
    font-size: 26px !important;
  }

  .hero-btns {
    flex-direction: column !important;
  }
  
  .hero-sub {
    font-size: 14px !important;
  }
  
  .hero-trust {
    justify-content: center !important;
  }
  
  .calc-widget {
    max-width: 100% !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }
  
  .cat-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .dual-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .dual-card {
    padding: 28px 20px !important;
  }
  
  .stats-belt-inner {
    grid-template-columns: 1fr !important;
  }
  
  .trust-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  .testi-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  .timeline {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .timeline::before {
    display: none !important;
  }
  
  /* Marketplace table — scrollable horizontal */
  .mkt-container {
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  
  .mkt-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-width: 600px !important;
  }
  
  .mkt-head {
    padding: 16px !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .bottom-cta {
    padding: 32px 16px !important;
    border-radius: 20px !important;
  }
  
  .bottom-cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  /* ============================================================
     PROGRAM PAGES & ALL-PROGRAMS
     ============================================================ */
  .program-grid,
  .programs-grid,
  .all-programs-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  /* How It Works page */
  .how-tabs {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  
  .how-tab {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }

  /* ============================================================
     BUY POINTS / MARKETPLACE
     ============================================================ */
  .mp-grid,
  .buy-grid,
  .marketplace-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  /* Marketplace filters — stack */
  .mp-filters,
  .marketplace-filters {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .mp-filter-input,
  .marketplace-search {
    width: 100% !important;
  }
  
  /* ============================================================
     MY ORDERS — Table to cards
     ============================================================ */
  .orders-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .orders-table {
    min-width: 700px !important;
  }
  
  /* ============================================================
     UPLOAD DOCUMENTS
     ============================================================ */
  .upload-zone,
  .drop-zone {
    padding: 24px 16px !important;
    border-radius: 16px !important;
    min-height: 120px !important;
  }
  
  .upload-zone label,
  .drop-zone label {
    font-size: 14px !important;
  }
  
  /* ============================================================
     FOOTER & FLOATING ELEMENTS — Bottom nav clearance
     ============================================================ */
  
  /* Cookie consent — position above bottom nav */
  #cookie-consent {
    bottom: 80px !important;
    padding: 16px !important;
  }
  
  #cookie-consent .cc-inner {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  #cookie-consent .cc-actions {
    width: 100% !important;
  }
  
  #cookie-consent .cc-btn {
    flex: 1 !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  
  /* Award flight pill — HIDDEN on mobile (redundant with bottom nav, causes overlap) */
  #award-flight-pill {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* WhatsApp float — hidden on mobile */
  #whatsapp-float {
    display: none !important;
  }
  
  .wa-float {
    display: none !important;
  }
  
  /* Smart search trigger — above bottom nav */
  #cashard-search-trigger {
    bottom: 90px !important;
    right: 16px !important;
    z-index: 9990 !important;
  }
  
  /* Transaction feed — hidden on mobile */
  .txn-feed {
    display: none !important;
  }
  
  /* Footer — extra bottom padding */
  .cashard-footer {
    padding-bottom: 100px !important;
  }
  
  .cashard-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  /* ============================================================
     INLINE-STYLE GRID OVERRIDES — Force stacking on pages with
     inline grid-template-columns (how-it-works, contact, etc.)
     These use [style*=] attribute selectors + !important to beat
     inline styles set directly on elements.
     ============================================================ */
  
  /* Force ALL inline grids to single column on mobile */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Force inline flex-row layouts into column on mobile */
  [style*="display:flex"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [style*="display: flex"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  /* Contact cards — override min-width/max-width to fill viewport */
  [style*="min-width: 280px"][style*="max-width: 420px"],
  [style*="min-width:280px"][style*="max-width:420px"] {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* How-it-works hero section — smaller padding on mobile */
  section[style*="padding:80px"] {
    padding: 40px 16px !important;
  }
  section[style*="padding: 80px"] {
    padding: 40px 16px !important;
  }
  
  /* Reviews grid — force single column */
  .rev-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  /* Rating summary — wrap nicely on mobile */
  .rating-summary {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px 16px !important;
  }
  
  .rating-bars {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* ============================================================
     CONTENT / INFO PAGES — Readable on mobile
     ============================================================ */
  .content-section,
  .info-section,
  .legal-content,
  .policy-content,
  .seo-block {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  
  .seo-block h2 {
    font-size: 18px !important;
  }
  
  /* FAQ accordion — larger touch targets */
  .faq-q {
    padding: 16px 18px !important;
    min-height: 56px !important;
  }
  
  .faq-list {
    max-width: 100% !important;
  }
  
  /* Contact form */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Reviews */
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  /* Referral */
  .referral-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* ============================================================
     ANNOUNCE BAR — hidden on mobile
     ============================================================ */
  .announce {
    display: none !important;
  }
  
  /* ============================================================
     BACKGROUND EFFECTS — disable on mobile for performance
     ============================================================ */
  .noise,
  .grid-bg,
  .orb,
  .orb1,
  .orb2,
  .orb3,
  .particle {
    display: none !important;
  }
  
  /* Loader */
  #loader {
    display: none !important;
  }
  
  /* Scroll progress */
  #scroll-progress {
    display: none !important;
  }
  
  /* Pattern BG */
  .pattern-bg {
    display: none !important;
  }
  
  /* ============================================================
     TABLE UNIVERSAL OVERRIDE — Prevent all table overflow
     ============================================================ */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
  
  /* ============================================================
     CONTAINER MAX-WIDTH CLAMP — Prevent overflow
     ============================================================ */
  .container,
  .cashard-app-content,
  .cashard-app-container,
  [style*="max-width: 1200px"],
  [style*="max-width:1200px"],
  [style*="max-width: 1240px"],
  [style*="max-width:1240px"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-x: hidden !important;
  }
  
  /* Image overflow prevention */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Back to top button — above bottom nav */
  #cs-back-top {
    bottom: 90px !important;
    right: 16px !important;
  }
}

/* Skeleton Loaders for Mobile */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}