/* ==========================================================================
   Become a Translator page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40001286:70083 "Become a Translator"). Only Step 1 ("About You") has
   a Figma design in that file — Step 2 ("Motivation AI & Dubbing") and
   Step 3 ("Subtitling Basics") reuse the same tokens/components so the
   3-step flow reads as one product. Structural pattern (hero, tabs, card,
   progress bar, glass buttons) follows nominate-revamp.css, which already
   implements the same Figma design language; reuses the global --hr-*
   tokens declared in layout-revamp.css.
   ========================================================================== */
.translate-revamp .hr-accent { color: var(--hr-yellow-500); }

/* ---------- Hero ---------- */
.translate-revamp {
    position: relative;
    background: var(--hr-cream-400);
}
/* Figma doesn't fade the hero photo to cream within its own visible 556px —
   sampling the actual design pixel-by-pixel shows it stays fully pink/mauve
   all the way to the hero's own bottom edge, and only resolves to solid
   cream ~350-400px further down, well behind the tabs and bleeding into
   roughly the top fifth of the card. That extension is one continuous
   gradient with .trn-hero's own background, not a visually separate
   element — splitting it into two elements/two gradient definitions (even
   with matching endpoint colors) reads as two stacked sections with a seam,
   because each restarts its own shading from scratch. So the extension is
   just extra bottom padding on .trn-hero itself, with ONE gradient spanning
   the whole box; .trn-form-wrap is then pulled up over the tail of it via
   negative margin to get the "bleeds behind the tabs/card" look. */
.trn-hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 45px 160px 482px;
    margin-bottom: -450px;
    background-image:
        linear-gradient(
            to bottom,
            rgba(192, 154, 177, 1) 0%,
            rgba(209, 180, 193, 1) 19%,
            rgba(214, 189, 199, 1) 29%,
            rgba(219, 194, 202, 1) 39%,
            rgba(226, 206, 210, 1) 49%,
            rgba(233, 217, 217, 1) 60%,
            rgba(237, 225, 221, 1) 70%,
            rgba(241, 236, 226, 1) 80%,
            rgba(247, 243, 231, 1) 90%,
            var(--hr-cream-400) 100%
        ),
        url('../images/translate-revamp/hero-wash.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: bottom center, top center;
    background-size: 0% 336px, 1920px 915px;
}
/* Two bottom-corner wedges, exported straight from this page's own Figma
   frame (not the shared innerpage-hero/ set the other heroes use - this
   page's are a different shape/size). height:calc(100% - 482px) rather than
   inset:0 because .trn-hero's box runs 482px taller than its visible band
   (that's the fixed-height gradient tail .trn-hero-rule sits above, see the
   big comment on .trn-hero) - bottom:0 against the FULL box drops these into
   the solid-cream tail where they're the same color as what's behind them. */
.trn-hero-decor { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 482px); overflow: hidden; pointer-events: none; z-index: 0; }
.trn-hero-pattern {
    position: absolute;
    bottom: 0;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.trn-hero-pattern-start {
    inset-inline-start: 0;
    width: 305px;
    height: 237px;
    background-image: url("../images/translate-revamp/hero-pattern-left.svg");
}
.trn-hero-pattern-end {
    inset-inline-end: 0;
    width: 709px;
    height: 329px;
    background-image: url("../images/translate-revamp/hero-pattern-right.svg");
}
[dir="rtl"] .trn-hero-pattern { transform: scaleX(-1); }
@media (max-width: 768px) {
    .trn-hero-pattern { display: none; }
}
.trn-hero-inner { position: relative; z-index: 1; max-width: 1600px; width: 100%; margin-inline: auto; }
.trn-hero-top {
    display: flex;
    align-items: center;
    gap: 100px;
    padding-top: 200px;
    padding-bottom: 40px;
}
.trn-hero-title {
    flex: 0 0 auto;
    max-width: 640px;
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    color: var(--hr-cream-500);
    margin: 0;
}
.trn-hero-side { flex: 1 1 0; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.trn-hero-side p { font-size: 24px; line-height: 32px; color: var(--hr-cream-600, #e3e1d4); margin: 0; max-width: none; }
.trn-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* Row spacing matches .agd-hero-head/.agd-breadcrumb-row (agenda-detail-revamp.css)
   - the other hero that carries a title+copy block above its breadcrumb row:
   40px under the block, 24px above and below the trail. flex-wrap so the
   diamond cluster drops below the trail rather than squeezing it, matching
   .vid-breadcrumb-row. */
.trn-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; position: relative; z-index: 1; }
/* Type and gap scale down with the viewport instead of holding 20px/12px,
   copied from .vid-breadcrumb (video-revamp.css): both clamps top out at
   these desktop values, so nothing changes above ~440px, and keep a
   three-crumb trail on one line down to that width instead of wrapping. */
.trn-breadcrumb { display: flex; align-items: center; gap: clamp(8px, 2.2vw, 22px); row-gap: 4px; flex-wrap: wrap; font-size: clamp(13px, calc(5vw - 3px), 20px); line-height: 28px; color: var(--hr-cream-500); text-transform: uppercase; }
/* Full strength per Figma's Breadcrumb component - only font weight marks the
   current crumb, there is no resting opacity on the others. Full note in
   press-releases-revamp.css. */
.trn-breadcrumb a,
.trn-breadcrumb span:not(.trn-breadcrumb-sep) { opacity: 1; }
.trn-breadcrumb a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.trn-breadcrumb a:hover { opacity: 1; color: inherit; text-decoration: underline; }
.trn-breadcrumb-current { font-weight: 700; opacity: 1 !important; }
.trn-breadcrumb-sep { width: 1px; height: 16px; background: rgba(249, 247, 234, .5); }
/* Copied from .vid-hero-divider (video-revamp.css): 300px wide, 20px diamonds
   spaced by their own 4.142px margin-inline rather than a gap/sibling rule,
   and the line's margin-inline-start dropped to 0, since the last diamond's
   own trailing margin already lands it on the rotated tip. */
.trn-hero-divider { display: none; }
@media (min-width: 1200px) {
    .trn-hero-divider {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 300px;
        margin-inline-end: calc(-160px - max(0px, (100vw - 1920px) / 2));
    }
    .trn-hero-divider .trn-diamond { width: 20px; height: 20px; margin-inline: 4.142px; transform: rotate(45deg); background: var(--hr-cream-500); flex-shrink: 0; }
    .trn-hero-divider-line { flex: 1 1 auto; height: 1px; background: rgba(249, 247, 234, .5); margin-inline-start: 0; }
}
/* Figma draws this rule at the full 1920px canvas width, edge-to-edge —
   wider than the 1600px content column above it — so it must cancel out
   .trn-hero's own side padding rather than inherit it. */
.trn-hero-rule { height: 1px; background: rgba(249, 247, 234, .35); margin-inline: -160px; }

/* ---------- Tabs + form card ---------- */
/* 88px on top of the 32px the hero's own -450px/482px pull-up mismatch
   already leaves (see the big comment on .trn-hero) - 120px total from the
   hero's rule down to the tab row, per spec. Padding here rather than
   touching that margin/gradient math, which is tuned to a specific look. */
.trn-form-wrap { position: relative; z-index: 1; padding: 88px 160px 100px; }
.trn-form-inner { max-width: 1600px; margin-inline: auto; }
/* 40px, matching the Figma "Form" node's own wrapping frame (px-[40px]) -
   this carried 8px, leaving the tab row's start noticeably tighter than the
   card content's 80px below it. */
.trn-tabs { display: flex; padding-inline-start: 40px; }
/* Padding and the glossy inset highlight both taken from the Figma node's own
   "Button" instance (px-24/py-16, shadow: inset 0 4px 6.1px rgba(255,255,255,.23))
   - the tab used to carry 32px horizontal and no highlight at all. */
.trn-tab {
    position: relative;
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 16px 24px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--hr-brown-300);
    background: #fdfdf8;
    box-shadow: inset 0 4px 6.1px rgba(255, 255, 255, .23);
    /* Re-derived from the Figma export (Frame 2147239317.svg), which is NOT
       a symmetric parallelogram like this used to cut: the LEFT edge is
       dead straight (its "wedge" is a plain uncut 24x56 rect, only
       decorated with a diagonal crease - see ::before below), and only the
       RIGHT edge is actually notched, missing its top-right corner, which
       is what lets the next tab peek out from underneath and gives the row
       its cascading-fan look. */
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0 100%);
    margin-inline-start: -12px;
    transition: background-color .2s ease, color .2s ease;
    white-space: nowrap;
}
.trn-tab:first-child { margin-inline-start: 0; }
.trn-tab.is-active {
    background: var(--hr-yellow-500);
    color: var(--hr-cream-500);
    font-weight: 700;
    z-index: 1;
}
/* Steps already passed (index < the active one) - Figma's "Finished" variant
   of this same Button component (blue/blue-400 + cream/cream-500 bold),
   distinct from the current step's own yellow .is-active. */
.trn-tab.is-completed {
    background: var(--hr-blue-400);
    color: var(--hr-cream-500);
    font-weight: 700;
}
/* Stacking follows tab order, not active state: tab 1 always sits above tab
   2, which always sits above tab 3, so each one's straight left edge always
   covers the previous tab's notched right corner - regardless of which step
   is active. Placed after .is-active, same specificity, to win the cascade
   whichever tab that class lands on. */
.trn-tab:nth-child(1) { z-index: 3; }
.trn-tab:nth-child(2) { z-index: 2; }
.trn-tab:nth-child(3) { z-index: 1; }
/* Per-tab min-width from Figma - "About you" is exactly 173px there (its
   label plus padding never needs more), while the two longer labels get a
   fixed floor instead of shrinking to their own content width, so the row
   doesn't visually wobble narrower than the design at typical viewport
   widths. min, not a fixed width: still free to grow past this if a
   translation ever runs long. */
.trn-tab:nth-child(1) { min-width: 173px; }
.trn-tab:nth-child(2) { min-width: 262px; }
.trn-tab:nth-child(3) { min-width: 211px; }
/* Every tab's left 24px is a plain, uncut rect in Figma (unlike the right
   edge above) - its "wedge" look comes purely from a diagonal overlay
   painted on top of whichever background the tab has, reading as a paper
   fold across the lower-left triangle. Painted as an overlay rather than
   baking the whole tab (background + text) into one image: the label is
   real, translatable text of variable width per step, which a flattened
   Figma export can't support - only the fixed 24px fold geometry is
   reusable across tabs.
   Left, not inset-inline-start: the base (LTR) geometry is pinned to a
   physical edge, not a logical one - the [dir="rtl"] override below flips
   it to the opposite physical edge instead of relying on logical
   properties to do it automatically. */
.trn-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: rgba(0, 0, 0, .10);
    mix-blend-mode: multiply;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    pointer-events: none;
}
/* RTL: with dir="rtl" flexbox lays the same DOM order out right-to-left
   (tab 1 "About you" ends up rightmost instead of leftmost), so the cascade
   needs mirroring to keep working - each tab's still-straight edge has to
   land where the *next* tab in DOM order now actually sits (its left, not
   its right), and the wedge fold has to sit on the newly-outer right edge
   instead of the old-outer left edge. */
[dir="rtl"] .trn-tab { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%); }
[dir="rtl"] .trn-tab::before { left: auto; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.trn-card {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .7);
    border-radius: 8px;
    padding: 80px 0;
}
/* Figma's "Intersect" watermark (274x160, opacity already baked into its own
   path), pinned to the step card's own top-right corner rather than the
   header row inside it - .trn-card's overflow:hidden crops it, and being
   this element's first paint (::before) keeps it behind the header/body
   content that follows in the DOM. */
.trn-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 274px;
    height: 160px;
    background: url('../images/translate-revamp/card-header-pattern.svg?v=2') no-repeat top right / 100% 100%;
    pointer-events: none;
}
[dir="rtl"] .trn-card::before { right: auto; left: 0; transform: scaleX(-1); }
.trn-card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 80px 24px;
}
/* Figma: a faint 10%-opacity arrow/diamond watermark bleeds up from the
   header's bottom-right corner, behind the step title and progress bar
   (node I40001286:70087;40000534:31764). It's taller than the header
   itself and relies on .trn-card's overflow:hidden (Figma's overflow-clip
   on the same ancestor) to cut it off cleanly at the card's top edge. */
/* Swapped for the actual "Intersect" node from Figma (273.302x160,
   preserveAspectRatio:none, rotate-180 in the design, opacity already baked
   into its own path) in place of the old 362x450 approximation this cropped
   against a shorter window - stretched to fit its box now instead of
   cropped, since that's what the real asset's own aspect ratio expects. */
.trn-card-title { font-size: 48px; line-height: 56px; font-weight: 700; color: var(--hr-brown-500); margin: 0; }
.trn-card-title .hr-accent { color: var(--hr-yellow-500); }
.trn-step-indicator { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.trn-progress-track { width: 300px; max-width: 40vw; height: 8px; border-radius: 24px; background: var(--hr-cream-500); overflow: hidden; }
.trn-progress-fill { height: 100%; border-radius: 24px; background: var(--hr-purple-500); transition: width .2s ease; }
.trn-step-label { font-size: 20px; line-height: 28px; color: var(--hr-brown-400, #49473d); white-space: nowrap; }

.trn-card-body { padding: 48px 80px 0; }
.trn-card-body > * + * { margin-top: 48px; }
.trn-section-lead { font-size: 20px; line-height: 28px; color: var(--hr-brown-400, #49473d); margin: 0 0 24px; }
/* No margin-top here on purpose — .trn-card-body > * + * already gives every
   top-level child (this included) a 48px margin-top; a same-specificity
   `margin: 0` here would win by source order and silently cancel it,
   crushing the gap above every divider on the page. */
.trn-divider { height: 0; border: 0; border-top: 1px solid rgba(27, 25, 12, .08); margin-bottom: 0; }
/* Section 3's per-group dividers need an exact 40px gap on both sides,
   overriding the card's own 48px .trn-card-body > * + * rule - !important on
   both declarations since that rule and this one share the same
   specificity, and the group directly after the divider must have its
   default 48px top margin zeroed out too, or the two margins would collapse
   to whichever is larger (48px) instead of the divider's own 40px. */
.trn-divider-spaced { margin: 40px 0 !important; }
.trn-divider-spaced + * { margin-top: 0 !important; }

/* Fields */
.trn-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.trn-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trn-field-full { grid-column: 1 / -1; }
.trn-field label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-400, #49473d);
}
.trn-req-mark { color: #ee3b33; }
.trn-input,
.trn-select,
.trn-textarea {
    width: 100%;
    background: rgba(236, 230, 211, .4);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-900, #0b0b05);
    transition: border-color .2s ease;
}
.trn-input:focus,
.trn-select:focus,
.trn-textarea:focus { outline: none; border-color: var(--hr-yellow-500); }
.trn-input::placeholder,
.trn-textarea::placeholder { color: var(--hr-brown-300); opacity: .7; }
/* app.css has a sitewide, unscoped `input:-webkit-autofill` rule that paints
   a solid green inset background behind autofilled text on EVERY input —
   same fix as .nom-input in nominate-revamp.css. */
.trn-input:-webkit-autofill,
.trn-input:-webkit-autofill:hover,
.trn-input:-webkit-autofill:focus,
.trn-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--hr-brown-900) !important;
    box-shadow: 0 0 0 1000px rgba(236, 230, 211, .4) inset !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(236, 230, 211, .4) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}
.trn-textarea { min-height: 140px; resize: vertical; }
.trn-select {
    appearance: none;
    background-image: url("../images/press-releases-revamp/icon-chevron-down.svg");
    background-repeat: no-repeat;
    background-size: 11px;
    background-position: right 16px center;
    padding-inline-end: 40px;
    cursor: pointer;
}
[dir="rtl"] .trn-select { background-position: left 16px center; padding-inline-end: 16px; padding-inline-start: 40px; }
/* The shared select2 skin (select2-revamp.css) is a 61px pill everywhere
   else on the site - this page's own fields are 8px rounded rects
   (.trn-input/.trn-select above), so its select2-upgraded fields need their
   own radius to actually look like the rest of this form. Scoped to
   .translate-revamp so the shared component's pill shape is untouched on
   every other page that uses it. */
/* Height/padding/border match .trn-input's own box model exactly (16px
   uniform padding, no explicit height - line-height + padding IS the
   height) rather than a guessed pixel value, plus the same transparent
   normal border, so it comes out identically tall next to it. Scoped the
   same way as the radius above. */
.translate-revamp .ba-select2-container.select2-container .select2-selection {
    height: auto;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 8px;
}
.translate-revamp .ba-select2-container.select2-container--focus .select2-selection,
.translate-revamp .ba-select2-container.select2-container--open .select2-selection {
    border-color: var(--hr-yellow-500);
}
/* No .translate-revamp prefix here - select2 reparents the open dropdown
   panel to <body>, outside this page's own wrapper, so a scoped selector
   would never match it. This file only loads on this page though, so the
   bare selector is still effectively scoped to it in practice - same
   reasoning as the #ui-datepicker-div rule above. */
.ba-select2-dropdown.select2-dropdown { border-radius: 8px; }
.trn-date-field { position: relative; }
.trn-date-field .trn-input { padding-inline-end: 44px; cursor: pointer; }
/* jQuery UI datepicker (showOn:"button", buttonImageOnly:true) inserts this
   <img> as a sibling right after the input — position it as the field's
   trailing icon instead of its default inline placement. */
.trn-date-field .ui-datepicker-trigger {
    position: absolute;
    /* app.css has a sitewide, unscoped .ui-datepicker-trigger rule pinning
       every instance to inset-inline-start:100px/top:7px (a leftover from
       whatever form first needed this plugin) - inset-inline-start:auto
       cancels it out, since a start AND end value both set at once
       over-constrains the box and one silently wins regardless of this
       rule's own higher specificity. */
    inset-inline-start: auto;
    inset-inline-end: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
/* jQuery UI datepicker popup (#ui-datepicker-div) - jQuery UI appends it
   directly to <body>, not inside .trn-date-field or .translate-revamp, so it
   can't be themed with a scoped selector; this stylesheet only loads on this
   page though (@push('styles')), so plain .ui-datepicker rules are already
   page-scoped in practice. The base jquery-ui.min.css theme
   (head.blade.php) is what's being overridden here - same cream field fill,
   8px/16px radii and brown/yellow palette as the rest of this form, instead
   of its default grey Trebuchet look. #ui-datepicker-div on the outer rule
   only, to out-specificity that theme's own .ui-widget-content background
   regardless of stylesheet load order. */
#ui-datepicker-div.ui-datepicker {
    /* .trn-form-wrap and the tab strip both sit at z-index 1-3 - without
       this the popup can end up rendering behind them (still "open", just
       invisible/unclickable underneath other content). jQuery UI's own
       default is a plain positive int with nothing this page's stacking
       contexts are guaranteed to lose to. */
    z-index: 9999 !important;
    width: 280px;
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(177, 175, 165, .5);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(11, 11, 5, .12);
    font-family: 'Almarai', sans-serif;
}
.ui-datepicker .ui-datepicker-header { background: none; border: 0; padding: 0 0 12px; position: relative; }
.ui-datepicker .ui-datepicker-title { text-align: center; font-size: 16px; font-weight: 700; color: var(--hr-brown-900, #0b0b05); }
.ui-datepicker .ui-datepicker-title select {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--hr-brown-900, #0b0b05);
    background: rgba(236, 230, 211, .4);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 6px;
    margin: 0 2px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(236, 230, 211, .4);
}
.ui-datepicker .ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-next { right: 0; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { background: var(--hr-yellow-500); }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { display: none; }
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-inline-start: 2px solid var(--hr-brown-900, #0b0b05);
    border-bottom: 2px solid var(--hr-brown-900, #0b0b05);
}
.ui-datepicker .ui-datepicker-prev::before { transform: rotate(45deg); }
.ui-datepicker .ui-datepicker-next::before { transform: rotate(-135deg); }
.ui-datepicker table { width: 100%; border-collapse: collapse; margin: 8px 0 0; }
.ui-datepicker th {
    font-size: 12px;
    font-weight: 700;
    color: var(--hr-brown-300, #66655c);
    text-transform: uppercase;
    padding: 6px 0;
    text-align: center;
}
.ui-datepicker td { padding: 2px; text-align: center; border: 0; }
.ui-datepicker td a,
.ui-datepicker td span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 14px;
    color: var(--hr-brown-900, #0b0b05);
    text-decoration: none;
    background: none;
    border: 0;
    transition: background-color .15s ease;
}
.ui-datepicker td .ui-state-default:hover { background: rgba(236, 230, 211, .6); }
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-active:hover {
    background: var(--hr-yellow-500);
    color: #fff;
    font-weight: 700;
}
.ui-datepicker td.ui-datepicker-today .ui-state-default { border: 1.5px solid var(--hr-yellow-500); }
.ui-datepicker-buttonpane { display: none; }
/* intl-tel-input plugin markup mounted on #phone */
.translate-revamp .iti { width: 100%; }
.translate-revamp .iti input.trn-input {
    width: 100%;
    padding-inline-start: 130px !important;
}

/* Pill toggle group (Yes/No, topic interests) — checkbox/radio hidden,
   sibling label styled as an outlined pill; :has() mirrors the ":checked"
   trick nom-radio-option already uses in nominate-revamp.css. */
.trn-pill-group { display: flex; flex-wrap: wrap; gap: 16px; }
.trn-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 61px;
    background: rgba(236, 230, 211, .4);
    border: 1px solid rgba(177, 175, 165, .5);
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-500);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.trn-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trn-pill:has(input:checked) {
    background: rgba(217, 133, 0, .12);
    border-color: var(--hr-yellow-500);
    font-weight: 700;
}
.trn-yesno-group .trn-pill { flex: 0 0 auto; min-width: 88px; text-align: center; }

/* Language skills */
.trn-lang-table { display: flex; flex-direction: column; gap: 16px; width: 100%; }
/* Rows are cloned by JS into #languageSkillsTable, a plain wrapper div one
   level below .trn-lang-table — its own gap never reaches them, so the
   rows need their own stacking gap here or they render back-to-back. */
#languageSkillsTable { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.trn-lang-head { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 56px; gap: 16px; }
.trn-lang-head span { font-size: 16px; line-height: 24px; color: var(--hr-brown-400, #49473d); }
.trn-lang-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 56px; gap: 16px; align-items: start; }
.trn-lang-row .trn-input,
.trn-lang-row .trn-select { height: 56px; }
/* app.css ships a sitewide `.language-input { background: transparent
   !important; border: none !important; color: white !important; }` for an
   unrelated (dark-background) language picker. This repeater reuses
   `.language-input` purely as a JS hook, but the class collision means that
   rule was silently clobbering this field's normal .trn-input look - only
   invisible while it was select2-upgraded (the rule hit the hidden native
   <select>, not the visible select2 proxy). Outrank it with an extra-class
   selector plus !important now that this is a plain, directly visible input. */
.translate-revamp .trn-lang-row .trn-input.language-input {
    background: rgba(236, 230, 211, .4) !important;
    border: 1px solid transparent !important;
    color: var(--hr-brown-900, #0b0b05) !important;
}
.translate-revamp .trn-lang-row .trn-input.language-input:focus { border-color: var(--hr-yellow-500) !important; }
.trn-lang-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 16px;
    border-radius: 8px;
    background: rgba(236, 230, 211, .4);
    cursor: pointer;
    font-size: 16px;
    color: var(--hr-brown-900);
    user-select: none;
}
.trn-lang-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trn-lang-toggle .trn-lang-toggle-text::after { content: attr(data-off); }
.trn-lang-toggle:has(input:checked) .trn-lang-toggle-text::after { content: attr(data-on); }
.trn-lang-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: var(--hr-red-50, #fdebeb);
    color: #ee3b33;
    font-size: 24px;
    cursor: pointer;
    border: 0;
    flex-shrink: 0;
}
/* Card-only pieces of the language repeater (Figma's phone variant) - the
   title, the divider under it, and a label per field. Hidden above the
   phone breakpoint, where the desktop/tablet grid layout and the shared
   .trn-lang-head row still provide the same information. */
.trn-lang-card-title,
.trn-lang-card-divider,
.trn-lang-field-label { display: none; }
/* display:contents so .trn-lang-row's existing desktop/tablet grid
   (grid-template-columns treating its direct children as cells) sees
   straight through this wrapper to the label (hidden above) and select
   inside it, exactly as if they were direct children with no wrapper at
   all - only the phone breakpoint turns this into a real grid item. */
.trn-lang-field { display: contents; }
.trn-lang-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 24px;
    padding: 16px 24px 16px 16px;
    border-radius: 61px;
    border: 1.5px solid transparent;
    background: rgba(255, 255, 255, .2);
    color: var(--hr-brown-900);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
}
.trn-lang-add-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../images/translate-revamp/icon-add.svg') no-repeat center / contain;
    mask: url('../images/translate-revamp/icon-add.svg') no-repeat center / contain;
}
[dir="rtl"] .trn-lang-add { padding: 16px 16px 16px 24px; }
.trn-lang-add:hover { background: rgba(255, 255, 255, .3); }

/* Actions */
.trn-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0 80px; margin-top: 48px; }
/* Figma fixes Previous/Next at 148px each so they render as a matched pair;
   "Submit Application" (step 3) has no Figma spec and is a longer label, so
   it gets a floor rather than a fixed width to avoid clipping/wrapping. */
.trn-actions .trn-btn { min-width: 148px; }
.trn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 61px;
    font-size: 16px;
    font-weight: 700;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease;
    position: relative;
    overflow: hidden;
}
.trn-btn:hover { transform: translateY(-2px); text-decoration: none; }
.trn-btn-ghost {
    background: rgba(255, 255, 255, .2);
    border-color: transparent;
    color: var(--hr-brown-900);
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
}
.trn-btn-ghost:hover { color: var(--hr-brown-900); background: rgba(255, 255, 255, .3); }
.trn-btn-primary {
    background: var(--hr-yellow-500);
    color: #fff;
    box-shadow:
        inset 0 4px 6.1px rgba(255, 255, 255, .23),
        7px 63px 18px rgba(0, 0, 0, .02),
        2px 23px 14px rgba(0, 0, 0, .02),
        1px 10px 10px rgba(0, 0, 0, .03),
        0 3px 6px rgba(0, 0, 0, .03);
}
.trn-btn-primary:hover { color: #fff; box-shadow: 0 8px 20px rgba(217, 133, 0, .35); }
.trn-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
/* Hero CTAs sit directly on the photo banner, same glass recipe as the
   home page's .hr-btn-ghost-light/.hr-btn-primary (those classes are scoped
   to .home-revamp, so the recipe is re-declared here under .translate-revamp). */
.trn-hero-cta .trn-btn-ghost { background: rgba(255, 255, 255, .2); border-color: transparent; color: #fff; }
.trn-hero-cta .trn-btn-ghost:hover { color: #fff; }
.trn-hero-cta .trn-btn-primary { color: #fff; }

@media (max-width: 1440px) {
    .trn-hero-top { gap: 60px; }
}
@media (max-width: 1199.98px) {
    .trn-hero,
    .trn-form-wrap { padding-inline: 40px; }
    .trn-hero-rule { margin-inline: -40px; }
    .trn-hero-top { flex-direction: column; align-items: flex-start; gap: 32px; padding-top: 64px; }
    .trn-hero-title { font-size: 48px; line-height: 56px; max-width: 100%; }
    .trn-card-header,
    .trn-card-body,
    .trn-actions { padding-inline: 40px; }
    .trn-lang-head { display: none; }
    .trn-lang-row { grid-template-columns: 1fr 1fr; grid-template-areas: "lang lang" "prof prof" "translate transcribe" "delete delete"; }
}
@media (max-width: 991.98px) {
    .trn-field-grid { grid-template-columns: 1fr; }
    .trn-lang-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .trn-hero,
    .trn-form-wrap { padding-inline: 16px; }
    .trn-form-wrap { padding-top: 0; }
    .trn-hero-rule { margin-inline: -16px; }
    /* Centered stack instead of the desktop/tablet left-aligned column -
       title and desc both need their own box widened to the full column
       (flex:0 0 auto/auto-width otherwise shrink-wraps to the text, which
       would make text-align:center a no-op) so the centering actually has
       room to show. */
    .trn-hero-top { align-items: center; gap: 16px; padding-bottom: 0; }
    .trn-hero-title { font-size: 36px; line-height: 44px; width: 100%; text-align: center; }
    .trn-hero-side { width: 100%; align-items: center; }
    .trn-hero-side p { font-size: 18px; line-height: 26px; text-align: center; }
    /* 8px between the two buttons (was the desktop 16px), 34px under the
       last one. .trn-hero-top's own padding-bottom (40px, unconditional)
       was stacking on top of this margin - zeroed above so 34px is the
       actual net space before the breadcrumb row, not 74px. */
    .trn-hero-cta { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; margin-bottom: 34px; }
    .trn-hero-cta .trn-btn { width: 100%; justify-content: center; }
    .trn-breadcrumb-row { padding-top: 16px; padding-bottom: 16px; }
    /* Utility/Caption/Regular + ExtraBold (Figma) - the desktop clamp() never
       comes down this far (13px floor). nowrap + min-width:0, same fix as
       .podd-breadcrumb-current on the podcast detail page: without it,
       flex-wrap:wrap just pushes a too-long current crumb onto its own line
       instead of ever engaging text-overflow:ellipsis. */
    .trn-breadcrumb { flex-wrap: nowrap; min-width: 0; font-size: 12px; line-height: normal; color: #F9F7EA; }
    .trn-breadcrumb a,
    .trn-breadcrumb-current {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .trn-breadcrumb-current { flex: 1 1 auto; min-width: 0; font-weight: 800; }
    .trn-card { padding: 40px 0; }
    /* Figma "Intersect" watermark - the header's own gap/flex-column stack on
       the phone leaves nothing for it to sit tucked behind any more. */
    .trn-card::before { display: none; }
    .trn-card-header,
    .trn-card-body,
    .trn-actions { padding-inline: 24px; }
    .trn-card-header { flex-direction: column; align-items: flex-start; }
    /* Body/Body Medium/Bold size step only - keeps the desktop two-tone
       brown-500/yellow-500 accent split, just smaller. */
    .trn-card-title { font-size: 20px; line-height: 28px; font-weight: 700; }
    /* Utility/Caption/Regular for the "Step N" label, and the whole
       indicator (label + track) stretched to the card's full width instead
       of staying shrink-to-fit on its own row. */
    .trn-step-indicator { width: 100%; }
    .trn-step-label { font-size: 12px; line-height: normal; font-weight: 400; }
    .trn-progress-track { flex: 1 1 auto; width: auto; max-width: none; }
    .trn-actions { flex-direction: column; align-items: stretch; }
    .trn-tabs { padding-inline-start: 24px; }
    .trn-tab { padding: 14px 20px; font-size: 10px; line-height: 12px; font-weight: 400; }
    /* Weight and color already come from the unconditional .is-active rule
       (700 / --hr-cream-500) - just the size step here. */
    .trn-tab.is-active { font-size: 10px; line-height: 12px; }
    .trn-tab:nth-child(1) { min-width: 87.9px; }
    .trn-tab:nth-child(2) { min-width: 143px; }
    .trn-tab:nth-child(3) { min-width: 111px; }
    /* Card variant of the repeater row (Figma's phone frame, node
       40004162:70530): a white 16px-radius card per language instead of the
       desktop/tablet grid row. grid-template-areas, targeting the
       .trn-lang-field WRAPPERS (not the selects - see the comment on
       .trn-lang-field above for why). Gap is 0 here because the vertical
       rhythm isn't uniform (16px around the divider and between field
       groups, 8px between a label and its own field within one) - each
       element carries its own margin-bottom below instead. */
    .trn-lang-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title delete"
            "divider divider"
            "field-lang field-lang"
            "field-prof field-prof"
            "field-translate field-translate"
            "field-transcribe field-transcribe";
        gap: 0;
        background: #fff;
        border-radius: 16px;
        padding: 16px;
    }
    .trn-lang-card-title {
        display: block;
        grid-area: title;
        align-self: center;
        margin-bottom: 16px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        color: var(--hr-brown-900);
    }
    .trn-lang-card-divider {
        display: block;
        grid-area: divider;
        height: 1px;
        background: rgba(0, 0, 0, .08);
        margin-bottom: 16px;
    }
    /* Real grid item here (not display:contents, unlike everywhere else) -
       label above its own select, in normal block flow inside the wrapper. */
    .trn-lang-field { display: block; margin-bottom: 16px; }
    .trn-lang-field:last-of-type { margin-bottom: 0; }
    .trn-lang-field:nth-of-type(1) { grid-area: field-lang; }
    .trn-lang-field:nth-of-type(2) { grid-area: field-prof; }
    .trn-lang-field:nth-of-type(3) { grid-area: field-translate; }
    .trn-lang-field:nth-of-type(4) { grid-area: field-transcribe; }
    .trn-lang-field-label {
        display: block;
        font-size: 12px;
        line-height: normal;
        color: var(--hr-brown-400, #49473d);
        margin-bottom: 8px;
    }
    /* select2's own width defaults to shrink-to-content
       (select2-revamp.js passes width:'auto') - --ba-select-w is the hook
       .ba-select2-container reads for its own width, so this is how a page
       opts a field into filling its container instead of overriding
       select2-revamp.css directly. */
    .trn-lang-field { --ba-select-w: 100%; }
    /* Relocated from the row's own bottom-right (tablet) to sit beside the
       title instead - a small round icon button rather than a full-width
       bar. */
    .trn-lang-delete {
        grid-area: delete;
        align-self: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 16px;
    }
    /* Figma's phone frame (node 40004162:70592) drops the desktop's pill
       treatment (padding/border/translucent fill) entirely - just an icon
       and plain text, Labels/Label XXSmall/Regular. */
    .trn-lang-add {
        gap: 4px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        /* Plain text/icon, no glass pill left to cast one - layout-revamp.css's
           shared ghost-pill ambient shadow still applies at this specificity
           otherwise, since .trn-lang-add opted into that shared registry for
           the desktop pill treatment this phone step replaces. */
        box-shadow: none;
        color: var(--hr-yellow-500);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }
    .trn-lang-add-icon { width: 16px; height: 16px; }
    .trn-lang-add:hover { background: none; }

    /* One breadcrumb size site-wide on the phone, taken from the Events
       listing (.evt-breadcrumb in events-revamp.css): 12px type, 8px gaps,
       a 12px separator. This page had no phone step at all. */
    .trn-breadcrumb { font-size: 12px; gap: 8px; }
    .trn-breadcrumb-sep { height: 12px; }
}

[dir="rtl"] .trn-lang-toggle,
[dir="rtl"] .trn-pill { direction: rtl; }