[x-cloak] {
    display: none !important;
}

#mobileAddToCartBtn .button-text-wrapper,
#desktopAddToCartBtn .button-text-wrapper {
    overflow: hidden;
    height: 1.5em;
    position: relative;
}

#mobileAddToCartBtn .button-text-original,
#desktopAddToCartBtn .button-text-original {
    display: inline-block;
    width: 100%;
    line-height: 1.5em;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s ease-out;
}

#mobileAddToCartBtn .button-text-success,
#desktopAddToCartBtn .button-text-success {
    display: inline-block;
    width: 100%;
    line-height: 1.5em;
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateY(0);
    transition: transform 0.4s ease-out;
}

/* Color Variation Styles */
.color-radio:checked + div {
    border-width: 3px !important;
    border-color: rgb(231, 19, 61) !important;
}

.color-radio:checked + div .color-checkmark {
    opacity: 1 !important;
}

.color-variation-option[data-out-of-stock="true"] {
    cursor: not-allowed;
}

.color-variation-option[data-out-of-stock="true"]:hover .out-of-stock-tooltip {
    opacity: 1;
}

.color-variation-option[data-out-of-stock="true"] input {
    cursor: not-allowed;
}

/* Size Variation Styles */
.size-radio:checked + div {
    border-width: 3px !important;
    border-color: rgb(231, 19, 61) !important;
}

.size-radio:checked + div .size-checkmark {
    opacity: 1 !important;
}

.size-variation-option[data-out-of-stock="true"] {
    cursor: not-allowed;
}

.size-variation-option[data-out-of-stock="true"]:hover .out-of-stock-tooltip {
    opacity: 1;
}

.size-variation-option[data-out-of-stock="true"] input {
    cursor: not-allowed;
}

@media (max-width: 1023px) {
    .color-variation-option[data-out-of-stock="true"]:hover
        .out-of-stock-tooltip,
    .size-variation-option[data-out-of-stock="true"]:hover
        .out-of-stock-tooltip {
        opacity: 0;
    }
}

.star-rating,
.comment-star-rating {
    direction: ltr; /* Ensure stars fill correctly even in RTL */
    display: inline-flex;
}
.rater-star.is-active {
    color: #facc15 !important;
}
#commentRatingInput {
    cursor: pointer;
}
