/* Shared form controls. Colors follow the page theme, including open menus. */
:root { --control-radius: 9px; --control-shadow: 0 12px 35px rgb(18 35 24 / .16); }
:root[data-theme="dark"] { --control-shadow: 0 14px 40px rgb(0 0 0 / .65); }
body :is(.contact-form,.planner-form) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {
  color: var(--ink); background-color: var(--white); border: 1px solid var(--field-border); border-radius: var(--control-radius);
  font-family: var(--font-body); font-size: 16px; caret-color: var(--green-text);
}
body :is(.contact-form,.planner-form) :is(input,textarea,select):hover:not(:disabled) { border-color: var(--green-text); }
body :is(.contact-form,.planner-form) :is(input,textarea,select):focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
body :is(.contact-form,.planner-form) :is(input,textarea)::placeholder { color: var(--ink-soft); opacity: .85; }
body :is(.contact-form,.planner-form) :is(input,textarea):disabled { background: var(--mint); color: var(--ink-soft); cursor: not-allowed; }
body :is(input[type="checkbox"],input[type="radio"]) {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: 0 0 21px;
  width: 21px; height: 21px; min-width: 21px; min-height: 21px; padding: 0;
  border: 1.5px solid var(--field-border); border-radius: 5px; background: var(--white); color: #10251a; cursor: pointer;
}
body input[type="radio"] { border-radius: 50%; }
body :is(input[type="checkbox"],input[type="radio"])::before { content: ''; width: 11px; height: 8px; background: currentColor; clip-path: polygon(0 40%, 18% 23%, 40% 50%, 82% 0, 100% 18%, 39% 100%); transform: scale(0); }
body input[type="radio"]::before { width: 9px; height: 9px; border-radius: 50%; clip-path: none; }
body :is(input[type="checkbox"],input[type="radio"]):checked { background: var(--green-bright); border-color: var(--green-text); }
body :is(input[type="checkbox"],input[type="radio"]):checked::before { transform: scale(1); }
body :is(input[type="checkbox"],input[type="radio"]):focus-visible { outline: 2px solid var(--green-text); outline-offset: 4px; }
body :is(input[type="checkbox"],input[type="radio"]):disabled { cursor: not-allowed; opacity: .5; }
.form-select { position: relative; min-width: 0; width: 100%; }
body select.form-select-native { position: absolute !important; display: block !important; width: 1px !important; min-width: 0 !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; clip-path: inset(50%) !important; overflow: hidden !important; pointer-events: none !important; opacity: 0 !important; }
body .form-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-width: 0; min-height: 54px;
  padding: 13px 15px; border: 1px solid var(--field-border); border-radius: var(--control-radius); background: var(--white); color: var(--ink);
  font: 400 16px/1.55 var(--font-body); text-align: left; cursor: pointer;
}
.form-select-value { min-width: 0; overflow-wrap: anywhere; }
.form-select-arrow { width: 8px; height: 8px; flex: 0 0 8px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: translateY(-2px) rotate(45deg); color: var(--green-text); margin-right: 3px; }
body .form-select-trigger:hover:not(:disabled) { border-color: var(--green-text); background: var(--mint); }
body .form-select-trigger:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
body .form-select-trigger[aria-expanded="true"] { border-color: var(--green-text); box-shadow: 0 0 0 1px var(--green-text); }
.form-select-trigger[aria-expanded="true"] .form-select-arrow { transform: translateY(2px) rotate(225deg); }
body .form-select-trigger:disabled { cursor: not-allowed; color: var(--ink-soft); background: var(--mint); border-color: var(--line); }
body .form-select-trigger:disabled .form-select-arrow { opacity: .4; }
body .form-select-trigger.is-placeholder { color: var(--ink-soft); }
body .form-select-trigger[aria-invalid="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.form-select-options {
  position: fixed; z-index: 1200; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--field-border); border-radius: 11px; background: var(--white); color: var(--ink); box-shadow: var(--control-shadow);
  scrollbar-width: thin; scrollbar-color: var(--field-border) transparent;
}
.form-select-options[hidden], .form-select-option[hidden] { display: none !important; }
.form-select-option {
  position: relative; display: flex; align-items: center; min-height: 46px; padding: 11px 36px 11px 12px; border-radius: 6px;
  font: 400 15px/1.5 var(--font-body); overflow-wrap: anywhere; cursor: pointer;
}
.form-select-option + .form-select-option { margin-top: 2px; }
.form-select-option.is-active, .form-select-option:hover { background: var(--mint); }
.form-select-option[aria-selected="true"] { background: var(--mint-strong); color: var(--green-text); font-weight: 650; }
.form-select-option[aria-selected="true"]::after { content: ''; position: absolute; right: 15px; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.form-select-option.is-active { outline: 1px solid var(--green-text); outline-offset: -1px; }
.form-select-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.form-select-gallery { display: none; }
@media (max-width: 760px) { .form-select-gallery { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .form-select-trigger, .form-select-arrow, body :is(input[type="checkbox"],input[type="radio"]) { transition: background-color 140ms, border-color 140ms, transform 140ms; }
  .form-select-options:not([hidden]) { animation: control-menu-in 120ms ease-out; }
  @keyframes control-menu-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (forced-colors: active) {
  body :is(input[type="checkbox"],input[type="radio"]) { appearance: auto; }
  body :is(input[type="checkbox"],input[type="radio"])::before { display: none; }
  .form-select-option.is-active { outline: 2px solid Highlight; }
}
@media print { .form-select-options { display: none !important; } }