/* ══════════════════════════════════════════════════════════════
   Vanguard — My Account
   Primary #1264AF · Secondary #EA801A

   Built to sit on the site's dark background. Everything is scoped
   under .woocommerce-account (and .vg-docs-panel, which also shows
   on the order-received page) so no other page is touched.
   ══════════════════════════════════════════════════════════════ */

.woocommerce-account {
    --vg-primary:      #1264AF;
    --vg-primary-dark: #0E4E88;
    --vg-primary-soft: rgba(18, 100, 175, .12);
    --vg-accent:       #EA801A;
    --vg-accent-soft:  rgba(234, 128, 26, .14);

    --vg-surface:      #16181C;
    --vg-surface-2:    #1D2026;
    --vg-line:         rgba(255, 255, 255, .09);
    --vg-text:         #F2F4F7;
    --vg-muted:        #98A2B3;
    --vg-radius:       14px;
}

/* ── Layout ─────────────────────────────────────────────────── */

/* Flexbox, NOT a two-column grid.
   WooCommerce prints an empty <div class="woocommerce-notices-wrapper"> as the
   first child of .woocommerce, and themes add their own wrappers on top. In a
   two-column grid that empty div silently claims cell 1, which shoves the nav
   into the right column and drops the content into the narrow left one on the
   next row. Flex with a full-width notices row is immune to however many extra
   siblings the theme decides to inject. */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 64px;
}

/* Anything that isn't the nav or the content spans the full width and wraps,
   rather than eating a column. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce > .woocommerce-info,
.woocommerce-account .woocommerce > .woocommerce-error {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
}

/* An empty notices wrapper must not add a 28px gap above the columns. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
    display: none;
}

/* ── Sidebar nav ────────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 260px;
    max-width: 260px;
    width: 260px;
    float: none;
    background: var(--vg-surface);
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    padding: 10px;
    position: sticky;
    top: 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--vg-muted);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: rgba(255, 255, 255, .04);
    color: var(--vg-text);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--vg-primary-soft);
    border-left-color: var(--vg-accent);
    color: #fff;
}

/* Log out sits apart from the rest. */
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--vg-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a { color: #F97066; }
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a:hover {
    background: rgba(249, 112, 102, .1);
    color: #FDA29B;
}

/* ── Content panel ──────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 0;
    min-width: 0;   /* lets a wide table shrink instead of overflowing */
    max-width: 100%;
    overflow-x: auto;   /* last-resort guard so nothing escapes the card */
    width: auto;
    float: none;
    background: var(--vg-surface);
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    padding: 28px 30px;
    color: var(--vg-text);
}

.woocommerce-account .woocommerce-MyAccount-content p { color: #D0D5DD; line-height: 1.65; }
.woocommerce-account .woocommerce-MyAccount-content a { color: #6BA5DC; }
.woocommerce-account .woocommerce-MyAccount-content a:hover { color: var(--vg-accent); }

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--vg-line);
}

/* ── Orders table ───────────────────────────────────────────── */

.woocommerce-account .woocommerce-orders-table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    background: transparent;
    border: 0;
}

.woocommerce-account .woocommerce-orders-table thead th {
    background: transparent;
    border: 0;
    padding: 0 16px 6px;
    color: var(--vg-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
}

.woocommerce-account .woocommerce-orders-table tbody tr {
    background: var(--vg-surface-2);
    transition: transform .16s ease, box-shadow .16s ease;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.woocommerce-account .woocommerce-orders-table tbody td {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--vg-line);
    border-bottom: 1px solid var(--vg-line);
    padding: 18px 16px;
    color: var(--vg-text);
    font-size: 14px;
    vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table tbody td:first-child {
    border-left: 1px solid var(--vg-line);
    border-radius: 12px 0 0 12px;
}
.woocommerce-account .woocommerce-orders-table tbody td:last-child {
    border-right: 1px solid var(--vg-line);
    border-radius: 0 12px 12px 0;
    text-align: right;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover { color: var(--vg-accent); }

.woocommerce-account .woocommerce-orders-table__cell-order-date {
    color: var(--vg-muted);
    white-space: nowrap;
}

/* Give the table room to breathe: the money and action columns get what they
   need, the rest shares the remainder. Without this the theme's narrow
   defaults squeezed the date into three stacked lines. */
/* Column sizing. The total column must NOT be nowrap — WooCommerce renders it
   as "RM15,508.00 for 6 items", and forcing that onto one line pushed the
   table's min-content width past the card and spilled the rows out the right
   edge. Only genuinely short cells get nowrap. */
.woocommerce-account .woocommerce-orders-table { table-layout: auto; }
.woocommerce-account .woocommerce-orders-table__cell-order-number  { width: 1%; white-space: nowrap; }
.woocommerce-account .woocommerce-orders-table__cell-order-date    { width: 1%; white-space: nowrap; }
.woocommerce-account .woocommerce-orders-table__cell-order-total   { min-width: 150px; }
.woocommerce-account td.vg-docs, .woocommerce-account th.vg-docs   { width: 1%; white-space: nowrap; }

/* Actions can hold two buttons (Pay + View). Let them wrap onto a second line
   rather than force the whole table wider than its container. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions {
    width: 1%;
    white-space: normal;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    margin: 2px 0 2px 6px;
}

/* Status pill — colour comes from the order status class WooCommerce
   already puts on the row, so no markup change is needed. */
/* The dot is positioned absolutely rather than pushed inline.
   The theme wraps the status text in its own block-level element, so an
   inline-block ::before became the first line of that block and the label
   dropped underneath it. Taking the dot out of flow entirely means it cannot
   be affected by whatever markup the template puts inside the cell. */
.woocommerce-account td.woocommerce-orders-table__cell-order-status {
    position: relative;
    padding-left: 34px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}
.woocommerce-account td.woocommerce-orders-table__cell-order-status::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--vg-muted);
}
.woocommerce-account tr.order-completed  .woocommerce-orders-table__cell-order-status::before { background: #12B76A; }
.woocommerce-account tr.order-processing .woocommerce-orders-table__cell-order-status::before { background: var(--vg-accent); }
.woocommerce-account tr.order-on-hold    .woocommerce-orders-table__cell-order-status::before { background: #F79009; }
.woocommerce-account tr.order-pending    .woocommerce-orders-table__cell-order-status::before { background: #98A2B3; }
.woocommerce-account tr.order-cancelled  .woocommerce-orders-table__cell-order-status::before,
.woocommerce-account tr.order-failed     .woocommerce-orders-table__cell-order-status::before,
.woocommerce-account tr.order-refunded   .woocommerce-orders-table__cell-order-status::before { background: #F04438; }

/* ── Buttons ────────────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 22px;
    background: var(--vg-primary);
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, transform .12s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input.button:hover {
    background: var(--vg-primary-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { min-height: 36px; padding: 8px 18px; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button + .button { margin-left: 6px; }

/* Pay / secondary emphasis uses the accent. */
.woocommerce-account .woocommerce-MyAccount-content .button.pay,
.woocommerce-account .woocommerce-MyAccount-content .button.vg-accent { background: var(--vg-accent); }
.woocommerce-account .woocommerce-MyAccount-content .button.pay:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.vg-accent:hover { background: #CE6E12; }

/* ── Order detail tables ────────────────────────────────────── */

.woocommerce-account .woocommerce-table--order-details,
.woocommerce-account .woocommerce-table--customer-details {
    width: 100%;
    background: var(--vg-surface-2);
    border: 1px solid var(--vg-line);
    border-radius: 12px;
    overflow: hidden;
    border-collapse: collapse;
}

.woocommerce-account .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-table--order-details td,
.woocommerce-account .woocommerce-table--customer-details th,
.woocommerce-account .woocommerce-table--customer-details td {
    border-color: var(--vg-line);
    color: var(--vg-text);
    padding: 14px 16px;
}

.woocommerce-account .woocommerce-table--order-details tfoot th { color: var(--vg-muted); font-weight: 600; }
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
}

/* ── Addresses ──────────────────────────────────────────────── */

.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.woocommerce-account .woocommerce-Address {
    width: auto;
    float: none;
    background: var(--vg-surface-2);
    border: 1px solid var(--vg-line);
    border-radius: 12px;
    padding: 20px 22px;
}
.woocommerce-account .woocommerce-Address address { color: #D0D5DD; font-style: normal; line-height: 1.7; }

/* ── Forms ──────────────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-account form.login label,
.woocommerce-account form.register label { color: #D0D5DD; font-weight: 600; font-size: 13px; }

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account form.login input[type="text"],
.woocommerce-account form.login input[type="password"] {
    width: 100%;
    background: #101216;
    border: 1px solid var(--vg-line);
    border-radius: 8px;
    padding: 11px 14px;
    color: var(--vg-text);
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce-account form.login input:focus {
    outline: 0;
    border-color: var(--vg-primary);
    box-shadow: 0 0 0 3px var(--vg-primary-soft);
}

/* ── Notices ────────────────────────────────────────────────── */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
    background: var(--vg-surface-2);
    border-top: 0;
    border-left: 3px solid var(--vg-primary);
    border-radius: 10px;
    color: var(--vg-text);
    padding: 16px 20px;
}
.woocommerce-account .woocommerce-message { border-left-color: #12B76A; }
.woocommerce-account .woocommerce-error   { border-left-color: #F04438; }
.woocommerce-account .woocommerce-info    { border-left-color: var(--vg-accent); }

/* ── Documents panel (also shows on order-received) ─────────── */

.vg-docs-panel {
    margin: 28px 0 0;
    padding: 22px 24px;
    background: #1D2026;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
}

.vg-docs-panel__title {
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.vg-docs-panel__list { list-style: none; margin: 0; padding: 0; }

.vg-docs-panel__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.vg-docs-panel__item:last-child { border-bottom: 0; padding-bottom: 0; }

.vg-docs-panel__icon {
    flex: 0 0 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 100, 175, .16);
    border: 1px solid rgba(18, 100, 175, .4);
    border-radius: 10px;
    color: #6BA5DC;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.vg-docs-panel__meta { flex: 1 1 auto; min-width: 0; }

.vg-docs-panel__name {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vg-docs-panel__sub { display: block; margin-top: 3px; color: #98A2B3; font-size: 12.5px; }

.vg-docs-panel__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 20px;
    background: #EA801A;
    color: #fff !important;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s ease, transform .12s ease;
}
.vg-docs-panel__btn:hover { background: #CE6E12; transform: translateY(-1px); }

/* Documents pill in the orders table */
.vg-doc-pill {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(234, 128, 26, .16);
    border: 1px solid rgba(234, 128, 26, .45);
    border-radius: 999px;
    color: #EA801A !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.vg-doc-pill:hover { background: rgba(234, 128, 26, .28); }
.vg-doc-pill--none {
    background: transparent;
    border-color: transparent;
    color: #667085 !important;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
    .woocommerce-account .woocommerce { gap: 18px; }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        position: static;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .woocommerce-account .woocommerce-MyAccount-content { flex: 0 0 100%; }
    .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 6px; }
    .woocommerce-account .woocommerce-MyAccount-navigation li a { border-left: 0; border-bottom: 3px solid transparent; }
    .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { border-left: 0; border-bottom-color: var(--vg-accent); }
    .woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout { border-top: 0; margin-top: 0; padding-top: 0; }
    .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .woocommerce-account .woocommerce-MyAccount-content { padding: 20px 18px; }

    .woocommerce-account .woocommerce-orders-table thead { display: none; }
    .woocommerce-account .woocommerce-orders-table tbody tr { display: block; margin-bottom: 12px; border-radius: 12px; }
    .woocommerce-account .woocommerce-orders-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border: 0;
        border-radius: 0 !important;
        padding: 11px 16px;
        text-align: right !important;
    }
    .woocommerce-account .woocommerce-orders-table tbody td::before {
        content: attr(data-title);
        color: #98A2B3;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    .woocommerce-account .woocommerce-orders-table tbody td:first-child { border-top: 1px solid var(--vg-line); border-radius: 12px 12px 0 0 !important; }
    .woocommerce-account .woocommerce-orders-table tbody td:last-child  { border-bottom: 1px solid var(--vg-line); border-radius: 0 0 12px 12px !important; }
    .woocommerce-account .woocommerce-orders-table tbody td:first-child { border-left: 1px solid var(--vg-line); border-right: 1px solid var(--vg-line); }
    .woocommerce-account .woocommerce-orders-table tbody td { border-left: 1px solid var(--vg-line); border-right: 1px solid var(--vg-line); }

    .vg-docs-panel { padding: 18px; }
    .vg-docs-panel__item { flex-wrap: wrap; }
    .vg-docs-panel__btn { width: 100%; justify-content: center; }
}