/*
 * Bootstrap 4 -> 5 compatibility for the public site. Load right after bootstrap.min.css.
 *
 * Two jobs:
 *  1. Restore Bootstrap 4 components/defaults the WNE theme CSS still relies on.
 *  2. Keep Bootstrap 4 utility class names working where they cannot be rewritten in the
 *     templates: page-builder and widget settings store values like "text-left" in the
 *     database and print them into class attributes at runtime.
 */

/* ---------- 1. Components and defaults ---------- */

/* Grid: Bootstrap 4 used 30px gutters and padded every .col-* even outside a .row. */
/* Rows and containers use Bootstrap 4's 30px gutter (container padding 15px = row margin -15px, so
   nothing overhangs). Bootstrap's own .g-* / .gx-* utilities are re-applied below with higher
   specificity so rows that ask for smaller or no gutters still get them. */
.row, .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: 30px; }
.row.g-0, .row.gx-0 { --bs-gutter-x: 0; }
.row.g-1, .row.gx-1 { --bs-gutter-x: .25rem; }
.row.g-2, .row.gx-2 { --bs-gutter-x: .5rem; }
.row.g-3, .row.gx-3 { --bs-gutter-x: 1rem; }
.row.g-4, .row.gx-4 { --bs-gutter-x: 1.5rem; }
.row.g-5, .row.gx-5 { --bs-gutter-x: 3rem; }
.col, [class*="col-"] {
    position: relative; /* Bootstrap 4 columns were positioned; theme icons use absolute positioning inside them */
    padding-right: calc(var(--bs-gutter-x, 30px) * .5);
    padding-left: calc(var(--bs-gutter-x, 30px) * .5);
}

/* Links and link buttons: Bootstrap 5 underlines them by default. */
a, .btn-link { text-decoration: none; }

/* Forms */
/* Bootstrap 4 fixed the input height; the theme's padding assumes it. */
.form-control { height: calc(1.5em + .75rem + 2px); }
textarea.form-control, select.form-control[multiple], select.form-control[size] { height: auto; }
label { display: inline-block; margin-bottom: .5rem; }
.form-group { margin-bottom: 1rem; }
.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; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }
.form-text { display: block; }
.form-control-file { display: block; width: 100%; }
select.form-control:not([multiple]):not([size]) {
    appearance: none;
    padding-right: 2.25rem;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center / 16px 12px;
}
[dir="rtl"] select.form-control:not([multiple]):not([size]) { padding-right: .75rem; padding-left: 2.25rem; background-position: left .75rem center; }

/* Input groups: -append/-prepend wrappers were removed. */
.input-group-append, .input-group-prepend { display: flex; }
.input-group-append { margin-left: -1px; }
.input-group-prepend { margin-right: -1px; }
.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; }

/* Removed components */
.btn-block { display: block; width: 100%; }
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }
.card-deck { display: flex; flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }
.card-deck .card { flex: 1 0 0%; margin-right: 15px; margin-left: 15px; }
.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: #e9ecef; border-radius: .3rem; }
.embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive::before { display: block; content: ""; padding-top: 56.25%; }
.embed-responsive-21by9::before { padding-top: 42.857143%; }
.embed-responsive-4by3::before { padding-top: 75%; }
.embed-responsive-1by1::before { padding-top: 100%; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive video, .embed-responsive embed, .embed-responsive object {
    position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Tables: Bootstrap 5 halved cell padding. */
.table > :not(caption) > * > * { padding: .75rem; }

/* Theme rules written for the Bootstrap 4 checkbox markup. */
.shipping-details-wrapper .form-check-label { cursor: pointer; }

/* ---------- 2. Bootstrap 4 utility names used in runtime-generated classes ---------- */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
@media (min-width: 576px) { .text-sm-left { text-align: left !important; } .text-sm-right { text-align: right !important; } }
@media (min-width: 768px) { .text-md-left { text-align: left !important; } .text-md-right { text-align: right !important; } }
@media (min-width: 992px) { .text-lg-left { text-align: left !important; } .text-lg-right { text-align: right !important; } }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.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; }
.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-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-italic { font-style: italic !important; }
.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; }
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.badge-primary { background-color: var(--bs-primary); color: #fff; }
.badge-secondary { background-color: var(--bs-secondary); color: #fff; }
.badge-success { background-color: var(--bs-success); color: #fff; }
.badge-danger { background-color: var(--bs-danger); color: #fff; }
.badge-warning { background-color: var(--bs-warning); color: #212529; }
.badge-info { background-color: var(--bs-info); color: #212529; }
.badge-light { background-color: var(--bs-light); color: #212529; }
.badge-dark { background-color: var(--bs-dark); color: #fff; }
.badge-pill { border-radius: 10rem; }