/* Enhanced MRP Tag Styling for Product Labels */

/* Enhanced MRP tag style with slanted edge */
.product-labels .label {
    padding: 2px 8px 2px 4px !important;
    border-radius: 0 !important;
    font-size: 6px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: white !important;
    display: inline-block !important;
    white-space: nowrap !important;
    position: relative !important;
    box-shadow: none !important;
    background: var(--tag-color, #1b7b89) !important;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%) !important;
    margin-left: 0 !important;
    letter-spacing: 0.3px !important;
}

/* Remove old notched corner effect */
.product-labels .label::before {
    display: none !important;
}

/* Remove hole effect */
.product-labels .label::after {
    display: none !important;
}

/* Color variations for different tags - Medium Baby Brand Aesthetic */
.product-labels .label.new-arrivals {
    --tag-color: #1b7b89;
    --tag-color-dark: #15626d;
}

.product-labels .label.best-sellers {
    --tag-color: #F06292;
    --tag-color-dark: #EC407A;
}

.product-labels .label.hospital-bag-must-haves {
    --tag-color: #81C784;
    --tag-color-dark: #66BB6A;
}

.product-labels .label.moms-choice {
    --tag-color: #9575CD;
    --tag-color-dark: #7E57C2;
}

/* Tag slider for auto-sliding multiple tags - enhanced for notched design */
.tag-slider-container {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    /* overflow: hidden !important; */
    border-radius: 0 !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
}

.tag-slider {
    display: flex !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.tag-slider .label {
    min-width: auto !important;
    width: auto !important;
    text-align: left !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    padding-left: 6px !important;
    padding-right: 12px !important;
    margin-bottom: 2px !important;
    margin-left: 0 !important;
}

/* Ensure notched corner works in slider */
.tag-slider .label::before {
    display: none !important;
}

/* 2 tags animation */
.tag-slider-container[data-tag-count="2"] .tag-slider {
    animation: none !important;
}

@keyframes slideLabels2 {
    0% { transform: translateX(0); }
    20% { transform: translateX(0); }
    50% { transform: translateX(-110px); }
    70% { transform: translateX(-110px); }
    100% { transform: translateX(-220px); }
}

/* 3 tags animation */
.tag-slider-container[data-tag-count="3"] .tag-slider {
    animation: none !important;
}

@keyframes slideLabels3 {
    0% { transform: translateX(0); }
    16% { transform: translateX(0); }
    33% { transform: translateX(-110px); }
    49% { transform: translateX(-110px); }
    66% { transform: translateX(-220px); }
    82% { transform: translateX(-220px); }
    100% { transform: translateX(-330px); }
}

/* 4 tags animation */
.tag-slider-container[data-tag-count="4"] .tag-slider {
    animation: none !important;
}

@keyframes slideLabels4 {
    0% { transform: translateX(0); }
    12% { transform: translateX(0); }
    25% { transform: translateX(-110px); }
    37% { transform: translateX(-110px); }
    50% { transform: translateX(-220px); }
    62% { transform: translateX(-220px); }
    75% { transform: translateX(-330px); }
    87% { transform: translateX(-330px); }
    100% { transform: translateX(-440px); }
}

/* Enhanced hover effects for the MRP tags */
.product-card:hover .product-labels .label {
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure the tags work well across different sections */
.new-arrivals-track .product-labels .label,
.best-sellers-track .product-labels .label,
.product-grid .product-labels .label {
    padding: 2px 12px 2px 6px !important;
    border-radius: 0 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: white !important;
    display: inline-block !important;
    white-space: nowrap !important;
    position: relative !important;
    box-shadow: none !important;
    background: var(--tag-color, #1b7b89) !important;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%) !important;
    margin-left: 0 !important;
}