/* تم تصغير حجم الزر بناءً على طلبك مع الحفاظ على التنسيق والترتيب */
.btn-containerO {
    padding: 2px;
    background: linear-gradient(180deg, #f3aefe, #8d35d3);
    border-radius: 15px;
    transform: perspective(850px) rotateX(14deg) rotateY(8deg) rotateZ(-11deg);
    color: white;
    box-shadow:
        -4px 4px 0px #5d2b82,
        -5px 7px 8px #4d1e7491,
        -10px 13px 18px #4d1e7450,
        -20px 20px 40px #4d1e74a8;
    position: relative;
    transition: all 0.4s ease;
}

.btn-containerO:hover {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    box-shadow:
        0px 4px 5px #5d2b82,
        0px 7px 8px #4d1e7491,
        0px 13px 18px #4d1e7450,
        0px 20px 40px #4d1e74a8;
}

.btn-containerO:active {
    box-shadow:
        0px 4px 5px #5c2b82c7,
        0px 7px 8px #4d1e745b,
        0px 5px 18px #4d1e7434,
        0px 10px 40px #4d1e746e;
}

.btn-containerO:active > .button {
    box-shadow: inset 0px 6px 10px #3114494b;
}

.buttonO {
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    background: linear-gradient(180deg, #d28dff, #8533c6);
    box-shadow: inset 0px -6px 10px #3114494b;
    text-shadow: -1px 1px 3px #2a0f3fbb;
    transition: all 0.3s ease;
}

.svgO {
    margin-top: 1px;
    font-weight: bold;
    filter: drop-shadow(-2px 2px 1px #2a0f3f6c);
}