/* Taiya Detergents Color Scheme */
:root {
    --taiya-green: #2e7d32;
    --taiya-red: #d32f2f;
    --taiya-white: #ffffff;
    --taiya-light-green: #4caf50;
    --taiya-dark-green: #1b5e20;
    --taiya-light-red: #f44336;
    --taiya-dark-red: #b71c1c;
    --taiya-orange: #ff9800;
    --taiya-yellow: #ffeb3b;
}

/* Carousel Styles */
.carousel-image {
    height: 500px;
    background-size: cover;
    background-position: center;
}

.carousel-caption {
    background: linear-gradient(135deg, var(--taiya-green) 0%, var(--taiya-dark-green) 100%);
    padding: 2rem;
    border-radius: 15px;
    bottom: 50%;
    transform: translateY(50%);
    border: 2px solid var(--taiya-light-green);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.carousel-caption h2 {
    color: var(--taiya-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-caption .lead {
    color: var(--taiya-yellow);
    font-weight: 500;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    background: rgba(46, 125, 50, 0.7);
    border-radius: 50%;
    margin: 0 10px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: var(--taiya-dark-green);
}

.carousel-indicators button {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 8px;
    border: 2px solid var(--taiya-white);
    background: transparent;
}

.carousel-indicators .active {
    background: var(--taiya-red);
    border-color: var(--taiya-red);
}

/* Red and Green Alert Styles */
.alert-success {
    background: linear-gradient(135deg, var(--taiya-light-green) 0%, var(--taiya-green) 100%);
    border-color: var(--taiya-dark-green);
    color: white;
    border-left: 5px solid var(--taiya-dark-green);
}

.alert-danger {
    background: linear-gradient(135deg, var(--taiya-light-red) 0%, var(--taiya-red) 100%);
    border-color: var(--taiya-dark-red);
    color: white;
    border-left: 5px solid var(--taiya-dark-red);
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, var(--taiya-yellow) 100%);
    border-color: var(--taiya-orange);
    color: #856404;
    border-left: 5px solid var(--taiya-orange);
}

/* Button Styles with Red and Green */
.btn-success {
    background: linear-gradient(135deg, var(--taiya-light-green) 0%, var(--taiya-green) 100%);
    border: none;
    color: white;
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--taiya-green) 0%, var(--taiya-dark-green) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, var(--taiya-light-red) 0%, var(--taiya-red) 100%);
    border: none;
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, var(--taiya-red) 0%, var(--taiya-dark-red) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(211, 47, 47, 0.3);
}

/* Badge Styles */
.badge.bg-success {
    background: linear-gradient(135deg, var(--taiya-light-green) 0%, var(--taiya-green) 100%) !important;
    color: white;
}

.badge.bg-danger {
    background: linear-gradient(135deg, var(--taiya-light-red) 0%, var(--taiya-red) 100%) !important;
    color: white;
}

.badge.bg-warning {
    background: linear-gradient(135deg, #ffecb3 0%, var(--taiya-yellow) 100%) !important;
    color: #7d6608;
}

/* Stock Status Indicators */
.in-stock-badge {
    background: var(--taiya-green);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: bold;
}

.out-of-stock-badge {
    background: var(--taiya-red);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: bold;
}

/* Price Tags */
.price-tag {
    color: var(--taiya-green);
    font-weight: bold;
    font-size: 1.2rem;
}

.discount-tag {
    color: var(--taiya-red);
    font-weight: bold;
    text-decoration: line-through;
}

/* Featured Product Ribbons */
.featured-ribbon {
    position: absolute;
    top: 10px;
    right: -30px;
    background: var(--taiya-red);
    color: white;
    padding: 5px 40px;
    transform: rotate(45deg);
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Size badge styles */
.size-badge {
    font-size: 0.9em;
    padding: 0.5em 0.8em;
    font-weight: bold;
}

/* Volume-specific colors with red and green variations */
.volume-1kg { 
    background: linear-gradient(135deg, var(--taiya-light-green) 0%, var(--taiya-green) 100%) !important;
    color: white !important;
}
.volume-800gms { 
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%) !important;
    color: white !important;
}
.volume-600gms { 
    background: linear-gradient(135deg, #ffecb3 0%, var(--taiya-yellow) 100%) !important;
    color: #7d6608 !important;
}
.volume-200gms { 
    background: linear-gradient(135deg, #80deea 0%, #0097a7 100%) !important;
    color: white !important;
}

/* Special Offers Section */
.special-offer {
    border: 2px solid var(--taiya-red);
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem 0;
}

.special-offer h5 {
    color: var(--taiya-dark-red);
    border-bottom: 2px solid var(--taiya-red);
    padding-bottom: 0.5rem;
}

/* Rating Stars */
.rating-stars {
    color: var(--taiya-yellow);
}

.rating-count {
    color: var(--taiya-green);
    font-weight: bold;
}

/* Responsive carousel */
@media (max-width: 768px) {
    .carousel-image {
        height: 300px;
    }
    
    .carousel-caption {
        padding: 1rem;
        bottom: 40%;
        transform: translateY(40%);
    }
    
    .carousel-caption h2 {
        font-size: 1.5rem;
    }
    
    .carousel-caption .lead {
        font-size: 1rem;
    }
    
    .carousel-caption .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 8%;
    }
}

/* Animation for attention */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
}

.pulse-green {
    animation: pulse-green 2s infinite;
}

.pulse-red {
    animation: pulse-red 2s infinite;
}

/* Highlighted Text */
.text-taiya-green {
    color: var(--taiya-green) !important;
}

.text-taiya-red {
    color: var(--taiya-red) !important;
}

.bg-taiya-green {
    background-color: var(--taiya-green) !important;
}

.bg-taiya-red {
    background-color: var(--taiya-red) !important;
}