/* Hide the default WooCommerce account icon */
.wc-block-customer-account__account-icon {
    display: none;
}

/* Style the account link container */
.wp-block-woocommerce-customer-account a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; /* Fixed width */
    height: 32px; /* Fixed height - same as width for perfect circle */
    padding: 4px;
}

/* Add your custom SVG icon */
.wp-block-woocommerce-customer-account a::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm0 21.5a9.5 9.5 0 1 1 9.5 -9.5 9.51 9.51 0 0 1 -9.5 9.5Z' fill='currentColor' stroke-width='1'%3E%3C/path%3E%3Cpath d='M12 13.5A4.5 4.5 0 1 0 7.5 9a4.51 4.51 0 0 0 4.5 4.5Zm0 -2A2.5 2.5 0 0 1 9.5 9a2.4 2.4 0 0 1 0.22 -1 0.24 0.24 0 0 1 0.15 -0.13 0.23 0.23 0 0 1 0.2 0 6.87 6.87 0 0 0 3.35 0.87 7 7 0 0 0 0.8 -0.05 0.26 0.26 0 0 1 0.19 0.06 0.28 0.28 0 0 1 0.09 0.18V9a2.5 2.5 0 0 1 -2.5 2.5Z' fill='currentColor' stroke-width='1'%3E%3C/path%3E%3Cpath d='M12 14.26a6.7 6.7 0 0 0 -5.95 3.51 0.53 0.53 0 0 0 0 0.49 0.51 0.51 0 0 0 0.43 0.24h11a0.51 0.51 0 0 0 0.43 -0.24 0.53 0.53 0 0 0 0 -0.49A6.7 6.7 0 0 0 12 14.26Z' fill='currentColor' stroke-width='1'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

/* Add circular background effect */
.wp-block-woocommerce-customer-account a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; /* Fixed size for the circle */
    height: 40px; /* Same as width */
    border-radius: 50%;
    transition: background-color 0.2s ease;
    z-index: 1;
}

/* Hover effect */
.wp-block-woocommerce-customer-account a:hover::after {
    background-color: #85ADFF;
}

/* Click effect */
.wp-block-woocommerce-customer-account a:active::after {
    background-color: #528BFF;
}


