/* Motion Agra Brand Styles - Red & White Theme */

/* Walking Boy Logo SVG - Exact from image */
.motion-logo {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.motion-logo-sm {
    width: 24px;
    height: 24px;
}

.motion-logo-lg {
    width: 60px;
    height: 60px;
}

.motion-logo-xl {
    width: 80px;
    height: 80px;
}

/* Brand Colors - Exact Red from Logo */
.motion-primary {
    color: #DC2626; /* Exact red from logo */
}

.motion-bg-primary {
    background-color: #DC2626;
}

.motion-border-primary {
    border-color: #DC2626;
}

.motion-gradient {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
}

.motion-gradient-text {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Red & White Theme Colors */
.motion-red {
    color: #DC2626;
}

.motion-red-bg {
    background-color: #DC2626;
}

.motion-red-border {
    border-color: #DC2626;
}

.motion-red-light {
    color: #FEE2E2;
}

.motion-red-light-bg {
    background-color: #FEE2E2;
}

.motion-red-dark {
    color: #B91C1C;
}

.motion-red-dark-bg {
    background-color: #B91C1C;
}

/* Brand Header */
.motion-brand-header {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1);
}

.motion-brand-title {
    font-weight: 700;
    font-size: 1.5rem;
    margin-left: 0.5rem;
}

.motion-brand-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-left: 0.5rem;
}

/* Logo Animation */
@keyframes motion-walk {
    0% { transform: translateX(0) scale(1); }
    50% { transform: translateX(2px) scale(1.05); }
    100% { transform: translateX(0) scale(1); }
}

.motion-logo-animate {
    animation: motion-walk 2s ease-in-out infinite;
}

/* Brand Buttons */
.btn-motion {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.2);
}

.btn-motion:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(220, 38, 38, 0.3);
    color: white;
}

/* Brand Cards */
.motion-card {
    border: 2px solid #f3f4f6;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.motion-card:hover {
    border-color: #DC2626;
    box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.1);
}

/* Red & White Theme Elements */
.motion-btn-red {
    background: #DC2626;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.2);
}

.motion-btn-red:hover {
    background: #B91C1C;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(220, 38, 38, 0.3);
    color: white;
}

.motion-btn-outline {
    background: transparent;
    color: #DC2626;
    border: 2px solid #DC2626;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.motion-btn-outline:hover {
    background: #DC2626;
    color: white;
    transform: translateY(-2px);
}

/* Red & White Cards */
.motion-card-red {
    background: white;
    border: 2px solid #FEE2E2;
    border-radius: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.motion-card-red:hover {
    border-color: #DC2626;
    box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.15);
    transform: translateY(-2px);
}

/* Red & White Input Fields */
.motion-input {
    border: 2px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    background: white;
}

.motion-input:focus {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    outline: none;
}

/* Red & White Backgrounds */
.motion-bg-white {
    background: white;
}

.motion-bg-red-light {
    background: #FEE2E2;
}

.motion-bg-red-50 {
    background: #FEF2F2;
}

/* Brand Navigation */
.motion-nav {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.motion-nav-link {
    color: white !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.motion-nav-link:hover {
    color: #fecaca !important;
    transform: translateY(-1px);
}

/* Brand Footer */
.motion-footer {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    padding: 2rem 0;
}

/* Responsive Brand Elements */
@media (max-width: 768px) {
    .motion-brand-title {
        font-size: 1.25rem;
    }
    
    .motion-logo {
        width: 32px;
        height: 32px;
    }
    
    .motion-logo-lg {
        width: 48px;
        height: 48px;
    }
}