/* ============================================================
   Cart / checkout page design upgrade — additive, scoped to
   existing markup classes, same approach as home-upgrade.css
   and product-details-upgrade.css.

   NOTE: pushed into @stack('css'), which renders BEFORE
   style.css/main.css/responsive.css/bootstrap.min.css in the
   shared master layout. Any property those files also set on
   the same selector needs !important here, or they win on
   equal specificity (loaded later). Only redeclared properties
   carry !important.

   Does not touch: cart AJAX behaviour (.cart_remove,
   .cart_increment, .cart_decrement, #area, #apply_coupon,
   select2 plugin internals).
   ============================================================ */

:root {
    --upg-red: #e02020;
    --upg-red-dark: #b71919;
    --upg-ink: #1f2937;
    --upg-muted: #6b7280;
    --upg-line: #edf0f2;
    --upg-radius: 16px;
    --upg-radius-sm: 10px;
    --upg-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}

body {
    background: #f2f3f5 !important;
}

.chheckout-section {
    padding: 24px 0 !important;
}

/* ---------- Card shells (bootstrap .card override) ---------- */
.checkout-shipping .card,
.cart_details .card {
    border: none !important;
    border-radius: var(--upg-radius) !important;
    box-shadow: var(--upg-shadow);
    overflow: hidden;
}

.checkout-shipping .card-header,
.cart_details .card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--upg-line) !important;
    padding: 18px 22px !important;
}

.checkout-shipping .card-header h6 {
    font-weight: 600;
    color: var(--upg-ink);
    margin: 0;
}

.checkout-shipping h5,
.cart_details h5 {
    font-size: 15px !important;
    letter-spacing: .3px;
    color: var(--upg-ink) !important;
    margin: 0;
}

.checkout-shipping .card-body,
.cart_details .card-body {
    padding: 22px !important;
}

/* ---------- Form fields ---------- */
.checkout-shipping label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--upg-ink);
}

.checkout-shipping input,
.checkout-shipping select {
    border: 1px solid var(--upg-line) !important;
    border-radius: var(--upg-radius-sm) !important;
    height: 44px !important;
    transition: .2s ease;
}

.checkout-shipping input:focus,
.checkout-shipping select:focus {
    border-color: var(--upg-red) !important;
    box-shadow: 0 0 0 3px rgba(224, 32, 32, .12) !important;
    outline: none;
}

.select2-container--default .select2-selection--single {
    border: 1px solid var(--upg-line) !important;
    border-radius: var(--upg-radius-sm) !important;
    height: 44px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

/* ---------- Payment method chips ---------- */
.payment_option {
    grid-template-columns: none !important;
}

.payment-methods .form-check {
    display: block !important;
    border: 1px solid var(--upg-line);
    border-radius: var(--upg-radius-sm);
    padding: 10px 14px 10px 38px !important;
    margin: 0 0 10px 0 !important;
    transition: .2s ease;
}

.payment-methods .form-check:hover {
    border-color: var(--upg-red);
}

.payment-methods .form-check:has(.form-check-input:checked) {
    border-color: var(--upg-red);
    background: #fdecec;
}

.payment-methods label {
    font-weight: 600 !important;
    color: var(--upg-ink) !important;
    margin-right: 0 !important;
}

.checkout-shipping .form-check-input {
    height: 16px !important;
    width: 16px !important;
    accent-color: var(--upg-red);
}

/* ---------- Order button ---------- */
.order_place {
    background: var(--upg-red) !important;
    border-radius: 999px !important;
    text-transform: none;
    letter-spacing: .2px;
    height: 48px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.order_place:hover {
    background: var(--upg-red-dark) !important;
}

/* ---------- Cart items table ---------- */
.cartlist img {
    height: 44px !important;
    width: 44px !important;
    border-radius: var(--upg-radius-sm);
    object-fit: contain;
    background: #fafafa;
    border: 1px solid var(--upg-line);
    margin-right: 6px;
}

.cart_table {
    border: none !important;
    margin-bottom: 0 !important;
}

.cart_table thead th {
    background: #f7f8fa !important;
    color: var(--upg-muted) !important;
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border: none !important;
    border-bottom: 1px solid var(--upg-line) !important;
}

.cart_table tbody tr {
    background: #fff !important;
}

.cart_table tbody td {
    border: none !important;
    border-bottom: 1px solid var(--upg-line) !important;
    vertical-align: middle;
}

.cart_table .text-left a {
    color: var(--upg-ink);
    font-weight: 500;
}

.cart_table .text-left p {
    font-size: 12px;
    color: var(--upg-muted);
    margin: 2px 0 0;
}

.cart_remove i {
    color: var(--upg-muted) !important;
    transition: .2s ease;
}

.cart_remove:hover i {
    color: var(--upg-red) !important;
}

.vcart-qty .quantity {
    border: 1px solid var(--upg-line) !important;
    border-radius: 999px !important;
    overflow: hidden;
    margin: 0 auto !important;
}

.vcart-qty .quantity .minus,
.vcart-qty .quantity .plus {
    border-color: var(--upg-line) !important;
    color: var(--upg-ink);
}

.cart_table tfoot th,
.cart_table tfoot td {
    border: none !important;
    background: #fff !important;
}

.cart_table tfoot tr:last-child th,
.cart_table tfoot tr:last-child td {
    border-top: 2px solid var(--upg-line) !important;
    padding-top: 14px !important;
    font-size: 16px;
}

.cart_table tfoot tr:last-child span,
.cart_table tfoot tr:last-child strong {
    color: var(--upg-red);
}

/* ---------- Responsive tuning ---------- */
@media (max-width: 767px) {
    .checkout-shipping .card-body,
    .cart_details .card-body {
        padding: 16px !important;
    }
}