/*
 * CSS específico para a página de registro
 * Não afeta outras páginas que usam style.css
 */

/* Estilos específicos para o formulário de registro */
.register-page {
    /* Garantir que só afete a página de registro */
}

.register-page * {
    box-sizing: border-box;
}

/* Container específico do formulário de registro */
.register-form-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

/* Melhorias específicas para mobile - só no registro */
@media (max-width: 767.98px) {
    .register-page .container-fluid {
        min-height: 100vh;
        height: auto;
        overflow: visible;
    }

    .register-page .row {
        min-height: 100vh;
        height: auto;
        flex-direction: column;
    }

    .register-page .col-md-6.bg-white {
        width: 100% !important;
        flex: none;
        min-height: 100vh;
        height: auto;
        padding: 1rem;
        justify-content: flex-start;
        align-items: center;
        overflow: visible;
    }

    .register-form-container {
        padding: 2rem 1rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100vh - 2rem);
        box-sizing: border-box;
    }

    /* Títulos específicos do registro */
    .register-form-container h3 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        line-height: 1.3;
        text-align: center;
    }

    /* Inputs específicos do registro */
    .register-form-container .form-control-lg {
        padding: 1rem;
        font-size: 16px;
        line-height: 1.5;
        min-height: 50px;
    }

    /* Botão específico do registro */
    .register-form-container .btn-lg {
        padding: 1rem;
        font-size: 1.1rem;
        margin-bottom: 1rem;
        min-height: 50px;
    }

    /* Labels específicas do registro */
    .register-form-container .form-label {
        margin-bottom: 0.5rem;
        font-weight: 500;
    }

    /* Espaçamento específico entre campos do registro */
    .register-form-container .mb-3 {
        margin-bottom: 1rem !important;
    }

    .register-form-container .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    /* Link específico do registro */
    .register-form-container .text-decoration-none {
        font-size: 0.95rem;
        margin-top: 1rem;
        display: block;
        text-align: center;
    }

    /* Fix para iOS quando input está focado - só no registro */
    .register-page body.fixed-body {
        position: fixed;
        width: 100%;
    }

    /* Espaço extra no final - só no registro */
    .register-form-container::after {
        content: '';
        display: block;
        height: 1rem;
    }
}

/* Telas muito pequenas - só registro */
@media (max-width: 479.98px) {
    .register-page .col-md-6.bg-white {
        padding: 0.75rem;
        min-height: 100vh;
    }

    .register-form-container {
        padding: 1rem 0.75rem;
        min-height: calc(100vh - 1.5rem);
    }

    .register-form-container h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .register-form-container .form-control-lg {
        padding: 0.875rem;
        font-size: 16px;
        min-height: 48px;
    }

    .register-form-container .btn-lg {
        padding: 0.875rem;
        font-size: 1rem;
        min-height: 48px;
    }
}

/* Orientação paisagem - só registro */
@media (max-height: 600px) and (orientation: landscape) {
    .register-page .col-md-6.bg-white {
        justify-content: flex-start;
        padding: 0.5rem;
        overflow-y: auto;
    }

    .register-form-container {
        padding: 1rem 0.75rem;
        min-height: auto;
        margin: 0 auto;
    }

    .register-form-container h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .register-form-container .mb-3 {
        margin-bottom: 0.75rem !important;
    }

    .register-form-container .mb-4 {
        margin-bottom: 1rem !important;
    }

    .register-form-container .form-control-lg {
        padding: 0.75rem;
        min-height: 44px;
    }

    .register-form-container .btn-lg {
        padding: 0.75rem;
        min-height: 44px;
    }
}

/* MELHORIAS PARA TOGGLE DE SENHA - CORRIGIDO COMPLETAMENTE */
.register-form-container .position-relative {
    position: relative;
    display: flex;
    align-items: stretch;
    isolation: isolate;
}

.register-form-container .position-relative .btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: auto !important;
    border: none !important;
    background: transparent !important;
    color: #6c757d;
    padding: 0 0.75rem !important;
    z-index: 10;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    isolation: isolate;
}

/* Ajustar padding dos inputs de senha para dar espaço ao ícone */
.register-form-container #password, 
.register-form-container #passwordConfirmation {
    padding-right: 3rem !important;
    position: relative;
    z-index: 1;
}

/* Estados de validação - manter o mesmo posicionamento do toggle */
.register-form-container .form-control.is-invalid + .btn,
.register-form-container .form-control.is-valid + .btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    transform: none !important;
}

/* Correção adicional para casos específicos de validação */
.register-form-container .position-relative .form-control.is-invalid:focus + .btn,
.register-form-container .position-relative .form-control.is-valid:focus + .btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
}

/* Estados hover, focus e active do botão toggle */
.register-form-container .position-relative .btn:hover {
    color: #495057 !important;
    background: transparent !important;
}

.register-form-container .position-relative .btn:focus {
    box-shadow: none !important;
    outline: none !important;
    color: #ff6201 !important;
}

.register-form-container .position-relative .btn:focus-visible {
    outline: 2px solid #ff6201;
    outline-offset: 2px;
    border-radius: 4px;
}

.register-form-container .position-relative .btn:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ícone do toggle */
.register-form-container .position-relative .btn i {
    pointer-events: none;
    font-size: 1rem;
    transition: opacity 0.2s ease;
}

/* Garantir que o input tenha z-index correto */
.register-form-container .position-relative .form-control {
    position: relative;
    z-index: 1;
    height: auto;
    min-height: 48px;
}

/* ESTADOS DE FOCO MELHORADOS - CORRIGIDO */
.register-form-container .form-control:focus {
    border-color: #ff6201 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 98, 1, 0.25) !important;
}

/* Estados de validação melhorados */
.register-form-container .is-invalid {
    border-color: #dc3545;
}

.register-form-container .is-valid {
    border-color: #28a745;
}

.register-form-container .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
}

.register-form-container .form-control.is-invalid {
    border-width: 1px !important;
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.register-form-container .form-control.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.register-form-container .form-control.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.register-form-container .form-control.is-valid:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* Loading state do botão - só registro */
.register-form-container #submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Viewport height fix - só registro */
@media (max-width: 767.98px) {
    .register-page .container-fluid {
        min-height: calc(var(--vh, 1vh) * 100);
    }

    .register-page .col-md-6.bg-white {
        min-height: calc(var(--vh, 1vh) * 100);
    }

    .register-form-container {
        min-height: calc(var(--vh, 1vh) * 100 - 2rem);
    }

    /* Ajustes do toggle para mobile */
    .register-form-container .position-relative .btn {
        padding: 0 0.5rem !important;
        right: 0 !important;
        min-width: 40px;
    }
    
    .register-form-container #password, 
    .register-form-container #passwordConfirmation {
        padding-right: 2.75rem !important;
    }

    .register-form-container .position-relative .form-control {
        min-height: 48px;
    }
}

/* Correção específica para iOS Safari - só registro */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767.98px) {
        .register-form-container {
            min-height: calc(-webkit-fill-available - 2rem);
        }
    }
}

/* Alertas específicos do registro */
.register-form-container .alert {
    margin-bottom: 1rem;
    word-wrap: break-word;
    border-radius: 8px;
}

@media (max-width: 767.98px) {
    .register-form-container .alert {
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}