.checkout-page-section {
    position: relative;
    overflow: hidden;
    padding: 24px 0;
    background:
        radial-gradient(circle at 14% 18%, rgba(28, 105, 157, .14) 0%, transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(28, 105, 157, .11) 0%, transparent 26%),
        radial-gradient(circle at 78% 82%, rgba(28, 105, 157, .08) 0%, transparent 30%),
        linear-gradient(135deg, #f9fcff 0%, #eef7fd 38%, #f5fbff 68%, #ffffff 100%);
}

.checkout-page-section::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    left: -260px;
    top: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 105, 157, .09) 0%, rgba(28, 105, 157, .04) 48%, transparent 72%);
    pointer-events: none;
}

.checkout-page-section::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -160px;
    top: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 105, 157, .10) 0%, rgba(28, 105, 157, .04) 45%, transparent 74%);
    pointer-events: none;
}

.checkout-page-section .container {
    position: relative;
    z-index: 2;
}

.checkout-card {
    position: relative;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #c5ddea;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(28, 105, 157, .12);
    backdrop-filter: blur(8px);
}

.checkout-card::before {
    content: "";
    position: absolute;
    width: 135px;
    height: 135px;
    right: -50px;
    top: -55px;
    border-radius: 50%;
    background: rgba(28, 105, 157, .055);
    pointer-events: none;
}

.checkout-card-header {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #1C699D, #15557F);
    padding: 9px 14px;
}

.checkout-card-header h5,
.checkout-card-header h6 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

.checkout-bn-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.checkout-card-body {
    position: relative;
    z-index: 2;
    padding: 15px;
}

.checkout-card label {
    color: #0f2f45;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 5px;
}

.checkout-card label i {
    color: #1C699D;
    margin-right: 4px;
}

.checkout-card .form-group {
    margin-bottom: 10px;
}

.checkout-card .form-control {
    height: 40px;
    border-radius: 10px;
    border: 1px solid #b7d3e3;
    background: rgba(249, 252, 255, .95);
    color: #102f43;
    font-size: 13px;
    font-weight: 700;
}

.checkout-card select.form-control {
    height: 40px;
}

.checkout-card .form-control::placeholder {
    color: #7f94a3;
    opacity: .58;
    font-weight: 600;
}

.checkout-card .form-control:focus {
    background: #fff;
    border-color: #1C699D !important;
    box-shadow: 0 0 0 3px rgba(28, 105, 157, .12) !important;
}

.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.payment-option {
    flex: 1;
    min-width: 170px;
    min-height: 42px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 11px;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.payment-option input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
}

.payment-option span {
    color: #102f43;
    font-size: 13px;
    font-weight: 800;
}

.payment-option.p_cash {
    background: #eef9f3;
    border: 1px solid #bce8ce;
}

.payment-option.p_sslcommerz,
.payment-option.p_bkash,
.payment-option.p_shurjo {
    background: #f3f7ff;
    border: 1px solid #cbdcf7;
}

.payment-option:hover {
    border-color: #1C699D;
    box-shadow: 0 4px 12px rgba(28, 105, 157, .08);
}

.payment-option input[type="radio"]:checked {
    accent-color: #1C699D;
}

.payment-option input[type="radio"]:checked + span {
    color: #1C699D;
    font-weight: 900;
}

.order-place-btn {
    height: 43px;
    background: linear-gradient(135deg, #1C699D, #15557F);
    border: 0 !important;
    border-radius: 11px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 900;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 9px 18px rgba(28, 105, 157, .22);
}

.order-place-btn:hover,
.order-place-btn:focus {
    background: linear-gradient(135deg, #15557F, #104766) !important;
    color: #fff !important;
}

.order-place-btn i {
    color: #fff !important;
}

.cartlist {
    position: relative;
    z-index: 2;
    padding: 14px;
}

.cartlist .cart_table {
    margin-bottom: 0;
    border: 1px solid #c5ddea;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, .96);
}

.cartlist .cart_table thead th {
    background: #eef6fb;
    color: #102f43;
    font-size: 13px;
    font-weight: 900;
    padding: 10px 8px;
    border-color: #c5ddea;
    white-space: nowrap;
}

.cartlist .cart_table thead th:nth-child(2),
.cartlist .cart_table tbody td:nth-child(2) {
    border-right: 2px solid #c5ddea !important;
}

.cartlist .cart_table thead th:nth-child(3),
.cartlist .cart_table tbody td:nth-child(3) {
    border-right: 2px solid #d6e6ef !important;
}

.cartlist .cart_table tbody td {
    padding: 9px 8px;
    vertical-align: middle;
    border-color: #e4eff5;
    color: #102f43;
    font-size: 13px;
    font-weight: 700;
}

.checkout-page-section .cartlist .cart_table td img {
    width: 42px !important;
    height: 42px !important;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid #c5ddea;
    margin-right: 7px;
}

.cartlist .cart_table td a {
    color: #102f43;
    font-weight: 800;
    text-decoration: none;
}

.cartlist .cart_table td p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #64748b;
}

.cart_remove {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #fff0f1;
    color: #dc2626 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cart_remove i {
    color: #dc2626 !important;
    font-size: 13px;
}

.quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #c5ddea;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.quantity button {
    width: 30px;
    height: 32px;
    border: 0;
    background: #eff7fc;
    color: #1C699D;
    font-weight: 900;
}

.quantity input {
    width: 36px;
    height: 32px;
    border: 0;
    text-align: center;
    color: #102f43;
    font-size: 13px;
    font-weight: 900;
}

.cartlist .cart_table tfoot th,
.cartlist .cart_table tfoot td {
    padding: 10px 12px;
    border-color: #d7e7f0;
    color: #102f43;
    font-size: 14px;
    font-weight: 900;
}

.cartlist .cart_table tfoot tr:nth-child(1) th,
.cartlist .cart_table tfoot tr:nth-child(1) td {
    background: #f3f9fd;
}

.cartlist .cart_table tfoot tr:nth-child(2) th,
.cartlist .cart_table tfoot tr:nth-child(2) td {
    background: #fffaf0;
}

.cartlist .cart_table tfoot tr:last-child th,
.cartlist .cart_table tfoot tr:last-child td {
    background: linear-gradient(135deg, #1C699D, #15557F) !important;
    color: #fff !important;
    font-size: 16px;
}

.cartlist .cart_table tfoot tr:last-child td *,
.cartlist .cart_table tfoot tr:last-child th * {
    color: #fff !important;
}

.coupon-box {
    position: relative;
    z-index: 2;
    padding: 13px 14px 15px;
    background: rgba(251, 253, 255, .92);
    border-top: 1px solid #c5ddea;
}

.coupon-box label {
    color: #102f43;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 7px;
}

.coupon-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.coupon-action input {
    flex: 1 1 auto;
    min-width: 0;
    height: 39px;
    border-radius: 10px;
    border: 1px solid #b7d3e3;
    background: #f9fcff;
    font-size: 13px;
    font-weight: 700;
}

.coupon-action input::placeholder {
    color: #7f94a3;
    opacity: .58;
}

.coupon-btn {
    flex-shrink: 0;
    min-width: 120px;
    height: 39px;
    border: 0;
    border-radius: 10px;
    background: #1C699D;
    color: #fff !important;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 900;
}

.coupon-btn:hover {
    background: #15557f;
    color: #fff !important;
}

#coupon-message .alert {
    padding: 7px 10px;
    margin-bottom: 0;
    font-size: 12px;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .checkout-page-section {
        padding: 16px 0 22px;
    }

    .checkout-page-section::before {
        width: 420px;
        height: 420px;
        left: -250px;
        top: 120px;
    }

    .checkout-page-section::after {
        width: 280px;
        height: 280px;
        right: -160px;
        top: 40px;
    }

    .cus-order-2 {
        order: 1;
    }

    .cust-order-1 {
        order: 2;
    }

    .checkout-card {
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .checkout-card-body,
    .cartlist {
        padding: 12px;
    }

    .checkout-card .form-control,
    .checkout-card select.form-control {
        height: 42px;
    }

    .payment-methods {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .payment-option {
        width: 100%;
        min-width: 100%;
    }

    .order-place-btn {
        height: 46px;
        font-size: 14px;
    }

    .cartlist .cart_table thead th,
    .cartlist .cart_table tbody td {
        font-size: 12px;
        padding: 8px 6px;
    }

    .checkout-page-section .cartlist .cart_table td img {
        width: 36px !important;
        height: 36px !important;
    }

    .coupon-action {
        flex-direction: column;
        width: 100%;
    }

    .coupon-action input {
        width: 100%;
    }

    .coupon-btn {
        width: 100%;
        min-width: 100%;
    }
}
.delivery-area-grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
    margin-top:8px;
}

.delivery-area-card{
    position:relative !important;
    border:2px solid #d7e7f0 !important;
    border-radius:14px !important;
    background:#fff !important;
    min-height:90px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    cursor:pointer;
    text-align:center;
    padding:10px !important;
}

.delivery-area-card input{
    position:absolute !important;
    opacity:0 !important;
}

.delivery-icon{
    font-size:24px !important;
    color:#1C699D !important;
}

.delivery-area-card span:last-child{
    font-size:12px !important;
    font-weight:800 !important;
    color:#102f43 !important;
}

.delivery-area-card.active{
    border-color:#1C699D !important;
    background:#eef7fc !important;
    box-shadow:0 4px 14px rgba(28,105,157,.12) !important;
}

@media(max-width:575px){
    .delivery-area-grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:10px !important;
    }

    .delivery-area-card{
        min-height:80px !important;
    }

    .delivery-area-card span:last-child{
        font-size:13px !important;
    }
}