/* =========================================================
   TAJRIVO MARKET - MY ORDERS
   File: css/market-orders.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --orders-primary: #1677ff;
    --orders-primary-dark: #0b5ed7;
    --orders-primary-light: #eaf3ff;

    --orders-success: #16a34a;
    --orders-success-light: #ecfdf3;

    --orders-warning: #f59e0b;
    --orders-warning-light: #fff7e8;

    --orders-danger: #dc2626;
    --orders-danger-light: #fff1f2;

    --orders-purple: #8b5cf6;
    --orders-purple-light: #f5f3ff;

    --orders-bg: #f5f7fb;
    --orders-card: #ffffff;

    --orders-text: #111827;
    --orders-text-soft: #667085;
    --orders-text-muted: #98a2b3;

    --orders-border: #e5eaf1;
    --orders-border-dark: #d7dee9;

    --orders-shadow:
        0 10px 35px rgba(15, 23, 42, 0.06);

    --orders-shadow-hover:
        0 18px 45px rgba(15, 23, 42, 0.10);
}


/* =========================================================
   HIDDEN
========================================================= */

[hidden] {
    display: none !important;
}


/* =========================================================
   PAGE
========================================================= */

.market-orders-page {
    min-height: calc(100vh - 70px);

    padding-bottom: 60px;

    background:
        var(--orders-bg);
}


/* =========================================================
   PAGE LOADER
========================================================= */

.market-orders-loader {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 16px;

    background:
        #f5f7fb;
}


.market-orders-loader span {
    color:
        var(--orders-text-soft);

    font-size: 11px;

    font-weight: 700;
}


.market-orders-loader-spinner {
    width: 34px;

    height: 34px;

    border:
        3px solid #dce8f8;

    border-top-color:
        var(--orders-primary);

    border-radius:
        50%;

    animation:
        marketOrdersSpin .75s linear infinite;
}


@keyframes marketOrdersSpin {
    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   TOPBAR SHOP BUTTON
========================================================= */

.market-orders-shop-button {
    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        0 15px;

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

    border-radius:
        13px;

    background:
        #ffffff;

    color:
        var(--orders-text);

    font-size:
        10px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        .2s ease;
}


.market-orders-shop-button:hover {
    color:
        var(--orders-primary);

    border-color:
        #b8d5ff;

    background:
        #f8fbff;

    transform:
        translateY(-1px);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.market-orders-breadcrumb {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    color:
        var(--orders-text-muted);

    font-size:
        9px;

    font-weight:
        700;
}


.market-orders-breadcrumb a {
    color:
        var(--orders-primary);

    text-decoration:
        none;
}


.market-orders-breadcrumb a:hover {
    text-decoration:
        underline;
}


.market-orders-breadcrumb strong {
    color:
        var(--orders-text-soft);

    font-weight:
        800;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.market-orders-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;
}


.market-orders-heading h1 {
    margin:
        5px 0 6px;

    color:
        var(--orders-text);

    font-size:
        clamp(25px, 3vw, 34px);

    line-height:
        1.1;

    font-weight:
        900;

    letter-spacing:
        -.7px;
}


.market-orders-heading p {
    max-width:
        600px;

    margin:
        0;

    color:
        var(--orders-text-soft);

    font-size:
        11px;

    line-height:
        1.65;
}


.market-orders-refresh-button {
    min-width:
        108px;

    height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 15px;

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

    border-radius:
        13px;

    background:
        #ffffff;

    color:
        var(--orders-text);

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.market-orders-refresh-button:hover {
    color:
        var(--orders-primary);

    border-color:
        #b9d6ff;

    background:
        #f8fbff;
}


.market-orders-refresh-button:active {
    transform:
        scale(.98);
}


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

.market-orders-summary {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        13px;

    margin-bottom:
        20px;
}


.market-orders-stat-card {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-height:
        104px;

    padding:
        17px;

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

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 7px 25px rgba(15, 23, 42, .035);
}


.market-orders-stat-icon {
    flex:
        0 0 auto;

    width:
        47px;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    font-size:
        19px;
}


.market-orders-stat-icon.blue {
    background:
        var(--orders-primary-light);
}


.market-orders-stat-icon.orange {
    background:
        var(--orders-warning-light);
}


.market-orders-stat-icon.green {
    background:
        var(--orders-success-light);

    color:
        var(--orders-success);

    font-size:
        20px;

    font-weight:
        900;
}


.market-orders-stat-icon.purple {
    background:
        var(--orders-purple-light);

    color:
        var(--orders-purple);

    font-size:
        23px;

    font-weight:
        900;
}


.market-orders-stat-card>div:last-child {
    min-width:
        0;
}


.market-orders-stat-card span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--orders-text-soft);

    font-size:
        8px;

    font-weight:
        700;
}


.market-orders-stat-card strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--orders-text);

    font-size:
        20px;

    line-height:
        1;

    font-weight:
        900;
}


.market-orders-stat-card small {
    display:
        block;

    color:
        var(--orders-text-muted);

    font-size:
        7px;

    line-height:
        1.4;
}


/* =========================================================
   PANEL
========================================================= */

.market-orders-panel {
    padding:
        22px;

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

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        var(--orders-shadow);
}


.market-orders-panel-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        20px;
}


.market-orders-panel-header h2 {
    margin:
        5px 0 4px;

    color:
        var(--orders-text);

    font-size:
        19px;

    font-weight:
        900;

    letter-spacing:
        -.3px;
}


.market-orders-panel-header p {
    margin:
        0;

    color:
        var(--orders-text-soft);

    font-size:
        9px;
}


/* =========================================================
   CONTROLS
========================================================= */

.market-orders-controls {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        20px;
}


.market-orders-search {
    width:
        min(340px, 100%);

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        0 13px;

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

    border-radius:
        13px;

    background:
        #f9fbfd;

    transition:
        .2s ease;
}


.market-orders-search:focus-within {
    border-color:
        #9fc9ff;

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px rgba(22, 119, 255, .08);
}


.market-orders-search>span {
    flex:
        0 0 auto;

    font-size:
        14px;
}


.market-orders-search input {
    width:
        100%;

    min-width:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--orders-text);

    font-size:
        10px;

    font-weight:
        600;
}


.market-orders-search input::placeholder {
    color:
        #a6afbc;
}


.market-orders-filters {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    overflow-x:
        auto;

    padding-bottom:
        2px;

    scrollbar-width:
        none;
}


.market-orders-filters::-webkit-scrollbar {
    display:
        none;
}


.market-orders-filter {
    flex:
        0 0 auto;

    min-height:
        35px;

    padding:
        0 13px;

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

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--orders-text-soft);

    font-size:
        8px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.market-orders-filter:hover {
    border-color:
        #b8d5ff;

    color:
        var(--orders-primary);

    background:
        #f8fbff;
}


.market-orders-filter.active {
    border-color:
        var(--orders-primary);

    background:
        var(--orders-primary);

    color:
        #ffffff;
}


/* =========================================================
   STATES
========================================================= */

.market-orders-state {
    min-height:
        320px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        35px 20px;

    border:
        1px dashed #dce3ec;

    border-radius:
        18px;

    background:
        #fbfcfe;
}


.market-orders-state strong {
    margin-top:
        13px;

    color:
        var(--orders-text);

    font-size:
        14px;

    font-weight:
        900;
}


.market-orders-state>span {
    max-width:
        360px;

    margin-top:
        6px;

    color:
        var(--orders-text-soft);

    font-size:
        9px;

    line-height:
        1.6;
}


.market-orders-state-spinner {
    width:
        32px;

    height:
        32px;

    border:
        3px solid #e1e8f1;

    border-top-color:
        var(--orders-primary);

    border-radius:
        50%;

    animation:
        marketOrdersSpin .75s linear infinite;
}


.market-orders-state-icon,
.market-orders-empty-icon {
    width:
        68px;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--orders-primary-light);

    color:
        var(--orders-primary);

    font-size:
        27px;

    font-weight:
        900;
}


.market-orders-error .market-orders-state-icon {
    background:
        var(--orders-danger-light);

    color:
        var(--orders-danger);
}


.market-orders-error button,
.market-orders-empty-button {
    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        16px;

    padding:
        0 16px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--orders-primary);

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        800;

    text-decoration:
        none;

    cursor:
        pointer;
}


/* =========================================================
   ORDER LIST
========================================================= */

.market-orders-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


/* =========================================================
   ORDER CARD
   Generated by market-orders.js
========================================================= */

.market-order-card {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        82px minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        15px;

    padding:
        15px;

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

    border-radius:
        18px;

    background:
        #ffffff;

    cursor:
        pointer;

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


.market-order-card:hover {
    border-color:
        #bfd9ff;

    box-shadow:
        var(--orders-shadow-hover);

    transform:
        translateY(-2px);
}


.market-order-image {
    width:
        82px;

    height:
        82px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #edf0f4;

    border-radius:
        15px;

    background:
        #f7f9fc;
}


.market-order-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.market-order-image-placeholder {
    color:
        #aeb8c5;

    font-size:
        27px;
}


.market-order-card-content {
    min-width:
        0;
}


.market-order-card-top {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        7px;
}


.market-order-card-title {
    min-width:
        0;

    overflow:
        hidden;

    color:
        var(--orders-text);

    font-size:
        12px;

    font-weight:
        900;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.market-order-badge {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        5px 8px;

    border-radius:
        999px;

    font-size:
        7px;

    font-weight:
        900;
}


.market-order-badge.confirmed {
    background:
        var(--orders-primary-light);

    color:
        var(--orders-primary);
}


.market-order-badge.preparing {
    background:
        var(--orders-warning-light);

    color:
        #b66b00;
}


.market-order-badge.shipped {
    background:
        var(--orders-purple-light);

    color:
        var(--orders-purple);
}


.market-order-badge.delivered {
    background:
        var(--orders-success-light);

    color:
        var(--orders-success);
}


.market-order-badge.review,
.market-order-badge.manual_review {
    background:
        var(--orders-warning-light);

    color:
        #b66b00;
}


.market-order-badge.pending_payment {
    background:
        #f2f4f7;

    color:
        #667085;
}


.market-order-badge.payment_failed,
.market-order-badge.failed {
    background:
        var(--orders-danger-light);

    color:
        var(--orders-danger);
}


.market-order-card-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        5px 12px;

    color:
        var(--orders-text-soft);

    font-size:
        8px;
}


.market-order-card-meta span {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;
}


.market-order-card-recipient {
    margin-top:
        7px;

    overflow:
        hidden;

    color:
        var(--orders-text-soft);

    font-size:
        8px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.market-order-card-side {
    min-width:
        115px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        8px;
}


.market-order-card-price {
    color:
        var(--orders-text);

    font-size:
        15px;

    font-weight:
        900;
}


.market-order-card-view {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--orders-primary);

    font-size:
        8px;

    font-weight:
        800;
}


.market-order-card-view span {
    font-size:
        13px;
}


/* =========================================================
   HELP
========================================================= */

.market-orders-help {
    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        17px;

    padding:
        17px 19px;

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

    border-radius:
        18px;

    background:
        #ffffff;
}


.market-orders-help-icon {
    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        var(--orders-primary-light);

    font-size:
        20px;
}


.market-orders-help strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--orders-text);

    font-size:
        10px;

    font-weight:
        900;
}


.market-orders-help span {
    color:
        var(--orders-text-soft);

    font-size:
        8px;
}


.market-orders-help a {
    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 14px;

    border:
        1px solid #bdd8ff;

    border-radius:
        11px;

    background:
        #f7fbff;

    color:
        var(--orders-primary);

    font-size:
        8px;

    font-weight:
        800;

    text-decoration:
        none;
}


/* =========================================================
   MODAL
========================================================= */

.market-order-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        22px;
}


.market-order-modal-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(15, 23, 42, .56);

    backdrop-filter:
        blur(5px);
}


.market-order-modal-panel {
    position:
        relative;

    z-index:
        2;

    width:
        min(760px, 100%);

    max-height:
        min(880px, 92vh);

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid rgba(255, 255, 255, .5);

    border-radius:
        25px;

    background:
        #ffffff;

    box-shadow:
        0 30px 90px rgba(15, 23, 42, .25);

    animation:
        marketOrderModalIn .22s ease both;
}


@keyframes marketOrderModalIn {

    from {
        opacity:
            0;

        transform:
            translateY(10px) scale(.985);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0) scale(1);
    }

}


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

.market-order-modal-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        21px 22px 16px;

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


.market-order-modal-header h2 {
    margin:
        5px 0 3px;

    color:
        var(--orders-text);

    font-size:
        20px;

    font-weight:
        900;

    letter-spacing:
        -.4px;
}


.market-order-modal-header p {
    margin:
        0;

    color:
        var(--orders-text-soft);

    font-size:
        8px;
}


.market-order-modal-close {
    flex:
        0 0 auto;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        11px;

    background:
        #f7f9fc;

    color:
        var(--orders-text-soft);

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.market-order-modal-close:hover {
    color:
        var(--orders-danger);

    border-color:
        #fecdd3;

    background:
        #fff1f2;
}


/* =========================================================
   STATUS CARD
========================================================= */

.market-order-status-card {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin:
        17px 22px 0;

    padding:
        14px;

    border:
        1px solid #cfe2ff;

    border-radius:
        16px;

    background:
        #f7fbff;
}


.market-order-status-icon {
    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        var(--orders-primary-light);

    font-size:
        21px;
}


.market-order-status-card>div:last-child {
    min-width:
        0;
}


.market-order-status-card span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--orders-primary);

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .5px;
}


.market-order-status-card strong {
    display:
        block;

    color:
        var(--orders-text);

    font-size:
        12px;

    font-weight:
        900;
}


.market-order-status-card p {
    margin:
        3px 0 0;

    color:
        var(--orders-text-soft);

    font-size:
        8px;

    line-height:
        1.5;
}


/* STATUS THEMES */

.market-order-status-card[data-status="preparing"] {
    border-color:
        #fde5a9;

    background:
        #fffcf5;
}


.market-order-status-card[data-status="shipped"] {
    border-color:
        #ddd4fe;

    background:
        #faf8ff;
}


.market-order-status-card[data-status="delivered"] {
    border-color:
        #bbf7d0;

    background:
        #f7fff9;
}


.market-order-status-card[data-status="manual_review"] {
    border-color:
        #fde5a9;

    background:
        #fffcf5;
}


/* =========================================================
   MODAL BODY
========================================================= */

.market-order-modal-body {
    overflow-y:
        auto;

    padding:
        17px 22px 22px;

    scrollbar-width:
        thin;

    scrollbar-color:
        #ccd5df transparent;
}


/* =========================================================
   DETAIL SECTIONS
========================================================= */

.market-order-detail-section {
    margin-bottom:
        13px;

    padding:
        16px;

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

    border-radius:
        17px;

    background:
        #ffffff;
}


.market-order-detail-heading {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        14px;
}


.market-order-detail-heading>span {
    flex:
        0 0 auto;

    width:
        37px;

    height:
        37px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        var(--orders-primary-light);

    font-size:
        16px;
}


.market-order-detail-heading strong {
    display:
        block;

    color:
        var(--orders-text);

    font-size:
        10px;

    font-weight:
        900;
}


.market-order-detail-heading small {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--orders-text-muted);

    font-size:
        7px;
}


/* =========================================================
   PRODUCTS
========================================================= */

.market-order-products {
    display:
        flex;

    flex-direction:
        column;
}


.market-order-product {
    display:
        grid;

    grid-template-columns:
        60px minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        11px;

    padding:
        11px 0;

    border-top:
        1px solid var(--orders-border);
}


.market-order-product:first-child {
    padding-top:
        0;

    border-top:
        0;
}


.market-order-product:last-child {
    padding-bottom:
        0;
}


.market-order-product-image {
    width:
        60px;

    height:
        60px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        12px;

    background:
        #f7f9fc;
}


.market-order-product-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.market-order-product-info {
    min-width:
        0;
}


.market-order-product-info strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--orders-text);

    font-size:
        9px;

    font-weight:
        900;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.market-order-product-info span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--orders-text-soft);

    font-size:
        7px;
}


.market-order-product-options {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        4px;

    margin-top:
        6px;
}


.market-order-product-options small {
    padding:
        3px 6px;

    border-radius:
        999px;

    background:
        #f2f4f7;

    color:
        #667085;

    font-size:
        6px;

    font-weight:
        700;
}


.market-order-product-price {
    text-align:
        right;

    color:
        var(--orders-text);

    font-size:
        10px;

    font-weight:
        900;
}


/* =========================================================
   DETAIL GRID
========================================================= */

.market-order-detail-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        10px;
}


.market-order-detail-grid>div {
    min-width:
        0;

    padding:
        10px 11px;

    border-radius:
        11px;

    background:
        #f8fafc;
}


.market-order-detail-grid>div.full {
    grid-column:
        1 / -1;
}


.market-order-detail-grid span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--orders-text-muted);

    font-size:
        6.5px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .4px;
}


.market-order-detail-grid strong {
    display:
        block;

    overflow-wrap:
        anywhere;

    color:
        var(--orders-text);

    font-size:
        8px;

    line-height:
        1.5;

    font-weight:
        800;
}


/* =========================================================
   PAYMENT SUMMARY
========================================================= */

.market-order-payment-summary {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.market-order-payment-summary>div {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        8px 2px;

    color:
        var(--orders-text-soft);

    font-size:
        8px;
}


.market-order-payment-summary strong {
    color:
        var(--orders-text);

    font-size:
        9px;

    font-weight:
        900;
}


.market-order-payment-summary .total {
    margin-top:
        5px;

    padding-top:
        13px;

    border-top:
        1px solid var(--orders-border);
}


.market-order-payment-summary .total span {
    color:
        var(--orders-text);

    font-size:
        10px;

    font-weight:
        900;
}


.market-order-payment-summary .total strong {
    color:
        var(--orders-primary);

    font-size:
        15px;
}


/* =========================================================
   ORDER META
========================================================= */

.market-order-meta {
    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap:
        9px;

    padding:
        14px;

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

    border-radius:
        15px;

    background:
        #f8fafc;
}


.market-order-meta>div {
    min-width:
        0;
}


.market-order-meta span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--orders-text-muted);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        .4px;
}


.market-order-meta strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--orders-text);

    font-size:
        7.5px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   MODAL FOOTER
========================================================= */

.market-order-modal-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

    padding:
        14px 22px 17px;

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

    background:
        #ffffff;
}


.market-order-support-button,
.market-order-done-button {
    min-width:
        105px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    font-size:
        9px;

    font-weight:
        900;

    text-decoration:
        none;
}


.market-order-support-button {
    border:
        1px solid var(--orders-border);

    background:
        #ffffff;

    color:
        var(--orders-text-soft);
}


.market-order-done-button {
    border:
        0;

    background:
        var(--orders-primary);

    color:
        #ffffff;

    cursor:
        pointer;
}


.market-order-done-button:hover {
    background:
        var(--orders-primary-dark);
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1100px) {

    .market-orders-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .market-orders-controls {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .market-orders-search {
        width:
            100%;
    }


    .market-orders-filters {
        width:
            100%;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 720px) {

    .market-orders-page {
        padding-bottom:
            35px;
    }


    .market-orders-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            14px;
    }


    .market-orders-heading h1 {
        font-size:
            25px;
    }


    .market-orders-heading p {
        font-size:
            10px;
    }


    .market-orders-refresh-button {
        min-width:
            0;

        width:
            100%;
    }


    .market-orders-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            9px;
    }


    .market-orders-stat-card {
        min-height:
            94px;

        gap:
            9px;

        padding:
            13px;
    }


    .market-orders-stat-icon {
        width:
            40px;

        height:
            40px;

        border-radius:
            12px;

        font-size:
            16px;
    }


    .market-orders-stat-card strong {
        font-size:
            17px;
    }


    .market-orders-stat-card small {
        display:
            none;
    }


    .market-orders-panel {
        padding:
            15px;

        border-radius:
            18px;
    }


    .market-orders-panel-header {
        margin-bottom:
            15px;
    }


    .market-order-card {
        grid-template-columns:
            68px minmax(0, 1fr);

        gap:
            11px;

        padding:
            12px;
    }


    .market-order-image {
        width:
            68px;

        height:
            68px;

        border-radius:
            13px;
    }


    .market-order-card-side {
        grid-column:
            1 / -1;

        width:
            100%;

        min-width:
            0;

        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            space-between;

        padding-top:
            10px;

        border-top:
            1px solid var(--orders-border);
    }


    .market-order-card-price {
        font-size:
            13px;
    }


    .market-orders-help {
        grid-template-columns:
            auto minmax(0, 1fr);
    }


    .market-orders-help a {
        grid-column:
            1 / -1;

        width:
            100%;
    }


    .market-order-modal {
        padding:
            9px;
    }


    .market-order-modal-panel {
        max-height:
            96vh;

        border-radius:
            20px;
    }


    .market-order-modal-header {
        padding:
            17px;
    }


    .market-order-status-card {
        margin:
            13px 17px 0;
    }


    .market-order-modal-body {
        padding:
            14px 17px 18px;
    }


    .market-order-detail-section {
        padding:
            13px;
    }


    .market-order-detail-grid {
        grid-template-columns:
            1fr;
    }


    .market-order-detail-grid>div.full {
        grid-column:
            auto;
    }


    .market-order-meta {
        grid-template-columns:
            1fr;
    }


    .market-order-modal-footer {
        padding:
            13px 17px 15px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .market-orders-summary {
        grid-template-columns:
            1fr 1fr;
    }


    .market-orders-stat-card {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .market-orders-shop-button {
        width:
            42px;

        min-width:
            42px;

        padding:
            0;

        font-size:
            0;
    }


    .market-orders-shop-button span {
        font-size:
            16px;
    }


    .market-order-card-top {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .market-order-product {
        grid-template-columns:
            52px minmax(0, 1fr);
    }


    .market-order-product-image {
        width:
            52px;

        height:
            52px;
    }


    .market-order-product-price {
        grid-column:
            2;

        text-align:
            left;
    }


    .market-order-modal-footer {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;
    }


    .market-order-support-button,
    .market-order-done-button {
        width:
            100%;

        min-width:
            0;
    }

}