/**
 * Gravity Forms Form ID 3 - Registration Form Styles
 * Modern, sleek design matching Form ID 7
 */

/* ===================================
   FORM WRAPPER & CONTAINER
   =================================== */

#gform_wrapper_3,
#gform_3 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    max-width: 700px !important;
    margin: 0 auto !important;
}

#gform_wrapper_3 .gform_body {
    padding: 0 !important;
}

#gform_wrapper_3 .gform_page {
    padding: 0 !important;
}

/* ===================================
   TITLES & HEADINGS
   =================================== */

#gform_wrapper_3 .gform_title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 1.5rem 0 !important;
    letter-spacing: -0.5px !important;
    text-align: left !important;
}

#gform_wrapper_3 .gform_description {
    font-size: 15px !important;
    color: #6B7280 !important;
    margin: 0 0 1.5rem 0 !important;
    line-height: 1.6 !important;
}

/* ===================================
   FIELD GROUPS & LAYOUT
   =================================== */

#gform_wrapper_3 .gform_fields {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
}

#gform_wrapper_3 .gfield {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#gform_wrapper_3 .ginput_container {
    margin: 0 !important;
}

/* Full width fields */
#gform_wrapper_3 .gfield.gfield--width-full {
    flex: 1 1 100% !important;
}

/* Half width fields */
#gform_wrapper_3 .gfield.gfield--width-half {
    flex: 1 1 calc(50% - 0.5rem) !important;
}

/* ===================================
   LABELS - Clean & Modern
   =================================== */

#gform_wrapper_3 .gfield_label,
#gform_wrapper_3 legend.gfield_label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    display: block !important;
    letter-spacing: 0.01em !important;
    line-height: 1.4 !important;
    padding: 0 !important;
}

#gform_wrapper_3 .gfield_required {
    color: #DC2626 !important;
    margin-left: 2px !important;
}

#gform_wrapper_3 .gfield_required_text {
    font-size: 12px !important;
    color: #DC2626 !important;
}

#gform_wrapper_3 .gfield_description {
    font-size: 12px !important;
    color: #6B7280 !important;
    margin-top: 0.4rem !important;
    line-height: 1.5 !important;
}

/* Sub-labels for complex fields (name, password) */
#gform_wrapper_3 .gform-field-label--type-sub {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    margin-top: 0.4rem !important;
}

/* ===================================
   INPUT FIELDS - Sleek & Modern
   =================================== */

#gform_wrapper_3 input[type="text"],
#gform_wrapper_3 input[type="email"],
#gform_wrapper_3 input[type="tel"],
#gform_wrapper_3 input[type="url"],
#gform_wrapper_3 input[type="number"],
#gform_wrapper_3 input[type="password"],
#gform_wrapper_3 textarea,
#gform_wrapper_3 select {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #111827 !important;
    background-color: #F9FAFB !important;
    border: 1.5px solid #D1D5DB !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

/* Focus state */
#gform_wrapper_3 input[type="text"]:focus,
#gform_wrapper_3 input[type="email"]:focus,
#gform_wrapper_3 input[type="tel"]:focus,
#gform_wrapper_3 input[type="url"]:focus,
#gform_wrapper_3 input[type="number"]:focus,
#gform_wrapper_3 input[type="password"]:focus,
#gform_wrapper_3 textarea:focus,
#gform_wrapper_3 select:focus {
    outline: none !important;
    border-color: #0073aa !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px) !important;
}

/* Placeholder styling */
#gform_wrapper_3 input::placeholder,
#gform_wrapper_3 textarea::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

/* ===================================
   NAME FIELDS - Compact Layout
   =================================== */

#gform_wrapper_3 .ginput_container--name {
    display: flex !important;
    gap: 0.75rem !important;
}

#gform_wrapper_3 .ginput_container--name span {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#gform_wrapper_3 .ginput_container--name input {
    order: 1 !important;
}

#gform_wrapper_3 .ginput_container--name label {
    order: 2 !important;
}

/* ===================================
   PASSWORD FIELDS - Side by Side
   =================================== */

#gform_wrapper_3 .ginput_container_password {
    display: flex !important;
    gap: 0.75rem !important;
}

#gform_wrapper_3 .ginput_container_password span {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#gform_wrapper_3 .password_input_container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

#gform_wrapper_3 .password_input_container input {
    padding-right: 45px !important;
}

#gform_wrapper_3 .gform_show_password {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    cursor: pointer !important;
    color: #6B7280 !important;
    transition: color 0.2s ease !important;
}

#gform_wrapper_3 .gform_show_password:hover {
    color: #374151 !important;
}

#gform_wrapper_3 .password_input_container input {
    order: 1 !important;
}

#gform_wrapper_3 .password_input_container + label {
    order: 2 !important;
    margin-top: 0.4rem !important;
}

/* ===================================
   RADIO BUTTONS - Modern Design
   =================================== */

#gform_wrapper_3 .gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 0.625rem !important;
}

#gform_wrapper_3 .gchoice {
    display: flex !important;
    align-items: center !important;
    padding: 0.875rem 1rem !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: #FAFAFA !important;
    margin: 0 !important;
    min-height: 48px !important;
}

#gform_wrapper_3 .gchoice:hover {
    border-color: #D1D5DB !important;
    background: #F9FAFB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

#gform_wrapper_3 .gchoice input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 0.75rem 0 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    accent-color: #0073aa !important;
}

#gform_wrapper_3 .gchoice label {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    flex: 1 !important;
}

/* Selected state */
#gform_wrapper_3 .gchoice:has(input:checked) {
    border-color: #0073aa !important;
    background: #EFF6FF !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1) !important;
}

#gform_wrapper_3 .gchoice input[type="radio"]:checked + label {
    color: #0073aa !important;
    font-weight: 600 !important;
}

/* ===================================
   DATE PICKER
   =================================== */

#gform_wrapper_3 .ginput_container_date {
    position: relative !important;
}

#gform_wrapper_3 .datepicker {
    padding-right: 45px !important;
}

#gform_wrapper_3 .ui-datepicker-trigger {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

#gform_wrapper_3 .ui-datepicker-trigger:hover {
    opacity: 1 !important;
}

/* ===================================
   CAPTCHA
   =================================== */

#gform_wrapper_3 .ginput_recaptcha {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 1rem 0 !important;
}

/* ===================================
   SUBMIT BUTTON - Modern & Prominent
   =================================== */

#gform_wrapper_3 .gform_footer {
    margin: 2rem 0 0 0 !important;
    padding: 0 !important;
}

#gform_wrapper_3 .gform_button,
#gform_wrapper_3 input[type="submit"] {
    width: 100% !important;
    padding: 1rem 2rem !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #0073aa 0%, #005a87 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.2) !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
}

#gform_wrapper_3 .gform_button:hover,
#gform_wrapper_3 input[type="submit"]:hover {
    background: linear-gradient(135deg, #005a87 0%, #0073aa 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 115, 170, 0.3) !important;
    transform: translateY(-2px) !important;
}

#gform_wrapper_3 .gform_button:active,
#gform_wrapper_3 input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 115, 170, 0.2) !important;
}

/* ===================================
   VALIDATION & ERRORS
   =================================== */

#gform_wrapper_3 .gfield_error {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#gform_wrapper_3 .gfield_error .gfield_label {
    color: #DC2626 !important;
}

#gform_wrapper_3 .gfield_error input,
#gform_wrapper_3 .gfield_error textarea,
#gform_wrapper_3 .gfield_error select {
    border-color: #DC2626 !important;
    background-color: #FEF2F2 !important;
}

#gform_wrapper_3 .gfield_error input:focus,
#gform_wrapper_3 .gfield_error textarea:focus,
#gform_wrapper_3 .gfield_error select:focus {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

#gform_wrapper_3 .validation_message {
    font-size: 13px !important;
    color: #DC2626 !important;
    margin-top: 0.5rem !important;
    padding: 0.625rem 0.875rem !important;
    background: #FEF2F2 !important;
    border-left: 3px solid #DC2626 !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

#gform_wrapper_3 .gform_validation_errors {
    background: #FEF2F2 !important;
    border: 1.5px solid #FCA5A5 !important;
    border-radius: 8px !important;
    padding: 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

#gform_wrapper_3 .gform_submission_error {
    color: #DC2626 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 0 0.75rem 0 !important;
}

/* ===================================
   CONFIRMATION MESSAGE
   =================================== */

#gform_wrapper_3 .gform_confirmation_wrapper {
    padding: 2rem !important;
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
    border: 1.5px solid #86EFAC !important;
    border-radius: 12px !important;
    text-align: center !important;
}

#gform_wrapper_3 .gform_confirmation_message {
    font-size: 16px !important;
    color: #166534 !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

/* ===================================
   LOADING SPINNER
   =================================== */

#gform_wrapper_3 .gform_ajax_spinner {
    width: 24px !important;
    height: 24px !important;
    border: 3px solid #E5E7EB !important;
    border-top-color: #0073aa !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    margin: 1rem auto !important;
    display: block !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===================================
   MOBILE RESPONSIVE
   =================================== */

@media (max-width: 768px) {
    #gform_wrapper_3 {
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    #gform_wrapper_3 .gform_title {
        font-size: 26px !important;
    }
    
    /* Stack all half-width fields */
    #gform_wrapper_3 .gfield.gfield--width-half {
        flex: 1 1 100% !important;
    }
    
    /* Stack name fields */
    #gform_wrapper_3 .ginput_container--name {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    /* Stack password fields */
    #gform_wrapper_3 .ginput_container_password {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    /* Radio buttons more compact */
    #gform_wrapper_3 .gchoice {
        padding: 0.75rem !important;
    }
    
    #gform_wrapper_3 .gchoice label {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    #gform_wrapper_3 .gform_title {
        font-size: 24px !important;
    }
    
    #gform_wrapper_3 input[type="text"],
    #gform_wrapper_3 input[type="email"],
    #gform_wrapper_3 input[type="tel"],
    #gform_wrapper_3 input[type="password"],
    #gform_wrapper_3 textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    #gform_wrapper_3 .gform_button,
    #gform_wrapper_3 input[type="submit"] {
        padding: 0.875rem 1.5rem !important;
        font-size: 15px !important;
    }
}

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

#gform_wrapper_3 *:focus-visible {
    outline: 2px solid #0073aa !important;
    outline-offset: 2px !important;
}

/* Screen reader only text */
#gform_wrapper_3 .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ===================================
   POLISH & FINISHING TOUCHES
   =================================== */

/* Add subtle separation between field groups */
#gform_wrapper_3 .gfield.gfield--width-full + .gfield.gfield--width-full {
    margin-top: 0.25rem !important;
}

/* Ensure proper spacing around fieldsets */
#gform_wrapper_3 fieldset {
    border: none !important;
    padding: 0 !important;
}

/* Remove default browser styling */
#gform_wrapper_3 .gf_clear {
    display: none !important;
}

/* Hidden fields cleanup */
#gform_wrapper_3 .gform_hidden {
    display: none !important;
}