/* sftp://kravkompetenstechops@43.241.70.75/sites/kravkompetens-techops.wisdmlabs.net/files/wp-content/themes/astra-child/assets/css/wdm-my-account-navbar-links.css
*/

/* ================================================= */
/* A. Navigation Sidebar Styling (Image 2 Aesthetic) */
/* ================================================= */

/* 1. Wrapper Styling */

.page .entry-header {
    display: none !important;
}
/* 2. Base Link Styling */
.woocommerce-MyAccount-navigation li a {
    /* display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #ccc; Light gray for inactive text
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 500; */
    display: block;
    position: relative;         /* so pseudo-element can be positioned relative to this */
    z-index: 2;                 /* put link content above the bg */
    padding: 14px 20px;         /* adjust vertical/horizontal spacing */
    gap: 12px;                  /* if using flex with icon/text */
    border-radius: 6px;         /* keep small radius for active state too */
    overflow: visible;
}

/* pseudo-element used as the rounded, inset hover background */
.woocommerce-MyAccount-navigation li a::before {
    content: "";
    position: absolute;
    left: 8px;                  /* inset from left so icon area keeps its look */
    right: 12px;                /* create visible gap from right edge */
    top: 6px;                   /* small vertical inset for "molded" look */
    bottom: 6px;
    background: transparent;
    border-radius: 10px;        /* rounded corners for the hover bg */
    z-index: 1;                 /* behind the actual link content */
    transition: background-color .18s ease, transform .18s ease;
    pointer-events: none;       /* don't block clicks */
}


/* 3. Active Link Styling (V2 Orange Look) */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.current-menu-item a,
.woocommerce-MyAccount-navigation li.is-active,
.woocommerce-MyAccount-navigation li.current-menu-item {
    background-color: #e68a00; /* V2 Orange Background */
    color: #ffffff!important; /* White text for active state */
    border-radius: 5px;
    font-weight: bold;
}

/* 4. Hover State */
/* .woocommerce-MyAccount-navigation li a:hover:not(.is-active) { */
.woocommerce-MyAccount-navigation li:not(.is-active):not(.current-menu-item) a:hover {
    /* background-color: #444; Subtle hover effect for inactive items*/
    background-color: #2ECD70 !important; /*Subtle hover effect for inactive items*/
    color: #fff;
}

/* ================================================= */
/* F. Force Elementor Max-Width Removal              */
/* ================================================= */

/* Override Elementor's default max-width constraint for sections on this page. 
   Setting max-width to 100% ensures the content fills the theme's available container space. */
.elementor-section.elementor-section-boxed >.elementor-container {
    max-width: 100%!important; 
    width: 100%!important; /* Ensure width is also 100% */
}

/* 1. Hide the existing SVG icon span that is embedded in the link text */
.woocommerce-MyAccount-navigation .ahfb-svg-iconset svg:not(.custom-flaticon-icon) {
    /* * You can put any styles here to target the *original* icons.
     * For example, you might want to hide them or give them a specific default style.
     */
    display: none !important; 
    /* * NOTE: If the SVG replacement script works correctly, you typically won't 
     * need to style the original SVG, as the script replaces it entirely.
     * The script's replacement logic is usually preferred over CSS for hiding/showing.
     */
}

/* 2. Apply the new Font Awesome icons using ::before pseudo-elements */
.woocommerce-MyAccount-navigation ul li a::before {
    /* Base styles for all icons (assuming Font Awesome 5 or 6 Solid is loaded) */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "Font Awesome"; /* Added generic fallback */
    font-weight: 900; /* Font Awesome Solid weight */
    margin-right: 10px;
    content: ""; /* Reset for specificity */
    vertical-align: middle;
    display: inline-block; /* Added to ensure margin and alignment are applied correctly */
}

/* .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wdm-dashboard a::before {
    content: url('https://kravkompetens-techops.wisdmlabs.net/wp-content/themes/astra-child/assets/wdm-custom-icons/dashboard.svg');
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: cover;
    margin-right: 8px;
} */

/* Dashboard - fa-table-cells (fa-th) */
.woocommerce-MyAccount-navigation-link--wdm-dashboard a::before {
    content: "\f00a";
}

/* My Courses - fa-book-open */
.woocommerce-MyAccount-navigation-link--my-courses a::before {
    content: "\f518";
}

/* Account Details - fa-user */
.woocommerce-MyAccount-navigation-link--edit-account a::before {
    content: "\f007";
}

/* Orders - fa-shopping-cart */
.woocommerce-MyAccount-navigation-link--orders a::before {
    content: "\f07a";
}

/* Address - fa-location-dot */
.woocommerce-MyAccount-navigation-link--edit-address a::before {
    content: "\f3c5";
}

/* Register Participants - fa-users */
.woocommerce-MyAccount-navigation-link--basic-dashboard a::before {
    content: "\f0c0";
}

/* Log Out - fa-arrow-right-from-bracket (fa-sign-out-alt) */
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    content: "\f08b";
}

/* --- V0 Compact Styling Adjustments --- */
.woocommerce-MyAccount-navigation ul li {
    font-size: 14px;
}

/* Reduce padding on the anchor element to decrease tab height */
.woocommerce-MyAccount-navigation ul li a {
    padding: 10px 15px; /* Reduced vertical padding (10px top/bottom) */
}
/* --- END V0 Styling Adjustments --- */
/* --- WooCommerce Account Page Redesign by wisdm--- */
.woocommerce-account {
    gap: 20px;
    background: #fff;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  }
   .ast-modern-woo-account-page .entry-content {
      margin: 0em !important; 
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 70% !important;
    padding-right: 8% !important;
}
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 22% !important;
    border-right: 1px solid #e7e8ee;
}
  /* Sidebar Navigation */
  .woocommerce-account .woocommerce-MyAccount-navigation { 
      padding-top: 40px !important;
  }
  .woocommerce-MyAccount-navigation {
    /* background-color: #333; Dark background */
    padding: 10px 0;
    width: 240px !important;
    border-radius: 0px !important;
    padding: 80px 0;
    min-height: 100vh;
    position: sticky;
    top: 80px;
    border-top: 0px;
    box-shadow: none !important;
}
.woocommerce-MyAccount-navigation>ul {
    margin: 0;
    margin-right: 10px !important;
    border-radius: 10px;
}
  li.woocommerce-MyAccount-navigation-link.is-active:after, li.woocommerce-MyAccount-navigation-link:hover:after {
    opacity: 0 !important;
}
  
  .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border:none !important;
  }
  
  .woocommerce-MyAccount-navigation ul li {
    margin: 8px 0;
    border:none !important;
  }
  
  .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 12px 20px;
    border-radius: 8px;
    color: #000 !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border:none !important;
  }
  
  .woocommerce-MyAccount-navigation ul li.is-active a,
  .woocommerce-MyAccount-navigation ul li a:hover {
    background: #2ECD70 !important;
    color: #fff !important;
  }

  .woocommerce-MyAccount-navigation-link .ahfb-svg-iconset {
    margin-right: 2px !important;
}
.ahfb-svg-iconset {
    display: inline-flex;
    width: 30px !important;
    height: 20px !important;
    flex-shrink: 0;
}
  /* Default icon color */
.woocommerce-MyAccount-navigation ul li span.ahfb-svg-iconset svg g,
.woocommerce-MyAccount-navigation ul li span.ahfb-svg-iconset svg path {
    fill: #000 !important; /* black */
}

/* Hover & active = white */
.woocommerce-MyAccount-navigation ul li a:hover span.ahfb-svg-iconset svg g,
.woocommerce-MyAccount-navigation ul li a:hover span.ahfb-svg-iconset svg path,
.woocommerce-MyAccount-navigation ul li.is-active a span.ahfb-svg-iconset svg g,
.woocommerce-MyAccount-navigation ul li.is-active a span.ahfb-svg-iconset svg path {
    fill: #fff !important; /* white */
}

  .woocommerce-MyAccount-navigation ul li span.ahfb-svg-iconset, .woocommerce-MyAccount-navigation-link a:hover span.ahfb-svg-iconset {
    color: #000 !important;
}
.woocommerce-MyAccount-navigation ul li span.ahfb-svg-iconset, .woocommerce-MyAccount-navigation-link a:hover span.ahfb-svg-iconset {
    color: #000000;
}
.woocommerce-MyAccount-navigation li:not(.is-active):not(.current-menu-item) a:hover {
    background-color: #2ECD70 !important;
    color: #ffffff!important;
}
.woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover {
    background: #2ECD70 !important;
    color: #fff !important;
}
  .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li.current-menu-item a, .woocommerce-MyAccount-navigation li.is-active, .woocommerce-MyAccount-navigation li.current-menu-item {
      background-color: #2ECD70 !important;
      color: #ffffff!important;
      border-radius: 6px;
      font-weight: bold;
  }
  
  /* General adjustments */
  @media (max-width: 992px) {
    .woocommerce-account {
      flex-direction: column;
    }
    .woocommerce-MyAccount-navigation {
      width: 100%;
      position: relative;
      min-height: auto;
      border-radius: 10px;
    }
    
  }
  /* MOBILE VERSION */
@media (max-width: 768px) {

    .woocommerce-MyAccount-navigation {
        width: 100% !important;
        border-radius: 0px !important;
        padding: 0 !important;
        position: sticky;
        top: 80px !important; 
        box-shadow: none !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        padding-top: 20px !important; 
    }
    .woocommerce-MyAccount-content {
        padding: 10px;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }
    .woocommerce-MyAccount-navigation {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        padding: 0;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: thin; /* Firefox */
    }

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

    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

    .woocommerce-MyAccount-navigation li {
        display: inline-flex;
        align-items: center;
        gap:5px;
        justify-content: center;
        border: 1px solid #ddd;
        background: #fff;
        min-width: max-content;
    }
    .woocommerce-MyAccount-navigation ul li {
        border: 1px solid #2ECD70 !important;
    }
    .woocommerce-MyAccount-navigation li a {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
    }

    .woocommerce-MyAccount-navigation li.is-active {
        background: #0073aa;
        border-color: #0073aa;
    }

    .woocommerce-MyAccount-navigation li.is-active a,
    .woocommerce-MyAccount-navigation li.is-active a span {
        color: #fff !important;
    }
        /* ---------------------------------------
    REMOVE Sticky Positioning from Navigation
    -----------------------------------------*/
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-navigation ul,
    .woocommerce-MyAccount-navigation li,
    .maincard1 {
        position: static !important;
        top: auto !important;
    }

}


/* Hemberger Menu CSS -  Added By Mithilesh */
/* ----------------------------------------------------
   DESKTOP (min-width: 769px)
   Hide mobile header + wrapper
---------------------------------------------------- */
/* ----------------------------------------------------
   DESKTOP (min-width: 769px)
   Only hide hamburger + mobile behavior
---------------------------------------------------- */

@media (min-width: 769px) {
    .mobile-menu-toggle-input{
        display: none;
    }
    .mobile-menu-header{
        display: none;
    }
}
@media (max-width: 768px) {
    
    /* ---------------------------------------------------- */
    /* Mobile Wrapper & Header Styling (New Elements)       */
    /* ---------------------------------------------------- */
    
    .mobile-nav-wrapper {
        /* This wrapper ensures the menu takes up full width and controls positioning */
        width: 100%;
        position: relative; /* Needed for absolute positioning of the dropdown */
        z-index: 99; /* Keep the menu above other content */
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px 20px;
        background: #fff; /* White bar background */
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        color: #333; /* Dark text for title */
        font-size: 18px;
        position: relative; /* Needed for absolute positioning of the title */
        justify-content: space-between; /* Pushes icon to the left, space to the right */
    }

    .menu-icon {
        font-size: 24px; /* Adjust size of the hamburger icon */
        line-height: 1;
        transform: scaleX(1.2); /* Make it look a bit wider/bolder */
    }

    /* Target the Hamburger Icon */
    .mobile-menu-header .menu-icon {
        /* Icon remains on the left */
        flex-shrink: 0; /* Prevents icon from shrinking */
        z-index: 2; /* Keep icon clickable above the centered title area */
    }

    /* Target the Dynamic Title (to center it visually) */
    .mobile-menu-header .menu-title {
        /* Absolute position/transform centers the element precisely */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap; /* Prevents title from wrapping */
        
        /* Ensure the title doesn't overlap the icon */
        max-width: calc(100% - 100px); /* Adjust 100px based on icon/padding size */
        overflow: hidden;
        text-overflow: ellipsis; 
        
        font-weight: bold;
        color: #333;
    }

    /* ---------------------------------------------------- */
    /* Core Navigation List Styling (The Dropdown)          */
    /* ---------------------------------------------------- */
    
    /* 1. Hide the desktop sidebar by default and style as a dropdown */
    .woocommerce-MyAccount-navigation {
        display: block !important; 
        width: 96%; /* Slightly less than 100% to inset it */
        position: absolute;
        top: 60px; /* Position below the header bar (adjust if needed) */
        left: 2%; /* Center the menu visually */
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        z-index: 100;
        
        /* Initial state: Hidden (using max-height for smooth transition) */
        max-height: 0; 
        overflow: hidden; 
        transition: max-height 0.4s ease-in-out; 
    }
    
    /* 2. Toggle Logic: Show navigation when the checkbox is checked */
    .mobile-menu-toggle-input:checked ~ .woocommerce-MyAccount-navigation {
        max-height: 500px;
        border: 1px solid #ddd;
        width: 80% !important;
        padding: 20px !important;
        border-radius: 0px 0px 10px 0px  !important;
    }
    /* 3. Style the inner list items to be vertical */
    .woocommerce-MyAccount-navigation ul {
        display: block !important; /* Force vertical list */
        padding: 10px 0;
        border: none !important;
    }

    .woocommerce-MyAccount-navigation ul li {
        display: block; /* Ensure each link takes a full row */
        margin: 0;
        border: none !important;
    }
    
    .woocommerce-MyAccount-navigation li a {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        gap: 10px;
        border-radius: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
         border-right: 0px solid #e7e8ee; 
    }
    /* Important: Hide the original desktop sidebar wrapper outside the new mobile wrapper */
    /* This rule targets the OLD structure to ensure it's hidden */
    /* If you have a container outside the new wrapper that you can select, use that.
       Otherwise, this assumes the new wrapper replaces/contains the old navigation. */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        /* Re-apply the initial hide for the old sidebar if the new wrapper doesn't replace it */
        /* display: none !important; 
        /* The max-height: 0 on the nav element itself now manages the visibility */
    }

}