.spa-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1200;
    overflow: hidden;
}

.spa-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.spa-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.spa-modal__dialog {
    position: relative;
    background: #050608;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    max-width: 1024px;
    height: 90vh;
    max-height: 900px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.spa-modal__dialog--frame {
    width: min(480px, calc(100% - 24px));
    height: 600px; /* Altura fixa necessária para iOS */
    max-height: 600px;
    padding: 0;
    overflow: hidden; /* Container não tem scroll */
    display: flex;
    flex-direction: column;
    position: relative;
}

.spa-modal__frame {
    position: absolute; /* Absolute com top/bottom funciona no iOS */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    width: 100%;
    height: 100%;
    min-height: 600px; /* iOS precisa de altura mínima */
    background: transparent;
    overflow: scroll; /* scroll forçado ao invés de auto */
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    /* Fix adicional para iOS */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.spa-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 3;
}

@media (max-width: 768px) {
    .spa-modal {
        padding: 0;
    }

    .spa-modal__dialog {
        width: 100%;
        height: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 16px;
    }

    .spa-modal__dialog--frame {
        width: 100%;
        height: 100vh; /* Altura fixa da viewport */
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
        overflow: hidden;
    }
    
    .spa-modal__frame {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh; /* Altura fixa da viewport para iOS */
        min-height: 100vh;
        overflow: scroll; /* scroll forçado */
        -webkit-overflow-scrolling: touch;
        transform: translate3d(0, 0, 0);
    }

    .spa-modal__close {
        top: 10px;
        right: 10px;
    }
}

/* FIX iOS: Permitir scroll dentro do modal sem bloquear o body */
body.spa-modal-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.spa-modal__dialog--perfil {
    width: min(420px, calc(100% - 20px));
    height: auto;
    max-height: 85vh; /* Limitar altura para caber o botão fechar */
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow-y: auto; /* Permitir scroll vertical */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    position: relative;
}

.spa-modal__perfil-content {
    width: 100%;
    padding: 12px;
    padding-bottom: 80px; /* Espaço para o footer */
}

.spa-modal__close--perfil {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    font-size: 26px;
    top: auto;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
}

@media (max-width: 768px) {
    .spa-modal__close--perfil {
        bottom: -50px;
    }
}

/* Fix específico para iOS - Melhorar scroll em iframes */
@supports (-webkit-touch-callout: none) {
    .spa-modal {
        position: fixed !important;
        height: 100vh !important;
        height: -webkit-fill-available !important;
    }

    .spa-modal__dialog {
        height: 90vh !important;
        height: calc(var(--vh, 1vh) * 90) !important;
        max-height: none !important;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    .spa-modal__frame {
        overflow: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    
    body.spa-modal-open {
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
        height: -webkit-fill-available !important;
        overflow: hidden !important;
        /* touch-action removido - bloqueava scroll no iOS */
    }
    
    .spa-modal__backdrop {
        touch-action: none !important;
        overscroll-behavior: none !important;
    }
    
    /* Permitir touch no dialog e frame (iOS scroll fix) */
    .spa-modal__dialog {
        touch-action: auto !important;
    }
    
    .spa-modal__frame {
        touch-action: pan-y !important; /* Permite scroll vertical */
    }
}

/* iOS Scroll Fix - Estrutura testada para Safari iOS */
@media (max-width: 768px) {
    .spa-modal__dialog {
        display: block;
        position: relative;
    }
    
    /* Container do modal precisa de altura fixa no iOS */
    .spa-modal.is-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
}

/* Fix crítico para iOS Safari - Forçar scroll no iframe */
@supports (-webkit-overflow-scrolling: touch) {
    .spa-modal__frame {
        overflow: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        /* Força aceleração de hardware */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Garantir que o container permite o scroll */
    .spa-modal__dialog--frame {
        overflow: hidden !important;
        -webkit-overflow-scrolling: auto;
    }
}

/* Fix específico para iOS 15+ */
@supports (height: 100dvh) {
    @media (max-width: 768px) {
        .spa-modal__dialog--frame {
            height: 100dvh !important;
        }
        
        .spa-modal__frame {
            height: 100dvh !important;
            min-height: 100dvh !important;
        }
    }
}