/* Weekly — My-Account Tracking + Returns.
   Self-contained + namespaced (.weekly-acc-*). Pulls GPD design tokens with
   safe fallbacks so it matches the GPD dark account design and degrades
   gracefully on other themes. */

.weekly-acc {
    --w-surface: var(--surface-elev, #1A2028);
    --w-line: var(--line-1, rgba(255, 255, 255, .10));
    --w-line-2: var(--line-2, rgba(255, 255, 255, .06));
    --w-glass: var(--surface-glass, rgba(255, 255, 255, .04));
    --w-lime: var(--lime-500, #D3FF5F);
    --w-teal: var(--teal-500, #23DDBE);
    --w-fg: var(--fg-1, #D4D4D4);
    --w-fg2: var(--fg-secondary, #99A1AF);
    --w-fg3: var(--fg-tertiary, #6B7478);
    --w-rlg: var(--r-lg, 14px);
    --w-rmd: var(--r-md, 10px);
    --w-rfull: var(--r-full, 999px);
    margin: 22px 0 0;
}

/* card */
.weekly-acc-card {
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: var(--w-rlg);
    margin: 0 0 16px;
    overflow: hidden;
}

.weekly-acc-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--w-line-2);
}
.weekly-acc-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--w-rmd);
    background: color-mix(in srgb, var(--w-teal) 14%, transparent);
    color: var(--w-teal);
    flex: 0 0 auto;
}
/* color uses !important: themes (incl. GPD) carry a very high-specificity
   "reset generic headings to dark" rule on #content.site-content h1–h6 that a
   plugin selector can't out-rank by specificity alone. */
.weekly-acc .weekly-acc-head h3 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff !important;
    line-height: 1.2;
    text-transform: none;
}
.weekly-acc-viewall {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--w-teal);
    text-decoration: none;
    white-space: nowrap;
}
.weekly-acc-viewall:hover { color: #fff; }
.weekly-acc-statelabel {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--w-fg2);
}

/* returns list */
.weekly-acc-list { display: flex; flex-direction: column; }
.weekly-rma {
    padding: 15px 20px;
    border-top: 1px solid var(--w-line-2);
}
.weekly-rma:first-child { border-top: 0; }
.weekly-rma-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.weekly-rma-num {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--w-teal);
    text-decoration: none;
}
.weekly-rma-num:hover { color: #fff; }
.weekly-rma-num .weekly-i { width: 14px; height: 14px; opacity: .8; }
.weekly-rma-sub {
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--w-fg3);
}

/* pills + badges */
.weekly-pill {
    --weekly-pill: var(--w-teal);
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 12px;
    border-radius: var(--w-rfull);
    background: color-mix(in srgb, var(--weekly-pill) 16%, transparent);
    color: var(--weekly-pill);
    white-space: nowrap;
}
.weekly-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 11px;
    border-radius: var(--w-rfull);
    background: color-mix(in srgb, var(--w-teal) 12%, transparent);
    color: var(--w-teal);
    white-space: nowrap;
}

/* tracking timeline */
.weekly-track-bar {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 20px 22px 6px;
    counter-reset: none;
}
.weekly-track-step {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}
.weekly-track-step::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--w-line);
}
.weekly-track-step:first-child::before { display: none; }
.weekly-track-step.done::before,
.weekly-track-step.curr::before { background: var(--w-lime); }
.weekly-track-step .dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-1, #0C1014);
    border: 2px solid var(--w-line);
    color: var(--w-fg3);
}
.weekly-track-step .dot .weekly-i { width: 15px; height: 15px; }
.weekly-track-step.done .dot {
    background: var(--w-lime);
    border-color: var(--w-lime);
    color: #0C1014;
}
.weekly-track-step.curr .dot {
    background: var(--w-teal);
    border-color: var(--w-teal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-teal) 22%, transparent);
}
.weekly-track-step .lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--w-fg2);
}
.weekly-track-step.done .lbl,
.weekly-track-step.curr .lbl { color: #fff; }
.weekly-track-bar.is-cancelled .dot { border-color: var(--w-fg3); color: var(--w-fg3); }

.weekly-track-nums {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 22px 20px;
}
.weekly-track-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--w-rmd);
    background: var(--w-glass);
    border: 1px solid var(--w-line);
    color: var(--w-fg);
    text-decoration: none;
    font-size: 13px;
}
.weekly-track-num:hover { border-color: var(--w-teal); }
.weekly-track-num .num { font-weight: 700; color: #fff; letter-spacing: .02em; }
.weekly-track-num .carrier { color: var(--w-fg3); }
.weekly-track-num .weekly-i { width: 15px; height: 15px; color: var(--w-fg3); }

/* start-return CTA */
.weekly-acc-cta { margin: 0 0 16px; }
/* matches the GPD secondary button (lighten + lift on hover). Colour is forced
   so a theme's generic account-content link-hover can't dim the label. */
.weekly-acc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--w-rmd);
    background: rgba(255, 255, 255, 0.10);
    border: 0;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, transform .2s;
}
.weekly-acc-btn,
.weekly-acc-btn:hover,
.weekly-acc-btn:focus { color: #fff !important; }
.weekly-acc-btn:hover { background: rgba(255, 255, 255, 0.17); transform: translateY(-2px); }
.weekly-acc-btn .weekly-i { width: 17px; height: 17px; }

.weekly-acc-empty {
    padding: 22px;
    color: var(--w-fg2);
    font-size: 14px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: var(--w-rlg);
}

/* default size so an SVG never collapses to an empty square in a flex parent;
   specific contexts above override it. */
.weekly-i { display: inline-block; vertical-align: middle; width: 16px; height: 16px; flex: 0 0 auto; }
.weekly-acc .weekly-acc-ic .weekly-i { width: 17px; height: 17px; }

@media (max-width: 480px) {
    .weekly-track-step .lbl { font-size: 11px; }
    .weekly-track-bar { padding: 18px 14px 6px; }
    .weekly-acc-head { padding: 14px 16px; }
    .weekly-rma { padding: 14px 16px; }
}

/* carrier checkpoint timeline (Weekly /tracking) */
.weekly-checkpoints { padding: 16px 22px 6px; border-top: 1px solid var(--w-line-2); }
.weekly-cp-head { margin: 0 0 14px; }
.weekly-cp-status { --weekly-pill: var(--w-teal); }
.weekly-cp-list { list-style: none; margin: 0; padding: 0; }
.weekly-cp { position: relative; padding: 0 0 16px 24px; }
.weekly-cp:last-child { padding-bottom: 2px; }
.weekly-cp-dot { position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--w-fg3); z-index: 1; }
.weekly-cp.is-latest .weekly-cp-dot { background: var(--w-teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-teal) 20%, transparent); }
.weekly-cp::before { content: ""; position: absolute; left: 4px; top: 13px; bottom: -3px; width: 2px; background: var(--w-line); }
.weekly-cp:last-child::before { display: none; }
.weekly-cp-msg { font-size: 13.5px; color: var(--w-fg2); line-height: 1.45; }
.weekly-cp.is-latest .weekly-cp-msg { color: #fff; font-weight: 600; }
.weekly-cp-meta { font-size: 12px; color: var(--w-fg3); margin-top: 3px; text-transform: uppercase; letter-spacing: .02em; }
.weekly-checkpoints .weekly-cp-na { display: flex; align-items: center; gap: 9px; color: var(--w-fg3); font-size: 13px; }
.weekly-checkpoints .weekly-cp-na .weekly-i { width: 16px; height: 16px; color: var(--w-fg3); }