/* ======================================================
   طراحي دکمه‌هاي متغير (Mobile-First & RTL)
====================================================== */
.custom-variation-swatches {
    display: flex;
    flex-wrap: wrap; /* در موبايل به صورت خودکار به خط بعد مي‌رود */
    gap: 10px;
    margin-bottom: 15px;
    direction: rtl;
}

.var-swatch-btn {
    background-color: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 6px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    min-width: 50px;
    text-align: center;
}

/* حالت هاور (رفتن موس روي دکمه) */
.var-swatch-btn:hover {
    border-color: #c8e6c9 !important;
    background-color: #f7f9fa;
}

/* حالت انتخاب شده (Active) */
.var-swatch-btn.selected {
    border-color: #0073aa;
    background-color: #e6f2f7;
    font-weight: bold;
    color: #005177;
}

/* ======================================================
   استايل ناموجود (علامت ضربدر قرمز با CSS خالص)
====================================================== */
.var-swatch-btn.out-of-stock {
    opacity: 0.5;
    pointer-events: none; /* جلوگيري از کليک */
    border-color: #ffcccc;
    color: #999999;
}

/* ايجاد خط اول ضربدر */
.var-swatch-btn.out-of-stock::before,
.var-swatch-btn.out-of-stock::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: #ff4d4d; /* رنگ قرمز هشدار */
}

/* چرخش خطوط براي تشکيل شکل X */
.var-swatch-btn.out-of-stock::before {
    transform: translateY(-50%) rotate(45deg);
}
.var-swatch-btn.out-of-stock::after {
    transform: translateY(-50%) rotate(-45deg);
}