/* ============================================================================
   App-style My-Account area (profile, orders, order details, favorites,
   addresses, wallet, transactions, chat, tickets, refer & earn, dashboard).
   Light-grey background, white rounded card panels, brand-blue accents and an
   app-style sidebar. Scoped to body.account-area. Brand: blue #1E3A8A + teal.
   ========================================================================== */

body.account-area {
    background: #F1F5F9;
}

/* Breadcrumb strip sits cleanly on the grey page. */
body.account-area section.wrapper.bg-soft-grape {
    background: transparent !important;
    padding-top: 10px;
    padding-bottom: 0;
}
body.account-area .breadcrumb-item a {
    color: #1E3A8A;
}

/* ── Sidebar (the my-account-tab nav) ───────────────────────────────────────*/
body.account-area .my-account-tab {
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 5px 14px rgba(2, 6, 23, 0.05) !important;
}
body.account-area .my-account-tab .nav-item a {
    color: #334155;
    border-radius: 12px !important;
    padding: 10px 12px;
    transition: background .15s ease, color .15s ease;
}
body.account-area .my-account-tab .nav-item a:hover {
    background: #EFF3FB;
    color: #1E3A8A;
}
body.account-area .my-account-tab .nav-item a.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(20, 184, 166, .10));
    color: #1E3A8A !important;
    box-shadow: inset 3px 0 0 #1E3A8A;
}

/* ── Content panels → app-style white rounded cards ─────────────────────────*/
body.account-area .card,
body.account-area .shadow-xl,
body.account-area .orders-section > .border-0 {
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 14px rgba(2, 6, 23, 0.05) !important;
    overflow: hidden;
}
body.account-area .card-header.bg-white {
    border-bottom: 1px solid #F1F5F9;
}
body.account-area .card-header h1,
body.account-area .card-header h2,
body.account-area .card-header h3,
body.account-area .card-header .h4,
body.account-area .my-account-section h2,
body.account-area .my-account-section h3 {
    color: #0F172A;
    font-weight: 700;
}

/* ── Tables (orders / transactions) ─────────────────────────────────────────*/
body.account-area .table thead th {
    color: #0F172A;
    font-weight: 600;
}
body.account-area .table-order .price,
body.account-area .order-total,
body.account-area .product-line-price,
body.account-area #final_total {
    color: #1E3A8A !important;
    font-weight: 700;
}

/* ── Wallet balance highlight ───────────────────────────────────────────────*/
body.account-area .wallet-balance,
body.account-area .wallet_balance,
body.account-area #wallet_balance,
body.account-area .balance-amount {
    color: #1E3A8A !important;
    font-weight: 700;
}

/* ── Favorites reuse product cards → give them the app tile look ────────────*/
body.account-area .product-image.item figure,
body.account-area .project.item figure {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(2, 6, 23, 0.05);
    padding: 8px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
body.account-area .product-image.item:hover figure,
body.account-area .project.item:hover figure {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(30, 58, 138, 0.12);
}
body.account-area .product-image.item figure img,
body.account-area .project.item figure img {
    border-radius: 10px;
}

/* ── Buttons: recolour any yellow CTA to brand blue (primary already blue) ──*/
body.account-area .btn-yellow {
    --bs-btn-bg: #1E3A8A;
    --bs-btn-border-color: #1E3A8A;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #16306e;
    --bs-btn-hover-border-color: #16306e;
    background-color: #1E3A8A;
    border-color: #1E3A8A;
    color: #fff;
}