.maty-magic-btn-wrapper {
    display: inline-block;
}

/* دکمه دایره‌ای که روی هاور مستطیل می‌شود */
.maty-expand-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    width: var(--maty-btn-size, 3rem);
    height: var(--maty-btn-size, 3rem);
    padding-inline: 0;

    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1;

    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    direction: rtl;

    transition:
        width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease;
}

/* حالت نرمال - آیکون در وسط دایره */
.maty-expand-btn .maty-expand-btn__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* حالت هاور - موقعیت‌های مختلف آیکون */
.maty-expand-btn.maty-icon-right:hover .maty-expand-btn__icon,
.maty-expand-btn.maty-icon-right:focus-visible .maty-expand-btn__icon {
    position: static;
    transform: none;
    order: 2;
    animation: slideFromRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.maty-expand-btn.maty-icon-left:hover .maty-expand-btn__icon,
.maty-expand-btn.maty-icon-left:focus-visible .maty-expand-btn__icon {
    position: static;
    transform: none;
    order: 0;
    animation: slideFromLeft 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* انیمیشن حرکت از راست */
@keyframes slideFromRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* انیمیشن حرکت از چپ */
@keyframes slideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* آیکون */
.maty-expand-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: 
        opacity 0.3s ease, 
        transform 0.3s ease,
        margin 0.3s ease;
}

/* کنترل نمایش آیکون */
.maty-expand-btn__icon.maty-icon-hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8) !important;
}

.maty-expand-btn:hover .maty-expand-btn__icon.maty-icon-hidden-hover,
.maty-expand-btn:focus-visible .maty-expand-btn__icon.maty-icon-hidden-hover {
    opacity: 0;
    transform: scale(0.8);
}

/* متن - در حالت نرمال مخفی است */
.maty-expand-btn__label {
    white-space: nowrap;
    opacity: 0;
    transform: translateX(12px);
    max-width: 0;
    overflow: hidden;
    order: 1;

    transition:
        opacity 0.3s ease 0.15s,
        transform 0.3s ease 0.15s,
        max-width 0.4s ease 0.1s;
}

/* هاور / فوکوس: تبدیل به دکمه مستطیل */
.maty-expand-btn:hover,
.maty-expand-btn:focus-visible {
    width: var(--maty-btn-expand-width, 9.5rem);
    height: auto;
    min-height: var(--maty-btn-size, 3rem);
    padding: 8px 20px;
    transform: translateY(-1px);
    justify-content: center;
    gap: 0;
}

/* نمایش متن روی هاور */
.maty-expand-btn:hover .maty-expand-btn__label,
.maty-expand-btn:focus-visible .maty-expand-btn__label {
    opacity: 1;
    transform: translateX(0);
    max-width: 200px;
    animation: textSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

/* انیمیشن متن */
@keyframes textSlideIn {
    0% {
        opacity: 0;
        transform: translateX(8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* فوکوس برای کیبورد */
.maty-expand-btn:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

/* انیمیشن کلی دکمه */
.maty-expand-btn {
    animation: buttonReady 0.6s ease;
}

@keyframes buttonReady {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}