/* Add custom CSS styles below */ 
.ronaq-categories-title .flex.flex-col.gap-2 span.text-\[14px\] {
    color: #2b5f55 !important;
}

/* 1. Target the button only inside .s-products-slider-card */
.s-products-slider-card .s-product-card-content-footer , .product-index .s-product-card-content-footer {
    background-color: #fc841c !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 15px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    font-weight: bold !important;
    animation: slider-button-pulse 2s infinite !important;
    overflow: hidden !important;
}

/* 2. Reset internal button elements for slider cards only */
.s-products-slider-card .s-product-card-content-footer salla-add-product-button,
.s-products-slider-card .s-product-card-content-footer .s-button-wrap,
.s-products-slider-card .s-product-card-content-footer .s-button-element {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
}

/* 3. Text/Icon styling inside slider cards */
.s-products-slider-card .s-product-card-content-footer .s-button-text,
.s-products-slider-card .s-product-card-content-footer span,
.s-products-slider-card .s-product-card-content-footer i {
    color: #ffffff !important;
    background: transparent !important;
}

/* 4. Hover effect */
.s-products-slider-card .s-product-card-content-footer:hover {
    background-color: #e57300 !important;
    transform: translateY(-2px) !important;
}

/* 5. Pulse Animation for slider buttons */
@keyframes slider-button-pulse {
    0% { box-shadow: 0 0 0 0 rgba(252, 132, 28, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(252, 132, 28, 0); }
    100% { box-shadow: 0 0 0 0 rgba(252, 132, 28, 0); }
}


button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline {
    border-bottom-width: 0px !important;
}

/* تغيير لون النص فقط إلى الأسود عند التمرير */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:hover {
    color: #000000 !important;
}

/* في حال وجود عنصر نصي داخلي يحتاج لتغيير لونه أيضاً */
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:hover .s-button-text {
    color: #000000 !important;
}