/**
 * FreeFi Hotspot - Custom Styles Modern Edition
 * Design System baseado na identidade visual FreeFi
 * Cores: #3B87C6 (azul), #1E335C (azul escuro), #FAF9F6 (off-white)
 */

/* ============================================
   GRADIENTE DE FUNDO - VERSÃO ESCOLHIDA COM OFF-WHITE
   Layout com gradientes azuis modernos + off-white
   ============================================ */
.bg-gradient-freefi {
    background: #F7F3EC;
    background-image:
        linear-gradient(135deg, rgba(232, 244, 251, 0.5) 0%, rgba(240, 248, 253, 0.3) 25%, rgba(255, 255, 255, 0.2) 50%),
        radial-gradient(circle at top right, rgba(59, 135, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at bottom left, rgba(74, 157, 214, 0.06) 0%, transparent 50%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* ============================================
   BACKGROUND ANIMATED CIRCLES (WiFi Waves)
   Versão sutil para fundo branco - OTIMIZADO
   ============================================ */
.wifi-circles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    contain: layout style paint;
}

.wifi-circles::before,
.wifi-circles::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    border-radius: 50%;
    border: 1px solid rgba(59, 135, 198, 0.06);
    animation: wifiPulse 4s ease-out infinite;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.wifi-circles::before {
    width: 400px;
    height: 400px;
    animation-delay: 0s;
}

.wifi-circles::after {
    width: 600px;
    height: 600px;
    animation-delay: 2s;
}

@keyframes wifiPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5) translateZ(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5) translateZ(0);
        opacity: 0;
    }
}

/* ============================================
   GLASSMORPHISM CARD - VERSÃO ESCOLHIDA - OTIMIZADO
   Card com transparência e blur
   ============================================ */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 50px rgba(30, 51, 92, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.glass-card:hover {
    box-shadow: 0 24px 60px rgba(30, 51, 92, 0.18),
                0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    transform: translateY(-2px) translateZ(0);
}

/* ============================================
   ANIMAÇÕES MODERNAS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes wifiWave {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.logo-float {
    animation: logoFloat 3s ease-in-out infinite;
}

/* ============================================
   WiFi ICON ANIMATED - OTIMIZADO
   ============================================ */
.wifi-icon-animated {
    will-change: opacity;
    transform: translateZ(0);
}

.wifi-icon-animated svg {
    filter: drop-shadow(0 4px 12px rgba(59, 135, 198, 0.3));
}

.wifi-icon-animated .wifi-wave-1,
.wifi-icon-animated .wifi-wave-2,
.wifi-icon-animated .wifi-wave-3,
.wifi-icon-animated .wifi-wave-4 {
    will-change: opacity;
}

.wifi-icon-animated .wifi-wave-1 {
    animation: wifiWave 1.5s ease-in-out infinite;
    animation-delay: 0s;
}

.wifi-icon-animated .wifi-wave-2 {
    animation: wifiWave 1.5s ease-in-out infinite;
    animation-delay: 0.2s;
}

.wifi-icon-animated .wifi-wave-3 {
    animation: wifiWave 1.5s ease-in-out infinite;
    animation-delay: 0.4s;
}

.wifi-icon-animated .wifi-wave-4 {
    animation: wifiWave 1.5s ease-in-out infinite;
    animation-delay: 0.6s;
}

/* Modal fullscreen para publicidade */
.modal-fullscreen .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100vh;
    width: 100vw;
}

.modal-fullscreen .modal-content {
    height: 100%;
    border-radius: 0;
    border: none;
}

.modal-fullscreen .modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modal-fullscreen .modal-body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header do modal */
.modal-header-custom {
    background-color: #F2EDE0;
    border-bottom: 1px solid #E8E8E8;
}

/* Botão de fechar customizado */
.btn-close-custom {
    width: 32px;
    height: 32px;
    border: 2px solid #1E335C;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-close-custom::before,
.btn-close-custom::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: #1E335C;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.btn-close-custom::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.btn-close-custom:hover {
    background-color: #1E335C;
}

.btn-close-custom:hover::before,
.btn-close-custom:hover::after {
    background-color: #F7F3EC;
}

/* ============================================
   INFO CARD MODERN - Off-White Layout - OTIMIZADO
   ============================================ */
.info-card-modern {
    background: linear-gradient(135deg, #FFFCF8 0%, #FFFFFF 100%) !important;
    border: 1px solid rgba(59, 135, 198, 0.18) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.info-card-modern:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 8px 24px rgba(59, 135, 198, 0.18);
    border-color: rgba(59, 135, 198, 0.3) !important;
}

.info-card-modern table td {
    vertical-align: middle;
}

/* ============================================
   ÍCONES E FILTROS
   ============================================ */
.icon-filter-white {
    filter: brightness(0) invert(1);
}

.icon-filter-blue {
    filter: invert(14%) sepia(39%) saturate(1820%) hue-rotate(190deg) brightness(95%) contrast(93%);
}

/* ============================================
   RESPONSIVIDADE MOBILE
   ============================================ */
@media (max-width: 640px) {
    .glass-card {
        padding: 1.5rem !important;
    }

    .wifi-icon-animated svg {
        width: 60px;
        height: 60px;
    }

    h1 {
        font-size: 2rem !important;
    }

    .info-card-modern table {
        font-size: 0.75rem;
    }

    .wifi-circles::before {
        width: 200px;
        height: 200px;
    }

    .wifi-circles::after {
        width: 350px;
        height: 350px;
    }
}

/* ============================================
   SMOOTH SCROLLING - OTIMIZADO PARA PERFORMANCE
   ============================================ */
html {
    scroll-behavior: smooth;
}

body {
    /* Força aceleração por GPU em todo o documento */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Otimizar animações durante scroll */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   SELECTION COLORS
   ============================================ */
::selection {
    background-color: #3B87C6;
    color: white;
}

::-moz-selection {
    background-color: #3B87C6;
    color: white;
}