/* =============================================================
   PROFILE.CSS — Profile area, orders, tracking, seller store
   ============================================================= */

.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-6); align-items: start; }

.account-sidebar { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; position: sticky; top: calc(var(--nav-h) + 16px); }
.account-user { padding: var(--s-5); background: var(--g-grape); color: #fff; display: flex; align-items: center; gap: 12px; }
.account-user .avatar { background: rgba(255,255,255,.2); }
.account-user b { display: block; }
.account-user small { opacity: .85; }
.account-nav a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-weight: var(--fw-semibold); color: var(--c-text); border-left: 3px solid transparent; transition: all var(--t-base); }
.account-nav a svg { width: 20px; height: 20px; color: var(--c-muted); }
.account-nav a:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.account-nav a.active { background: var(--c-primary-tint); color: var(--c-primary); border-left-color: var(--c-primary); }
.account-nav a.active svg { color: var(--c-primary); }

/* stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.stat-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-5); }
.stat-card .ic { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: var(--s-3); }
.stat-card .num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-family: var(--font-display); }
.stat-card .lbl { color: var(--c-text-soft); font-size: var(--fs-sm); }

/* order card */
.order-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-4); }
.order-card-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border); flex-wrap: wrap; gap: var(--s-3); }
.order-card-head .meta { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.order-card-head .meta div small { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.order-card-head .meta div b { font-size: var(--fs-sm); }
.order-line { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
.order-line .ol-img { width: 64px; aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden; background: var(--c-bg-soft); }
.order-line .ol-img img { width:100%; height:100%; object-fit:cover; }
.order-status { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.order-status .dot { width: 8px; height: 8px; border-radius: 50%; }
.order-status.delivered .dot { background: var(--c-success); } .order-status.delivered { color: var(--c-success); }
.order-status.transit .dot { background: var(--c-info); } .order-status.transit { color: var(--c-info); }
.order-status.placed .dot { background: var(--c-amber); } .order-status.placed { color: var(--c-amber); }
.order-status.cancelled .dot { background: var(--c-danger); } .order-status.cancelled { color: var(--c-danger); }

/* tracking timeline */
.tracker { position: relative; padding-left: 8px; }
.track-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); padding-bottom: var(--s-6); position: relative; }
.track-step::before { content:""; position: absolute; left: 19px; top: 34px; bottom: -6px; width: 2px; background: var(--c-border-strong); }
.track-step:last-child::before { display: none; }
.track-step.done::before { background: var(--c-success); }
.track-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--c-bg-soft); border: 2px solid var(--c-border-strong); display: grid; place-items: center; color: var(--c-muted); z-index: 1; }
.track-step.done .track-dot { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.track-step.current .track-dot { background: var(--c-primary); border-color: var(--c-primary); color: #fff; animation: pulse 1.6s infinite; }
.track-step .tt-title { font-weight: var(--fw-bold); }
.track-step .tt-time { color: var(--c-muted); font-size: var(--fs-sm); }
.track-step.pending .tt-title { color: var(--c-muted); }

/* coupon card */
.coupon-ticket { display: flex; border: 1px dashed var(--c-primary); border-radius: var(--r-md); overflow: hidden; background: var(--c-primary-tint); }
.coupon-ticket .left { background: var(--g-primary); color: #fff; padding: var(--s-5); display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: var(--fw-bold); letter-spacing: .1em; }
.coupon-ticket .body { padding: var(--s-4) var(--s-5); flex: 1; }
.coupon-ticket .code { font-family: var(--font-mono); font-weight: var(--fw-bold); border: 1px dashed var(--c-primary); padding: 6px 12px; border-radius: var(--r-xs); display: inline-block; color: var(--c-primary); margin-top: 8px; cursor: pointer; }

/* wallet */
.wallet-card { background: var(--g-grape); color: #fff; border-radius: var(--r-xl); padding: var(--s-7); position: relative; overflow: hidden; }
.wallet-card::after { content:""; position:absolute; right:-30px; bottom:-30px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.12); }
.wallet-card .bal { font-size: var(--fs-4xl); font-weight: var(--fw-black); font-family: var(--font-display); }

/* notifications */
.notif { display: flex; gap: 14px; padding: var(--s-4); border-radius: var(--r-md); transition: background var(--t-base); cursor: pointer; }
.notif:hover { background: var(--c-bg-soft); }
.notif.unread { background: var(--c-primary-tint); }
.notif .ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.notif .ic svg { width: 20px; height: 20px; }
.notif .time { color: var(--c-muted); font-size: var(--fs-xs); margin-top: 4px; }

/* seller store */
.store-banner { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 240px; background: var(--g-dark); display: flex; align-items: flex-end; padding: var(--s-6); }
.store-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.store-banner .inner { position: relative; z-index: 2; color: #fff; display: flex; align-items: center; gap: var(--s-5); }
.store-banner .store-logo { width: 96px; height: 96px; border-radius: var(--r-lg); background: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-2xl); color: var(--c-charcoal); }
.store-stats { display: flex; gap: var(--s-7); }
.store-stats div b { font-size: var(--fs-xl); font-family: var(--font-display); display:block; }
.store-stats div small { opacity: .85; }

@media (max-width: 880px){ .account-layout { grid-template-columns: 1fr; } .account-sidebar { position: static; } .account-nav { display: flex; overflow-x: auto; } .account-nav a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; } .account-nav a.active { border-left: none; border-bottom-color: var(--c-primary); } .stat-grid { grid-template-columns: 1fr 1fr; } }