/* --- GLOBAL SCROLLBAR HIDDEN --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- ANIMATIONS --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.reveal-element { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal-element.active { opacity: 1; transform: translateY(0); }
.animate-hero { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.3s; }
.delay-300 { animation-delay: 0.5s; }
.delay-400 { animation-delay: 0.7s; }

/* --- UI ELEMENTS --- */
.typing-text::after { content: '|'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

.tab-btn.active { background-color: #004E89; color: white; border-bottom: 4px solid #FF6B35; }

/* --- GEOAPIFY OVERRIDES --- */
.autocomplete-container { position: relative; width: 100%; margin-top: 4px; }
.geoapify-autocomplete-input { 
    width: 100% !important; padding: 0.75rem 1rem !important; 
    background-color: #f9fafb !important; border: 1px solid #e5e7eb !important; 
    border-radius: 0.5rem !important; outline: none !important; 
    font-family: 'Outfit', sans-serif !important; 
}
.geoapify-autocomplete-items { 
    z-index: 99 !important; border-radius: 0.5rem; overflow: hidden; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); 
}

/* --- HTMX INDICATOR --- */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; display: inline-block; }
.htmx-request span { display: none; } /* Hide button text when loading */

/* --- RESPONSIVE FONT SCALING --- */
html { font-size: 87.5%; } /* Desktop: 14px base */
@media (max-width: 1280px) { html { font-size: 93.75%; } }
@media (max-width: 1024px) { html { font-size: 87.5%; } }
@media (max-width: 640px) { html { font-size: 81.25%; } }