/**
 * Multi-Step Form Styles
 * Extends the global form styles for multi-step functionality
 */

/* RTL and Arabic Font Support */
.multi-step-form-container {
    direction: rtl;
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.multi-step-form-container * {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Multi-step form container */
.multi-step-form {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    direction: rtl;
}



/* Form steps */



.form-step {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.form-step.active {
    display: block;
}

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

/* Step header - hidden as we use dynamic header */
.form-step-header {
    display: none;
}

/* Simple Progress Indicator - Points */
.form-progress-simple {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    margin-bottom: var(--spacing-xl, 2rem);
    padding: 0;
}

.form-progress-point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--input));
    transition: all 0.3s ease;
}

.form-progress-point.active {
    background: rgb(var(--primary));
}

.form-progress-point.completed {
    background: rgb(var(--primary));
}

/* Dynamic Step Header */
.form-step-header-dynamic {
    margin-bottom: var(--spacing-md, 1rem);
    text-align: right !important;
    width: 100%;
}

.form-step-title-dynamic {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    color: rgb(var(--foreground));
    margin: 0 0 var(--spacing-sm, 0.75rem) 0;
    transition: all 0.3s ease;
    text-align: right !important;
    display: block;
    width: 100%;
}

.form-step-description-dynamic {
    font-size: var(--font-size-sm, 0.875rem);
    color: rgb(var(--muted-foreground));
    margin: 0;
    transition: all 0.3s ease;
    text-align: right !important;
    display: block;
    width: 100%;
}

/* Navigation buttons */

/* Navigation wrapper - contains progress and buttons */
.form-step-navigation-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xl, 2rem);
    gap: var(--spacing-md, 1rem);
}

.form-step-navigation {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm, 0.75rem);
    flex-direction: row-reverse; /* RTL: Previous button on right, Next on left */
}

/* Progress bullets at bottom - left side */
.form-step-navigation-wrapper .form-progress-simple {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    margin: 0;
    padding: 0;
}

.form-step-navigation {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm, 0.75rem);
    flex-direction: row-reverse; /* RTL: Previous button on right, Next on left */
}

.form-step-prev {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
    border-radius: var(--radius, 0.5rem);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: transparent;
    color: rgb(var(--foreground));
    border-color: rgb(var(--border));
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.form-step-prev:hover {
    background: rgb(var(--muted) / 0.5);
}

.form-step-next,
.form-submit-button {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
    border-radius: var(--radius, 0.5rem);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: rgb(var(--primary));
    color: rgb(var(--primary-foreground));
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.form-step-next:hover,
.form-submit-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Radio field container */
.radio-field-container {
    margin-bottom: var(--spacing-sm, 0.75rem);
}

.radio-field-container.full-width {
    grid-column: 1 / -1;
}

.radio-field-label {
    display: block;
    margin-bottom: var(--spacing-sm, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, 0.875rem);
    color: rgb(var(--foreground));
}

.required-asterisk {
    color: rgb(var(--destructive));
}

/* Radio button groups */
.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.form-radio-group-horizontal {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md, 1rem);
    flex-wrap: wrap;
}

.radio-field-container.full-width .form-radio-group-horizontal {
    width: 100%;
}

.radio-field-container.full-width .form-radio-group-horizontal .form-radio-option {
    flex: 1;
    min-width: 0;
}

.form-radio-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-radio-option.error {
    border: 1px solid rgb(var(--destructive));
    background: rgb(var(--destructive) / 0.05);
}

/* Custom radio button styling */
.radio-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgb(var(--muted-foreground) / 0.6);
    border-radius: 50%;
    background: rgb(var(--background));
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.radio-input:hover {
    border-color: rgb(var(--primary));
    background: rgb(var(--primary) / 0.05);
}

.radio-input:checked {
    border-color: rgb(var(--primary));
    background: rgb(var(--primary));
}

.radio-input:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--primary-foreground));
}

.radio-input:focus {
    outline: 2px solid rgb(var(--ring));
    outline-offset: 2px;
}

/* Radio label */
.radio-label {
    font-size: var(--font-size-base, 1rem);
    color: rgb(var(--foreground));
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    flex: 1;
}

.form-radio-option:hover .radio-label {
    color: rgb(var(--primary));
}

.radio-input:checked ~ .radio-label {
    color: rgb(var(--primary));
    font-weight: var(--font-weight-semibold, 600);
}

/* Checkbox groups */
.form-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.form-checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-sm, 0.75rem);
    border-radius: var(--radius, 0.5rem);
    border: 1px solid rgb(var(--border));
    background: rgb(var(--background));
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-checkbox-option:hover {
    background: rgb(var(--muted) / 0.3);
    border-color: rgb(var(--ring));
}

.form-checkbox-option input[type="checkbox"]:checked ~ label {
    color: rgb(var(--primary));
    font-weight: var(--font-weight-semibold, 600);
}

.form-checkbox-option input[type="checkbox"]:checked ~ .form-checkbox-option-content {
    border-color: rgb(var(--primary));
    background: rgb(var(--primary) / 0.05);
}

/* Conditional field wrapper */
.conditional-field-wrapper {
    width: 100%;
    margin-bottom: var(--spacing-sm, 0.75rem);
}

.conditional-field-wrapper.full-width {
    grid-column: 1 / -1;
}

/* Ensure forgetmenot checkbox styling matches /join page exactly */
.multi-step-form .forgetmenot,
.multi-step-form-container .forgetmenot {
    margin: var(--spacing-md, 1rem) 0;
    font-size: var(--font-size-sm, 0.875rem);
    display: flex;
    align-items: center;
}

.multi-step-form .forgetmenot label,
.multi-step-form-container .forgetmenot label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    cursor: pointer;
    color: rgb(var(--foreground));
    position: static;
    transform: none;
    background: none;
    backdrop-filter: none;
    padding: 0;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-normal, 400);
    margin: 0;
}

.multi-step-form .forgetmenot label input[type="checkbox"],
.multi-step-form-container .forgetmenot label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-right: var(--spacing-sm, 0.75rem);
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgb(var(--background));
    border: 1px solid rgb(var(--muted-foreground) / 0.6);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.multi-step-form .forgetmenot label input[type="checkbox"]:checked,
.multi-step-form-container .forgetmenot label input[type="checkbox"]:checked {
    background: rgb(var(--primary));
    border-color: rgb(var(--primary));
}

.multi-step-form .forgetmenot label input[type="checkbox"]:checked::after,
.multi-step-form-container .forgetmenot label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid rgb(var(--primary-foreground));
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.multi-step-form .forgetmenot label input[type="checkbox"]:focus,
.multi-step-form-container .forgetmenot label input[type="checkbox"]:focus {
    outline: none;
    border-color: rgb(var(--ring));
    box-shadow: 0 0 0 2px rgb(var(--ring) / 0.2);
}

/* Responsive */
@media (max-width: 640px) {
    .form-progress {
        padding: 0;
    }
    
    .form-progress-step-label {
        display: none;
    }
    
    
/* Navigation wrapper - contains progress and buttons */
.form-step-navigation-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xl, 2rem);
    gap: var(--spacing-md, 1rem);
}

.form-step-navigation {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm, 0.75rem);
    flex-direction: row-reverse; /* RTL: Previous button on right, Next on left */
}

/* Progress bullets at bottom - left side */
.form-step-navigation-wrapper .form-progress-simple {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    margin: 0;
    padding: 0;
}

.form-step-navigation {
        flex-direction: column;
    }
    
    .form-step-prev,
    .form-step-next {
        width: 100%;
    }
}