.elementor-41984 .elementor-element.elementor-element-e911ec9{--display:flex;--min-height:255px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.2;--border-radius:0px 0px 60px 60px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:100px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-41984 .elementor-element.elementor-element-e911ec9:not(.elementor-motion-effects-element-type-background), .elementor-41984 .elementor-element.elementor-element-e911ec9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E7E7FF;background-image:url("https://otlink.web-preview.online/wp-content/uploads/2026/09/banner-background-image-scaled.jpg");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-41984 .elementor-element.elementor-element-e911ec9::before, .elementor-41984 .elementor-element.elementor-element-e911ec9 > .elementor-background-video-container::before, .elementor-41984 .elementor-element.elementor-element-e911ec9 > .e-con-inner > .elementor-background-video-container::before, .elementor-41984 .elementor-element.elementor-element-e911ec9 > .elementor-background-slideshow::before, .elementor-41984 .elementor-element.elementor-element-e911ec9 > .e-con-inner > .elementor-background-slideshow::before, .elementor-41984 .elementor-element.elementor-element-e911ec9 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-41984 .elementor-element.elementor-element-b784ecb{text-align:center;}.elementor-41984 .elementor-element.elementor-element-b784ecb .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:50px;font-weight:800;color:#FFFFFF;}.elementor-41984 .elementor-element.elementor-element-17266f45{--display:flex;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-41984 .elementor-element.elementor-element-e911ec9{--min-height:260px;}.elementor-41984 .elementor-element.elementor-element-e911ec9:not(.elementor-motion-effects-element-type-background), .elementor-41984 .elementor-element.elementor-element-e911ec9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:top center;}}@media(max-width:767px){.elementor-41984 .elementor-element.elementor-element-e911ec9{--min-height:210px;--overlay-opacity:0.2;--border-radius:0px 0px 25px 25px;--padding-top:150px;--padding-bottom:50px;--padding-left:15px;--padding-right:15px;}.elementor-41984 .elementor-element.elementor-element-e911ec9:not(.elementor-motion-effects-element-type-background), .elementor-41984 .elementor-element.elementor-element-e911ec9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:bottom left;}.elementor-41984 .elementor-element.elementor-element-b784ecb .elementor-heading-title{font-size:35px;}}/* Start custom CSS for shortcode, class: .elementor-element-74c81da */.totl-invoice-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 8px 14px;

    border-radius: 7px;

    background: #f2f8df;

    color: #6d9300 !important;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none !important;

    white-space: nowrap;

    transition: all 0.2s ease;
}

.totl-invoice-button:hover {
    background: #8cc500;

    color: #ffffff !important;

    transform: translateY(-1px);
}/* End custom CSS */
/* Start custom CSS *//* ============================================================
   TOTL ORDER DETAILS
   ============================================================ */

.totl-order-details {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: inherit;
    color: #1f2937;
}


/* ============================================================
   HEADER
   ============================================================ */

.totl-order-details-header {
    margin-bottom: 30px;
}

.totl-back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.totl-back-button:hover {
    color: #111827;
}

.totl-order-details-header h2 {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: #111827;
}

.totl-order-date {
    margin: 0;
    color: #64748b;
    font-size: 15px;
}


/* ============================================================
   ORDER SUMMARY
   ============================================================ */

.totl-order-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.totl-order-summary-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.totl-order-summary-item strong {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.totl-order-summary-item > span:not(.order-status) {
    color: #111827;
    font-size: 16px;
    font-weight: 600;
}


/* ============================================================
   ORDER STATUS
   ============================================================ */

.order-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.order-status.completed {
    background: #dcfce7;
    color: #166534;
}

.order-status.processing {
    background: #dbeafe;
    color: #1d4ed8;
}

.order-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.order-status.on-hold {
    background: #fef3c7;
    color: #92400e;
}

.order-status.cancelled,
.order-status.failed {
    background: #fee2e2;
    color: #991b1b;
}

.order-status.refunded {
    background: #f3e8ff;
    color: #7e22ce;
}


/* ============================================================
   ORDER ITEMS
   ============================================================ */

.totl-order-items {
    margin-bottom: 25px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.totl-order-items h3,
.totl-address h3 {
    margin: 0 0 20px;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
}


/* ============================================================
   ITEMS TABLE
   ============================================================ */

.totl-order-items-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: 0;
}

.totl-order-items-table th {
    padding: 12px 15px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.totl-order-items-table td {
    padding: 18px 15px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    font-size: 14px;
    vertical-align: middle;
}

.totl-order-items-table tbody tr:last-child td {
    border-bottom: 0;
}

.totl-order-items-table td strong {
    color: #111827;
    font-weight: 600;
}


/* Align numeric columns */

.totl-order-items-table th:nth-child(2),
.totl-order-items-table th:nth-child(3),
.totl-order-items-table th:nth-child(4),
.totl-order-items-table td:nth-child(2),
.totl-order-items-table td:nth-child(3),
.totl-order-items-table td:nth-child(4) {
    text-align: right;
}


/* ============================================================
   ORDER TOTALS
   ============================================================ */

.totl-order-totals {
    width: 100%;
    max-width: 500px;
    margin: 0 0 30px auto;
    padding: 24px 25px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.totl-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 10px 0;
    color: #64748b;
    font-size: 14px;
}

.totl-total-row strong {
    color: #334155;
    font-weight: 600;
}

.totl-grand-total {
    margin-top: 12px;
    padding-top: 18px;
    border-top: 2px solid #e5e7eb;
    color: #111827;
    font-size: 18px;
}

.totl-grand-total strong {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}


/* ============================================================
   BILLING / SHIPPING
   ============================================================ */

.totl-order-addresses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.totl-address {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.totl-address address {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
    font-style: normal;
}

.totl-address p {
    margin: 12px 0 0;
    color: #475569;
    font-size: 14px;
}

.totl-address p strong {
    color: #111827;
}


/* ============================================================
   ORDER HISTORY BUTTON
   ============================================================ */

.totl-view-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    background: #111827;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.totl-view-order-button:hover {
    background: #000000;
    color: #ffffff !important;
    transform: translateY(-1px);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .totl-order-details {
        margin: 25px auto;
        padding: 0 15px;
    }

    .totl-order-details-header h2 {
        font-size: 25px;
    }


    /* Summary */

    .totl-order-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    /* Order items */

    .totl-order-items {
        padding: 18px 15px;
        overflow: hidden;
    }

    .totl-order-items h3 {
        font-size: 17px;
    }


    /* Turn table into cards */

    .totl-order-items-table,
    .totl-order-items-table thead,
    .totl-order-items-table tbody,
    .totl-order-items-table tr,
    .totl-order-items-table td {
        display: block;
        width: 100%;
    }

    .totl-order-items-table thead {
        display: none;
    }

    .totl-order-items-table tr {
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #ffffff;
    }

    .totl-order-items-table tr:last-child {
        margin-bottom: 0;
    }

    .totl-order-items-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 8px 0;
        border: 0;
        text-align: right !important;
    }

    .totl-order-items-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        text-align: left;
    }


    /* Totals */

    .totl-order-totals {
        max-width: none;
        margin-bottom: 20px;
        padding: 20px;
    }


    /* Addresses */

    .totl-order-addresses {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .totl-address {
        padding: 20px;
    }

}/* End custom CSS */