Job apply page

.tpl-job-apply-page {
    @apply pt-[calc(var(--content-padding-top))] overflow-hidden;

    .job-apply-form-intro {
        @apply max-w-[768px];

        .atm-heading {
            @apply text-secondary-col-1;
        }
    }
}

/* ==========================================================================
   Connexys/Salesforce External Form - Complete Vebego Styling Override
   ========================================================================== */

/* Reset external form container styling */
#cxsFormHolder {
    @apply relative w-full max-w-none m-0 text-left;

    /* Remove wrapper styling */
    #cxsWrapper {
        @apply relative w-full max-w-none m-0 bg-transparent p-0 border-0 rounded-none;
        box-shadow: none !important;
    }

    /* Language selector */
    #cxsLanguages {
        @apply flex gap-2 mb-4 float-none;
    }

    .cxsLanguage {
        @apply px-3 py-1 rounded-lg bg-shade text-black/60 cursor-pointer transition-colors;

        &:hover {
            @apply text-white bg-accent-1;
        }
    }

    .cxsActiveLanguage {
        @apply text-white font-medium cursor-default bg-accent-1;
    }

    /* Error header */
    .cxsErrorHeader {
        @apply hidden w-full mb-4 p-4 rounded-lg bg-red/10 border border-red text-red;

        &.cxsHasError {
            @apply block;
        }

        p {
            @apply m-0;
        }

        .cxsErrorLabel {
            @apply font-semibold;
        }
    }

    /* Page header */
    h1.cxsPageHeader {
        @apply w-full text-2xl font-display font-medium text-black mb-6;
    }

    h3.cxsSectionHeader {
        @apply w-full font-display text-black mb-6;
    }

    /* Section styling */
    .cxsSection {
        @apply mb-8;
    }

    .cxsSectionHeader {
        @apply text-lg font-semibold text-black pb-2 mb-4 border-b border-shade;
    }

    .cxsSectionIntro {
        @apply text-black/60 mb-4;
    }

    /* Field container - full width layout */
    .cxsFieldContainer {
        @apply w-full relative mb-4;
    }

    /* Field label - Vebego style */
    .cxsFieldLabel {
        @apply block text-sm font-semibold text-black mb-2 w-full max-w-none;
    }

    .cxsFieldAfterLabel {
        @apply hidden;
    }

    /* Required indicator */
    .cxsRequired {
        .cxsFieldLabel::after,
        .cxsFieldAfterLabel::after {
            content: ' *';
            @apply text-red;
        }
    }

    /* Standard input fields - Vebego styling */
    .cxsField,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"] {
        @apply w-full h-12 px-4;
        @apply text-base text-black bg-white;
        @apply border border-shade rounded-none;
        @apply transition-all duration-200 ease-in-out;
        box-shadow: none !important;
        outline: none !important;

        &:focus {
            @apply border-cta;
            box-shadow: none !important;
            outline: none !important;
            --tw-ring-color: none;
        }

        &[disabled] {
            @apply bg-shade cursor-not-allowed;
        }
    }

    /* Percent field */
    .cxsFieldType_percent .cxsField {
        @apply w-full;
    }

    /* Textkernel/CV upload section */
    .cxsFieldType_textkernel {
        @apply min-h-12;

        .cxsFieldLabel {
            @apply hidden;
        }

        .cxsFileUpload {
            @apply inline-flex items-center justify-center;
            @apply h-12 px-6;
            @apply bg-white border border-shade rounded-none;
            @apply text-base text-black;
            @apply cursor-pointer transition-all duration-200;

            &:hover {
                @apply bg-shade/50;
            }
        }

        .cxsFileButtonLabel {
            @apply font-normal;
        }

        .cxsFileWait {
            @apply hidden;
        }

        .cxsFieldAfterLabel {
            @apply hidden;
        }
    }

    /* Textarea - Vebego styling */
    .cxstextareaField,
    textarea.cxsField {
        @apply h-36 pt-4 min-h-[9rem] resize-y;
    }

    /* Date fields - both single input and multi-field */
    .cxsdateField,
    .cxsFieldType_date .cxsField {
        @apply w-full h-12 px-4;
        @apply text-base text-black bg-white;
        @apply border border-shade rounded-lg;
    }

    .cxsFieldType_date {
        .cxsdateField_d,
        .cxsdateField_m,
        .cxsdateField_y {
            @apply inline-block h-12 px-4 border border-shade rounded-lg;
        }

        .cxsdateField_d,
        .cxsdateField_m {
            @apply w-20;
        }

        .cxsdateField_y {
            @apply w-24;
        }

        .cxsSeperator {
            @apply inline-block text-center px-2 text-black/60;
        }
    }

    /* Select/dropdown fields */
    select.cxsField {
        @apply appearance-none bg-white;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem;
    }

    .cxsFieldType_multipicklist select[multiple] {
        @apply h-auto min-h-[9rem] py-2;
        background-image: none;
        padding-right: 1rem;

        option {
            @apply py-1 px-2 rounded;

            &:checked {
                @apply bg-cta/10;
            }
        }
    }

    /* Radio and checkbox containers */
    .cxsField.cxsCheckboxesField,
    .cxsField.cxsRadiosField {
        @apply bg-transparent p-0 border-0 shadow-none h-auto w-full;
    }

    .cxsCheckboxes,
    .cxsRadios {
        @apply flex flex-col gap-2;
    }

    .cxsCheckboxLabel,
    .cxsRadioLabel {
        @apply inline-flex items-center gap-2 cursor-pointer;
    }

    /* Radio styling */
    input[type="radio"] {
        @apply w-5 h-5 text-cta border-shade;

        &:focus {
            @apply ring-2 ring-cta ring-offset-2;
        }

        &:checked {
            @apply bg-cta border-cta;
        }
    }

    /* Checkbox field styling */
    .cxsFieldType_checkbox {
        @apply flex flex-wrap items-center gap-2;

        .cxsFieldLabel {
            @apply hidden;
        }

        .cxsFieldAfterLabel {
            @apply block visible h-auto mb-0 font-normal text-base;

            a {
                @apply text-cta underline;
            }
        }

        .cxscheckboxField,
        input[type="checkbox"] {
            @apply w-5 h-5 p-0;
            box-shadow: none !important;
            @apply rounded-sm;
            @apply text-cta;
            @apply transition-all duration-150;

            &:focus {
                @apply ring-2 ring-cta ring-offset-2;
                outline: none !important;
            }

            &:active {
                @apply ring-2 ring-cta/50;
            }

            &[disabled] {
                @apply text-shade;
            }

            &:checked {
                @apply bg-secondary-col-1 border-secondary-col-1;
                background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
            }
        }

        .cxsFieldError {
            @apply w-full mt-1;
        }
    }

    /* File upload styling */
    .cxsFieldType_file {
        @apply min-h-12;

        .cxsFieldLabel {
            @apply block;
        }

        .cxsFileButtonLabel {
            @apply font-normal;
        }

        .cxsFileUpload {
            @apply inline-flex items-center justify-center;
            @apply h-12 px-6;
            @apply bg-white border border-shade rounded-lg;
            @apply text-base text-black;
            @apply cursor-pointer transition-all duration-200;

            &:hover {
                @apply bg-shade/50;
            }
        }

        .cxsFileName {
            @apply inline-block ml-3 text-black/80;
        }

        .cxsFileRemove {
            @apply inline-flex items-center justify-center;
            @apply ml-3 px-2 py-1;
            @apply bg-red text-white rounded;
            @apply text-sm cursor-pointer transition-colors;

            &:hover {
                @apply bg-red/80;
            }
        }

        .cxsFileWait {
            @apply hidden;
        }
    }

    /* Buttons - Vebego primary button styling */
    .cxsButton {
        @apply inline-flex items-center justify-center;
        @apply h-12 px-6;
        @apply bg-white border border-shade rounded-lg;
        @apply text-base text-black;
        @apply cursor-pointer transition-all duration-200;

        &:hover {
            @apply bg-shade/50;
        }
    }

    /* Submit button - Vebego primary style */
    .cxsApplyButton,
    input#cxsApplyButton,
    input[type="submit"].cxsApplyButton {
        @apply inline-flex items-center justify-center;
        @apply h-12 px-6;
        @apply bg-accent-1 rounded-full;
        @apply text-lg font-display font-medium text-white;
        @apply cursor-pointer transition-all duration-200;
        @apply border-0;
        -webkit-appearance: none;

        &:hover {
            @apply bg-accent-1/90;
        }
    }

    input#cxsApplyButton {
        @apply mt-6;
    }

    /* Error states */
    .cxsError {
        .cxsField:not(.cxsCheckboxesField):not(.cxsRadiosField) {
            @apply border-red;
        }

        .cxsFieldError {
            @apply text-red text-sm mt-1;
        }
    }

    /* Help text */
    .cxsFieldHelp {
        @apply text-black/60 text-sm mt-1;
    }

    /* Correct/valid states */
    .cxsCorrect {
        .cxsField:not(.cxsCheckboxesField):not(.cxsRadiosField) {
            @apply border-cta;
        }
    }

    /* Read-only fields */
    .cxsReadOnlyField {
        @apply py-2 text-black/80;
    }

    /* Privacy statement section */
    .cxsPrivacystatementSection {
        @apply mt-6 p-4 bg-shade/30 rounded-lg;
    }

    /* Documents section */
    .cxsDocumentsSection {
        @apply mt-6;
    }

    /* Textkernel section */
    .cxsTextkernelSection {
        .cxsNoTK {
            @apply text-black/60;
        }
    }

    /* Job requirements */
    .cxsJobRequirements label,
    .cxsQuestion label {
        @apply w-full text-left mb-2;
    }

    /* Question styling */
    .cxsQuestion {
        @apply mb-4;

        .cxsField {
            @apply ml-0;
        }

        .cxsFieldError {
            @apply ml-0;
        }

        .cxsFieldHelp {
            @apply ml-0;
        }
    }

    /* Auto-complete criteria */
    .cxsAutoCompleteCriteria {
        .cxsAutoCompleteCriteriaContainer {
            @apply relative mt-2;
        }

        .cxsCriteriaResults {
            @apply absolute z-10 w-full max-h-[200px] overflow-auto;
            @apply bg-white border border-shade rounded-lg shadow-lg;
            @apply mt-1 py-2;
        }

        .cxsCriteriaResultType {
            @apply text-black/60 px-4 py-1 text-sm;
        }

        .cxsCriteriaResultValue {
            @apply px-4 py-2 cursor-pointer transition-colors;

            &:hover {
                @apply bg-cta/10;
            }
        }

        .cxsAutoCompleteCriteriaPill {
            @apply inline-flex items-center gap-2;
            @apply mt-2 px-3 py-2;
            @apply bg-white border border-shade rounded-lg;
        }

        .cxsPillRemove {
            @apply text-black/50 hover:text-red cursor-pointer transition-colors;
        }
    }

    /* Sub-section styling */
    .cxsSubSection {
        @apply mb-4 p-4 border border-shade rounded-lg;
    }

    .cxsSubSectionHeader {
        @apply flex items-center justify-between;
    }

    .cxsSubSectionRemove {
        @apply text-red cursor-pointer hover:text-red/80 transition-colors;
    }

    .cxsSubSectionAdd {
        @apply inline-flex items-center;
        @apply px-4 py-2;
        @apply bg-accent-1 text-white rounded-full;
        @apply cursor-pointer transition-colors;

        &:hover {
            @apply bg-accent-1/90;
        }
    }

    .cxsAddSubSectionContainer {
        @apply mb-6;
    }

    /* Progress bar */
    .cxsProgress {
        @apply w-full h-2 mb-4 bg-shade rounded-full overflow-hidden;
    }

    .cxsProgress-bar {
        @apply h-full bg-accent-1 transition-all duration-300;
    }

    #cxsOverlay {
        @apply bg-white/40;

        .cxsProgress {
            @apply fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
            @apply w-[calc(100%-2rem)] max-w-lg h-6;
        }
    }

    /* Spinner */
    .cxsSpinner {
        @apply hidden;
    }

    /* Override media query layout - force single column */
    @media (width >= 768px) {
        .cxsField,
        .cxsCheckboxes,
        .cxsRadios {
            @apply w-full;
        }

        .cxsFieldLabel {
            @apply w-full text-left pt-0 pr-0 mr-0 mb-2;
        }

        .cxsFieldError,
        .cxsFieldHelp {
            @apply w-full ml-0;
        }

        .cxsFieldType_date {
            .cxsdateField_d,
            .cxsdateField_m {
                @apply w-20;
            }

            .cxsdateField_y {
                @apply w-24;
            }

            .cxsSeperator {
                @apply w-auto;
            }
        }

        .cxsFieldType_percent .cxsField {
            @apply w-full;
        }

        .cxsFieldType_checkbox .cxsFieldLabel {
            @apply pt-0;
        }

        .cxsAutoCompleteCriteria {
            .cxsAutoCompleteCriteriaSelect,
            .cxsAutoCompleteCriteriaArrow {
                @apply m-0;
            }
        }
    }
}