/* 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);
    /* "Strong" foreground for text on top of OUR own surfaces (dark card, lime
       dot, teal button). Every element using --w-strong sits on a surface we
       control (which keeps its dark fallback even on a light theme), so white
       stays legible on both light and dark themes. A token (not a bare #fff)
       so a partner build can retune it. */
    --w-strong: var(--fg-on-dark, #fff);
    --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: var(--w-strong, #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: var(--w-strong, #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: var(--w-strong, #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: var(--w-strong, #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: var(--w-strong, #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; }
/* The CTA sits directly in the account content flow (NOT inside one of our dark
   cards), so it can't rely on a white-translucent surface — on a light theme
   that's near-invisible white-on-white. Use a solid teal-tinted surface with a
   matching strong-foreground label that reads on both light and dark themes.
   Colour is forced so a theme's generic account-link hover can't dim the label;
   it is forced against OUR own teal surface, so it stays legible either way. */
.weekly-acc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--w-rmd);
    background: var(--w-btn-bg, color-mix(in srgb, var(--w-teal) 16%, var(--w-surface)));
    border: 1px solid color-mix(in srgb, var(--w-teal) 40%, transparent);
    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: var(--w-strong, #fff) !important; }
.weekly-acc-btn:hover { background: var(--w-btn-bg-hover, color-mix(in srgb, var(--w-teal) 26%, var(--w-surface))); 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; }
    .weekly-checkpoints { padding: 16px 16px 6px; }
    /* keep the chevron, drop the wordy count so the summary stays on one line */
    .weekly-cp-toggle-more .weekly-cp-toggle-count { display: none; }
}

/* carrier checkpoint timeline (Weekly /tracking) */
.weekly-checkpoints { padding: 16px 22px 6px; border-top: 1px solid var(--w-line-2); }
.weekly-cp-status { --weekly-pill: var(--w-teal); }

/* collapsed-by-default accordion: latest event stays visible, full history on expand */
.weekly-cp-acc { margin: 0; }
.weekly-cp-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    list-style: none;            /* hide the default disclosure triangle (FF) */
    padding: 2px 0;
}
.weekly-cp-toggle::-webkit-details-marker { display: none; } /* Safari/Chrome */
.weekly-cp-summary { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.weekly-cp-summary-msg {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--w-strong, #fff);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weekly-cp-summary-meta {
    font-size: 12px;
    color: var(--w-fg3);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weekly-cp-toggle-more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--w-teal);
    white-space: nowrap;
}
.weekly-cp-toggle-more .weekly-i { width: 16px; height: 16px; transition: transform .2s; }
.weekly-cp-acc[open] .weekly-cp-toggle-more .weekly-i { transform: rotate(90deg); }
.weekly-cp-toggle:hover .weekly-cp-toggle-more { color: var(--w-strong, #fff); }
.weekly-cp-acc[open] .weekly-cp-list { margin-top: 16px; }

.weekly-cp-list { list-style: none; margin: 0; padding: 0; }
.weekly-cp { position: relative; padding: 0 0 16px 24px; }
/* Theme/WooCommerce account `li` rules can out-rank the indent above and drop the
   body onto the absolutely-positioned dot. This plugin ships across several themes
   (DROIX light, GPD dark, partners) of unknown selector specificity, so force just
   this one property — same documented override pattern as .weekly-acc-head h3. */
.weekly-acc .weekly-checkpoints .weekly-cp { padding-left: 24px !important; }
.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: var(--w-strong, #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); }