/*
 * Bootstrap 4 -> 5 compatibility shim (STO-54041)
 * Restores only the BS4 classes still used in this site's markup,
 * so the Bootstrap 5.3.x upgrade needs no page-by-page rewrite.
 * Rules are lifted from Bootstrap 4.6 source.
 */

/* layout / spacing utilities removed in BS5 */
.form-group { margin-bottom: 1rem; }
.ml-3 { margin-left: 1rem !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
@media (min-width: 576px) {
  .mr-sm-2 { margin-right: .5rem !important; }
}
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.font-weight-bold { font-weight: 700 !important; }

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

/* badges (BS5 uses .bg-*) */
.badge-secondary { color: #fff; background-color: #6c757d; }
.badge-pill { padding-right: .6em; padding-left: .6em; border-radius: 10rem; }

/* input groups (BS5 drops append/prepend wrappers) */
.input-group-prepend, .input-group-append { display: flex; }
.input-group-prepend { margin-right: -1px; }
.input-group-append { margin-left: -1px; }
.input-group-append .btn, .input-group-prepend .btn { position: relative; z-index: 2; }
.input-group-append .input-group-text,
.input-group-prepend .input-group-text {
  display: flex; align-items: center; padding: .375rem .75rem; margin-bottom: 0;
  font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057;
  text-align: center; white-space: nowrap; background-color: #e9ecef;
  border: 1px solid #ced4da; border-radius: .25rem;
}
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}

/* modal/alert close button (BS5 uses .btn-close) */
.close {
  float: right; font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: #000; text-shadow: 0 1px 0 #fff; opacity: .5;
}
.close:hover { color: #000; text-decoration: none; }
.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus { opacity: .75; }
button.close { padding: 0; background-color: transparent; border: 0; }

/* custom checkboxes/radios (BS5 merged into .form-check) */
.custom-control {
  position: relative; z-index: 1; display: block;
  min-height: 1.5rem; padding-left: 1.5rem;
}
.custom-control-input {
  position: absolute; left: 0; z-index: -1;
  width: 1rem; height: 1.25rem; opacity: 0;
}
.custom-control-label { position: relative; margin-bottom: 0; vertical-align: top; }
.custom-control-label::before {
  position: absolute; top: .25rem; left: -1.5rem; display: block;
  width: 1rem; height: 1rem; pointer-events: none; content: "";
  background-color: #fff; border: 1px solid #adb5bd;
}
.custom-control-label::after {
  position: absolute; top: .25rem; left: -1.5rem; display: block;
  width: 1rem; height: 1rem; content: "";
  background: 50% / 50% 50% no-repeat;
}
.custom-checkbox .custom-control-label::before { border-radius: .25rem; }
.custom-radio .custom-control-label::before { border-radius: 50%; }
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff; border-color: #007bff; background-color: #007bff;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-control-input:disabled ~ .custom-control-label { color: #6c757d; }

/* custom select (BS5 uses .form-select) */
.custom-select {
  display: inline-block; width: 100%; height: calc(1.5em + .75rem + 2px);
  padding: .375rem 1.75rem .375rem .75rem; font-size: 1rem; font-weight: 400;
  line-height: 1.5; color: #495057; vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L2 3h4z'/%3e%3c/svg%3e") right .75rem center / 8px 10px no-repeat;
  border: 1px solid #ced4da; border-radius: .25rem;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}

/* block buttons & float utility removed in BS5 */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }
.float-right { float: right !important; }

/* BS5 default changes -> restore BS4 look */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
:root { --bs-border-radius: .25rem; }
.btn { --bs-btn-border-radius: .25rem; }
.form-control, .form-select, .input-group-text { border-radius: .25rem; }
.row, .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl { --bs-gutter-x: 30px; }
label { display: inline-block; margin-bottom: .5rem; }

/* BS5 expects <button> carousel indicators; site markup uses <ol><li> */
.carousel-indicators { padding-left: 0; list-style: none; }

/* BS4 suppressed native search-input adornments; site draws its own magnifier
   button, so Chrome's clear-X overlaps it under BS5 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* BS5 reboot added ul/ol padding-left:2rem (BS4 had none). Shop pages load
   bootstrap TWICE (nested masters), so the 2nd copy re-indents lists AFTER
   style.css's global reset zeroed them (breadcrumbs shift right). Neutralize. */
ol, ul { padding-left: 0; }

/* BS5 nav-link padding is var()-based (vars live on .nav/.navbar); site uses
   orphan nav-links (Index tiles/banners, Experience icons) -> padding collapsed
   to 0. Restore BS4's literal value (matches BS5's default var values anyway). */
.nav-link { padding: .5rem 1rem; }

/* BS5 card-* padding/bg are var()-based (vars live on .card); this site uses
   card-body/header/footer WITHOUT a .card parent on ~29 pages -> collapsed to 0.
   Restore BS4's literal values. */
.card-body { padding: 1.25rem; }
.card-header { padding: .75rem 1.25rem; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125); }
.card-footer { padding: .75rem 1.25rem; background-color: rgba(0,0,0,.03); border-top: 1px solid rgba(0,0,0,.125); }

/* BS5 lowered pagination state selector specificity (.active > .page-link);
   site's .pagination .page-link color override now wins -> invisible active number.
   Restore BS4-specificity state colors. */
.page-item.active .page-link { color: #fff; }
.page-item.disabled .page-link { color: #6c757d; }

/* BS4 form-check-input was the native control; BS5 repaints it with a faint border */
.form-check-input, .form-check-input:checked {
  -webkit-appearance: auto; appearance: auto; background: none; border: none;
}

/* autocomplete suggestion menu (jquery-ui): theme uses a 75%-opacity texture, so
   form fields below showed through the open menu. Make it a solid elevated panel. */
ul.ui-autocomplete {
  background: #fff !important;
  border: 1px solid #ced4da !important;
  border-radius: .25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  margin-top: 2px;
  overflow-y: auto !important; /* site css forces scroll even when content fits */
}

/* shopstyle.css zeroes .form-check padding in the shop filter panel (tuned for
   BS4's position:absolute input); BS5's float + negative margin now pulls the
   checkbox outside the panel border -> neutralize it there */
div#CP_CPSHOP_divFilters .form-check .form-check-input { float: none; display: inline-block; vertical-align: middle; margin-left: 0; margin-right: 4px; }
div#CP_CPSHOP_divFilters .form-check .form-check-label { margin-bottom: 0; vertical-align: middle; }