/* =============================================================================
   WOOCOMMERCE — My Account pages
   Uses Tailwind CSS variables from the compiled app.css (inlined before this file).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Account layout — sidebar nav + content
   ----------------------------------------------------------------------------- */
.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: calc(var(--spacing) * 10);
    align-items: start;
}


/* -----------------------------------------------------------------------------
   Account navigation sidebar
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation {
    background-color: var(--color-zinc-50);
    border: 1px solid var(--color-zinc-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--color-zinc-200);
}
.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-zinc-700);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--color-zinc-100);
    color: var(--color-primary-blue);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--color-primary-blue);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}


/* -----------------------------------------------------------------------------
   Account content area
   ----------------------------------------------------------------------------- */
.woocommerce-MyAccount-content {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-zinc-800);
}
.woocommerce-MyAccount-content p {
    margin-bottom: calc(var(--spacing) * 4);
    line-height: 1.6;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    color: var(--color-zinc-900);
    margin-bottom: calc(var(--spacing) * 4);
}
.woocommerce-MyAccount-content h2 {
    font-size: var(--text-2xl);
}
.woocommerce-MyAccount-content h3 {
    font-size: var(--text-xl);
}


/* -----------------------------------------------------------------------------
   Orders table
   ----------------------------------------------------------------------------- */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--text-base);
}
.woocommerce-orders-table th {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-zinc-600);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border-bottom: 2px solid var(--color-zinc-200);
    text-align: left;
}
.woocommerce-orders-table td {
    padding: calc(var(--spacing) * 4);
    border-bottom: 1px solid var(--color-zinc-200);
    color: var(--color-zinc-800);
    vertical-align: middle;
}
.woocommerce-orders-table .order-number a {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-blue);
    text-decoration: none;
}
.woocommerce-orders-table .order-number a:hover {
    text-decoration: underline;
}
.woocommerce-orders-table .woocommerce-button {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-primary-blue);
    color: var(--color-white) !important;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 4);
    text-decoration: none;
    transition: opacity 0.2s ease;
    border: none;
    display: inline-block;
}
.woocommerce-orders-table .woocommerce-button:hover {
    opacity: 0.85;
}

/* Order status badges */
.woocommerce-order-status {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
    border-radius: var(--radius-md);
    display: inline-block;
}
.order-status.status-completed { background-color: var(--color-green-100); color: var(--color-green-600); }
.order-status.status-processing { background-color: color-mix(in oklch, var(--color-primary-blue) 10%, transparent); color: var(--color-primary-blue); }
.order-status.status-on-hold { background-color: var(--color-zinc-100); color: var(--color-zinc-600); }
.order-status.status-cancelled,
.order-status.status-failed { background-color: color-mix(in oklch, var(--color-primary-red) 10%, transparent); color: var(--color-primary-red); }
.order-status.status-pending { background-color: var(--color-zinc-100); color: var(--color-zinc-500); }


/* -----------------------------------------------------------------------------
   Account forms (login, register, edit account, addresses)
   ----------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-form,
.woocommerce form.woocommerce-form-login,
.woocommerce form.register,
.woocommerce form.edit-account,
.woocommerce-address-fields__field-wrapper {
    max-width: 480px;
}

.woocommerce form .form-row {
    margin-bottom: calc(var(--spacing) * 4);
}
.woocommerce form .form-row label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-zinc-700);
    display: block;
    margin-bottom: calc(var(--spacing) * 1);
}
.woocommerce form .form-row .required {
    color: var(--color-primary-red);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    width: 100%;
    border: 1px solid var(--color-zinc-300);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
    color: var(--color-zinc-900);
    background-color: var(--color-white);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row input[type="text"]:focus,
.woocommerce form .form-row input[type="email"]:focus,
.woocommerce form .form-row input[type="password"]:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary-blue) 20%, transparent);
}

/* Show password toggle */
.woocommerce form.login .show-password-input,
.woocommerce form.register .show-password-input {
    color: var(--color-zinc-400);
}

/* Submit buttons */
.woocommerce .button,
.woocommerce button[type="submit"],
.woocommerce form .button {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-primary-blue);
    color: var(--color-white) !important;
    border: none;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: inline-block;
    text-decoration: none;
}
.woocommerce .button:hover,
.woocommerce button[type="submit"]:hover,
.woocommerce form .button:hover {
    opacity: 0.85;
    color: var(--color-white) !important;
}

/* "Lost your password?" link */
.woocommerce form.login .lost_password a {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-zinc-500);
}
.woocommerce form.login .lost_password a:hover {
    color: var(--color-primary-blue);
}


/* -----------------------------------------------------------------------------
   Addresses
   ----------------------------------------------------------------------------- */
.woocommerce-account .addresses .title h3 {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(var(--spacing) * 2);
}
.woocommerce-account address {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-style: normal;
    color: var(--color-zinc-700);
    line-height: 1.6;
    border: 1px solid var(--color-zinc-200);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
    background-color: var(--color-zinc-50);
}


/* -----------------------------------------------------------------------------
   Notices
   ----------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    margin-bottom: calc(var(--spacing) * 4);
}
.woocommerce-account .woocommerce-message {
    border-top-color: var(--color-green-500, #22c55e);
}
.woocommerce-account .woocommerce-info {
    border-top-color: var(--color-primary-blue);
}
.woocommerce-account .woocommerce-error {
    border-top-color: var(--color-primary-red);
}


/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 782px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing) * 6);
    }
    .woocommerce-MyAccount-navigation {
        display: flex;
        overflow-x: auto;
        border-radius: var(--radius-md);
    }
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-direction: row;
        white-space: nowrap;
    }
    .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
        border-right: 1px solid var(--color-zinc-200);
    }
    .woocommerce-MyAccount-navigation ul li:last-child {
        border-right: none;
    }
}