<div class="account-sidebar p-4 h-100">
    <!-- Account Navigation Sidebar -->
    <div class="mb-5">
        <h5 class="fw-bold mb-4 text-primary d-flex align-items-center">
            <i class="fa fa-th-large me-2"></i> Quick Links
        </h5>

        <div class="nav flex-column nav-pills custom-account-nav">
            <a href="my-account.php"
                class="nav-link py-3 px-0 border-bottom d-flex justify-content-between align-items-center active-nav-link">
                <span><i class="fa fa-user-circle me-3 opacity-75"></i>My Account</span>
                <i class="fa fa-chevron-right small opacity-50"></i>
            </a>
            <a href="bill-ship-addresses.php"
                class="nav-link py-3 px-0 border-bottom d-flex justify-content-between align-items-center text-dark">
                <span><i class="fa fa-map-marker me-3 opacity-75"></i>Shipping & Billing</span>
                <i class="fa fa-chevron-right small opacity-50"></i>
            </a>
            <a href="order-history.php"
                class="nav-link py-3 px-0 border-bottom d-flex justify-content-between align-items-center text-dark">
                <span><i class="fa fa-history me-3 opacity-75"></i>Order History</span>
                <i class="fa fa-chevron-right small opacity-50"></i>
            </a>
            <a href="pending-orders.php"
                class="nav-link py-3 px-0 border-bottom d-flex justify-content-between align-items-center text-dark">
                <span><i class="fa fa-clock-o me-3 opacity-75"></i>Pending Payments</span>
                <i class="fa fa-chevron-right small opacity-50"></i>
            </a>
            <a href="my-wishlist.php"
                class="nav-link py-3 px-0 border-bottom d-flex justify-content-between align-items-center text-dark">
                <span><i class="fa fa-heart me-3 opacity-75"></i>My Wishlist</span>
                <i class="fa fa-chevron-right small opacity-50"></i>
            </a>
            <a href="logout.php"
                class="nav-link py-3 px-0 d-flex justify-content-between align-items-center text-danger">
                <span><i class="fa fa-sign-out me-3 opacity-75"></i>Logout</span>
                <i class="fa fa-chevron-right small opacity-50"></i>
            </a>
        </div>
    </div>

    <!-- Help Box -->
    <div class="bg-primary-light rounded-4 p-4 mt-auto">
        <h6 class="fw-bold text-primary mb-2">Need Help?</h6>
        <p class="small text-muted mb-3">If you have any questions regarding your account or an order, please contact
            our support team.</p>
        <a href="contact-us.php" class="btn btn-primary btn-sm rounded-pill px-3">Contact Support</a>
    </div>
</div>

<style>
    .active-nav-link {
        color: var(--am-primary) !important;
        font-weight: 700;
    }

    .custom-account-nav .nav-link:hover {
        color: var(--am-primary) !important;
        padding-left: 0.5rem !important;
        transition: all 0.3s ease;
    }

    .bg-primary-light {
        background-color: #fef2ee;
    }
</style>