/**
 * Fixquo Post a Job Wizard
 *
 * Load after base.css. This component intentionally consumes the global Fixquo
 * tokens rather than redefining the brand palette.
 *
 * @package FixquoTheme
 */

/* --------------------------------------------------------------------------
   Page shell and progress
   -------------------------------------------------------------------------- */

.post-job-page {
    background: var(--fx-cream, #f8f5ed);
    padding: clamp(2.5rem, 5vw, 5rem) 0;
}

#fixquo-job-wizard {
    max-width: 58rem;
    margin: 0 auto;
}


.fx-job-selector.is-error {
    border: 2px solid #ef4444;
    border-radius: 16px;
    padding: 1rem;
    background: #fef2f2;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
    transition: all .2s ease;
}


.job-progress {
    display: flex;
    align-items: flex-start;
    max-width: 58rem;
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

.job-progress__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    color: var(--fx-muted, #687078);
    transition: color .3s ease;
}

.job-progress__number {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 2px solid var(--fx-line, #d9d8d2);
    border-radius: 50%;
    background: var(--fx-white, #fff);
    color: inherit;
    font-weight: 800;
    line-height: 1;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease,
        transform .3s ease;
}

.job-progress__content {
    min-width: 0;
}

.job-progress__content small,
.job-progress__content strong {
    display: block;
}

.job-progress__content small {
    margin-bottom: .15rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.job-progress__content strong {
    overflow: hidden;
    color: var(--fx-ink, #192530);
    font-size: .875rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-progress__line {
    height: 2px;
    flex: 0 1 3.5rem;
    align-self: 1.25rem;
    margin: 0 .75rem;
    overflow: hidden;
    border-radius: 99px;
    background: var(--fx-line, #d9d8d2);
}

.job-progress__line::after {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--fx-gold, #f2aa22);
    content: '';
    transform: translateX(-101%);
    transition: transform .35s ease;
}

.job-progress__item.is-active,
.job-progress__item.is-complete {
    color: var(--fx-navy, #102d45);
}

.job-progress__item.is-active .job-progress__number {
    border-color: var(--fx-gold, #f2aa22);
    background: var(--fx-gold, #f2aa22);
    color: var(--fx-navy, #102d45);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-gold, #f2aa22) 22%, transparent);
    transform: scale(1.05);
}

.job-progress__item.is-complete .job-progress__number {
    border-color: var(--fx-navy, #102d45);
    background: var(--fx-navy, #102d45);
    color: var(--fx-white, #fff);
    font-size: 0;
}

.job-progress__item.is-complete .job-progress__number::after {
    width: .58rem;
    height: .32rem;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: '';
    transform: rotate(-45deg) translate(.06rem, -.08rem);
}

.job-progress__item.is-complete+.job-progress__line::after {
    transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Wizard, service transition and form shell
   -------------------------------------------------------------------------- */

.wizard-service,
.wizard-step-container {
    transition: opacity .28s ease, transform .28s ease;
}

.wizard-service.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
}

.wizard-step-container[hidden],
.fx-step[hidden] {
    display: none;
}

.fx-form,
#fixquo-post-job-form {
    overflow: hidden;
    border: 1px solid var(--fx-line, #d9d8d2);
    border-radius: var(--fx-radius-lg, 1.5rem);
    background: var(--fx-white, #fff);
    box-shadow: var(--fx-shadow, 0 1rem 2.5rem rgba(17, 43, 62, .08));
}

.fx-step {
    animation: fx-step-enter .36s cubic-bezier(.22, 1, .36, 1) both;
}

.fx-step.is-active {
    display: block;
}

.fx-form__header {
    padding: clamp(1.75rem, 5vw, 3.5rem);
    background: var(--fx-navy, #102d45);
    color: var(--fx-white, #fff);
}

.fx-step-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: .25rem .7rem;
    border-radius: 99px;
    background: var(--fx-gold, #f2aa22);
    color: var(--fx-navy, #102d45);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fx-form__title {

    margin: 1rem 0 .6rem;
    color: inherit;
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.1;
}

.fx-form__description {

    margin: 0;
    color: color-mix(in srgb, var(--fx-white, #fff) 78%, transparent);
    font-size: 1rem;
    line-height: 1.6;
}

.fx-form__section {
    padding: 0 clamp(1.25rem, 5vw, 3.5rem);
}

.fx-form__header+.fx-form__section {
    padding-top: clamp(2rem, 4vw, 3.25rem);
}

.fx-form__section+.fx-form__section {
    padding-top: clamp(1.5rem, 3vw, 2rem);
}

.fx-form__section:last-of-type {
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   Fields and validation
   -------------------------------------------------------------------------- */

.fx-field,
.fx-form__field {
    margin: 0;
}

.fx-field+.fx-field,
.fx-form__field+.fx-form__field {
    /* margin-top: 1.75rem; */
}

.fx-field label,
.fx-form__field>label,
.fx-field__label {
    display: inline-block;
    margin-bottom: .6rem;
    color: var(--fx-ink, #192530);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.35;
}

.fx-required,
.required {
    color: #ba3d2f;
}

.fx-field input:not([type='checkbox']):not([type='radio']):not([type='file']),
.fx-field select,
.fx-field textarea,
.fx-form__field input:not([type='checkbox']):not([type='radio']):not([type='file']),
.fx-form__field select,
.fx-form__field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 3.5rem;
    padding: .85rem 1rem;
    border: 2px solid var(--fx-line, #d9d8d2);
    border-radius: var(--fx-radius-md, .875rem);
    outline: none;
    background: var(--fx-white, #fff);
    color: var(--fx-ink, #192530);
    font: inherit;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.fx-field textarea,
.fx-form__field textarea {
    min-height: 10rem;
    resize: vertical;
}

.fx-field select,
.fx-form__field select {
    padding-right: 2.75rem;
    cursor: pointer;
}

.fx-field input::placeholder,
.fx-field textarea::placeholder,
.fx-form__field input::placeholder,
.fx-form__field textarea::placeholder {
    color: color-mix(in srgb, var(--fx-muted, #687078) 80%, transparent);
    opacity: 1;
}

.fx-field input:hover:not(:disabled),
.fx-field select:hover:not(:disabled),
.fx-field textarea:hover:not(:disabled),
.fx-form__field input:hover:not(:disabled),
.fx-form__field select:hover:not(:disabled),
.fx-form__field textarea:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--fx-navy, #102d45) 45%, var(--fx-line, #d9d8d2));
}

.fx-field input:not([type='checkbox']):not([type='radio']):focus,
.fx-field select:focus,
.fx-field textarea:focus,
.fx-form__field input:not([type='checkbox']):not([type='radio']):focus,
.fx-form__field select:focus,
.fx-form__field textarea:focus {
    border-color: var(--fx-gold, #f2aa22);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-gold, #f2aa22) 24%, transparent);
}

.fx-field input:disabled,
.fx-field select:disabled,
.fx-field textarea:disabled,
.fx-form__field input:disabled,
.fx-form__field select:disabled,
.fx-form__field textarea:disabled {
    cursor: not-allowed;
    background: var(--fx-surface, #f4f5f5);
    color: var(--fx-muted, #687078);
}

.fx-field__help,
.fx-help-text,
.description {
    display: block;
    margin-top: .5rem;
    color: var(--fx-muted, #687078);
    font-size: .85rem;
    line-height: 1.5;
}

.fx-field__error,
.fx-error-text,
.fx-error,
.fx-field .error,
.fx-form__field .error {
    display: block;
    margin-top: .5rem;
    color: #b42318;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.45;
}

.fx-field.has-error input,
.fx-field.has-error select,
.fx-field.has-error textarea,
.fx-form__field.has-error input,
.fx-form__field.has-error select,
.fx-form__field.has-error textarea,
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
    border-color: #b42318 !important;
}

.fx-field.has-error input:focus,
.fx-field.has-error select:focus,
.fx-field.has-error textarea:focus,
input[aria-invalid='true']:focus,
select[aria-invalid='true']:focus,
textarea[aria-invalid='true']:focus {
    box-shadow: 0 0 0 4px rgba(180, 35, 24, .16);
}



/* --------------------------------------------------------------------------
   Radios and review cards
   -------------------------------------------------------------------------- */

.fx-radio-group,
.fx-field--radio {
    display: grid;
    gap: .75rem;
}

.fx-radio-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border: 2px solid var(--fx-line, #d9d8d2);
    border-radius: var(--fx-radius-md, .875rem);
    background: var(--fx-white, #fff);
    color: var(--fx-ink, #192530);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.fx-radio-card:hover {
    border-color: color-mix(in srgb, var(--fx-navy, #102d45) 50%, var(--fx-line, #d9d8d2));
}

.fx-radio-card:has(input:checked) {
    border-color: var(--fx-gold, #f2aa22);
    background: color-mix(in srgb, var(--fx-gold, #f2aa22) 9%, var(--fx-white, #fff));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-gold, #f2aa22) 16%, transparent);
}

.fx-radio-card input,
.fx-field--radio input[type='radio'],
.fx-field--radio input[type='checkbox'] {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    margin: .1rem 0 0;
    accent-color: var(--fx-navy, #102d45);
}

.fx-radio-card input:focus-visible,
.fx-field--radio input:focus-visible {
    outline: 3px solid var(--fx-gold, #f2aa22);
    outline-offset: 3px;
}

.fx-review {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.fx-review__item {
    min-height: 7rem;
    padding: 1.25rem;
    border: 1px solid var(--fx-line, #d9d8d2);
    border-radius: var(--fx-radius-md, .875rem);
    background: var(--fx-surface, #f4f5f5);
}

.fx-review__item h3 {
    margin: 0 0 .5rem;
    color: var(--fx-navy, #102d45);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.fx-review__item p {
    margin: 0;
    color: var(--fx-ink, #192530);
    line-height: 1.55;
    white-space: pre-line;
}

/* --------------------------------------------------------------------------
   Footer actions
   -------------------------------------------------------------------------- */

.fx-form__footer,
.fx-form-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem clamp(1.25rem, 5vw, 3.5rem);
    border-top: 1px solid var(--fx-line, #d9d8d2);
    background: var(--fx-white, #fff);
}

.fx-button,
.fx-form-actions button,
.js-step-next,
.js-submit-job,
.js-step-back {
    display: inline-flex;
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    border: 2px solid transparent;
    border-radius: var(--fx-radius-sm, .5rem);
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
        box-shadow .2s ease, transform .2s ease;
}

.fx-button--primary,
.fx-form-actions .js-step-next,
.fx-form-actions .js-submit-job,
.js-step-next,
.js-submit-job {
    margin-left: 0;
    background: var(--fx-gold, #f2aa22);
    color: var(--fx-navy, #102d45);
}

.fx-button--primary:hover,
.fx-form-actions .js-step-next:hover,
.fx-form-actions .js-submit-job:hover,
.js-step-next:hover,
.js-submit-job:hover {
    background: var(--fx-gold-hover, #df9411);
    color: var(--fx-navy, #102d45);
    transform: translateY(-1px);
}

.fx-button--secondary,
.fx-form-actions .js-step-back,
.js-step-back {
    padding-right: .25rem;
    padding-left: .25rem;
    background: transparent;
    color: var(--fx-muted, #687078);
}

.fx-button--secondary:hover,
.fx-form-actions .js-step-back:hover,
.js-step-back:hover {
    color: var(--fx-navy, #102d45);
}

.fx-button:disabled,
.fx-form-actions button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* The wizard script adds .is-final-step when the review screen is active.
   These rules prevent a brief flash of the submit action during transitions. */
#fixquo-post-job-form:not(.is-final-step) .js-submit-job {
    display: none;
}

#fixquo-post-job-form.is-final-step .js-step-next {
    display: none;
}

/* --------------------------------------------------------------------------
   Accessibility and utilities
   -------------------------------------------------------------------------- */

:where(.fx-form, #fixquo-job-wizard) :focus-visible {
    outline: 3px solid var(--fx-gold, #f2aa22);
    outline-offset: 3px;
}

.fx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fx-text-muted {
    color: var(--fx-muted, #687078);
}

.fx-text-center {
    text-align: center;
}

.fx-mt-0 {
    margin-top: 0;
}

.fx-mb-0 {
    margin-bottom: 0;
}

.fx-hidden {
    display: none !important;
}

.fx-input-wrapper {
    position: relative;
}

.fx-input-wrapper input {
    padding-right: 48px;
}

.fx-password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-password-toggle:hover {
    color: #111827;
}

.fx-password-toggle svg {
    width: 20px;
    height: 20px;
}

/* Default */

.fx-password-toggle__hide {
    display: none;
}

/* When password is visible */

.fx-password-toggle.is-visible .fx-password-toggle__show {
    display: none;
}

.fx-password-toggle.is-visible .fx-password-toggle__hide {
    display: inline-flex;
}

/*--------------------------------------------------------------
# Success Screen
--------------------------------------------------------------*/

.fx-form__success {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 0;
}

.fx-success {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
}

.fx-success__check {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    font-weight: 700;
    animation: fx-success-pop .45s ease;
}

.fx-success__badge {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #15803d;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.fx-success__title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
}

.fx-success__description {
    max-width: 560px;
    margin: 1rem auto 2rem;
    color: #6b7280;
    line-height: 1.7;
    font-size: 1rem;
}

.fx-success__reference {
    display: inline-flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.5rem;
    margin-bottom: 2.5rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.fx-success__reference span {
    font-size: .875rem;
    color: #6b7280;
}

.fx-success__reference strong {
    font-size: 1.25rem;
    color: #111827;
}

.fx-success__timeline {
    text-align: left;
    margin: 0 auto 2.5rem;
    max-width: 540px;
}

.fx-success__timeline h3 {
    margin-bottom: 1.5rem;
    text-align: center;
    color: #111827;
}

.fx-success__step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
}

.fx-success__step:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}

.fx-success__step span {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.fx-success__step p {
    margin: 0;
    color: #4b5563;
    line-height: 1.6;
}

.fx-success__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.fx-success__actions .fixquo-button,
.fx-success__actions .fx-button {
    min-width: 220px;
}

.fx-success__redirect {
    margin-top: 2rem;
    color: #9ca3af;
    font-size: .95rem;
}

.fx-success__redirect strong {
    color: #2563eb;
}

@keyframes fx-success-pop {

    0% {
        opacity: 0;
        transform: scale(.4);
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width: 768px) {

    .fx-form__success {
        padding: 1rem 0;
    }

    .fx-success {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }

    .fx-success__title {
        font-size: 1.6rem;
    }

    .fx-success__description {
        font-size: .95rem;
    }

    .fx-success__step {
        gap: .75rem;
    }

    .fx-success__actions {
        flex-direction: column;
    }

    .fx-success__actions .fixquo-button,
    .fx-success__actions .fx-button {
        width: 100%;
        min-width: auto;
    }

}

/* --------------------------------------------------------------------------
   Responsive layout
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
    .job-progress {
        margin-right: -.5rem;
        margin-left: -.5rem;
    }

    .job-progress__item {
        display: block;
        text-align: center;
    }

    .job-progress__number {
        margin: 0 auto;
    }

    .job-progress__content {
        margin-top: .5rem;
    }

    .job-progress__content small {
        display: none;
    }

    .job-progress__content strong {
        font-size: .68rem;
        white-space: normal;
    }

    .job-progress__line {
        flex-basis: 1.25rem;
        margin: 0 .3rem;
    }

    .fx-review {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 36rem) {
    .post-job-page {
        padding-top: 1.5rem;
    }

    .fx-form,
    #fixquo-post-job-form {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .job-progress__content strong {
        display: none;
    }

    .job-progress__line {
        flex: 1 1 auto;
        margin-right: .15rem;
        margin-left: .15rem;
    }

    .fx-form__footer,
    .fx-form-actions {
        position: sticky;
        z-index: 10;
        bottom: 0;
        flex-wrap: wrap;
        padding-top: 1rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        box-shadow: 0 -.75rem 1.5rem rgba(17, 43, 62, .08);
    }

    .fx-form-actions .js-step-next,
    .fx-form-actions .js-submit-job,
    .js-step-next,
    .js-submit-job {
        order: -1;
        width: 100%;
    }

    .fx-form-actions .js-step-back,
    .js-step-back {
        width: 100%;
    }
}