/* ============================================================================
   coupons.desktop.css — DESKTOP / TABLET (loaded media="(min-width:768px)")
   ----------------------------------------------------------------------------
   Light-2026 relayout matching modules/account/pages/account-hub (grey #F4F5F7
   canvas · white cards · orange accents · soft shadows · roomy multi-column grid
   + hover affordance). Mobile (coupons.css) is the Source-of-Truth and is never
   touched — every rule here is gated to >=768px by the <link media> query and
   scoped to body.ptshell (added by ptcargo-shell.js; phone-frame neutralised in
   appshell.css). Loads LAST so these rules win over coupons.css at desktop width.
   ============================================================================ */

/* ---- canvas: light-2026 grey behind white cards ---- */
body.ptshell{background:#F4F5F7}

/* ---- page-title bar: light card look; back arrow redundant beside sidebar ---- */
.page-header .ib{display:none}
body.ptshell header.page-header{position:static;background:#fff;border-bottom:1px solid #EAECEF}

/* ---- centred content column beside the AppShell sidebar ---- */
body.ptshell main.page{max-width:1180px;margin-inline:auto;padding:14px 24px 44px}

/* ---- redeem card: roomier ---- */
body.ptshell .redeem{padding:20px 22px}
body.ptshell .rrow input{height:50px}
body.ptshell .rbtn{height:50px;padding:0 24px;transition:transform .14s ease,box-shadow .14s ease}
body.ptshell .rbtn:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(239,95,6,.9)}

/* ---- tabs: pills sit left (not stretched full width) ---- */
body.ptshell .tabs{justify-content:flex-start;overflow:visible;flex-wrap:wrap}
body.ptshell .tab{flex:0 0 auto;padding:10px 22px;font-size:13px;transition:transform .12s ease,border-color .12s,background .12s}
body.ptshell .tab:not(.on):hover{border-color:#FFD8BE;background:#FFF7F1}

/* ---- coupon tickets: responsive grid (2–3 up) with hover lift ---- */
body.ptshell #listHost .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
body.ptshell .tk{transition:transform .16s ease,box-shadow .16s ease}
body.ptshell .tk:not(.off):hover{transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(20,25,35,.32)}
/* the ticket "bite" notches must show the page canvas through — match desktop bg */
body.ptshell .tk::before,body.ptshell .tk::after{background:#F4F5F7}
body.ptshell .use{transition:transform .14s ease,box-shadow .14s ease}
body.ptshell .use:hover{transform:translateY(-1px);box-shadow:0 14px 26px -14px rgba(239,95,6,.85)}
body.ptshell .ccode{transition:transform .12s ease,background .12s}
body.ptshell .ccode:hover{transform:translateY(-1px);background:#F6E4D2}

/* ---- คูปองที่เก็บได้ / "คูปองมาจากไหน": 2 คอลัมน์บนจอกว้าง ---- */
body.ptshell .coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
body.ptshell .col{transition:transform .16s ease,box-shadow .16s ease}
body.ptshell .col:hover{transform:translateY(-2px);box-shadow:0 20px 40px -26px rgba(20,25,35,.3)}
body.ptshell .colbtn{transition:transform .12s ease,border-color .12s,background .12s}
body.ptshell .colbtn:not(:disabled):hover{background:#FFF7F1;border-color:var(--sun-deep)}
body.ptshell .colways:not([hidden]){display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}

/* ---- empty-state: a touch more breathing room on wide screens ---- */
body.ptshell .empty{padding:56px 20px}

/* ---- >=1100: firmly 3-up ticket grid so wide screens use their width ---- */
@media (min-width:1100px){
  body.ptshell #listHost .list{grid-template-columns:repeat(3,1fr)}
}