/* ==========================================================================
   M'Burger - My Account Page Styles
   Uses design tokens from variables.css
   ========================================================================== */

.mb-account {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--mb-space-xl) var(--mb-space-md) var(--mb-space-4xl);
    font-family: var(--mb-font-body, 'Inter', -apple-system, sans-serif);
}

/* Header */
.mb-account__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mb-space-xl);
    padding-bottom: var(--mb-space-lg);
    border-bottom: 2px solid var(--mb-cream-dark, #e8e0d4);
}

.mb-account__title {
    font-family: var(--mb-font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: var(--mb-text-3xl, clamp(1.6rem, 3vw, 2.2rem));
    font-weight: var(--mb-weight-medium, 500);
    color: var(--mb-dark, #1a1614);
    margin: 0 0 4px;
}

.mb-account__subtitle {
    font-size: var(--mb-text-base, 0.95rem);
    color: var(--mb-brown, #8b7355);
    margin: 0;
}

.mb-account__loyalty-badge {
    display: flex;
    align-items: center;
    gap: var(--mb-space-sm);
}

.mb-account__tier {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--mb-radius-full, 100px);
    font-size: var(--mb-text-xs, 0.75rem);
    font-weight: var(--mb-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--mb-tracking-wider, 0.1em);
}

.mb-account__tier--bronze {
    background: linear-gradient(135deg, #d4a574, #c49262);
    color: #fff;
}

.mb-account__tier--silver {
    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
    color: #fff;
}

.mb-account__tier--gold {
    background: linear-gradient(135deg, var(--mb-mustard, #d4a94b), #c49a3c);
    color: #fff;
}

.mb-account__tier--platinum {
    background: linear-gradient(135deg, var(--mb-dark, #1a1614), #3a3634);
    color: var(--mb-accent, #c8a090);
}

.mb-account__points {
    font-weight: var(--mb-weight-semibold, 600);
    color: var(--mb-mustard, #d4a94b);
    font-size: var(--mb-text-base, 1rem);
}

/* Layout */
.mb-account__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--mb-space-xl);
    align-items: start;
}

/* Navigation */
.mb-account__nav .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mb-account__nav .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 2px;
}

.mb-account__nav .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 16px;
    color: var(--mb-dark, #1a1614);
    text-decoration: none;
    font-size: var(--mb-text-sm, 0.9rem);
    font-weight: var(--mb-weight-medium, 500);
    border-radius: var(--mb-radius-md, 8px);
    transition: all var(--mb-transition-normal, 0.2s);
}

.mb-account__nav .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--mb-cream, #faf8f5);
    color: var(--mb-brown, #8b7355);
}

.mb-account__nav .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--mb-dark, #1a1614);
    color: var(--mb-cream, #faf8f5);
}

/* Logout link */
.mb-account__nav .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #d9534f;
}

.mb-account__nav .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: #fee2e2;
    color: #991b1b;
}

/* Content area */
.mb-account__content {
    min-height: 400px;
}

.mb-account__content .woocommerce-MyAccount-content {
    background: var(--mb-white, #ffffff);
    border: 1px solid var(--mb-cream-dark, #e8e0d4);
    border-radius: var(--mb-radius-lg, 12px);
    padding: var(--mb-space-lg);
}

/* Orders table */
.mb-account__content .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.mb-account__content .woocommerce-orders-table th {
    font-size: var(--mb-text-xs, 0.8rem);
    text-transform: uppercase;
    letter-spacing: var(--mb-tracking-wider, 0.1em);
    color: var(--mb-brown, #8b7355);
    font-weight: var(--mb-weight-medium, 500);
    padding: 12px 0;
    border-bottom: 2px solid var(--mb-cream-dark, #e8e0d4);
    text-align: left;
}

.mb-account__content .woocommerce-orders-table td {
    padding: 16px 0;
    border-bottom: 1px solid var(--mb-cream-medium, #f5f0e8);
    font-size: var(--mb-text-sm, 0.9rem);
    color: var(--mb-dark, #1a1614);
}

.mb-account__content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    font-weight: var(--mb-weight-semibold, 600);
    color: var(--mb-dark, #1a1614);
    text-decoration: none;
}

.mb-account__content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
    color: var(--mb-brown, #8b7355);
}

.mb-account__content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--mb-cream, #faf8f5);
    color: var(--mb-dark, #1a1614);
    border-radius: var(--mb-radius-full, 100px);
    font-size: var(--mb-text-xs, 0.8rem);
    font-weight: var(--mb-weight-medium, 500);
    text-decoration: none;
    transition: all var(--mb-transition-normal, 0.2s);
}

.mb-account__content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a:hover {
    background: var(--mb-accent, #c8a090);
    color: var(--mb-dark, #1a1614);
}

/* Account forms */
.mb-account__content .woocommerce-EditAccountForm label,
.mb-account__content .woocommerce-address-fields label {
    display: block;
    font-size: var(--mb-text-sm, 0.85rem);
    font-weight: var(--mb-weight-medium, 500);
    color: var(--mb-dark, #1a1614);
    margin-bottom: 6px;
}

.mb-account__content input[type="text"],
.mb-account__content input[type="email"],
.mb-account__content input[type="tel"],
.mb-account__content input[type="password"],
.mb-account__content select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--mb-cream-dark, #e8e0d4);
    border-radius: var(--mb-radius-md, 8px);
    font-family: var(--mb-font-body, 'Inter', sans-serif);
    font-size: var(--mb-text-base, 0.95rem);
    color: var(--mb-dark, #1a1614);
    background: var(--mb-cream, #faf8f5);
    transition: border-color var(--mb-transition-normal, 0.2s);
}

.mb-account__content input:focus,
.mb-account__content select:focus {
    border-color: var(--mb-accent, #c8a090);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 160, 144, 0.15);
}

.mb-account__content .woocommerce-Button,
.mb-account__content button[type="submit"] {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--mb-accent-light, #ddc0b4), var(--mb-accent, #c8a090));
    color: var(--mb-text-dark, #2e2c2a);
    font-family: var(--mb-font-body, 'Inter', sans-serif);
    font-size: var(--mb-text-sm, 0.85rem);
    font-weight: var(--mb-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--mb-tracking-wider, 0.1em);
    border: none;
    border-radius: var(--mb-radius-full, 100px);
    cursor: pointer;
    transition: all var(--mb-transition-normal, 0.2s);
    margin-top: var(--mb-space-md);
}

.mb-account__content .woocommerce-Button:hover,
.mb-account__content button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--mb-accent, #c8a090), var(--mb-accent-dark, #a8806e));
}

/* Messages */
.mb-account .woocommerce-message,
.mb-account .woocommerce-error,
.mb-account .woocommerce-info {
    border-radius: var(--mb-radius-md, 8px);
    padding: 16px 20px;
    margin-bottom: var(--mb-space-md);
    font-size: var(--mb-text-sm, 0.9rem);
}

/* Responsive */
@media (max-width: 768px) {
    .mb-account__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mb-space-md);
    }

    .mb-account__layout {
        grid-template-columns: 1fr;
        gap: var(--mb-space-lg);
    }

    .mb-account__nav .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .mb-account__nav .woocommerce-MyAccount-navigation ul li {
        margin-bottom: 0;
    }

    .mb-account__nav .woocommerce-MyAccount-navigation ul li a {
        padding: 8px 14px;
        font-size: var(--mb-text-xs, 0.8rem);
    }

    .mb-account__content .woocommerce-MyAccount-content {
        padding: var(--mb-space-md) var(--mb-space-sm);
    }
}