.elementor-25 .elementor-element.elementor-element-3080d10{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-7a57129 *//* =========================================
   THANK YOU PAGE
========================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');


:root {

    --thank-bg:
        #f7f3ec;

    --thank-white:
        #ffffff;

    --thank-sage:
        #eef1e7;

    --thank-green:
        #315d39;

    --thank-green-dark:
        #23472b;

    --thank-green-soft:
        #dfe8d9;

    --thank-text:
        #111a22;

    --thank-muted:
        #676c6f;

    --thank-border:
        rgba(34,56,40,.09);

    --thank-shadow:
        0 20px 55px
        rgba(28,48,33,.08);

}


.tm-thanks-page,
.tm-thanks-page * {

    box-sizing:
        border-box;

}


.tm-thanks-page {

    min-height:
        100vh;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(223,232,217,.80),
            transparent 38%
        ),

        linear-gradient(
            180deg,
            #faf8f3,
            #f4efe7
        );

    color:
        var(--thank-text);

    font-family:
        "IBM Plex Sans Arabic",
        Arial,
        sans-serif;

    direction: rtl;

}


.tm-thanks-main {

    padding:
        70px 0 55px;

}


.tm-thanks-container {

    width:
        min(
            calc(100% - 32px),
            980px
        );

    margin-inline:
        auto;

}



/* =========================================
   SUCCESS ICON
========================================= */

.tm-success-icon {

    display: grid;

    place-items: center;

    width: 92px;

    height: 92px;

    margin:
        0 auto 24px;

    border:
        8px solid
        rgba(49,93,57,.09);

    border-radius:
        50%;

    background:
        var(--thank-green);

    color:
        white;

    box-shadow:
        0 14px 35px
        rgba(49,93,57,.20);

}


.tm-success-icon span {

    font-size: 46px;

    font-weight: 700;

    line-height: 1;

}



/* =========================================
   HEADING
========================================= */

.tm-thanks-heading {

    max-width: 680px;

    margin:
        0 auto 30px;

    text-align: center;

}


.tm-thanks-eyebrow {

    display:
        inline-flex;

    padding:
        7px 16px;

    border-radius:
        999px;

    background:
        var(--thank-green-soft);

    color:
        var(--thank-green-dark);

    font-size: 13px;

    font-weight: 700;

}


.tm-thanks-heading h1 {

    margin:
        14px 0 8px;

    font-size:
        clamp(
            38px,
            6vw,
            58px
        );

    line-height:
        1.15;

    letter-spacing:
        -1.5px;

}


.tm-thanks-heading h1 span {

    color:
        var(--thank-green);

}


.tm-thanks-heading p {

    margin: 0;

    color:
        var(--thank-muted);

    font-size: 17px;

    line-height: 1.8;

}



/* =========================================
   ORDER NUMBER
========================================= */

.tm-order-number-card {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    max-width: 750px;

    margin:
        0 auto 55px;

    padding:
        20px 24px;

    border:
        1px solid
        var(--thank-border);

    border-radius:
        20px;

    background:
        rgba(255,255,255,.84);

    box-shadow:
        var(--thank-shadow);

    backdrop-filter:
        blur(12px);

}


.tm-order-number-card
> div:first-child {

    display: flex;

    flex-direction: column;

}


.tm-order-number-card span {

    color:
        var(--thank-muted);

    font-size: 12px;

}


.tm-order-number-card strong {

    color:
        var(--thank-green-dark);

    font-size: 20px;

    direction: ltr;

}


.tm-order-status {

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        #f0f3ea;

    color:
        var(--thank-green-dark);

    font-size: 12px;

    font-weight: 700;

}


.tm-status-dot {

    width: 8px;

    height: 8px;

    border-radius:
        50%;

    background:
        #6f9a65;

}



/* =========================================
   NEXT STEPS
========================================= */

.tm-next-section {

    margin-bottom:
        55px;

}


.tm-section-title {

    margin-bottom:
        22px;

    text-align: center;

}


.tm-section-title > span {

    color:
        var(--thank-green);

    font-size: 13px;

    font-weight: 700;

}


.tm-section-title h2 {

    margin:
        3px 0 0;

    font-size:
        31px;

}


.tm-next-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 15px;

}


.tm-next-card {

    position: relative;

    padding:
        27px 22px 23px;

    overflow: hidden;

    border:
        1px solid
        var(--thank-border);

    border-radius:
        22px;

    background:
        rgba(255,255,255,.86);

    box-shadow:
        0 12px 35px
        rgba(28,45,32,.045);

    text-align: center;

}


.tm-step-number {

    position:
        absolute;

    top: 13px;

    left: 15px;

    color:
        rgba(49,93,57,.22);

    font-size: 12px;

    font-weight: 700;

}


.tm-step-icon {

    display: grid;

    place-items:
        center;

    width: 54px;

    height: 54px;

    margin:
        0 auto 13px;

    border-radius:
        17px;

    background:
        var(--thank-green-soft);

    color:
        var(--thank-green-dark);

    font-size: 23px;

}


.tm-next-card h3 {

    margin:
        0 0 5px;

    font-size: 18px;

}


.tm-next-card p {

    margin: 0;

    color:
        var(--thank-muted);

    font-size: 13px;

    line-height: 1.7;

}



/* =========================================
   SUMMARY
========================================= */

.tm-thank-summary {

    padding:
        30px;

    border:
        1px solid
        var(--thank-border);

    border-radius:
        27px;

    background:
        white;

    box-shadow:
        var(--thank-shadow);

}


.tm-summary-header {

    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap: 20px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        #eceeea;

}


.tm-summary-header span {

    color:
        var(--thank-green);

    font-size: 12px;

    font-weight: 700;

}


.tm-summary-header h2 {

    margin:
        2px 0 0;

    font-size: 24px;

}


.tm-cod-badge {

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        var(--thank-green-soft);

    color:
        var(--thank-green-dark) !important;

    white-space:
        nowrap;

}



/* PRODUCT */

.tm-product-row {

    display: grid;

    grid-template-columns:
        95px 1fr auto;

    align-items:
        center;

    gap: 17px;

    padding:
        22px 0;

    border-bottom:
        1px solid
        #eceeea;

}


.tm-product-thumb {

    width: 95px;

    height: 95px;

    overflow: hidden;

    border-radius:
        18px;

    background:
        #eee;

}


.tm-product-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.tm-product-copy strong,
.tm-product-copy span,
.tm-product-price strong,
.tm-product-price small {

    display: block;

}


.tm-product-copy strong {

    font-size: 17px;

}


.tm-product-copy span,
.tm-product-price small {

    color:
        var(--thank-muted);

    font-size: 12px;

}


.tm-product-price {

    text-align: left;

}


.tm-product-price strong {

    color:
        var(--thank-green);

    font-size: 18px;

}



/* DETAILS */

.tm-summary-details {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 10px;

    padding:
        20px 0;

    border-bottom:
        1px solid
        #eceeea;

}


.tm-summary-details div {

    padding:
        13px 15px;

    border-radius:
        14px;

    background:
        #f7f8f5;

}


.tm-summary-details span {

    display: block;

    margin-bottom:
        2px;

    color:
        var(--thank-muted);

    font-size: 11px;

}


.tm-summary-details strong {

    font-size: 14px;

}



/* TOTAL */

.tm-summary-total {

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap: 20px;

    padding-top:
        22px;

}


.tm-summary-total > div {

    display: flex;

    flex-direction:
        column;

}


.tm-summary-total > div span {

    font-weight: 700;

}


.tm-summary-total small {

    margin-top:
        2px;

    color:
        var(--thank-muted);

    font-size: 11px;

}


.tm-summary-total > strong {

    color:
        var(--thank-green);

    font-size: 29px;

}



/* =========================================
   NOTE
========================================= */

.tm-important-note {

    display: flex;

    align-items:
        center;

    gap: 15px;

    margin-top:
        18px;

    padding:
        19px 21px;

    border:
        1px solid
        rgba(49,93,57,.08);

    border-radius:
        18px;

    background:
        #edf1e7;

}


.tm-note-icon {

    display: grid;

    place-items:
        center;

    flex:
        0 0 42px;

    width: 42px;

    height: 42px;

    border-radius:
        14px;

    background:
        var(--thank-green);

    color: white;

    font-size: 21px;

    font-weight: 700;

}


.tm-important-note strong {

    font-size: 14px;

}


.tm-important-note p {

    margin:
        1px 0 0;

    color:
        var(--thank-muted);

    font-size: 12px;

}



/* =========================================
   FOOTER
========================================= */

.tm-thanks-footer {

    display: flex;

    justify-content:
        center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top:
        32px;

    color:
        var(--thank-muted);

    font-size: 11px;

}


.tm-thanks-footer span {

    display: flex;

    align-items:
        center;

    gap: 5px;

}



/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 767px) {

    .tm-thanks-main {

        padding:
            38px 0 35px;

    }


    .tm-thanks-container {

        width:
            calc(100% - 26px);

    }


    .tm-success-icon {

        width: 72px;

        height: 72px;

        margin-bottom:
            18px;

        border-width:
            6px;

    }


    .tm-success-icon span {

        font-size: 36px;

    }


    .tm-thanks-heading {

        margin-bottom:
            22px;

    }


    .tm-thanks-heading h1 {

        margin-top:
            10px;

        font-size: 36px;

    }


    .tm-thanks-heading p {

        font-size: 13px;

    }


    .tm-order-number-card {

        align-items:
            flex-start;

        margin-bottom:
            40px;

        padding:
            16px;

    }


    .tm-order-number-card strong {

        font-size: 16px;

    }


    .tm-order-status {

        padding:
            6px 9px;

        font-size: 9px;

    }


    .tm-section-title h2 {

        font-size: 25px;

    }


    .tm-next-grid {

        grid-template-columns:
            repeat(3,1fr);

        gap: 6px;

    }


    .tm-next-card {

        padding:
            22px 7px 15px;

        border-radius:
            16px;

    }


    .tm-step-icon {

        width: 40px;

        height: 40px;

        border-radius:
            12px;

        font-size: 17px;

    }


    .tm-step-number {

        top: 7px;

        left: 8px;

        font-size: 8px;

    }


    .tm-next-card h3 {

        font-size: 11px;

    }


    .tm-next-card p {

        font-size: 8px;

        line-height: 1.5;

    }


    .tm-thank-summary {

        padding:
            20px 15px;

        border-radius:
            22px;

    }


    .tm-summary-header h2 {

        font-size: 18px;

    }


    .tm-cod-badge {

        padding:
            5px 8px;

        font-size:
            8px !important;

    }


    .tm-product-row {

        grid-template-columns:
            72px 1fr auto;

        gap: 10px;

    }


    .tm-product-thumb {

        width: 72px;

        height: 72px;

        border-radius:
            13px;

    }


    .tm-product-copy strong {

        font-size: 12px;

    }


    .tm-product-price strong {

        font-size: 13px;

    }


    .tm-summary-details {

        grid-template-columns:
            repeat(3,1fr);

        gap: 5px;

    }


    .tm-summary-details div {

        padding:
            9px 6px;

        text-align: center;

    }


    .tm-summary-details span {

        font-size: 8px;

    }


    .tm-summary-details strong {

        font-size: 10px;

    }


    .tm-summary-total > div span {

        font-size: 12px;

    }


    .tm-summary-total small {

        font-size: 8px;

    }


    .tm-summary-total > strong {

        font-size: 22px;

    }


    .tm-important-note {

        align-items:
            flex-start;

        padding:
            15px;

    }


    .tm-note-icon {

        flex-basis: 36px;

        width: 36px;

        height: 36px;

    }


    .tm-important-note p {

        font-size: 10px;

    }


    .tm-thanks-footer {

        gap:
            7px 13px;

        font-size: 9px;

    }

}/* End custom CSS */