/*
==================================================
ACCOUNT ORDERS
==================================================
*/

.sidv-account-orders{
    display:flex;
    flex-direction:column;
    gap:2rem;
}

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

.sidv-account-orders__table-wrapper,
.sidv-account-orders__empty{
    background:#FFFFFF;
    border:1px solid #E8EDF3;
    border-radius:20px;
    box-shadow:0 12px 30px rgba(15,23,42,.04);
}

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

.sidv-account-orders__header{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.sidv-account-orders__eyebrow{
    display:inline-flex;

    color:#F59E0B;

    font-size:.8rem;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.08em;
}

.sidv-account-orders__header h1{
    margin:0;

    color:#0D2137;

    font-size:2.3rem;
    font-weight:800;
}

.sidv-account-orders__header p{
    margin:0;

    color:#64748B;

    line-height:1.8;
}

/*
==================================================
TABLE WRAPPER
==================================================
*/

.sidv-account-orders__table-wrapper{
    overflow-x:auto;
}

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

.sidv-account-orders__table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}

.sidv-account-orders__table thead{
    background:#F8FAFC;
}

.sidv-account-orders__table th{
    padding:1.25rem 1.5rem;

    text-align:left;

    color:#64748B;

    font-size:.85rem;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.05em;
}

.sidv-account-orders__table td{
    padding:1.4rem 1.5rem;

    color:#334155;

    border-top:1px solid #EEF2F7;

    vertical-align:middle;
}

.sidv-account-orders__table tbody tr{
    transition:
        background .25s ease,
        transform .25s ease;
}

.sidv-account-orders__table tbody tr:hover,
.sidv-account-orders__table tbody tr.is-hover{
    background:#FAFBFC;
}

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

.sidv-order-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.45rem .9rem;

    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
}

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

.sidv-order-status--processing{
    background:#FEF3C7;
    color:#92400E;
}

.sidv-order-status--pending{
    background:#E2E8F0;
    color:#334155;
}

.sidv-order-status--failed,
.sidv-order-status--cancelled{
    background:#FEE2E2;
    color:#991B1B;
}

/*
==================================================
VIEW LINK
==================================================
*/

.sidv-account-orders__view{
    display:inline-flex;
    align-items:center;
    gap:.4rem;

    color:#F59E0B;

    font-weight:700;

    text-decoration:none;

    transition:color .25s ease;
}

.sidv-account-orders__view:hover{
    color:#D97706;
}

/*
==================================================
EMPTY
==================================================
*/

.sidv-account-orders__empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:1.5rem;

    padding:4rem;

    text-align:center;
}

.sidv-account-orders__empty-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:82px;
    height:82px;

    border-radius:50%;

    background:#FFF8E7;

    color:#F59E0B;
}

.sidv-account-orders__empty-icon i{
    width:38px;
    height:38px;
    stroke-width:2;
}

.sidv-account-orders__empty h3{
    margin:0;

    color:#0D2137;

    font-size:1.4rem;
    font-weight:700;
}

.sidv-account-orders__empty p{
    max-width:460px;

    margin:0;

    color:#64748B;

    line-height:1.8;
}

.sidv-account-orders__empty .sidv-btn{
    margin-top:.5rem;
}

/*
==================================================
MOTION
==================================================
*/

@media (prefers-reduced-motion:reduce){

    .sidv-account-orders__table tbody tr{
        transition:none;
    }

}

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

@media (max-width:768px){

    .sidv-account-orders__header h1{
        font-size:2rem;
    }

    .sidv-account-orders__empty{
        padding:2.5rem;
    }

    .sidv-account-orders__table{
        min-width:640px;
    }

}

/*
==================================================
EMPTY BUTTON
==================================================
*/

.sidv-account-orders__empty .sidv-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;

    min-width:220px;

    padding:1rem 2rem;

    border:none;
    border-radius:14px;

    background:#F59E0B;
    color:#FFFFFF !important;

    font-size:.95rem;
    font-weight:700;

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

    box-shadow:0 12px 24px rgba(245,158,11,.28);
}

.sidv-account-orders__empty .sidv-btn:hover,
.sidv-account-orders__empty .sidv-btn:focus{

    background:#D97706;

    color:#FFFFFF;

    text-decoration:none;

    transform:translateY(-2px);

    box-shadow:0 18px 36px rgba(245,158,11,.35);

}

.sidv-account-orders__empty .sidv-btn:active{

    transform:translateY(0);

}