/* V215 — mobile 2x2 hierarchy + centered package contents + editable package badges */

/* Badge colors used by package card labels. */
.flex-package-favorite.badge-orange{background:#ff7a2f!important;color:#fff!important}
.flex-package-favorite.badge-green{background:#20b98e!important;color:#fff!important}
.flex-package-favorite.badge-blue{background:#3c67e8!important;color:#fff!important}
.flex-package-favorite.badge-purple{background:#7657d8!important;color:#fff!important}
.flex-package-favorite.badge-red{background:#e65063!important;color:#fff!important}
.flex-package-favorite{
  white-space:nowrap!important;
  max-width:calc(100% - 20px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Ready package type cards: balanced hierarchy on all widths. */
.flex-package-tab-head{
  width:100%!important;
  min-width:0!important;
}
.flex-package-tab-head strong{
  width:100%!important;
  text-align:center!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
}
.flex-package-tab-discount{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  justify-content:center!important;
}
.flex-package-tab-price-block{
  width:100%!important;
  align-items:center!important;
  text-align:center!important;
}
.flex-package-tab-price-block span,
.flex-package-tab-price-block b{
  text-align:center!important;
}

/* Modal package cards: content stays away from corners and centered. */
.flex-package-modal-item{
  text-align:center!important;
}
.flex-package-modal-copy{
  min-width:0!important;
  text-align:center!important;
}
.flex-package-modal-copy b,
.flex-package-modal-copy small{
  width:100%!important;
  text-align:center!important;
}
.flex-package-modal-price{
  text-align:center!important;
  align-items:center!important;
  justify-content:center!important;
}
.flex-package-modal-price b,
.flex-package-modal-discount{
  text-align:center!important;
}
.flex-package-select-mark{
  flex:none!important;
}

@media (min-width: 641px){
  /* Desktop/tablet horizontal cards retain structure, but copy is centered in its own column. */
  .flex-package-modal-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
  }
}

@media (max-width: 640px){
  /* 2 x 2 type selector */
  .flex-package-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .flex-package-tab{
    min-width:0!important;
    min-height:154px!important;
    padding:14px 12px 14px!important;
    border-radius:22px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:space-between!important;
    overflow:hidden!important;
  }
  .flex-package-tab-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    padding-top:0!important;
    text-align:center!important;
  }
  .flex-package-tab-discount{
    position:static!important;
    order:0!important;
    transform:none!important;
    margin:0 auto!important;
    min-width:76px!important;
    padding:7px 12px!important;
    font-size:12px!important;
    line-height:1!important;
  }
  .flex-package-tab-head strong{
    order:1!important;
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:750!important;
    color:#27344c!important;
    text-align:center!important;
  }
  .flex-package-tab-price-block{
    margin-top:auto!important;
    padding-top:10px!important;
    gap:4px!important;
    border-top:1px solid #e8edf6!important;
    align-items:center!important;
  }
  .flex-package-tab-price-block span{
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:650!important;
  }
  .flex-package-tab-price-block b{
    font-size:17px!important;
    line-height:1.05!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  /* 16-package modal: 4 columns, centered typography, no corner collisions. */
  .flex-package-modal-list,
  .flex-package-modal-list[data-package-grid]{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .flex-package-modal-item{
    position:relative!important;
    min-height:124px!important;
    padding:10px 5px 7px!important;
    border-radius:13px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    overflow:visible!important;
  }
  .flex-package-select-mark{
    position:absolute!important;
    top:7px!important;
    right:7px!important;
    width:22px!important;
    height:22px!important;
    border-radius:7px!important;
    margin:0!important;
  }
  .flex-package-modal-copy{
    width:100%!important;
    padding:1px 22px 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
  }
  .flex-package-modal-copy b{
    font-size:12px!important;
    line-height:1.1!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  .flex-package-modal-copy small{
    font-size:8.5px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  .flex-package-modal-price{
    width:100%!important;
    min-width:0!important;
    min-height:54px!important;
    padding:7px 3px!important;
    border-radius:10px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
  }
  .flex-package-modal-price b{
    max-width:100%!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:800!important;
    white-space:nowrap!important;
    letter-spacing:-.02em!important;
  }
  .flex-package-modal-discount{
    max-width:100%!important;
    font-size:7.5px!important;
    line-height:1!important;
    padding:4px 5px!important;
    white-space:nowrap!important;
  }
  .flex-package-favorite{
    top:-6px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    max-width:calc(100% - 8px)!important;
    font-size:7px!important;
    line-height:1!important;
    padding:4px 6px!important;
    text-align:center!important;
  }
  html[data-theme=dark] .flex-package-tab-head strong{color:#eef4ff!important}
}

@media (max-width: 390px){
  .flex-package-modal-list,
  .flex-package-modal-list[data-package-grid]{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  .flex-package-modal-item{padding-left:3px!important;padding-right:3px!important}
  .flex-package-modal-copy{padding-left:19px!important;padding-right:19px!important}
  .flex-package-modal-price b{font-size:9px!important}
  .flex-package-modal-discount{font-size:7px!important;padding:3px 4px!important}
}