/**
 * Register Mobile & iOS - CSS Dedicado
 * Design responsivo e profissional para telas mobile e iOS
 */

/* ==========================================================================
   iOS & MOBILE - REGISTER PAGE
   ========================================================================== */

/* body::before (barra vermelha status bar) vem de layout-mobile.css */

@media (max-width: 768px) {
    /* ==========================================================================
       BLOQUEAR PULL-TO-REFRESH — APP BEHAVIOR
       ========================================================================== */

    html, body {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
        overscroll-behavior-y: contain !important;
    }

    /* ==========================================================================
       PREFERÊNCIAS / CONFIGURAÇÕES
       ========================================================================== */

    .preferences-controls {
        position: absolute !important;
        top: calc(2.8rem + 20px) !important;
        right: 20px !important;
        z-index: 1000 !important;
    }

    .preferences-toggle {
        background-color: transparent !important;
        border: 1px solid #737373 !important;
        border-radius: 50% !important;
        padding: 10px !important;
        cursor: pointer !important;
        color: #737373 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .preferences-toggle svg {
        stroke: #737373 !important;
    }

    .preferences-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 240px !important;
        max-width: none !important;
        background-color: var(--login-prefs-bg) !important;
        border: 1px solid var(--login-prefs-border) !important;
        border-radius: 12px !important;
        padding: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 1001 !important;
        overflow: hidden !important;
    }

    .preferences-menu *,
    .preferences-menu *::before,
    .preferences-menu *::after {
        box-sizing: border-box !important;
    }

    .preference-group {
        margin-bottom: 16px !important;
    }

    .preference-group:last-child {
        margin-bottom: 0 !important;
    }

    .preference-label {
        font-size: 13px !important;
        margin-bottom: 10px !important;
        font-weight: 600 !important;
    }

    .theme-switch {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .language-switch {
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .theme-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        border: none !important;
        width: 100% !important;
    }

    .theme-btn[data-theme="light"] {
        background-color: #e63946 !important;
        color: #ffffff !important;
    }

    .theme-btn[data-theme="dark"] {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    .theme-btn i {
        color: #ffffff !important;
    }

    .lang-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border-width: 2px !important;
        overflow: hidden !important;
    }

    .lang-btn .fi {
        font-size: 28px !important;
        border-radius: 50% !important;
    }

    /* ==========================================================================
       REGISTER CONTAINER
       ========================================================================== */

    .register-container {
        flex-direction: column !important;
        margin-top: 0 !important;
        padding: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    /* ==========================================================================
       SEÇÃO DIREITA (INFO) - OCULTA NO MOBILE
       ========================================================================== */

    .register-right {
        display: none !important;
    }

    /* ==========================================================================
       REGISTER CARD - CONTAINER DE SCROLL
       ========================================================================== */

    .register-card {
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: calc(2.8rem + 70px) 1.5rem 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        position: relative !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: auto !important;
    }

    /* margin:auto centraliza verticalmente quando o conteúdo cabe na tela.
       Quando o conteúdo é maior (form aberto), margin colapsa e scroll funciona. */
    .register-form-container {
        width: 100% !important;
        max-width: 400px !important;
        padding: 0 !important;
        margin: auto 0 !important;
        position: relative !important;
        z-index: 2 !important;
        flex-shrink: 0 !important;
    }

    /* ==========================================================================
       TIPOGRAFIA
       ========================================================================== */

    .register-title {
        font-size: 26px !important;
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
        letter-spacing: -0.5px !important;
    }

    .register-subtitle {
        font-size: 14px !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        opacity: 0.8 !important;
        line-height: 1.4 !important;
    }

    /* ==========================================================================
       ALERTAS
       ========================================================================== */

    .alert-error {
        padding: 12px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 1rem !important;
        font-size: 13px !important;
        border: 1px solid rgba(255, 107, 107, 0.3) !important;
        backdrop-filter: blur(10px) !important;
    }

    .alert-error-list {
        margin: 0.5rem 0 0 0 !important;
        padding-left: 1.2rem !important;
    }

    .alert-error-list li {
        margin-bottom: 0.25rem !important;
        font-size: 12px !important;
    }

    /* ==========================================================================
       TABS
       ========================================================================== */

    .register-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.4rem !important;
        margin-bottom: 1.5rem !important;
    }

    .tab-wrapper {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .tab-btn {
        width: 100% !important;
        padding: 10px 6px !important;
        font-size: 13px !important;
        border-radius: 50px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tab-btn i {
        display: none !important;
    }

    .tab-btn span {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* ==========================================================================
       LOGO - Mesmo tamanho e margem do login mobile
       ========================================================================== */

    .register-container .logo-container {
        margin-top: 20px !important;
        margin-bottom: 50px !important;
    }

    .register-container .logo-img {
        width: 280px !important;
        height: auto !important;
    }

    /* ==========================================================================
       STEP INDICATOR
       ========================================================================== */

    .step-indicator {
        margin-bottom: 1rem !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
    }

    .step-indicator-text {
        font-size: 12px !important;
    }

    .step-progress-bar {
        height: 4px !important;
        border-radius: 2px !important;
    }

    .step-progress-fill {
        height: 100% !important;
        border-radius: 2px !important;
    }

    /* ==========================================================================
       FORM SECTION
       ========================================================================== */

    .form-section {
        margin-bottom: 0 !important;
    }

    .form-section-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 1rem !important;
    }

    /* ==========================================================================
       FORM GROUPS & INPUTS
       ========================================================================== */

    .form-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .form-group {
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }

    .form-group label {
        font-size: 13px !important;
        margin-bottom: 0.4rem !important;
        font-weight: 500 !important;
    }

    .form-group input {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 50px !important;
        transition: all 0.3s ease !important;
        -webkit-appearance: none !important;
        -webkit-border-radius: 50px !important;
    }

    .form-group input:focus {
        outline: none !important;
        border-color: var(--accent-color) !important;
        box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1) !important;
    }

    .form-group small {
        font-size: 11px !important;
        margin-top: 0.25rem !important;
        display: block !important;
    }

    /* ==========================================================================
       PASSWORD GROUP
       ========================================================================== */

    .password-group input {
        padding-right: 54px !important;
    }

    /* Toggle de senha */
    .password-group label ~ .toggle-password {
        right: 18px !important;
        top: calc(50% + 10px) !important;
        transform: translateY(-50%) !important;
        bottom: auto !important;
        padding: 4px !important;
        border-radius: 10px !important;
        background: transparent !important;
        transition: all 0.2s ease !important;
    }

    .toggle-password:active {
        transform: translateY(-50%) scale(0.95) !important;
    }

    .toggle-password.hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* ==========================================================================
       FIELD ERRORS
       ========================================================================== */

    .field-error {
        font-size: 11px !important;
        color: #FF5757 !important;
        margin-top: 0.25rem !important;
        display: block !important;
    }

    .input-error {
        border-color: #FF5757 !important;
    }

    /* ==========================================================================
       ADDRESS BY CEP
       ========================================================================== */

    .address-by-cep {
        margin-top: 0 !important;
    }

    .cep-loading,
    .cep-error {
        font-size: 11px !important;
        margin-top: 0.25rem !important;
        display: none !important;
    }

    .cep-loading:active,
    .cep-error:active {
        display: block !important;
    }

    /* ==========================================================================
       STEP ACTIONS
       ========================================================================== */

    .step-actions {
        margin-top: 2.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .step-actions--submit {
        flex-direction: column !important;
    }

    .btn-next-step,
    .btn-prev-step,
    .btn-submit {
        width: 100% !important;
        padding: 16px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .btn-prev-step:active {
        transform: scale(0.98) !important;
    }

    .btn-next-step,
    .btn-submit {
        background-color: var(--accent-color) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    .btn-next-step:active,
    .btn-submit:active {
        transform: scale(0.98) !important;
    }

    /* ==========================================================================
       LOGIN LINK
       ========================================================================== */

    .login-link {
        text-align: center !important;
        font-size: 13px !important;
        margin-top: 1.5rem !important;
        margin-bottom: 2.5rem !important;
    }

    .login-link a {
        font-weight: 600 !important;
        text-decoration: none !important;
        margin-left: 0.25rem !important;
    }

    /* Link de voltar para etapa 1 */
    .back-link-step-2 {
        text-align: center !important;
        font-size: 15px !important;
        margin-top: 1.5rem !important;
        margin-bottom: 1rem !important;
        display: none !important;
    }

    .back-link-step-2.visible {
        display: block !important;
    }

    .back-link-step-2 a {
        text-decoration: none !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        transition: color 0.2s !important;
    }

    .back-link-step-2 a i {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    .back-link-step-2 a span {
        display: inline-block !important;
    }

    /* ==========================================================================
       SAFE AREA (iPhone X+)
       ========================================================================== */

    @supports (padding: max(0px)) {
        .register-card {
            padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
            padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
            padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
        }

        .preferences-controls {
            top: max(calc(2.8rem + 20px), calc(env(safe-area-inset-top) + 20px)) !important;
            right: max(20px, env(safe-area-inset-right)) !important;
        }
    }
}

/* ==========================================================================
   ORIENTAÇÃO LANDSCAPE
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .register-card {
        padding: 2rem 1.5rem 1.5rem !important;
    }

    .register-form-container::before {
        height: 80px !important;
        margin-bottom: 1rem !important;
    }

    .register-title {
        font-size: 22px !important;
    }

    .register-subtitle {
        font-size: 13px !important;
        margin-bottom: 1rem !important;
    }

    .form-group {
        margin-bottom: 0.5rem !important;
    }
}

/* ==========================================================================
   DISPOSITIVOS PEQUENOS (< 375px)
   ========================================================================== */

@media (max-width: 374px) {
    .register-card {
        padding: 2.5rem 1rem 1.5rem !important;
    }

    .register-form-container::before {
        height: 80px !important;
    }

    .register-title {
        font-size: 22px !important;
    }

    .form-group input {
        padding: 12px 14px !important;
        font-size: 16px !important;
    }

    .btn-next-step,
    .btn-prev-step,
    .btn-submit {
        padding: 14px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   ANIMAÇÕES SUAVES
   ========================================================================== */

@media (max-width: 768px) {
    .register-form-container {
        animation: slideUp 0.5s ease-out;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .register-title,
    .register-subtitle,
    .register-tabs,
    .register-form,
    .login-link {
        animation: fadeIn 0.5s ease-out backwards;
    }

    .register-title { animation-delay: 0.05s; }
    .register-subtitle { animation-delay: 0.1s; }
    .register-tabs { animation-delay: 0.15s; }
    .register-form { animation-delay: 0.2s; }
    .login-link { animation-delay: 0.3s; }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* ==========================================================================
       MODAL INFO TIPO DE USUÁRIO
       ========================================================================== */

    .user-type-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2000;
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        touch-action: none;
        overscroll-behavior: contain;
    }

    .user-type-modal-overlay.active {
        display: flex;
    }

    .user-type-modal {
        background: var(--bg-login, #fff);
        border: 1px solid var(--login-prefs-border, rgba(0,0,0,0.1));
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-top: 0 !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
        padding-bottom: 48px !important;
        width: 100vw;
        max-width: 100vw;
        height: auto;
        max-height: 85dvh;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        text-align: center;
        display: flex;
        flex-direction: column;
        animation: modalBottomSheet 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }

    .user-type-modal-close {
        display: none !important;
    }

    .user-type-modal-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0 14px;
        cursor: grab;
        touch-action: none;
    }

    .user-type-modal-handle::before {
        content: '';
        display: block;
        width: 50px;
        height: 4px;
        border-radius: 4px;
        background: var(--login-input-border, #ccc);
    }

    .user-type-modal-icon {
        margin-bottom: 12px;
        color: var(--accent-color, #FF5757);
    }

    .user-type-modal-title {
        font-size: 20px;
        font-weight: 700;
        margin-top: 8px;
        margin-bottom: 16px;
        color: var(--text-primary, #1a1a1a);
    }

    .user-type-modal-desc {
        text-align: left;
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-secondary, #555);
    }

    .user-type-modal-desc p {
        margin: 0 0 10px 0;
        padding-left: 12px;
        border-left: 2px solid var(--accent-color, #FF5757);
    }

    .user-type-modal-desc p:last-child {
        margin-bottom: 0;
    }

    .user-type-modal-btn {
        margin-top: 20px;
        width: 40%;
        margin-left: auto;
        margin-right: auto;
        display: block;
        padding: 0.65rem 1.5rem;
        background: transparent;
        color: #737373;
        border: 2px solid #737373;
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        min-height: 44px;
        transition: all 0.2s ease;
    }

    .user-type-modal-btn:active {
        background: var(--accent-color, #FF5757);
        border-color: var(--accent-color, #FF5757);
        color: #fff;
    }

    @keyframes modalBottomSheet {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}