/* WarextMarket v0.620 - account listing hub repair */
/* WAREXT_ACCOUNT_HUB_V0620 */

.my-listings-page,
.seller-orders-page {
    width: min(1380px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
    padding: 34px 0 58px !important;
    display: grid !important;
    gap: 22px !important;
}

.my-listings-hero-v0620 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: 26px 28px !important;
    border: 1px solid rgba(139, 120, 255, .17) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 10% 20%, rgba(90, 104, 255, .13), transparent 34%),
        radial-gradient(circle at 90% 16%, rgba(170, 78, 255, .10), transparent 31%),
        linear-gradient(145deg, rgba(16, 18, 36, .98), rgba(12, 14, 29, .98)) !important;
    box-shadow: 0 20px 52px rgba(2, 5, 18, .24) !important;
}

.my-listings-hero-v0620 h1 {
    margin: 5px 0 7px !important;
    color: #f7f8ff !important;
    font-size: clamp(1.55rem, 2.2vw, 2.2rem) !important;
    line-height: 1.08 !important;
}

.my-listings-hero-v0620 p {
    margin: 0 !important;
    max-width: 760px !important;
    color: #aeb9d9 !important;
    line-height: 1.55 !important;
}

.my-listings-kicker-v0620 {
    color: #8f9fff !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
}

.my-listings-help-pill {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    padding: 0 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(145, 126, 255, .27) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #6557e8, #8d46df) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    box-shadow: 0 13px 28px rgba(70, 43, 168, .24) !important;
}

.my-listings-hub-nav-v0620 {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 9px !important;
    border: 1px solid rgba(125, 135, 190, .14) !important;
    border-radius: 20px !important;
    background: rgba(11, 14, 29, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.my-listings-hub-nav-v0620 > a {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    padding: 13px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    color: #cad2ec !important;
    text-decoration: none !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}

.my-listings-hub-nav-v0620 > a span {
    font-size: .94rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.my-listings-hub-nav-v0620 > a small {
    color: #7f8aab !important;
    font-size: .73rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.my-listings-hub-nav-v0620 > a:hover {
    background: rgba(111, 92, 255, .08) !important;
    border-color: rgba(124, 111, 255, .16) !important;
}

.my-listings-hub-nav-v0620 > a.is-active {
    background: linear-gradient(145deg, rgba(77, 73, 155, .38), rgba(61, 38, 99, .34)) !important;
    border-color: rgba(140, 129, 255, .28) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(13, 12, 38, .18) !important;
}

.my-listings-hub-nav-v0620 > a.is-active small {
    color: #aeb7df !important;
}

.my-listings-summary-row {
    padding: 17px 20px !important;
    border: 1px solid rgba(126, 138, 195, .13) !important;
    border-radius: 18px !important;
    background: rgba(17, 21, 40, .78) !important;
    box-shadow: none !important;
}

.my-listings-summary-row strong {
    display: block !important;
    color: #f3f5ff !important;
    font-size: 1rem !important;
}

.my-listings-summary-row p {
    margin: 6px 0 0 !important;
    color: #9da8c9 !important;
    line-height: 1.5 !important;
}

.my-listings-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.my-listing-card {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid rgba(126, 139, 199, .14) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(19, 24, 48, .97), rgba(13, 17, 35, .98)) !important;
    box-shadow: 0 16px 38px rgba(3, 7, 20, .20) !important;
}

.my-listing-card.is-passive {
    opacity: .82 !important;
}

.my-listing-card__media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #10162a !important;
}

.my-listing-card__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform .22s ease !important;
}

.my-listing-card:hover .my-listing-card__media img {
    transform: scale(1.025) !important;
}

.my-listing-card__price {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    background: rgba(92, 85, 220, .92) !important;
    color: #fff !important;
    font-size: .88rem !important;
    font-weight: 900 !important;
    backdrop-filter: blur(8px) !important;
}

.my-listing-card__body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 17px !important;
}

.my-listing-card__body h3 {
    min-height: 0 !important;
    margin: 0 !important;
    color: #f3f5ff !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

.my-listing-card__meta {
    color: #929fc5 !important;
    font-size: .83rem !important;
}

.my-listing-btn,
.my-listing-mini-btn {
    min-height: 42px !important;
    border-radius: 11px !important;
    font-weight: 800 !important;
}

.my-listing-btn--edit {
    background: linear-gradient(135deg, rgba(82, 73, 169, .95), rgba(91, 53, 145, .95)) !important;
    color: #fff !important;
}

.my-listing-mini-btn--yellow {
    background: rgba(213, 154, 36, .88) !important;
}
.my-listing-mini-btn--teal {
    background: rgba(38, 165, 164, .88) !important;
}
.my-listing-mini-btn--purple {
    background: rgba(136, 67, 194, .88) !important;
}

.my-listing-card__footer {
    margin-top: auto !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    color: #95a2c5 !important;
    text-align: left !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
}

/* Purchase history */
.purchase-log-list {
    display: grid !important;
    gap: 16px !important;
}
.purchase-log-card {
    padding: 18px !important;
    border: 1px solid rgba(126, 139, 199, .14) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(19, 24, 48, .97), rgba(13, 17, 35, .98)) !important;
    box-shadow: 0 14px 32px rgba(3, 7, 20, .18) !important;
}
.purchase-log-top {
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 18px !important;
}
.purchase-log-cover {
    width: 100% !important;
    max-width: 190px !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}
.purchase-log-main {
    min-width: 0 !important;
}

/* Seller order page repair */
.seller-order-list {
    display: grid !important;
    gap: 16px !important;
}
.seller-order-card {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(126, 139, 199, .14) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(19, 24, 48, .97), rgba(13, 17, 35, .98)) !important;
    box-shadow: 0 14px 32px rgba(3, 7, 20, .18) !important;
}
.seller-order-card__media {
    width: 100% !important;
}
.seller-order-card__media img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}
.seller-order-card__body {
    min-width: 0 !important;
}

/* Reverse-market page parent hub */
.my-listings-hub-nav-v0620--buy {
    margin: 0 0 18px !important;
}
.my-listings-hero-v0620--buy {
    margin-bottom: 14px !important;
}

/* old tabs should not leak cramped/plain text layout on account pages */
.my-listings-page > .my-listings-topbar {
    display: none !important;
}

@media (max-width: 1100px) {
    .my-listings-hub-nav-v0620 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .my-listings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .my-listings-page,
    .seller-orders-page {
        width: min(100% - 22px, 1380px) !important;
        padding-top: 20px !important;
    }
    .my-listings-hero-v0620 {
        display: grid !important;
        padding: 20px !important;
        border-radius: 19px !important;
    }
    .my-listings-help-pill {
        width: 100% !important;
    }
    .my-listings-hub-nav-v0620 {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
        padding: 7px !important;
        scrollbar-width: thin !important;
    }
    .my-listings-hub-nav-v0620 > a {
        flex: 0 0 172px !important;
        scroll-snap-align: start !important;
    }
    .my-listings-grid {
        grid-template-columns: 1fr !important;
    }
    .purchase-log-top,
    .seller-order-card {
        grid-template-columns: 1fr !important;
    }
    .purchase-log-cover {
        max-width: 100% !important;
    }
    .seller-order-card__media img {
        max-height: 260px !important;
    }
}

@media (max-width: 480px) {
    .my-listings-page,
    .seller-orders-page {
        width: min(100% - 14px, 1380px) !important;
    }
    .my-listings-hub-nav-v0620 > a {
        flex-basis: 156px !important;
    }
}