.elementor-208 .elementor-element.elementor-element-4810f25{--display:flex;}.elementor-208 .elementor-element.elementor-element-65d9cd2{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );}.elementor-208 .elementor-element.elementor-element-2c1670d{text-align:center;}.elementor-208 .elementor-element.elementor-element-2c1670d img{border-radius:12px 12px 12px 12px;}.elementor-208 .elementor-element.elementor-element-5a3c076{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-40eeb07 *//* =========================================================
   ORIVEX - WOOCOMMERCE CHECKOUT
   RTL / ELEMENTOR
   3 COLUMN PROFESSIONAL LAYOUT
   ========================================================= */


/* =========================================================
   01 - VARIABLES & BASE
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 .woocommerce {

    --primary: #b5124b;
    --primary-dark: #8f0d3b;
    --primary-light: #fff3f7;

    --text: #202638;
    --muted: #7b8290;

    --border: #e1e5ec;
    --input-border: #d5dae3;
    --input-bg: #fafbfc;

    direction: rtl;
    font-family: inherit;
}


/* =========================================================
   02 - MAIN CHECKOUT GRID
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout {

    width: 100% !important;
    max-width: 1250px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: grid !important;

    /*
       ترتیب ستون‌ها از چپ به راست در Grid:

       سفارش شما
       توضیحات تکمیلی
       جزئیات صورتحساب

       در صفحه RTL نتیجه می‌شود:

       راست  = جزئیات صورتحساب
       وسط   = توضیحات تکمیلی
       چپ    = سفارش شما
    */

    grid-template-columns:
        minmax(320px, 1.10fr)
        minmax(260px, .85fr)
        minmax(360px, 1.00fr) !important;

    grid-template-areas:
        "order additional billing" !important;

    gap: 24px !important;

    /*
       بسیار مهم:
       باعث می‌شود کارت‌های سفارش و صورتحساب
       در یک ارتفاع قرار بگیرند.
    */

    align-items: stretch !important;

    direction: ltr;

    box-sizing: border-box;
}


/* =========================================================
   03 - REMOVE WOOCOMMERCE INNER COLUMNS
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout #customer_details,
.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout #customer_details .col-1,
.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout #customer_details .col-2 {

    display: contents !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}


/* =========================================================
   04 - BILLING CARD
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-billing-fields {

    grid-area: billing !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 28px 30px !important;

    background: #ffffff !important;

    border: 1px solid var(--border) !important;

    border-radius: 16px !important;

    box-shadow:
        0 12px 35px rgba(25, 30, 55, .07) !important;

    box-sizing: border-box !important;

    direction: rtl;

    align-self: stretch !important;
}


/* =========================================================
   05 - ADDITIONAL INFORMATION CARD
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-additional-fields {

    grid-area: additional !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 28px 25px !important;

    background: #ffffff !important;

    border: 1px solid var(--border) !important;

    border-radius: 16px !important;

    box-shadow:
        0 12px 35px rgba(25, 30, 55, .07) !important;

    box-sizing: border-box !important;

    direction: rtl;

    align-self: start !important;
}


/* =========================================================
   06 - ORDER CARD
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#order_review {

    grid-area: order !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 28px 25px !important;

    background: #ffffff !important;

    border: 1px solid var(--border) !important;

    border-radius: 16px !important;

    box-shadow:
        0 12px 35px rgba(25, 30, 55, .07) !important;

    box-sizing: border-box !important;

    direction: rtl;

    align-self: stretch !important;
}


/* =========================================================
   07 - ORDER TITLE
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#order_review_heading {

    display: none !important;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#order_review::before {

    content: "سفارش شما";

    display: block;

    margin: 0 0 25px;

    padding-bottom: 13px;

    border-bottom: 1px solid var(--border);

    color: var(--text);

    font-size: 19px;

    font-weight: 800;

    line-height: 1.5;

    position: relative;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#order_review::after {

    content: "";

    display: block;

    width: 48px;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--primary),
        #e85b8b
    );

    border-radius: 20px;

    position: absolute;

    right: 25px;

    top: 67px;
}


/* =========================================================
   08 - BILLING / ADDITIONAL TITLES
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-billing-fields h3,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-additional-fields h3 {

    position: relative;

    margin: 0 0 25px !important;

    padding: 0 0 13px !important;

    border-bottom: 1px solid var(--border);

    color: var(--text);

    font-size: 19px;

    font-weight: 800;

    line-height: 1.5;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-billing-fields h3::after,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-additional-fields h3::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: -1px;

    width: 48px;

    height: 3px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        var(--primary),
        #e85b8b
    );
}


/* =========================================================
   09 - BILLING FIELDS ONE COLUMN
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-billing-fields
.form-row,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-billing-fields
.form-row.form-row-first,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-billing-fields
.form-row.form-row-last {

    width: 100% !important;

    max-width: 100% !important;

    float: none !important;

    clear: both !important;

    display: block !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   10 - FORM ROW
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row {

    margin-bottom: 17px !important;

    padding: 0 !important;
}


/* =========================================================
   11 - LABELS
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row label {

    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.7;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row label .required {

    color: var(--primary);

    text-decoration: none;
}


/* =========================================================
   12 - INPUTS
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row input.input-text,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row select,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row textarea {

    width: 100% !important;

    max-width: 100% !important;

    min-height: 48px;

    padding: 11px 14px;

    background: var(--input-bg);

    border: 1px solid var(--input-border);

    border-radius: 10px;

    color: var(--text);

    font-family: inherit;

    font-size: 14px;

    font-weight: 500;

    outline: none;

    box-shadow: none;

    box-sizing: border-box;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* =========================================================
   13 - INPUT FOCUS
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row input.input-text:focus,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row select:focus,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row textarea:focus {

    background: #ffffff;

    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(181, 18, 75, .08);
}


/* =========================================================
   14 - PLACEHOLDER
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row input::placeholder,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.form-row textarea::placeholder {

    color: #a3a8b3;

    opacity: 1;
}


/* =========================================================
   15 - ADDITIONAL TEXTAREA
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-additional-fields textarea {

    width: 100% !important;

    min-height: 145px !important;

    resize: vertical;

    line-height: 1.9;
}


/* =========================================================
   16 - SELECT2
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.select2-container {

    width: 100% !important;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.select2-selection--single {

    height: 48px !important;

    background: var(--input-bg) !important;

    border: 1px solid var(--input-border) !important;

    border-radius: 10px !important;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.select2-selection__rendered {

    height: 46px !important;

    line-height: 46px !important;

    padding-right: 14px !important;

    padding-left: 35px !important;

    color: var(--text) !important;

    font-family: inherit !important;
}


/* =========================================================
   17 - ORDER TABLE
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-checkout-review-order-table {

    width: 100% !important;

    margin: 0 0 20px !important;

    border-collapse: separate;

    border-spacing: 0;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-checkout-review-order-table th,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-checkout-review-order-table td {

    padding: 13px 11px;

    border-bottom: 1px solid var(--border);

    color: var(--text);

    font-size: 13px;

    vertical-align: middle;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-checkout-review-order-table thead th {

    background: #f8f9fc;

    font-weight: 800;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-checkout-review-order-table tr:last-child th,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-checkout-review-order-table tr:last-child td {

    border-bottom: 0;
}


/* =========================================================
   18 - TOTAL
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-checkout-review-order-table
.order-total th,

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-checkout-review-order-table
.order-total td {

    background: var(--primary-light);

    color: var(--primary-dark);

    font-weight: 800;

    font-size: 14px;
}


/* =========================================================
   19 - PAYMENT
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#payment {

    margin-top: 18px;

    padding: 17px;

    background: #fafbfc;

    border: 1px solid var(--border);

    border-radius: 12px;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#payment ul.payment_methods {

    margin: 0;

    padding: 0;

    border: 0;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#payment ul.payment_methods li {

    list-style: none;

    padding: 9px 0;
}


/* =========================================================
   20 - PAYMENT BOX
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#payment .payment_box {

    margin: 10px 0 0;

    padding: 12px;

    background: #f1f3f7;

    border-radius: 9px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   21 - PRIVACY
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-privacy-policy-text {

    margin: 0 0 12px;

    color: var(--muted);

    font-size: 11px;

    line-height: 2;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-privacy-policy-text a {

    color: var(--primary);

    font-weight: 700;
}


/* =========================================================
   22 - PLACE ORDER BUTTON
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#place_order {

    width: 100% !important;

    min-height: 53px;

    margin-top: 8px;

    padding: 13px 20px;

    border: 0;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(181, 18, 75, .20);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
#place_order:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(181, 18, 75, .28);
}


/* =========================================================
   23 - COUPON
   ========================================================= */

.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.woocommerce-form-coupon-toggle {

    width: 100%;

    margin-bottom: 0;
}


.elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
.checkout_coupon {

    width: 100%;

    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 12px;
}


/* =========================================================
   24 - TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout {

        grid-template-columns:
            minmax(280px, 1fr)
            minmax(250px, .9fr)
            minmax(300px, 1fr) !important;

        gap: 18px !important;
    }

}


/* =========================================================
   25 - TABLET PORTRAIT
   ========================================================= */

@media (max-width: 800px) {

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout {

        grid-template-columns: 1fr 1fr !important;

        grid-template-areas:

            "billing billing"

            "additional order" !important;

        align-items: start !important;

        direction: ltr;
    }


    /*
       در تبلت دیگر ارتفاع اجباری نیست
       تا محتوا طبیعی نمایش داده شود.
    */

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    .woocommerce-billing-fields,

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    #order_review {

        height: auto !important;

        min-height: 0 !important;

        align-self: start !important;
    }

}


/* =========================================================
   26 - MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout {

        display: grid !important;

        grid-template-columns: 1fr !important;

        grid-template-areas:

            "billing"

            "additional"

            "order" !important;

        gap: 16px !important;

        align-items: start !important;

        direction: ltr;
    }


    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    .woocommerce-billing-fields,

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    .woocommerce-additional-fields,

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    #order_review {

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        padding: 22px 20px !important;

        border-radius: 14px !important;

        align-self: start !important;
    }


    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    .woocommerce-billing-fields h3,

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    .woocommerce-additional-fields h3,

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    #order_review::before {

        font-size: 18px;
    }


    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    #order_review::after {

        right: 20px;

        top: 62px;
    }

}


/* =========================================================
   27 - SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    .woocommerce-billing-fields,

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    .woocommerce-additional-fields,

    .elementor-208 .elementor-element.elementor-element-40eeb07 form.woocommerce-checkout
    #order_review {

        padding: 18px !important;

        border-radius: 12px !important;
    }

}/* End custom CSS */