/* Styles communs pour toutes les pages 2Earn.cash */

/* Fix pour les icônes Lucide */
[data-lucide] {
    display: inline-block;
    vertical-align: middle;
}

/* Fix pour les hover states sur mobile */
@media (hover: hover) {
    .hover\:bg-opacity-10:hover { background-color: rgba(255, 255, 255, 0.1); }
    .hover\:bg-opacity-15:hover { background-color: rgba(255, 255, 255, 0.15); }
    .hover\:bg-opacity-20:hover { background-color: rgba(255, 255, 255, 0.2); }
}

/* Fix pour les backdrop-filter sur Safari */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); }
    .backdrop-blur-lg { -webkit-backdrop-filter: blur(16px); }
    .backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); }
}

/* Fix pour les gradients */
.bg-gradient-to-br { 
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); 
    background-attachment: fixed;
}
.bg-gradient-to-r { 
    background-image: linear-gradient(to right, var(--tw-gradient-stops)); 
}
.bg-gradient-to-t { 
    background-image: linear-gradient(to top, var(--tw-gradient-stops)); 
}

/* Fix pour les transitions sur mobile */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fix pour les z-index */
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Fix pour le texte transparent */
.bg-clip-text { 
    -webkit-background-clip: text; 
    background-clip: text;
}
.text-transparent { 
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Fix pour les scale transforms */
.scale-102 { transform: scale(1.02); }
.scale-98 { transform: scale(0.98); }

/* Fix pour les éléments fixed sur iOS */
.fixed {
    position: fixed;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Fix pour les espaces sur mobile */
@media (max-width: 640px) {
    .space-x-6 > * + * {
        margin-left: 0.75rem;
    }
    .space-x-4 > * + * {
        margin-left: 0.5rem;
    }
}

/* Fix pour les icônes qui ne s'affichent pas */
i[data-lucide]:empty::before {
    content: '◯';
    display: inline-block;
    width: 1em;
    height: 1em;
    text-align: center;
}

/* Amélioration de la performance */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix pour le menu sur mobile */
#sideMenu {
    will-change: transform;
}

/* Animation pour le loader si nécessaire */
.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Fix pour les border-radius sur iOS */
.rounded-3xl {
    border-radius: 1.5rem;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Amélioration du contraste pour l'accessibilité */
.text-white.text-opacity-50 {
    color: rgba(255, 255, 255, 0.6);
}

.text-white.text-opacity-60 {
    color: rgba(255, 255, 255, 0.7);
}

.text-white.text-opacity-70 {
    color: rgba(255, 255, 255, 0.8);
}