/**
 * Responsive CSS Module
 * 
 * Mobile breakpoints and responsive adjustments for the Zoho Profile Creation Plugin.
 * This module handles all responsive design and mobile-specific styling.
 */

/* Mobile breakpoint - 600px and below */
@media (max-width: 600px) {
    /* Form layout adjustments */
    .oeg-form-row {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Phone fields stacking */
    .oeg-phone-fields {
        flex-direction: column;
        gap: 5px;
    }
    
    #country-code-input {
        flex: none;
        min-width: auto;
    }
    
    #phone-number-input {
        flex: none;
        min-width: auto;
    }
    
    /* Skills selector adjustments */
    .oeg-skills-container {
        padding: 10px;
    }
    
    .oeg-skill-tag {
        font-size: 0.8em;
        padding: 4px 8px;
        max-width: 150px;
    }
    
    .oeg-skills-dropdown {
        left: 0;
        right: 0;
    }
    
    /* Button container adjustments */
    .oeg-button-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .oeg-button-secondary,
    .oeg-button-primary {
        width: 100%;
    }
    
    /* Resume info row adjustments */
    .oeg-resume-info-row {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .oeg-view-resume-button {
        align-self: flex-end;
    }
    
    /* Unified button row adjustments */
    .oeg-unified-button-row {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    
    .oeg-unified-button-row .oeg-file-upload-container {
        min-width: auto;
    }
    
    /* File upload container adjustments */
    .oeg-file-upload-container {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .oeg-file-upload-container .file-name-display {
        min-width: 200px;
    }
}