/* Account Page - Flat Sections Matching Checkout */
:root {
    --account-surface: var(--surface-2, #f3f4f6);
    --account-card: var(--surface-1, #ffffff);
    --account-radius: var(--border-radius, 16px);
    --account-text: var(--black, #111827);
    --account-text-muted: var(--text-muted);
    --account-cta: var(--primary, #3D4C3D);
    --account-transition: all 0.2s ease;
}

/* Hide default page header */
body.woocommerce-account .page-header {
    display: none !important;
}

body.woocommerce-account {
    background: var(--white);
}

/* Main Container */
body.woocommerce-account .woocommerce {
    color: var(--account-text);
    max-width: none;
    margin: 0;
    padding: 40px 0;
    box-sizing: border-box;
}

body.woocommerce-account .jk-account-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.woocommerce-account .jk-account-section {
    background: var(--account-surface);
    border: 1px solid var(--border);
    border-radius: var(--account-radius);
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 12px 30px rgba(var(--brand-primary-rgb), 0.05);
}

body.woocommerce-account .jk-account-auth-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.woocommerce-account:not(.logged-in) .jk-account-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.woocommerce-account .jk-account-auth-block h2 {
    margin: 0 0 8px;
}

body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
    border: none;
    padding: 0;
    margin: 0;
}

body.woocommerce-account .woocommerce form.login,
body.woocommerce-account .woocommerce form.register {
    border: none;
    padding: 0;
    margin: 0;
}

/* Notices */
body.woocommerce-account .woocommerce-notices-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error {
    background: var(--account-surface);
    border: none !important;
    border-radius: var(--account-radius);
    color: var(--account-text);
    padding: 14px 18px;
    margin: 0;
}
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-error::before {
    display: none;
}
body.woocommerce-account .woocommerce-error {
    background: var(--white);
    background: color-mix(in srgb, var(--cta-2) 12%, var(--white));
    color: var(--cta-2);
}
body.woocommerce-account .woocommerce-message {
    background: var(--white);
    background: color-mix(in srgb, var(--cta-3) 12%, var(--white));
    color: var(--cta-3);
}

/* Navigation */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    background: transparent;
    border-radius: 0;
    padding: 0;
    float: none;
    width: 100%;
    box-sizing: border-box;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--account-radius);
    background: var(--account-card);
    color: var(--account-text);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--account-transition);
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    background: var(--surface-4);
}

body.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
    background: var(--account-cta);
    color: var(--white);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-left: auto;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    background: var(--account-surface);
    color: var(--account-text);
}

/* Main Content */
body.woocommerce-account .woocommerce-MyAccount-content {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    float: none;
    width: 100%;
    min-height: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > *:first-child {
    margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
    margin: 0 0 16px;
    color: var(--account-text);
    font-size: 1.4rem;
    font-weight: 700;
}

body.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-size: 1.15rem;
    margin: 20px 0 14px;
}

/* Tables */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    border: none;
    background: transparent;
    margin: 0 0 20px;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
    background: transparent;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    background: transparent;
    padding: 10px 14px;
    border: none;
    color: var(--account-text-muted);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr {
    background: var(--account-card);
    border-radius: var(--account-radius);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
    padding: 14px;
    border: none;
    color: var(--account-text);
    vertical-align: middle;
    background: var(--account-card);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr td:first-child {
    border-radius: var(--account-radius) 0 0 var(--account-radius);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr td:last-child {
    border-radius: 0 var(--account-radius) var(--account-radius) 0;
}

/* Add spacing between table rows */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr {
    display: table;
    width: 100%;
    margin-bottom: 8px;
}

/* Order status badges */
body.woocommerce-account .woocommerce-orders-table__cell-order-status mark {
    background: var(--account-surface);
    color: var(--account-text);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Buttons */
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-Button,
body.woocommerce-account .woocommerce-button,
body.woocommerce-account a.button {
    background: var(--account-card) !important;
    color: var(--account-text) !important;
    border: none !important;
    border-radius: var(--account-radius);
    padding: 12px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: var(--account-transition);
}

body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-button:hover,
body.woocommerce-account a.button:hover {
    background: var(--border) !important;
    color: var(--account-text) !important;
}

/* Forms */
body.woocommerce-account .form-row {
    margin-bottom: 16px;
}

body.woocommerce-account .form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--account-text);
    font-size: 0.95rem;
}

body.woocommerce-account .form-row .required {
    color: var(--cta-2);
}

body.woocommerce-account .form-row input.input-text,
body.woocommerce-account .form-row textarea,
body.woocommerce-account .form-row select,
body.woocommerce-account .select2-container--default .select2-selection--single {
    width: 100%;
    background: var(--account-card);
    border: none;
    border-radius: var(--account-radius);
    padding: 12px 14px;
    color: var(--account-text);
    box-sizing: border-box;
    transition: var(--account-transition);
    font-size: 0.95rem;
}

body.woocommerce-account .form-row textarea {
    min-height: 120px;
    resize: vertical;
}

body.woocommerce-account .form-row input.input-text:focus,
body.woocommerce-account .form-row textarea:focus,
body.woocommerce-account .form-row select:focus,
body.woocommerce-account .select2-container--default .select2-selection--single:focus,
body.woocommerce-account .select2-container--default .select2-selection--single:focus-visible {
    outline: 2px solid var(--account-text);
    outline-offset: 2px;
}

/* Fieldset */
body.woocommerce-account fieldset {
    border: none;
    padding: 0;
    margin: 0 0 24px;
}

body.woocommerce-account legend {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--account-text);
    margin-bottom: 16px;
}

/* Address Cards */
body.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

body.woocommerce-account .woocommerce-Address {
    background: var(--account-card);
    padding: 20px;
    border-radius: var(--account-radius);
    width: 100%;
    max-width: none;
    min-width: 0;
}

body.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}

body.woocommerce-account .woocommerce-Address address {
    font-style: normal;
    line-height: 1.6;
    color: var(--account-text-muted);
}

/* Downloads */
body.woocommerce-account .woocommerce-MyAccount-downloads {
    display: grid;
    gap: 12px;
}

/* Login/Register Forms (Non-logged-in) */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
    border: none;
    padding: 0;
    margin: 0;
}

body.woocommerce-account .woocommerce form.login,
body.woocommerce-account .woocommerce form.register,
body.woocommerce-account .woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-EditAccountForm {
    border: none;
    padding: 0;
    margin: 0;
}

body.woocommerce-account .woocommerce-EditAccountForm .jk-account-password {
    margin-top: 12px;
}

body.woocommerce-account .woocommerce-EditAccountForm .jk-account-password legend {
    margin-bottom: 8px;
    padding-top: 20px;
}

body.woocommerce-account:not(.logged-in) .woocommerce {
    padding-top: 60px;
}

body.woocommerce-account:not(.logged-in) .u-columns {
    display: block;
    margin: 0;
}

body.woocommerce-account:not(.logged-in) .u-columns::before,
body.woocommerce-account:not(.logged-in) .u-columns::after {
    content: none;
    display: none;
}

body.woocommerce-account:not(.logged-in) .u-column1,
body.woocommerce-account:not(.logged-in) .u-column2 {
    float: none;
    width: 100%;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
}

body.woocommerce-account:not(.logged-in) h2 {
    margin: 0 0 16px;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Responsive Design - Mobile First */
@media (max-width: 992px) {
    body.woocommerce-account .woocommerce {
        padding: 40px 0;
    }

    body.woocommerce-account .jk-account-section {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    body.woocommerce-account .woocommerce {
        padding: 40px 0;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation ul {
        gap: 8px;
    }

    body.woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }

    body.woocommerce-account:not(.logged-in) .jk-account-container {
        grid-template-columns: 1fr;
    }

    /* Stack table on mobile */
    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
        font-size: 0.9rem;
    }

    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
        display: none;
    }

    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        margin-bottom: 12px;
    }

    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-radius: 0 !important;
        border-bottom: none;
    }

    body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td::before {
        content: attr(data-title);
        font-weight: 700;
        color: var(--account-text-muted);
        font-size: 0.85rem;
        text-transform: uppercase;
    }
}

@media (max-width: 480px) {
    body.woocommerce-account .woocommerce {
        padding: 40px 0;
    }

    body.woocommerce-account .jk-account-section {
        padding: 16px;
    }

    body.woocommerce-account .woocommerce-MyAccount-content h2 {
        font-size: 1.25rem;
    }
}
