/* v504G — mobile UI audit fixes after v503G.
   Scope: public customer-facing pages only. Keeps desktop layout unchanged. */

@media (max-width: 980px){
  /* v502G follow-up: keep the Fees purpose table in card mode on mobile.
     The desktop clipping fix must not restore a wide table on phones. */
  body.fees-page .fees-table-purpose-v480G{
    min-width:0 !important;
    width:100% !important;
    table-layout:auto !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
  }

  body.fees-page .fees-table-purpose-v480G thead{
    display:none !important;
  }

  body.fees-page .fees-table-purpose-v480G tbody,
  body.fees-page .fees-table-purpose-v480G tr,
  body.fees-page .fees-table-purpose-v480G td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.fees-page .fees-table-purpose-v480G th:nth-child(1),
  body.fees-page .fees-table-purpose-v480G td:nth-child(1),
  body.fees-page .fees-table-purpose-v480G th:nth-child(2),
  body.fees-page .fees-table-purpose-v480G td:nth-child(2),
  body.fees-page .fees-table-purpose-v480G th:nth-child(3),
  body.fees-page .fees-table-purpose-v480G td:nth-child(3){
    width:100% !important;
  }

  body.fees-page .fees-table-purpose-v480G td:nth-child(3){
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  /* Hero and CTA cleanup on service pages: no button/text overflow on phones/tablets. */
  body:not([class*="admin"]) .page-hero .hero-actions,
  body:not([class*="admin"]) .hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  body:not([class*="admin"]) .page-hero .hero-actions .btn,
  body:not([class*="admin"]) .hero .hero-actions .btn{
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
  }

  body:not([class*="admin"]) .trust-signal-bar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
}

@media (max-width: 640px){
  /* General mobile guardrails for public pages. */
  body:not([class*="admin"]) .container,
  body:not([class*="admin"]) .order-shell,
  body:not([class*="admin"]) .form-shell,
  body:not([class*="admin"]) main > .section > .container{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  body:not([class*="admin"]) .page-hero h1,
  body:not([class*="admin"]) .hero h1,
  body:not([class*="admin"]) .urgent-hero h1,
  body:not([class*="admin"]) .addon-hero h1{
    max-width:100% !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  body:not([class*="admin"]) .page-hero p,
  body:not([class*="admin"]) .hero p,
  body:not([class*="admin"]) .section-lead,
  body:not([class*="admin"]) .muted{
    max-width:100% !important;
  }

  body:not([class*="admin"]) .urgent-visual-card,
  body:not([class*="admin"]) .home-image-panel,
  body:not([class*="admin"]) .media-card{
    max-width:100% !important;
    overflow:hidden !important;
  }

  body:not([class*="admin"]) img{
    max-width:100% !important;
  }

  /* Order form: keep guide samples compact on phones without forcing a very long single-column portrait guide. */
  .portrait-guide-grid-v496G{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:6px !important;
  }

  .portrait-guide-item-v496G{
    min-width:0 !important;
    padding:5px !important;
  }

  .portrait-guide-item-v496G img{
    max-width:112px !important;
  }

  .passport-upload-guide-v489G,
  .portrait-upload-guide-v496G{
    padding:8px !important;
  }
}

@media (max-width: 420px){
  .portrait-guide-grid-v496G{
    grid-template-columns:1fr !important;
  }

  .portrait-guide-item-v496G img{
    max-width:140px !important;
  }
}