﻿html, body {
    overflow-x: hidden;
    max-width: 100%;
}
/* ── Page layout ── */
.checkout_section {
    margin-top: 100px;
}

.coupon_section {
    margin-bottom: 20px;
}

.order-receipt {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: visible; 
    background: #fff;
    position: relative; 
    z-index: 10; 
}

/* ── Receipt header ── */

.receipt-title {
    font-weight: 500;
    font-size: 15px;
    display: block;
}

.receipt-meta {
    font-size: 12px;
    color: #6b7280;
    display: block;
    margin-top: 2px;
}

.badge-pending {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Vendor block ── */


.vendor-label {
    padding: 8px 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}



.vendor-name-text {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

/* ── Items table ── */
.items-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .items-table th {
        font-size: 10px;
        color: #9ca3af;
        font-weight: 500;
        letter-spacing: .02em;
        text-align: left;
        white-space: nowrap;
    }

        .items-table th.text-right {
            text-align: right;
        }

        .items-table th.text-center {
            text-align: center;
        }

    .items-table td {
        font-size: 12px;
        vertical-align: middle;
    }

    .items-table tbody tr:last-child td {
        border-bottom: none;
    }

    .items-table td.text-right,
    .items-table td.text-center {
        text-align: right;
        white-space: nowrap;
    }

    .items-table td.text-center {
        text-align: center;
    }

.col-product {
    width: 30%;
}

.col-price {
    width: 21%;
}

.col-qty {
    width: 11%;
}

.col-disc {
    width: 17%;
}

.col-sub {
    width: 21%;
}

.item-name {
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
}

.disc-amount {
    color: #15803d;
    font-size: 12px;
}

.no-disc {
    color: #d1d5db;
}

.qty-pill {
    background: #f3f4f6;
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 500;
}

/* ── Vendor subtotal / coupon / final rows ── */
.vendor-subtotal-row {
    background: #f9fafb;
    padding: 7px 1.25rem;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
}

.coupon-applied-row {
    background: #f0fdf4;
    padding: 7px 1.25rem;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-top: 1px solid #bbf7d0;
    align-items: center;
}

.coupon-code-chip {
    background: #bbf7d0;
    color: #14532d;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-family: monospace;
}

.coupon-save {
    color: #15803d;
    font-weight: 500;
}

.vendor-final-row {
    padding: 8px 1.25rem;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    border-top: 1px solid #e5e7eb;
}

.label-muted {
    color: #9ca3af;
    font-size: 12px;
}

/* ── Grand totals ── */
.totals-section {
    padding: 1rem 1.25rem;
}

.totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #6b7280;
    padding: 4px 0;
}

    .totals-row.text-success {
        color: #15803d;
    }

.totals-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 10px 0;
}
.savings-banner {
    margin-top: 10px;
    background: #f0fdf4;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #166534;
}

/* ── Payment & place order ── */
.payment-section {
    padding: 1rem 1.25rem 0.5rem;
}

    .payment-section label {
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 6px;
        display: block;
    }

.required {
    color: #ef4444;
}

.place-order-btn {
    padding: 0 1.25rem 1.25rem;
    margin-top: 25px;
}

    .place-order-btn .btn {
        min-width: 180px;
        display: inline-block;
    }

/* ── Utility ── */
.fw-500 {
    font-weight: 500;
}

.receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

.vendor-block {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.vendor-initial {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    background-color: #343a40;
    color: #fff;
    font-weight: bold;
    margin-right: .5rem;
}

.items-table th, .items-table td {
    padding: .5rem .4rem;
    border-bottom: 1px solid #eee;
}

.price-original {
    text-decoration: line-through;
    color: #888;
    font-size: .85em;
}

.price-disc {
    color: #28a745;
    font-weight: 600;
}

.totals-grand {
    font-size: 1.25rem;
    font-weight: bold;
    background: #f1f1f1;
    padding: .75rem 1rem;
    border-radius: 6px;
}

.btn-lg {
    padding: .75rem;
    font-size: 1.1rem;
}

.chip-option {
    cursor: pointer;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 20px;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
}

.chip-option input[type="radio"]:checked + .chip {
    background-color: #212529;
    color: #fff;
    border-color: #212529;
}

.chip:hover {
    border-color: #212529;
}

.btn-placeorder {
    background-color: #111827;
    border-color: #111827;
    color: #fff;
}

.btn-placeorder:disabled {
    background-color: #111827;
    border-color: #111827;
    color: #fff;
    opacity: 0.65;
}

.btn-placeorder:hover,
.btn-placeorder:focus {
    background-color: #f97316;
    border-color: #f97316;
    color: #fff;
}
/* ── Checkout section - Modern & Consistent with New Arrivals ── */
.vc-checkout-section {
    padding: 3rem 0;
}

    .vc-checkout-section .container {
        max-width: 85% !important;
    }

.vc-checkout-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2rem;
}

.address-card {
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
}

    .address-card:hover {
        border-color: #6366f1;
        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.12);
    }

    .address-card input[type="radio"]:checked {
        accent-color: #6366f1;
    }

.vc-order-summary {
    position: sticky;
    top: 2rem;
}

.vc-vendor-block {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.vc-vendor-header {
    background: #f9fafb;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.vendor-initial {
    width: 40px;
    height: 40px;
    background: #4f46e5;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.totals-grand {
    font-size: 1.4rem;
    font-weight: 700;
    background: #f8fafc;
    padding: 1rem 1.25rem;
    border-radius: 10px;
}

.savings-banner {
    background: #ecfdf5;
    color: #10b981;
    border-radius: 8px;
    padding: 12px;
    font-weight: 500;
}

.delivery-method-card {
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    border-radius: .75rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    display: block;
}

.delivery-method-card:hover {
    border-color: #c7d2fe;
}

.delivery-method-card.active {
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, 0.04);
    box-shadow: 0 0 0 1px var(--bs-primary, #0d6efd);
}

.delivery-method-card .dm-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    margin-right: .6rem;
    flex-shrink: 0;
}

.delivery-method-card.active .dm-icon {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

.delivery-method-row {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
}

.delivery-method-body {
    flex: 1 1 auto;
}

.delivery-method-title {
    font-weight: 600;
    margin-bottom: .1rem;
}

#deliveryAddressSection.dm-collapsed,
#billingAddressOnlyFields.dm-collapsed,
#payment-section.dm-collapsed,
#deliveryChargeSection.dm-collapsed {
    display: none !important;
}