/* ==========================================
   CHECKOUT LAYOUT
   ========================================== */

body.zt-custom-checkout form.checkout.tr-checkout-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr) !important;
    grid-template-areas:
        "customer payment"
        "order payment" !important;
    gap: 28px 32px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 auto !important;
    direction: rtl;
}

/* ==========================================
   RESET DEFAULT WOOCOMMERCE/FLOAT STYLES
   ========================================== */

body.zt-custom-checkout .woocommerce-checkout #customer_details,
body.zt-custom-checkout .woocommerce-checkout .col2-set,
body.zt-custom-checkout .woocommerce-checkout .col-1,
body.zt-custom-checkout .woocommerce-checkout .col-2,
body.zt-custom-checkout .woocommerce-checkout #order_review,
body.zt-custom-checkout .woocommerce-checkout #payment {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    max-width: 100% !important;
}

body.zt-custom-checkout .woocommerce-checkout .col-2 {
    display: none !important;
}

body.zt-custom-checkout .woocommerce form .form-row,
body.zt-custom-checkout .woocommerce-page form .form-row {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

/* ==========================================
   GRID AREAS
   ========================================== */

body.zt-custom-checkout #customer_details.tr-checkout-customer {
    grid-area: customer !important;
    min-width: 0 !important;
}

body.zt-custom-checkout #order_review_wrapper.tr-checkout-order {
    grid-area: order !important;
    min-width: 0 !important;
}

body.zt-custom-checkout #payment_wrapper.tr-checkout-payment {
    grid-area: payment !important;
    min-width: 0 !important;
    position: sticky;
    top: 24px;
    align-self: start !important;
}

/* ==========================================
   RIGHT SIDE BOXES
   ========================================== */

body.zt-custom-checkout .tr-billing-wrapper,
body.zt-custom-checkout #order_review_wrapper {
    background: #eef4fb !important;
    border: 1px solid #dde7f2 !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

body.zt-custom-checkout .section-title {
    font-size: 30px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    color: #15395b !important;
    margin: 0 0 22px 0 !important;
}

/* ==========================================
   BILLING FIELDS GRID
   ========================================== */

body.zt-custom-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 22px !important;
}

body.zt-custom-checkout .woocommerce-billing-fields__field-wrapper .form-row {
    margin: 0 !important;
}

body.zt-custom-checkout .woocommerce-billing-fields__field-wrapper .tr-col-half {
    grid-column: span 1 !important;
}

body.zt-custom-checkout .woocommerce-billing-fields__field-wrapper .tr-col-full {
    grid-column: 1 / -1 !important;
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */

body.zt-custom-checkout .woocommerce form .form-row label {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #223b56 !important;
}

body.zt-custom-checkout .woocommerce form .form-row input.input-text,
body.zt-custom-checkout .woocommerce form .form-row select,
body.zt-custom-checkout .woocommerce form .form-row textarea {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #cfd8e3 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    color: #1d2d3d !important;
}

body.zt-custom-checkout .woocommerce form .form-row input.input-text,
body.zt-custom-checkout .woocommerce form .form-row select {
    height: 52px !important;
    padding: 0 14px !important;
}

body.zt-custom-checkout .woocommerce form .form-row textarea {
    min-height: 120px !important;
    padding: 14px !important;
    resize: vertical !important;
}

body.zt-custom-checkout .woocommerce form .form-row input:focus,
body.zt-custom-checkout .woocommerce form .form-row select:focus,
body.zt-custom-checkout .woocommerce form .form-row textarea:focus {
    border-color: #8d5cf6 !important;
    outline: none !important;
}

/* ==========================================
   ORDER REVIEW TABLE
   ========================================== */

body.zt-custom-checkout .tr-order-box {
    width: 100% !important;
}

body.zt-custom-checkout .tr-order-box table.shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.zt-custom-checkout .tr-order-box table.shop_table th,
body.zt-custom-checkout .tr-order-box table.shop_table td {
    border: 1px solid #e3eaf2 !important;
    padding: 14px 16px !important;
    text-align: right !important;
    vertical-align: middle !important;
    font-size: 15px !important;
    color: #23384f !important;
}

body.zt-custom-checkout .tr-order-box table.shop_table th {
    font-weight: 800 !important;
}

body.zt-custom-checkout .tr-order-box .order-total strong,
body.zt-custom-checkout .tr-order-box .cart-subtotal td,
body.zt-custom-checkout .tr-order-box .order-total td {
    font-weight: 800 !important;
}

/* اگر payment دوباره داخل order box چاپ شد، مخفی شود */
body.zt-custom-checkout .tr-order-box #payment,
body.zt-custom-checkout .tr-order-box .woocommerce-checkout-payment {
    display: none !important;
}

/* ==========================================
   PAYMENT BOX
   ========================================== */

body.zt-custom-checkout #payment_wrapper {
    background: #17152b !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
}

body.zt-custom-checkout #payment_wrapper #payment,
body.zt-custom-checkout #payment_wrapper .woocommerce-checkout-payment {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
}

body.zt-custom-checkout #payment_wrapper ul.payment_methods {
    list-style: none !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body.zt-custom-checkout #payment_wrapper ul.payment_methods li {
    margin: 0 !important;
    padding: 0 !important;
}

body.zt-custom-checkout #payment_wrapper label {
    color: #ffffff !important;
    font-weight: 700 !important;
}

body.zt-custom-checkout #payment_wrapper div.payment_box {
    background: #2a2948 !important;
    color: #f3f3f3 !important;
    border-radius: 10px !important;
    padding: 18px !important;
    margin-top: 14px !important;
    line-height: 1.9 !important;
    font-size: 14px !important;
}

body.zt-custom-checkout #payment_wrapper div.payment_box::before {
    border-bottom-color: #2a2948 !important;
}

body.zt-custom-checkout #payment_wrapper .place-order {
    margin-top: 20px !important;
    padding: 0 !important;
}

body.zt-custom-checkout #payment_wrapper #place_order,
body.zt-custom-checkout #payment_wrapper button,
body.zt-custom-checkout #payment_wrapper .button,
body.zt-custom-checkout #payment_wrapper input[type="submit"] {
    width: 100% !important;
    height: 56px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #5c1be9 !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    cursor: pointer;
}

body.zt-custom-checkout #payment_wrapper #place_order:hover,
body.zt-custom-checkout #payment_wrapper button:hover,
body.zt-custom-checkout #payment_wrapper .button:hover,
body.zt-custom-checkout #payment_wrapper input[type="submit"]:hover {
    background: #7747db !important;
}

body.zt-custom-checkout #payment_wrapper .woocommerce-privacy-policy-text,
body.zt-custom-checkout #payment_wrapper .woocommerce-privacy-policy-text p,
body.zt-custom-checkout #payment_wrapper .woocommerce-terms-and-conditions-wrapper,
body.zt-custom-checkout #payment_wrapper .woocommerce-terms-and-conditions-wrapper p,
body.zt-custom-checkout #payment_wrapper .woocommerce-terms-and-conditions-wrapper label {
    color: #ffffff !important;
    line-height: 1.9 !important;
    font-size: 14px !important;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 992px) {
    body.zt-custom-checkout form.checkout.tr-checkout-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "customer"
            "order"
            "payment" !important;
    }

    body.zt-custom-checkout #payment_wrapper.tr-checkout-payment {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 576px) {
    body.zt-custom-checkout .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr !important;
    }

    body.zt-custom-checkout .woocommerce-billing-fields__field-wrapper .tr-col-half,
    body.zt-custom-checkout .woocommerce-billing-fields__field-wrapper .tr-col-full {
        grid-column: 1 / -1 !important;
    }

    body.zt-custom-checkout .section-title {
        font-size: 24px !important;
    }

    body.zt-custom-checkout .tr-billing-wrapper,
    body.zt-custom-checkout #order_review_wrapper,
    body.zt-custom-checkout #payment_wrapper {
        padding: 18px !important;
    }
}