/* AI-Genics — Careers page (post 56): only what Elementor Free cannot express. Scoped to marker classes / the form class.
   Sizes follow the site's responsive model: Figma px at exactly 1920 wide, scaled proportionally (vw) at 1025–1919 and ≥1921
   (--u = 1/1920 of the viewport width), plain px again at ≤1024 (--u: 1px). Fonts keep a readable floor like the Elementor styles. */

/* ── 1. Red inline accents in running text (paragraph class "ag-careers-accent") ─────────────────────────────────────────────
   <b> = "(View Details)" on the job cards (Bai Jamjuree SemiBold), <strong> = "Apply now" in the closing copy (DM Sans ExtraBold). */
.e-paragraph-base.ag-careers-accent b { font-weight: 600; color: var(--ag-red, #a2262d); }
.e-paragraph-base.ag-careers-accent strong { font-weight: 800; color: var(--ag-red, #a2262d); }

/* ── 2. Apply Now pop-up: "Key Responsibilities" scroll area (paragraph class "ag-careers-scroll", holds a <ul>) ───────────────
   Figma: bullets ≈ 3 px dots 10.5 px from the left edge, text indented 24 px; 4 px scrollbar thumb #657395 at 20 %, no track. */
.e-paragraph-base.ag-careers-scroll { overscroll-behavior: contain; }
.e-paragraph-base.ag-careers-scroll ul { margin: 0; padding: 0; list-style: none; }
.e-paragraph-base.ag-careers-scroll li { position: relative; margin: 0; padding: 0 0 0 1.5em; }
.e-paragraph-base.ag-careers-scroll li::before { content: ""; position: absolute; top: 0.672em; left: 0.656em; width: 0.1875em; height: 0.1875em; border-radius: 50%; background-color: currentColor; }
.ag-careers-scroll::-webkit-scrollbar { width: 4px; }
.ag-careers-scroll::-webkit-scrollbar-track { background: transparent; }
.ag-careers-scroll::-webkit-scrollbar-thumb { background-color: rgba(101, 115, 149, 0.2); border-radius: 20px; }
@supports not selector(::-webkit-scrollbar) {
	.ag-careers-scroll { scrollbar-width: thin; scrollbar-color: rgba(101, 115, 149, 0.2) transparent; }
}

/* ── 3. Apply Now form (Contact Form 7 "Careers – Apply Now form", <form class="… ag-cf7 ag-cf7-careers-apply">) ─────────────
   Figma B3: 428 px column, 60 px fields 10 px apart, cover letter 272 px, fill #b6d6dd at 10 %, no border, radius 10,
   text inset 23 px, DM Sans 20/29 #b6d6dd placeholders. Not designed (assumptions, kept minimal): typed text white, focus = 1 px
   ice ring, invalid = 1 px beige ring + beige tip inside the field, Browse hover/focus = beige, response banner below Submit. */
.ag-cf7-careers-apply { --u: calc(100vw / 1920); }
@media (max-width: 1024px) { .ag-cf7-careers-apply { --u: 1px; } }

.ag-cf7-careers-apply .ag-apply-fields { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
/* CF7's auto-<p> wraps the inline controls in <p> even in a one-line template: let them lay out as if the <p> were not there */
.ag-cf7-careers-apply .ag-apply-fields p { display: contents; }
.ag-cf7-careers-apply .wpcf7-form-control-wrap { display: block; position: relative; }
.ag-cf7-careers-apply .wpcf7-text,
.ag-cf7-careers-apply .wpcf7-email,
.ag-cf7-careers-apply .wpcf7-tel,
.ag-cf7-careers-apply .wpcf7-textarea {
	display: block; box-sizing: border-box; width: 100%; height: calc(60 * var(--u)); margin: 0; padding: 0 calc(23 * var(--u));
	border: 0; border-radius: calc(10 * var(--u)); background-color: rgba(182, 214, 221, 0.1); box-shadow: none; outline: none;
	color: #ffffff; caret-color: #ffffff; font-family: var(--ag-body, "DM Sans"), sans-serif; font-weight: 400;
	font-size: max(13px, calc(20 * var(--u))); line-height: 1.45; letter-spacing: -0.02em;
	-webkit-appearance: none; appearance: none; transition: background-color 0.2s, box-shadow 0.2s;
}
.ag-cf7-careers-apply .wpcf7-textarea { height: calc(272 * var(--u)); padding: calc(19 * var(--u)) calc(23 * var(--u)); resize: none; }
.ag-cf7-careers-apply .wpcf7-form-control::placeholder { color: #b6d6dd; opacity: 1; }
.ag-cf7-careers-apply .wpcf7-text:focus, .ag-cf7-careers-apply .wpcf7-email:focus,
.ag-cf7-careers-apply .wpcf7-tel:focus, .ag-cf7-careers-apply .wpcf7-textarea:focus { background-color: rgba(182, 214, 221, 0.16); box-shadow: inset 0 0 0 1px #b6d6dd; }
.ag-cf7-careers-apply .wpcf7-form-control.wpcf7-not-valid { box-shadow: inset 0 0 0 1px #edcdb8; }
.ag-cf7-careers-apply .wpcf7-not-valid-tip {
	position: absolute; top: 50%; right: calc(16 * var(--u)); max-width: 60%; transform: translateY(-50%); pointer-events: none;
	color: #edcdb8; font-family: var(--ag-body, "DM Sans"), sans-serif; font-weight: 500; font-size: max(11px, calc(13 * var(--u))); line-height: 1.3; text-align: end;
}
/* (2026-10-16) the pop-up has a fixed height, so the tip stays inside the field (up to 2 lines); while it is shown the right part
   of the field is kept free for it, so a typed address never runs under the message (the text scrolls inside the left part) */
.ag-cf7-careers-apply input.wpcf7-not-valid { padding-right: calc(60% + 26 * var(--u)); }
.ag-cf7-careers-apply [data-name="cover-letter"] .wpcf7-not-valid-tip { top: auto; bottom: calc(14 * var(--u)); transform: none; }

/* "Attach Resume*" + the file box = ONE <label class="ag-file-field"> wrapping the file input (no id/for: the page holds one copy
   of the form per job pop-up, so a click on the text always opens THIS form's picker). Text: DM Sans Bold 18/29, 3 px in,
   2 px above the file box */
.ag-cf7-careers-apply .ag-file-field { display: block; margin: 0; cursor: pointer; }
.ag-cf7-careers-apply .ag-file-label {
	display: block; margin: 0 0 calc(2 * var(--u)) calc(3 * var(--u)); color: #b6d6dd; cursor: pointer;
	font-family: var(--ag-body, "DM Sans"), sans-serif; font-weight: 700; font-size: max(13px, calc(18 * var(--u))); line-height: 1.6111; letter-spacing: -0.02em;
}
/* file control: the real <input type="file"> covers the whole box invisibly (any click opens the picker); the status text shows
   "No File Choosen", then the chosen file's name + size (script in mu-plugins/aigenics-forms.php — .ag-file-chosen, button
   "Change File") or a short note for a refused file (.ag-file-bad) */
.ag-cf7-careers-apply .ag-file { display: block; position: relative; height: calc(60 * var(--u)); border-radius: calc(10 * var(--u)); background-color: rgba(182, 214, 221, 0.1); transition: box-shadow 0.2s; }
.ag-cf7-careers-apply .ag-file .wpcf7-form-control-wrap { position: static; }
.ag-cf7-careers-apply .ag-file input[type="file"] { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.ag-cf7-careers-apply .ag-file-name {
	position: absolute; top: 50%; left: calc(23 * var(--u)); transform: translateY(-50%); white-space: nowrap; pointer-events: none; color: #b6d6dd;
	font-family: var(--ag-body, "DM Sans"), sans-serif; font-weight: 400; font-size: max(13px, calc(20 * var(--u))); line-height: 1.45; letter-spacing: -0.02em;
}
.ag-cf7-careers-apply .ag-file-btn {
	position: absolute; top: calc(8 * var(--u)); right: calc(7 * var(--u)); display: flex; align-items: center; justify-content: center;
	width: calc(142 * var(--u)); height: calc(43 * var(--u)); border-radius: calc(10 * var(--u)); background-color: #b6d6dd; pointer-events: none;
	color: #000000; font-family: var(--ag-body, "DM Sans"), sans-serif; font-weight: 600; font-size: max(12px, calc(17 * var(--u))); line-height: 1; letter-spacing: -0.02em;
	text-transform: uppercase; white-space: nowrap; transition: background-color 0.2s;
}
.ag-cf7-careers-apply .ag-file-name { max-width: calc(100% - 196 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.ag-cf7-careers-apply .ag-file-chosen .ag-file-name { color: #ffffff; }
.ag-cf7-careers-apply .ag-file-bad .ag-file-name { color: #ffb4b4; }
.ag-cf7-careers-apply .ag-file:hover .ag-file-btn,
.ag-cf7-careers-apply .ag-file:focus-within .ag-file-btn { background-color: #edcdb8; }
.ag-cf7-careers-apply .ag-file:has(input:focus-visible) { box-shadow: inset 0 0 0 1px #b6d6dd; }
.ag-cf7-careers-apply .ag-file:has(.wpcf7-not-valid) { box-shadow: inset 0 0 0 1px #edcdb8; }
/* phones: smaller type and Browse button so "No File Choosen" never runs under the button */
@media (max-width: 767px) {
	.ag-cf7-careers-apply .wpcf7-text, .ag-cf7-careers-apply .wpcf7-email, .ag-cf7-careers-apply .wpcf7-tel, .ag-cf7-careers-apply .wpcf7-textarea,
	.ag-cf7-careers-apply .ag-file-name { font-size: 17px; }
	.ag-cf7-careers-apply .wpcf7-text, .ag-cf7-careers-apply .wpcf7-email, .ag-cf7-careers-apply .wpcf7-tel { height: 52px; padding: 0 18px; }
	.ag-cf7-careers-apply .wpcf7-textarea { height: 200px; padding: 15px 18px; }
	.ag-cf7-careers-apply .ag-file { height: 52px; }
	.ag-cf7-careers-apply .ag-file-name { left: 18px; max-width: calc(100% - 150px); overflow: hidden; text-overflow: ellipsis; }
	.ag-cf7-careers-apply .ag-file-btn { top: 7px; right: 7px; width: 116px; height: 38px; font-size: 14px; }
	.ag-cf7-careers-apply .ag-file-label { font-size: 16px; }
}
.ag-cf7-careers-apply .ag-file .wpcf7-not-valid-tip { top: calc(100% + 5px); right: auto; left: calc(3 * var(--u)); max-width: none; transform: none; text-align: start; }

/* Submit Now (Figma "Submit Now5"): 428 × 70, radius 15, #a2262d + inset shadow, Bai Jamjuree Bold 24/22 −0.5 % upper white, 20 px
   chevron 5 px after the centred label; hover (instant) = beige, black label + chevron, shadow unchanged */
.ag-cf7-careers-apply .ag-apply-actions { position: relative; margin-top: calc(21 * var(--u)); }
.ag-cf7-careers-apply .ag-apply-submit {
	display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); box-sizing: border-box; width: 100%; height: calc(70 * var(--u));
	margin: 0; padding: 0 calc(30 * var(--u)); border: 0; border-radius: calc(15 * var(--u)); background-color: #a2262d;
	box-shadow: inset 3px 0 20px 6px rgba(0, 0, 0, 0.2); color: #ffffff; cursor: pointer; transition: none; /* Figma: instant; overrides Hello's button transition */
	font-family: var(--ag-heading, "Bai Jamjuree"), sans-serif; font-weight: 700; font-size: max(14px, calc(24 * var(--u))); line-height: 0.9167; letter-spacing: -0.005em; text-transform: uppercase;
}
.ag-cf7-careers-apply .ag-apply-submit::after {
	content: ""; flex-shrink: 0; width: max(14px, calc(20 * var(--u))); height: max(14px, calc(20 * var(--u)));
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ag-cf7-careers-apply .ag-apply-submit:hover,
.ag-cf7-careers-apply .ag-apply-submit:focus-visible { background-color: #edcdb8; color: #000000; }
.ag-cf7-careers-apply .ag-apply-submit:hover::after,
.ag-cf7-careers-apply .ag-apply-submit:focus-visible::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ag-cf7-careers-apply .ag-apply-submit:focus-visible { outline: 2px solid #edcdb8; outline-offset: 3px; }
.ag-cf7-careers-apply.submitting .ag-apply-submit { cursor: progress; opacity: 0.85; }
.ag-cf7-careers-apply .wpcf7-spinner { position: absolute; top: 50%; right: calc(22 * var(--u)); margin: -12px 0 0; }

/* CF7 response banner (after a submit) */
.wpcf7 form.ag-cf7-careers-apply .wpcf7-response-output {
	margin: calc(16 * var(--u)) 0 0; padding: 10px 16px; border: 1px solid #b6d6dd; border-radius: calc(10 * var(--u)); color: #ffffff; text-align: center;
	font-family: var(--ag-body, "DM Sans"), sans-serif; font-weight: 500; font-size: 14px; line-height: 1.4;
}
.wpcf7 form.ag-cf7-careers-apply.invalid .wpcf7-response-output,
.wpcf7 form.ag-cf7-careers-apply.unaccepted .wpcf7-response-output,
.wpcf7 form.ag-cf7-careers-apply.failed .wpcf7-response-output,
.wpcf7 form.ag-cf7-careers-apply.aborted .wpcf7-response-output,
.wpcf7 form.ag-cf7-careers-apply.spam .wpcf7-response-output { border-color: #edcdb8; color: #edcdb8; }

/* phones: a slightly lower Submit (declared after the base Submit rule so it wins) */
@media (max-width: 767px) { .ag-cf7-careers-apply .ag-apply-submit { height: 60px; font-size: 20px; } }

/* (2026-10-19) error messages directly UNDER the field (not inside it), like Contact / Request a Demo: one short line; the
   form gets a little taller only while errors are shown */
.ag-cf7-careers-apply .wpcf7-form-control-wrap { position: relative; display: block; }
.ag-cf7-careers-apply .wpcf7-not-valid-tip,
.ag-cf7-careers-apply [data-name="cover-letter"] .wpcf7-not-valid-tip {
	position: static; display: block; transform: none; top: auto; right: auto; bottom: auto; left: auto; max-width: none;
	margin: calc(3 * var(--u)) 0 calc(2 * var(--u)); padding: 0 calc(4 * var(--u)); text-align: start;
	font-size: max(12px, calc(13 * var(--u))); line-height: 1.25; color: #ffb4b4; pointer-events: auto;
}
.ag-cf7-careers-apply input.wpcf7-not-valid { padding-right: calc(23 * var(--u)); }