.purchase-page {
    width:100%;
    max-width:600px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:10px;
}


/* HEADER */

.purchase-header {
    background:#1a1a1a;
    padding:18px;
    border-radius:12px;
}

.purchase-title {
    font-size:28px;
    font-weight:bold;
}

.purchase-subtitle {
    color:#aaa;
    font-size:14px;
    margin-top:5px;
}


/* CARDS */

.purchase-card {
    background:#1a1a1a;
    padding:18px;
    border-radius:12px;
}

.purchase-content {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.purchase-section-title {
    color:#C10050;
    font-weight:bold;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.08em;
    margin-bottom:12px;
}


/* OWNED */

.purchase-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#222;
    padding:10px;
    border-radius:8px;
    margin-bottom:8px;
}

.purchase-item {
    display:flex;
    align-items:center;
    gap:12px;
}

.purchase-thumb {
    width:90px;
    height:55px;
    overflow:hidden;
    border-radius:6px;
}

.purchase-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.purchase-info {
    display:flex;
    flex-direction:column;
}

.purchase-info strong {
    color:white;
}

.purchase-info span {
    color:#aaa;
    font-size:13px;
}


.purchase-button {
    background:#C10050;
    color:white;
    text-decoration:none;
    padding:7px 14px;
    border-radius:6px;
    font-size:14px;
    box-sizing:border-box;

}

.purchase-button:hover {
    background:#e00062;
}


.purchase-button-pending {
    background:#ffc107;
    color:#000;
}

.purchase-button-pending:hover {
    background:#ffd54f;
}


/* MENU */

.purchase-menu-wrapper {
    background:#1a1a1a;
    border-radius:12px;
    padding:10px;
}

.purchase-menu {
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
}

.purchase-menu::-webkit-scrollbar {
    display:none;
}

.purchase-menu a {
    flex-shrink:0;
    background:#2a2a2a;
    padding:8px 14px;
    border-radius:8px;
    color:#ddd;
    text-decoration:none;
    font-size:13px;
}

.purchase-menu a.active {
    background:#C10050;
    color:white;
}


/* ORDER TABLE */

.purchase-history-header,
.purchase-history-row {

    display:grid;

    grid-template-columns:
        1.2fr
        1.5fr
        .8fr
        1fr
        45px;

    column-gap:20px;
}


.purchase-history-header {

    padding:8px 12px;
    color:#C10050;
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.08em;

}


.purchase-history-row {

    align-items:center;
    background:#222;
    padding:12px;
    border-radius:8px;
    margin-bottom:8px;

}


.purchase-history-row strong {
    color:white;
}


.purchase-value {
    color:#aaa;
}


/* ALIGNMENT */

.purchase-history-header div:nth-child(1),
.purchase-history-header div:nth-child(2),
.purchase-history-row div:nth-child(1),
.purchase-history-row div:nth-child(2) {
    text-align:left;
}


.purchase-history-header div:nth-child(3),
.purchase-history-header div:nth-child(4),
.purchase-history-row div:nth-child(3),
.purchase-history-row div:nth-child(4) {
    text-align:center;
}


.purchase-history-header div:nth-child(5),
.purchase-history-row div:nth-child(5) {
    text-align:center;
}


/* STATUS COLORS */

.order-status-completed {
    color:#00c853;
}

.order-status-pending {
    color:#ffc107;
}

.order-status-failed {
    color:#ff5252;
}

.order-status-refunded {
    color:#aaa;
}


/* ACTION */

.purchase-action {
    display:flex;
    justify-content:center;
    align-items:center;
}

.purchase-action img {
    width:20px;
    height:20px;
    cursor:pointer;
    filter:invert(1);
}


/* MOBILE */

@media(max-width:600px){


    /* OWNED VIDEOS */

    .purchase-row {
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .purchase-button {
        width:100%;
        text-align:center;
        box-sizing: border-box;
    }



    /* ORDER HISTORY */

    .purchase-history-header {
        display:none;
    }


    .purchase-history-row {

        display:grid;

        grid-template-columns:
            1fr
            auto;

        grid-template-rows:
            auto
            auto
            auto;

        column-gap:20px;
        row-gap:5px;

    }



    /* DATE */

    .purchase-history-row > div:nth-child(1) {

        grid-column:1;
        grid-row:1;

    }


    /* PO */

    .purchase-history-row > div:nth-child(2) {

        grid-column:1;
        grid-row:2;

    }


    /* PRICE */

    .purchase-history-row > div:nth-child(3) {

        grid-column:2;
        grid-row:2;

        display:flex;
        align-items: right;
        justify-content:flex-end;


    }

    .purchase-history-row > div:nth-child(3) {
        text-align:left;
    }


    /* STATUS */

    .purchase-history-row > div:nth-child(4) {

        grid-column:2;
        grid-row:1;

        display:flex;
        align-items:center;
        justify-content:flex-end;

        text-align:right;
        white-space:nowrap;

    }



    /* ACTION ICON */

    .purchase-history-row > div:nth-child(5) {

        grid-column:3;
        grid-row:1;

        display:flex;
        align-items:center;
        justify-content:center;

    }



}