.shopping-cart-lighter-text {
    color: #abb0be;
}

#nav-shopping_cart-popover-container .container {
    margin: auto;
    width: 80%;
}

#addtocart {
    width: 250px;
}

.shopping-cart {
    background: white;
    width: 320px;
    position: absolute;
    top: 30px;
    right: -10px;
    border-radius: 3px;
    padding: 20px;
    overflow: hidden;
    /* stylelint-disable-next-line declaration-no-important */
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    opacity: 0;
    -webkit-transform-origin: right top 0;
    -webkit-transform: scale(0);
    transform-origin: right top 0;
    transform: scale(0);
}
.shopping-cart.active {
    opacity: 1;
    -webkit-transform-origin: right top 0;
    -webkit-transform: scale(1);
    transform-origin: right top 0;
    transform: scale(1);
}
.shopping-cart .shopping-cart-header {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 15px;
}
.shopping-cart .shopping-cart-header .shopping-cart-total {
    float: right;
}
.shopping-cart .shopping-cart-items {
    padding-top: 20px;
}
.shopping-cart .shopping-cart-items .shopping-cart-item {
    margin-bottom: 10px;
}
.shopping-cart .shopping-cart-items img {
    float: left;
    margin-right: 12px;
    max-width: 70px;
    max-height: 70px;
}
.shopping-cart .shopping-cart-items .item-name {
    display: block;
    font-size: 16px;
}

.shopping-cart .shopping-cart-items .item-detail {
    display: block;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.shopping-cart-items .item-price {
    color: #333;
    margin-right: 8px;
}

.shopping-cart-price.item-price {
    line-height: 1;
}

.shopping-cart-price.item-price b {
    margin-right: 2px;
}

#nav-shopping_cart-popover-container .item-time {
    color: #abb0be;
}

#nav-shopping_cart-popover-container .button:hover {
    background: #f87f1b;
}

#nav-shopping_cart-popover-container .button i {
    padding-left: 5px;
}

#nav-shopping_cart-popover-container .shopping-cart-item {
    padding: 5px 10px;
    border-bottom: 1px #333 dashed;
    list-style-type: none;
    max-width: 90%;
    margin: auto;
}

#nav-shopping_cart-popover-container .shopping-cart-item:last-child {
    border: none;
}

#nav-shopping_cart-popover-container .shopping-cart-items {
    /* stylelint-disable-next-line declaration-no-important */
    padding: 5px !important;
}
#nav-shopping_cart-popover-container .popover-region-header-container {
    height: 45px;
}
.popover-region-header-container .fa-shopping-cart .fa-futbol-o {
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--success) !important;
}
#nav-shopping_cart-popover-container .popover-region-content-container
#nav-shopping_cart-popover-container .popover-region-container {
    height: unset;
    padding-bottom: 10px;
}
#nav-shopping_cart-popover-container .see-all-link {
    display: none;
}

.checkout .shopping-cart-items .shopping-cart-item {
    padding-bottom: 5px;
    list-style-type: none;
    max-width: 90%;
    margin: auto;
}
.checkout .shopping-cart-items #litotalprice {
    border-top: 1px #333 dashed;
}

.checkout .shopping-cart-items {
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 5px;
}

@media print {
    body#page-local-shopping_cart-checkout {
        max-height: 800px;
    }
    #page-local-shopping_cart-checkout:before {
        position: absolute;
        content: "";
        z-index: 30;
        background: white;
        width: 100vw;
        top: 0;
        right: 0;
        height: 800px;
    }
    #page-local-shopping_cart-checkout .col-md-8,
    #page-header,
    #page-local-shopping_cart-checkout #page-footer {
        display: none;
    }
    #page-local-shopping_cart-checkout #shopping_cart-cashiers-cart {
        position: absolute;
        z-index: 200;
        left: 0;
        top: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    #page-local-shopping_cart-checkout .col-md-4 {
        max-width: 500px;
        flex: 0 0 100%;
    }
}

#shopping_cart-cashiers-section .shopping-cart-items .shopping-cart-item {
    margin: 1rem;
}

#cashiertabs .nav-link {
    outline: 0;
    box-shadow: none;
}
#cashiertabs .active {
    color: #000;
}

#cashiertabs li {
    list-style-type: none;
    font-size: 12px;
    width: 25%;
    float: left;
    position: relative;
}

#cashiertabs li :before {
    position: relative;
    z-index: 3;
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 18px;
    color: #fff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
    text-align: center;
}

#cashiertabs li :after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 34px;
    z-index: 2;
}

#cashiertabs {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
}

#cashiertabs #user-tab:before {
    font: var(--fa-font-solid);
    content: "\f007";
    font-size: x-large;
    padding-top: 15px;
}

#cashiertabs #cart-tab:before {
    font: var(--fa-font-solid);
    content: "\f07a";
    font-size: x-large;
    padding-top: 15px;
}

#cashiertabs #checkout-tab:before {
    font: var(--fa-font-solid);
    content: "\f09d";
    font-size: x-large;
    padding-top: 15px;
}

#cashiertabs #success-tab:before {
    font: var(--fa-font-solid);
    content: "\f00c";
    font-size: x-large;
    padding-top: 15px;
}

#cashiertabs li .active:before,
#cashiertabs li .active:after,
#cashiertabs li .success:before,
#cashiertabs li .success:after {
    background: var(--success, var(--bs-success));
}

.shopping-cart-items {
    list-style: none;
    padding-left: 0;
}

.shopping-cart-autocomplete {
    width: max-content;
}

#cashiertabs .disabled {
    font-style: normal;
}

#page-local-shopping_cart-checkout #region-main-box {
    border: none;
}

/* The booking fee coins icon should be smaller. */
#page-local-shopping_cart-checkout .shopping-cart-checkout-items-container .shopping-cart-items
.shopping-cart-item[data-area=bookingfee] .sc-cart-item-image {
    width: 25px;
}

/* The booking fee coins icon should be smaller. */
#page-local-shopping_cart-checkout .shopping-cart-checkout-items-container .shopping-cart-items
.shopping-cart-item[data-area=rebookingcredit] .sc-cart-item-image {
    width: 25px;
}

#page-local-shopping_cart-checkout .sc_couponmessage,
#page-local-shopping_cart-checkout .sc_coupondiscount {
    margin-top: 1rem;
}

/* The images in the checkout page should be larger than in the navbar popup.
We exclude the booking fee image from the selector. */
#page-local-shopping_cart-checkout .shopping-cart-checkout-items-container .shopping-cart-items
.shopping-cart-item:not(.shopping-cart-item[data-area=bookingfee])
.shopping-cart-item:not(.shopping-cart-item[data-area=rebookingcredit])
.sc-cart-item-image {
    width: 100px;
}

#page-local-shopping_cart-checkout .shopping-cart-checkout-items-container .shopping-cart-items .shopping-cart-item {
    padding: 20px;
    margin: 20px;
    border: 1px dashed black;
}

/* The price in the list of items should not be displayed on the checkout page. */
#page-local-shopping_cart-checkout .shopping-cart-checkout-items-container .sc_initialtotal {
    display: none;
}

/* Even when a user is cashier, he should not see cashier elements on checkout page */
#page-local-shopping_cart-checkout li.shopping_cart_history_paidback {
    display: none;
}

#page-local-shopping_cart-checkout .wunderbyteTableJavascript ul {
    padding: 0;
    border-top: 1px solid var(--primary);
}
#page-local-shopping_cart-checkout #shoppingcartfilterinput {
    margin-top: 20px;
    width: 200px;
    padding: 12px 20px;
    box-sizing: border-box;
}

#page-local-shopping_cart-checkout #region-main-box #litotalprice {
    font-size: 20px;
    color: var(--warning);
}

#page-local-shopping_cart-checkout #region-main-box #success #litotalprice {
    color: var(--success);
}

#page-local-shopping_cart-checkout .selectedaddresses {
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 10px;
    padding: 10px;
}

#page-local-shopping_cart-checkout .selectedaddresses .selectedaddress:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#page-local-shopping_cart-checkout .selectedaddresses .selectedaddress .addresslabel {
    font-weight: bold;
}

#shopping_cart-cashiers-cart div.shopping-cart-cashier-items-container img.sc-cart-item-image {
    width: 20px;
}

div.cashier-list-price-container div.shopping-cart-cashier-items-container img.sc-cart-item-image {
    width: 100px;
}

div.shopping-cart-cashier-items-container ul.shopping-cart-items img.sc-cart-item-image {
    width: 100px;
}

#shopping_cart-cashiers-cart div.shopping-cart-cashier-items-container div.item-description {
    display: none;
}

#page-local-shopping_cart-cashier div.shopping-cart-cashier-items-container .sc_initialtotal {
    display: none;
}

div.shopping-cart-items-container img.sc-cart-item-image {
    width: 20px;
}

div.shopping-cart-items-container div.item-description {
    display: none;
}

.shopping-cart-items div.item-content {
    display: inline-grid;
}

.shopping-cart-items .item-button {
    cursor: pointer;
    color: #abb0be;
}

.shopping-cart-items .item-button:hover {
    color: rgb(29, 33, 37);
}

.shopping-cart-items .delete-button {
    border: none;
    background: transparent;
    color: #abb0be;
}

.shopping-cart-items .delete-button:hover {
    color: rgb(29, 33, 37);
}

.shopping-cart-item[data-area="rebookingcredit"] img,
.shopping-cart-item[data-area="rebookitem"] img,
.shopping-cart-item[data-area="bookingfee"] img,
.shopping-cart-item[data-area^="installments"] img {
    width: 20px;
}

#page-local-shopping_cart-cashier #shopping_cart-cashiers-section #checkout .shopping-cart-items .shopping-cart-item {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px dashed #ccc;
}

#page-local-shopping_cart-checkout .shopping-cart-items .shopping-cart-item[data-area="option"] img,
#page-local-shopping_cart-checkout .shopping-cart-items .shopping-cart-item[data-area="main"] img {
    max-width: 200px;
}

#page-local-shopping_cart-installments #region-main-box .sc-cart-item-image {
    width: 25px;
}

#page-local-shopping_cart-installments #region-main-box .shopping_cart-paymentbutton {
    width: 250px;
}

#page-local-shopping_cart-installments #region-main-box .shopping-cart-item {
    width: 500px;
    margin-top: 25px;
    border-radius: 10px;
    margin-bottom: 5px;
    border: 1px dotted black;
    padding: 10px;
}

#page-local-shopping_cart-demo .testitem-container {
    width: 500px;
}

.local-shopping_cart-addressselection .local-shopping_cart-requiredaddress {
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 5px;
    border-radius: 10px;
}

.local-shopping_cart-addressselection .local-shopping_cart-savedaddress {
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 5px;
}

#page-local-shopping_cart-address .modal-form-dialogue .form-inline .form-control {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
}

#page-local-shopping_cart-cashier .shopping-cart-cashier-items-container img.sc-cart-item-image {
    width: 100px;
}

/* Container Styling */
.shopping-cart-checkout-manager-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
}

/* Form Group Styling */
.shopping-cart-checkout-manager-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Labels */
.shopping-cart-checkout-manager-form-label {
    font-size: 14px;
    color: #333;
}

/* Input Fields */
.shopping-cart-checkout-manager-form-input,
.shopping-cart-checkout-manager-form-select {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Button */
.shopping-cart-checkout-manager-btn {
    padding: 10px 15px;
    font-size: 14px;
    color: white;
    background-color: #0d6efd;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.shopping-cart-checkout-manager-btn-primary:hover {
    background-color: #0b5ed7;
}

.shopping-cart-checkout-manager-alert {
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 5px;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.shopping-cart-checkout-manager-alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.shopping-cart-checkout-manager-alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.shopping-cart-checkout-manager-alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.shopping-cart-checkout-manager-alert i {
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

.shopping-cart-checkout-manager-buttons {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.shopping-cart-checkout-manager-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: 20px 0;
}

.shopping-cart-checkout-manager-status-bar-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #ccc;
    z-index: 1;
}

.shopping-cart-checkout-manager-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.shopping-cart-checkout-manager-status-item .circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    border: 2px solid #ccc;
    background-color: gray;
}

.shopping-cart-checkout-manager-status-item.active .circle {
    background-color: green;
    border-color: green;
}

.shopping-cart-checkout-manager-status-item.inactive .circle {
    background-color: gray;
    border-color: gray;
}

.shopping-cart-checkout-manager-valid-checkmark {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background-color: #77ab83;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 12px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.shopping-cart-checkout-manager-valid-checkmark .icon {
    line-height: 1;
    vertical-align: middle;
    padding-left: 7px;
}

/* stylelint-disable declaration-no-important */
.shopping-cart-checkout-manager-valid-checkmark-mandatory {
    background-color: red !important;
}
/* stylelint-enable declaration-no-important */

.shopping-cart-checkout-manager-form-container {
    max-width: 400px;
    width: 100%;
}
/* ---------------------------------------------------------------------------
   Accessibility of the shopping cart (WCAG 2.1 AA).
   --------------------------------------------------------------------------- */

/* Text that only exists for screen readers. Defined here instead of relying on the theme, because
   "sr-only" (Bootstrap 4) and "visually-hidden" (Bootstrap 5) are not both available in every
   Moodle/theme combination this plugin runs in. */
.sc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The icon controls inside a cart item are buttons now (they used to be <i> elements, which cannot
   be reached or operated with a keyboard). They must not look like one, so the browser chrome is
   removed - and the icon has to keep the size and colour of the surrounding text. */
.shopping-cart-items .sc-icon-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

/* The delete icon is the only carrier of its meaning, so it needs 3:1 against the white cart
   background (WCAG 1.4.11). The previous #abb0be reached 2.1:1. */
.shopping-cart-items .delete-button,
.shopping-cart-items .item-button {
    color: #6c757d;
}

/* Keyboard focus has to be visible on the icon buttons as well (WCAG 2.4.7). */
.shopping-cart-items .delete-button:focus-visible,
.shopping-cart-items .sc-icon-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* An inactive checkout button must not look like an available one. */
#shopping-cart-checkout-button[aria-disabled="true"] {
    cursor: default;
}

/* Route to the checkout, rendered right after the add-to-cart control and revealed by cart.js
   once the item is in the cart (see toggleCheckoutLink). Shares the Bootstrap button shape with
   the add-to-cart control (btn + btn-sm), but green instead of the theme colour, so that "add" and
   "pay" are told apart by more than position.

   The greens are fixed values, not "btn-success": Bootstrap 4's $success (#28a745) only reaches
   3.13:1 against white and fails WCAG 1.4.3. These are the darken() steps of the same palette
   colour, so the button still fits the site:
     base   #1e7e34  5.14:1   (also 5.14:1 against a white page, SC 1.4.11 for the button area)
     hover  #19692c  6.78:1
     active #155d27  7.99:1
   A theme variable is deliberately not used - whatever a theme's Bootstrap build produced can land
   far below the required 4.5:1.

   Deliberately no Bootstrap display utility ("d-inline-block" and friends): those set display with
   !important, and because the utilities are imported after reboot they beat
   "[hidden] { display: none !important }" at equal specificity - the link would then be visible
   even while it carries the hidden attribute. ".btn" sets display without !important, so [hidden]
   still wins, which is what keeps the link out of the tab order until there is something to pay
   for. Same reason for the margin here instead of an "mt-*" utility.

   Note it does not carry "wb_shopping_cart": that class is what theme_musi paints blue and pads
   with "10px !important", which would both undo the colour and cancel out btn-sm. */
.shopping-cart-checkout-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #fff;
    background-color: #1e7e34;
    border-color: #1e7e34;
}

.shopping-cart-checkout-link:hover,
.shopping-cart-checkout-link:focus {
    color: #fff;
    background-color: #19692c;
    border-color: #19692c;
}

.shopping-cart-checkout-link:active {
    color: #fff;
    background-color: #155d27;
    border-color: #155d27;
}

/* The focus ring has to stay visible on the green (SC 2.4.11/2.4.13): Bootstrap's default ring is
   tinted with the button colour and would disappear against it. */
.shopping-cart-checkout-link:focus-visible {
    outline: 2px solid #155d27;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

#page-local-shopping_cart-checkout .sc-checkout-modern .sc-main-card,
#page-local-shopping_cart-checkout .sc-checkout-modern .sc-summary-card,
#page-local-shopping_cart-checkout .sc-checkout-modern .sc-address-card,
#page-local-shopping_cart-checkout .sc-checkout-modern .sc-guest-card {
    border-radius: 14px;
}

#page-local-shopping_cart-checkout .sc-checkout-modern .sc-checkout-tabs {
    border-bottom: 0;
    gap: 8px;
}

#page-local-shopping_cart-checkout .sc-checkout-modern .sc-checkout-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    background: #f2f5f9;
    color: #38506a;
    padding: 8px 14px;
}

#page-local-shopping_cart-checkout .sc-checkout-modern .sc-checkout-tabs .nav-link.active {
    background: #0f6cbf;
    color: #fff;
}

#page-local-shopping_cart-checkout .sc-checkout-modern .sc-summary-card {
    position: sticky;
    top: 1rem;
}

#page-local-shopping_cart-checkout .sc-address-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#page-local-shopping_cart-checkout .sc-address-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

#page-local-shopping_cart-checkout .sc-address-item input[type="radio"] {
    margin-top: 4px;
}

#page-local-shopping_cart-checkout [id^="shopping-cart-inline-address-form-"] .form-control,
#page-local-shopping_cart-checkout [id^="shopping-cart-inline-address-form-"] .custom-select {
    width: 100%;
}

#page-local-shopping_cart-checkout [id^="shopping-cart-inline-address-form-"] .mform fieldset {
    margin: 0;
}

@media (max-width: 991px) {
    #page-local-shopping_cart-checkout .sc-checkout-modern .sc-summary-card {
        position: static;
    }
}

/* Embed badge (embed_views::render_badge): compact cart pill for a small iframe. */
.sc-embed-badge {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .4em .8em;
    border-radius: 999px;
    background: #263683;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.sc-embed-badge:hover {
    color: #fff;
    filter: brightness(1.08);
}
.sc-embed-badge.sc-embed-badge-empty {
    opacity: .7;
}
.sc-embed-badge-empty .sc-embed-badge-count,
.sc-embed-badge-empty .sc-embed-badge-total {
    display: none;
}
.sc-embed-badge-icon {
    position: relative;
    display: inline-flex;
}
.sc-embed-badge-count {
    position: absolute;
    top: -.6em;
    right: -.7em;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 .3em;
    border-radius: 999px;
    background: #ec8600;
    color: #fff;
    font-size: .7em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sc-embed-badge-total {
    font-size: .9em;
}