/* CMG 2026 - site-styled form controls (inc/ext-forms.php, assets/js/ext-forms.js; owner request 2026-10-12).
   Styles only the elements ext-forms.js creates and the native controls it hides. Until the script
   has run (or if it fails) the native controls keep their design styles, with one exception (rule 4). */

/* 1. Native control kept in the DOM as the source of truth: invisible and not clickable, but still
   focusable by script (ext-forms.js forwards that focus to the custom control). */
.cmgx-native{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important}
.cmgx-hidden{display:none!important}

/* 2. Select-only combobox: shared parts. */
.cmgx-select{position:relative;display:block;min-width:0}
.cmgx-select__control{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cmgx-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.cmgx-chevron{flex:none;display:block;width:11px;height:7px;transition:transform .15s ease}
.cmgx-select.is-open .cmgx-chevron{transform:rotate(180deg)}
.cmgx-select__list{position:absolute;top:calc(100% + 6px);left:0;z-index:35;display:block;box-sizing:border-box;margin:0;padding:6px 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;text-align:left;transform:translateX(var(--cmgx-shift,0px));animation:cmgx-drop .12s ease-out}
.cmgx-select.is-up .cmgx-select__list{top:auto;bottom:calc(100% + 6px);animation-name:cmgx-rise}
.cmgx-select__list[hidden]{display:none}
.cmgx-select__option{display:flex;align-items:center;justify-content:space-between;gap:14px;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cmgx-select__text{min-width:0;overflow-wrap:anywhere}
.cmgx-check{flex:none;display:block;width:13px;height:10px;visibility:hidden}
.cmgx-select__option[aria-selected="true"] .cmgx-check{visibility:visible}
.cmgx-select__option[aria-disabled="true"]{opacity:.45;cursor:default}
/* The option Enter will take (aria-activedescendant): a bar in the text colour, not only a tint (WCAG 1.4.11). */
.cmgx-select__option.is-active{box-shadow:inset 3px 0 0 currentColor}
@media(forced-colors:active){.cmgx-select__option.is-active{outline:2px solid Highlight;outline-offset:-2px}}
@keyframes cmgx-drop{from{opacity:0;transform:translate(var(--cmgx-shift,0px),-4px)}}
@keyframes cmgx-rise{from{opacity:0;transform:translate(var(--cmgx-shift,0px),4px)}}

/* 3. Header language control. The control also carries the design class .language-select, so
   i18n.css / header-social.css / brand-colors.css / immersive-main.css and ext-fixes.css rule 2 size
   and colour it exactly like the native select (106px; 99px at <=700px; 60px, 68px for Chinese on phones). */
.cmgx-select--lang{display:flex;align-items:center;flex-shrink:0}
.new-header .cmgx-select--lang .cmgx-select__control{gap:5px;line-height:1.2;white-space:nowrap}
.new-header .cmgx-select--lang .cmgx-chevron{width:9px;height:6px}
/* Phones: ext-fixes.css rule 2 removes the right padding for English / Chinese; keep the chevron off the border
   without taking width from the label ("English" fills the 60px box). */
@media(max-width:600px){.new-header .cmgx-select--lang .cmgx-select__control{gap:3px}.new-header .cmgx-select--lang .cmgx-chevron{width:8px;margin-right:2px}}
.new-header .cmgx-select--lang .cmgx-select__control:focus{outline:none}
.new-header .cmgx-select--lang .cmgx-select__control:focus-visible{outline:2px solid currentColor;outline-offset:4px;box-shadow:none}
.cmgx-select--lang .cmgx-select__list{left:auto;right:0;z-index:60;min-width:100%;width:max-content;max-width:calc(100vw - 16px);background:#fff;color:#151515;border:1px solid #d9dde5;border-radius:3px;box-shadow:0 14px 32px rgba(0,0,0,.16);font-size:14px;font-weight:450;letter-spacing:0}
.cmgx-select--lang .cmgx-select__option{min-height:40px;padding:8px 14px 8px 16px;line-height:1.4;white-space:nowrap}
.cmgx-select--lang .cmgx-select__option.is-active{background:#f0f3fd;color:var(--cmg-brand-blue,#14259b)}
.cmgx-select--lang .cmgx-select__option[aria-selected="true"]{font-weight:650;color:var(--cmg-brand-blue,#14259b)}
/* Home: dark, transparent header (as the native options: immersive-main.css). */
.immersive-home .cmgx-select--lang .cmgx-select__list{background:#141619;color:#f6f7f8;border-color:#ffffff30;box-shadow:0 18px 38px rgba(0,0,0,.45)}
.immersive-home .cmgx-select--lang .cmgx-select__option.is-active{background:#262a31;color:#fff}
.immersive-home .cmgx-select--lang .cmgx-select__option[aria-selected="true"]{color:#fff}

/* 4. Support form select. Same box as the text inputs next to it (editorial-care.css: 52px high).
   min-height also on the native select, so the swap does not shift the layout and the no-JS
   select lines up with the inputs in the same row (it was 48px). */
.care-form .care-field select{min-height:52px}
.care-field .cmgx-select--field{font-size:15px;font-weight:inherit}
.care-field .cmgx-select--field .cmgx-select__control{width:100%;min-height:52px;padding:13px 16px;border:1px solid #d4dae6;border-radius:0;background:#fff;color:var(--care-ink,#172238);font-size:15px;line-height:1.6;scroll-margin-block:7rem 2rem;transition:border-color .15s ease}
.cmgx-select--field .cmgx-chevron{color:var(--care-blue,#14259b)}
.cmgx-select--field.is-placeholder .cmgx-select__value{color:var(--care-muted,#657187)}
.cmgx-select--field.is-open .cmgx-select__control{border-color:var(--care-blue,#14259b)}
.care-field .cmgx-select--field .cmgx-select__control:focus-visible{outline:3px solid #111d30;outline-offset:3px;box-shadow:0 0 0 3px #fff}
.cmgx-select--field.is-invalid .cmgx-select__control{border-color:#a5212b;box-shadow:inset 0 0 0 1px #a5212b}
.care-field .cmgx-select--field.is-invalid .cmgx-select__control:focus-visible{box-shadow:0 0 0 3px #fff,inset 0 0 0 1px #a5212b}
.cmgx-select--field .cmgx-select__list{right:0;background:#fff;border:1px solid var(--care-blue,#14259b);box-shadow:0 16px 36px rgba(23,34,56,.14)}
.cmgx-select--field .cmgx-select__option{min-height:48px;padding:11px 16px;font-size:15px;line-height:1.6;color:var(--care-ink,#172238)}
.cmgx-select--field .cmgx-select__option.is-active{background:#f0f3fd;color:var(--care-blue,#14259b)}
.cmgx-select--field .cmgx-select__option[aria-selected="true"]{font-weight:600;color:var(--care-blue,#14259b)}
@media(hover:hover){.cmgx-select--field:not(.is-open):not(.is-invalid) .cmgx-select__control:hover{border-color:#aab4c8}}

/* 5. Support form file input: a field-sized box with the "choose file" button, the file name and a remove button.
   The file name is never cut off (no hover tooltip on touch screens or for keyboard users): it wraps,
   and moves to its own row when the box is narrow (phones, the two-column form on small laptops). */
.care-field .cmgx-file{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;container-type:inline-size;min-width:0;min-height:52px;padding:7px 6px 7px 7px;border:1px solid #d4dae6;background:#fff;box-sizing:border-box;font-size:15px;font-weight:inherit;line-height:1.6;transition:border-color .15s ease,background-color .15s ease}
.care-field .cmgx-file .cmgx-file__pick{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:36px;margin:0;padding:6px 14px;border:1px solid #bbc3de;border-radius:0;background:#fff;color:var(--care-blue,#14259b);font:inherit;font-size:14px;line-height:1.4;white-space:nowrap;cursor:pointer;scroll-margin-block:7rem 2rem;touch-action:manipulation}
.cmgx-clip{flex:none;display:block;width:15px;height:15px}
.cmgx-file__name{flex:1 1 0;min-width:0;overflow-wrap:anywhere;line-height:1.45;color:var(--care-muted,#657187)}
@container (max-width:440px){
 .cmgx-file.has-file .cmgx-file__name{order:1;flex:1 1 100%;padding:0 6px 3px 2px}
 .cmgx-file.has-file .cmgx-file__size{margin-left:auto}
}
.cmgx-file.has-file .cmgx-file__name{color:var(--care-ink,#172238)}
.cmgx-file__size{flex:none;font-size:13px;color:var(--care-muted,#657187);font-variant-numeric:tabular-nums}
.cmgx-file__size:empty{display:none}
.care-field .cmgx-file .cmgx-file__remove{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--care-muted,#657187);cursor:pointer;touch-action:manipulation}
.care-field .cmgx-file .cmgx-file__remove[hidden]{display:none}
.cmgx-cross{display:block;width:12px;height:12px}
.care-field .cmgx-file :is(.cmgx-file__pick,.cmgx-file__remove):focus-visible{outline:3px solid #111d30;outline-offset:3px;box-shadow:0 0 0 3px #fff}
@media(hover:hover){
 .care-field .cmgx-file .cmgx-file__pick:hover{background:#f0f3fd;border-color:var(--care-blue,#14259b)}
 .care-field .cmgx-file .cmgx-file__remove:hover{background:#f5f7fc;color:#a5212b}
}
.care-field .cmgx-file__hint{display:block;margin-top:-4px;font-size:12px;font-weight:inherit;line-height:1.6;color:var(--care-muted,#657187)}
.cmgx-file.is-invalid{border-color:#a5212b;box-shadow:inset 0 0 0 1px #a5212b}
.cmgx-file.is-drag{border-color:var(--care-blue,#14259b);border-style:dashed;background:#f5f7fc}
.cmgx-file.is-drag::after{content:attr(data-drop);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 12px;background:rgba(245,247,252,.95);color:var(--care-blue,#14259b);font-size:14px;font-weight:600;text-align:center;pointer-events:none}

/* 6. Error message under a custom control (same colour and size as the site's .field-error). */
.care-field .cmgx-error{display:block;margin-top:-4px;color:#a5212b;font-size:14px;font-weight:inherit;line-height:1.6}
.cmgx-error[hidden]{display:none}

/* 7. Phones: the design sets 16px on form fields at <=700px; touch-sized options. */
@media(max-width:700px){
 .care-field .cmgx-select--field .cmgx-select__control,.cmgx-select--field .cmgx-select__option,.care-field .cmgx-file{font-size:16px}
 .care-field .cmgx-file{column-gap:8px}
 .care-field .cmgx-file .cmgx-file__pick{padding:6px 12px}
}
/* 8. Room for the enhanced controls before the script has run, so the swap does not move the page:
   the attachment field gains the hint line (52px box + 10px gap + 15.2px hint against a 55px native
   input, 58px with the 16px phone text), and the phone text fields are 53.6px high. */
.care-form .care-field input[type="file"]:not(.cmgx-native){margin-bottom:22.2px}
@media(max-width:700px){
 .care-form .care-field select{min-height:53.6px}
 .care-form .care-field input[type="file"]:not(.cmgx-native){margin-bottom:19.2px}
}
@media(pointer:coarse){
 .cmgx-select--lang .cmgx-select__option{min-height:44px}
 .cmgx-select--field .cmgx-select__option{min-height:50px}
}
@media(prefers-reduced-motion:reduce){
 .cmgx-select__list{animation:none}
 .cmgx-chevron,.care-field .cmgx-select--field .cmgx-select__control,.care-field .cmgx-file{transition:none}
}