/**
 * FORM MOBILE RESPONSIVE - Tessera Amoris
 * Otimizações específicas para o formulário de aplicação em mobile
 * Data: 30 de outubro de 2025
 */

/* ========================================
   FORM CONTAINER
   ======================================== */

@media (max-width: 768px) {
    .form-container {
        padding: 20px 16px;
        max-width: 100%;
    }
    
    .form-section {
        padding: 30px 20px;
        margin: 0 auto;
    }
    
    .section-content {
        padding: 0;
    }
}

@media (max-width: 576px) {
    .form-container {
        padding: 15px 12px;
    }
    
    .form-section {
        padding: 25px 15px;
    }
}

/* ========================================
   INPUT FIELDS
   ======================================== */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important; /* Prevenir zoom no iOS */
        padding: 14px 16px !important;
        width: 100%;
        border-radius: 8px;
        min-height: 48px; /* Touch-friendly */
    }
    
    textarea {
        min-height: 120px;
        resize: vertical;
    }
    
    /* Labels */
    label,
    .form-label {
        font-size: 14px !important;
        margin-bottom: 8px;
        display: block;
    }
    
    /* Input groups */
    .input-group,
    .form-group {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        padding: 12px 14px !important;
    }
    
    label,
    .form-label {
        font-size: 13px !important;
    }
}

/* ========================================
   BUTTONS
   ======================================== */

@media (max-width: 768px) {
    .btn-next,
    .btn-prev,
    .btn-submit,
    .form-btn {
        width: 100%;
        padding: 16px 24px !important;
        font-size: 16px !important;
        margin: 10px 0;
        min-height: 48px;
        border-radius: 8px;
    }
    
    .btn-container,
    .form-navigation {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
    }
    
    /* Botões lado a lado em telas médias */
    .form-navigation.two-buttons {
        flex-direction: row;
        gap: 12px;
    }
    
    .form-navigation.two-buttons .btn-prev,
    .form-navigation.two-buttons .btn-next {
        flex: 1;
    }
}

@media (max-width: 576px) {
    .btn-next,
    .btn-prev,
    .btn-submit,
    .form-btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
    
    /* Botões em coluna em telas pequenas */
    .form-navigation.two-buttons {
        flex-direction: column;
    }
}

/* ========================================
   PROGRESS BAR
   ======================================== */

@media (max-width: 768px) {
    .progress-bar,
    .form-progress {
        padding: 20px 10px;
        margin-bottom: 20px;
    }
    
    .progress-step {
        font-size: 12px;
        padding: 8px 4px;
    }
    
    .progress-indicator {
        height: 4px;
    }
    
    .step-number {
        font-size: 14px;
        width: 28px;
        height: 28px;
        line-height: 28px;
    }
}

@media (max-width: 576px) {
    .progress-bar,
    .form-progress {
        padding: 15px 5px;
    }
    
    .progress-step {
        font-size: 11px;
    }
    
    .step-number {
        font-size: 12px;
        width: 24px;
        height: 24px;
        line-height: 24px;
    }
}

/* ========================================
   SECTION TITLES
   ======================================== */

@media (max-width: 768px) {
    .section-title,
    .form-section-title {
        font-size: 28px !important;
        margin-bottom: 16px;
        line-height: 1.2;
    }
    
    .section-subtitle,
    .form-section-subtitle {
        font-size: 16px !important;
        margin-bottom: 24px;
        line-height: 1.5;
    }
    
    .section-description {
        font-size: 14px;
        line-height: 1.6;
    }
}

@media (max-width: 576px) {
    .section-title,
    .form-section-title {
        font-size: 24px !important;
        margin-bottom: 12px;
    }
    
    .section-subtitle,
    .form-section-subtitle {
        font-size: 15px !important;
        margin-bottom: 20px;
    }
    
    .section-description {
        font-size: 13px;
    }
}

/* ========================================
   CHECKBOXES E RADIO BUTTONS
   ======================================== */

@media (max-width: 768px) {
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }
    
    .checkbox-label,
    .radio-label {
        font-size: 15px;
        padding-left: 12px;
        line-height: 1.5;
    }
    
    .checkbox-group,
    .radio-group {
        margin-bottom: 16px;
    }
    
    .checkbox-item,
    .radio-item {
        padding: 12px;
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    input[type="checkbox"],
    input[type="radio"] {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
    }
    
    .checkbox-label,
    .radio-label {
        font-size: 14px;
    }
}

/* ========================================
   SELECT DROPDOWNS
   ======================================== */

@media (max-width: 768px) {
    select {
        background-position: right 12px center;
        background-size: 16px;
        padding-right: 40px !important;
    }
    
    .select-wrapper {
        position: relative;
        width: 100%;
    }
}

/* ========================================
   FILE UPLOAD
   ======================================== */

@media (max-width: 768px) {
    .file-upload,
    .photo-upload {
        padding: 20px;
        min-height: 120px;
    }
    
    .file-upload-label {
        font-size: 14px;
    }
    
    .file-upload-icon {
        font-size: 32px;
        margin-bottom: 12px;
    }
    
    .file-preview {
        max-width: 100%;
        margin-top: 16px;
    }
}

@media (max-width: 576px) {
    .file-upload,
    .photo-upload {
        padding: 16px;
        min-height: 100px;
    }
    
    .file-upload-label {
        font-size: 13px;
    }
    
    .file-upload-icon {
        font-size: 28px;
    }
}

/* ========================================
   VALIDATION MESSAGES
   ======================================== */

@media (max-width: 768px) {
    .error-message,
    .validation-error {
        font-size: 13px;
        padding: 8px 12px;
        margin-top: 8px;
        border-radius: 6px;
    }
    
    .success-message,
    .validation-success {
        font-size: 13px;
        padding: 8px 12px;
        margin-top: 8px;
        border-radius: 6px;
    }
    
    .field-error {
        border-color: #dc3545 !important;
    }
    
    .field-success {
        border-color: #28a745 !important;
    }
}

/* ========================================
   REVIEW SECTION
   ======================================== */

@media (max-width: 768px) {
    .review-section {
        padding: 20px 15px;
    }
    
    .review-item {
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 8px;
    }
    
    .review-label {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
    }
    
    .review-value {
        font-size: 15px;
        line-height: 1.5;
    }
    
    .edit-btn {
        font-size: 13px;
        padding: 6px 12px;
        margin-top: 8px;
    }
}

@media (max-width: 576px) {
    .review-section {
        padding: 15px 10px;
    }
    
    .review-item {
        padding: 12px;
    }
    
    .review-label {
        font-size: 12px;
    }
    
    .review-value {
        font-size: 14px;
    }
}

/* ========================================
   MULTI-COLUMN LAYOUTS
   ======================================== */

@media (max-width: 768px) {
    .form-row,
    .form-columns {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .form-col,
    .form-column {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* ========================================
   MODALS E OVERLAYS
   ======================================== */

@media (max-width: 768px) {
    .modal,
    .overlay {
        padding: 20px;
    }
    
    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 12px;
        padding: 24px 20px;
    }
    
    .modal-header {
        font-size: 22px;
        margin-bottom: 16px;
    }
    
    .modal-body {
        font-size: 15px;
    }
    
    .modal-footer {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .modal-close {
        font-size: 24px;
        top: 12px;
        right: 12px;
    }
}

@media (max-width: 576px) {
    .modal,
    .overlay {
        padding: 15px;
    }
    
    .modal-content {
        padding: 20px 16px;
    }
    
    .modal-header {
        font-size: 20px;
    }
}

/* ========================================
   TOOLTIPS E HELP TEXT
   ======================================== */

@media (max-width: 768px) {
    .tooltip,
    .help-text {
        font-size: 12px;
        padding: 8px 10px;
        max-width: 90%;
    }
    
    .info-icon {
        font-size: 16px;
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   LOADING STATES
   ======================================== */

@media (max-width: 768px) {
    .loading-spinner {
        width: 40px;
        height: 40px;
    }
    
    .loading-text {
        font-size: 14px;
        margin-top: 12px;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Aumentar área de toque */
    button,
    a,
    input,
    select,
    textarea {
        min-height: 44px;
    }
    
    /* Melhorar contraste */
    ::placeholder {
        opacity: 0.6;
    }
    
    /* Focus visível */
    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: 2px solid var(--gold, #d4af37);
        outline-offset: 2px;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .form-section {
        padding: 20px 15px;
    }
    
    .section-title {
        font-size: 24px !important;
        margin-bottom: 12px;
    }
    
    .section-subtitle {
        font-size: 14px !important;
        margin-bottom: 16px;
    }
    
    textarea {
        min-height: 80px;
    }
}