/* WooCommerce My Account Designer — Frontend CSS v1.7.1 */

/* ── 1. Destroy WC float layout ───────────────────────────────────── */
/*
   WooCommerce core, and many themes, attach float:left + fixed widths
   to .woocommerce, .woocommerce-MyAccount-navigation, and
   .woocommerce-MyAccount-content.  We must neutralise every variant
   before we build our own flex layout.
*/
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    clear: both !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    position: static !important;
}
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none !important; display: none !important; }

/* ── 1b. Reset WC sub-page inner wrappers ──────────────────────────── */
/*
   On Orders, Downloads, Addresses, Edit Account, Payment Methods, etc.
   WooCommerce injects extra wrapper divs inside .woocommerce-MyAccount-content
   that carry their own float:left / width:NNpx rules.  If left untouched
   they overflow the flex slot and slide beneath the sidebar.
   We normalise every known wrapper to block + full width here.
*/
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-orders,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-downloads,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-addresses,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address,
.woocommerce-account .woocommerce-MyAccount-content address,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-LostPassword,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethods,
.woocommerce-account .woocommerce-MyAccount-content .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-column2,
.woocommerce-account .woocommerce-MyAccount-content .col-1,
.woocommerce-account .woocommerce-MyAccount-content .col-2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}
/* Address columns: WC uses a two-column float layout for billing/shipping */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-addresses .col-1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-addresses .col-2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-addresses .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-addresses .u-column2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ── 2. Flex container ────────────────────────────────────────────── */
/*
   Standard WooCommerce: nav and content are direct children of .woocommerce.
   We make .woocommerce itself the flex container.
*/
.woocommerce-account .woocommerce {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: var(--woo-mad-gap, 24px) !important;
    max-width: var(--woo-mad-container-width, 1200px) !important;
    margin: 0 auto !important;
    padding: var(--woo-mad-container-pad, 40px) !important;
    box-sizing: border-box !important;
    background: var(--woo-mad-page-bg, transparent) !important;
    font-family: var(--woo-mad-font-family, inherit);
}

/* ── 2b. Bootstrap-grid themes (e.g. agenxe) ─────────────────────── */
/*
   Themes like agenxe inject a Bootstrap .row between .woocommerce and
   the nav/content, like: .woocommerce > .row > .col-lg-3 > nav
                           .woocommerce > .row > .col-lg-9 > content
   Bootstrap sets col-lg-3 = 25% and col-lg-9 = 75% which conflicts
   with our fixed 260px sidebar.  We override the .row to become our
   flex container and strip all Bootstrap column widths.
*/
.woocommerce-account .woocommerce .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: var(--woo-mad-gap, 24px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
/* Reset every Bootstrap column inside the WC account .row */
.woocommerce-account .woocommerce .row > [class*="col-"] {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* Remove Bootstrap's percentage widths */
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
}
/* Column wrapping the sidebar nav → fixed sidebar width */
.woocommerce-account .woocommerce .row > [class*="col-"]:has(.woocommerce-MyAccount-navigation) {
    flex: 0 0 var(--woo-mad-sidebar-width, 260px) !important;
    width: var(--woo-mad-sidebar-width, 260px) !important;
    min-width: var(--woo-mad-sidebar-width, 260px) !important;
    max-width: var(--woo-mad-sidebar-width, 260px) !important;
    align-self: flex-start !important;
}
/* Column wrapping the content → fill remaining space */
.woocommerce-account .woocommerce .row > [class*="col-"]:has(.woocommerce-MyAccount-content) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 0 !important;
    align-self: flex-start !important;
}
/* Fallback for browsers without :has() — use nth-child order */
@supports not (selector(:has(*))) {
    .woocommerce-account .woocommerce .row > [class*="col-"]:first-child {
        flex: 0 0 var(--woo-mad-sidebar-width, 260px) !important;
        width: var(--woo-mad-sidebar-width, 260px) !important;
        min-width: var(--woo-mad-sidebar-width, 260px) !important;
        max-width: var(--woo-mad-sidebar-width, 260px) !important;
    }
    .woocommerce-account .woocommerce .row > [class*="col-"]:not(:first-child) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* ── 3. Sidebar — fixed width ─────────────────────────────────────── */
/*
   When a theme uses .row > .col wrapper, the nav itself is inside
   the col — so we apply width:100% here and let the col control the
   sidebar's outer width via Section 2b above.
   For direct-child (standard WC) the flex: 0 0 ... still works.
*/
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 var(--woo-mad-sidebar-width, 260px) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: var(--woo-mad-sidebar-bg, #1e293b) !important;
    border-radius: var(--woo-mad-sidebar-radius, 12px);
    border: var(--woo-mad-sidebar-border-w, 0px) solid var(--woo-mad-sidebar-border-c, transparent);
    padding: var(--woo-mad-sidebar-padding, 20px) !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 24px;
    align-self: flex-start !important;
    z-index: 1;
    margin: 0 !important;
}
/* When nav IS a direct flex child of .woocommerce (no Bootstrap wrapper) */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
    flex: 0 0 var(--woo-mad-sidebar-width, 260px) !important;
    width: var(--woo-mad-sidebar-width, 260px) !important;
    min-width: var(--woo-mad-sidebar-width, 260px) !important;
    max-width: var(--woo-mad-sidebar-width, 260px) !important;
}

/* ── Nav list ─────────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-direction: column !important;
    gap: var(--woo-mad-nav-gap, 4px);
}
.woocommerce-MyAccount-navigation ul li {
    margin: 0 !important; padding: 0 !important;
    display: block !important; float: none !important; width: 100% !important;
}
.woocommerce-MyAccount-navigation ul li a {
    display: flex !important; align-items: center !important; gap: 10px;
    min-height: var(--woo-mad-nav-height, 46px);
    padding: 8px 14px !important;
    border-radius: var(--woo-mad-nav-radius, 8px);
    font-size: var(--woo-mad-nav-font-size, 14px) !important;
    font-weight: var(--woo-mad-nav-font-weight, 500);
    color: var(--woo-mad-sidebar-text, #94a3b8) !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background .15s ease, color .15s ease;
    position: relative; box-sizing: border-box !important;
    line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.woocommerce-MyAccount-navigation ul li a::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 55%;
    background: var(--woo-mad-sidebar-active, #6366f1);
    border-radius: 0 3px 3px 0;
    transition: transform .15s ease; pointer-events: none;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--woo-mad-sidebar-hover-bg, rgba(255,255,255,.07)) !important;
    color: var(--woo-mad-sidebar-text, #94a3b8) !important;
    text-decoration: none !important;
}
.woocommerce-MyAccount-navigation ul li.is-active > a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active > a {
    background: var(--woo-mad-sidebar-active-bg, rgba(99,102,241,.15)) !important;
    color: var(--woo-mad-sidebar-active, #6366f1) !important;
    font-weight: 600;
}
.woocommerce-MyAccount-navigation ul li.is-active > a::before,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active > a::before {
    transform: translateY(-50%) scaleY(1);
}

/* ── Icons ────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation ul li a .woo-mad-icon {
    font-family: dashicons, sans-serif !important;
    speak: never; font-style: normal !important; font-weight: 400 !important;
    font-variant: normal; text-transform: none; line-height: 1;
    -webkit-font-smoothing: antialiased;
    display: inline-block !important; flex-shrink: 0 !important;
    width: 20px !important; height: 20px !important; font-size: 18px !important;
    opacity: .7; transition: opacity .15s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover .woo-mad-icon,
.woocommerce-MyAccount-navigation ul li.is-active > a .woo-mad-icon,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active > a .woo-mad-icon { opacity: 1; }

/* ── 4. Content area ──────────────────────────────────────────────── */
/* 
   flex: 1 1 auto  = grow to fill, shrink if needed, base = auto (not 0)
   min-width: 0    = allow shrinking past intrinsic width  
   width: 100%     = full width of its flex slot
   These three together guarantee content fills 100% of remaining space
   after the sidebar takes its fixed width, on EVERY WooCommerce page.
*/
/* 4. Content area — works whether it is a direct flex child of .woocommerce
      OR nested inside a Bootstrap .col-* wrapper (Section 2b handles the col). */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--woo-mad-content-max-width, 100%) !important;
    align-self: flex-start !important;
    background: var(--woo-mad-content-bg, #ffffff) !important;
    color: var(--woo-mad-content-text, inherit);
    border-radius: var(--woo-mad-content-radius, 12px);
    border: var(--woo-mad-content-border-w, 0px) solid var(--woo-mad-content-border-c, transparent);
    padding: var(--woo-mad-content-padding, 28px) !important;
    box-shadow: var(--woo-mad-content-shadow, 0 2px 12px rgba(0,0,0,.07));
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden;
    position: relative !important;
    z-index: 2;
}
/* Normalize first/last child margins — removes WC's variable top spacing */
.woocommerce-account .woocommerce-MyAccount-content > *:first-child { margin-top: 0 !important; padding-top: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-content > *:last-child  { margin-bottom: 0 !important; }

.woocommerce-MyAccount-content h2 {
    color: var(--woo-mad-heading-color, inherit) !important;
    font-size: var(--woo-mad-heading-size, 1.4em) !important;
    margin-top: 0 !important;
}
.woocommerce-MyAccount-content h3 { color: var(--woo-mad-heading-color, inherit) !important; }

/* ── 5. User card ─────────────────────────────────────────────────── */
.woo-mad-user-card { display:flex; align-items:center; gap:12px; padding:14px; background:var(--woo-mad-user-card-bg,rgba(0,0,0,.2)); border-radius:8px; margin-bottom:16px; overflow:hidden; box-sizing:border-box; }
.woo-mad-user-card__avatar { width:var(--woo-mad-avatar-size,44px); height:var(--woo-mad-avatar-size,44px); border-radius:50%; flex-shrink:0; overflow:hidden; border:2px solid rgba(255,255,255,.15); }
.woo-mad-user-card__avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.woo-mad-user-card__info { min-width:0; flex:1; }
.woo-mad-user-card__name, .woo-mad-user-card__email { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--woo-mad-user-card-text,#fff); }
.woo-mad-user-card__name  { font-size:13px; font-weight:700; }
.woo-mad-user-card__email { font-size:11px; opacity:.55; margin-top:2px; }

/* ── 6. Custom pages ──────────────────────────────────────────────── */
.woo-mad-page-title { color:var(--woo-mad-heading-color,inherit) !important; font-size:var(--woo-mad-heading-size,1.4em) !important; margin:0 0 20px !important; padding-bottom:12px; border-bottom:1px solid var(--woo-mad-border-color,rgba(0,0,0,.1)); }
.woo-mad-page-content { line-height:1.7; }

/* ── 7. Fade-in ───────────────────────────────────────────────────── */
.woo-mad-content-fade { opacity:0; transform:translateY(5px); transition:opacity .25s ease,transform .25s ease; }
.woo-mad-content-fade.woo-mad-content-visible { opacity:1; transform:none; }

/* ── 8. Mobile toggle button ──────────────────────────────────────── */
.woo-mad-mobile-toggle { display:none !important; width:100%; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--woo-mad-sidebar-bg,#1e293b); border:none; border-radius:var(--woo-mad-sidebar-radius,8px); color:var(--woo-mad-sidebar-text,#94a3b8); font-size:14px; font-weight:600; cursor:pointer; margin-bottom:6px; box-sizing:border-box; font-family:inherit; text-align:left; line-height:1; }
.woo-mad-mobile-toggle__icon { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.woo-mad-mobile-toggle__bar { display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease,opacity .2s ease; }
.woo-mad-mobile-toggle.is-active .woo-mad-mobile-toggle__bar:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.woo-mad-mobile-toggle.is-active .woo-mad-mobile-toggle__bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.woo-mad-mobile-toggle.is-active .woo-mad-mobile-toggle__bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── 9. Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column !important; padding: 16px !important; gap: 0 !important;
    }
    .woo-mad-mobile-toggle { display: flex !important; }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: none !important;
        width: 100% !important; min-width: 0 !important; max-width: 100% !important;
        position: static !important; align-self: auto !important;
        overflow: hidden; max-height: 0;
        padding-top: 0 !important; padding-bottom: 0 !important;
        margin-bottom: 6px;
        transition: max-height .3s ease, padding .3s ease;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation.is-open {
        max-height: 1000px;
        padding-top: var(--woo-mad-sidebar-padding, 16px) !important;
        padding-bottom: var(--woo-mad-sidebar-padding, 16px) !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        align-self: auto !important; width: 100% !important;
        max-width: 100% !important; padding: 20px !important;
    }
    .woo-mad-user-card { display: none !important; }
    .woocommerce-MyAccount-navigation ul li a { white-space: normal; overflow: visible; }
}

/* ── 10. Top-nav layout ───────────────────────────────────────────── */
.woo-mad-layout-top-nav .woocommerce-MyAccount-navigation ul { flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; gap:4px !important; }
.woo-mad-layout-top-nav .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display:none; }

/* ── 11. Print ────────────────────────────────────────────────────── */
@media print {
    .woocommerce-account .woocommerce-MyAccount-navigation, .woo-mad-user-card, .woo-mad-mobile-toggle { display:none !important; }
    .woocommerce-account .woocommerce { display:block !important; padding:0 !important; }
    .woocommerce-account .woocommerce-MyAccount-content { box-shadow:none !important; border-radius:0 !important; padding:0 !important; max-width:none !important; }
}