/* ===== Motivla Brand Colors ===== */
:root {
    --motivla-primary: #7c3aed;
    --motivla-primary-dark: #6d28d9;
    --motivla-primary-light: #8b5cf6;
    --motivla-secondary: #ec4899;
    --motivla-gradient: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    --motivla-bg: #faf5ff;
    --motivla-text: #374151;
    --motivla-text-dark: #111827;
}

/* ===== Base Styles ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--motivla-text);
}

/* ===== Override Bootstrap Primary Color ===== */
.btn-primary {
    --bs-btn-bg: #7c3aed;
    --bs-btn-border-color: #7c3aed;
    --bs-btn-hover-bg: #6d28d9;
    --bs-btn-hover-border-color: #6d28d9;
    --bs-btn-active-bg: #5b21b6;
    --bs-btn-active-border-color: #5b21b6;
    --bs-btn-disabled-bg: #7c3aed;
    --bs-btn-disabled-border-color: #7c3aed;
}

.btn-outline-primary {
    --bs-btn-color: #7c3aed;
    --bs-btn-border-color: #7c3aed;
    --bs-btn-hover-bg: #7c3aed;
    --bs-btn-hover-border-color: #7c3aed;
    --bs-btn-active-bg: #6d28d9;
    --bs-btn-active-border-color: #6d28d9;
}

.text-primary {
    color: #7c3aed !important;
}

.bg-primary {
    background-color: #7c3aed !important;
}

.border-primary {
    border-color: #7c3aed !important;
}

/* ===== Gradient Backgrounds ===== */
.bg-motivla-gradient {
    background: var(--motivla-gradient) !important;
}

/* ===== Navbar ===== */
.navbar {
    transition: box-shadow 0.3s ease;
}

.navbar-brand span {
    color: #7c3aed;
}

.nav-link {
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #7c3aed !important;
}

/* ===== Hero Section ===== */
.hero-section {
    padding-top: 80px;
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
}

/* ===== Feature Icons with Gradient ===== */
.feature-icon {
    background: var(--motivla-gradient) !important;
}

/* ===== Contact Icons ===== */
.contact-icon {
    background: var(--motivla-gradient) !important;
}

/* ===== Steps ===== */
.step-number {
    background: var(--motivla-gradient) !important;
    font-size: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3);
}

/* ===== Avatars ===== */
.avatar {
    background: var(--motivla-gradient) !important;
}

/* ===== Quote icon ===== */
.bi-quote {
    color: #7c3aed !important;
}

/* ===== Check icons ===== */
.bi-check-circle-fill {
    color: #7c3aed !important;
}

/* ===== Cards Hover ===== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.15), 0 10px 10px -5px rgba(124, 58, 237, 0.08) !important;
}

/* ===== Pricing Popular Card ===== */
.card.border-primary {
    border-color: #7c3aed !important;
}

.card .badge.bg-primary {
    background: var(--motivla-gradient) !important;
}

/* ===== CTA Section ===== */
#cta {
    background: var(--motivla-gradient) !important;
}

/* ===== Form Controls ===== */
.form-control:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25);
}

/* ===== Footer ===== */
footer a:hover {
    color: #ffffff !important;
}

footer .bi:hover {
    color: #ec4899 !important;
}

/* ===== Smooth Scroll ===== */
html {
    scroll-behavior: smooth;
}

/* ===== Scroll padding for fixed navbar ===== */
section {
    scroll-margin-top: 80px;
}

/* ===== Spinner ===== */
.spinner-border {
    color: #ffffff;
}

/* ===== Responsive adjustments ===== */
@media (max-width: 991.98px) {
    .hero-section .row {
        min-height: auto !important;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .navbar-collapse {
        background-color: #fff;
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-collapse .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .navbar-collapse .d-flex {
        flex-direction: column;
    }
}

/* ===== Animation classes ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

/* ===== Pricing Toggle ===== */
#billingToggle:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

#label-monthly,
#label-yearly {
    transition: color 0.2s ease;
}

/* ===== Toast notifications ===== */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

/* ===== Selection color ===== */
::selection {
    background-color: rgba(124, 58, 237, 0.2);
    color: #111827;
}

/* ===== Link hover in content ===== */
a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: #7c3aed;
}