/* RapitwebGreen - one-page checkout. Tokens only. Steps are a pill stepper, the open step is a card, the order summary is a sticky panel. */
.checkout-page {
    max-inline-size: 76rem;
    margin-inline: auto;
}

    .checkout-page .generalTitle {
        margin-block: 1rem 1.25rem !important;
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text);
    }
/* beats .my-3 */

/* ---- stepper (opc-header): one pill per step, the open one is dark ---- */
.opc-header {
    display: flex;
    gap: .5rem;
    margin-block-end: 1.25rem;
    padding-block-end: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 0;
}

    .opc-header::-webkit-scrollbar {
        display: none;
    }

    .opc-header .card-header {
        flex: 0 0 auto;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .opc-header .btn {
        --bs-btn-color: var(--muted);
        --bs-btn-bg: var(--white);
        --bs-btn-border-color: var(--gray);
        --bs-btn-hover-color: var(--text);
        --bs-btn-hover-bg: var(--gray);
        --bs-btn-hover-border-color: var(--muted);
        --bs-btn-active-color: var(--text);
        --bs-btn-active-bg: var(--gray);
        --bs-btn-active-border-color: var(--muted);
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding-block: .35rem;
        padding-inline: .4rem 1rem;
        font-size: .875rem;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: var(--shadow-sm);
    }

        .opc-header .btn[aria-expanded="true"] {
            --bs-btn-color: var(--gray);
            --bs-btn-bg: var(--dark);
            --bs-btn-border-color: var(--dark);
            --bs-btn-hover-color: var(--gray);
            --bs-btn-hover-bg: var(--dark);
            --bs-btn-hover-border-color: var(--dark);
            --bs-btn-active-color: var(--gray);
            --bs-btn-active-bg: var(--dark);
            --bs-btn-active-border-color: var(--dark);
        }

.opc-num {
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    background: var(--gray);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.opc-header .btn[aria-expanded="true"] .opc-num {
    box-shadow: 0 0 0 2px var(--main);
}

/* ---- layout: steps + sticky summary ---- */
.opc-layout {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1200px) {
    .opc-layout {
        grid-template-columns: minmax(0, 1fr) 26rem;
        align-items: start;
    }

    .opc-aside {
        position: sticky;
        top: 5.5rem;
        max-block-size: calc(100vh - 6.5rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

.opc-main {
    min-inline-size: 0;
}

/* ---- step panels: only the open one draws a card ---- */
.opc > .card {
    --bs-card-bg: transparent;
    background: transparent;
    border: 0;
    box-shadow: none;
}

    .opc > .card > [role="tabpanel"] > .card-body {
        padding: 1.25rem;
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }

.opc .section, .opc .select-billing-address, .opc .select-shipping-address, .opc .select-pickup-points,
.opc .bill-to-same-address, .opc .pickup-in-store {
    margin-block-end: 1rem;
}

.opc .selector {
    margin: 0;
}

.opc .pickup-in-store .description {
    margin: .4rem 0 0;
    font-size: .8125rem;
    color: var(--muted);
}

.opc label.genera,
.opc .select-billing-address > label,
.opc .select-pickup-points > label,
.opc .enter-address label {
    display: block;
    margin-block-end: .4rem;
    font-size: .8125rem;
    color: var(--muted);
}

.opc .form-check label,
.opc label.form-check {
    margin-block-end: 0;
}

.opc .single-pickup-point ul {
    margin: 0;
    padding: .75rem 1rem;
    list-style: none;
    border: 1px solid var(--gray);
    border-radius: var(--radius);
    font-size: .875rem;
}

.opc .single-pickup-point.name {
    font-weight: 700;
}

.opc .single-pickup-point.fee {
    color: var(--muted);
}

/* ---- checkboxes and radios ---- */
.opc .form-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: 0;
}

    .opc .form-check .form-check-input {
        float: none;
        flex: none;
        margin: 0;
    }

        .opc .form-check .form-check-input:checked {
            background-color: var(--main);
            border-color: var(--main);
        }

    .opc .form-check > .form-check-label:empty {
        display: none;
    }

.opc .custom-control-description {
    font-size: .875rem;
    color: var(--text);
}

/* shipping / payment options as selectable cards */
.opc .method-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.opc #payment-method-block {
    display: grid;
    gap: .5rem;
}

.opc :is(.method-list, #payment-method-block, .use-loyalty-points) .form-check {
    padding: .85rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .opc :is(.method-list, #payment-method-block, .use-loyalty-points) .form-check:hover {
        border-color: var(--muted);
    }

    .opc :is(.method-list, #payment-method-block, .use-loyalty-points) .form-check:has(.form-check-input:checked) {
        border-color: var(--main);
        background: color-mix(in srgb, var(--main) 8%, var(--white));
    }

.opc .use-loyalty-points {
    margin-block-end: .5rem;
}

.opc #payment-method-block img {
    inline-size: auto;
    max-block-size: 2rem;
}



.opc .buttons .btn, .opc .confirm-buttons .btn {
    padding-inline: 1.5rem;
    padding-block: .6rem;
    font-weight: 700;
}

.checkout-page a.btn {
    color: var(--bs-btn-color) !important;
}
    /* beats the global a { color } rule */
    .checkout-page a.btn:hover, .checkout-page a.btn:focus-visible {
        color: var(--bs-btn-hover-color) !important;
    }

.opc .buttons, .opc .confirm-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

    .opc .confirm-buttons .w-100 {
        flex: 1 0 100%;
    }

.opc .please-wait {
    font-size: .8125rem;
    color: var(--muted);
}

.opc .spinner-border {
    color: var(--main) !important;
}
/* beats .text-info */

/* ---- messages ---- */
.checkout-page .alert {
    border-radius: var(--radius);
    font-size: .875rem;
}

.checkout-page .alert-danger {
    --bs-alert-color: var(--danger);
    --bs-alert-bg: color-mix(in srgb, var(--danger) 8%, var(--white));
    --bs-alert-border-color: color-mix(in srgb, var(--danger) 25%, var(--white));
}

.checkout-page .alert-info {
    --bs-alert-color: var(--muted);
    --bs-alert-bg: var(--white);
    --bs-alert-border-color: var(--gray);
}

.opc .message-error {
    font-size: .8125rem;
    color: var(--danger);
}

    .opc .message-error ul {
        margin: .5rem 0 0;
        padding: 0;
        list-style: none;
    }

/* ---- order review (step 6 and the summary panel) ---- */
.opc-review .card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem;
}

    .opc-review .card-group > .card {
        margin: 0 !important;
        background: transparent;
        border: 1px solid var(--gray) !important;
        border-radius: var(--radius) !important;
        box-shadow: none;
    }

.opc-review .card-body {
    padding: 1rem;
}

.opc-review ul {
    display: grid;
    gap: .2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: var(--text);
}

.opc-review li.name {
    font-weight: 700;
}

.opc-review li > span:first-child,
.opc-review .label {
    color: var(--muted);
}

.opc-review li.title {
    margin-block-start: .75rem;
    padding-block-start: .75rem;
    border-block-start: 1px solid var(--gray);
}

    .opc-review li.title h5 {
        margin: 0;
        font-size: .8125rem;
        font-weight: 700;
        color: var(--muted);
    }

.opc-review .value {
    font-weight: 600;
}

/* ---- summary panel ---- */
.opc-summary {
    padding: 1.25rem;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

    .opc-summary .opc-review {
        margin-block-end: 1rem;
    }

    .opc-summary .cart-warnings {
        margin: 0 0 1rem;
        padding: 0;
        list-style: none;
    }

.opc-items {
    display: grid;
    gap: .75rem;
    margin: 0 0 1rem;
    padding: 0;
}

.opc-item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: .25rem .75rem;
    align-items: start;
    padding-block-end: .75rem;
    border-block-end: 1px solid var(--gray);
}

    .opc-item.no-thumb {
        grid-template-columns: minmax(0, 1fr) auto;
    }

.opc-thumb {
    display: block;
    inline-size: 4rem;
    block-size: 4rem;
    overflow: hidden;
    background: var(--gray);
    border-radius: var(--radius-md);
}

    .opc-thumb img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }

.opc-item-info {
    min-inline-size: 0;
}

.opc-item-name {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text) !important;
}
/* beats the global a { color } rule */
.opc-item-info .sku-number {
    display: block;
    font-size: .75rem;
    color: var(--muted);
}

.opc-item-info .attributes,
.opc-item-info .recurring-info {
    margin-block-start: .2rem;
    font-size: .75rem;
    color: var(--muted);
}

.opc-item-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    margin-block-start: .25rem;
    font-size: .8125rem;
    color: var(--muted);
}

    .opc-item-price .qty-opc {
        font-weight: 700;
        color: var(--text);
    }

.opc-item-info .edit-item {
    margin-block-start: .35rem;
}

.opc-item-info .message-error {
    border-radius: var(--radius);
}

.opc-item-total {
    text-align: end;
}

    .opc-item-total .prod-total {
        margin: 0;
        font-size: .9375rem;
        font-weight: 700;
        color: var(--text);
    }

    .opc-item-total .discount {
        font-size: .75rem;
    }

.opc-summary .totals-inner table {
    inline-size: 100%;
}

    .opc-summary .totals-inner table td,
    .opc-summary .totals-inner table th {
        padding-block: .45rem;
        font-size: .875rem;
        color: var(--muted);
        border: 0;
    }

        .opc-summary .totals-inner table td:last-child {
            text-align: end;
            color: var(--text);
            font-weight: 600;
        }

    .opc-summary .totals-inner table tr:last-child td {
        padding-block-start: .85rem;
        border-block-start: 1px solid var(--gray);
        font-size: 1rem;
        font-weight: 800;
        color: var(--text);
    }

.opc-summary .selected-checkout-attributes:has(div:not(:empty)) {
    margin-block-end: 1rem;
    font-size: .8125rem;
    color: var(--muted);
}

.opc-summary .no-data {
    margin: 0;
    text-align: center;
}

/* ================= order completed (Completed.cshtml) =================
   The page also carries .checkout-page, so the button / link rules above already apply to it. */
.order-completed-page {
    max-inline-size: 40rem;
}

    .order-completed-page .card {
        background: var(--white);
        border: 0;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }

    .order-completed-page .card-body {
        padding: 2.5rem 1.5rem;
    }

    .order-completed-page .order-done-icon {
        display: block;
        margin-block-end: .75rem;
        font-size: 3rem;
        line-height: 1;
        color: var(--main);
    }

    .order-completed-page .card-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--text);
    }

    .order-completed-page .card-subtitle {
        font-size: .9375rem;
        color: var(--muted) !important;
    }
    /* beats .text-muted utility */
    .order-completed-page .order-number-row {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        margin-block-start: 1rem;
        padding: .5rem 1.25rem;
        background: var(--gray);
        border-radius: 999px;
        font-size: .9375rem;
        font-weight: 600;
        color: var(--muted);
    }

    .order-completed-page .order-number {
        font-size: 1.125rem;
        font-weight: 800;
        color: var(--text);
    }

    .order-completed-page hr {
        border-color: var(--gray);
        opacity: 1;
    }

    .order-completed-page .buttons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

        .order-completed-page .buttons .btn {
            margin: 0 !important;
            padding: .6rem 1.5rem;
            font-weight: 700;
        }

.newsletter.bg-info,
[dark-theme="true"] .newsletter.bg-info {
    width: auto;
    margin-top: 64px !important; /* beats the !important .mt-3 utility */
    margin-inline: auto;
    max-width: 1320px;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px);
    background: var(--rwg-ink) !important; /* beats the !important .bg-info utility */
    border-radius: var(--rwg-r-block);
    color: var(--rwg-on-ink);
}
@media (max-width: 1399.98px) {
    .newsletter.bg-info { margin-inline: 12px; }
}
.newsletter .newsletter-title { color: var(--rwg-on-ink); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.025em; }
.newsletter .newsletter-desc { color: color-mix(in srgb, var(--rwg-on-ink) 70%, transparent); font-size: 16px; }
.newsletter .input-group { gap: 8px; flex-wrap: nowrap; }
.newsletter .newsletter-email.form-control,
[dark-theme="true"] .newsletter .newsletter-email.form-control {
    min-height: 48px;
    margin: 0;
    padding-inline: 20px;
    background: color-mix(in srgb, var(--rwg-on-ink) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rwg-on-ink) 22%, transparent);
    border-radius: var(--rwg-r-pill);
    color: var(--rwg-on-ink);
    text-align: right;
}
/* Bootstrap squares the inner corners at (0,6,0): .input-group:not(.has-validation) > :not(:last-child)... */
.newsletter .input-group > .newsletter-email.form-control:not(:last-child):not(.dropdown-toggle) { border-radius: var(--rwg-r-pill); }
.newsletter .newsletter-email.form-control::placeholder { color: color-mix(in srgb, var(--rwg-on-ink) 55%, transparent); }
.newsletter .newsletter-email-button.btn,
[dark-theme="true"] .newsletter .newsletter-email-button.btn {
    min-height: 48px;
    padding-inline: 20px;
    background: var(--rwg-on-ink);
    border: 0;
    border-radius: var(--rwg-r-pill);
    color: var(--rwg-ink);
}
.newsletter .form-check-label.text-white,
.newsletter .text-white { color: var(--rwg-on-ink) !important; } /* beats .text-white */


/* ---------- account ---------- */

.block-account-navigation .list-group-item,
.block-account-navigation ul li a,
[dark-theme="true"] .block-account-navigation .list-group-item {
    padding: 10px 14px;
    border: 0;
    border-radius: var(--rwg-r-input);
    background: transparent;
    color: var(--rwg-muted-text);
}
.block-account-navigation ul li a:hover,
.block-account-navigation ul li a.active,
[dark-theme="true"] .block-account-navigation ul li a.active,
[dark-theme="true"] .block-account-navigation ul li a:hover {
    background: var(--white);
    border-color: transparent;
    color: var(--rwg-ink);
}
.block-account-navigation ul li a.active { font-weight: 600; }

/* ---------- cart ---------- */

.shopping-cart.table,
[dark-theme="true"] .shopping-cart.table td { background: transparent; border-color: var(--rwg-line); }
.shopping-cart-container .product-picture img { background: var(--white); border-radius: var(--rwg-r-input); }
.shopping-cart-container .product a { color: var(--rwg-ink); font-weight: 500; }
.shopping-cart .prod-total,
.shopping-cart .unit-price,
.shopping-cart .product-unit-price { color: var(--rwg-ink); font-family: var(--rwg-mono); }
.shopping-cart .qty-input { max-width: 80px; text-align: center; border-radius: var(--rwg-r-pill); }

.shopping-cart-page .totals-inner,
[dark-theme="true"] .shopping-cart-page .totals-inner {
    padding: 20px;
    background: var(--white);
    border: 0;
    border-radius: var(--rwg-r-card);
}
.totals .value-summary { font-family: var(--rwg-mono); }
.checkout-buttons .checkout-button { min-height: 52px; font-size: 16px; text-transform: none !important; } /* beats .text-uppercase */

/* ---------- checkout ---------- */

.checkout-page .card,
[dark-theme="true"] .checkout-page .card { background: var(--white); border-radius: var(--rwg-r-card); }
.checkout-page .card-header h2 { font-size: 18px; font-weight: 600; }
.checkout-page .nav-pills .nav-link { border-radius: var(--rwg-r-pill); color: var(--rwg-muted-text); }
.checkout-page .nav-pills .nav-link.active { background: var(--rwg-ink); color: var(--rwg-on-ink); }

/* one-page checkout step headers and totals (Default: teal / cyan) */
.opc-header .card-header .btn-info,
[dark-theme="true"] .opc-header .card-header .btn-info { background: var(--white); padding: 5px 3px; color: var(--rwg-muted-text); }
.opc-header .card-header .btn-info:not(.collapsed),
[dark-theme="true"] .opc-header .card-header .btn-info:not(.collapsed) { color: var(--rwg-ink); }
.opc-header .card-header .btn-info:not(.collapsed)::before,
.opc-header .card-header .btn-info:not(.collapsed)::after,
[dark-theme="true"] .opc-header .card-header .btn-info:not(.collapsed)::before,
[dark-theme="true"] .opc-header .card-header .btn-info:not(.collapsed)::after { background: var(--rwg-accent); }
.opc-totals,
.checkout-page .col-more .order-summary-content .cart-footer {
    background: var(--white);
    border: 0;
    border-radius: var(--rwg-r-card);
}
.opc-totals .qty-opc { background: var(--rwg-accent); color: var(--rwg-on-accent); }

/* ---------- order details ---------- */

.order-details-page .card,
[dark-theme="true"] .order-details-page .card { background: var(--white); }
.order-details-page .card-header { font-weight: 600; }

/* ---------- compare ---------- */

.compare-products-table,
[dark-theme="true"] .compare-products-table { --bs-table-bg: transparent; border-color: var(--rwg-line); }
.compare-products-table img { background: var(--white); border-radius: var(--rwg-r-input); }

/* column heads carry .price too; only the values are mono */
.shopping-cart th,
.shopping-cart thead .price { font-family: var(--rwg-sans); }