/*
|--------------------------------------------------------------------------
| CONTACT WRAPPER
|--------------------------------------------------------------------------
*/

.union-contact {
    width: 100%;
    max-width: 960px;

    margin: 0 auto;

    padding:
            32px
            24px;

    box-sizing: border-box;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.union-contact__header {
    margin-bottom: 32px;
}


.union-contact__header h2 {
    margin:
            0
            0
            10px;

    color: #1d2327;

    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}


.union-contact__header p {
    margin: 0;

    color: #50575e;

    font-size: 15px;
    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.union-contact-form {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
            26px
            32px;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| FIELD
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-form-field {

    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| LABEL
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-form-label {

    display: block;

    margin:
            0
            0
            7px;

    color: #2d3748;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| REQUIRED
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-required {

    margin-left: 2px;

    color: #b32d2e;
}


/*
|--------------------------------------------------------------------------
| COMMON CONTROL
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-form-control {

    width: 100%;

    box-sizing: border-box;

    font-family: inherit;
}


/*
|--------------------------------------------------------------------------
| TEXT INPUTS
|--------------------------------------------------------------------------
*/

.union-contact-form__line-input {
    width: 100%;

    min-height: 44px;

    padding:
            9px
            12px;

    border:
            1px solid #0060a0 !important;

    border-radius:
            4px !important;

    background:
            #ffffff !important;

    color:
            #1d2327;

    font-size:
            15px;

    line-height:
            1.4;

    outline:
            none !important;

    box-shadow:
            none !important;

    box-sizing:
            border-box;

    transition:
            border-color
            0.15s
            ease,
            background-color
            0.15s
            ease;
}


/*
|--------------------------------------------------------------------------
| TEXT INPUT HOVER / FOCUS
|--------------------------------------------------------------------------
*/

.union-contact-form__line-input:hover,
.union-contact-form__line-input:focus,
.union-contact-form__line-input:focus-visible {

    border:
            1px solid #0060a0 !important;

    background:
            #ffffff !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| TEXT INPUT INVALID
|--------------------------------------------------------------------------
*/

.union-contact-form__line-input.is-invalid,
.union-contact-form__line-input.is-invalid:hover,
.union-contact-form__line-input.is-invalid:focus,
.union-contact-form__line-input.is-invalid:focus-visible {

    border-color:
            #b32d2e !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| TEXT INPUT VALID
|--------------------------------------------------------------------------
*/

.union-contact-form__line-input.is-valid,
.union-contact-form__line-input.is-valid:hover,
.union-contact-form__line-input.is-valid:focus,
.union-contact-form__line-input.is-valid:focus-visible {

    border-color:
            #116329 !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| SELECT
|--------------------------------------------------------------------------
*/

.union-contact-form__select {
    width: 100%;

    min-height: 44px;

    padding:
            9px
            34px
            9px
            12px;

    border:
            1px solid #0060a0 !important;

    border-radius:
            4px !important;

    background-color:
            #ffffff;

    color:
            #1d2327;

    font-size:
            15px;

    line-height:
            1.4;

    outline:
            none !important;

    box-shadow:
            none !important;

    cursor:
            pointer;

    box-sizing:
            border-box;

    transition:
            border-color
            0.15s
            ease;
}


/*
|--------------------------------------------------------------------------
| SELECT HOVER / FOCUS
|--------------------------------------------------------------------------
*/

.union-contact-form__select:hover,
.union-contact-form__select:focus,
.union-contact-form__select:focus-visible {

    border-color:
            #0060a0 !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| SELECT INVALID
|--------------------------------------------------------------------------
*/

.union-contact-form__select.is-invalid,
.union-contact-form__select.is-invalid:hover,
.union-contact-form__select.is-invalid:focus,
.union-contact-form__select.is-invalid:focus-visible {

    border-color:
            #b32d2e !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| SELECT VALID
|--------------------------------------------------------------------------
*/

.union-contact-form__select.is-valid,
.union-contact-form__select.is-valid:hover,
.union-contact-form__select.is-valid:focus,
.union-contact-form__select.is-valid:focus-visible {

    border-color:
            #116329 !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| TEXTAREA
|--------------------------------------------------------------------------
*/

.union-contact-form__textarea {
    width: 100%;

    min-height: 180px;

    padding:
            12px
            14px;

    border:
            1px solid #0060a0 !important;

    border-radius:
            4px !important;

    background:
            #ffffff;

    color:
            #1d2327;

    font-size:
            15px;

    line-height:
            1.6;

    resize:
            vertical;

    outline:
            none !important;

    box-shadow:
            none !important;

    box-sizing:
            border-box;

    transition:
            border-color
            0.15s
            ease;
}


/*
|--------------------------------------------------------------------------
| TEXTAREA HOVER / FOCUS
|--------------------------------------------------------------------------
*/

.union-contact-form__textarea:hover,
.union-contact-form__textarea:focus,
.union-contact-form__textarea:focus-visible {

    border-color:
            #0060a0 !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| TEXTAREA INVALID
|--------------------------------------------------------------------------
*/

.union-contact-form__textarea.is-invalid {

    border-color:
            #b32d2e !important;
}


/*
|--------------------------------------------------------------------------
| TEXTAREA VALID
|--------------------------------------------------------------------------
*/

.union-contact-form__textarea.is-valid {

    border-color:
            #116329 !important;
}


/*
|--------------------------------------------------------------------------
| FULL WIDTH FIELDS
|--------------------------------------------------------------------------
*/

.union-contact-form__subject,
.union-contact-form__message,
.union-contact-form__response,
.union-contact-form__actions {

    grid-column:
            1 / -1;
}


/*
|--------------------------------------------------------------------------
| CONDITIONAL SUBJECT
|--------------------------------------------------------------------------
*/

[data-union-contact-subject-wrapper][hidden] {

    display:
            none !important;
}


/*
|--------------------------------------------------------------------------
| VALIDATION WRAPPER
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-input-validation {

    position:
            relative;
}


/*
|--------------------------------------------------------------------------
| ERROR MESSAGE INSIDE FIELD
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-input-validation__error {

    position:
            absolute;

    right:
            8px;

    bottom:
            11px;

    max-width:
            65%;

    margin:
            0;

    padding:
            3px
            6px;

    border-radius:
            3px;

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.96
            );

    color:
            #b32d2e;

    font-size:
            11px;

    font-weight:
            500;

    line-height:
            1.25;

    text-align:
            right;

    pointer-events:
            none;

    z-index:
            3;
}


/*
|--------------------------------------------------------------------------
| HIDDEN ERROR
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-input-validation__error[hidden] {

    display:
            none !important;
}


/*
|--------------------------------------------------------------------------
| SPACE FOR ERROR INSIDE TEXT INPUT
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-input-validation
.union-contact-form__line-input {

    padding-right:
            160px;
}


/*
|--------------------------------------------------------------------------
| SELECT ERROR
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-input-validation
.union-contact-form__select
+
.union-input-validation__error {

    right:
            38px;

    bottom:
            11px;
}


/*
|--------------------------------------------------------------------------
| TEXTAREA ERROR
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-input-validation
.union-contact-form__textarea
+
.union-input-validation__error {

    top:
            38px;

    right:
            10px;

    bottom:
            auto;
}


/*
|--------------------------------------------------------------------------
| ARIA STATES
|--------------------------------------------------------------------------
*/

.union-contact-form
[aria-invalid="true"] {

    outline:
            none !important;
}


.union-contact-form
[aria-busy="true"] {

    cursor:
            progress;
}


/*
|--------------------------------------------------------------------------
| DISABLED
|--------------------------------------------------------------------------
*/

.union-contact-form
input:disabled,
.union-contact-form
select:disabled,
.union-contact-form
textarea:disabled {

    opacity:
            0.6;

    cursor:
            not-allowed;
}


/*
|--------------------------------------------------------------------------
| RESPONSE BOX
|--------------------------------------------------------------------------
*/

.union-contact-form__response {
    width: 100%;

    padding:
            12px
            16px;

    border:
            1px solid transparent;

    border-radius:
            4px;

    box-sizing:
            border-box;

    font-size:
            14px;

    font-weight:
            500;

    line-height:
            1.5;
}


/*
|--------------------------------------------------------------------------
| RESPONSE HIDDEN
|--------------------------------------------------------------------------
*/

.union-contact-form__response[hidden] {

    display:
            none !important;
}


/*
|--------------------------------------------------------------------------
| RESPONSE SUCCESS
|--------------------------------------------------------------------------
*/

.union-contact-form__response.is-success {

    border-color:
            #116329;

    background:
            #f0f8f2;

    color:
            #116329;
}


/*
|--------------------------------------------------------------------------
| RESPONSE ERROR
|--------------------------------------------------------------------------
*/

.union-contact-form__response.is-error {

    border-color:
            #b32d2e;

    background:
            #fcf0f1;

    color:
            #b32d2e;
}


/*
|--------------------------------------------------------------------------
| RESPONSE INFO
|--------------------------------------------------------------------------
*/

.union-contact-form__response.is-info,
.union-contact-form__response.info {

    border-color:
            #2271b1;

    background:
            #f0f6fc;

    color:
            #135e96;
}

/* Support both state naming conventions. */
.union-contact-form__response.success {
    border-color: #116329;
    background: #f0f8f2;
    color: #116329;
}

.union-contact-form__response.error {
    border-color: #b32d2e;
    background: #fcf0f1;
    color: #b32d2e;
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.union-contact-form__actions {

    display:
            flex;

    align-items:
            center;

    justify-content:
            flex-end;

    gap:
            12px;

    margin-top:
            4px;
}



.union-contact-form__file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.union-contact-form__file-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-right: auto;
}

.union-contact-form__upload {
    border-radius: 6px !important;
    background: #4a4a4a !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
    cursor: pointer;
    max-width: min(100%, 360px);
}

.union-contact-form__upload:hover,
.union-contact-form__upload:focus {
    background: #ff7518 !important;
    border-color: #ff7518 !important;
    color: #ffffff !important;
}

.union-contact-form__attachment {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        grid-template-rows 220ms ease,
        opacity 180ms ease,
        transform 220ms ease,
        margin-top 220ms ease;
    margin-top: 0;
}

.union-contact-form__attachment.is-visible {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    margin-top: 8px;
}

.union-contact-form__attachment-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    box-sizing: border-box;
}

.union-contact-form__attachment-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.union-contact-form__remove-file {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid #b32d2e !important;
    border-radius: 4px !important;
    background: #b32d2e !important;
    color: #ffffff !important;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

.union-contact-form__remove-file .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

.union-contact-form__remove-file:hover,
.union-contact-form__remove-file:focus,
.union-contact-form__remove-file:focus-visible {
    background: #8f2424 !important;
    border-color: #8f2424 !important;
    color: #ffffff !important;
}

/*
|--------------------------------------------------------------------------
| COMMON BUTTON
|--------------------------------------------------------------------------
*/

.union-contact-form__actions
.button {

    display:
            inline-flex !important;

    align-items:
            center;

    justify-content:
            center;

    gap:
            6px;

    min-height:
            40px;

    padding:
            7px
            16px;

    line-height:
            1.2;

    white-space:
            nowrap;

    box-sizing:
            border-box;
}


/*
|--------------------------------------------------------------------------
| BUTTON ICON
|--------------------------------------------------------------------------
*/

.union-contact-form__actions
.material-symbols-outlined {

    display:
            inline-flex;

    align-items:
            center;

    justify-content:
            center;

    width:
            18px;

    height:
            18px;

    margin:
            0;

    padding:
            0;

    font-size:
            18px;

    line-height:
            1;

    flex:
            0 0 auto;
}


/*
|--------------------------------------------------------------------------
| RESET BUTTON
|--------------------------------------------------------------------------
*/

.union-contact-form__reset {

    border:
            1px solid #0060a0 !important;

    border-radius:
            4px !important;

    background:
            #ffffff !important;

    color:
            #0060a0 !important;

    font-size:
            14px;

    font-weight:
            600;

    outline:
            none !important;

    box-shadow:
            none !important;

    cursor:
            pointer;

    transition:
            background-color
            0.15s
            ease;
}


/*
|--------------------------------------------------------------------------
| RESET ICON
|--------------------------------------------------------------------------
*/

.union-contact-form__reset
.material-symbols-outlined {

    color:
            #0060a0;
}


/*
|--------------------------------------------------------------------------
| RESET HOVER / FOCUS
|--------------------------------------------------------------------------
*/

.union-contact-form__reset:hover,
.union-contact-form__reset:focus,
.union-contact-form__reset:focus-visible {

    border-color:
            #0060a0 !important;

    background:
            #f4f9fc !important;

    color:
            #0060a0 !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| SEND BUTTON
|--------------------------------------------------------------------------
*/

.union-contact-form
[data-union-contact-submit] {

    border:
            1px solid #0060a0 !important;

    border-radius:
            4px !important;

    background:
            #0060a0 !important;

    color:
            #ffffff !important;

    font-size:
            14px;

    font-weight:
            600;

    outline:
            none !important;

    box-shadow:
            none !important;

    cursor:
            pointer;

    transition:
            background-color
            0.15s
            ease,
            border-color
            0.15s
            ease;
}


/*
|--------------------------------------------------------------------------
| SEND HOVER / FOCUS
|--------------------------------------------------------------------------
*/

.union-contact-form
[data-union-contact-submit]:hover,
.union-contact-form
[data-union-contact-submit]:focus,
.union-contact-form
[data-union-contact-submit]:focus-visible {

    border-color:
            #004f84 !important;

    background:
            #004f84 !important;

    color:
            #ffffff !important;

    outline:
            none !important;

    box-shadow:
            none !important;
}


/*
|--------------------------------------------------------------------------
| SEND DISABLED
|--------------------------------------------------------------------------
*/

.union-contact-form
[data-union-contact-submit]:disabled {

    opacity:
            0.65;

    cursor:
            not-allowed;
}


/*
|--------------------------------------------------------------------------
| LOADER
|--------------------------------------------------------------------------
*/

.union-contact-form
.union-button__loader {

    display:
            none;

    width:
            14px;

    height:
            14px;

    border:
            2px solid currentColor;

    border-right-color:
            transparent;

    border-radius:
            50%;

    box-sizing:
            border-box;

    animation:
            union-contact-spin
            0.75s
            linear
            infinite;
}


/*
|--------------------------------------------------------------------------
| LOADER VISIBLE
|--------------------------------------------------------------------------
*/

.union-contact-form
.is-loading
.union-button__loader {

    display:
            inline-block;
}


/*
|--------------------------------------------------------------------------
| SPINNER
|--------------------------------------------------------------------------
*/

@keyframes union-contact-spin {

    to {

        transform:
                rotate(360deg);
    }
}


/*
|--------------------------------------------------------------------------
| HONEYPOT
|--------------------------------------------------------------------------
*/

.union-contact-form__honeypot {

    position:
            absolute !important;

    width:
            1px !important;

    height:
            1px !important;

    margin:
            -1px !important;

    padding:
            0 !important;

    overflow:
            hidden !important;

    clip:
            rect(
                    0,
                    0,
                    0,
                    0
            ) !important;

    clip-path:
            inset(50%) !important;

    white-space:
            nowrap !important;

    border:
            0 !important;
}


/*
|--------------------------------------------------------------------------
| PLACEHOLDER
|--------------------------------------------------------------------------
*/

.union-contact-form
input::placeholder,
.union-contact-form
textarea::placeholder {

    color:
            #8c8f94;

    opacity:
            1;
}


/*
|--------------------------------------------------------------------------
| AUTOFILL
|--------------------------------------------------------------------------
*/

.union-contact-form
input:-webkit-autofill,
.union-contact-form
input:-webkit-autofill:hover,
.union-contact-form
input:-webkit-autofill:focus {

    -webkit-text-fill-color:
            #1d2327;

    -webkit-box-shadow:
            0
            0
            0
            1000px
            #ffffff
            inset;

    transition:
            background-color
            9999s
            ease-in-out
            0s;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 700px) {

    .union-contact {

        padding:
                24px
                16px;
    }


    .union-contact-form {

        grid-template-columns:
            1fr;

        gap:
                22px;
    }


    .union-contact-form__subject,
    .union-contact-form__message,
    .union-contact-form__response,
    .union-contact-form__actions {

        grid-column:
                auto;
    }


    /*
    |--------------------------------------------------------------------------
    | ERROR SPACE
    |--------------------------------------------------------------------------
    */

    .union-contact-form
    .union-input-validation
    .union-contact-form__line-input {

        padding-right:
                115px;
    }


    .union-contact-form
    .union-input-validation__error {

        max-width:
                58%;

        font-size:
                10px;
    }


    /*
    |--------------------------------------------------------------------------
    | ACTIONS
    |--------------------------------------------------------------------------
    */

    .union-contact-form__actions {

        flex-direction:
                column-reverse;

        align-items:
                stretch;
    }


    .union-contact-form__file-actions {

        width:
                100%;

        margin-right:
                0;

        align-items:
                stretch;
    }

    .union-contact-form__attachment-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .union-contact-form__attachment-name {
        width: 100%;
    }

    .union-contact-form__remove-file {
        width: 100%;
    }


    .union-contact-form__actions
    .button,
    .union-contact-form__file-actions
    .button {

        width:
                100%;
    }
}

/* ==========================================================================
   MEMBER REGISTRATION FORM
   ========================================================================== */

.union-registration {
    --union-registration-primary: #0060a0;
    --union-registration-primary-dark: #004f84;
    --union-registration-error: #b32d2e;
    --union-registration-success: #116329;
    --union-registration-text: #1d2327;
    --union-registration-muted: #646970;

    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px;
    box-sizing: border-box;
}

.union-registration__header {
    margin-bottom: 34px;
}

.union-registration__header h2 {
    margin: 0 0 10px;
    color: var(--union-registration-text);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.union-registration__header p {
    max-width: 760px;
    margin: 0;
    color: var(--union-registration-muted);
    font-size: 15px;
    line-height: 1.65;
}

.union-registration-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 34px;
    width: 100%;
}

.union-registration-form__field {
    position: relative;
    min-width: 0;
}

.union-registration-form__label {
    display: block;
    margin: 0 0 5px;
    color: #2d3748;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.union-registration-form__required {
    color: var(--union-registration-error);
}

.union-registration-form__control {
    width: 100%;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 8px 7px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--union-registration-primary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--union-registration-text) !important;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box;
    transition: border-color .15s ease, background-color .15s ease;
}

.union-registration-form__control:hover,
.union-registration-form__control:focus,
.union-registration-form__control:focus-visible {
    border: 0 !important;
    border-bottom: 2px solid var(--union-registration-primary-dark) !important;
    outline: none !important;
    box-shadow: none !important;
}

.union-registration-form__control.is-invalid,
.union-registration-form__control.is-invalid:hover,
.union-registration-form__control.is-invalid:focus {
    border-bottom-color: var(--union-registration-error) !important;
}

.union-registration-form__control.is-valid,
.union-registration-form__control.is-valid:hover,
.union-registration-form__control.is-valid:focus {
    border-bottom-color: var(--union-registration-success) !important;
}

.union-registration-form__select {
    cursor: pointer;
    padding-right: 34px !important;
}

.union-registration-form__error {
    position: absolute;
    right: 7px;
    bottom: 10px;
    z-index: 4;
    max-width: 72%;
    margin: 0;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .96);
    color: var(--union-registration-error);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
    pointer-events: none;
}

.union-registration-form__error[hidden],
.union-registration-form__agreement-error[hidden],
.union-registration-signature__error[hidden],
.union-registration-form__response[hidden],
.union-registration-signature__placeholder[hidden] {
    display: none !important;
}

.union-registration-form__field.union-input-validation .union-registration-form__control {
    padding-right: 165px !important;
}

.union-registration-form__field.union-input-validation .union-registration-form__select {
    padding-right: 170px !important;
}

/* Το 13ο input μένει μόνο του. Πόλη + εταιρεία ξεκινούν σε νέα σειρά. */
.union-registration-form__row-break {
    grid-column: 1 / -1;
    height: 0;
    margin: -26px 0 0;
    padding: 0;
}

.union-registration-form__agreements,
.union-registration-signature,
.union-registration-form__response,
.union-registration-form__actions,
.union-registration-form__honeypot {
    grid-column: 1 / -1;
}

.union-registration-form__agreements {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 20px 22px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
}

.union-registration-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #2d3748;
    font-size: 13px;
    line-height: 1.55;
    cursor: pointer;
}

.union-registration-form__checkbox input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--union-registration-primary);
    flex: 0 0 auto;
}

.union-registration-form__agreement-error {
    color: var(--union-registration-error);
    font-size: 12px;
    font-weight: 600;
}

.union-registration-signature {
    padding: 20px 22px 22px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
}

.union-registration-signature__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.union-registration-signature__heading h3 {
    margin: 0 0 5px;
    color: var(--union-registration-text);
    font-size: 16px;
    line-height: 1.35;
}

.union-registration-signature__heading p {
    margin: 0;
    color: var(--union-registration-muted);
    font-size: 12px;
    line-height: 1.5;
}

.union-registration-signature__clear {
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--union-registration-primary);
    border-radius: 4px;
    background: #fff;
    color: var(--union-registration-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.union-registration-signature__clear:hover,
.union-registration-signature__clear:focus {
    border-color: var(--union-registration-primary-dark);
    color: var(--union-registration-primary-dark);
    outline: none;
}

.union-registration-signature__canvas-wrap {
    position: relative;
    width: 100%;
    height: 190px;
    border: 0;
    border-bottom: 2px solid var(--union-registration-primary);
    background: #fbfcfd;
    overflow: hidden;
    box-sizing: border-box;
}

.union-registration-signature__canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.union-registration-signature__placeholder {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #a7aaad;
    font-size: 14px;
    pointer-events: none;
}

.union-registration-signature__error {
    display: block;
    margin-top: 7px;
    color: var(--union-registration-error);
    font-size: 12px;
    font-weight: 600;
}

.union-registration-form__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.union-registration-form__response {
    padding: 12px 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.union-registration-form__response.is-success {
    border-color: var(--union-registration-success);
    background: #f0f8f2;
    color: var(--union-registration-success);
}

.union-registration-form__response.is-error {
    border-color: var(--union-registration-error);
    background: #fcf0f1;
    color: var(--union-registration-error);
}

.union-registration-form__actions {
    display: flex;
    justify-content: flex-end;
}

.union-registration-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 8px 19px;
    border: 1px solid var(--union-registration-primary);
    border-radius: 4px;
    background: var(--union-registration-primary);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.union-registration-form__submit:hover,
.union-registration-form__submit:focus {
    border-color: var(--union-registration-primary-dark);
    background: var(--union-registration-primary-dark);
    color: #fff;
    outline: none;
}

.union-registration-form__submit:disabled {
    opacity: .7;
    cursor: wait;
}

.union-registration-form__loader {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    animation: union-registration-spin .7s linear infinite;
}

.union-registration-form__submit.is-loading .union-registration-form__loader {
    display: inline-block;
}

@keyframes union-registration-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
    .union-registration {
        padding: 24px 16px;
    }

    .union-registration-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 23px;
    }

    .union-registration-form__row-break,
    .union-registration-form__agreements,
    .union-registration-signature,
    .union-registration-form__response,
    .union-registration-form__actions,
    .union-registration-form__honeypot {
        grid-column: 1;
    }

    .union-registration-form__row-break {
        display: none;
    }

    .union-registration-form__field.union-input-validation .union-registration-form__control,
    .union-registration-form__field.union-input-validation .union-registration-form__select {
        padding-right: 145px !important;
    }

    .union-registration-signature__heading {
        flex-direction: column;
    }

    .union-registration-signature__canvas-wrap {
        height: 165px;
    }

    .union-registration-form__actions,
    .union-registration-form__submit {
        width: 100%;
    }
}

/* ========================================================================== 
   UNIFIED PUBLIC FORMS — FLOATING LABELS / TWO-COLUMN LAYOUT
   ========================================================================== */

.union-registration,
.union-contact {
    --union-public-form-primary: #0060a0;
    --union-public-form-primary-dark: #004f84;
    --union-public-form-label: #7a7f87;
    --union-public-form-label-active: #1d2327;
    --union-public-form-error: #b32d2e;
    --union-public-form-success: #116329;
}

.union-registration-form,
.union-contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 26px;
}

.union-registration-form__field,
.union-contact-form .union-form-field {
    position: relative;
    min-width: 0;
    padding-top: 0;
}

/* Labels start slightly above the visual centre of the control. */
.union-registration-form__label,
.union-contact-form .union-form-label {
    position: absolute;
    left: 8px;
    top: 43%;
    z-index: 5;
    margin: 0;
    padding: 0 3px;
    background: transparent;
    color: var(--union-public-form-label);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition:
        top .16s ease,
        color .16s ease,
        font-size .16s ease,
        font-weight .16s ease,
        transform .16s ease;
}

/* On focus/value, float to the invisible top-border position and darken. */
.union-registration-form__field:focus-within .union-registration-form__label,
.union-registration-form__field:has(.union-registration-form__control:not(:placeholder-shown)) .union-registration-form__label,
.union-registration-form__field:has(select:valid) .union-registration-form__label,
.union-contact-form .union-form-field:focus-within .union-form-label,
.union-contact-form .union-form-field:has(input:not(:placeholder-shown)) .union-form-label,
.union-contact-form .union-form-field:has(textarea:not(:placeholder-shown)) .union-form-label,
.union-contact-form .union-form-field:has(select:valid) .union-form-label {
    top: 0;
    color: var(--union-public-form-label-active);
    font-size: 10px;
    font-weight: 700;
    transform: translateY(-50%);
}

/* Select labels are always floated so they never overlap the selected option. */
.union-registration-form__field:has(select) .union-registration-form__label,
.union-contact-form .union-form-field:has(select) .union-form-label {
    top: 0;
    color: var(--union-public-form-label-active);
    font-size: 10px;
    font-weight: 700;
    transform: translateY(-50%);
}

.union-registration-form__control,
.union-contact-form .union-form-control,
.union-contact-form__line-input,
.union-contact-form__select,
.union-contact-form__textarea {
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
    padding: 11px 8px 7px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--union-public-form-primary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1d2327 !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.union-registration-form__control:hover,
.union-registration-form__control:focus,
.union-registration-form__control:focus-visible,
.union-contact-form .union-form-control:hover,
.union-contact-form .union-form-control:focus,
.union-contact-form .union-form-control:focus-visible {
    border: 0 !important;
    border-bottom: 2px solid var(--union-public-form-primary-dark) !important;
    outline: none !important;
    box-shadow: none !important;
}

.union-registration-form__control.is-invalid,
.union-contact-form .union-form-control.is-invalid {
    border-bottom-color: var(--union-public-form-error) !important;
}

.union-registration-form__control.is-valid,
.union-contact-form .union-form-control.is-valid {
    border-bottom-color: var(--union-public-form-success) !important;
}

/* Keep room for validation text rendered inside the control. */
.union-registration-form__field.union-input-validation .union-registration-form__control,
.union-contact-form .union-input-validation .union-form-control {
    padding-right: 160px !important;
}

.union-contact-form__textarea {
    min-height: 130px;
    resize: vertical;
    padding-top: 16px !important;
}

.union-contact-form__subject,
.union-contact-form__message,
.union-contact-form__response,
.union-contact-form__actions,
.union-contact-form__honeypot {
    grid-column: 1 / -1;
}

/* With three initial text inputs, Email stays alone; selects start next row. */
.union-contact-form__row-break {
    grid-column: 1 / -1;
    height: 0;
    margin: -26px 0 0;
    padding: 0;
}

@media (max-width: 700px) {
    .union-registration-form,
    .union-contact-form {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 23px;
    }

    .union-registration-form__row-break,
    .union-contact-form__row-break {
        display: none;
    }

    .union-registration-form__field.union-input-validation .union-registration-form__control,
    .union-contact-form .union-input-validation .union-form-control {
        padding-right: 145px !important;
    }
}


/* ==========================================================================
   Contact form attachment
   ========================================================================== */

.union-contact-form__file-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    min-width: 0;
}

.union-contact-form__file-button {
    cursor: pointer;
}

.union-contact-form__file-name {
    max-width: min(320px, 38vw);
    overflow: hidden;
    color: #646970;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .union-contact-form__file-action {
        width: 100%;
        flex-wrap: wrap;
        margin-right: 0;
    }

    .union-contact-form__file-name {
        max-width: 100%;
    }
}


/* ==========================================================================
   Contact form attachment button + textarea refinement
   ========================================================================== */

.union-contact-form
.union-contact-form__file-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 7px 16px;
    border: 1px solid #0060a0 !important;
    border-radius: 4px !important;
    background: #0060a0 !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background-color .15s ease,
        border-color .15s ease;
}

.union-contact-form
.union-contact-form__file-button .material-symbols-outlined {
    color: #ffffff !important;
}

.union-contact-form
.union-contact-form__file-button:hover,
.union-contact-form
.union-contact-form__file-button:focus,
.union-contact-form
.union-contact-form__file-button:focus-visible {
    border-color: #004f84 !important;
    background: #004f84 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

.union-contact-form
.union-contact-form__textarea {
    border: 1px solid #dcdcde !important;
}

.union-contact-form
.union-contact-form__textarea:hover {
    border-color: #c3c4c7 !important;
}

.union-contact-form
.union-contact-form__textarea:focus,
.union-contact-form
.union-contact-form__textarea:focus-visible {
    border-color: #0060a0 !important;
    box-shadow: 0 0 0 1px #0060a0 !important;
}

.union-contact-form
.union-contact-form__textarea.is-invalid {
    border-color: #b32d2e !important;
}

.union-contact-form
.union-contact-form__textarea.is-valid {
    border-color: #116329 !important;
}


/* ==========================================================================
   Contact message textarea - persistent border / floating label
   ========================================================================== */

.union-contact-form
.union-contact-form__message {
    position: relative;
    padding-top: 0;
}

.union-contact-form
.union-contact-form__message-label {
    position: absolute;
    top: 20px;
    left: 14px;
    z-index: 3;
    margin: 0;
    padding: 0 4px;
    background: transparent;
    color: #646970;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
    transform: translateY(0);
    transition:
        top .16s ease,
        color .16s ease,
        font-size .16s ease,
        background-color .16s ease,
        transform .16s ease;
}

.union-contact-form
.union-contact-form__message-label .union-required {
    color: #d63638;
}

.union-contact-form
.union-contact-form__message .union-contact-form__textarea {
    min-height: 180px;
    padding: 48px 14px 14px;
    border: 1px solid #dcdcde !important;
    background: #ffffff;
}

.union-contact-form
.union-contact-form__message .union-contact-form__textarea:hover {
    border-color: #c3c4c7 !important;
}

.union-contact-form
.union-contact-form__message .union-contact-form__textarea:focus,
.union-contact-form
.union-contact-form__message .union-contact-form__textarea:focus-visible {
    border: 1px solid #0060a0 !important;
    box-shadow: 0 0 0 1px #0060a0 !important;
}

.union-contact-form
.union-contact-form__message:focus-within
.union-contact-form__message-label,
.union-contact-form
.union-contact-form__message:has(.union-contact-form__textarea:not(:placeholder-shown))
.union-contact-form__message-label {
    top: 0;
    background: #ffffff;
    color: #0060a0;
    font-size: 14px;
    transform: translateY(-50%);
}

.union-contact-form
.union-contact-form__message:has(.union-contact-form__textarea:not(:focus):not(:placeholder-shown))
.union-contact-form__message-label {
    color: #646970;
}

.union-contact-form
.union-contact-form__message .union-contact-form__textarea.is-invalid {
    border-color: #b32d2e !important;
}

.union-contact-form
.union-contact-form__message:has(.union-contact-form__textarea.is-invalid)
.union-contact-form__message-label {
    color: #b32d2e;
}

.union-contact-form
.union-contact-form__message .union-contact-form__textarea.is-valid {
    border-color: #116329 !important;
}

.union-contact-form
.union-contact-form__message:has(.union-contact-form__textarea.is-valid:not(:focus))
.union-contact-form__message-label {
    color: #116329;
}


/* ==========================================================================
   v2.4.16 - Secure Request Document Shortcode
   ========================================================================== */

.union-request-document {
    width: 100%;
    padding: 32px 16px;
    box-sizing: border-box;
}

.union-request-document,
.union-request-document *,
.union-request-document *::before,
.union-request-document *::after {
    box-sizing: border-box;
}

.union-request-document__shell {
    width: min(100%, 920px);
    margin: 0 auto;
}

.union-request-document__hero {
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
    color: #fff;
}

.union-request-document__hero h1 {
    margin: 5px 0 10px;
    color: #fff !important;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.25;
}

.union-request-document__hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.65;
}

.union-request-document__eyebrow {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: none;
}

.union-request-document__form,
.union-request-document__state {
    border: 1px solid #E2E3E5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .06);
}

.union-request-document__section {
    padding: 24px 28px;
    border-bottom: 1px solid #E2E3E5;
}

.union-request-document__section:last-of-type {
    border-bottom: 0;
}

.union-request-document__section > h2,
.union-request-document__applicant-heading h2 {
    margin: 0 0 16px;
    color: #1d2327;
    font-size: 19px;
    line-height: 1.35;
}

.union-request-document__identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.union-request-document__readonly-field {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #E2E3E5;
    border-radius: 8px;
    background: #f8f9fa;
}

.union-request-document__readonly-field span {
    color: #646970;
    font-size: 12px;
    font-weight: 650;
}

.union-request-document__readonly-field strong {
    overflow-wrap: anywhere;
    color: #1d2327;
    font-size: 14px;
    line-height: 1.4;
}

.union-request-document__letter {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
}

.union-request-document__letter p {
    margin: 0 0 15px;
}

.union-request-document__recipient {
    font-weight: 750;
}

.union-request-document__reason {
    position: relative;
    margin-top: 22px;
}

.union-request-document__reason label {
    display: inline-block;
    margin: 0 0 7px;
    color: #4a4a4a;
    font-size: 15px;
    font-weight: 700;
}

.union-request-document__reason textarea {
    display: block;
    width: 100%;
    min-height: 170px;
    resize: vertical;
    padding: 13px 14px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #fff;
    color: #1d2327;
    font: inherit;
    line-height: 1.6;
    outline: none;
}

.union-request-document__reason textarea:hover {
    border-color: #c3c4c7;
}

.union-request-document__reason textarea:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.union-request-document__field-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    color: #646970;
    font-size: 12px;
}

.union-request-document__error {
    display: block;
    margin-top: 7px;
    color: #b32d2e;
    font-size: 13px;
    font-weight: 600;
}

.union-request-document__applicant-heading {
    margin-bottom: 15px;
}

.union-request-document__applicant-heading p {
    margin: 0;
    padding: 11px 13px;
    border-left: 3px solid #ff7518;
    background: #fff8f2;
    color: #4a4a4a;
    font-size: 13px;
    line-height: 1.6;
}

.union-request-document__signature {
    margin-top: 16px;
}

.union-request-document__date {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #4a4a4a;
}

.union-request-document__date span {
    font-size: 13px;
}

.union-request-document__date strong {
    font-size: 14px;
}

.union-request-document__notice {
    margin: 20px 28px 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
}

.union-request-document__notice[data-state="info"] {
    border: 1px solid #9ec8ed;
    background: #eaf4ff;
    color: #135e96;
}

.union-request-document__notice[data-state="success"] {
    border: 1px solid #9ed4aa;
    background: #edf9ef;
    color: #116329;
}

.union-request-document__notice[data-state="error"] {
    border: 1px solid #e7a6aa;
    background: #fff0f1;
    color: #a12c35;
}

.union-request-document__actions {
    display: flex;
    justify-content: flex-end;
    padding: 20px 28px 28px;
}

.union-request-document__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #0060a0;
    border-radius: 6px;
    background: #0060a0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.union-request-document__submit:hover,
.union-request-document__submit:focus-visible {
    border-color: #004f84;
    background: #004f84;
    color: #fff;
}

.union-request-document__submit:disabled {
    opacity: .65;
    cursor: wait;
}

.union-request-document__state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 42px 24px;
    text-align: center;
}

.union-request-document__state > .material-symbols-outlined {
    font-size: 44px;
    color: #646970;
}

.union-request-document__state h2 {
    margin: 0;
    color: #1d2327;
    font-size: 24px;
}

.union-request-document__state p {
    max-width: 620px;
    margin: 0;
    color: #646970;
    line-height: 1.65;
}


/* Keep the existing SignaturePad responsive inside the shortcode. */
.union-request-document
.union-registration-signature__canvas-wrap {
    width: 100%;
    min-height: 170px;
}

.union-request-document
.union-registration-signature__canvas {
    width: 100%;
    height: 170px;
    touch-action: none;
}


@media (max-width: 700px) {

    .union-request-document {
        padding: 18px 10px;
    }

    .union-request-document__hero {
        margin-bottom: 16px;
        padding: 22px 18px;
        border-radius: 10px;
    }

    .union-request-document__section {
        padding: 20px 16px;
    }

    .union-request-document__identity-grid {
        grid-template-columns: 1fr;
    }

    .union-request-document__field-meta {
        flex-direction: column;
        gap: 3px;
    }

    .union-request-document__notice {
        margin: 16px 16px 0;
    }

    .union-request-document__actions {
        padding: 16px;
    }

    .union-request-document__submit {
        width: 100%;
    }

    .union-request-document
    .union-registration-signature__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .union-request-document
    .union-registration-signature__clear {
        width: 100%;
    }
}


@media (max-width: 420px) {

    .union-request-document__hero h1 {
        font-size: 23px;
    }

    .union-request-document__section > h2,
    .union-request-document__applicant-heading h2 {
        font-size: 18px;
    }

    .union-request-document
    .union-registration-signature__canvas-wrap,
    .union-request-document
    .union-registration-signature__canvas {
        min-height: 150px;
        height: 150px;
    }
}


/* v2.4.17 - Contact member identity */
.union-contact-form__member-identifier-help {
    display: block;
    margin-top: 6px;
    color: #646970;
    font-size: 11px;
    line-height: 1.45;
}


.union-contact-member-verification {
    width: 100%;
    padding: 32px 16px;
    box-sizing: border-box;
}

.union-contact-member-verification__card {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(100%, 680px);
    margin: 0 auto;
    padding: 38px 24px;
    border: 1px solid #E2E3E5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(15,23,42,.06);
    text-align: center;
}

.union-contact-member-verification__icon {
    font-size: 46px;
    color: #2271b1;
}

.union-contact-member-verification__card h1 {
    margin: 0;
    color: #1d2327;
    font-size: clamp(22px,4vw,30px);
}

.union-contact-member-verification__card p {
    max-width: 560px;
    margin: 0;
    color: #646970;
    line-height: 1.65;
}


/* ==========================================================================
   v2.4.21 - Contact form explicit row layout
   ========================================================================== */

.union-contact-form__paired-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 26px;
    min-width: 0;
}

.union-contact-form__reason-row {
    grid-column: 1 / -1;
}

.union-contact-form__paired-row[hidden] {
    display: none !important;
}


.union-contact-form__paired-row--member
.union-form-field[hidden] {
    display: none !important;
}

@media (max-width: 700px) {
    .union-contact-form__paired-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 23px;
    }
}


/* ==========================================================================
   v2.4.22 - Contact member/request reference label position
   ========================================================================== */

.union-contact-form__paired-row--member
.union-form-field > .union-form-label {
    top: 5%;
}


#union-contact-member-identifier + .union-input-validation__error {
    margin-top: 4px;
}

label[for="union-contact-member-identifier"],
label[for="union-contact-request-reference"],
label[for="union-contact-message-request-id"] {
    top: 5% !important;
}


/* ==========================================================================
   v2.4.28 - Contact member verification page layout
   ========================================================================== */

.union-contact-member-verification {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: min(68vh, 720px);
    padding: 44px 24px;
    box-sizing: border-box;
}

.union-contact-member-verification__card {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 48px 42px;
    box-sizing: border-box;
}

.union-contact-member-verification__card p {
    width: min(100%, 650px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .union-contact-member-verification {
        min-height: auto;
        padding: 26px 12px;
    }

    .union-contact-member-verification__card {
        width: min(100%, 560px);
        padding: 30px 18px;
        border-radius: 10px;
    }
}


/* ==========================================================================
   Contact form field validation
   ========================================================================== */

.union-contact-form .union-form-control.is-invalid {
    border-color: #b32d2e;
}

.union-contact-form .union-form-control.is-valid {
    border-color: #116329;
}

.union-contact-form .union-form-error {
    margin-top: 6px;
    color: #b32d2e;
    font-size: 13px;
    line-height: 1.4;
}

.union-contact-form .union-form-control[aria-busy="true"] {
    opacity: .72;
}

/* ================================================================
 * ONLINE REGISTRATION START — TWO APPLICATION METHODS
 * ================================================================ */
.union-online-registration-start {
    max-width: 1120px;
}

.union-online-registration-start__header {
    text-align: center;
}

.union-online-registration-start__header h2,
.union-online-registration-start__header p {
    text-align: center;
}

.union-online-registration-start__form {
    display: block;
}

.union-online-registration-start__email-field {
    max-width: 560px;
    margin: 0 auto 20px;
}

.union-online-registration-start__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 24px;
}

.union-online-registration-start__action-panel {
    max-width: 680px;
    max-height: 0;
    margin: 0 auto;
    padding: 0 24px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #fff;
    transition:
        max-height .45s ease,
        opacity .3s ease,
        transform .35s ease,
        padding .35s ease,
        border-color .35s ease,
        visibility 0s linear .45s;
}

.union-online-registration-start__action-panel.is-visible {
    max-height: 520px;
    padding: 24px;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    border-color: #d9e1e8;
    transition:
        max-height .45s ease,
        opacity .3s ease,
        transform .35s ease,
        padding .35s ease,
        border-color .35s ease,
        visibility 0s linear 0s;
}

.union-online-registration-start__card {
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: 26px;
    border: 1px solid #d9e1e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 45, 61, .06);
    box-sizing: border-box;
}

.union-online-registration-start__card.is-online {
    border-top: 4px solid var(--union-registration-primary);
}

.union-online-registration-start__card.is-printable {
    border-top: 4px solid #ff7518;
}

.union-online-registration-start__card.is-selected {
    box-shadow: 0 12px 30px rgba(31, 45, 61, .13);
    transform: translateY(-2px);
}

.union-online-registration-start__card.is-online.is-selected {
    border-color: var(--union-registration-primary);
}

.union-online-registration-start__card.is-printable.is-selected {
    border-color: #ff7518;
}

.union-online-registration-start__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #edf5fb;
    color: var(--union-registration-primary);
    font-size: 20px;
    font-weight: 700;
}

.union-online-registration-start__card.is-printable .union-online-registration-start__card-icon {
    background: #fff2e8;
    color: #d85f0b;
}

.union-online-registration-start__card-content {
    flex: 1 1 auto;
}

.union-online-registration-start__card h3 {
    margin: 0 0 16px;
    color: #26323d;
    font-size: 19px;
    line-height: 1.3;
}

.union-online-registration-start__card ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.union-online-registration-start__card li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 22px;
    color: #4f5b66;
    font-size: 14px;
    line-height: 1.5;
}

.union-online-registration-start__card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #16843e;
    font-weight: 700;
}

.union-online-registration-start__card-button {
    width: 100%;
    min-height: 48px;
    margin-top: auto;
}

.union-online-registration-start__card-button.is-secondary {
    border-color: #ff7518;
    background: #fff;
    color: #c95300;
}

.union-online-registration-start__card-button.is-secondary:hover,
.union-online-registration-start__card-button.is-secondary:focus {
    border-color: #d85f0b;
    background: #ff7518;
    color: #fff;
}

.union-online-registration-start__privacy {
    margin: 0 0 20px;
}

.union-online-registration-start__final-submit {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.union-online-registration-start__privacy .union-registration-form__privacy-note {
    margin: 0;
    color: var(--union-registration-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .union-online-registration-start__cards {
        grid-template-columns: 1fr;
    }

    .union-online-registration-start__card {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .union-online-registration-start__action-panel,
    .union-online-registration-start__card {
        transition: none;
    }
}

.union-registration__header.union-online-registration-start__header {
    text-align: center;
}

.union-registration__header.union-online-registration-start__header h2,
.union-registration__header.union-online-registration-start__header p {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ==========================================================================
   MEMBER / ONLINE APPLICATION FORM - FIRST MOCKUP VISUAL LANGUAGE
   ========================================================================== */

.union-registration-form[data-union-member-registration-form] {
    --union-registration-primary: #ff7518;
    --union-registration-primary-dark: #d95f00;
    --union-registration-text: #4a4a4a;
    --union-registration-muted: #6b6b6b;

    gap: 24px 28px;
    padding: 28px;
    border: 1px solid #e2e3e5;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
}

.union-registration-form[data-union-member-registration-form]
.union-registration-form__label {
    margin-bottom: 6px;
    color: #4a4a4a;
    font-weight: 700;
}

.union-registration-form[data-union-member-registration-form]
.union-registration-form__control {
    min-height: 44px;
    padding: 9px 11px !important;
    border: 1px solid #d9dde2 !important;
    border-bottom: 2px solid var(--union-registration-primary) !important;
    border-radius: 6px !important;
    background: #fafafa !important;
}

.union-registration-form[data-union-member-registration-form]
.union-registration-form__control:hover,
.union-registration-form[data-union-member-registration-form]
.union-registration-form__control:focus,
.union-registration-form[data-union-member-registration-form]
.union-registration-form__control:focus-visible {
    border: 1px solid #cfd4da !important;
    border-bottom: 2px solid var(--union-registration-primary-dark) !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(255, 117, 24, .08) !important;
}

.union-registration-form[data-union-member-registration-form]
.union-registration-form__agreements,
.union-registration-form[data-union-member-registration-form]
.union-registration-signature {
    border: 1px solid #e2e3e5;
    border-left: 4px solid var(--union-registration-primary);
    border-radius: 8px;
    background: #fafafa;
}

.union-registration-form[data-union-member-registration-form]
.union-registration-signature__canvas-wrap {
    border: 1px solid #d9dde2;
    border-bottom: 2px solid var(--union-registration-primary);
    border-radius: 6px;
    background: #fff;
}

.union-registration-form[data-union-member-registration-form]
.union-registration-form__checkbox input {
    accent-color: var(--union-registration-primary);
}

@media (max-width: 700px) {
    .union-registration-form[data-union-member-registration-form] {
        grid-template-columns: 1fr;
        padding: 20px 16px;
    }

    .union-registration-form[data-union-member-registration-form]
    .union-registration-form__field,
    .union-registration-form[data-union-member-registration-form]
    .union-registration-form__agreements,
    .union-registration-form[data-union-member-registration-form]
    .union-registration-signature,
    .union-registration-form[data-union-member-registration-form]
    .union-registration-form__response,
    .union-registration-form[data-union-member-registration-form]
    .union-registration-form__actions,
    .union-registration-form[data-union-member-registration-form]
    .union-registration-form__honeypot {
        grid-column: 1;
    }
}


/* ==========================================================================
   SHARED DATEPICKER / FLATPICKR SPACING
   ========================================================================== */

.flatpickr-calendar .flatpickr-innerContainer {
    margin-top: 12px;
}