/* Bootstrap 5 style overrides and responsive improvements */
header {
    background-color: transparent !important;
}

/* Layout and General Fixes */
#rec1-public-wrapper {
    padding: 0 1em;
    width: auto;
    max-width: 1800px !important;
    margin: 0 auto;
}
/* .rec1-catalog-panel-left-bs5 {
    max-width: 200px !important;
} */
.container-fluid {
    max-width: 1800px !important;
    padding: 0 1em;
}

/* Google Translate Banner Fix - Prevent overlap with mobile navigation */
/* When Google Translate is active, it adds a fixed banner at top with height ~39px */
body.translated-ltr,
body.translated-rtl,
body:has(.goog-te-banner-frame) {
    top: 0 !important; /* Override Google's body positioning */
}

/* Push mobile header down when translate banner is visible */
@media (max-width: 767.98px) {
    body.translated-ltr .header-mobile,
    body.translated-rtl .header-mobile,
    body:has(.goog-te-banner-frame:not([style*="display: none"])) .header-mobile {
        margin-top: 40px;
    }

    /* Ensure main content also adjusts */
    body.translated-ltr main,
    body.translated-rtl main,
    body:has(.goog-te-banner-frame:not([style*="display: none"])) main {
        padding-top: 40px;
    }
}

/* Dialog close button color/contrast overrides */
/* Ensure the close button is visible regardless of titlebar background color */
.ui-dialog .ui-dialog-titlebar-close {
    /* keep visible, but avoid forcing size so default theme sizing applies */
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ui-dialog .ui-dialog-titlebar-close::after,
.ui-dialog .ui-dialog-titlebar-close .ui-button-text {
    line-height: 1 !important; /* prevent baseline offset */
    vertical-align: middle !important;
}

/* Compatibility: Force jQuery UI dialog close button to show a visible character
    (works around Bootstrap 3/5 hiding icon fonts or using background images). */
/* Hide the ui-icon span if present (we'll show text instead) */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-primary,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-secondary {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Ensure any textual label inside the button is visible; if no text, show a small × */
.ui-dialog .ui-dialog-titlebar-close .ui-button-text,
.ui-dialog .ui-dialog-titlebar-close .ui-button-text:empty {
    display: inline-block !important;
    text-indent: 0 !important;
    color: currentColor !important;
    vertical-align: middle !important;
}

.ui-dialog .ui-dialog-titlebar-close::after {
    content: "\00d7" !important; /* small fallback (×) */
    display: inline-block !important;
    font-size: 14px !important; /* don't force large sizing */
    line-height: 1 !important;
    color: currentColor !important;
    vertical-align: middle !important;
    pointer-events: none !important;
}

/* Neutralize Bootstrap 5 .btn-close background-image which can visually replace inner text */
.ui-dialog .ui-dialog-titlebar-close.btn-close {
    background-image: none !important; /* allow inner text to show */
}

/* Re-enable visible text for BS3 .close style */
.ui-dialog .ui-dialog-titlebar-close.close {
    text-indent: 0 !important;
    opacity: 1 !important;
    color: currentColor !important;
}

/* keep hover/focus to theme defaults so sizing stays native */

/* Ensure any SVG or icon inside the button uses the button color for fill/stroke */
.ui-dialog .ui-dialog-titlebar-close svg,
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
    fill: currentColor !important;
    stroke: none !important;
}

/* No strong titlebar-dark overrides here; prefer theme defaults or explicit page-level overrides */


header .container {
    position: relative; /* for absolute positioned logo */
}

main {
    min-height: auto !important;
}

body h2.dashboard-heading {
    margin-left: 0!important;
}

.list-inline {
    display: inline-flex;
}

.pull-left {
    float: left;
}

.main-logo {
    padding-left: 8px;
}

/* Modal Improvements */
body .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-top: var(--bs-modal-margin);
}

.modal-header h4 {
    font-size: calc(1.275rem + .3vw);
    margin: 0;
    padding: 0;
}

#rec1-forgot-password-modal .modal-dialog {
    max-width: 500px;
}

/* Catalog Cart Responsive */
.d-flex .rec1-catalog-cart {
    width: 50% !important;
    max-width: 50% !important;
}

/* Button and UI Elements */
.btn-filter-offcanvas {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .75rem;
    height: 30px;
}

.bg-blue {
    background-color: #2e89cf;
}

.text-smaller {
    font-size: 90%;
}

.text-normal {
    text-transform: none;
}

.ui-filter-label {
    font-weight: bold;
}

.ui-datepicker {
    font-size: 14px;
    z-index: 9999 !important;
}

/* Ensure interactive map heading doesn't clip the datepicker */
.interactive-map-heading {
    overflow: visible !important;
}

.interactive-map-heading .text-center {
    overflow: visible !important;
}

/* Center datepicker on small screens for interactive map only */
@media (max-width: 767.98px) {
    .interactive-map-heading .ui-datepicker {
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
    }
}

/* Site-specific Styling */
.main-heading {
    background: url('https://data.rec1.com/custincludes/broadmoor/20349823904823.jpg') center/cover;
    height: 190px;
}

/* Bootstrap Component Overrides */
.tab-content {
    border: 1px solid var(--bs-border-color);
    border-top: none;
}

.nav-tabs .nav-item {
    box-sizing: border-box;
    padding: 1px 0;
    border-bottom: 2px solid var(--bs-border-color);
}

.nav-tabs .nav-item .active .nav-link {
    border-bottom: 4px solid var(--bs-border-color);
}

#offcanvasMenuMain .btn.active:not(.dropdown-menu *),
#offcanvasMenuMain .btn:hover:not(.dropdown-menu *),
#offcanvasMenuMain a.active:not(.dropdown-menu *),
#offcanvasMenuMain a:hover:not(.dropdown-menu *) {
    background-color: #F4FFE9 !important;
    border-color: #F4FFE9 !important;
    color: var(--bs-list-group-color);
    font-weight: 600;
}

#offcanvasMenuMain .btn.active:not(.dropdown-menu *) .glyphicon,
#offcanvasMenuMain .btn.active:not(.dropdown-menu *) [class*="flaticon-"],
#offcanvasMenuMain .btn:hover:not(.dropdown-menu *) .glyphicon,
#offcanvasMenuMain .btn:hover:not(.dropdown-menu *) [class*="flaticon-"] {
    color: #408100 !important;
}

#offcanvasMenuMain .rec1-login-button-civicplus.active:not(.dropdown-menu *),
#offcanvasMenuMain .rec1-login-button-civicplus:hover:not(.dropdown-menu *) {
    background-color: #af282f !important;
    opacity: 0.8;
}

#offcanvasMenuMain .rec1-login-button-civicplus.active:not(.dropdown-menu *) [class*="flaticon-"],
#offcanvasMenuMain .rec1-login-button-civicplus:hover:not(.dropdown-menu *) [class*="flaticon-"] {
    color: #FFFFFF !important;
}

.card,
.card-header,
.accordion-item,
.accordion-button {
    border-radius: 0 !important;
    border: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: inherit;
}

.accordion-button:focus {
    box-shadow: inherit;
}

.accordion-button::after {
    background-image: none !important;
    width: 0;
}

.card-header {
    text-shadow: rgba(255, 255, 255, 0.34) 1px 1px 0px;
    border: none;
    border-top: 1px #c6cfec solid;
    border-bottom: 1px #c6cfec solid;
    background-color: #edf1fd;
    color: #4060bf;
    font-weight: bold;
    text-transform: uppercase;
}

.pagination {
    --bs-pagination-color: #337ab7;
    --bs-pagination-hover-color: #23527c;
    --bs-pagination-active-bg: #337ab7;
    --bs-pagination-active-border-color: #337ab7;
    --bs-pagination-active-color: #fff;
    --bs-pagination-hover-bg: #e6f2fa;
    --bs-pagination-hover-border-color: #337ab7;
}

.pagination .page-link {
    padding: 5px 11px;
    line-height: 1.2;
    min-width: 32px;
    text-align: center;
    border-radius: 0 !important;
}

.pagination .page-item:first-child .page-link {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Utility Classes */
.text-truncate-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 800px;
}

.text-truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

#offcanvasShoppingCart {
    width: 50%;
}

.table-no-border-bottom tr:last-child,
.table-no-border-bottom tr:last-child td {
    border-bottom: none !important;
}

.table-responsive {
    overflow-y: visible !important;
    overflow-x: auto !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE, Edge Legacy */
}

.table-responsive::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Bootstrap 5 btn-default simulation */
.btn-default {
    --bs-btn-color: #212529;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #e9ecef;
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #e9ecef;
    --bs-btn-active-border-color: #adb5bd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #dee2e6;
}

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
}

.btn-link {
    color: #337AB7;
}

.btn-link:hover {
    color: #23527C;
}

/* Bootstrap 5 tooltip arrow fixes */
.tooltip .tooltip-arrow {
    position: absolute !important;
    width: 0.4rem;
    height: 0.4rem;
    z-index: -1;
}

.tooltip .tooltip-arrow::before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid;
}

/* Tooltip arrow directions */
.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
    right: 0;
    width: 0.4rem;
    height: 0.8rem;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    right: 0;
    border-width: 0.4rem 0 0.4rem 0.4rem;
    border-left-color: var(--bs-tooltip-bg);
}

.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
    left: 0;
    width: 0.4rem;
    height: 0.8rem;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    left: 0;
    border-width: 0.4rem 0.4rem 0.4rem 0;
    border-right-color: var(--bs-tooltip-bg);
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
    bottom: 0;
    width: 0.8rem;
    height: 0.4rem;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    bottom: 0;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: var(--bs-tooltip-bg);
}

.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
    top: 0;
    width: 0.8rem;
    height: 0.4rem;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    top: 0;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: var(--bs-tooltip-bg);
}

/* Responsive Design - Mobile First */
/* Fix disabled checkout button visibility */
.cart-checkout-button[disabled],
.cart-checkout-button.disabled,
.btn[disabled],
.btn.disabled {
    opacity: 0.75 !important;
    color: #fff !important;
    pointer-events: none;
}

/* Ensure checkout button text and icons are readable on .btn-primary background */
/* This fixes an issue where the text appeared gray on blue when not hovered. */
.btn.cart-checkout-button,
.cart-checkout-button.btn,
.rec1-catalog-cart a.cart-catalog-button {
    color: #fff !important; /* force white text */
}

.btn.cart-checkout-button .flaticon-cart-checkout,
.cart-checkout-button .flaticon-cart-checkout {
    color: inherit; /* ensure icon follows text color */
    fill: currentColor; /* for SVG icons if present */
}

.btn.cart-checkout-button:focus,
.btn.cart-checkout-button:hover,
.cart-checkout-button.btn:focus,
.cart-checkout-button.btn:hover {
    color: #fff !important; /* keep white on hover/focus */
    text-decoration: none;
}

/* Fix cart dropdown positioning - should open on right side */
.rec1-catalog-cart.ui-dropdown {
    position: fixed!important;
    top: 0px!important;
    right: 0;
    z-index: 1050;
    width: 650px!important;
    height: 90vh;
    padding: 10px;
}

/* Ensure cart dropdown is properly positioned relative to its trigger */
.rec1-catalog-minicart-wrapper {
    position: relative;
}

/* Catalog tab body - basic desktop constraints */
.rec1-catalog-tab-body {
    overflow-x: hidden;
    min-width: 0;
}

.rec1-catalog-item-content {
    padding: 5px 10px!important;
}

.rec1-catalog-item-description {
    margin: 0px !important;
}

.rec1-catalog-tab-body img,
.rec1-catalog-item-description img,
.rec1-catalog-group-details img {
    max-width: 100%;
    height: auto;
}

/* Vertically center align all contents in the catalog panel row */
.col-12.d-flex.pb-1 {
    align-items: center;
}

/* Ensure nested flex containers also center their content vertically */
.col-12.d-flex.pb-1 .d-flex {
    align-items: center;
}

.checkout-continue-button {
    font-size: 1.135rem;
}

.checkout-form .card {
    background-color: #F5F5F5;
}

.checkout-form .card p {
    margin: 0 0 10px;
}

.checkout-form .text-info {
  color: #357697 !important;
}

#waiver-signature-box canvas {
    max-width: 100%;
}

.follow-social-media > .card-header {
    color: #333333;
    background-color: #F5F5F5;
    border-color: #DDDDDD;
    padding: 10px 15px;
    border-bottom: 1px solid #DDDDDD;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    text-transform: none;
    font-weight: normal;
}

.follow-social-media > .card-body {
    padding: 15px;
}

.rec1-gift-card-group .input-group-text,
.rec1-checkout-coupon-code-entry .input-group-text {
    background-color: #EEEEEE;
}

.rec1-gift-card-group span,
.rec1-gift-card-group input,
.rec1-gift-card-group button,
.rec1-checkout-coupon-code-entry span,
.rec1-checkout-coupon-code-entry input,
.rec1-checkout-coupon-code-entry button {
    padding: 6px 12px!important;
}

.checkout-prompt-response .radio-option input[type="radio"] {
    margin-right: 10px;
}

.checkout-prompt-response .radio-option .radio-label {
    font-size: 14px;
}

.offcanvas .rec1-login-dropdown.dropdown-menu {
  min-width: 250px;
  width: auto !important;
  inset: auto auto auto 0 !important;
  white-space: normal;
}

.rec1-transaction-browser-tab {
    padding: 10px;
}

.rec1-transaction-browser-tab table tr:last-child td {
    border: none;
}

.tab-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-container .nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
    border-bottom: 1px solid #dee2e6;
}

.tab-container .nav-item {
    flex: 0 0 auto;
}
.available-equipment-rentals-container .card {
    border: 1px solid #ddd;
    border-radius: 3px!important;
}

.available-equipment-rentals-container .card-header {
    border: none!important;
    border-radius: 3px!important;
}

.rentalItemQuantityInput {
    width:40px;
    border-radius: 0;
    border-right: 0;
    border-left: 0;
}

.rental-item-quantity-decrease,
.cart-item-quantity-decrease {
    border-color: #ccc;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.rental-item-quantity-increase,
.cart-item-quantity-increase {
    border-color: #ccc;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.cart-item-quantity-increase i,
.cart-item-quantity-decrease i {
    position: relative;
    top: 2px;
}

.cart-item-quantity-increase i,
.cart-item-quantity-decrease i {
    position: relative;
    top: -2px;
}

.rec1-checkout-items-container .cart-item-quantity-increase i,
.rec1-checkout-items-container .cart-item-quantity-decrease i {
    position: relative;
    top: 0px;
}

/* Wrapper for buttons + input */
.cart-item-quantity-wrapper {
    display: flex!important;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.rec1-checkout-items-container .cart-item-quantity-wrapper {
    justify-content: end;
    align-items: end;
}

/* Buttons: flex container to center icons */
.cart-item-quantity-wrapper .btn {
    display: flex!important;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    height: 30px;
    line-height: normal;
    flex: 0 0 auto;
    font-size: .6rem !important;
}

/* Icons inside buttons */
.cart-item-quantity-wrapper .btn i {
    display: block;
    margin: 0 auto;
}

/* Input field: desktop default */
.cart-item-quantity-wrapper .form-control {
    flex: 0 0 auto;
    width: 60px!important;
    max-width: 80px;
    min-width: 40px;
}

.cart-item-quantity {
    line-height: 24px!important;
}

.facility-grid .input-group-btn button {
    padding: 0 12px;
}

.facility-grid .input-group-btn button i {
    font-size: .8rem;
}

.reservation-date-selection,
.reservation-rate-types,
.reservation-hours {
    margin-bottom: 10px;
}

/* Navigation menu styles */
.rec1-login-form .form-group {
    margin-bottom: 10px;
}

.rec1-login-form .form-group label {
    margin-bottom: 5px;
}

#offcanvasMenuMain .offcanvas-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#offcanvasMenuMain .main-nav-sections {
    overflow-y: auto;
    flex: 1 1 auto;
}

#offcanvasMenuMain .rec1-public-navigation-bar {
    display: block !important;
    width: 100%;
}

#offcanvasMenuMain .rec1-public-navigation-group {
    display: block !important;
    width: 100%;
}

#offcanvasMenuMain .btn-group,
#offcanvasMenuMain .navbar-nav {
    display: block !important;
    width: 100%;
}

#offcanvasMenuMain .dropdown-menu-form li {
    padding: 0;
}

#offcanvasMenuMain .rec1-login-dropdown > li > a {
    padding: .5em;
    font-size: 1em;
}

#offcanvasMenuMain .btn {
    display: block !important;
    width: 100%;
    text-align: left;
    padding: 6px 16px;
    margin: 0 !important;
    border-radius: 0 !important;
}

#offcanvasMenuMain .rec1-login-form .btn {
    display: inline-block !important;
    width: auto;
    border-radius: var(--bs-border-radius)!important;
    padding: 0.375rem;
}

#offcanvasMenuMain .dropdown-menu {
    position: relative !important;
    float: none !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 20px;
    margin-bottom: 10px!important;
    transform: none!important;
}

#offcanvasMenuMain .dropdown-toggle::after {
    margin-top: 10px;
}

#offcanvasMenuMain .col,
#offcanvasMenuMain .text-end {
    width: 100% !important;
    text-align: left !important;
}

#offcanvasMenuMain a.btn,
#offcanvasMenuMain .btn-group > .btn {
    background: transparent;
    border: none;
}

#offcanvasMenuMain .btn-group-sm {
    font-size: inherit !important;
}

#offcanvasMenuMain .btn-group-sm > .btn {
    padding: 6px 16px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

#offcanvasMenuMain a span[class*="icon"],
#offcanvasMenuMain a span[class*="flaticon"],
#offcanvasMenuMain a .glyphicon,
#offcanvasMenuMain a .fa,
#offcanvasMenuMain a .fa-solid {
    margin-right: 8px;
}

#offcanvasMenuMain a .fa-solid {
    width: 16px;
}

.mobile-extra-links {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #ddd;
}

.mobile-extra-list {
    padding: 0;
    margin: 0;
}

.mobile-extra-list li a {
    display: block;
    padding: 6px 16px;
    text-decoration: none;
    color: var(--bs-body-color);
    font-size: 1rem;
}

.mobile-extra-list li a:hover {
    text-decoration: underline;
}

.mobile-utility-links {
    /* margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #ddd; */
    position: sticky;
    bottom: 0;
    background: white;
    padding: 12px;
    border-top: 1px solid #ddd;
    z-index: 10;
}

.mobile-utility-link {
    display: block;
    padding: 6px 16px;
    text-decoration: none;
    color: var(--bs-body-color);
    font-size: 1rem;
}

.mobile-utility-link:hover {
    color: #000;
}

.menu-collapse-link {
    position: relative;
}
/* Menu styles */

/* Responsive catalog tabs - single line horizontal scrolling at md breakpoint and below */
@media (max-width: 767.98px) {
    /* Cart responsive sizing */
    .d-flex .rec1-catalog-cart {
        width: 85% !important;
        max-width: 650px !important;
    }

    #offcanvasShoppingCart {
        width: 70%;
    }

    /* Responsive catalog tabs - horizontal scrolling */
    .rec1-catalog-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
        scroll-behavior: smooth;
        cursor: grab;
        user-select: none;
        scroll-snap-type: x proximity;
    }

    .rec1-catalog-tabs:active {
        cursor: grabbing;
    }

    .rec1-catalog-heading {
        position: relative;
        --gradient-opacity: 1; /* Default opacity */
    }

    .rec1-catalog-tabs .rec1-catalog-tabs-inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        min-width: 100%;
        position: relative;
        z-index: 1;
    }

    /* Mobile: horizontal scroll for tabs */
    @media (max-width: 768px) {
        .rec1-catalog-tabs-inner {
            overflow-x: scroll;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scrollbar-width: auto; /* Firefox - show scrollbar */
            scrollbar-color: #444444 #f1f1f1; /* Firefox - scrollbar color (thumb, track) */
            padding-bottom: 5px; /* Space for scrollbar */
        }

        /* Webkit browsers (Chrome, Safari, Edge) - custom scrollbar */
        .rec1-catalog-tabs-inner::-webkit-scrollbar {
            height: 12px; /* Horizontal scrollbar height */
            display: block; /* Ensure scrollbar is visible */
        }

        .rec1-catalog-tabs-inner::-webkit-scrollbar-track {
            background: #f1f1f1; /* Track color */
            border-radius: 6px;
        }

        .rec1-catalog-tabs-inner::-webkit-scrollbar-thumb {
            background: #444444; /* Thumb color */
            border-radius: 6px;
        }

        .rec1-catalog-tabs-inner::-webkit-scrollbar-thumb:hover {
            background: #555; /* Hover color */
        }

        .rec1-catalog-heading::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 75px;
            height: 100%;
            pointer-events: none;
            z-index: 2;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 68.75%);
            opacity: var(--gradient-opacity, 1);
            transition: opacity 0.2s ease-out;
        }
    }

    .rec1-catalog-tabs .rec1-catalog-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-width: max-content;
        scroll-snap-align: start;
    }

    .rec1-catalog-tabs .rec1-catalog-tab-btn {
        cursor: pointer;
        user-select: none;
    }

    .rec1-catalog-tabs .rec1-catalog-tab-btn:focus {
        scroll-margin-inline: 20px;
    }

    .rec1-catalog-tab-label {
        width: 150px!important;
        margin-right: 5px;
    }

    /* Catalog Items Mobile - Show only name and price columns */
    /* Hide all feature columns and their headings */
    .rec1-catalog-group-items.view-list .rec1-catalog-item-feature,
    .rec1-catalog-group-items.view-list .rec1-catalog-items-heading-feature {
        display: none !important;
    }

    /* Adjust name column to take more space */
    .rec1-catalog-group-items.view-list .rec1-catalog-item-name,
    .rec1-catalog-group-items.view-list .rec1-catalog-items-heading-name {
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Utility class for min-width: 0 (required for flex text truncation) */
    .min-w-0 {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Adjust price column */
    .rec1-catalog-group-items.view-list .rec1-catalog-item-price,
    .rec1-catalog-item > .ui-row-12 > .rec1-catalog-item-price {
        width: auto !important;
    }

    /* Force proper width constraints on catalog items */
    .rec1-catalog-group-items.view-list .rec1-catalog-item {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Force flexbox layout to work properly with ui-row-12 */
    .rec1-catalog-item-heading.d-flex.ui-row-12 {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Ensure name text doesn't overflow - applying to all levels */
    .rec1-catalog-item-heading.d-flex .rec1-catalog-item-name {
        min-width: 0 !important;
        overflow: hidden !important;
        flex: 1 1 0% !important;
        max-width: 75% !important;
    }

    .rec1-catalog-item-heading.d-flex .rec1-catalog-item-name * {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    .rec1-catalog-item-heading.d-flex .rec1-catalog-item-price {
        flex-shrink: 0 !important;
        min-width: fit-content !important;
    }

    .rec1-catalog-group-items.view-list .rec1-catalog-item-name > div,
    .rec1-catalog-group-items.view-list .rec1-catalog-item-name > span,
    .rec1-catalog-group-items.view-list .rec1-catalog-item-name > a {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* CRUD Form Responsive Layout */
    .crud-fieldsets .fieldset-group,
    .crud-fieldsets .fieldset {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }

    .crud-fieldsets .fieldset {
        margin-bottom: 1rem;
    }

    /* Form Group Layout */
    .ui-form-group > label {
        width: 28% !important;
        hyphens: none;
        word-break: keep-all;
    }

    .ui-form-group > label + .ui-col-9 {
        width: 72% !important;
    }

    /* Labels with Help Buttons */
    .ui-form-group:has(.ui-crud-help) > label {
        width: 28% !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.6em 20px 0.6em 0 !important;
        box-sizing: border-box;
        position: relative;
    }

    .ui-form-group:has(.ui-crud-help) > label .ui-crud-help {
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        margin-top: -3px !important;
    }

    /* Adjust help button alignment for labels with icons */
    .ui-form-group:has(.ui-crud-help) > label:has(i) .ui-crud-help {
        margin-top: 3px !important;
    }

    .ui-form-group:has(.ui-crud-help) > label + .ui-col-9 {
        width: 72% !important;
    }

    /* Multi-line Form Groups - Allow Label Wrapping */
    .ui-form-group:has(.ui-editlist) > label,
    .ui-form-group:has(.multi-field-editlist) > label,
    .ui-form-group:has(.ui-editlist-items) > label,
    .ui-form-group:has(a) > label,
    .ui-form-group:has(.ui-crud-field .ui-editlist-item) > label {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.4;
    }

    /* Form Element Styling */
    label.btn:has(input[type="radio"]),
    label.btn input[type="radio"] + span,
    label.btn {
        font-size: 0.75rem;
    }

    label.btn input[type="radio"] {
        margin-right: 0.1rem;
    }

    .ui-crud-field[data-field="emergencyContacts"] .btn span,
    .ui-crud-field-label .btn span {
        font-size: 0.75rem !important;
    }

    /* Select Field Responsive Styling */
    .ui-crud-field[data-field="phone1Carrier"] .ui-selectmenu,
    .ui-crud-field[data-field="phone1Carrier"] .selectmenu,
    .ui-crud-field[data-field*="Carrier"] .ui-selectmenu,
    .ui-crud-field[data-field*="Carrier"] .selectmenu {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 200px !important;
    }

    /* Email Field Responsive Layout */
    .ui-crud-field[data-field="additionalEmails"] .ui-editlist-item .ui-editlist-item-controls {
        display: block !important;
    }

    .ui-crud-field[data-field="additionalEmails"] .ui-editlist-item .ui-col-7,
    .ui-crud-field[data-field="additionalEmails"] .ui-editlist-item .ui-col-5 {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 0.5rem;
    }

    .ui-crud-field[data-field="additionalEmails"] .ui-selectmenu,
    .ui-crud-field[data-field="additionalEmails"] .selectmenu {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Input Field Responsive Sizing */
    .ui-crud-field:not(.inline) input[type="text"],
    .ui-crud-field:not(.inline) input[type="email"],
    .ui-crud-field:not(.inline) input[type="password"],
    .ui-crud-field:not(.inline) input[type="tel"],
    .ui-crud-field:not(.inline) textarea,
    .ui-crud-field:not(.inline) .ui-selectmenu,
    .ui-crud-field:not(.inline) .selectmenu {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ui-form-group .ui-crud-field input[type="text"]:not([style*="width"]),
    .ui-form-group .ui-crud-field input[type="email"]:not([style*="width"]),
    .ui-form-group .ui-crud-field input[type="password"]:not([style*="width"]),
    .ui-form-group .ui-crud-field input[type="tel"]:not([style*="width"]),
    .ui-form-group .ui-crud-field textarea:not([style*="width"]) {
        width: 100% !important;
    }

    /* Address Field Inline Layout */
    .ui-crud-field.inline[data-field="zip"],
    .ui-crud-field.inline[data-field="city"],
    .ui-crud-field.inline[data-field="state"] {
        display: inline-block !important;
        vertical-align: top;
        margin-right: 8px;
    }

    .ui-crud-field.inline[data-field="zip"] input {
        width: 80px !important;
        max-width: 80px;
    }

    .ui-crud-field.inline[data-field="city"] input {
        width: 120px !important;
        max-width: 120px;
    }

    /* Checkbox Form Groups */
    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field input[type="checkbox"]:only-child),
    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field .form-control-static input[type="checkbox"]) {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field input[type="checkbox"]:only-child) > label,
    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field .form-control-static input[type="checkbox"]) > label {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-right: 1rem;
        margin-bottom: 0;
        text-align: left;
    }

    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field input[type="checkbox"]:only-child) .ui-col-9,
    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field .form-control-static input[type="checkbox"]) .ui-col-9 {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* Ensure checkbox inputs themselves are vertically centered inside their container */
    .ui-form-group .ui-crud-field .form-control-static input[type="checkbox"] {
        vertical-align: middle;
        margin-top: 0; /* reset any default offsets */
    }

    .rec1-checkout-items-container .ui-table-fixed {
        table-layout: auto !important;
        width: 100% !important;
        word-wrap: break-word;
    }

    .checkout-continue-button {
        margin-top: 20px;
    }

    .rec1-gift-card-group,
    .rec1-checkout-coupon-code-entry {
        width: 100%!important;
    }

    .rec1-gift-card-group .input-group-text,
    .rec1-checkout-coupon-code-entry .input-group-text {
        flex: 0 0 45%;
        max-width: 45%;
        margin-bottom: 0.5rem;
    }

    .rec1-gift-card-group .form-control,
    .rec1-checkout-coupon-code-entry .form-control {
        flex: 1 1 55%;
        max-width: 55%;
        margin-bottom: 0.5rem;
    }

    .rec1-gift-card-group .btn,
    .rec1-checkout-coupon-code-entry .btn {
        flex: 1 1 100%;
        max-width: 100%;
    }

    body .modal-dialog {
        width: auto;
    }

    .cart-item-quantity-wrapper {
        max-width: 100%;
        width: auto!important;
    }

    .cart-item-quantity-wrapper .form-control {
        flex: 0 0 35px;
        width: 35px!important;
        min-width: 35px!important;
        max-width: 35px!important;
        height: 28px;
    }

    .cart-item-quantity-wrapper .btn {
        height: 28px;
        padding: 0 2px!important;
        flex: 0 0 20px;
        min-width: 20px;
        max-width: 20px;
        font-size: .5rem !important;
    }

    .rec1-transaction-browser-tab {
        padding: 5px;
    }

    .rec1-transaction-browser-tab table {
        font-size: 13px;
    }

    .rec1-transaction-browser-tab table td {
        padding: .5rem .25rem;
    }

    .rec1-transaction-browser-tab table td.payment-type {
        max-width: 80px;
    }

    .facility-map-popover{
        width: 95vw !important;
        max-width: 95vw !important;
        min-width: 280px !important;
        height: 50vh !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        z-index: 1060 !important;
        box-shadow: inset 0 -20px 15px -15px rgba(0, 0, 0, 0.1) !important;
    }

    .facility-map-popover .popover-body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 80vh !important;
        -webkit-overflow-scrolling: touch;
    }

    .facility-map-popover .popover-arrow {
        display: none !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* Scrollbar styling for better visibility */
    .facility-map-popover::-webkit-scrollbar {
        width: 8px !important;
    }

    .facility-map-popover::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 4px !important;
    }

    .facility-map-popover::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 4px !important;
    }

    .facility-map-popover::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3) !important;
    }

    /* Grid View - Stack column headers on mobile: weekday on one line, date on next */
    .interactive-grid-column-weekday {
        display: block;
        white-space: nowrap;
    }

    .interactive-grid-column-content {
        display: block;
        white-space: nowrap;
    }

    /* Ensure datepicker within facility popover is not affected by interactive map centering */
    .facility-map-popover .ui-datepicker {
        left: auto !important;
        transform: none !important;
    }

    /* Hide tooltip when facility popover is displayed */
    .tooltip {
        display: none !important;
    }
}

/* Interactive map container scrolling */
.interactive-map-scroll-wrapper {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.interactive-map-container {
    /* Allow the container to honor its JS-set width */
    max-width: none !important;
    overflow: visible !important;
    margin: 0 auto;
}

/* Center the legend on medium+ screens */
@media (min-width: 768px) {
    .interactive-map-heading > div:first-child {
        justify-content: center !important;
    }

    /* Keep time controls on a single line on medium+ screens */
    .interactive-map-heading > .mt-3 > .d-flex.flex-column.flex-md-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
}

.interactive-map-heading .interactive-map-date,
.interactive-map-heading input.interactive-map-date {
    max-width: 140px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}
.interactive-map-heading input.interactive-map-date.form-control,
.interactive-map-heading .datepicker {
    width: 140px !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Time picker inputs - ensure proper height and width */
.interactive-map-heading .timepicker.form-control {
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
    width: 85px !important;
    max-width: 85px !important;
    min-width: 85px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Prevent input-groups from taking full width and wrapping */
.interactive-map-heading .input-group {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    display: inline-flex !important;
}

/* Center the date input group */
.interactive-map-heading .text-center .input-group {
    max-width: fit-content !important;
    margin: 0 auto !important;
}

/* Input group text labels */
.interactive-map-heading .input-group .input-group-text {
    white-space: nowrap !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* All buttons in the interactive map heading */
.interactive-map-heading .btn,
.interactive-map-heading .input-group .btn {
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Ensure the Refresh button's textual span is only visible on small screens
    even if a script replaces or strips utility classes. The screen-reader
    visible label remains available via aria-label/visually-hidden. */
.interactive-map-refresh > span:not(.visually-hidden) {
    display: none !important;
}
@media (max-width: 767.98px) {
    .interactive-map-refresh > span:not(.visually-hidden) {
        display: inline !important;
    }
}

/* Button icons */
.interactive-map-heading .btn .glyphicon,
.interactive-map-heading .btn i {
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Vertical alignment for input group elements */
.interactive-map-heading .input-group .form-control,
.interactive-map-heading .input-group .btn,
.interactive-map-heading .input-group .input-group-text {
    vertical-align: middle !important;
}

/* Extra small screens - tighter spacing for catalog items */
@media (max-width: 400px) {
    /* Reduce max-width on name column to prevent overlap with quantity badge */
    .rec1-catalog-group-items.view-list .rec1-catalog-item-name,
    .rec1-catalog-group-items.view-list .rec1-catalog-items-heading-name {
        max-width: 60% !important;
    }

    /* Ensure price column uses remaining space efficiently */
    .rec1-catalog-group-items.view-list .rec1-catalog-item-price,
    .rec1-catalog-item > .ui-row-12 > .rec1-catalog-item-price {
        flex: 1 1 auto !important;
        max-width: 40% !important;
        text-align: right !important;
        padding-right: 0 !important;
    }

    /* Add gap between columns */
    .rec1-catalog-item-heading.d-flex {
        gap: 4px !important;
    }

    /* Tighten padding on catalog items */
    .rec1-catalog-item {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

@media (max-width: 992px) {
    /* Make tables, divs and lists responsive in catalog tab body, item description, and group details */
    .rec1-catalog-tab-body table,
    .rec1-catalog-tab-body > div,
    .rec1-catalog-tab-body ul,
    .rec1-catalog-tab-body ol,
    .rec1-catalog-item-description table,
    .rec1-catalog-item-description > div,
    .rec1-catalog-item-description ul,
    .rec1-catalog-item-description ol,
    .rec1-catalog-group-details table,
    .rec1-catalog-group-details > div,
    .rec1-catalog-group-details ul,
    .rec1-catalog-group-details ol {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Override inline table widths for nested tables (handles complex HTML structures) */
    .rec1-catalog-tab-body table[style*="width"],
    .rec1-catalog-tab-body table[style*="margin"],
    .rec1-catalog-item-description table[style*="width"],
    .rec1-catalog-item-description table[style*="margin"],
    .rec1-catalog-group-details table[style*="width"],
    .rec1-catalog-group-details table[style*="margin"] {
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Ensure all nested tables respond properly */
    .rec1-catalog-tab-body table table,
    .rec1-catalog-item-description table table,
    .rec1-catalog-group-details table table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Handle table layout for responsive design */
    .rec1-catalog-tab-body table[style*="table-layout"],
    .rec1-catalog-item-description table[style*="table-layout"],
    .rec1-catalog-group-details table[style*="table-layout"] {
        table-layout: auto !important;
    }

    .rec1-catalog-tab-body table td,
    .rec1-catalog-tab-body table th,
    .rec1-catalog-tab-body li,
    .rec1-catalog-item-description table td,
    .rec1-catalog-item-description table th,
    .rec1-catalog-item-description li,
    .rec1-catalog-group-details table td,
    .rec1-catalog-group-details table th,
    .rec1-catalog-group-details li {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    /* Ensure table cells don't constrain content */
    .rec1-catalog-tab-body table td[style*="width"],
    .rec1-catalog-tab-body table th[style*="width"],
    .rec1-catalog-item-description table td[style*="width"],
    .rec1-catalog-item-description table th[style*="width"],
    .rec1-catalog-group-details table td[style*="width"],
    .rec1-catalog-group-details table th[style*="width"] {
        width: auto !important;
    }

    .rental-item-time-slot {
        position: static !important;
        margin-inline: 0 !important;
        margin: 20px auto 6px auto;
        width: 17em; /* same width as datepicker */
        max-width: 100%;
    }

    .interactive-grid-table tr td div span {
        display: inline-block;
        max-width: 95%;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
}

/* Desktop / larger screens: ensure checkbox-only form groups are vertically centered */
@media (min-width: 768px) {
    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field input[type="checkbox"]:only-child),
    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field .form-control-static input[type="checkbox"]) {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field input[type="checkbox"]:only-child) > label,
    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field .form-control-static input[type="checkbox"]) > label {
        display: inline-block !important;
        margin-right: 1rem !important;
        margin-bottom: 0 !important;
        vertical-align: middle !important;
    }

    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field input[type="checkbox"]:only-child) .ui-col-9,
    .ui-form-group:not([style*="display: none"]):not(.hidden):has(.ui-crud-field .form-control-static input[type="checkbox"]) .ui-col-9 {
        display: inline-block !important;
        vertical-align: middle !important;
    }

    .ui-form-group .ui-crud-field .form-control-static input[type="checkbox"] {
        vertical-align: middle !important;
        margin-top: 0 !important;
    }
}

/* popover heading fixes */
.popover-header {
    margin: 0;
}

.bg-danger {
    background-color: #f2dede !important;
}

.bg-warning {
    background-color: #fcf8e3 !important;
}

.bg-success {
    background-color: #dff0d8 !important;
}

.bg-light-gray {
    background-color: #f5f5f5 !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.popover .popover-body h3 {
    font-size: 24px !important;
}

.popover .popover-body .btn-group > .closeDetails {
    flex: none;
    margin-left: auto;
}

div#rec1-contact-preferences {
    margin-top: 15px
}

#rec1-public-navigation-bar {
    padding: 10px 1em !important;
}

.rec1-catalog-panel-offset {
    margin-left: 0px !important;
}

.login-textinput {
    padding: .375rem .75rem !important;
}

.rec1-login-dropdown {
    width: auto !important;
}

.rec1-checkout-minicart-container {
    width: 150px;
    min-width: 120px;
}

/* Fix Date Range Picker on small screens (e.g. inside Facility Map Popover) */
@media (max-width: 767.98px) {
    .daterangepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 90% !important;
        max-width: 360px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1100 !important; /* Ensure it is above the fixed popover (1060) */
        margin: 0 !important;
    }

    /* Stack the calendars */
    .daterangepicker .calendar.left,
    .daterangepicker .calendar.right {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border: none !important;
    }

    .daterangepicker .ranges {
        float: none !important;
        width: 100% !important;
        text-align: center;
        margin-top: 5px !important;
    }
}

/* Utility for preserving whitespace in text */
.pre-wrap {
    white-space: pre-wrap;
}

/* Fix checkbox and label alignment in responses */
.checkout-prompt-response input[type="checkbox"],
.checkout-prompt-response label {
    display: inline-block !important; /* Force inline to prevent stacking */
    vertical-align: middle;
    width: auto !important; /* Override full width if set */
    margin-bottom: 0 !important;
}

.checkout-prompt-response label {
    margin-left: 0.5em; /* Add spacing between checkbox and label */
}

/* Hide line breaks that might separate checkbox and label in legacy code */
.checkout-prompt-response br {
    display: none;
}

/* Force character counter to wrap to new line below input */
.checkout-prompt-response .character-counter-container {
    flex-basis: 100%;
    width: 100%;
    text-align: center; /* Center on mobile to match input alignment */
    margin-top: 0.25rem;
}

@media (min-width: 768px) {
    .checkout-prompt-response .character-counter-container {
        text-align: right; /* Right align on desktop to match input alignment */
    }
}

/* Fix for jQuery UI Selectmenu long options on mobile */
/* Prevent dropdown from extending off-screen */
.ui-selectmenu-menu {
    max-width: 90vw !important;
}

/* Allow text wrapping in dropdown options */
.ui-selectmenu-menu .ui-menu-item-wrapper,
.ui-selectmenu-menu .ui-menu-item {
    white-space: normal !important;
    word-break: break-word;
    height: auto !important;
}

/* Ensure the trigger button text also respects width */
.ui-selectmenu-button,
.ui-selectmenu-text {
    max-width: 100%;
}