/* CYKE Mechanical Services Corp. - Branding Styles */

/* Logo Animation */
@keyframes wave-ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.nav-brand .wave-icon {
    animation: wave-ripple 2s ease-in-out infinite;
}

/* Brand Colors Applied */
.accent-highlight {
    color: var(--accent-color);
}

.primary-blue {
    color: var(--primary-color);
}

.water-gradient {
    background: linear-gradient(135deg, var(--water-blue-light) 0%, var(--water-blue) 50%, var(--primary-color) 100%);
}

/* Button with Accent */
.btn-accent {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%);
    color: var(--dark-color);
    font-weight: 700;
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-color) 100%);
    box-shadow: 0 4px 15px rgba(50, 205, 50, 0.4);
}

/* Footer Branding */
.footer {
    background: var(--dark-color);
    color: white;
    border-top: 3px solid var(--accent-color);
}

.footer .brand-name {
    font-size: 20px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--water-blue-light) 0%, var(--primary-color) 50%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Login Page Branding */
.login-page {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--water-blue) 50%, var(--water-blue-light) 100%);
}

.login-header i {
    background: linear-gradient(135deg, var(--water-blue-light) 0%, var(--primary-color) 50%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stats Cards with Brand Colors */
.stat-icon.blue { 
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--water-blue) 100%); 
}

.stat-icon.green { 
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%); 
}

/* Product Cards Enhancement */
.product-card:hover {
    border-top: 3px solid var(--accent-color);
}

/* Form Focus States */
.form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1), 0 0 0 1px var(--accent-color);
}

/* Badge with Accent */
.badge-accent {
    background-color: var(--accent-color);
    color: var(--dark-color);
    font-weight: 700;
}