@keyframes spin { to { transform: rotate(360deg); } }

.momo-pending-spinner {
    width: 44px;
    height: 44px;
    margin: 24px auto 0;
    border: 4px solid rgba(var(--brand-primary-rgb), 0.18);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .momo-pending-spinner {
        animation-duration: 1.6s;
    }
}

.payment-method-pills .payment-method-disabled {
    opacity: 0.38;
    filter: grayscale(1);
    cursor: not-allowed;
}
.payment-method-pills .payment-method-disabled > a {
    color: #777 !important;
    cursor: not-allowed;
    pointer-events: none;
}
.payment-method-pills .payment-method-disabled .payment-pill-icon {
    opacity: 0.65;
}
.payment-method-disabled-pane {
    pointer-events: none;
}

.phone-input-group {
    display: flex;
}
.phone-input-group .phone-prefix {
    height: 34px;
    padding: 6px 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 1px;
}
.phone-input-group .form-control {
    border-radius: 0 4px 4px 0;
    flex: 1;
}

/* *************************************************** */
/* Shared Styles */
/* *************************************************** */

.cart,
.checkout {
    padding-top: 1em;
    padding-bottom: 7em;
}

.order-confirmation {
    padding-top: 2em;
    padding-bottom: 7em;
}

.cart .card,
.checkout .card,
.order-confirmation .card
.checkout-page .card {
    margin-bottom: 15px;
    overflow: hidden;
}

.cart h1,
.checkout h1,
.cart-warning h1 {
    font-size: 2.6em;
    margin-bottom: 0.5em;
}

.checkout-stage-title,
.card-summary-title,
.cart-summary-title,
.cart-item-summary-title,
.accordion-checkout-card .panel-title {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    width: 100%;
}
.checkout-stage-title h4,
.card-summary-title h4,
.cart-summary-title h4,
.cart-item-summary-title h4,
.accordion-checkout-card .panel-title {
    margin: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    display: inline-block;
    font-weight: 500;
}

.checkout-stage-title a.btn,
.cart-item-summary-title a.btn {
    padding: 8px 15px;
    margin: 7px 0;
}

.cart-title-row h3,
.checkout-stage-title h3 {
    margin-bottom: 0;
}

/* *************************************************** */
/* Cart Styles */
/* *************************************************** */

.cart-title-row {
    border-bottom: 2px solid rgb(85, 85, 85);
    font-weight: bold;
}

.cart-products-wrapper > div:first-of-type {
    border: none;
}

.cart-product-row {
    padding: 1em 0;
    margin: 0;
}
.cart-product-row:not(:first-child) {
    border-top: 1px solid #ccc;
}
.cart-product-row .img-container img {
    width: 11em;
    height: 11em;
    object-fit: cover;
}
.cart-product-row .cart-product-name {
    font-weight: 500;
}
.cart-product-row ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cart-product-row .cart-product-pricing {
    white-space: nowrap;
}
.cart-product-row .cart-product-pricing > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5em;
    flex-wrap: nowrap;
}
.cart-product-row .cart-product-pricing span {
    font-weight: bold;
}
.cart-product-row .cart-product-pricing form {
    display: inline-flex;
    align-items: center;
}

/* Quantity stepper */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}
.qty-btn {
    background: #f5f5f5;
    border: none;
    width: 2em;
    height: 2em;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: #333;
    transition: background 150ms;
    padding: 0;
}
.qty-btn:hover {
    background: var(--brand-primary);
    color: #fff;
}
/* Bounds handling: dim + lock the button once the quantity hits min/max,
   so it reads like the native spinner that simply stops at its limits. */
.qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.qty-btn:disabled:hover {
    background: #f5f5f5;
    color: #333;
}
.qty-input {
    width: 2.5em;
    height: 2em;
    border: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    -moz-appearance: textfield;
    padding: 0;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cart-product-row li.child-item {
    padding-left: 1em;
}
.cart-product-row .product-promotion-row {
    float: right;
    padding: 0 1em;
}
.cart-product-actions .btn-simple:hover {
    color: #FFFFFF;
    background-color: rgb(var(--brand-primary-rgb));
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(var(--brand-primary-rgb), 0.4);
}

@media(min-width: 768px) {
    .cart-product-row .cart-product-pricing {
        text-align: right;
    }
    .cart-product-row .cart-product-pricing > div {
        align-items: flex-end;
    }
}
@media(max-width: 768px) {
    .cart-product-row .cart-product-name {
        margin-top: 5px;
    }
    .cart-product-row .remove-from-cart-action {
        margin: 5px 0;
    }
    .cart-product-row .cart-product-pricing > div {
        justify-content: center;
    }
}

.cart-empty {
    padding: 1em 0;
}

.cart-summary-row .row {
    margin: 0;
}
.cart-summary-row .cart-summary-breakdown {
    padding: 10px 20px;
}
.cart-summary-row .cart-total,
.cart-summary-row .cart-estimated-total {
    font-weight: bold;
    border-top: 1px solid rgb(150, 150, 150);
    margin-top: 1em;
    padding-top: 1em;
}
.cart-summary-row .cart-estimated-total p {
    font-weight: normal;
    font-size: smaller;
    line-height: normal;
    text-transform: none;
    color: rgb(150, 150, 150);
}
.cart-summary-row .cart-actions {
    text-align: center;
    font-weight: bold;
    padding-top: 1em;
    border-top: 1px solid rgb(150, 150, 150);
    margin-top: 2em;
}
.cart-summary-row .cart-actions a {
    width: 100%;
}
.cart-summary-row .cart-actions .cart-action-divider {
    padding: 0 0 0.7em;
    font-size: smaller;
}

.read-only-paypal-payment-method-container {
    margin: 1em 0;
}

.paypal-payment-method-container .config-warning {
    margin: 10px 0;
}

.paypal-payment-method-container img {
    width: unset;
}

.cart-item-summary {
    padding: 0;
    font-size: small;
    line-height: 16px;
    max-height: 20em;
    overflow: scroll;
}
.cart-item-summary li {
    padding: 1em 1em 0;
    vertical-align: top;
    display: flex;
}

.cart-promo-error {
    font-size: small;
    padding-bottom: 0.75em;
}

.cart-warning {
    text-align: center;
}
.cart-warning a {
    display: inline-block;
}

/* *************************************************** */
/* Checkout Styles */
/* *************************************************** */

.checkout-stage {
    padding: 0 2em;
}
.checkout-stage .btn-white {
    background: white;
    color: black;
    border: 1px solid #ccc;
}
.checkout-stage .form-group {
    margin: 1em 0 0 0;
}
.checkout-stage h4 {
    border-bottom: 1px solid #ccc;
}
.checkout-stage .choose-shipping-address,
.checkout-stage .choose-billing-address {
    margin-bottom: 1em;
}
.checkout-stage .payment-options > div {
    margin-top: 2em;
}
.checkout-stage .shipping-methods-wrapper label,
.checkout-stage .checkbox label {
    color: rgba(0,0,0, 0.87);
    font-weight: 200;
}
.checkout-stage .checkout-stage-action a {
    margin-right: -18px;
}
.checkout-stage .form-group .text-danger {
    margin-top: -5px;
    font-size: 11px;
    position: absolute;
    line-height: 12px;
}
.checkout-stage .checkout-review-stage-prompt {
    margin-top: 0.7em;
}

.checkout-stage .read-only-shipping-address,
.checkout-stage .read-only-shipping-method {
    margin-bottom: 20px;
}

.checkout-page {
    background-color: #f2f2f2;
}

.checkout-guest-wrapper {
    padding: 20px;
}

.checkout-guest-text {
    margin-top: 50px;
}

.accordion-checkout-card .panel-heading {
    padding: 0;
    border: none;
}
.accordion-checkout-card .panel-body {
    padding: 0 1em 1em 1em;
}
.accordion-checkout-card .panel-body .form-group {
    margin-top: 10px;
}
.accordion-checkout-card .panel-body .input-group {
    width: 100%;
}
.accordion-checkout-card .panel-body .input-group-button {
    display: table-cell;
    padding-left: 1.5em;
}
.accordion-checkout-card .cart-applied-promo-codes .promo-code {
    font-weight: normal;
    font-size: 12px;
    margin-right: 5px;
    padding: 5px 6px 5px 12px;
}
.accordion-checkout-card .cart-applied-promo-codes i {
    font-size: 20px;
    margin-top: -0.15em;
    color: #FFFFFF;
}

.checkout-stage-title h4 i {
    vertical-align: text-bottom;
}

.shipping-address-btn,
.billing-address-btn {
    padding: 0 1em;
}

.payment-alert {
    margin: 1em 0 0 0;
}

.payment-processing-error .payment-alert {
    margin: 0;
}

.payment-methods,
.payment-method-selectors {
    margin: 1em 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

/* Payment method chooser — "click-and-check" selectable tiles.
   Markup stays Bootstrap nav-pills (li.active drives the tab-pane and the JS in
   checkoutOperations that reads the chosen method), but the pills are restyled
   from nav tabs into adjacent bordered option buttons with an explicit checked
   badge so the choice reads as a set of selectable buttons. Ancestor-qualified
   selectors give the needed specificity over material-kit's .nav-pills rules. */
.payment-method-selectors .payment-method-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.payment-method-selectors .payment-method-pills > li {
    float: none;
    margin: 0;
    flex: 0 1 140px;
}
.payment-method-selectors .payment-method-pills > li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 86px;
    padding: 12px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    color: #555;
    text-transform: none;
    transition: border-color .2s, box-shadow .2s;
}
.payment-method-selectors .payment-method-pills > li > a:hover {
    border-color: #999;
    background: #fff;
    box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.3);
}
.payment-method-selectors .payment-method-pills > li > a span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}
/* Selected tile: accent border + check badge instead of the solid-red pill. */
.payment-method-selectors .payment-method-pills > li.active > a,
.payment-method-selectors .payment-method-pills > li.active > a:hover,
.payment-method-selectors .payment-method-pills > li.active > a:focus {
    border: 2px solid var(--brand-primary);
    background: #fff;
    color: #222;
    box-shadow: 0 4px 14px -6px rgba(var(--brand-primary-rgb), 0.55);
}
.payment-method-selectors .payment-method-pills > li.active > a::after {
    content: '\2713';
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: var(--brand-primary);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.payment-pill-icon {
    max-height: 28px;
    max-width: 100%;
    object-fit: contain;
}

.payment-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.payment-summary-icon-wrap {
    flex-shrink: 0;
}

.payment-summary-text {
    flex: 1;
}

.payment-summary-icon {
    height: 32px;
    width: auto !important;
    display: block;
}

/* Tiles stay adjacent on small screens (wrap to ~3 per row) instead of stacking
   full-width, so the payment choice keeps reading as a button group. */
@media (max-width: 576px) {
    .payment-method-selectors .payment-method-pills > li {
        flex: 1 1 28%;
    }
}

.choose-saved-payment .card,
.choose-saved-payment-action .card {
    cursor: pointer;
}
.choose-saved-payment .card:hover,
.choose-saved-payment-action .card:hover {
    box-shadow: 0 14px 26px -12px rgba(153,153,153, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153,153,153, 0.2);
}
.choose-saved-payment .card.active {
    border: 2px solid rgb(var(--brand-primary-rgb));
}
.choose-saved-payment .card.active .card-content {
    padding: 13px 18px;
}
.choose-saved-payment .card.active:hover {
    box-shadow: 0 14px 26px -12px rgba(var(--brand-primary-rgb), 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(var(--brand-primary-rgb), 0.2);
}
.choose-saved-payment .card.define-new-credit-card {
    height: 110px;
}
.choose-saved-payment .card.define-new-credit-card .card-content {
    text-align: center;
    padding: 20px;
}
.choose-saved-payment .card.define-new-credit-card .card-content .material-icons {
    font-size: 36px;
}
.choose-saved-payment-action .card {
    margin: 0;
    cursor: pointer;
}
.choose-saved-payment-action .card-content {
    padding: 5px;
}
.choose-saved-payment-action .card-content span {
    padding: 0 1em;
}

.credit-card-types-wrapper {
    margin-bottom: 10px;
}
.credit-card-types {
    margin: 0 auto auto;
    float: left;
    padding: 0;
}
.credit-card-types li {
    display: inline-block;
    float: left;
    padding-right: 5px;
}

.choose-shipping-address ul,
.choose-billing-address ul{
    list-style: none;
    padding: 0;
}
.choose-shipping-address ul li,
.choose-billing-address ul li {
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    /* Resting elevation so the cards (and the "Use a different/saved address"
       items) read as clickable buttons; hover lifts them further. */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.2s ease;
}
.choose-shipping-address ul li:hover,
.choose-billing-address ul li:hover {
    box-shadow: 0 14px 26px -12px rgba(153,153,153, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153,153,153, 0.2);
}
.choose-shipping-address ul li.active,
.choose-billing-address ul li.active {
    margin: -1px -1px 9px;
    border: 2px solid rgb(var(--brand-primary-rgb));
}
.choose-shipping-address ul li.active:hover,
.choose-billing-address ul li.active:hover {
    box-shadow: 0 14px 26px -12px rgba(var(--brand-primary-rgb), 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(var(--brand-primary-rgb), 0.2);
}
.choose-shipping-address ul li .btn,
.choose-billing-address ul li .btn {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
}

.custom-address {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 14px 26px -12px rgba(153,153,153, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153,153,153, 0.2);
    border-radius: 3px;
}

.checkout-stage .read-only-cod-payment-method {
    margin: 15px 0;
}

.read-only-credit-card {
    display: inline-flex;
    align-items: center;
}
.read-only-credit-card .credit-card-number {
    display: inline-block;
}

.read-only-payment-info-stage .read-only-credit-card {
    margin: 1em 0 1em 0;
}

.checkout-stage address.read-only-address {
    margin-bottom: 0;
}

.read-only-credit-card-payment-method .credit-card-exp {
    margin-bottom: 20px;
}

/* *************************************************** */
/* Order Confirmation Styles */
/* *************************************************** */

.confirmation-card {
    padding: 0 2em 1em 2em;
}
.confirmation-card h2,
.confirmation-card h3,
.confirmation-card .confirmation-note,
.confirmation-card .confirmation-track {
    text-align: center;
}
.confirmation-card h2 span,
.confirmation-card h3 span,
.confirmation-card .confirmation-note span {
    display: inline-block;
}
.confirmation-card h3 {
    margin-top: 0;
}
.confirmation-card .confirmation-note {
    font-size: large;
}

.confirmation-order-payment {
    margin-bottom: 20px;
}

/* *************************************************** */


/* *************************************************** */
/* Delivery location map picker                        */
/* *************************************************** */

.delivery-map-section {
    margin-top: 24px;
}

.delivery-map-section h4 {
    margin-bottom: 4px;
}

.delivery-map-hint {
    font-size: 0.85em;
    margin-bottom: 10px;
}

.delivery-map-container {
    width: 100%;
    height: 420px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.delivery-map-coords {
    margin-top: 6px;
    margin-bottom: 0;
}

.delivery-pin-summary {
    margin-top: 6px;
    color: #666;
}

/* Phone country-code prefix + input side by side */