.product-card {
    cursor: pointer;
}

.cursor {
    cursor: pointer;
}


.active {
    font-weight: bold;
}
.disabled {
    pointer-events: none;
    opacity: 0.4;
}




.select2-container .select2-selection--single {
    height: 42px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 39px;
}

.custom-select, .form-control {
    /*background: #fff;*/
    padding: 10px 20px;
    font-size: 14px;
    height: auto;
}


.light-grey-backround{
    background-color: lightgrey;
}

.light-green-backround {
    background-color: #cdffb1;
}

.light-red-backround{
    background-color: #fddce1;
}

.primary-background{
    background-color: #007bff;
    color: white;
}




.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
    width: 100%;
    max-width: 90%;
}


.product-card .product-image .sticker.frozen {
    background-image: url('../../img/share/ICON_FrozenBlank.png');
}

.product-card .product-image .sticker.new {
    background-image: url('../../img/share/ICON_NewBlank.png');
    color: black;
}

.product-card .product-image .sticker.not-available {
    background-image: url('../../img/share/ICON_NABlank2.png');
    font-size: 12px;

    width: 139px;
    top: -13px;
    padding-top: 23px;
}

.product-card .product-image .sticker.out-of-stock {
    background-image: url('../../img/share/ICON_StockBlank.png');
    font-size: 12px;

    width: 139px;
    top: -13px;
    padding-top: 23px;
}






.product-card .product-image .sticker {

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 0px;
    position: absolute;
    top: -12px;
    left: -10px;
    border-radius: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: none;
    padding-top: 20px;
    padding-bottom: 33px;
    color: white;
    background-color: unset !important;
    text-transform: uppercase;
    width: 100px;
}






.notActive {
    background-color: #ddd;
}







.readmore {
    position: relative;
    max-height: 100px;
    overflow: hidden;
    width:200px;
    padding: 10px;
    margin-bottom: 20px;
    transition:max-height 0.15s ease-out;
}
.readmore.expand{
    max-height: 5000px !important;
    transition:max-height 0.35s ease-in-out;
}
.readmore-link {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 60px;
    text-align: center;
    color: blue;
    font-weight: bold;
    font-size: 16px;
    padding-top: 40px;
    background-image: linear-gradient(to bottom, transparent, white);
    cursor: pointer;
    border-bottom: 2px solid black;
    padding-bottom: 24px;
}
.readmore-link.expand {
    position: relative;
    background-image: none;
    padding-top:10px;
    height:20px;
}
.readmore-link:after {
    content:"Read more";
}
.readmore-link.expand:after{
    content:"Read less";
}
.greyed{
    margin-top: 10px !important;
}











.pcoded-submenu .active {
    background: #5d8ebb;
}

.pcoded-submenu .active-link {
    background: #86ae00;
    color:white;
}




.hidden {
    display: none;
}
.hide {
    display: none;
}
.show {
    display: block !important;
}
.red-font{
    color: red;
}
.green-font{
    color: #29a629;
}




.product-option {
    background-color: #FFFFFF;
    padding: 0 30px;
    min-height: 50px;
    height: unset;
}


.link {
    cursor: pointer;
}

.mt-28{
    margin-top: 28px !important;
}


.shippingReminder {
    background-color: rgb(255, 191, 0);
    border-radius: 7px;
    width: 50%;
    margin: auto;
}

.urgentOrderCheckbox {
    background-color: rgba(255, 77, 0, 0.54);
    border-radius: 7px;
    width: 50%;
    margin: auto;
}
.urgentOrderCheckbox label {
    margin-bottom: 0px;
}


.single-support
{
    border: 1px solid #ddd;
    position: relative;
    height: unset;
    line-height: 70px;
    background-color: white;
}

.single-support p {
    margin-bottom: 0;
}

.borderRed {
    border: 1px solid red;
}

.single-support .text
{
    line-height: 35px;
    padding-left: 70px;
    color: #222;
}


.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.smaller {
    font-size: 10px;
    color: #555;
}

.noBreak {
    white-space: nowrap;
}
.breakSpaces {
    white-space: break-spaces;
}

.badge-CLIENT {
    background-color: #007ac6;
    color: white;
}
.badge-COORDINATOR {
    background-color: #00c6bf;
    color: white;
}
.badge-DIETITIAN {
    background-color: #b9c903;
    color: white;
}
.badge-STAFF {
    background-color: #00830d;
    color: white;
}
.badge-ADMIN {
    background-color: #ff0000;
    color: white;
}

.badge-SCAN {
    background-color: #ff0000;
    color: white;
}



.badge-COORDINATOR-AWAITING {
    background-color: #ffa400;
    color: white;
}


.badge-SCAN-AWAITING {
    background-color: #eca4b2;
    color: white;
}

.badge-SCAN-PREPROCESS {
    background-color: #974050;
    color: white;
}

.badge-CLIENT-AWAITING-PAYMENT {
    background-color: #ccc200;
    color: white;
}

.badge-CLIENT-CANCELLED {
    background-color: #9b9b9b;
    color: white;
}

.badge-CLIENT-PAYMENT-DECLINED {
    background-color: #ff0000;
    color: white;
}

.badge-PATIENT-AWAITING-PAYMENT {
    background-color: #fff200;
    color: white;
}

.badge-PATIENT-CANCELLED {
    background-color: #9b9b9b;
    color: white;
}

.badge-PATIENT-PAYMENT-DECLINED {
    background-color: #ff0000;
    color: white;
}

.badge-COORDINATOR-ORDER-REJECTED {
    background-color: #cccccc;
    color: white;
}

.badge-STAFF-AWAITING {
    background-color: #9a6200;
    color: white;
}

.badge-STAFF-BACKORDER {
    background-color: #043efc;
    color: white;
}

.badge-STAFF-PROCESSED {
    background-color: #00830d;
    color: white;
}

.badge-STAFF-CANCELLED {
    background-color: #9b9b9b;
    color: white;
}


.badge-large {
    font-size: 13px;
}



.money {
    text-align: right;
}

.deceased {
    background-color: #ffc6c6;
}



.error-message {
    font-size: 10px;
    color: red;
}
.message.error {

    background-color: red;
    color: white;
    padding: 10px;
}


.urgent_form_error {
    border: 4px solid red;
}

.text-muted {
    color: #6c757d !important;
    font-size: 10px;
}



.btn-sm {
    padding: 5px!important;
    margin: 0;
    line-height: 20px;
}

/* Icon-only buttons (edit/delete/undelete/add, etc.) -- the icon font's own line-height
   doesn't reliably center against .btn-sm's fixed line-height above, leaving it sitting
   a bit high. Flexbox centers it regardless of the icon font's own metrics. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.checkoutBtn {
    padding-bottom: 10px;
    margin-bottom: 14px;
    margin-top: 14px;
    text-transform: uppercase;
}

.category-list .btn-sm {
    white-space: wrap;
}

.category-list img {
    width: 100px;
}

.category-list .badge-success {
    color: #fff!important;
    background-color: var(--brand-primary, #415500);
}


.date {
    color: black;
}





.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #f00;
    outline: 14px;
    box-shadow: 0 0 0 0.5rem rgba(0,123,255,.25);
}




a.anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}









/* covered / not-covered */
.product-card .product-image .sticker.notCovered {
    background-color: #c6a900;
}
.product-card .product-image .sticker.covered {
    background-color: #00d878;
}


.covered {
    background-image: url('../../img/share/Grn-CheckTRI.png'); /* Replace with actual image path */
    height: 62px;
    background-size: 60px;
    background-repeat: no-repeat;
    top: 0px;
    position: absolute;
    right: 0px;
    width: 60px;
    margin-top: 0px;
    padding-top: 0px;
    float: right;
}

.cart .covered {
    background-image: url('../../img/share/Grn-CheckSQ.png'); /* Replace with actual image path */
    position: relative;
    background-size: 20px;
    height: 20px;
    width: 20px;
    left: 0px;
    top: 0px;
    float: left;
}

.notCovered {
    background-image: url('../../img/share/OR-MoneyTRI.png'); /* Replace with actual image path */
    height: 62px;
    background-size: 60px;
    background-repeat: no-repeat;
    top: 0px;
    position: absolute;
    right: 0px;
    width: 60px;
    margin-top: 0px;
    padding-top: 0px;
}

.cart .notCovered {
    background-image: url('../../img/share/OR-MoneySQ.png'); /* Replace with actual image path */
    position: relative;
    background-size: 20px;
    height: 20px;
    width: 20px;
    left: 0px;
    top: 0px;
    float: left;
}

.outOfStock {
    background-image: url('../../img/share/ICON_GreyBELL_out_of_stock.png'); /* Replace with actual image path */
    height: 62px;
    background-size: 60px;
    background-repeat: no-repeat;
    top: 0px;
    position: absolute;
    right: 0px;
    width: 60px;
    margin-top: 0px;
    padding-top: 0px;
}


/* Diagonal covered/charged ribbon, top-right corner of the client product grid card
   (products_all_middle.php). Lives inside its own small overflow:hidden wrapper --
   scoped to just the ribbon itself, not the whole .product-image -- so clipping the
   rotated banner down to a clean corner triangle can't affect the sticker icons
   (frozen/new/not-available/out-of-stock) that share the .product-card .product-image
   selector and position themselves with negative offsets instead. */
.product-card .product-image .ribbon-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.product-card .product-image .ribbon-wrap .status-ribbon {
    position: absolute;
    top: 15px;
    right: -32px;
    width: 130px;
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    transform: rotate(45deg);
}
.status-ribbon.covered {
    background-color: #00d878;
}
.status-ribbon.charged {
    background-color: #c6a900;
}

/* Same Covered/Charged colors as the card grid's corner ribbon (.status-ribbon above),
   as a plain inline badge next to the product code in the detail modal's title
   (products_modal.php) instead of a rotated corner ribbon on the (now square) image. */
.coverage-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    vertical-align: middle;
}
.coverage-badge.covered {
    background-color: #00d878;
}
.coverage-badge.charged {
    background-color: #c6a900;
}

/* "?" next to the Icon Index / coverage filter title (products_all_left.php) --
   click opens the #iconIndexModal with the same wording as the persistent legend. */
.coverage-help {
    cursor: pointer;
    margin-left: 5px;
    font-size: 19px;
    color: #6c757d;
    vertical-align: middle;
}

/* .product-quick-view (vendor CSS) defaults modals to max-width: 1022px, and
   .modal.show .modal-dialog (below, common.css) further forces
   max-width: 90% -- both sized for a product image + details layout, way too wide
   for this modal's short text-only legend. Matching .modal.show .modal-dialog's own
   3-class specificity plus our modifier class beats both without !important. */
.modal.show .modal-dialog.icon-index-modal {
    max-width: 460px;
}


.cart td {
    padding: 0px;
}


@media only screen and (max-width: 575px) {

    .covered, .notCovered {
        width: 120px;
    }

    .product-card {
        min-height: 350px;
        height: unset;
    }

    .product-card .product-image .ribbon-wrap .status-ribbon {
        width: 110px;
        font-size: 10px;
        right: -28px;
    }
}





.single-product-image .covered, .single-product-image .notCovered {
    top: 0px;
}




.navbar-menu .btn {
    color: white!important;
}





.w100px {
    width: 100px;
}



@media (max-width: 767px) {
    .hide-mobile {
        display: none;
    }
}

@media (max-width: 767px) {
    .hide-desktop {
        display: none;
    }
}




.search-form a {
    background: #00509e;
    border: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 1em;
    font-weight: normal;
    height: 50px;
    letter-spacing: .05em;
    line-height: 50px;
    min-width: 120px;
    outline: none;
    padding: 0 20px;
    position: static;
    text-align: center;
    width: auto;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

h3 small {
    font-size: 33%;
    font-weight: 400;
}

.header-logo-search h3 {
    top: 5px!important;
    position: relative;
}






.prescriptionCard {
    background: #fff;
    box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3);

    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    width: 90%;
    margin: 0 auto;
}

.prescriptionCard .header {
    background-color: #425207;
    color: white;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.prescriptionCard .badge {
    border-radius: 30px;
    border: unset;
    padding: 7px;
}






.input-group {
    background: white;
}





.background-danger {
    background-color: #ffcdcd;
}

.background-success {
    background-color: #cdffd1;
}
.image-container {
    position: relative;
    display: inline-block; /* keeps container tight around the image */
}

.image-container img {
    display: block;
    width: 100%; /* responsive */
    height: auto;
}

.image-text {
    position: absolute;
    top: 50%;   /* vertical center */
    left: 50%;  /* horizontal center */
    transform: translate(-50%, -50%); /* perfect centering */
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* make text visible on image */
}


.alert-warning {
    color: #000;
    border-color: #fceec4;
}



.welcomeModal p {
    color: #000!important;
}


.patientLegend {
    text-align: left;
}
.patientLegend strong {
    text-transform: uppercase;
    color: #000000;
    text-align: left;
    line-height: 1 !important;
    display: inline-block;
}
.patientLegend .category-title {
    text-align: center;
}
.patientLegend .category-title .title {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.patientLegend .divider hr {
    height: 4px; /* thickness of the line */
    background-color: #f0f0f0; /* base color */
    border: none;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25); /* inner shadow effect */
    border-radius: 2px; /* softens the edges */
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 13px;
    margin-bottom: 10px;
}
.patientLegend .category-title {
    border-bottom: 0px!important;
}



.notifyMe {
    background-color: #909090;
    color: white;
    border: 1px solid #646464;
}











.labelsSeparateLines label {
    display: block;
    margin-bottom: 5px; /* optional spacing */
}

/* The footer flows with the document — never pinned to the viewport (position: fixed or
   sticky both keep it on screen while scrolling a long page, e.g. the Client product
   catalog, which is exactly what this must not do). On short pages (e.g. the login
   screen) a flex column on body stretches #content to fill the viewport, which pushes
   the footer to the bottom without pinning it; long pages are unaffected since #content
   already exceeds the viewport on its own. */
body.public-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.public-site #content {
    flex: 1 0 auto;
}







.badge {
    display: inline-block;
    padding: .5em 0.5em;
    font-size: 84%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}



.btn-save {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
}





.qty-input {
    width: 100px;
}




.category-list-items {
    text-align: left;
}



.manufacturer {
    font-size: 12px;
}


.provinceMinRequiredBox {
    background-color: #3285d8;
    padding: 10px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
    color: white;
    padding-left: 30px;
    padding-right: 20px;
}




.category-list-items.shoppingCart {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
}







.searchBox {
    margin-top: 5px;
}
.searchBox::placeholder {
    color: #999;
}
.category-search input {
    color: black;
}

/* Homogeneous search band: leading loupe icon + input sharing one grey background */
.search-band {
    display: flex;
    align-items: center;
    background: #F3F3F3;
    border-radius: 5px;
    padding: 0 15px;
}
.search-band .searchIcon {
    color: #999;
    font-size: 18px;
    margin-right: 10px;
}
.search-band .searchBox {
    flex: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    height: 50px;
    margin-top: 0;
    padding: 0;
}
.search-band .clearBtn {
    position: static;
    background: none;
    border: 0;
    padding: 0;
    height: auto;
    width: auto;
    font-size: 18px;
    color: #ffc107;
}
/* Hide the clear (X) button while the input is empty (placeholder showing) */
.search-band .searchBox:placeholder-shown ~ .clearBtn {
    display: none;
}


.admin-link {
    margin-left: 0px!important;
}

.navbar-menu ul li {
    display: inline-block;
    margin-left: 35px;
    padding: 13px 0;
    position: relative;
}




.admin-link a {
    font-size: 12px!important;
}


.category-main-btn {
    border-radius: 10px;
}






@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spinSlow 1s linear infinite;
}




 .productName {
     font-weight: bold;
     font-size: 15px;
     width: 100%;
     line-height: 17px;
     padding: 5px 5px 0 5px;
     margin-bottom: 0px;


 }



 .greenLabel {
     background-color: #10c23a!important;
 }




.prescription-main-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: wrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid var(--brand-highlight, #7FA600);
    margin-top: 1px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 16px;
    color: #000;
    cursor: pointer;
    z-index: 5;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    background-color: var(--brand-light, #c9d993);
    position: relative;
    z-index: 5;
    -webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    width: 100%;
    border-radius: 5px;
    padding: 3px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.prescription-main-btn:hover {
    background-color: #f8b216;
    color: white;
}



.original_price {
    text-decoration: line-through;
    color: rgb(125, 125, 125);
}


/* Client "My account" page (share/2025/users/my_account_*) -- self-styled rather than
   relying on Bootstrap's .card, which the storefront (emart) theme doesn't box/shade the
   way the Staff/Admin dashboard theme does. Colors stay neutral gray here; the accent
   color on .checkout-title/.btn-primary/.btn-warning already comes from each brand's own
   stylesheet (nfdc/cusm/paramed), so this file stays brand-agnostic on purpose. */
.account-panel {
    background: #fff;
    border-radius: 14px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.account-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
}

.account-panel-header .checkout-title {
    margin: 0;
    font-size: 20px;
}

.account-save-btn {
    margin-top: 10px;
}

.account-links {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee;
}

.account-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    margin-right: 10px;
    margin-top: 6px;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.account-link-btn:hover {
    border-color: #bbb;
    background: #f7f7f7;
    color: #000;
    text-decoration: none;
}

.account-link-btn i {
    font-size: 16px;
}

.account-address-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-top: 16px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.account-address-row:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-color: #ddd;
}

.account-address-row > i {
    font-size: 20px;
    color: #999;
}

.account-address-row .account-address-text {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.account-address-actions a {
    margin-left: 12px;
    font-size: 17px;
    color: #999;
    transition: color 0.2s ease;
}

.account-address-actions a:hover {
    color: #333;
}

.account-address-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.account-address-empty .lni {
    font-size: 34px;
    display: block;
    margin-bottom: 10px;
    color: #ccc;
}

.account-address-empty p {
    margin: 0;
}

@media only screen and (max-width: 575px) {
    .account-panel {
        padding: 22px 18px;
    }
}

/* Client "My Orders" list (element/orders/client/list) -- an .account-address-row split into
   three blocks: what the order is, what it costs, what you can do with it. They sit side by
   side on a desktop and stack on a phone, where the row's own flex-direction flips. */
.client-order-row {
    flex-wrap: wrap;
    gap: 10px 18px;
}

.client-order-identity {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.client-order-number {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.client-order-meta {
    font-size: 13px;
    color: #888;
}

.client-order-notes {
    flex-basis: 100%;
}

.client-order-money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
}

.client-order-total {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.client-order-due {
    font-size: 13px;
    color: #c0392b;
}

.client-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media only screen and (max-width: 575px) {
    .client-order-money,
    .client-order-actions {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
}

/* Client "To pay" list (element/payments/due) -- the My Orders row as a <label>
   with a checkbox in front, so the whole row ticks the order in or out of the payment. */
.due-order-row {
    cursor: pointer;
    align-items: center;
}

.due-order-row .due-order-check {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Selectable address row on the checkout page (carts/checkout/address) --
   an .account-address-row whose text is wrapped in a radio <label> instead of a plain
   span, so the whole row (not just the tiny radio dot) toggles the selection. */
.account-address-select {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    margin: 0;
    cursor: pointer;
}

.account-address-select input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
}

/* ---- Single-step checkout (templates/element/2026/checkout/*) ----------------------
   Sections reuse .account-panel so checkout looks like the rest of the client area;
   what follows is only the parts that page adds: summary lines, totals and the frame
   the Moneris card frame drops into. Brand accent colors stay in the brand sheets. */

.checkout-amount {
    font-size: 20px;
    font-weight: 700;
}

.checkout-note {
    margin: 16px 0 0;
    line-height: 1.6;
}

.checkout-note .lni {
    margin-right: 4px;
}

.checkout-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.checkout-line-image {
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex: 0 0 auto;
}

.checkout-line-body {
    flex: 1;
    min-width: 0;
}

.checkout-line-name {
    display: block;
    font-size: 15px;
    color: #333;
}

.checkout-line-meta {
    display: block;
    font-size: 13px;
    color: #999;
    margin-top: 3px;
}

.checkout-line-price {
    font-weight: 700;
    white-space: nowrap;
}

/* Checkout summary: the remove (trash) button after each line's amount. */
.checkout-line-remove {
    margin-left: 10px;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #d32f2f;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.checkout-line-remove:disabled {
    opacity: 0.5;
    cursor: default;
}

.checkout-totals {
    margin-top: 18px;
}

.checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 15px;
}

.checkout-total-due {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    font-size: 19px;
    font-weight: 700;
}

.checkout-programs {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee;
}

.checkout-programs h6 {
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    margin-bottom: 10px;
}

.checkout-payment-frame {
    margin-top: 18px;
}

/* Moneris card form (element/payments/card_form): the Hosted Tokenization frame
   is an iframe styled through its URL parameters; only its box and the messages around it
   are styled here. */
.card-payment-form {
    max-width: 520px;
}

.card-payment-form .card-payment-frame {
    display: block;
    width: 100%;
    height: 230px;
    border: 0;
    margin-bottom: 12px;
}

/* Product quick-view modal (element/products/catalog/product_modal.php and
   element/products/shop/product_modal.php): Description/Précautions read as plain body text
   otherwise (.sub-title is font-weight: normal in the brand stylesheets), and .weight (12px)
   vs .perCase (no override, inherits the larger body size) render "Poids net" and "Unités
   par caisse" at two different sizes on the same line. Kept in this stylesheet rather than
   an inline <style> in the template itself: #productModalVue sits inside the page's Vue
   `el: '#app'` mount point, and an inline <style> there is at the mercy of Vue's own
   template compilation on mount. */
#productModalVue h4.sub-title {
    font-weight: bold;
}

#productModalVue .weight,
#productModalVue .perCase {
    font-size: 14px;
}

/* Top nav "Connexion" link (element/layout/topnav.php): a plain text link is
   easy to miss next to the product grid -- styled as a small dark-green pill button (light
   green on hover), white text throughout.
   This needs !important: .dash-topnav .navbar-nav .nav-link (layout/topnav.css) forces its
   own color/background-color with !important on both the resting and :hover state (#313a46
   normal, #04a9f5 cyan on hover) -- a normal-weight rule here, however specific, can't win
   against that. .main-btn's own visible green (public.css) actually comes
   from a ::before overlay behind the link, not the link's own background (which is exactly
   the "transparent !important" layout/topnav.css forces) -- disabled here so the colors
   below are the only thing drawing the button, instead of stacking on top of that overlay. */
.dash-topnav .navbar-nav .login-nav-btn.main-btn {
    height: 36px;
    /* layout/topnav.css forces line-height: 1.4 !important on every nav-link, which doesn't
       match this button's fixed height and pushes the text off-center -- match the height with
       !important too so it actually wins. */
    line-height: 36px !important;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    /* Meme rayon que les champs et le bouton de .auth-card, et pas de capitales : .main-btn
       force text-transform: uppercase, qui detonne a cote du "Connexion" de la carte. */
    border-radius: 10px;
    text-transform: none;
    background-color: var(--brand-accent, #638007) !important;
    border-color: var(--brand-accent, #638007);
    color: #fff !important;
}

.dash-topnav .navbar-nav .login-nav-btn.main-btn::before {
    display: none;
}

.dash-topnav .navbar-nav .login-nav-btn.main-btn:hover {
    background-color: #a8d651 !important;
    border-color: #a8d651;
    color: #fff !important;
}

/* Right-hand items of the top nav (Login, Logout, Theme, Language, Cart...): a gap between
   each, so the login button, the theme toggle and the language don't touch. Only once the
   navbar is expanded (navbar-expand-lg); collapsed, they're stacked anyway. */
@media (min-width: 992px) {
    .dash-topnav .navbar-nav.ml-auto {
        gap: 12px;
    }
}


/* ===========================================================================
   Carte d'authentification -- .auth-card
   Utilisée par /forgot (templates/element/users/reset_request_form.php).
   Volontairement autonome : elle ne réutilise ni .login-wrapper (boîte grise à
   bord dur du thème emart) ni .main-btn (hauteur fixe de 45px et ::before qui
   empêchent un bouton pleine largeur). La couleur --brand-accent (css/brands/) est celle de la marque,
   déjà porté par .main-btn et le bouton Connexion de la barre de navigation.
   Les surcharges du thème sombre vivent dans dark-theme.css.
   =========================================================================== */

.auth-page {
    padding: 56px 0 90px;
}

.auth-card {
    max-width: 440px;
    margin: 0 auto;
    padding: 40px 40px 32px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .07);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -14px rgba(16, 24, 40, .22);
}

.auth-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-accent, #638007) 10%, transparent);
    color: var(--brand-accent, #638007);
}

.auth-card__icon svg {
    width: 26px;
    height: 26px;
}

.auth-card__title {
    margin: 0 0 8px;
    /* Sans balance, "passe" tombe seul sur la deuxieme ligne du titre comme du sous-titre. */
    text-wrap: balance;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    color: #1a1a1a;
}

.auth-card__lead {
    margin: 0 0 26px;
    text-wrap: balance;
    font-size: 14.5px;
    line-height: 1.55;
    text-align: center;
    color: #6b7280;
}

/* Porte le style du champ (email comme mot de passe) plutot que .auth-card input[type=...]. */
.auth-field {
    margin-bottom: 20px;
    text-align: left;
}

.auth-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.auth-field input {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
    color: #111827;
    background: #fff;
    border: 1px solid #d5d8dd;
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-field input::placeholder {
    color: #9ca3af;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--brand-accent, #638007);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, #638007) 16%, transparent);
}

.auth-submit {
    display: block;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: var(--brand-accent, #638007);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.auth-submit:hover {
    background: #546d06;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand-accent, #638007) 85%, transparent);
}

.auth-submit:active {
    transform: translateY(1px);
}

.auth-submit:focus-visible {
    outline: 2px solid var(--brand-accent, #638007);
    outline-offset: 2px;
}

.auth-card__footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(16, 24, 40, .08);
    text-align: center;
}

.auth-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-accent, #638007);
    text-decoration: none;
}

.auth-link svg {
    width: 15px;
    height: 15px;
}

.auth-link:hover,
.auth-link:focus {
    color: var(--brand-primary, #415500);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .auth-page {
        padding: 32px 0 60px;
    }

    .auth-card {
        padding: 30px 22px 24px;
        border-radius: 14px;
    }

    .auth-card__title {
        font-size: 21px;
    }
}


/* ===== Variante large de .auth-card + champs multilignes =====
   Le formulaire de contact (element/pages/help/form.php) a cinq champs dont un pavé de
   texte : 440px, taillé pour deux lignes de connexion, y serre trop. */
.auth-card--wide {
    max-width: 560px;
}

.auth-field textarea {
    display: block;
    width: 100%;
    min-height: 130px;
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.5;
    color: #111827;
    background: #fff;
    border: 1px solid #d5d8dd;
    border-radius: 10px;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-field textarea::placeholder {
    color: #9ca3af;
}

.auth-field textarea:focus {
    outline: none;
    border-color: var(--brand-accent, #638007);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, #638007) 16%, transparent);
}

/* Le captcha : l'image seule, posée sur le fond de page, ressemblait à un artefact. */
.auth-captcha__image {
    display: block;
    margin-bottom: 8px;
    border: 1px solid #d5d8dd;
    border-radius: 10px;
    cursor: pointer;
}

.auth-captcha__hint {
    display: block;
    margin: -4px 0 8px;
    font-size: 12.5px;
    color: #6b7280;
}

/* Erreur de validation renvoyée par le serveur (code incorrect), au-dessus de son champ. */
.auth-alert {
    margin-bottom: 16px;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 10px;
    background: #fdeceb;
    border: 1px solid #f5c6c2;
    color: #8a2019;
}


/* ===========================================================================
   Page Contact -- coordonnées et trombinoscope (Pages/contact.php,
   element/pages/contact/team.php). Mêmes surfaces que .auth-card, pour que les
   trois sections de la page se répondent. Ce CSS vivait dans un <style> en tête
   de chaque template.
   =========================================================================== */

.contact-details {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-details li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    font-size: 15px;
}

.contact-details li + li {
    border-top: 1px solid rgba(16, 24, 40, .07);
}

.contact-details a {
    color: var(--brand-accent, #638007);
}

.contact-details a:hover {
    color: var(--brand-primary, #415500);
}

/* Pastille teintée, comme .auth-card__icon -- c'était un disque vert plein. */
.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-accent, #638007) 10%, transparent);
    color: var(--brand-accent, #638007);
    font-size: 16px;
}

.team-card {
    height: 100%;
    padding: 22px 14px 18px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .07);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* display:block / flex + margin auto : les deux étaient en inline(-flex), sur lequel
   `margin: 0 auto` ne centre rien -- l'avatar se posait à gauche du nom au lieu de
   le surmonter, sur chaque fiche. */
.team-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background-color: var(--brand-accent, #638007);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.team-photo {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    object-fit: cover;
}

.team-card .team-name {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.team-card .team-title,
.team-card .team-email,
.team-card .team-phone {
    display: block;
    font-size: .85rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.team-card .team-title {
    margin-bottom: 6px;
    color: #6b7280;
}

.team-card .team-email {
    color: var(--brand-accent, #638007);
}

.team-card .team-phone {
    color: #374151;
}

/* Add to cart button of the shop grid and product window: a cart icon with a small "+" on its
   top-right corner (LineIcons has no cart-plus glyph), "Add to cart" being the tooltip. */
.cart-plus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    cursor: pointer;
}
.cart-plus-icon {
    position: relative;
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
}
.cart-plus-icon .lni-plus {
    position: absolute;
    top: -0.3em;
    right: -0.5em;
    font-size: 0.5em;
    font-weight: 700;
}

/* Product window: the quantity controls (-, qty, +) as squares, and the cart button at the same
   height next to them. Sizes are forced here (border included) because the theme
   (assets/nfdc/css/style.css .product-quantity: 45x45 buttons, 60x45 input) and
   .category-main-btn (6px top margin, 27px high) do not line up on their own. */
#productModalVue .product-quantity button,
#productModalVue .product-quantity input {
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    padding: 0;
    text-align: center;
}
#productModalVue .cart-plus-btn {
    box-sizing: border-box;
    height: 42px;
    min-width: 56px;
    margin-top: 0;
    padding: 0 0.85rem;
    line-height: 1;
    border-radius: 6px;
}

/* Square product cards in the shop grid. The brand stylesheets give .product-card a fixed 425px
   height and a square image as wide as the card (270x270), so the card came out much taller
   than wide. Here the card is as tall as it is wide (aspect-ratio, never shorter than its
   content), and the image shrinks to fit (whole picture, no cropping): at the 270px card width,
   12px top margin + 128px image + 130px reserved for the name / brand / price / cart button
   (the absolutely-positioned .product-content) = 270px. */
.product-grid .product-card {
    height: auto;
    aspect-ratio: 1 / 1;
}
.product-grid .product-card .product-image {
    padding-bottom: 130px;
}
.product-grid .product-card .product-image img {
    height: 128px;
    aspect-ratio: auto;
    object-fit: contain;
    padding-top: 12px;
    box-sizing: content-box;
}

/* Square cards: the corner stickers (New, Frozen...) are anchored to the card itself, not to
   .product-image -- that box now shrinks to the narrower image, which left them floating in the
   middle of the card. */
.product-grid .product-card .product-image {
    position: static;
}

/* Out of stock: an icon in the card's bottom-left corner instead of the old banner -- a box
   (lni-package) with a small red "no" sign (lni-ban) on it, "Out of stock" being the tooltip.
   LineIcons has no out-of-stock glyph, so the two are layered like the cart-plus button. */
.out-of-stock-icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #d9d9d9; /* light grey, so the black box and red sign keep their contrast */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: #000; /* black box, stands out inside the red sign */
    font-size: 1.15rem;
    line-height: 1;
}
/* The red "no" sign (circle with a slash) drawn around the box, centred over it; the box shrinks
   to sit inside the circle. */
.out-of-stock-icon .lni-package {
    font-size: 0.75em;
}
.out-of-stock-icon .lni-ban {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 700;
    color: #d32f2f;
    line-height: 1;
}

/* Frozen: a white snowflake (Material Design Icons, loaded by every shop layout) on a blue round in
   the card's top-right corner, "Frozen" being the tooltip -- the counterpart of the out-of-stock
   icon on the left, replacing the old ICON_FrozenBlank.png banner. */
.frozen-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1e88e5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
}

/* New: a lightbulb on an amber round in the card's top-left corner, "New" being the tooltip --
   replaces the old "New" sticker image. */
.new-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffb300;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
}

/* Card Add to cart / Notify me: a centred pill, half the card wide, instead of the full-width bar. */
.product-grid .product-card .cart-plus-btn {
    box-sizing: border-box;
    width: 50%;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 17px;
    line-height: 1;
    display: flex;
    margin: 6px auto 0;
}
.product-grid .product-card .cart-plus-btn .cart-plus-icon {
    font-size: 0.95rem;
}

/* A covered price is always struck through -- same colour and size as any other price. */
.price-covered {
    text-decoration: line-through;
}

/* Checkout addresses: each row is a button (no radio); the one shipped to is highlighted in blue. */
.account-address-choice {
    width: 100%;
    background: #fff;
    text-align: left;
}
/* The address text is the pick button (fills the row); the trash button sits at its right end. */
.account-address-pick {
    flex: 1;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}
.account-address-edit {
    padding: 4px 6px;
    color: #1e88e5;
    font-size: 1.15rem;
    line-height: 1;
}
.account-address-delete {
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #d32f2f;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.account-address-choice.is-selected {
    border-color: #1e88e5;
    background: #e3f2fd;
    box-shadow: 0 0 0 1px #1e88e5;
}

/* Checkout: the add-address button (icon only) sits under the address list. */
.checkout-address-add {
    margin-top: 16px;
}
.checkout-address-add .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
}

/* Address form: the save button is an icon only ("Save" in the tooltip), square like the add button. */
.account-save-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 56px;
    height: 42px;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
}

/* Address form: Back then Save, side by side under the fields. */
.account-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.account-form-actions .account-save-btn {
    margin-top: 0;
}

/* Address form: each label on the left, its field on the right (stacks again on a phone). */
.address-form-horizontal .single-form {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}
.address-form-horizontal .single-form label {
    flex: 0 0 140px;
    margin: 0;
}
.address-form-horizontal .single-form input,
.address-form-horizontal .single-form select {
    flex: 1;
    min-width: 0;
}
/* The province drop-down only needs to fit the longest name, not the whole line. The theme swaps
   the <select> for a .nice-select div (width: 100%), which overflowed the card -- size that too. */
.address-form-horizontal .single-form select,
.address-form-horizontal .single-form .nice-select {
    flex: 0 1 260px;
    width: auto;
    min-width: 0;
}
/* The Back / Save buttons line up with the fields, not the labels (label 140px + 16px gap). */
.address-form-horizontal ~ .address-suggestion,
.address-form-horizontal ~ .account-form-actions {
    margin-left: 156px;
}
.address-suggestion {
    margin-top: 14px;
}
@media (max-width: 575px) {
    .address-form-horizontal .single-form {
        display: block;
    }
    .address-form-horizontal ~ .address-suggestion,
    .address-form-horizontal ~ .account-form-actions {
        margin-left: 0;
    }
}

/* Card form fields: label on the left, field(s) on the right; stacked again on a phone. */
.card-payment-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}
.card-payment-row > label {
    flex: 0 0 140px;
    margin: 0;
}
.card-payment-row > #cardNumber {
    flex: 1;
    min-width: 0;
}
/* Pay button, error and "secure" note line up with the fields, not the labels (140px + 16px gap). */
.card-payment-fields ~ #cardPaymentError,
.card-payment-fields ~ .card-payment-actions,
.card-payment-fields ~ .card-payment-note {
    margin-left: 156px;
}
@media (max-width: 575px) {
    .card-payment-row {
        display: block;
    }
    .card-payment-fields ~ #cardPaymentError,
    .card-payment-fields ~ .card-payment-actions,
    .card-payment-fields ~ .card-payment-note {
        margin-left: 0;
    }
}


/* List header rows (users, orders, products...): Bootstrap's .table-light / .thead-light and the
   template's .table-hover thead are near-white, so on the light theme the column titles barely
   stood out from the rows. A darker grey, bolder titles and a stronger bottom rule; the filter row
   (tr.table-light inside thead) stays a lighter grey under it. Dark theme: see dark-theme.css. */
html:not([data-theme="dark"]) .table:not(.table-dark) > thead:not(.thead-dark) > tr:not(.table-light) > th {
    background-color: #dfe3e8;
    color: #212529;
    font-weight: 600;
    border-bottom: 2px solid #adb5bd;
}
html:not([data-theme="dark"]) .table:not(.table-dark) > thead > tr.table-light > th,
html:not([data-theme="dark"]) .table:not(.table-dark) > thead > tr.table-light > td {
    background-color: #f1f3f5;
    /* The front layouts' `thead { color: white }` (nfdc/cusm) is inherited by the nice-select divs
       of the filters, whose "All" then vanished white on white. */
    color: #212529;
}

/* Dropdowns of the list filters (users, orders, products...) use Bootstrap 5's .form-select /
   .form-select-sm, which the dashboards' Bootstrap 4 doesn't define: they rendered as bare native
   selects, hard to spot next to the .form-control text fields. Same look as those fields, plus
   an arrow. Where nice-select replaces the <select> by a div.nice-select (it copies the classes),
   that div keeps its own arrow and only gets the border. Dark theme: see dark-theme.css. */
select.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #adb5bd;
    border-radius: .25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
select.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .25);
}
select.form-select:disabled {
    background-color: #e9ecef;
    cursor: default;
}
select.form-select-sm {
    padding: .25rem 2rem .25rem .5rem;
    font-size: .875rem;
    background-position: right .5rem center;
}
.nice-select.form-select {
    border-color: #adb5bd;
}
.nice-select.form-select:after {
    border-color: #495057;
}

/* Users and products lists (elements users/list/index, staff/products/row): a deleted row on a
   pale red. Dark theme: see dark-theme.css. */
.table tbody tr.row-disabled {
    background-color: #fde2e4;
}
.table-hover tbody tr.row-disabled:hover {
    background-color: #f9cdd1;
}

/* List filter bar (element layout/list_filters: products, users, orders): status tabs with their
   count, a search box and a "Filters" menu. Dark theme: see dark-theme.css. */
.list-filter-bar {
    --lf-ink: #1c1f23;
    --lf-muted: #6b7178;
    --lf-line: #d7dadf;
    --lf-surface: #fff;
    --lf-pill: #f1f2f4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--lf-line);
}
.list-tabs {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--lf-line);
    border-radius: .75rem;
    background: var(--lf-surface);
    scrollbar-width: none;
}
.list-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border: 0;
    border-right: 1px solid var(--lf-line);
    background: transparent;
    color: var(--lf-ink);
    font-size: .875rem;
    white-space: nowrap;
    cursor: pointer;
}
.list-tab:last-child {
    border-right: 0;
}
.list-tab:hover {
    background: var(--lf-pill);
}
.list-tab.is-active {
    background: var(--lf-ink);
    color: #fff;
}
.list-tab-count {
    min-width: 1.75rem;
    padding: .05rem .5rem;
    border: 1px solid var(--lf-line);
    border-radius: 999px;
    background: var(--lf-surface);
    color: var(--lf-ink);
    font-size: .8rem;
    text-align: center;
}
.list-tab.is-active .list-tab-count {
    border-color: #fff;
}
.list-search {
    display: flex;
    flex: 1 1 16rem;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .45rem .9rem;
    border: 1px solid var(--lf-line);
    border-radius: .75rem;
    background: var(--lf-surface);
    color: var(--lf-muted);
}
.list-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--lf-ink);
    font-size: .875rem;
}
.list-search:focus-within {
    border-color: var(--lf-ink);
}
.list-filters {
    position: relative;
}
.list-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border: 1px solid var(--lf-line);
    border-radius: .75rem;
    background: var(--lf-surface);
    color: var(--lf-ink);
    font-size: .875rem;
    list-style: none;
    cursor: pointer;
}
.list-filters-toggle::-webkit-details-marker {
    display: none;
}
.list-filters[open] .list-filters-toggle {
    border-color: var(--lf-ink);
}
.list-filters-panel {
    position: absolute;
    right: 0;
    z-index: 20;
    width: min(36rem, calc(100vw - 2rem));
    margin-top: .5rem;
    padding: 1rem;
    border: 1px solid var(--lf-line);
    border-radius: .75rem;
    background: var(--lf-surface);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}
.list-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .75rem;
}
.list-filters-grid label {
    display: block;
    margin-bottom: .25rem;
    color: var(--lf-muted);
    font-size: .8rem;
}
.list-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}
.list-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid #d7dadf;
    font-size: .875rem;
}
.list-bulk-bar select,
.list-bulk-bar .nice-select {
    float: none;
    width: auto;
    min-width: 14rem;
    max-width: 100%;
}
.list-bulk-bar .btn {
    line-height: 1.5;
}
@media (max-width: 575.98px) {
    .list-filters-panel {
        right: auto;
        left: 0;
    }
}

/* nice-select only fades its closed list out (opacity 0), so the list still took up room: one
   with every user (2,500+ options, Orders edit) stretched the page ~75,000px below the footer.
   Closed lists leave the layout; an open one scrolls past 300px. */
.nice-select:not(.open) .list {
    display: none;
}
.nice-select .list {
    max-height: 300px;
    overflow-y: auto;
}

/* Orders - List's "+" (element orders/list/order_for): the patient search opens under the button. */
.order-for {
    position: relative;
}
.order-for-form {
    position: absolute;
    right: 0;
    top: calc(100% + .25rem);
    z-index: 1050;
    width: 22rem;
    max-width: calc(100vw - 2rem);
}
.order-for-results {
    max-height: 300px;
    overflow-y: auto;
    margin-top: .25rem;
}