/*
 * ISC License
 *
 * Copyright (c) 2026 idnovate.com
 * idnovate is a Registered Trademark & Property of idnovate.com, innovación y desarrollo SCP
 *
 * Permission to use, copy, modify, and/or distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
 * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
 * AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
 * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 * LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 * OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 * PERFORMANCE OF THIS SOFTWARE.
 *
 * @author    idnovate
 * @copyright 2026 idnovate.com
 * @license   https://www.isc.org/licenses/ https://opensource.org/licenses/ISC ISC License
 */

 /* Bootstrap compatibility */
.hidden-xs-up {
    display: none!important
}

@media (max-width: 575px) {
    .hidden-xs-down {
        display:none!important
    }
}

@media (min-width: 576px) {
    .hidden-sm-up {
        display:none!important
    }
}

@media (max-width: 767px) {
    .hidden-sm-down {
        display:none!important
    }
}

@media (min-width: 768px) {
    .hidden-md-up {
        display:none!important
    }
}

@media (max-width: 991px) {
    .hidden-md-down {
        display:none!important
    }
}

@media (min-width: 992px) {
    .hidden-lg-up {
        display:none!important
    }
}

@media (max-width: 1199px) {
    .hidden-lg-down {
        display:none!important
    }
}

@media (min-width: 1200px) {
    .hidden-xl-up {
        display:none!important
    }
}

.hidden-xl-down {
    display: none!important
}



.loyalty-block img {
    width: auto !important;
    margin-right: .625rem;
    vertical-align: middle;
    display: inline-block;
    background: transparent;
    box-shadow: none;
}

.alert-loyalty span,
#blockcart-modal .modal-body .divide-right span {
    vertical-align: middle;
    display: inline;
}

.alert.alert-loyalty.alert-warning::before {
    content: none;
}

/* Customer account */

/* Hummingbird theme sets --bs-card-border-width:0 globally; restore borders on the loyalty page */
#module-loyaltyeditpoints-points .card {
    --bs-card-border-width: 1px;
}

.loyalty-block-redeem-btn {
    text-align: center;
    margin-bottom: 2rem;
}

/* Points redemption slider */
.lep-slider-value-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.lep-slider-points,
.lep-slider-voucher {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.lep-slider-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: #007bff;
    line-height: 1;
}

.lep-slider-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-top: 0.2rem;
    letter-spacing: 0.05em;
}

.lep-slider-arrow {
    font-size: 1.25rem;
    color: #adb5bd;
}

.lep-slider-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.lep-slider-wrap .custom-range {
    flex: 1;
}

.lep-slider-bound {
    color: #6c757d;
    white-space: nowrap;
    min-width: 1.5rem;
    text-align: center;
}

.lep-slider-submit {
    text-align: center;
    display: flex;
    justify-content: center;
}

.lep-range-slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #007bff 0%, #007bff var(--lep-fill, 0%), #dee2e6 var(--lep-fill, 0%), #dee2e6 100%) !important;
}

.lep-range-slider::-moz-range-track {
    background-color: #dee2e6;
    height: 0.5rem;
    border-radius: 1rem;
}

.lep-range-slider::-moz-range-progress {
    background-color: #007bff;
    height: 0.5rem;
    border-radius: 1rem 0 0 1rem;
}

/* Compact slider (cart / checkout) */
.lep-compact-alert {
    margin-top: 0.75rem;
}

.lep-compact-title {
    margin-bottom: 0.5rem;
}

.lep-compact-form {
    margin-bottom: 0;
}

.lep-compact-summary {
    text-align: center;
    margin: 1rem;
    color: #495057;
}

.lep-compact-summary .lep-display-points {
    font-weight: 700;
    color: #007bff;
}

.lep-compact-summary .lep-display-voucher {
    color: #007bff;
}

.loyalty-block-redeem-btn .btn {
    white-space: normal;
}

/* Product page */
.loyalty-block-product .alert-loyalty {
    margin-top: .625rem;

}

.loyalty-block-product-free .alert-loyalty {
    background-color: #d9edf7;
    border-color: #bcdff1;
    color: #31708f;
    margin-top: .625rem;
    display: inline-block;
}

.loyalty-block-product-free .alert-loyalty img {
    display: none;
}

/* Product list page */
.loyalty-block-productlist {
    clear: both;
}


.owl-carousel .owl-item .loyalty-block-productlist .alert-loyalty img,
.loyalty-block-productlist .alert-loyalty img {
    width: 20px !important;
    display: inline-block !important;
}


.loyalty-block-shopping-cart-detail .alert-loyalty {
    padding: 0;
    margin: 0;
    background: inherit;
    width: 24px;
    text-align: center;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.loyalty-block-shopping-cart-detail img,
.cart-grid .product-image.media-middle .loyalty-block-shopping-cart-detail img {
    width: 20px;
    min-width: auto;
    margin: 0;
}

/* Shopping cart page */
.loyalty-block-checkout .alert-loyalty {
}

.loyalty-block-checkout .loyalty-block-redeem-btn .btn {
    white-space: normal;
}

.loyalty-block-checkout .loyalty-block-redeem-btn .btn:hover {
    color: white !important;
}

/* Order confirmation page */
.loyalty-block-order-confirmation .alert-loyalty {
}

/* Product added modal */
.loyalty-block-shopping-cart-modal .alert-loyalty {
}

/* Product image */
.loyalty-block-product-image {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #fff6ca;
    color: #777777;
    border: 1px solid #f8d100;
    padding: .2rem;
    z-index: 1;
}

.loyalty-block-product-image span {
    vertical-align: middle;
}

.loyalty-block-product-image img,
.main-product-details .product-cover .loyalty-block-product-image img {
    margin-right: 0;
    display: inline-block;
}

/* Type column: no line breaks */
#loyaltypoints-list .lep-col-type {
    white-space: nowrap;
}

/* Points / Validity / Status columns: centered */
#loyaltypoints-list td:nth-child(4),
#loyaltypoints-list td:nth-child(5),
#loyaltypoints-list td:nth-child(7),
#loyaltypoints-list th:nth-child(4),
#loyaltypoints-list th:nth-child(5),
#loyaltypoints-list th:nth-child(7) {
    text-align: center;
}

/* Status column: centered in vouchers table */
#order-list td:nth-child(6),
#order-list th:nth-child(6) {
    text-align: center;
}

/* ── Status badges ─────────────────────────────────────────────── */
.lep-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    line-height: 1;
    white-space: nowrap;
}

/* Points history states */
.lep-badge-state-1 { background: #fff3cd; color: #856404; }
.lep-badge-state-2 { background: #d1e7dd; color: #0a5c36; }
.lep-badge-state-3,
.lep-badge-state-4,
.lep-badge-state-6 { background: #f8d7da; color: #842029; }
.lep-badge-state-5 { background: #cff4fc; color: #055160; }
.lep-badge-state-7 { background: #cff4fc; color: #055160; }

/* Voucher statuses */
.lep-badge-available { background: #d1e7dd; color: #0a5c36; }
.lep-badge-used      { background: #e2e3e5; color: #41464b; }
.lep-badge-expired   { background: #f8d7da; color: #842029; }

/* ── Cart/checkout: compact catalog row list ─────────────────────────────── */

.lep-compact-head {
    margin-bottom: 10px;
}

.lep-compact-title {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.lep-compact-balance {
    display: block;
    font-size: 0.82em;
    opacity: 0.75;
}

/* Grid-based list: reward | cost-pill | button — columns align across all rows */
.lep-pkg-list {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
}

.lep-pkg-item__reward {
    font-size: 0.9em;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.lep-pkg-item__cost {
    background: rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 0.75em;
    white-space: nowrap;
    color: #555;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.lep-pkg-item__form {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding-bottom: 4px;
}

.lep-pkg-item__reward strong {
    font-weight: 700;
}

.lep-item-locked {
    opacity: 0.55;
}

.lep-pkg-item__btn {
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 10px;
}

.lep-pkg-item__btn[disabled] {
    cursor: not-allowed;
}

/* ── Summary page: redemption block wrapper ──────────────────────────────── */

.lep-balance-line {
    margin-bottom: 0.25rem;
    color: #555;
    text-align: center;
}

.lep-balance-num {
    font-size: 1.2em;
    font-weight: 800;
    color: #27ae60;
}

.lep-expiry-line {
    font-size: 0.82em;
    color: #999;
    margin-bottom: 1rem;
}

/* ── Summary page: package card grid ────────────────────────────────────── */

.lep-pkg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    gap: 12px;
    margin-top: 30px;
}

@media (max-width: 1199px) {
    .lep-pkg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .lep-pkg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .lep-pkg-grid {
        grid-template-columns: 1fr;
    }
}

.lep-pkg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: background 0.15s;
    align-self: start;
}

.lep-pkg-card:hover:not(.lep-pkg-card--locked) {
    background: #fffbf5;
}

.lep-pkg-card__reward {
    font-size: 1.6em;
    font-weight: 800;
    color: #222;
    line-height: 1.1;
    margin-bottom: 10px;
}

.lep-pkg-card__cost {
    padding: 4px 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 16px;
}

.lep-pkg-card__action {
    width: 100%;
}

.lep-pkg-card__action form {
    margin: 0;
    padding: 0;
}

.lep-pkg-card__missing {
    display: block;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
}

.lep-pkg-card__missing.btn.disabled,
.lep-pkg-card__missing.btn.disabled:hover {
    color: #777;
    background: #f0f0f0;
    border-color: #bbb;
    opacity: 1;
}

.lep-pkg-card__btn {
    width: 100%;
    text-transform: uppercase;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    padding: 8px 10px;
    box-sizing: border-box;
}

.lep-pkg-card--locked .lep-pkg-card__btn[disabled] {
    cursor: not-allowed;
}

/* ── Summary page: progress timeline ────────────────────────────────────── */

.lep-timeline-wrap {
    margin-top: 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lep-timeline {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-width: 360px;
    padding-top: 8px;
}

/* Track center = padding-top(8) + top-info height(30) + half of node-wrap(64/2=32) = 70px */
.lep-timeline-track {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    height: 4px;
    background: #e8e8e8;
    border-radius: 2px;
    z-index: 0;
}

.lep-timeline-fill {
    height: 100%;
    background: #27ae60;
    border-radius: 2px;
    transition: width 0.6s ease;
    max-width: 100%;
}

.lep-timeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Fixed-height wrapper so all circle centers align with the track */
.lep-timeline-node-wrap {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circle — size set inline per step via style="width:Xpx;height:Xpx" */
.lep-timeline-node {
    border-radius: 50%;
    border: 3px solid #d8d8d8;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.lep-timeline-step--reached .lep-timeline-node {
    border-color: #27ae60;
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.15);
}

.lep-timeline-diamond {
    color: #c0c0c0;
    line-height: 1;
    display: block;
    transition: color 0.2s;
}

.lep-timeline-step--reached .lep-timeline-diamond {
    color: #27ae60;
}

.lep-timeline-info--top {
    height: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
}

.lep-timeline-info {
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
}

.lep-timeline-reward {
    font-size: 1.05em;
    font-weight: 800;
    color: #222;
    line-height: 1;
    margin-bottom: 2px;
}


.lep-timeline-pts-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.lep-timeline-pts {
    display: inline-block;
    padding: 2px 8px;
    color: #555;
    white-space: nowrap;
}

.lep-timeline-btn {
    display: inline-block;
    width: auto;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 5px 14px;
    white-space: nowrap;
}

.lep-timeline-missing {
    white-space: nowrap;
}

.lep-timeline-missing.btn.disabled,
.lep-timeline-missing.btn.disabled:hover {
    color: #777;
    background: #f0f0f0;
    border-color: #bbb;
    opacity: 1;
}

/* ── Theme-gap fallbacks ──────────────────────────────────────────────────
   Some custom themes do not style the standard classic-theme classes the
   module templates use (.card-block, .table-bordered, .hidden-sm-down...).
   :where() has zero specificity, so any theme rule for these classes wins
   even when loaded before this file: the fallbacks only fill the gaps.
   Scoped to the module page body id — the rest of the shop is untouched.
   Browsers without :where() (pre-2021) ignore these rules entirely. */

:where(#module-loyaltyeditpoints-points .card) {
    margin-bottom: 1.5rem;
}

:where(#module-loyaltyeditpoints-points .card-header) {
    padding: 0.75rem 1.25rem;
}

:where(#module-loyaltyeditpoints-points .card-block) {
    padding: 1.25rem;
}

:where(#module-loyaltyeditpoints-points .btn-default) {
    color: #232323;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
}

:where(#module-loyaltyeditpoints-points .table) {
    width: 100%;
    margin-bottom: 1rem;
}

:where(#module-loyaltyeditpoints-points .table th),
:where(#module-loyaltyeditpoints-points .table td) {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

:where(#module-loyaltyeditpoints-points .table-bordered),
:where(#module-loyaltyeditpoints-points .table-bordered th),
:where(#module-loyaltyeditpoints-points .table-bordered td) {
    border: 1px solid #dee2e6;
}

:where(#module-loyaltyeditpoints-points .table-striped tbody tr:nth-of-type(odd)) {
    background-color: rgba(0, 0, 0, 0.05);
}

:where(#module-loyaltyeditpoints-points .thead-inverse th),
:where(#module-loyaltyeditpoints-points .table-dark th),
:where(#module-loyaltyeditpoints-points .table-dark td) {
    color: #fff;
    background-color: #212529;
}

:where(#module-loyaltyeditpoints-points .page-list) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

:where(#module-loyaltyeditpoints-points .page-list a),
:where(#module-loyaltyeditpoints-points .page-list .spacer) {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

:where(#module-loyaltyeditpoints-points .page-list .current a) {
    font-weight: 700;
    text-decoration: underline;
}

:where(#module-loyaltyeditpoints-points .custom-range) {
    width: 100%;
    padding: 0;
    background-color: transparent;
}

:where(#module-loyaltyeditpoints-points .block-center) {
    margin-left: auto;
    margin-right: auto;
}

:where(#module-loyaltyeditpoints-points .unvisible) {
    display: none;
}

/* Classic-theme responsive visibility helpers (Bootstrap 4 alpha names).
   !important mirrors the classic theme and beats display utilities like
   .d-flex when both sit on the same element; themes defining these classes
   themselves are unaffected because they simply never reach this gap. */
@media (max-width: 767.98px) {
    :where(#module-loyaltyeditpoints-points .hidden-sm-down) {
        display: none !important;
    }
}

@media (min-width: 768px) {
    :where(#module-loyaltyeditpoints-points .hidden-md-up) {
        display: none !important;
    }
}