/* Global Styles - Discoverb Mozambique */

/* RemixIcon Font Fix */
:where([class^="ri-"])::before {
    content: "\f3c2";
}

/* Gradient Utilities */
.gradient-blue {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
}

.gradient-green {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.gradient-orange {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
}

/* Custom Button Radius - Ensure Tailwind's rounded-button is applied */
.rounded-button {
    border-radius: 8px !important;
}

/* Tab Navigation Styles */
.tab-button {
    transition: all 0.3s ease;
}

.tab-button.active {
    background-color: white;
    color: #0EA5E9;
}

.tab-button:not(.active) {
    background-color: transparent;
    color: #6B7280;
}

/* Filter Button Styles */
.filter-btn.active {
    background-color: #0EA5E9;
    color: white;
}

.filter-btn:not(.active) {
    background-color: #F3F4F6;
    color: #6B7280;
}

/* Smooth Transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Loading Spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-spinner {
    border: 3px solid #f3f4f6;
    border-top-color: #0EA5E9;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Pulse Animation for notifications */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Mobile-first responsive layout */
html {
    background-color: #e5e7eb; /* Gray background for desktop */
    display: flex;
    justify-content: center;
}

body {
    max-width: 480px;
    width: 100%;
    min-height: 100vh;
    background-color: #f9fafb;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for desktop */
    overflow-x: hidden;
}

/* Constrain fixed elements to mobile width and center them */
nav.fixed,
.fixed.top-0,
.fixed.bottom-0 {
    max-width: 480px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* Constrain floating buttons to mobile width */
button.fixed {
    left: auto !important;
    right: calc(50% - 480px/2 + 1rem) !important;
}

@media (max-width: 480px) {
    nav.fixed,
    .fixed.top-0,
    .fixed.bottom-0 {
        left: 0 !important;
        transform: none !important;
    }
    
    button.fixed {
        right: 1rem !important;
    }
}

/* Hover effects for interactive elements */
.hover-scale {
    transition: transform 0.2s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}