/* Wishlist + My Orders (templates/wish_list.html, user_orders.html). Scoped to .acct-/.wish-/.order- ; colours follow design.md */

.acct-page { color: #333; }

.acct-hero { background: #FFF8DC; border-bottom: 1px solid #f5e7a3; padding: 40px 0 32px; }
.acct-hero h1 { color: #511616; font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin: 0 0 .4rem; }
.acct-hero p { margin: 0; color: #333; }
.acct-count {
    display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .2rem .7rem;
    background: #FACC15; color: #0a0a0a; border-radius: 999px; font-size: .8rem; font-weight: 600;
}

.acct-main { padding: 40px 0 72px; }

/* buttons: brand yellow, near-black text, #E6B800 hover (design.md) */
.acct-btn {
    display: block; width: 100%; padding: .6rem 1rem; border: 0; border-radius: 999px;
    background: #FACC15; color: #0a0a0a; font-weight: 600; text-align: center; transition: background-color .2s;
}
.acct-btn:hover, .acct-btn:focus { background: #E6B800; color: #0a0a0a; }
.acct-btn:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; box-shadow: none; }
.acct-btn-inline { display: inline-block; width: auto; padding: .7rem 2rem; }
.acct-btn-disabled, .acct-btn-disabled:hover { background: #e5e7eb; color: #6b7280; cursor: not-allowed; }

/* wishlist cards */
.wish-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    overflow: hidden; transition: box-shadow .2s, border-color .2s;
}
.wish-card:hover { border-color: #FACC15; box-shadow: 0 8px 22px rgba(0, 0, 0, .06); }
.wish-media {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1; background: #f8f9fa; overflow: hidden;
}
.wish-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wish-noimg { color: #c4c7cc; font-size: 2.2rem; }
.wish-badge {
    position: absolute; top: .65rem; left: .65rem; background: #511616; color: #fff;
    font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
}
.wish-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; flex: 1; }
.wish-title { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.35; }
.wish-title a { color: #511616; text-decoration: none; overflow-wrap: anywhere; }
.wish-title a:hover { text-decoration: underline; }
.wish-price { margin: 0; display: flex; align-items: baseline; gap: .6rem; }
.wish-price strong { font-size: 1.1rem; color: #0a0a0a; }
.wish-price s { font-size: .88rem; color: #6b7280; }
.wish-stock { margin: 0; font-size: .85rem; color: #166534; }
.wish-stock.is-out { color: #b91c1c; }
.wish-actions { margin-top: auto; display: grid; gap: .35rem; padding-top: .5rem; }
.wish-actions form { margin: 0; }
.wish-remove {
    width: 100%; border: 0; background: transparent; color: #6b7280; font-size: .88rem; padding: .45rem; cursor: pointer;
    transition: color .2s;
}
.wish-remove:hover { color: #b91c1c; text-decoration: underline; }
.wish-remove:focus-visible { outline: 2px solid #FACC15; outline-offset: 2px; }

/* orders */
.order-list { display: grid; gap: 1.25rem; }
.order-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; }
.order-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.25rem; background: #FFFDF3; border-bottom: 1px solid #f5e7a3;
}
.order-head h2 { font-size: 1.1rem; font-weight: 700; color: #511616; margin: 0 0 .15rem; }
.order-head p { margin: 0; font-size: .85rem; color: #6b7280; }

.order-status {
    display: inline-block; padding: .25rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    background: #f3f4f6; color: #374151;
}
.status-pending { background: #FFF1B8; color: #6b4e00; }
.status-processing { background: #E0EDFF; color: #1d4ed8; }
.status-shipped { background: #EDE9FE; color: #5b21b6; }
.status-success, .status-delivered { background: #DCFCE7; color: #166534; }
.status-cancelled { background: #FEE2E2; color: #b91c1c; }

.order-items { margin: 0; padding: .5rem 1.25rem; }
.order-items li { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #f1f1f1; }
.order-items li:last-child { border-bottom: 0; }
.order-item-media {
    flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #f8f9fa;
    border: 1px solid #eef0f2; display: flex; align-items: center; justify-content: center;
}
.order-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-item-info { display: flex; flex-direction: column; min-width: 0; }
.order-item-info a { font-weight: 600; color: #0a0a0a; text-decoration: none; overflow-wrap: anywhere; }
.order-item-info a:hover { color: #511616; text-decoration: underline; }
.order-item-info span { font-size: .88rem; color: #6b7280; }

.order-totals { margin: 0; padding: .9rem 1.25rem 1.1rem; border-top: 1px solid #f1f1f1; background: #fafafa; }
.order-totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.order-totals dt { font-weight: 400; }
.order-totals dd { margin: 0; font-weight: 600; color: #0a0a0a; }
.order-total { border-top: 1px solid #e5e7eb; margin-top: .35rem; padding-top: .6rem !important; font-size: 1.05rem; }
.order-total dt, .order-total dd { font-weight: 700; }

.acct-pagination { margin-top: 2rem; }
.acct-pagination .page-link { color: #511616; }
.acct-pagination .page-item.active .page-link { background: #FACC15; border-color: #FACC15; color: #0a0a0a; }

/* empty states */
.acct-empty { max-width: 520px; margin: 24px auto; text-align: center; padding: 2.5rem 1.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; }
.acct-empty-icon {
    width: 88px; height: 88px; margin: 0 auto 1.25rem; display: grid; place-items: center;
    border-radius: 50%; background: #FFF6D6; color: #b8860b; font-size: 2.2rem;
}
.acct-empty h2 { font-size: 1.4rem; font-weight: 700; color: #511616; margin-bottom: .5rem; }
.acct-empty p { color: #4b5563; margin-bottom: 1.25rem; }

@media (max-width: 575.98px) {
    .acct-hero { padding: 30px 0 24px; }
    .acct-main { padding: 28px 0 52px; }
    .order-head, .order-items, .order-totals { padding-left: 1rem; padding-right: 1rem; }
    .order-item-media { flex-basis: 56px; width: 56px; height: 56px; }
}