/*
 * My Account — Dashboard Polish
 * ─────────────────────────────────────────────────────────────────────────────
 * Enhances the WooCommerce My Account page layout and navigation.
 *
 * Forward-compatibility strategy:
 *   - Selectors target WC's documented, stable class names only
 *   - Layout uses CSS grid with fallback to block flow
 *   - No assumptions about internal element types (<mark>, <span>, etc.)
 *   - All enhancements are additive — if WC changes markup, content
 *     falls back to WC's own default styling gracefully
 *   - No !important
 *
 * Loaded only on account pages via enqueue.php conditional.
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ── Page Layout ───────────────────────────────────────────────────────── */
/* Grid with sidebar nav. Falls back to stacked blocks if WC changes      */
/* the wrapper class in a future version.                                  */

/* `body.`-prefixed so these win over WooCommerce's own account stylesheets, which
 * load after this file and otherwise cap the wrapper at 1000px and force the panels
 * to 30% / 70% widths. */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr; /* slim nav sidebar, content fills the rest */
    gap: var(--msk-space-8);
    align-items: start;
    inline-size: 100%;
    max-width: var(--wp--style--global--wide-size, 1340px);
    margin-inline: auto;
}

/* Clear the percentage widths / floats WooCommerce forces on the two panels so they
 * fill their grid tracks instead of collapsing to ~250px and stacking. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
    inline-size: auto;
    max-inline-size: none;
    min-inline-size: 0;
    float: none;
    margin: 0;
}

/* WC inserts an (often empty) notices wrapper as the first grid child, which throws
 * off auto-placement. Pin the panels explicitly: notices spans the top row, the nav
 * sits left (1/3), the content right (2/3). */
body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}
body.woocommerce-account .woocommerce-MyAccount-navigation {
    grid-column: 1;
}
body.woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 2;
}

@media (max-width: 782px) {
    body.woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
    }
    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-content {
        grid-column: 1;
    }
}

/* ── Navigation Sidebar ────────────────────────────────────────────────── */

.woocommerce-MyAccount-navigation {
    background: var(--msk-nav-bg, linear-gradient(160deg, #ae1b23, #8a1622));
    border: none;
    border-radius: var(--msk-radius-xl);
    padding: var(--msk-space-4);
}

@media (min-width: 783px) {
    .woocommerce-MyAccount-navigation {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--msk-space-4));
    }
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-1);
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    gap: var(--msk-space-3);
    padding: var(--msk-space-3) var(--msk-space-4);
    border-radius: var(--msk-radius-md);
    font-weight: 500;
    font-size: var(--msk-font-size-sm);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition:
        background-color var(--msk-duration-fast) var(--msk-ease-out),
        color            var(--msk-duration-fast) var(--msk-ease-out);
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

/* Active state — WC uses both class patterns depending on version */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li[class*="--active"] a {
    background-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
    font-weight: 700;
}

/* Logout — visually separated */
.woocommerce-MyAccount-navigation ul li[class*="customer-logout"] a {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--msk-font-size-xs);
    margin-block-start: var(--msk-space-4);
    border-block-start: 1px solid rgba(255, 255, 255, 0.25);
    padding-block-start: var(--msk-space-4);
    border-radius: 0;
}

/* ── Content Area ──────────────────────────────────────────────────────── */

.woocommerce-MyAccount-content {
    background: var(--msk-color-surface);
    border: 1px solid var(--msk-color-border);
    border-radius: var(--msk-radius-xl);
    padding: var(--msk-space-8) var(--msk-space-10);
}

@media (max-width: 782px) {
    .woocommerce-MyAccount-content {
        padding: var(--msk-space-6);
    }
}

/* Section headings */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-size: var(--msk-font-size-md);
    font-weight: 700;
    margin-block-end: var(--msk-space-6);
    padding-block-end: var(--msk-space-4);
    border-block-end: 1px solid var(--msk-color-border);
}

/* ── Orders Table ──────────────────────────────────────────────────────── */

.woocommerce-MyAccount-content table[class*="orders"],
.woocommerce-MyAccount-content table.shop_table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: var(--msk-font-size-sm);
}

.woocommerce-MyAccount-content table[class*="orders"] thead,
.woocommerce-MyAccount-content table.shop_table thead {
    background: var(--msk-color-surface-alt);
}

.woocommerce-MyAccount-content table[class*="orders"] th,
.woocommerce-MyAccount-content table.shop_table th {
    font-size: var(--msk-font-size-xs);
    font-weight: 600;
    letter-spacing: var(--msk-tracking-wider);
    text-transform: uppercase;
    color: var(--msk-color-text-muted);
    padding: var(--msk-space-3) var(--msk-space-4);
}

.woocommerce-MyAccount-content table[class*="orders"] td,
.woocommerce-MyAccount-content table.shop_table td {
    padding: var(--msk-space-4);
    border-block-end: 1px solid var(--msk-color-border);
    vertical-align: middle;
}

.woocommerce-MyAccount-content table[class*="orders"] tr:last-child td,
.woocommerce-MyAccount-content table.shop_table tr:last-child td {
    border-block-end: none;
}

/* ── Order Status ──────────────────────────────────────────────────────── */
/* In the orders table WC renders the status as plain text in the status cell and
 * puts the status on the ROW class (…__row--status-completed), not a badge element.
 * So colour the status cell text per status (the earlier `[class*="status-…"]`
 * selectors mis-matched the row and tinted the whole row). Colours are AA-safe on
 * white for small bold text. */

.woocommerce-orders-table__cell-order-status {
    font-weight: 700;
    font-size: var(--msk-font-size-xs);
    letter-spacing: var(--msk-tracking-wide);
    text-transform: uppercase;
}

.woocommerce-orders-table__row[class*="--status-completed"] .woocommerce-orders-table__cell-order-status {
    color: #166534;
}
.woocommerce-orders-table__row[class*="--status-processing"] .woocommerce-orders-table__cell-order-status {
    color: #1d4ed8;
}
.woocommerce-orders-table__row[class*="--status-on-hold"] .woocommerce-orders-table__cell-order-status {
    color: #92400e;
}
.woocommerce-orders-table__row[class*="--status-cancelled"] .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row[class*="--status-refunded"] .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row[class*="--status-failed"] .woocommerce-orders-table__cell-order-status {
    color: #b91c1c;
}
.woocommerce-orders-table__row[class*="--status-pending"] .woocommerce-orders-table__cell-order-status {
    color: #6d28d9;
}

/* ── Address Cards ─────────────────────────────────────────────────────── */

/* Lay billing + shipping in a clean two-column grid. WooCommerce otherwise floats
 * them at 48% (`.woocommerce .col2-set .col-1`, 0,3,0) and they stagger, so the
 * float/width overrides need matching specificity (body. prefix). */
body.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--msk-space-6);
}

/* WC's `.col2-set` clearfix ::before/::after become stray grid items that bump the
 * cards diagonally (billing → col 2, shipping → next row). Remove them. */
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after {
    content: none;
}
body.woocommerce-account .woocommerce-Addresses > .col-1,
body.woocommerce-account .woocommerce-Addresses > .col-2 {
    width: auto;
    inline-size: auto;
    float: none;
    margin: 0;
}

@media (max-width: 600px) {
    body.woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }
}

.woocommerce-MyAccount-content .woocommerce-Address {
    background: var(--msk-color-surface-alt);
    border-radius: var(--msk-radius-lg);
    padding: var(--msk-space-6);
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
    font-size: var(--msk-font-size-sm);
    font-weight: 600;
    letter-spacing: var(--msk-tracking-wide);
    text-transform: uppercase;
    color: var(--msk-color-text-muted);
    margin-block-end: var(--msk-space-4);
}

/* ── Rewards tab placeholder (until the rewards block is added) ─────────── */

.woocommerce-MyAccount-content .msk-rewards-stub {
    padding-block: var(--msk-space-8);
    text-align: center;
    color: var(--msk-color-text-muted);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Round every action button on the account pages (View order, Save changes,
 * Save address …) to match the site-wide Add-to-Cart button style. */

body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
    border-radius: var(--msk-woo-button-radius, var(--msk-radius-md));
}

/* ── Form Fields ───────────────────────────────────────────────────────── */

.woocommerce-MyAccount-content .form-row input,
.woocommerce-MyAccount-content .form-row select {
    border-radius: var(--msk-radius-md);
    border-color: var(--msk-color-border);
    transition: border-color var(--msk-duration-fast) var(--msk-ease-out),
                box-shadow   var(--msk-duration-fast) var(--msk-ease-out);
}

.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row select:focus {
    border-color: var(--msk-color-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--msk-color-accent) 20%, transparent);
    outline: none;
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────
 * WCAG 2.3.3 — honour users' OS-level motion preference. The 0.01ms
 * duration cancels visible motion while still firing transitionend /
 * animationend events that JS handlers may listen for.
 */
@media ( prefers-reduced-motion: reduce ) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Login / Register card (My Account, logged out) ─────────────────────────────
 * Pairs with the MSK form-login.php override. Centres the form as a shadowed card,
 * heading inside, bold labels, rounded inputs, and a bold slightly-rounded submit
 * button matching the Add-to-Cart style. Centred, smaller "Lost password" link.
 */
/* On the logged-out account page WC's `.woocommerce` wrapper is a grid whose track
 * squeezes the form; centre the card on the page with flex instead. */
.woocommerce:has(.woocommerce-form-login) {
    display: flex;
    justify-content: center;
}

/* On the login screen (logged out), hide the "My account" page title and reclaim its
 * whitespace so the card sits near the top. Scoped via :has() so logged-in account
 * pages keep their title. The content group's top padding is an inline theme style a
 * stylesheet can't override without !important, so instead we pull the content up by
 * that same amount (--wp--preset--spacing--60) and trim the card's own top margin. */
body:has(.woocommerce-form-login) .wp-block-post-title {
    display: none;
}
body:has(.woocommerce-form-login) .entry-content {
    margin-block-start: calc(-1 * var(--wp--preset--spacing--60, 4.5rem));
}
body:has(.woocommerce-form-login) .msk-login {
    margin-block-start: var(--msk-space-4, 1rem);
}

.msk-login {
    box-sizing: border-box;
    inline-size: 100%;
    max-width: 36rem;
    margin-inline: auto;
    margin-block: var(--msk-space-6, 1.5rem);
    padding: var(--msk-space-8, 2rem);
    background: var(--msk-login-bg, linear-gradient(160deg, #ae1b23, #8a1622));
    border: none;
    border-radius: var(--msk-radius-lg, 1rem);
    box-shadow: 0 10px 30px rgba(34, 34, 34, 0.18);
    color: #ffffff;
}

/* White text on the coloured login card; inputs keep dark text on their white field. */
.msk-login .msk-login__title,
.msk-login label,
.msk-login .lost_password a {
    color: #ffffff;
}
/* WC colours the required asterisk red (invisible on the gradient); force white.
 * Needs 4 classes to beat WC's `.woocommerce form .form-row .required` (0,3,2). */
body.woocommerce-account .msk-login .form-row .required {
    color: #ffffff;
}
.msk-login .lost_password a {
    text-decoration: underline;
}
.msk-login input.input-text,
.msk-login .woocommerce-Input {
    color: var(--msk-color-text-primary, #1a1a1a);
}

/* When registration is on, sit the two cards side by side and let them wrap. */
#customer_login.u-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    gap: var(--msk-space-6, 1.5rem);
}
#customer_login .u-column1,
#customer_login .u-column2 {
    flex: 1 1 22rem;
    max-width: 30rem;
}

.msk-login__title {
    margin-block: 0 var(--msk-space-5, 1.25rem);
    text-align: center;
    font-weight: 700;
}

.msk-login label {
    font-weight: 700;
}

/* Bigger, easier-to-read input fields (the submit button keeps its own size).
 * The font-size needs extra specificity to beat WooCommerce's blocktheme rule
 * (.woocommerce-page form .form-row input.input-text). */
.msk-login input.input-text,
.msk-login .woocommerce-Input {
    inline-size: 100%;
    border-radius: var(--msk-radius-md, 0.5rem);
    padding: 0.85rem 1rem;
}
.woocommerce-account .msk-login .form-row input.input-text,
.woocommerce-account .msk-login .woocommerce-Input {
    font-size: var(--msk-font-size-base, 1.0625rem);
}

.msk-login input.input-text:focus,
.msk-login .woocommerce-Input:focus {
    border-color: var(--msk-woo-accent, var(--msk-color-accent));
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--msk-woo-accent, var(--msk-color-accent)) 20%, transparent);
    outline: none;
}

/* Submit button — bold + slightly-rounded (Add-to-Cart style), full width. */
.msk-login .woocommerce-form-login__submit,
.msk-login .woocommerce-form-register__submit {
    inline-size: 100%;
    font-weight: 700;
    border-radius: var(--msk-woo-button-radius, var(--msk-radius-md));
}

/* Remember me sits on its own line above the button. */
.msk-login .woocommerce-form-login__rememberme {
    display: block;
    margin-block-end: var(--msk-space-3, 0.75rem);
    font-weight: 400;
}

/* Lost password — centred + smaller. */
.msk-login .lost_password {
    text-align: center;
    font-size: var(--msk-font-size-sm, 0.875rem);
    margin-block: var(--msk-space-4, 1rem) 0;
}