/**
 * My Account Page — Navigation & Layout
 * Exist Green Favorites Plugin
 *
 * Responsive strategy:
 *   ≥1024px  → vertical sidebar nav + content side-by-side
 *   <1024px  → horizontal swipeable pill strip (single row)
 */

/* ═══════════════════════════════════════════
   0. Clean page chrome — hide breadcrumbs,
      title, and separator on My Account
   ═══════════════════════════════════════════ */
body.woocommerce-account .breadcrumb,
body.woocommerce-account .entry-header {
    display: none !important;
}

/* ═══════════════════════════════════════════
   1. Reset WooCommerce float layout
   Use !important to beat woocommerce-layout.css
   which sets float/width with same specificity.
   ═══════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    width: 100% !important;
    margin-bottom: 1.25rem;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    padding: 0;
}

.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════
   2. Shared nav item base styles (all sizes)
   ═══════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    font-family: brandon-grotesque, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    transition: all 0.2s ease;
    line-height: 1.3;
}

/* Logout — muted in all layouts */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #666;
}

/* ═══════════════════════════════════════════
   3. Horizontal swipeable pill strip (default / <1024px)
   Mirrors simple-subcategory-filter pattern
   ═══════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.5rem;
    padding: 0.25rem 0 0.5rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(165, 204, 188, 0.4) rgba(0, 0, 0, 0.05);
    /* Fade hint on right edge */
    mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    height: 6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    margin: 0 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar-thumb {
    background: rgba(165, 204, 188, 0.4);
    border-radius: 3px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar-thumb:hover {
    background: rgba(165, 204, 188, 0.7);
}

/* Individual pill items */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    flex: 0 0 auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 0.625rem 1rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    border-color: #a5ccbc;
    background: rgba(165, 204, 188, 0.05);
    box-shadow: 0 2px 6px rgba(165, 204, 188, 0.2);
}

/* Active state — horizontal pills */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--current a {
    background: linear-gradient(135deg, #e0f7f9, #ddedeb);
    border-color: #a5ccbc;
    color: #000;
    box-shadow: 0 2px 6px rgba(165, 204, 188, 0.3);
}

/* ═══════════════════════════════════════════
   4. Per-item accent colors (active states)
   ═══════════════════════════════════════════ */

/* Shopping List — blue */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--shopping-list.is-active a {
    background: linear-gradient(135deg, rgba(135, 206, 235, 0.15), rgba(135, 206, 235, 0.08));
    border-color: rgba(135, 206, 235, 0.5);
}

/* Wishlist — green */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist.is-active a {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(46, 204, 113, 0.08));
    border-color: rgba(46, 204, 113, 0.5);
}

/* Buy Again — amber */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--buy-again.is-active a {
    background: linear-gradient(135deg, rgba(240, 173, 78, 0.15), rgba(240, 173, 78, 0.08));
    border-color: rgba(240, 173, 78, 0.5);
}

/* Logout — distinct */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    border-color: #e2e8f0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    border-color: #cbd5e0;
    background: rgba(0, 0, 0, 0.03);
}

/* ═══════════════════════════════════════════
   5. Sidebar layout (≥1024px)
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) {
    /* Flex container: sidebar + content */
    .woocommerce-account .entry-content > .woocommerce,
    .woocommerce-account .woocommerce {
        display: flex !important;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: flex-start;
    }

    /* WooCommerce notices span full width */
    .woocommerce-account .woocommerce > .woocommerce-message,
    .woocommerce-account .woocommerce > .woocommerce-error,
    .woocommerce-account .woocommerce > .woocommerce-info,
    .woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
        flex-basis: 100%;
    }

    /* Sidebar nav */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 220px !important;
        min-width: 220px;
        flex: 0 0 220px;
        margin-bottom: 0;
        position: sticky;
        top: var(--eg-anchor-offset, 140px);
    }

    /* Vertical list — override horizontal scroll */
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
        overflow-y: visible;
        gap: 0.25rem;
        padding: 0;
        mask-image: none;
        -webkit-mask-image: none;
        scrollbar-width: auto;
    }

    /* Sidebar item — clean list style, no cards */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
        background: transparent;
        border: none;
        border-left: 3px solid transparent;
        border-radius: 0 6px 6px 0;
        box-shadow: none;
        padding: 0.625rem 1rem 0.625rem 0.875rem;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
        background: rgba(165, 204, 188, 0.08);
        border-left-color: #a5ccbc;
        box-shadow: none;
    }

    /* Active state — sidebar */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--current a {
        background: linear-gradient(135deg, #e0f7f9, #ddedeb);
        border-left-color: #2c5e54;
        color: #000;
        box-shadow: none;
        font-weight: 700;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--current a:hover {
        box-shadow: none;
    }

    /* Per-item accent overrides for sidebar */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--shopping-list.is-active a {
        border-left-color: rgba(135, 206, 235, 0.7);
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist.is-active a {
        border-left-color: rgba(46, 204, 113, 0.7);
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--buy-again.is-active a {
        border-left-color: rgba(240, 173, 78, 0.7);
    }

    /* Group separators — visual dividers between nav sections */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--earthie-rewards,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e2e8f0;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
        border: none;
        border-left: 3px solid transparent;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
        background: rgba(0, 0, 0, 0.03);
        border-left-color: #cbd5e0;
    }

    /* Content area — fills remaining space */
    .woocommerce-account .woocommerce-MyAccount-content {
        flex: 1 !important;
        width: auto !important;
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════
   6. Content area — page titles
   ═══════════════════════════════════════════ */
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 700;
    color: #222;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(165, 204, 188, 0.3);
}

/* ═══════════════════════════════════════════
   7. Account Details form styling
   ═══════════════════════════════════════════ */

/* Constrain form width */
.woocommerce-account .woocommerce-MyAccount-content .edit-account {
    max-width: 720px;
}

/* Form labels */
.woocommerce-account .edit-account label {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    display: block;
    margin-bottom: 0.375rem;
}

.woocommerce-account .edit-account label .required {
    color: #b91c1c;
}

/* Input fields */
.woocommerce-account .edit-account .input-text,
.woocommerce-account .edit-account input[type="text"],
.woocommerce-account .edit-account input[type="email"],
.woocommerce-account .edit-account input[type="password"] {
    padding: 0.625rem 0.75rem;
    border: 1px solid #d3d6da;
    border-radius: 6px;
    background: #fff;
    font-family: brandon-grotesque, sans-serif;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-account .edit-account .input-text:focus,
.woocommerce-account .edit-account input[type="text"]:focus,
.woocommerce-account .edit-account input[type="email"]:focus,
.woocommerce-account .edit-account input[type="password"]:focus {
    border-color: #a5ccbc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(165, 204, 188, 0.15);
}

/* Display name description */
.woocommerce-account .edit-account #account_display_name_description {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: #555;
}

.woocommerce-account .edit-account #account_display_name_description em {
    font-style: normal;
}

/* Password change fieldset */
.woocommerce-account .edit-account fieldset {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.woocommerce-account .edit-account fieldset legend {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2c5e54;
    padding: 0 0.5rem;
}

/* Save button — brand CTA */
.woocommerce-account .edit-account button[name="save_account_details"],
.woocommerce-account .edit-account .woocommerce-Button {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: #2c5e54;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: brandon-grotesque, sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.4;
}

.woocommerce-account .edit-account button[name="save_account_details"]:hover,
.woocommerce-account .edit-account .woocommerce-Button:hover {
    background: #1e4a3f;
    box-shadow: 0 4px 12px rgba(44, 94, 84, 0.25);
}

/* ═══════════════════════════════════════════
   8. Orders table
   ═══════════════════════════════════════════ */

/* Table container */
.woocommerce-account .woocommerce-orders-table {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    overflow: hidden;
    font-family: brandon-grotesque, sans-serif;
    font-size: 14px;
}

/* Header row */
.woocommerce-account .woocommerce-orders-table thead th {
    background: #fafbfa;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    text-align: left;
}

/* Body cells */
.woocommerce-account .woocommerce-orders-table tbody th,
.woocommerce-account .woocommerce-orders-table tbody td {
    padding: 0.875rem 1rem;
    border-top: 1px solid #f0f0f0;
    vertical-align: middle;
    color: #333;
}

/* Alternating rows */
.woocommerce-account .woocommerce-orders-table tbody tr:nth-child(even) td,
.woocommerce-account .woocommerce-orders-table tbody tr:nth-child(even) th {
    background: #fafbfa;
}

/* First row — no top border (header already has bottom border) */
.woocommerce-account .woocommerce-orders-table tbody tr:first-child td,
.woocommerce-account .woocommerce-orders-table tbody tr:first-child th {
    border-top: none;
}

/* Order number link */
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
    color: #2c5e54;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Status badges ── */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
    font-size: 12px;
    font-weight: 600;
}

/* Color-coded status via row class — wrap status text in visual treatment */
.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
    color: #166534;
}

.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
    color: #1e5f8a;
}

.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
    color: #92400e;
}

.woocommerce-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
    color: #92400e;
}

.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
    color: #8b2a11;
}

/* Ready for pickup */
.woocommerce-account .woocommerce-orders-table__row--status-ready-pickup .woocommerce-orders-table__cell-order-status {
    color: #166534;
}

/* ── Action buttons ── */

/* Reset ALL action buttons in the orders table */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    display: inline-block;
    font-family: brandon-grotesque, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0.125rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-height: auto;
    cursor: pointer;
}

/* View → text link */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .view {
    color: #2c5e54;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .view:hover {
    color: #1e4a3f;
}

/* Pay → secondary bordered pill */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .pay {
    padding: 0.3rem 0.75rem;
    background: rgba(135, 206, 235, 0.12);
    border: 1.5px solid rgba(135, 206, 235, 0.4);
    border-radius: 4px;
    color: #0f4c3a;
    text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .pay:hover {
    border-color: #a5ccbc;
    background: rgba(165, 204, 188, 0.15);
}

/* Cancel → muted red pill */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .cancel {
    padding: 0.3rem 0.75rem;
    background: #fff3f0;
    border: 1.5px solid #e7b4a8;
    border-radius: 4px;
    color: #8b2a11;
    text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .cancel:hover {
    border-color: #d4948a;
    background: #fde8e3;
}

/* ── Pagination ── */
.woocommerce-account .woocommerce-pagination {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.woocommerce-account .woocommerce-pagination .button {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: #fff;
    border: 1.5px solid #a5ccbc;
    border-radius: 6px;
    color: #2c5e54;
    font-family: brandon-grotesque, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.woocommerce-account .woocommerce-pagination .button:hover {
    background: #f0f7f5;
    border-color: #2c5e54;
}

/* ═══════════════════════════════════════════
   9. Dashboard — quick-link cards
   ═══════════════════════════════════════════ */

/* Hide default WooCommerce dashboard paragraphs when our cards are present.
   :has() targets <p> tags that precede .eg-dashboard (dashboard page only). */
.woocommerce-account .woocommerce-MyAccount-content:has(.eg-dashboard) > p {
    display: none;
}

/* Dashboard wrapper */
.eg-dashboard {
    margin-top: 0.5rem;
}

.eg-dashboard__greeting {
    font-family: brandon-grotesque, sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 1.25rem;
}

/* Quick-link grid */
.eg-dashboard__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.eg-dashboard__card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eg-dashboard__card:hover {
    border-color: #a5ccbc;
    box-shadow: 0 2px 8px rgba(165, 204, 188, 0.2);
}

.eg-dashboard__card-title {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #222;
}

.eg-dashboard__card-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}

/* Rewards preview */
.eg-dashboard__rewards {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    background: linear-gradient(135deg, #e0f7f9, #ddedeb);
    text-decoration: none;
    transition: border-color 0.2s ease;
    margin-bottom: 1rem;
}

.eg-dashboard__rewards:hover {
    border-color: #a5ccbc;
}

.eg-dashboard__rewards-label {
    font-family: brandon-grotesque, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2c5e54;
}

.eg-dashboard__rewards-balance {
    font-family: brandon-grotesque, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c5e54;
}

/* ═══════════════════════════════════════════
   10. Responsive — tablet (≤768px)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 0.5rem 0.75rem;
        font-size: 13px;
    }

    .eg-dashboard__grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   11. Responsive — phone (≤480px)
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        font-size: 12px;
        padding: 0.5rem 0.625rem;
    }

    /* Full-width save button on mobile */
    .woocommerce-account .edit-account button[name="save_account_details"],
    .woocommerce-account .edit-account .woocommerce-Button {
        width: 100%;
        text-align: center;
    }

    .eg-dashboard__card {
        padding: 0.875rem 1rem;
    }
}