/* bt_claudine on OpenCart 4.1 / Bootstrap 5 — the Bootstrap 3 idioms the theme's CSS and markup rely on.
   Loaded after the theme stylesheets. Keep this file small: anything larger belongs in the theme CSS itself. */

/* Bootstrap 3 helpers used throughout the theme markup */
.pull-left { float: left; }
.pull-right { float: right; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.img-responsive { max-width: 100%; height: auto; display: block; }
.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }
.list-unstyled { padding-left: 0; list-style: none; }
.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; }

/* responsive visibility (Bootstrap 3 names → Bootstrap 5 breakpoints) */
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }
.visible-xs { display: none !important; }
@media (max-width: 767.98px) { .visible-xs { display: block !important; } }
.hide-on-desktop { display: none; }
@media (max-width: 991.98px) { .hide-on-desktop { display: block; } }

/* Bootstrap 5 dropdowns need .show; the theme's CSS opens them with its own rules, so let both work */
.dropdown-menu { min-width: 10rem; }
.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; white-space: nowrap; color: inherit; text-decoration: none; }
.dropdown-menu > li > a:hover { background-color: #f5f5f5; }
.dropdown-menu-right { right: 0; left: auto; }

/* Bootstrap 3 form/button names the theme styles */
.form-group { margin-bottom: 15px; }
.input-group-btn { display: flex; }
.btn-default { color: #333; background-color: #fff; border: 1px solid #ccc; }
.btn-default:hover { background-color: #e6e6e6; }
.input-lg, .btn-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; }

/* Bootstrap 3 panels, used by the sidebar modules */
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-bottom: 1px solid #ddd; }
.panel-heading { padding: 10px 15px; }
.panel-body { padding: 15px; }
.panel-title { margin: 0; font-size: 16px; }

/* Bootstrap 5 resets the box model of buttons/lists slightly differently */
#top .top-links ul.list-inline { margin-bottom: 0; }
#bt_header, #bt_footer_container { width: 100%; }
#container > #alert { z-index: 1090; }

/* loading overlay (was an inline <style> in the 2.1 header.tpl) */
#bt_loading { position: fixed; width: 100%; height: 100%; z-index: 999; background: #fff; }
.bt-loading { height: 120px; width: 120px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; }

/* Bootstrap 3 xs grid classes still used inside stored HTML blocks (banners, mega-menu html columns) */
.col-xs-12 { flex: 0 0 auto; width: 100%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-4 { flex: 0 0 auto; width: 33.3333%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
@media (max-width: 767.98px) { .col-xs-12, .col-xs-6, .col-xs-4, .col-xs-3 { float: none; } }

/* product page: Bootstrap 5 nav-tabs reset so the theme's .htabs rules win, Bootstrap 3 option markup */
.htabs .nav-tabs .nav-link { border: 0; border-radius: 0; background: none; color: inherit; padding: 0; }
.htabs .nav-tabs .nav-link.active { background: none; }
.radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }
.radio label, .checkbox label { font-weight: normal; cursor: pointer; padding-left: 20px; }
.radio input[type="radio"], .checkbox input[type="checkbox"] { position: absolute; margin-left: -20px; margin-top: 4px; }
.control-label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
.product-info .select_number button { border: 0; background: none; }
.product-info .invalid-feedback.d-block { color: #dc3545; }
.text-danger { color: #dc3545; }