/* Form Controls & Inputs */
.form-control, .form-select {
    background-color: rgba(20, 20, 20, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}

body.bg-pattern .form-control,
body.bg-pattern .form-select {
    background-color: rgba(10, 10, 10, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2);
    background-color: rgba(30, 30, 30, 0.6) !important;
}

/* Dynamic Ingredients & Generator UI */
.border-dashed { border: 2px dashed #444; }
.border-dashed:hover { border-color: var(--primary-color); color: var(--primary-color); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-pulse-once { animation: fadeIn 0.3s ease-out; }

#ingredientsContainer input {
    background-color: #2a2a2a !important;
    color: white !important;
}

/* Card & Truncate Utils */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile & PWA Optimizations */
@media (max-width: 767.98px) {
    .display-1 { font-size: 2.8rem !important; }
    .display-2 { font-size: 2.4rem !important; }
    .display-3 { font-size: 2.1rem !important; }
    .display-4 { font-size: 1.8rem !important; }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.7rem !important; }
    
    .landing-hero {
        padding-top: 1.5rem !important;
        padding-bottom: 2rem !important;
        min-height: auto !important;
    }
    
    .landing-hero .display-2 {
        line-height: 1.1;
        margin-bottom: 2rem !important;
        letter-spacing: 0 !important;
    }

    .cookie-banner {
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* Hero & General Pages */
.app-footer {
    flex: 0 0 auto;
    background-color: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1030;
}

.hover-link:hover {
    color: var(--primary-color) !important;
    transition: color 0.3s ease;
}