/* ================================================================
   PINTECH — oem_mobile.css
   Mobile fixes for /oem/ page (oem.php)
   Based on actual source inspection — April 2026

   Deploy: Upload to /css/oem_mobile.css
   Link:   Add to oem.php BEFORE require(header.php):
             $extra_head .= '<link rel="stylesheet" href="/css/oem_mobile.css">';
   ================================================================ */


/* ================================================================
   FIX 1 — HERO STATS GRID
   Source line 145: grid-template-columns:repeat(4,1fr) — 4 cols
   On 360px phone: each cell ~82px, the 9.5px label text wraps badly.
   Fix: 2×2 grid on mobile.
   Also: font-size:9.5px label (line 154) — bump to 11px.
   ================================================================ */
@media (max-width: 640px) {

  /* 4-col stats → 2×2 */
  /* Targets the repeat(4,1fr) grid inside the hero banner */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="max-width:580px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  /* Stat label — 9.5px → 11px */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="max-width:580px"] [style*="font-size:9.5px"] {
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: rgba(255,255,255,0.7) !important;
  }

  /* Stat number — keep at 16px, already fine */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="max-width:580px"] [style*="font-size:16px"] {
    font-size: 18px !important;
  }

  /* Hero banner padding — too much on small screens */
  [style*="background:linear-gradient(135deg,#071828 0%,#0d2d6b"] {
    padding: 18px 16px !important;
    border-radius: 8px !important;
  }

  /* Hero label text — 10px → 12px */
  [style*="background:linear-gradient(135deg,#071828 0%,#0d2d6b"] [style*="font-size:10px"] {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }

  /* Hero H1 — 22px fine but tighten line-height */
  [style*="background:linear-gradient(135deg,#071828 0%,#0d2d6b"] h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }

}


/* ================================================================
   FIX 2 — OEM OPTION CARDS (4 cards explainer)
   Source line 162: grid-template-columns:repeat(4,1fr)
   On mobile: 4 narrow cards with 10.5px description text — unusable.
   Fix: 2×2 grid, larger tap area, bump font.
   ================================================================ */
@media (max-width: 768px) {

  /* 4-col OEM cards → 2×2 */
  /* Distinguished from hero grid by NO max-width:580px */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="margin-bottom:18px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Card description text — 10.5px → 12px */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="margin-bottom:18px"] [style*="font-size:10.5px"] {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  /* Card title — 12px already fine */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="margin-bottom:18px"] [style*="font-size:12px"][style*="font-weight:700"] {
    font-size: 13px !important;
  }

  /* Card padding — a touch more breathing room */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="margin-bottom:18px"] > div {
    padding: 16px 14px !important;
    min-height: 44px; /* tap target */
  }

}

@media (max-width: 400px) {
  /* Very small screens — single column cards */
  [style*="grid-template-columns:repeat(4,1fr)"][style*="margin-bottom:18px"] {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   FIX 3 — TWO-COLUMN MAIN LAYOUT
   Source line 181: grid-template-columns:1fr 320px
   320px sidebar on a 360px phone = layout breaks.
   Fix: single column, sidebar moves below form.
   ================================================================ */
@media (max-width: 768px) {

  [style*="grid-template-columns:1fr 320px"] {
    display: block !important;
  }

  /* Sidebar — move below form with top margin */
  [style*="grid-template-columns:1fr 320px"] > div:last-child {
    margin-top: 20px !important;
  }

}


/* ================================================================
   FIX 4 — FORM SECTION GRIDS (all 1fr 1fr pairs → 1 col)
   Source lines: 204, 222, 232, 242, 261, 293, 318
   All 2-col and 3-col form grids break on mobile.
   ================================================================ */
@media (max-width: 600px) {

  /* OEM type radio grid — 1fr 1fr → 1 col */
  #oemTypeForm {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* OEM type radio labels — min tap height */
  #oemTypeForm label {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    align-items: center !important;
  }

  /* All 1fr 1fr contact/instrument field grids */
  [style*="grid-template-columns:1fr 1fr;gap:10px"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Requirements checklist — 3-col → 2-col */
  #reqChecklist {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Checklist labels — bigger tap target */
  #reqChecklist label {
    min-height: 48px !important;
    padding: 10px 10px !important;
    font-size: 12px !important;
    justify-content: flex-start !important;
  }

  /* Select All / Clear buttons row */
  [style*="display:flex;align-items:center;gap:8px"] button[onclick*="Reqs"] {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* Form section inner padding — reduce on small screens */
  [style*="background:#f8fafc;border-radius:8px;padding:14px"] {
    padding: 14px 12px !important;
  }

  /* Section header labels — 10.5px → 12px */
  [style*="font-size:10.5px;font-weight:700;color:#0d2d6b;text-transform:uppercase"] {
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
  }

}

@media (max-width: 380px) {
  /* Very small: checklist → 1 col */
  #reqChecklist {
    grid-template-columns: 1fr !important;
  }
}


/* ================================================================
   FIX 5 — FORM INPUTS: iOS zoom prevention + tap sizing
   All inputs must be ≥16px font-size to prevent iOS auto-zoom.
   Applies to all inputs and selects in the form.
   ================================================================ */
@media (max-width: 900px) {

  #oemForm input[type="text"],
  #oemForm input[type="email"],
  #oemForm input[type="tel"],
  #oemForm select,
  #oemForm textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 46px !important;
    padding: 10px 12px !important;
    border-radius: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #oemForm textarea {
    min-height: 100px !important;
    font-size: 15px !important;
  }

  #oemForm textarea[rows="5"] {
    min-height: 130px !important;
  }

  /* form-group labels */
  #oemForm .form-group label,
  #oemForm label[style*="font-size"] {
    font-size: 12px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 5px !important;
  }

}


/* ================================================================
   FIX 6 — SUBMIT BUTTONS: full width on mobile
   Source line 342: display:flex;align-items:center;gap:10px;flex-wrap:wrap
   On small screens the two buttons wrap awkwardly side-by-side.
   Fix: stack vertically, full width.
   ================================================================ */
@media (max-width: 480px) {

  /* Submit button row → column */
  #oemForm [style*="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Submit OEM Inquiry button */
  #oemForm button[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    justify-content: center !important;
    border-radius: 7px !important;
  }

  /* WhatsApp Instead button */
  #oemForm a[href*="wa.me"] {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 14px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
  }

  /* Privacy note — 10.5px → 12px */
  #oemForm p[style*="font-size:10.5px"] {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

}


/* ================================================================
   FIX 7 — SIDEBAR CONTENT
   OEM Process, What's Included, Certifications, Contact CTA
   Source: font-size:9px (step numbers), 10px, 10.5px — all too small.
   ================================================================ */
@media (max-width: 900px) {

  /* OEM Process step number bubbles — 9px → 11px */
  [style*="font-size:9px;font-weight:800;color:#fff"] {
    font-size: 11px !important;
  }

  /* OEM Process step description — 10.5px → 12px */
  [style*="font-size:10.5px;color:#5a7090;line-height:1.6"] {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  /* What's Included items — 11.5px fine, but nudge to 12px */
  [style*="font-size:11.5px;color:#3a5070"] {
    font-size: 12px !important;
  }

  /* Factory Certifications heading — 11px → 12px */
  /* Cert detail spans — 10px → 11px */
  [style*="font-size:10px;color:#8a9bb0"] {
    font-size: 11px !important;
  }

  /* PDF link — 10.5px fine */
  [style*="font-size:10.5px;color:#2db84b;font-weight:700"] {
    font-size: 12px !important;
    padding: 4px 0 !important; /* better tap zone */
    display: inline-block !important;
  }

  /* "Prefer to Talk" section — WhatsApp button already OK */
  /* Email link — 11.5px → 12px */
  [style*="font-size:11.5px;color:rgba(255,255,255,.5)"] {
    font-size: 12px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* WhatsApp CTA in sidebar — already flex but ensure min tap */
  [style*="background:#25d366"][style*="padding:10px;border-radius:7px"] {
    min-height: 48px !important;
    font-size: 13px !important;
  }

}


/* ================================================================
   FIX 8 — SUCCESS STATE
   Source line 123: display:flex;gap:10px;justify-content:center
   Buttons wrap but can be too small side-by-side on narrow screens.
   ================================================================ */
@media (max-width: 480px) {

  /* Success state — stack CTA buttons */
  .box[style*="text-align:center"] [style*="display:flex;gap:10px;justify-content:center"] {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  .box[style*="text-align:center"] .btn {
    min-height: 48px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }

  .box[style*="text-align:center"] a[href*="wa.me"] {
    min-height: 48px !important;
    font-size: 13px !important;
    justify-content: center !important;
    border-radius: 7px !important;
  }

}


/* ================================================================
   FIX 9 — FORM BOX PADDING
   Source line 192: padding:22px 24px — too much on narrow screens.
   ================================================================ */
@media (max-width: 480px) {

  #oemForm {
    padding: 0 !important;
  }

  .box[style*="padding:22px 24px"] {
    padding: 16px 14px !important;
  }

}


/* ================================================================
   FIX 10 — GLOBAL OEM PAGE FONT FLOOR
   Catch any remaining sub-12px text not covered above.
   ================================================================ */
@media (max-width: 900px) {

  /* Section sub-labels — "Select all that apply" */
  [style*="font-size:11px;color:#8a9bb0;margin-bottom:12px"] {
    font-size: 12px !important;
  }

  /* Select All / Clear count badge */
  #reqCount {
    font-size: 12px !important;
  }

  /* Box headings — 11px → 12px */
  .box [style*="font-size:11px;font-weight:700;color:#0d2d6b;text-transform:uppercase"] {
    font-size: 12px !important;
  }

}