/* =========================================================
   AURELIA JEWELLERY
   CUSTOMER ORDERS + WISHLIST

   File:
   assets/css/asareh-customer.css
========================================================= */


/* =========================================================
   01. ROOT
========================================================= */

.asareh-orders-page,
.asareh-wishlist-page {

    --asareh-customer-dark: #1c130d;
    --asareh-customer-brown: #4d3622;
    --asareh-customer-bronze: #906f56;
    --asareh-customer-champagne: #ccb299;
    --asareh-customer-cream: #e7dcd0;
    --asareh-customer-ivory: #f7f2ec;
    --asareh-customer-surface: #fbf8f4;

    --asareh-customer-border:
        rgba(77, 54, 34, 0.14);

    --asareh-customer-muted:
        rgba(28, 19, 13, 0.56);

    --asareh-customer-success:
        #607f56;

    --asareh-customer-warning:
        #a9793b;

    --asareh-customer-danger:
        #8a3d32;

    background:
        var(--asareh-customer-ivory);

    color:
        var(--asareh-customer-dark);
}


/* =========================================================
   02. HERO
========================================================= */

.asareh-customer-hero {

    padding:
        160px 0 72px;

    background:
        var(--asareh-customer-dark);

    color:
        #fff;
}


.asareh-customer-hero__inner {

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;
}


.asareh-customer-hero
.asareh-breadcrumb {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-bottom:
        28px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        10px;
}


.asareh-customer-hero
.asareh-breadcrumb a {

    color:
        rgba(255, 255, 255, 0.58);
}


.asareh-customer-hero
.asareh-breadcrumb
[aria-current="page"] {

    color:
        var(--asareh-customer-champagne);
}


.asareh-customer-hero__title {

    margin:
        16px 0 12px;

    color:
        #fff;

    font-size:
        clamp(42px, 5vw, 72px);

    font-weight:
        400;

    line-height:
        1.2;
}


.asareh-customer-hero__description {

    max-width:
        620px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.62);

    font-size:
        11px;

    line-height:
        2;
}


/* =========================================================
   03. MAIN
========================================================= */

.asareh-customer {

    padding:
        82px 0 140px;
}


.asareh-customer__container {

    width:
        min(1440px, calc(100% - 96px));

    margin:
        0 auto;
}


/* =========================================================
   04. TOOLBAR
========================================================= */

.asareh-customer-toolbar {

    display:
        flex;

    margin-bottom:
        42px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding-bottom:
        26px;

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


.asareh-customer-toolbar__title {

    margin:
        0;

    color:
        var(--asareh-customer-dark);

    font-size:
        28px;

    font-weight:
        400;
}


.asareh-customer-toolbar__meta {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--asareh-customer-muted);

    font-size:
        9px;
}


/* =========================================================
   05. FILTERS
========================================================= */

.asareh-orders-filter {

    display:
        flex;

    gap:
        8px;

    overflow-x:
        auto;

    scrollbar-width:
        none;
}


.asareh-orders-filter::-webkit-scrollbar {

    display:
        none;
}


.asareh-orders-filter__button {

    min-height:
        42px;

    padding:
        0 18px;

    flex:
        0 0 auto;

    color:
        var(--asareh-customer-muted);

    border:
        1px solid
        var(--asareh-customer-border);

    background:
        transparent;

    font-size:
        9px;
}


.asareh-orders-filter__button:hover,
.asareh-orders-filter__button.is-active {

    color:
        #fff;

    background:
        var(--asareh-customer-dark);

    border-color:
        var(--asareh-customer-dark);
}


/* =========================================================
   06. ORDER LIST
========================================================= */

.asareh-orders-list {

    display:
        grid;

    gap:
        18px;
}


/* =========================================================
   07. ORDER CARD
========================================================= */

.asareh-order-card {

    background:
        var(--asareh-customer-surface);

    border:
        1px solid
        var(--asareh-customer-border);
}


.asareh-order-card__header {

    display:
        grid;

    min-height:
        94px;

    padding:
        20px 26px;

    grid-template-columns:
        minmax(0, 1.4fr)
        repeat(3, minmax(120px, 0.6fr));

    gap:
        24px;

    align-items:
        center;

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


.asareh-order-card__field span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--asareh-customer-muted);

    font-size:
        8px;
}


.asareh-order-card__field strong {

    color:
        var(--asareh-customer-dark);

    font-size:
        11px;

    font-weight:
        500;
}


.asareh-order-status {

    display:
        inline-flex;

    min-height:
        30px;

    padding:
        5px 10px;

    align-items:
        center;

    justify-content:
        center;

    width:
        fit-content;

    font-size:
        8px;
}


.asareh-order-status--processing {

    color:
        var(--asareh-customer-warning);

    background:
        rgba(169, 121, 59, 0.09);

    border:
        1px solid
        rgba(169, 121, 59, 0.18);
}


.asareh-order-status--delivered {

    color:
        var(--asareh-customer-success);

    background:
        rgba(96, 127, 86, 0.09);

    border:
        1px solid
        rgba(96, 127, 86, 0.18);
}


.asareh-order-status--cancelled {

    color:
        var(--asareh-customer-danger);

    background:
        rgba(138, 61, 50, 0.07);

    border:
        1px solid
        rgba(138, 61, 50, 0.16);
}


/* =========================================================
   08. ORDER BODY
========================================================= */

.asareh-order-card__body {

    display:
        grid;

    padding:
        24px 26px;

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

    gap:
        30px;

    align-items:
        center;
}


.asareh-order-product {

    display:
        grid;

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

    gap:
        18px;

    align-items:
        center;
}


.asareh-order-product__media {

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    background:
        var(--asareh-customer-cream);
}


.asareh-order-product__media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.asareh-order-product__content h3 {

    margin:
        0 0 8px;

    font-size:
        17px;

    font-weight:
        400;
}


.asareh-order-product__content span {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--asareh-customer-muted);

    font-size:
        9px;
}


.asareh-order-card__actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


/* =========================================================
   09. EMPTY
========================================================= */

.asareh-customer-empty {

    display:
        none;

    padding:
        100px 24px;

    text-align:
        center;

    border-top:
        1px solid
        var(--asareh-customer-border);

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


.asareh-customer-empty.is-visible {

    display:
        block;
}


.asareh-customer-empty__icon {

    display:
        grid;

    width:
        76px;

    height:
        76px;

    margin:
        0 auto 26px;

    place-items:
        center;

    color:
        var(--asareh-customer-bronze);

    border:
        1px solid
        var(--asareh-customer-border);

    border-radius:
        50%;

    font-size:
        26px;
}


.asareh-customer-empty h2 {

    margin:
        0 0 12px;

    font-size:
        32px;

    font-weight:
        400;
}


.asareh-customer-empty p {

    max-width:
        500px;

    margin:
        0 auto 28px;

    color:
        var(--asareh-customer-muted);

    font-size:
        10px;

    line-height:
        2;
}


/* =========================================================
   10. WISHLIST GRID
========================================================= */

.asareh-wishlist-grid {

    display:
        grid;

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

    gap:
        46px 22px;
}


/* =========================================================
   11. WISHLIST ITEM
========================================================= */

.asareh-wishlist-card {

    min-width:
        0;
}


.asareh-wishlist-card[hidden] {

    display:
        none;
}


.asareh-wishlist-card__media {

    position:
        relative;

    aspect-ratio:
        4 / 5;

    overflow:
        hidden;

    background:
        var(--asareh-customer-cream);
}


.asareh-wishlist-card__media > a {

    display:
        block;

    width:
        100%;

    height:
        100%;
}


.asareh-wishlist-card__media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 650ms
        cubic-bezier(.16, 1, .3, 1);
}


.asareh-wishlist-card__remove {

    position:
        absolute;

    z-index:
        3;

    top:
        12px;

    left:
        12px;

    display:
        grid;

    width:
        40px;

    height:
        40px;

    padding:
        0;

    place-items:
        center;

    color:
        var(--asareh-customer-dark);

    background:
        rgba(255, 255, 255, 0.88);

    border-radius:
        50%;

    font-size:
        18px;
}


.asareh-wishlist-card__content {

    padding:
        18px 2px 0;
}


.asareh-wishlist-card__content h3 {

    margin:
        0 0 7px;

    font-size:
        17px;

    font-weight:
        400;
}


.asareh-wishlist-card__meta {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--asareh-customer-muted);

    font-size:
        9px;
}


.asareh-wishlist-card__price {

    display:
        block;

    margin-bottom:
        16px;

    color:
        var(--asareh-customer-brown);

    font-size:
        11px;
}


.asareh-wishlist-card__actions {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        8px;
}


.asareh-wishlist-card__cart {

    min-height:
        46px;

    padding:
        0 16px;

    font-size:
        9px;
}


.asareh-wishlist-card__view {

    display:
        grid;

    min-width:
        46px;

    min-height:
        46px;

    place-items:
        center;

    border:
        1px solid
        var(--asareh-customer-border);

    font-size:
        16px;
}


/* =========================================================
   12. HOVER
========================================================= */

@media (hover: hover) {

    .asareh-wishlist-card:hover
    .asareh-wishlist-card__media img {

        transform:
            scale(1.045);
    }

}


/* =========================================================
   13. TABLET
========================================================= */

@media (
    min-width: 769px
) and (
    max-width: 1024px
) {

    .asareh-customer-hero__inner,
    .asareh-customer__container {

        width:
            calc(100% - 48px);
    }


    .asareh-order-card__header {

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


    .asareh-wishlist-grid {

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

}


/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 768px) {

    .asareh-customer-hero {

        padding:
            calc(
                104px +
                env(safe-area-inset-top)
            )
            0
            46px;
    }


    .asareh-customer-hero__inner {

        width:
            100%;

        padding:
            0 18px;
    }


    .asareh-customer {

        padding:
            54px 0 110px;
    }


    .asareh-customer__container {

        width:
            100%;

        padding:
            0 14px;
    }


    .asareh-customer-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .asareh-orders-filter {

        width:
            100%;
    }


    .asareh-order-card__header {

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

        gap:
            20px 14px;

        padding:
            20px 18px;
    }


    .asareh-order-card__body {

        grid-template-columns:
            1fr;

        padding:
            20px 18px;
    }


    .asareh-order-product {

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


    .asareh-order-card__actions {

        width:
            100%;
    }


    .asareh-order-card__actions
    .asareh-button {

        flex:
            1;
    }


    .asareh-wishlist-grid {

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

        gap:
            34px 9px;
    }


    .asareh-wishlist-card__content h3 {

        font-size:
            14px;
    }


    .asareh-wishlist-card__actions {

        grid-template-columns:
            1fr;
    }


    .asareh-wishlist-card__view {

        display:
            none;
    }


    .asareh-wishlist-card__remove {

        top:
            7px;

        left:
            7px;

        width:
            36px;

        height:
            36px;
    }

}


/* =========================================================
   15. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .asareh-wishlist-grid {

        gap:
            30px 7px;
    }


    .asareh-order-card__header {

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   16. PRINT
========================================================= */

@media print {

    .asareh-customer-hero,
    .asareh-header,
    .asareh-footer,
    .asareh-app-nav,
    .asareh-orders-filter,
    .asareh-order-card__actions,
    .asareh-wishlist-card__actions,
    .asareh-wishlist-card__remove {

        display:
            none !important;
    }


    .asareh-customer {

        padding:
            20px 0;
    }


    .asareh-customer__container {

        width:
            100%;
    }

}