/* ============================================================================
   payment-slip.desktop.css — "light theme 2026" desktop layer (>=768px)
   Loaded via a media-gated <link> and scoped to body.ptshell (AppShell). MOBILE
   is the Source-of-Truth and is never touched by this block. payment = ORANGE
   accent (unchanged). This page has no dark page-hero; its summary banner (.amtb)
   is already light. So light-2026 here = light canvas + centered content column,
   the .amtb summary → rounded white-card chrome, cards get hairline + soft shadow,
   the slip dropzone gets a soft #F7F8FA fill + orange focus ring, and #payState is
   laid out 2-column (invoice + upload on the left, PromptPay/bank on the right).
   The PromptPay strip (.pp-top teal→navy) is the Thai-QR brand and is kept.
   ============================================================================ */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}

  /* the page's own sticky header is redundant beside the shell topbar */
  body.ptshell>header{display:none}

  /* summary banner (lives above main.page) → centered light-2026 card, keeps its
     light-orange gradient identity. Width = content column 1180 − 2×24 (main.page
     side padding) = 1132, so the banner's edges line up with the cards below
     instead of overhanging them by 48px. */
  body.ptshell .amtb{
    max-width:1132px;margin:16px auto 0;padding:20px 24px;
    border:1px solid #E8EAEF;border-bottom:1px solid #E8EAEF;border-radius:20px;
    box-shadow:0 22px 48px -30px rgba(20,25,35,.28)
  }
  /* screen 2 (after pressing "ส่งสลิปการชำระเงิน"): shrink the banner to the same
     640 column as the confirmation card so the two layers line up */
  body.ptshell.slip-sent .amtb{max-width:640px}

  /* centered content column */
  body.ptshell main.page{max-width:1180px;margin-inline:auto;padding:16px 24px 40px}

  /* cards: hairline + soft shadow (light-2026) */
  body.ptshell .card{border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
  /* soften the PromptPay card's heavy blue shadow to a neutral one (brand teal header stays) */
  body.ptshell .paycard{box-shadow:0 18px 44px -30px rgba(20,25,35,.22)}

  /* --- pay state → 2-column: invoice + upload (left), PromptPay/bank (right) --- */
  body.ptshell #payState{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:20px;align-items:start
  }
  body.ptshell #payState>*+*{margin-top:0}                 /* neutralise CARD STANDARD gap; grid gap handles it */
  body.ptshell #invSection{grid-column:1;grid-row:1}
  body.ptshell #payState>.card:last-child{grid-column:1;grid-row:2}   /* upload-slip card */
  body.ptshell #qrSection{grid-column:2;grid-row:1/span 2}
  body.ptshell #bankSection{grid-column:2;grid-row:1/span 2}

  /* slip dropzone: soft fill + orange focus/hover ring */
  body.ptshell .upload{background:#F7F8FA;border-color:#E2E5EA;transition:border-color .14s,box-shadow .14s,background .14s}
  body.ptshell #upwrap .upload:hover,
  body.ptshell #upwrap .upload:focus-visible{
    border-color:#EF5F06;background:#FFF7F1;color:var(--cta-deep);
    box-shadow:0 0 0 3px rgba(242,86,11,.12)
  }

  /* wait/confirmation state → tidy single centered column with a little more breathing room */
  body.ptshell #waitState{max-width:640px;margin-inline:auto}
  body.ptshell #waitState>*+*{margin-top:16px}
  body.ptshell #waitState>.card:first-child{padding:34px 28px}
}

@media (min-width:1280px){
  body.ptshell .amtb{max-width:1192px}          /* 1240 − 2×24, stays aligned with the cards */
  body.ptshell.slip-sent .amtb{max-width:640px} /* screen 2 keeps the 640 column */
  body.ptshell main.page{max-width:1240px}
}