/* ============================================================
   Career page overrides
   The base layout classes (.why-grid, .stat-card, .fac-image-grid,
   .section-heading, .resume-section, .upload-box, .form-container, ...)
   already live in custom.css. These rules are the page's inline <style>
   overrides extracted from the live Career page.
   ============================================================ */

/* Voices testimonial cards (kept for parity if re-enabled) */
.voices-section .testi-card {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid rgba(194, 16, 72, 0.14) !important;
    box-shadow: 0 22px 40px -30px rgba(12, 25, 62, 0.22);
}

.voices-section .testi-card p {
    color: #111111 !important;
}

.voices-section .testi-author {
    color: #c21048 !important;
}

/* Resume upload box on the dark resume section */
.resume-section .upload-box {
    background: #ffffff;
    color: #111111;
    border-color: #c21048;
}

.resume-section .upload-box p,
.resume-section .upload-icon {
    color: #111111;
}

.resume-section .upload-box:hover {
    border-color: #c21048;
    box-shadow: 0 20px 40px -30px rgba(194, 16, 72, 0.35);
}

/* Chromium closes a native <select> dropdown immediately when an ancestor
   has backdrop-filter / transform / filter. Drop them on the resume form
   container and its ancestors so the department dropdown stays selectable. */
.resume-section .form-container {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.06);
    transform: none !important;
    filter: none !important;
}

.resume-section,
.resume-section .form-container,
.resume-section form,
.resume-section .input-row {
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Department select: readable, easily clickable options */
.resume-section select.custom-input {
    background-color: #ffffff;
    color: #111111;
    border-color: #c21048;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c21048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 50px;
}

.resume-section select.custom-input:focus {
    background-color: #ffffff;
    color: #111111;
}

.resume-section select.custom-input option {
    background: #ffffff;
    color: #111111;
    padding: 12px 15px;
}

.resume-section select.custom-input option:checked,
.resume-section select.custom-input option:hover {
    background: #c21048;
    color: #ffffff;
}

/* Uploaded PNG icons (via item_icon_image) sized to match the FA glyphs */
.why-content-title .pi-icon-img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    margin-right: 6px;
}

.stat-card .pi-icon-img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    margin-bottom: 10px;
    display: inline-block;
}

.career-submit-btn {
    border: none;
    justify-content: center;
    min-width: 220px;
    margin: 10px auto 0;
}

.resume-section .captcha-row {
    display: block;
}

/* The shared .math-captcha label defaults to dark text; the resume form
   sits on a dark background, so make its label readable here. */
.resume-section .math-captcha-label {
    color: #ffffff;
}

.career-submit-btn span {
    width: 100%;
    text-align: center;
}

/* FAQ accordion (kept for parity if re-enabled) */
.faq-trigger {
    cursor: pointer;
}

.faq-content {
    display: none;
}

.faq-item.active .faq-content {
    display: block;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

/* ============================================================
   Career resume form - FormBuilder (career-enquiry) styling.
   The form is rendered by FormBuilder (Basic output) inside
   .form-container.career-fb-form on the dark resume section. These rules make
   the FB markup match the live dark design: 2-column grid, translucent inputs,
   dashed CV upload box, styled department select, centered green submit.
   FB markup: form.FormBuilder > .Inputfields > .Inputfield > .InputfieldHeader
   (label) + .InputfieldContent (field).
   ============================================================ */

/* Lift above any decorative overlay + reset FB list styling. */
.career-fb-form .FormBuilder {
    position: relative;
    z-index: 2;
}
.career-fb-form .FormBuilder .Inputfields,
.career-fb-form .FormBuilder .Inputfields .Inputfield {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Two-column grid (name+email, contact+department); upload/captcha/submit full. */
.career-fb-form .FormBuilder .Inputfields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.career-fb-form .FormBuilder .Inputfield {
    margin: 0;
}
/* Full-width rows: the CV upload (file field - covers FB's various file-field
   class names), captcha and submit. */
.career-fb-form .FormBuilder .InputfieldFile,
.career-fb-form .FormBuilder .InputfieldImage,
.career-fb-form .FormBuilder .InputfieldFormBuilderFile,
.career-fb-form .FormBuilder .Inputfield_chooseFile,
.career-fb-form .FormBuilder .Inputfield_cv,
.career-fb-form .FormBuilder .Inputfield_resume,
.career-fb-form .FormBuilder .fb-captcha-row,
.career-fb-form .FormBuilder .InputfieldSubmit {
    grid-column: 1 / -1;
}
/* Belt-and-suspenders: any Inputfield that CONTAINS a file input spans full. */
.career-fb-form .FormBuilder .Inputfields > .Inputfield:has(input[type="file"]) {
    grid-column: 1 / -1;
}

/* Hide field labels (live uses placeholders). */
.career-fb-form .FormBuilder .InputfieldHeader,
.career-fb-form .FormBuilder label.InputfieldHeader,
.career-fb-form .FormBuilder .Inputfield > label,
.career-fb-form .FormBuilder .Inputfield > .InputfieldHeader {
    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;
}

/* Hide FB's top error summary (per-field inline errors kept). */
.career-fb-form .FormBuilder .FormBuilderErrors,
.career-fb-form .FormBuilder .NoticeErrors,
.career-fb-form .FormBuilder ul.pw-errors {
    display: none !important;
}

/* Inputs + select: translucent white on the dark section (live .custom-input).
   FormBuilder's own framework CSS (.FormBuilder.InputfieldForm input...) loads
   AFTER this file and forces a light "#fbfbfb" background, so we use !important
   here to keep the dark-theme look (and keep the typed text visible/white). */
.career-fb-form .FormBuilder.InputfieldForm input[type="text"],
.career-fb-form .FormBuilder.InputfieldForm input[type="email"],
.career-fb-form .FormBuilder.InputfieldForm input[type="tel"],
.career-fb-form .FormBuilder.InputfieldForm input[type="number"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 18px 25px !important;
    border-radius: 15px !important;
    color: #ffffff !important;
    height: auto !important;
    font-size: 15px;
    outline: none;
    transition: 0.3s;
    font-family: "Poppins", sans-serif;
}
.career-fb-form .FormBuilder.InputfieldForm input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1;
}
.career-fb-form .FormBuilder.InputfieldForm input:focus {
    border-color: #c21048 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Department select: WHITE background with dark text + custom pink chevron
   (live shows this field white while the other inputs are dark/translucent). */
.career-fb-form .FormBuilder.InputfieldForm select {
    width: 100%;
    background-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 18px 25px !important;
    padding-right: 50px !important;
    border-radius: 15px !important;
    color: #111111 !important;
    height: auto !important;
    font-size: 15px;
    outline: none;
    transition: 0.3s;
    font-family: "Poppins", sans-serif;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c21048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
}
.career-fb-form .FormBuilder.InputfieldForm select:focus {
    border-color: #c21048 !important;
    background-color: #ffffff !important;
    color: #111111 !important;
}
.career-fb-form .FormBuilder.InputfieldForm select option {
    background: #ffffff;
    color: #111111;
}

/* CV upload box (built by formbuilder-captcha.js as .fb-upload-box). Matches
   the live dashed white upload box on the dark section. */

.career-fb-form .fb-upload-box:hover {
    border-color: #c21048;
    box-shadow: 0 20px 40px -30px rgba(194, 16, 72, 0.35);
}
.career-fb-form .fb-upload-box .upload-icon {
    color: #111111;
    font-size: 30px;
    margin-bottom: 10px;
    display: inline-block;
}
.career-fb-form .fb-upload-box .fb-upload-text {
    color: #111111;
    margin: 0;
    font-size: 15px;
}

/* Per-field inline error (readable on the dark bg). */
.career-fb-form .FormBuilder .input-error,
.career-fb-form .FormBuilder .InputfieldError {
    color: #ff8a80;
    font-size: 13px;
    margin-top: 6px;
    list-style: none;
    padding: 0;
}

/* Injected math captcha: label is white on the dark section. */
.career-fb-form .FormBuilder .fb-captcha-row {
    margin: 4px 0 18px;
}
.career-fb-form .FormBuilder .math-captcha-label {
    color: #ffffff;
}
.career-fb-form .fb-captcha-error {
    color: #ff8a80;
    font-size: 13px;
    margin-top: 6px;
}

/* --- Captcha widgets on the dark section (match the live look) --- */
/* Refresh button: FormBuilder's framework CSS styles all <button> grey
   (#626262); the refresh control is a <button>, so re-assert the live look =
   WHITE background with a PINK icon. */
.career-fb-form .FormBuilder.InputfieldForm .math-captcha-refresh {
    background: #ffffff !important;
    color: #c21048 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
}
.career-fb-form .FormBuilder.InputfieldForm .math-captcha-refresh:hover {
    background: #ffffff !important;
    border-color: #c21048 !important;
}
.career-fb-form .FormBuilder.InputfieldForm .math-captcha-refresh i {
    color: #c21048 !important;
}
/* Answer input: WHITE background with dark text (live look). */
.career-fb-form .FormBuilder.InputfieldForm .math-captcha-input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #111111 !important;
}
.career-fb-form .FormBuilder.InputfieldForm .math-captcha-input::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}
.career-fb-form .FormBuilder.InputfieldForm .math-captcha-input:focus {
    border-color: #c21048 !important;
    background: #ffffff !important;
    color: #111111 !important;
}

/* Submit -> centered green theme button (live .career-submit-btn). */
.career-fb-form .FormBuilder .InputfieldSubmit {
    text-align: center;
}
.career-fb-form .FormBuilder .InputfieldSubmit button,
.career-fb-form .FormBuilder button[type="submit"],
.career-fb-form .FormBuilder input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    margin: 10px auto 0;
    background: #498e22;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 34px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}
.career-fb-form .FormBuilder .InputfieldSubmit button:hover,
.career-fb-form .FormBuilder button[type="submit"]:hover,
.career-fb-form .FormBuilder input[type="submit"]:hover {
    background: #3c7a1c;
    transform: translateY(-1px);
}

/* Success message after redirect (?carsent=1) on the dark section. */
.career-fb-form .fb-success-message {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(73, 142, 34, 0.15);
    border: 1px solid rgba(73, 142, 34, 0.5);
    color: #d7f5c4;
    padding: 18px 22px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.6;
}
.career-fb-form .fb-success-message i {
    color: #7ed957;
    font-size: 20px;
}

@media (max-width: 767px) {
    .career-fb-form .FormBuilder .Inputfields {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}