:root {
  --ui-radius: 20px;
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-open: 240ms;
  --ui-close: 160ms;
  --ui-glass: linear-gradient(135deg, #193344f7, #0a1d2af7);
}
.request-form { border-radius: 24px; }
.request-form input, .request-form select, .request-form textarea {
  border-radius: 13px;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.request-form input:hover, .request-form textarea:hover { border-color: #6c919d; }
.request-form .form-field { min-width: 0; }
.request-form .form-field > label { margin-bottom: 0; }
.control-native, .request-form .control-native, .supplier-catalog-filters .control-native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.control-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 51px;
  margin: 9px 0 21px;
  padding: 13px 15px;
  border: 1px solid #426273;
  border-radius: 14px;
  color: #eef6fb;
  background: #0b1e2be8;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .025em;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.control-trigger:hover { border-color: #7eaaaF; background: #132e3c; }
.control-trigger[aria-expanded="true"] { border-color: #ace2da; box-shadow: 0 0 0 3px #a4ded518; }
.control-trigger.is-placeholder { color: #b3c7d3; }
.control-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-chevron, .control-calendar-icon { flex: 0 0 18px; width: 18px; height: 18px; color: #afc9d4; }
.control-chevron { transition: transform var(--ui-open) var(--ui-ease); }
[aria-expanded="true"] > .control-chevron { transform: rotate(180deg); }
.control-popup {
  position: fixed;
  z-index: 90;
  padding: 8px;
  border: 1px solid #a3ccd94a;
  border-radius: var(--ui-radius);
  background: var(--ui-glass);
  color: #eff7fc;
  box-shadow: 0 20px 60px #010a1580, inset 0 1px 0 #d5faff14;
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #587886 transparent;
  scroll-padding: 8px;
  letter-spacing: .025em;
}
.control-popup[hidden] { display: none; }
.control-select-header {
  position: sticky;
  z-index: 2;
  top: 0;
  padding-bottom: 2px;
  border-radius: 13px 13px 0 0;
  background: #102b3a;
}
.control-select-header .control-search { position: static; }
.control-category-trigger {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 48px;
  margin: 0 0 9px;
  padding: 11px 13px;
  border: 1px solid #6e94a14d;
  border-radius: 12px;
  background: #a7e5dc09;
  color: #edf7fa;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.control-category-trigger:hover, .control-category-trigger[aria-expanded="true"] { border-color: #a7e5dc88; background: #a7e5dc14; }
.control-category-label { flex-shrink: 0; color: #a9c7d2; font-size: 12px; }
.control-category-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-category-option { align-items: flex-start; padding-block: 14px; }
.control-category-option .control-option-code { padding-top: 2px; }
.control-platform-row {
  display: flex;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 3px 2px 10px;
  margin-bottom: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #527785 transparent;
}
.control-platform {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 1px solid #9cc6ce25;
  border-radius: 13px;
  background: #d4ffff05;
  color: #e6f4f7;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.control-platform img, .control-platform svg { display: block; width: 22px; height: 22px; object-fit: contain; }
.control-platform img { filter: brightness(0) invert(1); }
.control-platform:hover { border-color: #b9eee177; background: #a7e4db15; }
.control-platform[aria-pressed="true"] { border-color: #b7eadd; background: #a7e5dc; color: #0d2c35; }
.control-platform[aria-pressed="true"] img { filter: brightness(0) saturate(100%) invert(13%) sepia(22%) saturate(1093%) hue-rotate(149deg) brightness(93%) contrast(97%); }
.control-platform:focus-visible { outline-offset: -4px; }
.control-search {
  position: sticky;
  z-index: 1;
  top: 0;
  display: block;
  width: 100%;
  min-height: 43px;
  padding: 10px 13px;
  margin-bottom: 6px;
  border: 1px solid #6e94a14d;
  border-radius: 12px;
  background: #102b3a;
  color: #f0f8fb;
  font-size: 13px;
  line-height: 1.6;
}
.control-search::placeholder { color: #abc1ce; }
body .control-popup .control-search::placeholder { color: var(--muted, #abc1ce); }
.control-search:focus-visible { outline-offset: -2px; }
.control-results {
  display: flex;
  position: sticky;
  bottom: -1px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #102b3a;
  border-radius: 12px;
  color: #b3cbd6;
  font-size: 11px;
}
.control-results:not(:empty) { padding: 8px; margin-top: 8px; }
.control-page { min-height: 34px; border: 1px solid #709baf4d; border-radius: 9px; padding: 5px 10px; background: #acdccc0c; color: #e1f4f6; }
.control-page:disabled { opacity: .35; cursor: default; }
.control-empty { padding: 20px 12px; font-size: 13px; color: #aec5d1; }
.catalog-filter-field .control-trigger { margin-bottom: 0; }
.catalog-filter-field > label { font-size: 12px; color: #b4cbd8; line-height: 1.8; }
.control-group { padding: 14px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: .055em; color: #a9c7d2; }
.control-option {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 47px;
  padding: 11px 34px 11px 13px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.65;
  cursor: pointer;
}
.control-option-label { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.control-option-code { color: #b1c5ce; font: 11px var(--mono); white-space: nowrap; }
.control-option.is-active { background: #b5efe415; }
.control-option[aria-selected="true"] { background: #a7e5dc25; color: #c9fff4; }
.control-option[aria-selected="true"]::after { content: "✓"; position: absolute; right: 13px; color: #b8f1e4; }
.control-option[aria-disabled="true"] { opacity: .45; cursor: default; }
.calendar-popup { padding: 17px; }
.calendar-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 13px; }
.calendar-title { font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.calendar-step, .calendar-clear {
  border: 1px solid #92bcc42b;
  border-radius: 50%;
  color: #ddf3f6;
  background: #b7edf609;
}
.calendar-step { width: 34px; height: 34px; font-size: 18px; }
.calendar-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-weekday { font-size: 11px; color: #a5c0cd; text-align: center; padding: 7px 0 10px; }
.calendar-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #eff7fc;
  background: transparent;
  font-size: 13px;
}
.calendar-day.is-outside { color: #94acbb; }
.calendar-day[aria-current="date"] { border-color: #8fd8ce6b; }
.calendar-day[aria-selected="true"] { background: #a8e5db; color: #09202d; font-weight: 650; }
.calendar-day:disabled { opacity: .35; cursor: default; }
.calendar-day:not(:disabled):hover, .calendar-step:hover, .calendar-clear:hover { background: #a9e1db28; color: #e8ffff; }
.calendar-day[aria-selected="true"]:hover { background: #c5f6ed; color: #09202d; }
.calendar-clear { display: block; width: 100%; min-height: 36px; border-radius: 12px; font-size: 12px; margin-top: 13px; }
.enquiry-dialog { border-radius: 24px; }
@media(max-width: 480px) {
  .control-trigger { margin-top: 8px; margin-bottom: 20px; font-size: 14px; min-height: 50px; }
  .control-popup { border-radius: 18px; }
  .control-option { font-size: 13px; min-height: 46px; gap: 7px; }
  .control-option-code { font-size: 10px; }
  .calendar-popup { padding: 14px; }
}
@media(prefers-reduced-motion: reduce) {
  .control-trigger, .control-chevron, .control-platform, .control-category-trigger, .request-form input, .request-form textarea { transition: none; }
}