/* V259 — ONLY the mobile bottom console of the category package modal.
   Do not alter package grid/cards/header/selection visuals. */
@media (max-width: 768px){
  .flex-package-modal .flex-package-custom-choice{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    margin:6px 0 0!important;
    padding:7px 0 0!important;
    border-top:1px solid var(--pkg-modal-border,rgba(123,140,170,.28))!important;
    min-width:0!important;
  }

  /* Keep the compact mobile console: stepper + live price + continue */
  .flex-package-modal .flex-package-custom-head,
  .flex-package-modal .flex-package-range-wrap{
    display:none!important;
  }
  .flex-package-modal .flex-package-custom-form{
    display:grid!important;
    grid-template-columns:minmax(0,1.05fr) minmax(92px,.68fr) minmax(128px,1.18fr)!important;
    grid-template-areas:"step price action"!important;
    gap:6px!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .flex-package-modal .flex-package-stepper{
    grid-area:step!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:11px!important;
    overflow:hidden!important;
    min-width:0!important;
  }
  .flex-package-modal .flex-package-stepper-center{
    min-width:0!important;
    padding:0!important;
  }
  .flex-package-modal .flex-package-qty-manual{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 3px!important;
    font-size:17px!important;
    line-height:42px!important;
    font-weight:900!important;
    text-align:center!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .flex-package-modal .flex-package-stepper button{
    height:44px!important;
    min-height:44px!important;
    font-size:20px!important;
    line-height:1!important;
  }
  .flex-package-modal .flex-package-live-box{
    grid-area:price!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    align-items:center!important;
    justify-content:center!important;
    height:44px!important;
    min-height:44px!important;
    padding:4px 7px!important;
    border-radius:11px!important;
    min-width:0!important;
  }
  .flex-package-modal .flex-package-live-box>div{
    min-width:0!important;
    text-align:center!important;
  }
  .flex-package-modal .flex-package-live-box small{
    display:block!important;
    font-size:7px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }
  .flex-package-modal .flex-package-live-box strong{
    display:block!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  .flex-package-modal .flex-package-live-box>span{
    display:none!important;
  }
  .flex-package-modal .flex-package-continue{
    grid-area:action!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 8px!important;
    border-radius:11px!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  /* Make all four information cards actually readable. */
  .flex-package-modal .package-benefit-strip{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
    width:100%!important;
    margin:0!important;
  }
  .flex-package-modal .package-benefit-card{
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0!important;
    min-height:32px!important;
    padding:4px 6px!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }
  .flex-package-modal .package-benefit-icon{
    width:20px!important;
    height:20px!important;
    border-radius:6px!important;
    font-size:10px!important;
  }
  .flex-package-modal .package-benefit-card strong{
    display:block!important;
    min-width:0!important;
    font-size:7.5px!important;
    line-height:1.12!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* AI gets its own clean row, never stacked on top of itself. */
  .flex-package-modal .package-ai-query{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "providers"!important;
    gap:4px!important;
    width:100%!important;
    margin:0!important;
    padding:5px 6px!important;
    border-radius:9px!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .flex-package-modal .package-ai-copy{
    grid-area:copy!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0!important;
    white-space:nowrap!important;
  }
  .flex-package-modal .package-ai-kicker{
    flex:none!important;
    font-size:5.5px!important;
    line-height:1!important;
  }
  .flex-package-modal .package-ai-copy strong{
    min-width:0!important;
    font-size:7.5px!important;
    line-height:1.1!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .flex-package-modal .package-ai-copy small,
  .flex-package-modal .package-ai-status{
    display:none!important;
  }
  .flex-package-modal .package-ai-providers{
    grid-area:providers!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    min-width:0!important;
    width:100%!important;
  }
  .flex-package-modal .package-ai-providers button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    width:100%!important;
    height:26px!important;
    min-height:26px!important;
    padding:0 3px!important;
    border-radius:7px!important;
    font-size:6.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}

@media (max-width: 390px){
  .flex-package-modal .flex-package-custom-form{
    grid-template-columns:minmax(0,1fr) minmax(82px,.64fr) minmax(112px,1.02fr)!important;
    gap:4px!important;
  }
  .flex-package-modal .flex-package-stepper{
    grid-template-columns:36px minmax(0,1fr) 36px!important;
  }
  .flex-package-modal .flex-package-qty-manual{font-size:15px!important}
  .flex-package-modal .flex-package-continue{font-size:9px!important;padding:0 5px!important}
  .flex-package-modal .package-benefit-card strong{font-size:7px!important}
}