/**
 * SipitaUI — Component CSS
 * 
 * Reusable component styles extracted from inline <style> blocks.
 * These complement Tailwind utility classes for custom component patterns.
 */

/* ============================================
   Glass Card Animations
   ============================================ */
.glass-animate {
    animation: glass-fade-in 0.6s ease-out both;
}

@keyframes glass-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation delays for glass cards */
.glass-animate-delay-1 { animation-delay: 0.1s; }
.glass-animate-delay-2 { animation-delay: 0.2s; }
.glass-animate-delay-3 { animation-delay: 0.3s; }
.glass-animate-delay-4 { animation-delay: 0.4s; }
.glass-animate-delay-5 { animation-delay: 0.5s; }
.glass-animate-delay-6 { animation-delay: 0.6s; }

/* ============================================
   Form Validation Error Animations
   ============================================ */
.sui-error {
    animation: sui-shake 0.3s ease-in-out;
}

@keyframes sui-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ============================================
   Smooth Transitions for Component States
   ============================================ */
.sui-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Rating Star Hover Effects (Survey)
   ============================================ */
.rating-group label {
    transition: transform 0.15s ease, color 0.15s ease;
}

.rating-group label:hover {
    transform: scale(1.15);
}

/* Forward-sibling highlight for star ratings */
.rating-group input:checked ~ label {
    color: #facc15; /* yellow-400 */
}

/* ============================================
   Custom Scrollbar for Dark Mode
   ============================================ */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: rgb(30 41 59); /* slate-800 */
}

.dark ::-webkit-scrollbar-thumb {
    background: rgb(71 85 105); /* slate-600 */
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(100 116 139); /* slate-500 */
}