/* Mandyju RRHH Form Styles - Following Brand Design System */

/* Form Container - Following 4-point spacing system and brand colors */
.mandyju-rrhh-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px; /* 4-point system: 6 units */
    background: #F6F5ED; /* Brand background-base */
    border-radius: 0; /* Design rule: no rounded corners */
    box-shadow: none; /* Remove shadow for cleaner brand aesthetic */
    border: 1px solid #DFDDD3; /* Brand border-subtle */
}

/* Progress Indicator - Multi-step form progress */
.mandyju-rrhh-progress {
    margin-bottom: 32px; /* 4-point system: 8 units */
}

.mandyju-rrhh-progress-bar {
    width: 100%;
    height: 4px; /* 4-point system: 1 unit */
    background: #DFDDD3; /* Brand border-subtle */
    margin-bottom: 16px; /* 4-point system: 4 units */
    border-radius: 0; /* Design rule: no rounded corners */
    overflow: hidden;
}

.mandyju-rrhh-progress-fill {
    height: 100%;
    background: #C19A5B; /* Brand primary */
    transition: width 0.5s ease;
    width: 25%; /* Will be updated by JavaScript */
}

.mandyju-rrhh-progress-steps {
    display: flex;
    justify-content: space-between;
    gap: 8px; /* 4-point system: 2 units */
}

.mandyju-rrhh-step {
    flex: 1;
    text-align: center;
    padding: 8px 12px; /* 4-point system: 2 units + 3 units */
    font-size: clamp(12px, 0.75rem + 0.15vw, 14px); /* fs-200 - small text */
    font-weight: 600;
    color: #A5A6AA; /* Brand text-muted */
    background: #ffffff;
    border: 1px solid #DFDDD3; /* Brand border-subtle */
    border-radius: 0; /* Design rule: no rounded corners */
    transition: all 0.3s ease;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; /* Brand body font */
}

.mandyju-rrhh-step.active {
    color: #ffffff;
    background: #C19A5B; /* Brand primary */
    border-color: #C19A5B;
}

.mandyju-rrhh-step.completed {
    color: #18191A; /* Brand text-base */
    background: #DBCBBB; /* Brand highlight-soft */
    border-color: #DBCBBB;
}

/* Multi-step Container */
.mandyju-rrhh-steps-container {
    position: relative;
    min-height: 400px; /* Maintain consistent height */
}

.mandyju-rrhh-step-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mandyju-rrhh-step-content.active {
    display: block;
    opacity: 1;
}

/* Navigation Buttons */
.mandyju-rrhh-form-navigation {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 4-point system: 4 units */
    margin-top: 32px; /* 4-point system: 8 units */
    padding-top: 24px; /* 4-point system: 6 units */
    border-top: 1px solid #DFDDD3; /* Brand border-subtle */
}

.mandyju-rrhh-form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px; /* 4-point system: 4 units */
}

.mandyju-rrhh-nav-btn {
    background: #ffffff;
    color: #763235; /* Brand primary-alt */
    padding: 12px 24px; /* 4-point system: 3 units + 6 units */
    border: 2px solid #763235; /* Brand primary-alt */
    border-radius: 0; /* Design rule: no rounded corners */
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.619), 18px); /* fs-300 body scale */
    font-weight: 600;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; /* Brand body font */
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px; /* Accessibility: minimum tap target */
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 4-point system: 2 units */
}

.mandyju-rrhh-nav-btn:hover {
    background: #763235; /* Brand primary-alt */
    color: #ffffff;
}

.mandyju-rrhh-nav-btn:focus {
    outline: 3px solid #C19A5B; /* Brand primary for focus */
    outline-offset: 2px;
}

.mandyju-rrhh-nav-btn:disabled {
    background: #F6F5ED; /* Brand background-base */
    color: #A5A6AA; /* Brand text-muted */
    border-color: #DFDDD3; /* Brand border-subtle */
    cursor: not-allowed;
}

.mandyju-rrhh-next-btn {
    margin-left: auto;
}

.submit-help {
    text-align: center;
    color: #A5A6AA; /* Brand text-muted */
}

/* Form Title - Using brand typography scale */
.mandyju-rrhh-form-title {
    text-align: center;
    margin-bottom: 32px; /* 4-point system: 8 units */
    color: #18191A; /* Brand text-base */
    font-size: clamp(28px, 1.55rem + 1.00vw, 38px); /* fs-700 - H3 scale */
    font-weight: 600;
    line-height: 1.15;
    font-family: "Prata", "Cormorant Garamond", Georgia, serif; /* Brand heading font */
}

/* Form Sections - Brand colors and spacing */
.mandyju-rrhh-form-section {
    margin-bottom: 32px; /* 4-point system: 8 units */
    padding: 24px; /* 4-point system: 6 units */
    background: #ffffff; /* Clean white for form sections */
    border-radius: 0; /* Design rule: no rounded corners */
    border-left: 4px solid #C19A5B; /* Brand primary color */
    border-top: 1px solid #DFDDD3; /* Brand border-subtle */
    border-right: 1px solid #DFDDD3;
    border-bottom: 1px solid #DFDDD3;
}

/* Section Headings - Brand typography */
.mandyju-rrhh-form-section h3 {
    margin-top: 0;
    margin-bottom: 24px; /* 4-point system: 6 units */
    color: #763235; /* Brand primary-alt for emphasis */
    font-size: clamp(20px, 1.25rem + 0.75vw, 26px); /* fs-500 - H5 scale */
    font-weight: 600;
    line-height: 1.25;
    font-family: "Prata", "Cormorant Garamond", Georgia, serif; /* Brand heading font */
}

/* Form Rows - 4-point spacing */
.mandyju-rrhh-form-row {
    display: flex;
    gap: 20px; /* 4-point system: 5 units */
    margin-bottom: 20px; /* 4-point system: 5 units */
    flex-wrap: wrap;
}

/* Form Fields */
.mandyju-rrhh-form-field {
    flex: 1;
    min-width: 250px;
}

.mandyju-rrhh-form-field.full-width {
    flex: 1 1 100%;
}

/* Form Field Labels - Brand typography and accessibility */
.mandyju-rrhh-form-field label {
    display: block;
    margin-bottom: 8px; /* 4-point system: 2 units */
    font-weight: 600;
    color: #18191A; /* Brand text-base */
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.619), 18px); /* fs-300 body scale */
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; /* Brand body font */
    line-height: 1.6;
}

.mandyju-rrhh-form-field .required {
    color: #cf2e2e; /* Brand state-danger */
}

/* Form Inputs - Brand styling with accessibility focus */
.mandyju-rrhh-form-field input[type="text"],
.mandyju-rrhh-form-field input[type="email"],
.mandyju-rrhh-form-field input[type="tel"],
.mandyju-rrhh-form-field input[type="date"],
.mandyju-rrhh-form-field select,
.mandyju-rrhh-form-field textarea {
    width: 100%;
    padding: 12px 16px; /* 4-point system: 3 units + 4 units */
    border: 2px solid #DFDDD3; /* Brand border-subtle */
    border-radius: 0; /* Design rule: no rounded corners */
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.619), 18px); /* fs-300 body scale */
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; /* Brand body font */
    line-height: 1.6;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    background: #ffffff;
    color: #18191A; /* Brand text-base */
    min-height: 44px; /* Accessibility: minimum tap target */
}

/* Focus States - Enhanced accessibility with brand colors */
.mandyju-rrhh-form-field input[type="text"]:focus,
.mandyju-rrhh-form-field input[type="email"]:focus,
.mandyju-rrhh-form-field input[type="tel"]:focus,
.mandyju-rrhh-form-field input[type="date"]:focus,
.mandyju-rrhh-form-field select:focus,
.mandyju-rrhh-form-field textarea:focus {
    outline: none;
    border-color: #C19A5B; /* Brand primary */
    box-shadow: 0 0 0 3px rgba(193, 154, 91, 0.2); /* Brand primary with transparency */
}

/* File Input - Special styling for upload field */
.mandyju-rrhh-form-field input[type="file"] {
    width: 100%;
    padding: 12px; /* 4-point system: 3 units */
    border: 2px solid #DFDDD3; /* Brand border-subtle */
    border-radius: 0; /* Design rule: no rounded corners */
    background: #F6F5ED; /* Brand background-base */
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
    color: #18191A; /* Brand text-base */
    min-height: 44px; /* Accessibility: minimum tap target */
    transition: border-color 0.3s ease;
}

.mandyju-rrhh-form-field input[type="file"]:hover,
.mandyju-rrhh-form-field input[type="file"]:focus {
    border-color: #C19A5B; /* Brand primary */
    outline: 3px solid rgba(193, 154, 91, 0.2); /* Accessibility focus */
}

/* Field Description - Brand muted text */
.mandyju-rrhh-form-field .field-description {
    margin-top: 8px; /* 4-point system: 2 units */
    font-size: clamp(13px, 0.80rem + 0.35vw, 16px); /* fs-200 small scale */
    color: #A5A6AA; /* Brand text-muted */
    font-style: normal; /* Remove italic for better readability */
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
    line-height: 1.6;
}

/* Form Submit Section - Brand spacing */
.mandyju-rrhh-form-submit {
    text-align: center;
    margin-top: 40px; /* 4-point system: 10 units */
    padding-top: 32px; /* 4-point system: 8 units */
    border-top: 1px solid #DFDDD3; /* Brand border-subtle */
}

/* Primary CTA Button - Brand colors and accessibility */
.mandyju-rrhh-submit-btn {
    background: #C19A5B; /* Brand primary */
    color: #ffffff; /* High contrast */
    padding: 16px 32px; /* 4-point system: 4 units + 8 units */
    border: none;
    border-radius: 0; /* Design rule: no rounded corners */
    font-size: clamp(16px, 1rem + 0.30vw, 18px); /* fs-300 body scale */
    font-weight: 600;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; /* Brand body font */
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none; /* Remove uppercase for better readability */
    letter-spacing: 0;
    min-height: 44px; /* Accessibility: minimum tap target */
    min-width: 120px;
    line-height: 1.2;
}

/* Button Hover/Focus States - Brand colors */
.mandyju-rrhh-submit-btn:hover {
    background: #B48B48; /* Brand primary-hover */
    transform: none; /* Remove transform for more subtle interaction */
    box-shadow: 0 2px 8px rgba(193, 154, 91, 0.3); /* Subtle brand-colored shadow */
}

.mandyju-rrhh-submit-btn:focus {
    outline: 3px solid rgba(193, 154, 91, 0.5); /* Accessibility focus with brand color */
    outline-offset: 2px;
}

.mandyju-rrhh-submit-btn:active {
    background: #B48B48; /* Brand primary-hover */
    transform: translateY(1px); /* Subtle press effect */
}

/* Disabled Button State */
.mandyju-rrhh-submit-btn:disabled {
    background: #A5A6AA; /* Brand text-muted */
    color: #ffffff;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

/* Messages Container - Brand styling */
#mandyju-rrhh-messages {
    margin-top: 24px; /* 4-point system: 6 units */
    padding: 16px 20px; /* 4-point system: 4 units + 5 units */
    border-radius: 0; /* Design rule: no rounded corners */
    text-align: center;
    font-weight: 400; /* Reduce weight for better readability */
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.619), 18px); /* fs-300 body scale */
    line-height: 1.6;
    display: none;
    border: 1px solid transparent;
}

/* Success Message - Brand success color */
#mandyju-rrhh-messages.success {
    background: rgba(0, 208, 132, 0.1); /* Brand state-success with transparency */
    color: #18191A; /* Brand text-base for readability */
    border-color: #00d084; /* Brand state-success */
    display: block;
}

/* Error Message - Brand danger color */
#mandyju-rrhh-messages.error {
    background: rgba(207, 46, 46, 0.1); /* Brand state-danger with transparency */
    color: #18191A; /* Brand text-base for readability */
    border-color: #cf2e2e; /* Brand state-danger */
    display: block;
}

/* Loading State - Brand styling */
.mandyju-rrhh-loading {
    position: relative;
    opacity: 0.6;
}

.mandyju-rrhh-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(246, 245, 237, 0.9); /* Brand background-base with transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0; /* Design rule: no rounded corners */
}

.mandyju-rrhh-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px; /* 4-point system: 8 units */
    height: 32px; /* 4-point system: 8 units */
    border: 3px solid #DFDDD3; /* Brand border-subtle */
    border-top: 3px solid #C19A5B; /* Brand primary */
    border-radius: 50%; /* Exception: loading spinner needs to be circular */
    animation: spin 1s linear infinite;
    z-index: 1000;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive Design - Mobile-first approach */
@media (max-width: 768px) {
    .mandyju-rrhh-form-container {
        margin: 16px; /* 4-point system: 4 units */
        padding: 16px; /* 4-point system: 4 units */
    }
    
    .mandyju-rrhh-form-row {
        flex-direction: column;
        gap: 16px; /* 4-point system: 4 units */
    }
    
    .mandyju-rrhh-form-field {
        min-width: auto;
    }
    
    .mandyju-rrhh-form-title {
        font-size: clamp(24px, 1.375rem + 0.90vw, 28px); /* Smaller on mobile */
        margin-bottom: 24px; /* 4-point system: 6 units */
    }
    
    .mandyju-rrhh-form-section {
        margin-bottom: 24px; /* 4-point system: 6 units */
        padding: 16px; /* 4-point system: 4 units */
    }
    
    .mandyju-rrhh-form-section h3 {
        margin-bottom: 16px; /* 4-point system: 4 units */
    }
    
    .mandyju-rrhh-submit-btn {
        padding: 14px 24px; /* 4-point system: 3.5 units + 6 units */
        font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.619), 16px);
        width: 100%; /* Full width on mobile for better accessibility */
        min-height: 48px; /* Larger tap target on mobile */
    }
    
    .mandyju-rrhh-form-submit {
        margin-top: 32px; /* 4-point system: 8 units */
        padding-top: 24px; /* 4-point system: 6 units */
    }
}

/* Tablet Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .mandyju-rrhh-form-container {
        max-width: 700px;
        padding: 20px; /* 4-point system: 5 units */
    }
    
    .mandyju-rrhh-form-field {
        min-width: 200px;
    }
}

/* Large Screen Optimization */
@media (min-width: 1200px) {
    .mandyju-rrhh-form-container {
        max-width: 900px;
    }
}

/* Field Error Messages - Brand styling */
.field-error {
    margin-top: 8px; /* 4-point system: 2 units */
    font-size: clamp(13px, 0.80rem + 0.35vw, 16px); /* fs-200 small scale */
    color: #cf2e2e; /* Brand state-danger */
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
    line-height: 1.6;
    display: none;
}

.field-error.show {
    display: block;
}

/* Form Field Focus Enhancement */
.mandyju-rrhh-form-field:focus-within label {
    color: #C19A5B; /* Brand primary */
}

/* Input Validation States - Brand colors */
.mandyju-rrhh-form-field input.invalid,
.mandyju-rrhh-form-field select.invalid,
.mandyju-rrhh-form-field textarea.invalid {
    border-color: #cf2e2e; /* Brand state-danger */
    box-shadow: 0 0 0 3px rgba(207, 46, 46, 0.2);
}

.mandyju-rrhh-form-field input.valid,
.mandyju-rrhh-form-field select.valid,
.mandyju-rrhh-form-field textarea.valid {
    border-color: #00d084; /* Brand state-success */
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .mandyju-rrhh-form-container {
        border: 2px solid #18191A;
    }
    
    .mandyju-rrhh-submit-btn {
        border: 2px solid #18191A;
    }
    
    .mandyju-rrhh-form-field input[type="text"],
    .mandyju-rrhh-form-field input[type="email"],
    .mandyju-rrhh-form-field input[type="tel"],
    .mandyju-rrhh-form-field input[type="date"],
    .mandyju-rrhh-form-field select,
    .mandyju-rrhh-form-field textarea {
        border: 2px solid #18191A;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .mandyju-rrhh-submit-btn,
    .mandyju-rrhh-form-field input[type="text"],
    .mandyju-rrhh-form-field input[type="email"],
    .mandyju-rrhh-form-field input[type="tel"],
    .mandyju-rrhh-form-field input[type="date"],
    .mandyju-rrhh-form-field select,
    .mandyju-rrhh-form-field textarea,
    .mandyju-rrhh-form-field input[type="file"] {
        transition: none;
    }
    
    .mandyju-rrhh-loading::before {
        animation: none;
        border: 3px solid #C19A5B;
    }
}