/* Thermogroup design adaptations to native Bootstrap 5 components.
   This file intentionally does not recreate the Bootstrap 4 grid/plugins. */

/* Keep the established content width and 30px gutters, including large screens. */
.container,
.container-fluid,
.row { --bs-gutter-x: 30px; }
.row > [class*="col-"] { position: relative; }
.navbar { --bs-navbar-padding-x: 1rem; }
@media (max-width: 575.98px) {
    /* Match the existing 8px/12px mobile container padding. Negative row
       margins must not extend beyond the viewport. */
    .container-fluid > .row { --bs-gutter-x: 24px; }
    .container .row { --bs-gutter-x: 16px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* The hero is a site component, independent of the retired jumbotron component. */
.tg-hero-banner { padding: 2rem 1rem; margin-bottom: 2rem; }
@media (min-width: 576px) {
    .tg-hero-banner { padding: 4rem 2rem; }
}
@media (max-width: 575.98px) {
    .tg-hero-banner { margin-bottom: 0; padding: 2rem 1rem 0; }
}

/* Compact form rows keep their established density using the native flex grid. */
.tg-form-row { display: flex; flex-wrap: wrap; margin-inline: -5px; }
.tg-form-row > [class*="col-"] { padding-inline: 5px; }
.form-select.custom-select-power { width: 100%; max-width: 100%; }
.form-check-input { width: 1em; }
.forms .form-check { min-height: 44px; padding-left: 35px; position: relative; }
.forms .form-check-input { width: 25px; height: 25px; margin-left: -35px; margin-top: 10px; }
.forms .form-check-label { display: block; padding: 12px 0; font-size: 13px; cursor: pointer; }

/* Visible, keyboard reachable close controls replace the previously hidden cross. */
.modal-header { align-items: flex-start; }
.modal-header .btn-close { flex: 0 0 auto; margin-left: .5rem; }
.btn-close:focus-visible { outline: 3px solid #dc8900; outline-offset: 3px; }

/* The legacy validation library remains for existing public forms. Only its
   presentation hooks are retained; Bootstrap 5 owns input/button behavior. */
.form-group { position: relative; }
.form-group.has-feedback .form-control { padding-right: 2.5rem; }
.form-group .form-control-feedback { position: absolute; right: .75rem; top: 50%; z-index: 2; pointer-events: none; }
.form-group .help-block { display: block; font-size: .875rem; margin-top: .25rem; }
.form-group.has-error .form-control,
.form-group.has-error .form-select { border-color: #b3261e; }
.form-group.has-error .help-block,
.form-group.has-error .form-control-feedback { color: #b3261e; }
.form-group.has-success .form-control,
.form-group.has-success .form-select { border-color: #198754; }
.form-group.has-success .form-control-feedback { color: #198754; }

/* Bootstrap 5 table variables otherwise paint over the site's basket rows. */
#products .table,
#order .table { --bs-table-bg: transparent; }