/* Custom styles for NutriPlan AI */

/* Additional utility classes and overrides */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Animation classes */
@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

.fade-in {
    -webkit-animation: fadeIn 0.5s ease forwards;
    animation: fadeIn 0.5s ease forwards;
}

.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }

/* Card variations */
.card-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
}

.card-outline {
    background: white;
    border: 2px solid var(--primary-color);
}

/* Form enhancements */
.form-floating > label {
    color: var(--text-muted);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .display-4 {
        font-size: 2rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* Safari-compatible spinner styles - Override Bootstrap for Safari compatibility */
@-webkit-keyframes spinner-border-animation {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spinner-border-animation {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.spinner-border {
    display: inline-block !important;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    -webkit-animation: spinner-border-animation 0.75s linear infinite !important;
    animation: spinner-border-animation 0.75s linear infinite !important;
}

.spinner-border-sm {
    width: 1rem !important;
    height: 1rem !important;
    border-width: 0.2em !important;
}

/* Spinning utility class for Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.spinning {
    display: inline-block !important;
    -webkit-animation: spin 1s linear infinite !important;
    animation: spin 1s linear infinite !important;
}

.fa-spin {
    display: inline-block !important;
    -webkit-animation: spin 1s linear infinite !important;
    animation: spin 1s linear infinite !important;
}

/* Font Awesome sync icon spinning */
.fa-sync.fa-spin,
.fa-circle-notch.spinning,
i.spinning {
    display: inline-block !important;
    -webkit-animation: spin 1s linear infinite !important;
    animation: spin 1s linear infinite !important;
}