/* ============================
   WooCommerce My Account Page
   Final Version
   ============================ */

/* ====== Variables ====== */
:root {
    --wc-bg: #f8fafc;
    --wc-card: #ffffff;
    --wc-border: #e6e9ef;
    --wc-accent: #075985;
    --primary-color: #B40404;
    --wc-accent-2: #0ea5a4;
    --wc-text: #0f172a;
    --wc-muted: #6b7280;
    --wc-radius: 12px;
    --wc-gap: 18px;
    --wc-padding: 22px;
    --wc-shadow: 0 6px 18px rgba(13, 27, 50, 0.06);
    --wc-transition: 180ms cubic-bezier(.2, .8, .2, 1);
    --e-global-color-text: #B40404 !important;
}

/* ====== General Layout ====== */


.woocommerce-account {
    font-size: 1.6rem !important;
    background: var(--wc-bg);
}

.woocommerce .woocommerce-MyAccount {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: calc(var(--wc-gap) * 1.2);
    align-items: start;
    max-width: 100%;
    box-sizing: border-box;
}

/* ====== Navigation ====== */
.woocommerce-MyAccount-navigation {
    max-width: 300px;
}

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

.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--wc-card);
    color: var(--wc-text);
    border: 1px solid var(--wc-border);
    box-shadow: var(--wc-shadow);
    text-decoration: none;
    transition: all var(--wc-transition);
    font-weight: 600;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    color: white;
}

/* ====== Content ====== */
.woocommerce-MyAccount-content {
    background: transparent;
}

.woocommerce-MyAccount .wc-account-card {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: var(--wc-padding);
    box-shadow: var(--wc-shadow);
    margin-bottom: var(--wc-gap);
}

.woocommerce-MyAccount h2,
.woocommerce-MyAccount h3 {
    margin: 0 0 10px 0;
    color: var(--wc-text);
}

/* ====== Inputs & Forms ====== */
.woocommerce-account input,
.woocommerce-account select {
    padding: 11px !important;
    border-radius: 10px !important;
    outline: none !important;
    border: 1px solid #9fbb9f !important;
    background-color: #fff !important;
    box-sizing: border-box;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: block !important;
}

/* Prevent overflow inside table cells */
.woocommerce-account table select {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    border: none;
    padding: 20px;
    margin: 2em 0;
    text-align: left;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    outline: none;
}

/* Custom select arrow + overflow fix */
.woocommerce-account select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23075985' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 011.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    padding-right: 2.5rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.woocommerce-account select::-ms-expand {
    display: none;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content textarea:focus,
.woocommerce-MyAccount-content select:focus {
    outline: none;
    border-color: var(--wc-accent);
    box-shadow: 0 0 0 3px rgba(7, 89, 133, 0.15);
}

/* ====== Labels ====== */
.woocommerce-MyAccount-content label {
    display: block;
    margin-bottom: 6px;
    color: var(--wc-muted);
    font-weight: 600;
}

/* ====== Buttons ====== */
.woocommerce-account .button {
    background: var(--primary-color) !important;
    color: white !important;
    padding: 14px !important;
    display: inline-block;
    margin: 1rem 0 !important;
    text-transform: capitalize;
    transition: all .3s;
}

.woocommerce-account .button:hover {
    background: #b40404e0;
}

.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button {
    background: var(--wc-accent);
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    transition: transform var(--wc-transition), filter var(--wc-transition);
}

.woocommerce-MyAccount-content button.button:hover {
    transform: translateY(-2px);
    filter: brightness(.95);
}

.woocommerce-MyAccount-content .button.alt {
    background: transparent;
    border: 1px solid var(--wc-border);
    color: var(--wc-text);
}

/* ====== Orders Table ====== */
.woocommerce-MyAccount-orders {
    overflow-x: auto;
}

.woocommerce-MyAccount-orders table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    /* keeps columns readable */
}

.woocommerce-MyAccount-orders th,
.woocommerce-MyAccount-orders td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--wc-border);
    vertical-align: middle;
}

.woocommerce-MyAccount-orders tr:last-child td {
    border-bottom: none;
}

/* Buttons inside table (no overlap) */
.woocommerce-MyAccount-orders .button {
    padding: 8px 12px !important;
    font-size: 1.4rem !important;
    border-radius: 8px !important;
    white-space: nowrap;
}

.order-status {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(14, 165, 164, 0.08);
    color: var(--wc-accent-2);
    font-weight: 700;
    border: 1px solid rgba(14, 165, 164, 0.12);
}

/* ====== Address Section ====== */
.woocommerce-account .addresses .title .edit {
    float: none !important;
    margin: 2rem 0;
    display: block;
    text-decoration: underline;
    line-height: 2rem;
    background: #b00013;
    padding: 10px 19px;
    text-decoration: none;
    color: antiquewhite;
    max-width: fit-content;
    border-radius: 21px;
    text-transform: capitalize;
}



.woocommerce-addresses .address,
.woocommerce-MyAccount-content .woocommerce-MyAccount-form {
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--wc-border);
    background: var(--wc-card);
    box-shadow: var(--wc-shadow);
    margin-bottom: var(--wc-gap);
}

.woocommerce-Address-title h2 {
    text-transform: capitalize !important;
}

.lost_password a {
    color: var(--primary-color);
    text-decoration: underline;
}

.page-id-22990 main.container.py-2,
.page-id-22992 main.container.py-2,
.page-id-22994 .main.container.py-2 {
    padding: 30px 20px !important;
}

.page-id-22990 main.container.py-2 p,
.page-id-22992 main.container.py-2 p,
.page-id-22994 main.container.py-2 p {
    margin: 2rem 0;
}

.page-id-22990 main.container.py-2 li,
.page-id-22992 main.container.py-2 li,
.page-id-22994 main.container.py-2 li {
    margin: 2rem 0;
}

section.wishlist-section {
    padding: 2rem 0;
}
.page-id-9 .woocommerce {
    padding: 3rem 0;
}
.woocommerce-MyAccount-content a {
    color: #b00013;
}
.page-id-22882 main p {
    text-align: center !important;
}

/* ====== Responsive ====== */
@media (max-width: 992px) {
    .woocommerce .woocommerce-MyAccount {
        grid-template-columns: 1fr;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
    }

    /* Full-width navigation with scroll */
    .woocommerce-MyAccount-navigation {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--wc-border) transparent;
        margin-bottom: 16px;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
        overflow-x: auto;
    }

    .woocommerce-MyAccount-navigation li {
        flex: 0 0 auto;
    }

    .woocommerce-MyAccount-navigation li a {
        white-space: nowrap;
        padding: 10px 12px;
        min-width: max-content;
    }

    /* Table responsive scroll */
    .woocommerce-MyAccount-orders {
        overflow-x: auto;
    }

    .woocommerce-MyAccount-orders table {
        min-width: 600px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    :root {
        --wc-padding: 14px;
        --wc-gap: 12px;
    }

    .woocommerce-MyAccount-orders th,
    .woocommerce-MyAccount-orders td {
        padding: 10px 8px;
    }
}

/* ====== Accessibility ====== */
.woocommerce-MyAccount-navigation li a:focus-visible,
.woocommerce-MyAccount-content a:focus-visible,
.woocommerce-MyAccount-content button:focus-visible {
    outline: 3px solid rgba(7, 89, 133, 0.12);
    outline-offset: 3px;
}

/* ====== Prevent Horizontal Scroll ====== */
body,
.woocommerce,
.woocommerce-MyAccount,
.woocommerce-MyAccount-content {
    overflow-x: clip;
    max-width: 100%;
    box-sizing: border-box;
}