/* =========================================
   WEBLODGE CAREERS MODAL — OVERLAY
========================================= */



/* =========================================
   MODAL CONTENT
========================================= */

.weblodge-career-modal-content::-webkit-scrollbar {
    width: 6px;
}

.weblodge-career-modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
}

/* =========================================
   MODAL HEADER
========================================= */

.weblodge-career-modal-badge-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    max-width: calc(100% - 55px);
    margin: 0;
}

.weblodge-career-modal-badge-wrap .wla-badge {
    max-width: 100%;
    white-space: nowrap;
}

/* =========================================
   MODAL CLOSE BUTTON
========================================= */

/* =========================================
   FORM CONTAINER
========================================= */

.weblodge-career-form-container {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* =========================================
   FORM INPUTS — CONTACT PAGE GLASS THEME
========================================= */



/* INPUT HEIGHTS */

.weblodge-career-modal-content #weblodge-career-name,
.weblodge-career-modal-content #weblodge-career-email,
.weblodge-career-modal-content #weblodge-career-jobtitle {
    width: 100%;
    padding: 0 18px;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff !important;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    height: 52px;
}

/* COVER LETTER */

.weblodge-career-modal-content #weblodge-career-cover {
    width: 100%;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff !important;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    min-height: 200px;
    height: auto;
    resize: none;
    overflow-y: hidden;
    padding: 15px 18px;
}

/* PLACEHOLDERS */

.weblodge-career-modal-content #weblodge-career-name::placeholder,
.weblodge-career-modal-content #weblodge-career-email::placeholder,
.weblodge-career-modal-content #weblodge-career-jobtitle::placeholder,
.weblodge-career-modal-content #weblodge-career-cover::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    opacity: 1;
}

/* FOCUS */

.weblodge-career-modal-content #weblodge-career-name:focus,
.weblodge-career-modal-content #weblodge-career-email:focus,
.weblodge-career-modal-content #weblodge-career-jobtitle:focus,
.weblodge-career-modal-content #weblodge-career-cover:focus {
    background: rgba(38, 198, 249, 0.18) !important;
    border: 1px solid rgba(38, 198, 249, 0.55) !important;
    box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
    color: #ffffff !important;
}

/* READONLY JOB TITLE */

.weblodge-career-modal-content #weblodge-career-jobtitle[readonly] {
    cursor: default;
}

/* TEXT SELECTION */

.weblodge-career-modal-content #weblodge-career-name::selection,
.weblodge-career-modal-content #weblodge-career-email::selection,
.weblodge-career-modal-content #weblodge-career-jobtitle::selection,
.weblodge-career-modal-content #weblodge-career-cover::selection {
    background: #ffffff !important;
    color: #170154 !important;
}

.weblodge-career-modal-content #weblodge-career-name::-moz-selection,
.weblodge-career-modal-content #weblodge-career-email::-moz-selection,
.weblodge-career-modal-content #weblodge-career-jobtitle::-moz-selection,
.weblodge-career-modal-content #weblodge-career-cover::-moz-selection {
    background: #ffffff !important;
    color: #170154 !important;
}

/* =========================================
   AUTOFILL FIX
========================================= */

.weblodge-career-modal-content #weblodge-career-name:-webkit-autofill,
.weblodge-career-modal-content #weblodge-career-name:-webkit-autofill:hover,
.weblodge-career-modal-content #weblodge-career-name:-webkit-autofill:focus,
.weblodge-career-modal-content #weblodge-career-email:-webkit-autofill,
.weblodge-career-modal-content #weblodge-career-email:-webkit-autofill:hover,
.weblodge-career-modal-content #weblodge-career-email:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* =========================================
   FORM ROWS
========================================= */

.weblodge-career-form-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.weblodge-career-form-row.weblodge-career-inline-fields {
    flex-direction: row;
    gap: 20px;
}

.weblodge-career-form-row.weblodge-career-inline-fields
.weblodge-career-field-wrapper {
    flex: 1;
    width: 50%;
}

.weblodge-career-form-row.weblodge-career-cover-row,
.weblodge-career-form-row.weblodge-career-resume-row {
gap: 0;
}

/* Error messages - controlled by CSS, same pattern as the
   Pricing modal's .error-message: hidden by default, all
   styling here. The JS only writes the text and adds or
   removes the .visible class (.center centres the resume
   message). No inline styles from JS. */
.weblodge-career-error-msg {
    display: none;
    width: 100%;
    margin: 6px 0 0;
    padding: 0 18px;
    box-sizing: border-box;
    color: #ff0000;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1;
    overflow-wrap: anywhere;
}

.weblodge-career-error-msg.visible {
    display: block;
}

.weblodge-career-error-msg.center {
    text-align: center;
}

.weblodge-career-field-wrapper {
    width: 100%;
}

/* =========================================
   RESUME UPLOAD — CONTACT PAGE COLORS
========================================= */

.weblodge-career-custom-file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.weblodge-career-resume-row
.weblodge-career-custom-file-upload
.weblodge-career-file-name,

.weblodge-career-resume-row
.weblodge-career-custom-file-upload div {
    text-align: center;
    min-height: 40px !important;
    align-items: center;
    display: inline-flex;
}

.weblodge-career-upload-btn {
    gap: 8px;
    border: 2px dashed rgba(38, 198, 249, 0.40);
    min-width: 185px;
    transition: background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        color 0.35s ease;
}

.weblodge-career-btn-content {
    min-height: 40px !important;
}

.weblodge-career-upload-btn .weblodge-career-btn-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.weblodge-career-upload-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: color 0.35s ease;
}

.weblodge-career-upload-icon path,
.weblodge-career-upload-icon polyline,
.weblodge-career-upload-icon line {
    stroke: #26c6f9 !important;
}

.weblodge-career-upload-btn:hover .weblodge-career-upload-icon polyline,
.weblodge-career-upload-btn:hover .weblodge-career-upload-icon line {
    stroke: #ffffff !important;
}

.weblodge-career-upload-btn .weblodge-career-btn-text {
    transition: color 0.35s ease;
    white-space: nowrap;
}

.weblodge-career-file-name {
    transition: color 0.35s ease;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 430px;
}

.weblodge-career-upload-btn:hover .weblodge-career-upload-icon path {
    stroke: #ffffff !important;
}

/* ALL UPLOAD CONTENT WHITE ON HOVER */

.weblodge-career-upload-btn:hover,
.weblodge-career-upload-btn:hover .weblodge-career-btn-content,
.weblodge-career-upload-btn:hover .weblodge-career-upload-icon,
.weblodge-career-upload-btn:hover .weblodge-career-btn-text,
.weblodge-career-upload-btn:hover .weblodge-career-file-name {
    stroke: #ffffff !important;
}


/* =========================================
   SUBMIT ROW SPACING
========================================= */

.weblodge-career-form-row.weblodge-career-submit-row {
    margin-bottom: 0;
}

/* =========================================
   CAREERS SUBMIT — GLOBAL BUTTON REUSE
========================================= */

.weblodge-career-submit-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Keep only the careers-specific validation state. */

#weblodge-career-jobForm .weblodge-career-submit-row > .wla-button {
    min-width: 185px;
    filter: blur(3px);
    pointer-events: none;
    cursor: default;
}

#weblodge-career-jobForm .weblodge-career-submit-row > .wla-button.valid {
    filter: none;
    pointer-events: auto;
    cursor: pointer;
}

/* =========================================
   CAREERS PROCESSING LOTTIE
========================================= */

.weblodge-career-processing-lottie {
    display: none;
    width: 100%;
    max-width: 300px;
    height: 100%;
    max-height: 103px;
    flex: 0 1 300px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.weblodge-career-processing-lottie lottie-player {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto;
}

/* =========================================
   FORM MESSAGE
========================================= */

#weblodge-career-formMessage {
    margin-top: 15px;
    text-align: center;
    color: #22c55e !important;
    overflow-wrap: anywhere;
    font-size: 16px !important;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

.weblodge-career-upload-icon {
        width: 17px;
        height: 17px;
    }

    .weblodge-career-modal-content #weblodge-career-name,
    .weblodge-career-modal-content #weblodge-career-email,
    .weblodge-career-modal-content #weblodge-career-jobtitle,
    .weblodge-career-modal-content #weblodge-career-cover {
        font-size: 15px;
    }

    .weblodge-career-error-msg {
        font-size: 13px !important;
    }

    .weblodge-career-form-row.weblodge-career-inline-fields {
    flex-direction: row;
    gap: 15px;
}

.weblodge-career-form-row {
    gap: 15px;
    margin-bottom: 15px;
}

#weblodge-career-formMessage {
    font-size: 15px !important;
}

}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
.weblodge-career-modal-badge-wrap .wla-badge {
        min-height: 36px;
        padding: 7px 12px;
    }

.weblodge-career-form-row.weblodge-career-inline-fields {
        flex-direction: column;
        gap: 10px;
    }

.weblodge-career-form-row.weblodge-career-inline-fields
    .weblodge-career-field-wrapper {
        width: 100%;
    }

.weblodge-career-form-row {
    gap: 10px;
    margin-bottom: 10px;
}

.weblodge-career-upload-icon {
        width: 16px;
        height: 16px;
    }

.weblodge-career-file-name {
        max-width: 430px;
    }

    .weblodge-career-modal-content #weblodge-career-name,
    .weblodge-career-modal-content #weblodge-career-email,
    .weblodge-career-modal-content #weblodge-career-jobtitle,
    .weblodge-career-modal-content #weblodge-career-cover {
        font-size: 14px;
    }

    .weblodge-career-error-msg {
        font-size: 12px !important;
    }

    #weblodge-career-formMessage {
    font-size: 14px !important;
}

}

/* =========================================
   CAREER MODAL — FULL VIEWPORT / SCROLL LOCK
   Final overrides for desktop, tablet and mobile.
========================================= */

html:has(.weblodge-career-modal-overlay[aria-hidden="false"]),
body.weblodge-career-modal-open {
    overscroll-behavior: none !important;
}

.weblodge-career-modal-overlay {
    justify-content: center;
    max-height: 100dvh !important;
    overscroll-behavior: none !important;
    touch-action: pan-y !important;
}

.weblodge-career-modal-content {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

@media (max-width: 767px) {

/* Border color on tap, same values as the global modal hover.
   The class is added by Career_job_listing.js on tap and
   removed when the modal closes. */
.weblodge-career-modal-content.weblodge-career-modal-tapped {
    border: 1px solid rgba(38, 198, 249, 0.55) !important;
    box-shadow: 0 0 25px rgba(38, 198, 249, 0.25);
}

.weblodge-career-modal-content {
    /* Round corners on mobile, same 18px radius as the global
       modal (was 0, which forced square corners) */
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-bottom: max(17px, env(safe-area-inset-bottom)) !important;
    /* Round corners on mobile, same 18px radius as the global
       modal (was 0, which forced square corners) */
    border-radius: 18px !important;
    margin: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* No visible scrollbar on mobile, same as the Pricing and
   Blog modals - touch scrolling still works. Desktop and
   tablet keep the styled 6px scrollbar above. */
.weblodge-career-modal-overlay {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.weblodge-career-modal-overlay::-webkit-scrollbar,
.weblodge-career-modal-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

}