/* ========================================
   REGISTRATION PAGE - SPECIFIC STYLES
   ======================================== */

/* Registration Form Group */
#registrationPage1 .reg-form-group,
#registrationPage2 .reg-form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

/* Registration Input Fields */
#registrationPage1 .reg-input,
#registrationPage2 .reg-input,
#registrationPage1 select,
#registrationPage2 select {
    width: 100%;
    padding: 1.8rem 0.75rem 0.5rem;
    border: none;
    border-bottom: 1px solid #e0e6ed;
    background: transparent;
    font-size: 1rem;
    color: var(--text-dark);
    transition: border-color 0.3s ease;
    font-family: 'AZURESans', sans-serif;
}

#registrationPage1 .reg-input:focus,
#registrationPage2 .reg-input:focus,
#registrationPage1 select:focus,
#registrationPage2 select:focus {
    outline: none;
    border-bottom-color: var(--azure-primary);
    /* Remove tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
}

/* Floating Labels - Start Azure Blue, BOLD */
#registrationPage1 .reg-form-group label,
#registrationPage2 .reg-form-group label {
    position: absolute;
    left: 0.2rem;
    top: 1rem;
    color: var(--azure-primary);
    font-size: 1rem;
    font-weight: 990;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* When focused or filled - Floats ABOVE field and turns Light Blue, lighter weight */
#registrationPage1 .reg-input:focus + label,
#registrationPage2 .reg-input:focus + label,
#registrationPage1 .reg-input:not(:placeholder-shown) + label,
#registrationPage2 .reg-input:not(:placeholder-shown) + label,
#registrationPage1 select:focus + label,
#registrationPage2 select:focus + label,
#registrationPage1 select:not([value=""]) + label,
#registrationPage2 select:not([value=""]) + label {
    top: -1rem;
    font-size: 0.8rem;
    color: var(--azure-light-blue);
    font-weight: 700;
}

/* Error Message - Simple red text only, no box, no icons */
#registrationPage1 .error-message,
#registrationPage2 .error-message {
    display: none;
    color: #e74c3c;
    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 0.5rem;
    text-transform: none;
}

#registrationPage1 .reg-form-group.has-error .error-message,
#registrationPage2 .reg-form-group.has-error .error-message {
    display: block;
}

#registrationPage1 .reg-form-group.has-error .reg-input,
#registrationPage2 .reg-form-group.has-error .reg-input,
#registrationPage1 .reg-form-group.has-error select,
#registrationPage2 .reg-form-group.has-error select {
    border-bottom-color: #e74c3c;
    border-bottom-width: 2px;
}

/* Mobile Specific - Registration (EXACT Inquire.css Style) */
/* Increased breakpoint to 960px to handle browser zoom (125% zoom compatible) */
@media (max-width: 960px) {
    /* Remove the title ::before - we use hero section instead */
    #registrationPage1 .registration-container::before,
    #registrationPage2 .registration-container::before {
        display: none;
    }
    
    /* Progress bar - Fixed on same line as close button */
    #registrationPage1 .progress-bar,
    #registrationPage2 .progress-bar {
        position: absolute;
        top: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        margin-bottom: 0;
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    /* Close button positioning - on hero background */
    #registrationPage1 .close-btn,
    #registrationPage2 .close-btn {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 10;
        width: 44px;
        height: 44px;
        background: rgba(12, 67, 106, 0.1);
        border: 1px solid rgba(12, 67, 106, 0.2);
        border-radius: 50%;
        color: var(--azure-primary);
        font-size: 1.25rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #registrationPage1 .close-btn:hover,
    #registrationPage2 .close-btn:hover {
        background: rgba(12, 67, 106, 0.15);
        border-color: rgba(12, 67, 106, 0.3);
    }

    /* Form groups - Match screenshot spacing */
    #registrationPage1 .reg-form-group,
    #registrationPage2 .reg-form-group {
        margin-bottom: 3rem;
        position: relative;
    }
    
    /* Static labels for toggle groups - Azure Primary Blue */
    #registrationPage1 .form-label,
    #registrationPage2 .form-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: #0C436A;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
    }

    /* Input fields - Underline only (Inquire.css style) */
    #registrationPage1 .reg-input,
    #registrationPage2 .reg-input,
    #registrationPage1 select,
    #registrationPage2 select {
        width: 100%;
        padding: 1.25rem 0 0.75rem 0;
        border: none;
        border-bottom: 1px solid #d0d0d0;
        border-radius: 0;
        background: transparent;
        font-size: 1rem;
        color: #333333;
        font-family: 'AZURESans', sans-serif;
        outline: none;
        transition: border-color 0.3s ease;
        line-height: 1.5;
    }

    #registrationPage1 .reg-input:focus,
    #registrationPage2 .reg-input:focus,
    #registrationPage1 select:focus,
    #registrationPage2 select:focus {
        border-bottom-color: #0C436A;
        background: transparent;
        box-shadow: none;
    }

    /* Floating Labels - Inquire.css exact style */
    #registrationPage1 .reg-form-group label[for],
    #registrationPage2 .reg-form-group label[for] {
        position: absolute;
        left: 0;
        top: 1.25rem;
        font-size: 1rem;
        color: #0C436A;
        pointer-events: none;
        transition: all 0.3s ease;
        transform-origin: left top;
        font-weight: normal;
        text-transform: none;
        letter-spacing: normal;
    }
    
    /* Label floats up when focused or has value - Azure Light Blue when active */
    #registrationPage1 .reg-input:focus + label,
    #registrationPage2 .reg-input:focus + label,
    #registrationPage1 .reg-input:not(:placeholder-shown) + label,
    #registrationPage2 .reg-input:not(:placeholder-shown) + label,
    #registrationPage1 select:focus + label,
    #registrationPage2 select:focus + label,
    #registrationPage1 select:valid + label,
    #registrationPage2 select:valid + label {
        top: 0.25rem;
        font-size: 0.75rem;
        color: #4096CA;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    /* Force label to stay up for readonly/pre-filled fields */
    #registrationPage1 .reg-form-group.readonly label,
    #registrationPage2 .reg-form-group.readonly label,
    .label-up {
        top: 0.25rem !important;
        font-size: 0.75rem !important;
        color: #4096CA !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }
    
    /* Placeholder - hidden by default, shown on focus (Inquire.css style) */
    #registrationPage1 .reg-input::placeholder,
    #registrationPage2 .reg-input::placeholder {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    #registrationPage1 .reg-input:focus::placeholder,
    #registrationPage2 .reg-input:focus::placeholder {
        opacity: 0.5;
    }

    /* Toggle buttons - Match screenshot spacing */
    #registrationPage1 .toggle-group,
    #registrationPage2 .toggle-group {
        margin-top: 4rem;
        display: flex;
        gap: 0.1rem;
        width: 100%;
    }
    
    #registrationPage1 .toggle-btn,
    #registrationPage2 .toggle-btn {
        flex: 1;
        padding: 1rem 1.25rem;
        border: 1px solid #d0d0d0;
        background: transparent;
        transition: all 0.3s ease;
        border-radius: 60px;
        font-size: 0.85rem;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        color: #666666;
    }
    
    /* Bedroom buttons - 4 buttons in a row, square shape */
    #registrationPage2 .toggle-group.bedrooms {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
    
    #registrationPage2 .toggle-group.bedrooms .toggle-btn {
        padding: 0.9rem 0.5rem;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    
    
    /* Bedroom toggle group specific - reduced bottom margin */
    #registrationPage2 .reg-form-group:has(.toggle-group.bedrooms) {
        margin-bottom: 4rem;
    }
    
    #registrationPage1 .toggle-btn.active,
    #registrationPage2 .toggle-btn.active {
        background: var(--azure-primary);
        border-color: var(--azure-primary);
        color: #ffffff;
    }

    /* Error messages - Simple text below field */
    #registrationPage1 .error-message,
    #registrationPage2 .error-message {
        display: none;
        color: #e74c3c;
        font-size: 0.85rem;
        line-height: 1.5;
        margin-top: 0.5rem;
        text-transform: none;
        font-weight: normal;
    }

    #registrationPage1 .reg-form-group.has-error .error-message,
    #registrationPage2 .reg-form-group.has-error .error-message {
        display: block;
    }

    #registrationPage1 .reg-form-group.has-error .reg-input,
    #registrationPage2 .reg-form-group.has-error .reg-input,
    #registrationPage1 .reg-form-group.has-error select,
    #registrationPage2 .reg-form-group.has-error select {
        border-bottom-color: #e74c3c;
        border-bottom-width: 2px;
        background: transparent;
    }
    
    /* Navigation buttons - Inquire.css style */
    #registrationPage1 .reg-navigation,
    #registrationPage2 .reg-navigation {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    /* Button row container for page 2 */
    #registrationPage2 .reg-button-row {
        width: 100%;
        margin-bottom: 1.25rem;
    }
    
    #registrationPage1 .btn-animated,
    #registrationPage2 .btn-animated {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 1rem 2rem;
        width: 100%;
        font-family: 'AZURESans', sans-serif;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    /* Primary button (Next/Submit) */
    #registrationPage1 .btn-blue,
    #registrationPage2 .btn-blue {
        background: #0C436A;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(12, 67, 106, 0.3);
        margin: 0;
    }
    
    #registrationPage1 .btn-blue:hover:not(:disabled),
    #registrationPage2 .btn-blue:hover:not(:disabled) {
        background: #1565C0;
        box-shadow: 0 6px 16px rgba(12, 67, 106, 0.4);
        transform: translateY(-2px);
    }
    
    #registrationPage1 .btn-blue:active,
    #registrationPage2 .btn-blue:active {
        transform: translateY(0);
    }
    
    /* Secondary button (Back) */
    #registrationPage1 .btn-white,
    #registrationPage2 .btn-white {
        background: transparent;
        color: #0C436A;
        border: 1px solid #0C436A;
        box-shadow: none;
        margin: 0;
    }
    
    #registrationPage1 .btn-white:hover,
    #registrationPage2 .btn-white:hover {
        background: #0C436A;
        color: #ffffff;
        transform: translateY(-2px);
    }
    
    /* Disabled state */
    #registrationPage1 .btn-animated:disabled,
    #registrationPage2 .btn-animated:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    /* Hide arrow on mobile for cleaner look */
    #registrationPage1 .btn-arrow-right,
    #registrationPage2 .btn-arrow-right {
        display: none;
    }
}