/* V228 — one-screen package modal, no internal scrolling on desktop */
@media (min-width:981px){
  .flex-package-modal{padding:14px!important;align-items:center!important;overflow:hidden!important}
  .flex-package-modal-dialog{
    width:min(1580px,98vw)!important;
    height:min(950px,96vh)!important;
    max-height:96vh!important;
    overflow:hidden!important;
    padding:16px 20px 18px!important;
    display:flex!important;
    flex-direction:column!important;
    border-radius:24px!important;
  }
  .flex-package-modal-head{
    flex:0 0 auto!important;
    padding-bottom:10px!important;
    margin-bottom:0!important;
    min-height:78px!important;
    align-items:center!important;
  }
  .flex-package-modal-head h3{font-size:27px!important;margin:3px 0 2px!important;line-height:1.05!important}
  .flex-package-modal-head p{font-size:12px!important;line-height:1.25!important}
  .flex-package-modal-head .flex-kicker{font-size:10px!important}
  .flex-package-modal-x{width:42px!important;height:42px!important;border-radius:13px!important;font-size:26px!important}

  .flex-package-modal-panel{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
    padding-top:8px!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  .flex-package-modal-panel[hidden]{display:none!important}
  .flex-package-modal-section-head{margin:0!important;min-height:28px!important}
  .flex-package-modal-section-head strong{font-size:14px!important}
  .flex-package-modal-section-head small{font-size:11px!important;padding:5px 9px!important}

  .flex-package-modal-list,
  .flex-package-modal-list[data-package-grid]{
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(4,minmax(0,1fr))!important;
    gap:8px 10px!important;
    align-content:stretch!important;
  }
  .flex-package-modal-item{
    min-height:0!important;
    height:auto!important;
    padding:8px 10px!important;
    border-radius:14px!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr) minmax(110px,132px)!important;
    align-items:center!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .flex-package-select-mark{width:28px!important;height:28px!important;border-radius:8px!important}
  .flex-package-modal-copy{align-items:flex-start!important;text-align:left!important;padding:0!important;min-width:0!important}
  .flex-package-modal-copy b{font-size:14px!important;line-height:1.05!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
  .flex-package-modal-copy small{font-size:10px!important;line-height:1.1!important;margin-top:3px!important;white-space:nowrap!important}
  .flex-package-modal-price{
    width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:48px!important;
    padding:6px 8px!important;border-radius:10px!important;align-items:center!important;justify-content:center!important;gap:4px!important;
  }
  .flex-package-modal-price b{font-size:12px!important;line-height:1!important;white-space:nowrap!important}
  .flex-package-modal-discount{font-size:8.5px!important;line-height:1!important;padding:4px 7px!important;white-space:nowrap!important}
  .flex-package-favorite{top:-7px!important;left:50%!important;transform:translateX(-50%)!important;font-size:7.5px!important;padding:3px 7px!important}

  .flex-package-custom-choice{
    margin:0!important;
    padding:8px 0 0!important;
    border-top:1px solid #e5eaf4!important;
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    gap:6px!important;
  }
  .flex-package-custom-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important}
  .flex-package-custom-head strong{font-size:13px!important}
  .flex-package-custom-head small{font-size:10px!important;margin:0!important;text-align:right!important}
  .flex-package-custom-form{
    display:grid!important;
    grid-template-columns:minmax(220px,.85fr) minmax(250px,1.05fr) minmax(220px,.9fr) minmax(170px,.7fr)!important;
    gap:8px!important;
    align-items:center!important;
  }
  .flex-package-stepper{height:48px!important;min-height:48px!important;grid-template-columns:42px minmax(0,1fr) 42px!important;border-radius:12px!important}
  .flex-package-stepper button{font-size:22px!important}
  .flex-package-stepper-center{padding:3px!important}
  .flex-package-qty-manual{height:40px!important;font-size:20px!important}
  .flex-package-range-wrap{gap:4px!important}
  .flex-package-range-wrap input[type=range]{height:5px!important}
  .flex-package-range-meta{font-size:9px!important}
  .flex-package-live-box{height:48px!important;min-height:48px!important;padding:6px 9px!important;border-radius:12px!important}
  .flex-package-live-box small{font-size:9px!important}
  .flex-package-live-box strong{font-size:13px!important;margin-top:2px!important}
  .flex-package-live-box span{font-size:8px!important;padding:5px 7px!important;max-width:120px!important}
  .flex-package-continue{height:48px!important;min-height:48px!important;margin:0!important;font-size:13px!important}

  .package-benefit-strip{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    margin:0!important;
  }
  .package-benefit-card{
    min-height:42px!important;
    padding:7px 9px!important;
    border-radius:10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    text-align:center!important;
  }
  .package-benefit-card strong{font-size:9.5px!important;line-height:1.15!important}
  .package-benefit-icon{font-size:14px!important}
}

@media (min-width:981px) and (max-height:820px){
  .flex-package-modal-dialog{height:98vh!important;max-height:98vh!important;padding:10px 16px!important}
  .flex-package-modal-head{min-height:62px!important;padding-bottom:7px!important}
  .flex-package-modal-head h3{font-size:23px!important}.flex-package-modal-head p{font-size:10px!important}
  .flex-package-modal-list,.flex-package-modal-list[data-package-grid]{gap:5px 8px!important}
  .flex-package-modal-item{padding:5px 8px!important;grid-template-columns:26px minmax(0,1fr) minmax(100px,120px)!important}
  .flex-package-select-mark{width:24px!important;height:24px!important}
  .flex-package-modal-copy b{font-size:12px!important}.flex-package-modal-copy small{font-size:9px!important}
  .flex-package-modal-price{min-height:40px!important;padding:4px 6px!important}.flex-package-modal-price b{font-size:11px!important}.flex-package-modal-discount{font-size:7.5px!important;padding:3px 5px!important}
  .flex-package-custom-choice{padding-top:5px!important;gap:4px!important}
  .flex-package-stepper,.flex-package-live-box,.flex-package-continue{height:42px!important;min-height:42px!important}
  .flex-package-qty-manual{height:36px!important;font-size:18px!important}
  .package-benefit-card{min-height:34px!important;padding:5px 7px!important}.package-benefit-card strong{font-size:8.5px!important}
}

/* Mobile/tablet: keep the same hierarchy; browser page may scroll, modal itself does not create nested scrollbars. */
@media (max-width:980px){
  .flex-package-modal{overflow:auto!important;align-items:flex-start!important;padding:0!important}
  .flex-package-modal-dialog{width:100%!important;max-width:none!important;min-height:100dvh!important;max-height:none!important;height:auto!important;overflow:visible!important;border-radius:0!important}
  .flex-package-modal-panel{overflow:visible!important}
  .flex-package-modal-list,.flex-package-modal-list[data-package-grid]{max-height:none!important;overflow:visible!important}
}