/* Mobile Styles for Registration Pages */
@import url('https://fonts.googleapis.com/css2?family=Helvetica+Neue:wght@400;500&display=swap');

/* Mobile Header Styles */
.mobile-header {
    display: none;
}

.mobile-title {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 30px;
    letter-spacing: 0.21px;
    text-align: center;
    color: #FAFAFB !important;
    margin: 0;
}

.mobile-subtitle {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14.4px;
    letter-spacing: 0.09px;
    text-align: center;
    color: #FAFAFB !important;
    margin: 0;
    padding: 0 27px;
}

/* Desktop styles - hide mobile country field */
.country-field-mobile {
    display: none;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    /* Hide desktop logo and show mobile header */
    .logo-title-block {
        display: none;
    }
    
    .mobile-header {
        display: block;
        text-align: center;
        margin-bottom: 30px;
    }
    
    .mobile-title {
        margin-top: 45px;
        margin-bottom: 15px;
    }
    
    .mobile-subtitle {
        margin-bottom: 30px;
    }

    /* Selection Block Mobile Styles */
    .selection-block {
        width: calc(100% - 60px);
        max-width: none;
        padding: 30px;
        margin: 0 30px;
    }

    /* Form fields - vertical layout with 30px side margins and 15px gaps */
    .form-fields {
        gap: 15px;
    }

    .form-field,
    .role-button {
        width: 100% !important;
        max-width: none;
    }

    .login-block {
        width: 100%;
    }

    .divider-line {
        width: 100%;
        max-width: none;
    }

    /* Name and Password rows - vertical layout */
    .name-row,
    .password-row,
    .form-row-two-fields {
        flex-direction: column;
        gap: 15px;
    }

    /* All form fields should have 27px side margins and full width within container */
    .field-container {
        width: 100%;
        margin: 0;
    }

    .name-field,
    .phone-field,
    .country-field,
    .password-field,
    .email-field,
    .about-textarea {
        width: 100% !important;
        max-width: none;
        box-sizing: border-box;
    }

    /* Ensure name fields stretch to full width */
    .name-row .field-container {
        width: 100%;
    }

    .name-field {
        width: 100% !important;
    }

    /* Ensure password fields stretch to full width */
    .password-row .field-container {
        width: 100%;
    }

    .password-field {
        width: 100% !important;
    }

    /* Contact row mobile - only country code and phone */
    .contact-row,
    .form-row-two-fields {
        flex-direction: row;
        gap: 9px;
        width: 100%;
        display: flex;
    }

    .contact-row .field-container:first-child,
    .form-row-two-fields .field-container:first-child {
        flex: 0 0 45px;
        width: 45px;
        min-width: 45px;
        max-width: 45px;
    }

    .contact-row .field-container:nth-child(2),
    .form-row-two-fields .field-container:nth-child(2) {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        margin-right: 0; /* Remove margin-right for mobile */
        height: 43px;
    }

    .contact-row .field-container.country-field-desktop,
    .form-row-two-fields .field-container.country-field-desktop {
        display: none; /* Hide country from contact row on mobile */
    }

    .country-code-field {
        width: 45px !important;
        height: 43px !important;
        min-width: 45px !important;
        max-width: 45px !important;
    }

    .phone-field {
        width: 100% !important;
        height: 43px !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 !important;
    }
    
    /* Show mobile country field only on mobile - separate row */
    .country-field-mobile {
        display: block !important;
        width: 100%;
        margin-top: 0;
    }
    
    .country-field-mobile .country-field {
        width: 100%;
        margin-top: 0;
    }

    /* Country field separate row */
    .country-field {
        width: 100%;
        margin-top: 0;
    }

    /* Document upload areas - 150px height */
    .document-upload {
        height: 150px;
        width: 100%;
    }

    /* Buttons row - 27px side margins, 6px gap between buttons */
    .buttons-row {
        flex-direction: row;
        gap: 6px;
        margin: 0;
    }

    .role-button.login,
    .role-button.get-started {
        width: 100%;
        flex: 1;
    }

    /* Terms section - 27px side margins */
    .terms-section {
        margin: 0;
    }

    .terms-section .field-container {
        width: 100%;
    }

    /* Mobile terms section styles - override desktop styles */
    .terms-section {
        align-items: flex-start !important;
    }
    
    .terms-section .field-container {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    
    .terms-section .field-container .terms-row {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        width: 100%;
    }

    .terms-checkbox {
        margin-top: 0;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .terms-text {
        flex: 1;
        line-height: 1.4;
        align-self: flex-start;
    }

    .form-errors {
        padding: 10px;
        margin-bottom: 15px;
    }

    .error-message {
        font-size: 11px;
        padding: 6px 8px;
    }
    
    /* Phone field sizing handled above in contact-row section */

    /* Slider and skill bars mobile styles */
    .slider-container,
    .salary-slider,
    .skill-bars {
        width: 100%;
    }

    .name-field,
    .country-field {
        width: 100%;
    }

    .name-row,
    .form-row-two-fields {
        flex-direction: column;
        gap: 18px;
    }
    
    /* contact-row handled separately above with specific mobile layout */
    
    /* Additional fixes for role selection page on mobile */
    .role-selection-container {
        min-height: calc(100vh - 20px);
        min-height: calc(100dvh - 20px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 0;
    }
    
    /* Ensure terms text is properly spaced on mobile - match desktop design */
    .terms-text {
        margin-bottom: 15px !important;
        padding-bottom: 5px !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
    }
    
    /* Restore desktop design for login block - absolute positioning at bottom */
    .login-block {
        position: absolute !important;
        bottom: 0 !important; /* Position at very bottom like desktop */
        left: 0 !important; /* Full width from left */
        right: 0 !important; /* Full width to right */
        width: 100% !important; /* Full width of container */
        margin-top: 0 !important;
        border-radius: 0 0 18px 18px !important; /* Only bottom rounded corners like desktop */
    }
    
    /* Adjust selection block for better mobile layout */
    .selection-block {
        margin-bottom: 20px;
        height: auto !important;
        min-height: 321px;
    }
    
    .selection-content {
        padding-bottom: 20px !important;
    }
}