/*------------------------------------------------------------------
# Plugin Form Styles - creditbook-form
------------------------------------------------------------------*/

/*------------------------------------------------------------------
# 1. Local Tokens & Core Variable Integration w/ Fallbacks
------------------------------------------------------------------*/
.mcaf-form {
    --mcaf-clr-primary: var(--primary, #E9A623);
    --mcaf-clr-primary-dark: var(--primary-d-1, #b58121);
    --mcaf-clr-primary-light: var(--primary-l-1, #f1b555);
    --mcaf-clr-primary-contrast: var(--light, #ffffff);
    --mcaf-clr-secondary: var(--secondary, #466593);
    --mcaf-clr-tertiary: var(--tertiary, #7C9A92);
    --mcaf-clr-error: var(--error, #D8304C);
    --mcaf-clr-error-light: var(--error-10, #fde8ea);
    --mcaf-clr-success: var(--success, #28a745);
    --mcaf-clr-success-light: var(--success-10, #e2f4e6);
    --mcaf-clr-info: var(--secondary, #466593);
    --mcaf-clr-info-light: var(--secondary-10, #eaf0f6);
    --mcaf-clr-text: var(--text-body, #404040);
    --mcaf-clr-text-light: var(--dark-50, #6b7280);
    --mcaf-clr-label: var(--text-title, #1D375C);
    --mcaf-clr-heading: var(--text-title, #1D375C);
    --mcaf-clr-link: var(--primary, #E9A623);
    --mcaf-clr-link-hover: var(--primary-d-1, #b58121);
    --mcaf-clr-bg-input: var(--bg-surface, #ffffff);
    --mcaf-clr-bg-input-focus: var(--primary-10, #fdf8e9);
    --mcaf-clr-bg-disabled: var(--dark-10, #f3f4f6);
    --mcaf-border-clr: var(--border-primary, #d1d5db);
    --mcaf-border-clr-focus: var(--primary, #E9A623);
    --mcaf-border-clr-error: var(--error, #D8304C);
    --mcaf-border-radius: var(--radius-m, 0.5rem);
    --mcaf-border-width: 1px;
    --mcaf-border-width-focus: 2px;
    --mcaf-space-xs: var(--space-2xs, 0.5rem);
    --mcaf-space-s: var(--space-xs, 0.75rem);
    --mcaf-space-m: var(--space-s, 1rem);
    --mcaf-space-l: var(--space-m, 1.5rem);
    --mcaf-input-padding-y: var(--space-2xs, 0.5rem);
    --mcaf-input-padding-x: var(--space-x, 0.75rem);
    --mcaf-btn-padding-y: var(--space-2xs, 0.6rem);
    --mcaf-btn-padding-x: var(--space-m, 1.2rem);
    --mcaf-font-size-s: var(--text-s, 0.875rem);
    --mcaf-font-size-m: var(--text-s, 1rem);
    --mcaf-font-size-l: var(--text-m, 1.125rem);
    --mcaf-font-weight-normal: 400;
    --mcaf-font-weight-medium: 500;
    --mcaf-font-weight-semibold: 600;
    --mcaf-line-height: 1.2;
    --mcaf-shadow-xs: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
    --mcaf-focus-ring-color: var(--primary-30, rgba(233, 166, 35, 0.3));
    --mcaf-focus-ring-width: 3px;
    --mcaf-transition-duration: 0.2s;
    --mcaf-transition-timing: ease-in-out;
}

/*------------------------------------------------------------------
# 2. Dark Mode Overrides (using Core Framework class)
------------------------------------------------------------------*/
html.cf-theme-dark .mcaf-form {
    --mcaf-clr-primary: var(--primary, #3d44ff);
    --mcaf-clr-primary-dark: var(--primary-d-1, #343ad9);
    --mcaf-clr-primary-light: var(--primary-l-1, #6f74ff);
    --mcaf-clr-primary-contrast: var(--dark, #ffffff);
    --mcaf-clr-secondary: var(--secondary, #fa6161);
    --mcaf-clr-tertiary: var(--tertiary, #26a7df);
    --mcaf-clr-error: var(--error, #f87171);
    --mcaf-clr-error-light: var(--error-20, rgba(248, 113, 113, 0.2));
    --mcaf-clr-success: var(--success, #4ade80);
    --mcaf-clr-success-light: var(--success-20, rgba(74, 222, 128, 0.2));
    --mcaf-clr-info: var(--secondary, #60a5fa);
    --mcaf-clr-info-light: var(--secondary-20, rgba(96, 165, 250, 0.2));
    --mcaf-clr-text: var(--text-body, #d1d5db);
    --mcaf-clr-text-light: var(--text-body, #9ca3af);
    --mcaf-clr-label: var(--dark, #ffffff);
    --mcaf-clr-heading: var(--dark, #ffffff);
    --mcaf-clr-link: var(--primary, #3d44ff);
    --mcaf-clr-link-hover: var(--primary-l-1, #6f74ff);
    --mcaf-clr-bg-input: var(--bg-surface, #1f2937);
    --mcaf-clr-bg-input-focus: var(--primary-20, rgba(61, 68, 255, 0.2));
    --mcaf-clr-bg-disabled: var(--dark-20, #374151);
    --mcaf-border-clr: var(--border-primary, #4b5563);
    --mcaf-border-clr-focus: var(--primary, #3d44ff);
    --mcaf-border-clr-error: var(--error, #f87171);
    --mcaf-focus-ring-color: var(--primary-40, rgba(61, 68, 255, 0.4));
    --mcaf-shadow-xs: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.2));
}

/*------------------------------------------------------------------
# 3. Base Form Styles (Using Local Tokens)
------------------------------------------------------------------*/
.mcaf-form {
    color: var(--mcaf-clr-text);
    font-size: var(--mcaf-font-size-m);
    line-height: var(--mcaf-line-height);
}

.mcaf-form__step {
    display: none;
    margin-bottom: var(--mcaf-space-l);
}
.mcaf-form__step--active {
    display: block;
}

/*------------------------------------------------------------------
# 4. Field, Label, Input Styles
------------------------------------------------------------------*/
.mcaf-form__field {
    margin-bottom: var(--mcaf-space-xs);
    width: 100%;
}

.mcaf-form__label {
    display: block;
    font-size: var(--mcaf-font-size-s);
    font-weight: var(--mcaf-font-weight-medium);
    color: var(--mcaf-clr-label);
}

.mcaf-form__label--required::after {
    content: ' *';
    color: var(--mcaf-clr-error);
    font-weight: var(--mcaf-font-weight-normal);
}

.mcaf-form__input {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: var(--mcaf-input-padding-y) var(--mcaf-input-padding-x);
    font-size: var(--mcaf-font-size-s);
    font-weight: var(--mcaf-font-weight-normal);
    line-height: var(--mcaf-line-height);
    color: var(--mcaf-clr-text);
    background-color: var(--mcaf-clr-bg-input);
    background-clip: padding-box;
    border: var(--mcaf-border-width) solid var(--mcaf-border-clr);
    appearance: none;
    border-radius: var(--mcaf-border-radius);
    box-shadow: var(--mcaf-shadow-xs);
    transition: border-color var(--mcaf-transition-duration) var(--mcaf-transition-timing),
    background-color var(--mcaf-transition-duration) var(--mcaf-transition-timing),
    box-shadow var(--mcaf-transition-duration) var(--mcaf-transition-timing);
}

.mcaf-form__input:focus {
    color: var(--mcaf-clr-text);
    background-color: var(--mcaf-clr-bg-input-focus);
    border-color: var(--mcaf-border-clr-focus);
    outline: 0;
    box-shadow: 0 0 0 var(--mcaf-focus-ring-width) var(--mcaf-focus-ring-color);
}

.mcaf-form__input::placeholder {
    color: var(--mcaf-clr-text-light);
    font-size: var(--mcaf-font-size-s);
    opacity: 1;
}

.mcaf-form__input:disabled,
.mcaf-form__input[readonly] {
    background-color: var(--mcaf-clr-bg-disabled);
    opacity: 0.7;
    cursor: not-allowed;
}

.mcaf-form__input.mcaf-form__input--invalid {
    border-color: var(--mcaf-border-clr-error);
}
.mcaf-form__input.mcaf-form__input--invalid:focus {
    border-color: var(--mcaf-border-clr-error);
    box-shadow: 0 0 0 var(--mcaf-focus-ring-width) var(--mcaf-clr-error-light);
}

.mcaf-form__input--select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--mcaf-input-padding-x) center;
    background-size: 16px 12px;
    padding-right: calc(var(--mcaf-input-padding-x) * 2.5);
}
html.cf-theme-dark .mcaf-form__input--select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d1d5db' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.mcaf-form__field--checkbox,
.mcaf-form__field--radio {
    display: flex;
    align-items: center;
    gap: var(--mcaf-space-xs);
    margin-bottom: var(--mcaf-space-s);
}

.mcaf-form__input--checkbox,
.mcaf-form__input--radio {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.1em;
    vertical-align: top;
    border: var(--mcaf-border-width) solid var(--mcaf-border-clr);
    flex-shrink: 0;
}

.mcaf-form__input--checkbox {
    border-radius: calc(var(--mcaf-border-radius) * 0.5);
}

.mcaf-form__input--radio {
    border-radius: 50%;
}

.mcaf-form__input--checkbox:checked,
.mcaf-form__input--radio:checked {
    background-color: var(--mcaf-clr-primary);
    border-color: var(--mcaf-clr-primary);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.mcaf-form__input--checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.mcaf-form__input--radio:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.mcaf-form__input--checkbox:focus,
.mcaf-form__input--radio:focus {
    border-color: var(--mcaf-border-clr-focus);
    outline: 0;
    box-shadow: 0 0 0 var(--mcaf-focus-ring-width) var(--mcaf-focus-ring-color);
}

.mcaf-form__field--checkbox .mcaf-form__label,
.mcaf-form__field--radio .mcaf-form__label {
    margin-bottom: 0;
    font-size: var(--mcaf-font-size-m);
    font-weight: var(--mcaf-font-weight-normal);
    color: var(--mcaf-clr-text);
}

/*------------------------------------------------------------------
# 5. Messages (Info, Error, Success) - For Main Message Area
------------------------------------------------------------------*/
.mcaf-form__message {
    padding: var(--mcaf-space-s) var(--mcaf-space-m);
    margin-bottom: var(--mcaf-space-m);
    border: var(--mcaf-border-width) solid transparent;
    border-radius: var(--mcaf-border-radius);
    font-size: var(--mcaf-font-size-s);
}

.mcaf-form__message--info {
    color: var(--mcaf-clr-info);
    background-color: var(--mcaf-clr-info-light);
    border-color: var(--mcaf-clr-info);
}

.mcaf-form__message--error {
    color: var(--mcaf-clr-error);
    background-color: var(--mcaf-clr-error-light);
    border-color: var(--mcaf-clr-error);
}
.mcaf-form__message--error ul {
    margin-top: var(--mcaf-space-xs);
    margin-bottom: 0;
    padding-left: var(--mcaf-space-m);
}

.mcaf-form__message--success {
    color: var(--mcaf-clr-success);
    background-color: var(--mcaf-clr-success-light);
    border-color: var(--mcaf-clr-success);
}

.mcaf-form__message-area .mcaf-form__message {
    margin-top: var(--mcaf-space-m);
    margin-bottom: 0;
}

/*------------------------------------------------------------------
# 6. Buttons
------------------------------------------------------------------*/
.mcaf-form__button {
    display: inline-block;
    font-weight: var(--mcaf-font-weight-semibold);
    line-height: var(--mcaf-line-height);
    color: var(--mcaf-clr-primary-contrast);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--mcaf-clr-primary);
    border: var(--mcaf-border-width-focus) solid transparent;
    padding: var(--mcaf-btn-padding-y) var(--mcaf-btn-padding-x);
    font-size: var(--mcaf-font-size-m);
    border-radius: var(--mcaf-border-radius);
    transition: color var(--mcaf-transition-duration) var(--mcaf-transition-timing),
    background-color var(--mcaf-transition-duration) var(--mcaf-transition-timing),
    border-color var(--mcaf-transition-duration) var(--mcaf-transition-timing),
    box-shadow var(--mcaf-transition-duration) var(--mcaf-transition-timing);
}

.mcaf-form__button:hover {
    background-color: var(--mcaf-clr-primary-dark);
    border-color: var(--mcaf-clr-primary-dark);
    color: var(--mcaf-clr-primary-contrast);
}

.mcaf-form__button:focus {
    background-color: var(--mcaf-clr-primary-dark);
    border-color: var(--mcaf-clr-primary-dark);
    color: var(--mcaf-clr-primary-contrast);
    outline: 0;
    box-shadow: 0 0 0 var(--mcaf-focus-ring-width) var(--mcaf-focus-ring-color);
}

.mcaf-form__button:disabled {
    background-color: var(--mcaf-clr-primary);
    border-color: var(--mcaf-clr-primary);
    opacity: 0.65;
    cursor: not-allowed;
}

.mcaf-form__button--previous {
    background-color: transparent;
    border-color: var(--mcaf-border-clr);
    color: var(--mcaf-clr-text);
}

.mcaf-form__button--previous:hover,
.mcaf-form__button--previous:focus {
    background-color: var(--mcaf-clr-bg-disabled);
    border-color: var(--mcaf-border-clr);
    color: var(--mcaf-clr-text);
    box-shadow: none;
}

/*------------------------------------------------------------------
# 7. Layout & Structure Elements
------------------------------------------------------------------*/
.mcaf-form__step-title,
.mcaf-form__section-title {
    font-size: var(--mcaf-font-size-l);
    font-weight: var(--mcaf-font-weight-semibold);
    color: var(--mcaf-clr-heading);
    margin-bottom: var(--mcaf-space-m);
    padding-bottom: var(--mcaf-space-xs);
    border-bottom: var(--mcaf-border-width) solid var(--mcaf-border-clr);
}
.mcaf-form__section-title {
    font-size: var(--mcaf-font-size-m);
    margin-top: var(--mcaf-space-l);
    border-bottom: none;
    padding-bottom: 0;
}

.mcaf-form__section--employment-details {
    border: var(--mcaf-border-width) dashed var(--mcaf-border-clr);
    padding: var(--mcaf-space-m);
    margin-top: var(--mcaf-space-m);
    border-radius: var(--mcaf-border-radius);
}

.mcaf-form__navigation {
    display: flex;
    justify-content: space-between;
    margin-top: var(--mcaf-space-l);
    padding-top: var(--mcaf-space-m);
    border-top: var(--mcaf-border-width) solid var(--mcaf-border-clr);
}

.mcaf-form__review-area {
    /* Add specific styling for the review area container if needed */
}
.mcaf-form__review-item {
    margin-bottom: var(--mcaf-space-s);
    padding-bottom: var(--mcaf-space-s);
    border-bottom: 1px dotted var(--mcaf-border-clr);
}
.mcaf-form__review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.mcaf-form__review-label {
    font-weight: var(--mcaf-font-weight-normal);
    color: var(--mcaf-clr-label);
    margin-right: var(--mcaf-space-xs);
    display: inline-block; /* Or block if preferred */
}
.mcaf-form__review-value {
    /* Style the displayed value if needed */
    word-break: break-word; /* Prevent long values overflowing */
}
.mcaf-form__review-subheading {
    font-size: var(--mcaf-font-size-l);
    font-weight: var(--mcaf-font-weight-semibold);
    color: var(--mcaf-clr-heading);
    margin-top: var(--mcaf-space-l);
    margin-bottom: var(--mcaf-space-xs);
    padding-bottom: var(--mcaf-space-xs);
    border-bottom: 1px solid var(--mcaf-border-clr);
}

/*------------------------------------------------------------------
# 8. Field-Specific Error Messages (Added)
------------------------------------------------------------------*/
.mcaf-form__error-message {
    display: none; /* Hidden by default, shown by JS */
    width: 100%;
    margin-top: var(--mcaf-space-xs); /* Space between input and error */
    font-size: var(--mcaf-font-size-s);
    color: var(--mcaf-clr-error); /* Use the defined error color */
    line-height: 1.4;
    font-weight: var(--mcaf-font-weight-normal);
}

/* Optional: Adjust spacing if the error appears below a checkbox/radio */
.mcaf-form__field--checkbox .mcaf-form__error-message,
.mcaf-form__field--radio .mcaf-form__error-message {
    /* Align with label text for checkboxes/radios */
    margin-left: calc(1.15em + var(--mcaf-space-xs));
    margin-top: 0;
}

.mcaf-form__field--switch {
    margin-bottom: var(--mcaf-space-m);
}

.mcaf-form__field--switch .mcaf-form__label {
    margin-top: var(--mcaf-space-s);
}

.mcaf-switch {
    position: relative;
    display: inline-block;
    z-index: 1;
    margin: 0;
    font-size: 0;
}

.mcaf-switch__filter {
    width: 0;
    display: inline-block;
    background-color: var(--mcaf-clr-primary);
    position: absolute;
    left: 0;
    opacity: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    transition: all .4s cubic-bezier(0,0,.25, 1);
    border-radius: var(--mcaf-border-radius);
}

.mcaf-switch__label {
    cursor: pointer;
    text-transform: uppercase;
    border: var(--mcaf-border-width) solid var(--mcaf-border-clr);
    width: 85px;
    padding: var(--mcaf-btn-padding-y) 0;
    text-align: center;
    display: inline-block;
    transition: all .4s;
    margin-right: -1px;
    color: var(--mcaf-clr-text);
    background-color: var(--mcaf-clr-bg-input);
    font-size: var(--mcaf-font-size-s);
    line-height: var(--mcaf-line-height);
    vertical-align: top;
}

.mcaf-switch__label:first-of-type {
    border-top-left-radius: var(--mcaf-border-radius);
    border-bottom-left-radius: var(--mcaf-border-radius);
}

.mcaf-switch__label:last-of-type {
    border-top-right-radius: var(--mcaf-border-radius);
    border-bottom-right-radius: var(--mcaf-border-radius);
    margin-right: 0;
}

.mcaf-form__input--radio-switch {
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
}

.mcaf-form__input--radio-switch:checked + .mcaf-switch__label {
    border-color: var(--mcaf-clr-primary);
    z-index: 2;
    position: relative;
}

.mcaf-form__input--radio-switch[id$="-yes"]:checked ~ .mcaf-switch__filter {
    left: 0;
    opacity: 1;
    width: 85px;
}

.mcaf-form__input--radio-switch[id$="-no"]:checked ~ .mcaf-switch__filter {
    left: 84px;
    opacity: 1;
    width: 85px;
}

.mcaf-form__field--switch .mcaf-form__error-message {
    margin-left: 0;
    margin-top: var(--mcaf-space-xs);
    width: auto;
}