/**
 * Partner Registration Form - Professional Validation Styles
 * Provides modern, professional form validation with visual states
 */

/* Minimal inline styles - main styles moved to external CSS */
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
    outline: 0;
}
.checkbox label::before {
    border: 1px solid #57575a;
}
.checkmark {
    height: 20px;
    width: 20px;
}
.radio-style {
    font-size: 18px;
}
ul, li {
    color: black;
    font-size: 18px;
}
.radio-style .checkmark:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    background: #0a6ff1;
}
.login_st {
    font-size: 20px;
}
.img-bussiness img{
    opacity: 0.9;
    width: 100%;
    height: auto;
}
#preViewImg{
    cursor:pointer;
}
.slim{
    border-radius: 0.5rem;
}
ul {
    margin-left: 34px;
}
.checkmark-2 {
    top: 4px;
}
.indent-4-spaces {
    margin-left: 4rem;
}
@media only screen and (max-width: 450px) {
    .indent-4-spaces {
        margin-left: 0;
    }
} 
/* ==========================================================================
   Form Field States and Visual Indicators
   ========================================================================== */

/* Base field styling improvements */
.form-control {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

/* Field validation states */
.form-group {
    position: relative;
    margin-bottom: 25px; /* Consistent spacing to prevent layout shifts */
}

/* Valid field state - Only show for required fields after interaction */
.form-control.valid.required-field.touched {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Error field state - Only show for required fields after interaction */
.form-control.error.required-field.touched {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Default state - no validation styling */
.form-control {
    border-color: #ced4da;
    box-shadow: none;
}

/* Exclude readonly fields from validation styling */
.form-control[readonly].valid,
.form-control[readonly].error,
.form-control[readonly]:valid,
.form-control[readonly]:invalid {
    border-color: #ced4da;
    box-shadow: none;
}

/* Field status icons - Only show for required fields after interaction */
.field-status-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    z-index: 5;
    pointer-events: none;
    display: none; /* Hidden by default */
}

/* Show icons only for required fields that have been interacted with */
.form-control.required-field.touched + .field-status-icon {
    display: block;
}

/* Ensure form-control container has relative positioning */
.form-group > div {
    position: relative;
}

/* Specific positioning for Bootstrap column structure */
.col-xs-12.col-md-5,
.col-xs-12.col-md-6 {
    position: relative;
}

.field-status-icon.success {
    color: #28a745;
}

.field-status-icon.error {
    color: #dc3545;
}

/* Adjust icon position for select elements */
select.form-control + .field-status-icon {
    right: 32px; /* Position icon considering dropdown arrow */
}

/* ==========================================================================
   Error Summary Panel - DISABLED for better UX
   ========================================================================== */

/* Panel removed to prevent layout disruption */

/* ==========================================================================
   Tooltip Error Messages
   ========================================================================== */

.field-tooltip {
    position: absolute;
    background: #dc3545;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.field-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 20px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #dc3545;
}

.field-tooltip.show {
    opacity: 1;
    visibility: visible;
}

.field-tooltip.success {
    background: #28a745;
}

.field-tooltip.success::before {
    border-bottom-color: #28a745;
}

/* ==========================================================================
   Required Field Indicators
   ========================================================================== */

.required-indicator {
    color: #dc3545;
    font-weight: bold;
    margin-left: 2px;
}

.login_st.required-field::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* ==========================================================================
   Form Layout Improvements
   ========================================================================== */

.form-group label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}

.form-group .form-control {
    font-size: 16px;
    padding: 12px 40px 12px 15px; /* Extra padding for icon */
}

/* Fix padding for select elements to prevent text cutoff */
.form-group select.form-control {
    padding: 6px 12px;
}

/* ==========================================================================
   Step Navigation Enhancement
   ========================================================================== */

#navigation {
    padding: 20px 0;
    border-top: 1px solid #e9ecef;
    margin-top: 30px;
}

#navigation .btn {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    margin: 0 10px;
    transition: all 0.3s ease;
}

#navigation .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.field-error-shake {
    animation: shake 0.5s ease-in-out;
}

/* ==========================================================================
   Mobile Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .form-group {
        margin-bottom: 20px;
    }
    
    .field-tooltip {
        position: relative;
        width: 100%;
        margin-top: 5px;
        white-space: normal;
        border-radius: 4px;
    }
    
    .field-tooltip::before {
        display: none;
    }
    
    #validation-summary {
        margin: 10px;
        padding: 15px;
    }
    
    .field-status-icon {
        right: 5px;
    }
}

/* ==========================================================================
   Legacy Error Message Override
   ========================================================================== */

/* Hide default jQuery validator error labels */
label.error {
    display: none !important;
}

/* ==========================================================================
   Checkbox and Radio Button Styling
   ========================================================================== */

.checkbox input[type="checkbox"].error + label::before {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.checkbox input[type="checkbox"].valid + label::before {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* ==========================================================================
   Signature Pad Enhancement
   ========================================================================== */

.signature-pad.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.signature-pad.valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* ==========================================================================
   Progress Indicators
   ========================================================================== */

.validation-progress {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #007bff;
}

.validation-progress .progress-icon {
    font-size: 20px;
    margin-right: 10px;
    color: #007bff;
}

.validation-progress .progress-text {
    flex: 1;
    font-weight: 500;
    color: #495057;
}

.validation-progress .progress-count {
    background: #007bff;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.signature-pad {
    border: 1px solid #000;
    border-radius: 5px;
}

/* The captcha message sits under the widget, at the 16 px of the form's boxes and buttons. The
   widget has no field tooltip, so this error label stays visible while the rule above hides every
   other one. */
#recaptcha-required-message label.error {
    display: block !important;
    font-size: 16px;
    margin-top: 0;
}