/* =============================================================================
   Bootstrap 4 → 5 compatibility shim
   =============================================================================
   The portal now loads Playhost's Bootstrap 5 (so the site's design actually
   works) instead of WHMCS's bundled Bootstrap 4 + theme.min.css. WHMCS's own
   .tpl markup is still written against Bootstrap 4, so this re-adds the BS4
   classes it uses that BS5 renamed or dropped.

   The list below is not guesswork — it's every BS4-only class found by grepping
   this theme's .tpl files, with usage counts:
     text-right 51, float-right 24, btn-block 20, input-group-append 19,
     custom-select 18, text-left 17, font-weight-bold 15, close 15, pr-3 7,
     sr-only 5, badge-info 5, font-weight-light 4, input-group-prepend 3,
     mr-2 2, float-left 2, no-gutters 1, badge-pill 1, badge-secondary 1

   If a WHMCS upgrade adds new BS4 markup, re-run that grep and extend this.
   ========================================================================== */

/* ---- text alignment (BS5: text-start / text-end) ------------------------- */
.text-left  { text-align: left  !important; }
.text-right { text-align: right !important; }

/* ---- floats (BS5: float-start / float-end) ------------------------------- */
.float-left  { float: left  !important; }
.float-right { float: right !important; }

/* ---- directional spacing (BS5: ms-* / me-* / ps-* / pe-*) ---------------- */
.ml-0{margin-left:0!important}      .mr-0{margin-right:0!important}
.ml-1{margin-left:.25rem!important} .mr-1{margin-right:.25rem!important}
.ml-2{margin-left:.5rem!important}  .mr-2{margin-right:.5rem!important}
.ml-3{margin-left:1rem!important}   .mr-3{margin-right:1rem!important}
.ml-4{margin-left:1.5rem!important} .mr-4{margin-right:1.5rem!important}
.ml-5{margin-left:3rem!important}   .mr-5{margin-right:3rem!important}
.ml-auto{margin-left:auto!important} .mr-auto{margin-right:auto!important}
.pl-0{padding-left:0!important}      .pr-0{padding-right:0!important}
.pl-1{padding-left:.25rem!important} .pr-1{padding-right:.25rem!important}
.pl-2{padding-left:.5rem!important}  .pr-2{padding-right:.5rem!important}
.pl-3{padding-left:1rem!important}   .pr-3{padding-right:1rem!important}
.pl-4{padding-left:1.5rem!important} .pr-4{padding-right:1.5rem!important}
.pl-5{padding-left:3rem!important}   .pr-5{padding-right:3rem!important}

/* ---- font weight (BS5: fw-*) -------------------------------------------- */
.font-weight-light  { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold   { font-weight: 700 !important; }

/* ---- screen-reader only (BS5: visually-hidden) --------------------------- */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---- block buttons (BS5: d-grid wrapper) --------------------------------- */
.btn-block { display: block !important; width: 100% !important; }
.btn-block + .btn-block { margin-top: .5rem; }

/* ---- input groups -------------------------------------------------------
   BS5 removed the prepend/append wrappers and expects children to be direct
   flex items. display:contents dissolves the wrapper without touching markup. */
.input-group-prepend, .input-group-append { display: contents; }

/* ---- custom-select (BS5: form-select) ----------------------------------- */
.custom-select, select.form-control {
  display: block; width: 100%;
  padding: .375rem 2.25rem .375rem .75rem;
  -moz-appearance: none; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ADB7BE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
}

/* ---- badges (BS5: bg-* utilities) --------------------------------------- */
.badge-primary   { background-color: var(--primary-color, #E89123); color: #17110A; }
.badge-secondary { background-color: #6c757d; color: #fff; }
.badge-success   { background-color: #3FBF7F; color: #0B1F14; }
.badge-danger    { background-color: #E25454; color: #fff; }
.badge-warning   { background-color: #E8A33C; color: #17110A; }
.badge-info      { background-color: var(--tertiary-color, #4E9BE6); color: #06121F; }
.badge-light     { background-color: #f8f9fa; color: #212529; }
.badge-dark      { background-color: #343a40; color: #fff; }
.badge-pill      { border-radius: 10rem; }
.badge { display: inline-block; padding: .35em .6em; font-size: .75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; }

/* ---- close button (BS5: btn-close, which uses a background image) -------- */
.close {
  float: right; font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: #fff; text-shadow: none; opacity: .7;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.close:hover { opacity: 1; color: var(--primary-color, #E89123); }

/* ---- grid gutters (BS5: g-0) -------------------------------------------- */
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

/* ---- misc BS4 leftovers -------------------------------------------------- */
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }
.dropdown-menu-right { right: 0; left: auto; }
.d-flex.justify-content-between > .mr-auto { margin-right: auto !important; }