/* =========================
   ساختار دو ستونه برابر
========================= */

.woocommerce-checkout form.checkout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin: 0 30px 0 50px;
}

/* دو باکس برابر */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
    width: 50%;
    box-sizing: border-box;
}

/* جابجایی جای باکس‌ها */
.woocommerce-checkout #order_review {
    order: 2;
}

.woocommerce-checkout #customer_details {
    order: 1;
}

/* =========================
   باکس سفارش
========================= */

.woocommerce-checkout #order_review {
    background: #fff;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* حذف تیتر اصلی */
.woocommerce-checkout #order_review_heading {
    display: none;
}

/* تیتر جعلی داخل باکس */
.woocommerce-checkout #order_review::before {
    content: "سفارش شما";
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

/* =========================
   باکس اطلاعات صورتحساب
========================= */

.woocommerce-checkout #customer_details > .col2-set {
    background: #fff;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* حذف float های پیش‌فرض ووکامرس */
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
    width: 100% !important;
    float: none !important;
}
.woocommerce-checkout .col-2{
    margin-bottom: 50px;
}
/* =========================
   دکمه ثبت سفارش
========================= */

.woocommerce-checkout #place_order {
    width: 100%;
    background-color: #0d6efd;
    border: none;
    border-radius: 10px;
    padding: 16px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.woocommerce-checkout #place_order:hover {
    background-color: #0b5ed7;
}

.woocommerce-checkout .place-order {
    margin-top: 25px;
}

/* =========================
   ریسپانسیو
========================= */

@media (max-width: 992px) {

    .woocommerce-checkout form.checkout {
        flex-direction: column;
    }

    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review {
        width: 100%;
        order: unset;
    }
}