.wp-block-details.is-style-details-arrow-right summary {
    display: flex;
    list-style: none;
    width: 100%;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer; /* Helps with mobile interaction */
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on iOS */
    overflow: hidden!important;
}

.wp-block-details.is-style-details-arrow-right summary::after {
    content: '';
    display: inline-block;
    width: 22px; /* Adjust size as needed */
    height: 22px;
    margin-left: 10px;
    background-color: currentColor; /* Ensure it inherits the current text color */
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d=\'M12 15.375l-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z\'/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d=\'M12 15.375l-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z\'/></svg>');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform 0.3s ease;
    overflow: hidden!important;
}

.wp-block-details[open] summary::after {
    transform: rotateX(180deg); /* Rotate when the details are open */
}

/* Add this for iOS fixes to ensure interaction and proper rendering */
details[open] > summary::-webkit-details-marker {
    display: none;
}

details > summary::-webkit-details-marker {
    display: none;
}