/* =========================================================
   DASHBOARD: NEWS / SHOP VIEW (js/account-shop.js)
   ========================================================= */

/* Each view shows only its own parts */
body.area-shop [data-area-only="news"],
body:not(.area-shop) [data-area-only="shop"] {
    display: none !important;
}


/* News / Shop switch */
.area-tabs {
    display: inline-flex;
    gap: 4px;

    margin-top: 14px;
    padding: 4px;

    background: #efebe2;
    border-radius: 999px;
}

.area-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 36px;
    padding: 0 18px;

    background: transparent;
    border: 0;
    border-radius: 999px;

    color: var(--text-soft);

    font: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s ease, color 0.2s ease;
}

.area-tab i {
    font-size: 13px;
}

.area-tab:hover {
    color: var(--brown);
}

.area-tab.is-active {
    background: var(--brown);
    color: #ffffff;
}

.area-tab:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}


/* Shop section */
.shop-dashboard {
    display: grid;
    gap: 16px;
}

.overview-link {
    color: inherit;
    text-decoration: none;

    transition: border-color 0.2s ease;
}

.overview-link:hover {
    border-color: var(--gold);
}

.dashboard-link {
    flex: 0 0 auto;

    color: var(--gold-dark);

    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.dashboard-link:hover {
    text-decoration: underline;
}

.shop-recent {
    margin-top: 10px;
}

.shop-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 12px 0;

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

    color: inherit;
    text-decoration: none;
}

.shop-order-row:first-child {
    border-top: 0;
}

.shop-order-row:hover strong {
    color: var(--gold-dark);
}

.shop-order-main {
    display: grid;
    gap: 2px;

    min-width: 0;
}

.shop-order-main strong {
    color: var(--brown);

    font-size: 15px;
}

.shop-order-main span {
    overflow: hidden;

    color: var(--text-soft);

    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shop-order-side {
    display: grid;
    justify-items: end;
    gap: 4px;

    flex: 0 0 auto;
}

.shop-order-meta {
    color: var(--text-soft);

    font-size: 12.5px;
}

.shop-none {
    display: grid;
    justify-items: start;
    gap: 10px;

    padding: 6px 0;

    color: var(--text-soft);

    font-size: 14px;
}

.shop-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-action-light {
    background: var(--white);
    border: 1px solid #d6d4cf;

    color: var(--brown);
}

.dashboard-action-light:hover {
    background: var(--gold-soft, #fff4d6);
    border-color: var(--brown);
    color: var(--brown);
}

.dashboard-action i {
    margin-right: 6px;
}


/* Order status pills (also used on My orders) */
.order-status {
    display: inline-flex;
    align-items: center;

    padding: 3px 10px;

    background: #f1ece1;
    border-radius: 999px;

    color: var(--brown);

    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.order-status.status-awaiting_contact {
    background: #e7f4ec;
    color: #17733e;
}

.order-status.status-paid,
.order-status.status-preparing {
    background: #fff4d6;
    color: #8a6200;
}

.order-status.status-ready,
.order-status.status-dispatched {
    background: #e8f0fb;
    color: #1f4f8f;
}

.order-status.status-delivered,
.order-status.status-collected {
    background: #e7f4ec;
    color: #1d6b3a;
}

.order-status.status-cancelled {
    background: #fbe9e7;
    color: #b3261e;
}


@media (max-width: 640px) {

    .area-tabs {
        display: flex;
    }

    .area-tab {
        flex: 1;
        justify-content: center;

        padding: 0 10px;
    }

    .shop-order-row {
        align-items: flex-start;
    }

    .shop-quick .dashboard-action {
        flex: 1 1 100%;
    }
}