/* ============================================================================
   App-style Cart & Checkout — light-grey background with white rounded card
   panels, brand-blue totals/CTAs, app-style payment tiles. Scoped to
   body.page-cart / body.page-checkout. Brand: blue #1E3A8A + teal #14B8A6.
   ========================================================================== */

body.page-cart,
body.page-checkout {
    background: #F1F5F9;
}

/* Breadcrumb strip sits cleanly on the grey page. */
body.page-cart section.wrapper.bg-soft-grape,
body.page-checkout section.wrapper.bg-soft-grape {
    background: transparent !important;
    padding-top: 10px;
    padding-bottom: 0;
}
body.page-cart .breadcrumb-item a,
body.page-checkout .breadcrumb-item a {
    color: #1E3A8A;
}
body.page-checkout section.wrapper.bg-light {
    background: transparent !important;
}

/* ── CART ───────────────────────────────────────────────────────────────────*/
/* Items table + totals become white rounded cards. */
body.page-cart .cart-table-wrapper {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 5px 14px rgba(2, 6, 23, 0.05);
    padding: 18px;
    margin-bottom: 18px;
}
body.page-cart .col-lg-4.mt-10 {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 5px 14px rgba(2, 6, 23, 0.05);
    padding: 20px;
}
/* Product thumbnail rounded like the app. */
body.page-cart figure.cart-img {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    background: #F8FAFC;
}
body.page-cart figure.cart-img img {
    border-radius: 12px;
}
body.page-cart .cart-product-desc-list .post-title {
    color: #0F172A;
}
/* Line totals + grand total in brand blue. */
body.page-cart .product-line-price,
body.page-cart .total-price .price,
body.page-cart #final_total {
    color: #1E3A8A !important;
    font-weight: 700;
}

/* ── CHECKOUT ────────────────────────────────────────────────────────────────*/
/* Address, payment, and order-summary blocks → white rounded cards. */
body.page-checkout .ship-details-wrapper,
body.page-checkout .checkout-order-wrapper {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 5px 14px rgba(2, 6, 23, 0.05);
    padding: 20px;
    margin-bottom: 18px;
}
body.page-checkout .checkout-form-title,
body.page-checkout .checkout-order-wrapper h1 {
    color: #0F172A;
    font-weight: 700;
}
body.page-checkout .checkout-order-wrapper h1 {
    font-size: 1.25rem;
}

/* Payment method tiles: bordered, rounded, hover + selected highlight. */
body.page-checkout .table-step-shipping td {
    vertical-align: middle;
}
body.page-checkout .payment-gateway-images {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 8px 10px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.page-checkout .table-step-shipping tr:hover .payment-gateway-images {
    border-color: #1E3A8A;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.12);
}
/* Highlight the selected payment row (radio :checked). */
body.page-checkout .table-step-shipping input[type="radio"]:checked ~ * .payment-gateway-images,
body.page-checkout .table-step-shipping tr:has(input[type="radio"]:checked) .payment-gateway-images {
    border-color: #1E3A8A;
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.18);
}

/* Order-summary prices: keep them readable, final total in brand blue. */
body.page-checkout .cart-total-price .price {
    color: #334155;
}
body.page-checkout .cart-total-price .grand-total,
body.page-checkout .cart-total-price #final_total,
body.page-checkout .total-amount,
body.page-checkout #grand_total {
    color: #1E3A8A !important;
    font-weight: 700;
}

/* Brand-blue primary CTAs (Go to checkout / Place order) come from the global
   neptch color theme via .btn-primary; ensure any yellow CTA matches too. */
body.page-cart .btn-yellow,
body.page-checkout .btn-yellow {
    --bs-btn-bg: #1E3A8A;
    --bs-btn-border-color: #1E3A8A;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #16306e;
    --bs-btn-hover-border-color: #16306e;
    background-color: #1E3A8A;
    border-color: #1E3A8A;
    color: #fff;
}