.contact-page {
  --contact-bg: #0c192b;
  --contact-field: #091322;
  --contact-line: #3b536b;
  --contact-text: #edf5ff;
  --contact-muted: #b6c8db;
  --contact-cyan: #6ae0f5;
  color: var(--contact-text);
  font-family: "Geist", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
.contact-page *, .contact-nameplate { box-sizing: border-box; }
.contact-page [hidden] { display: none !important; }
.contact-page a, .contact-nameplate a { overflow-wrap: anywhere; }
.contact-page a:not(.button) { color: var(--contact-cyan); text-decoration: underline; text-underline-offset: .2em; }
.contact-page :is(input, select, textarea, button) { font: inherit; }
.contact-page :is(input, select, textarea, button, a):focus-visible,
.contact-feedback:focus { outline: 3px solid var(--contact-cyan); outline-offset: 4px; }
.contact-page :is(#progetto, #prenotazione, #contact-start) { scroll-margin-top: 110px; }
.contact-paths { border: 0; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-paths legend { font-weight: 600; margin-bottom: .8rem; }
.contact-path { display: flex; align-items: flex-start; gap: .85rem; border: 1px solid var(--contact-line); border-radius: 12px; padding: 1.4rem; background: var(--contact-bg); cursor: pointer; }
.contact-path:has(input:checked) { border-color: var(--contact-cyan); box-shadow: inset 0 3px 0 var(--contact-cyan); }
.contact-path strong { display: block; font-size: 1.2rem; margin-bottom: .4rem; }
.contact-path span span { display: block; color: var(--contact-muted); }
.contact-page input:is([type="radio"], [type="checkbox"]) { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin-top: .35rem; accent-color: var(--contact-cyan); }
.contact-notice { border-left: 3px solid var(--contact-cyan); padding: 1rem 1.25rem; background: #112b3e; color: var(--contact-text); border-radius: 0 8px 8px 0; }
.contact-panel { background: var(--contact-bg); border: 1px solid var(--contact-line); border-radius: 18px; padding: clamp(1.15rem, 4vw, 3rem); margin-top: 2rem; box-shadow: 0 24px 60px #02081255; }
.contact-panel-heading { max-width: 48rem; margin-bottom: 2rem; }
.contact-panel h2, .contact-direct h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; margin: .6rem 0 1rem; }
.contact-panel-heading p, .contact-hint { color: var(--contact-muted); }
.contact-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; }
.contact-field { min-width: 0; margin-bottom: 1.4rem; }
.contact-field > label { display: block; font-size: 16px; font-weight: 600; margin-bottom: .5rem; }
.contact-field label span:not(.contact-check span) { font-weight: 400; }
.contact-field :is(input:not([type="checkbox"]), select, textarea) { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; padding: .75rem .9rem; background: var(--contact-field); color: var(--contact-text); border: 1px solid var(--contact-line); border-radius: 7px; color-scheme: dark; }
.contact-field textarea { resize: vertical; }
.contact-field select optgroup { font-weight: 650; color: var(--contact-cyan); background: var(--contact-bg); }
.contact-field select option { font-weight: 400; color: var(--contact-text); background: var(--contact-field); }
.contact-field input[type="file"] { padding: .55rem; font-size: 14px; }
.contact-field input::file-selector-button { font: inherit; background: #173c52; color: var(--contact-text); border: 1px solid var(--contact-line); border-radius: 4px; padding: .5rem; margin-right: .7rem; cursor: pointer; }
.contact-hint, .contact-error, .contact-file-list { font-size: 14px; line-height: 1.6; margin: .5rem 0 0; }
.contact-file-list { padding-left: 1.3rem; overflow-wrap: anywhere; }
.contact-context { margin: 0 0 1.5rem; padding: 1rem 1rem 0; border: 1px solid var(--contact-line); border-radius: 8px; min-width: 0; }
.contact-context legend { padding: 0 .4rem; color: var(--contact-cyan); font-size: 14px; }
.contact-das-details { padding: 0; overflow: hidden; }
.contact-das-details > summary { padding: 1rem; color: var(--contact-cyan); cursor: pointer; font-size: 14px; font-weight: 650; }
.contact-das-details[open] > summary { border-bottom: 1px solid var(--contact-line); }
.contact-das-fields { border: 0; padding: 1rem 1rem 0; margin: 0; min-width: 0; }
.contact-field .contact-check { display: flex; align-items: flex-start; gap: .8rem; font-weight: 400; }
.contact-page .button { min-height: 48px; white-space: normal; text-align: center; justify-content: center; }
.contact-page :disabled { cursor: not-allowed; opacity: .65; }
.contact-page fieldset:disabled { opacity: 1; }
.contact-feedback { margin: 1rem 0; overflow-wrap: anywhere; }
.contact-feedback:empty { margin: 0; }
.booking-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; margin: 1rem 0 1.5rem; }
.booking-day { min-height: 48px; padding: .65rem .8rem; border: 1px solid var(--contact-line); border-radius: 7px; background: var(--contact-field); color: var(--contact-text); cursor: pointer; }
.booking-day:hover { border-color: var(--contact-cyan); }
.booking-day[aria-pressed="true"] { color: #091322; background: var(--contact-cyan); border-color: var(--contact-cyan); font-weight: 650; }
.contact-error, .contact-feedback[data-error="true"] { color: #ffb5af; }
.contact-page [aria-invalid="true"] { border-color: #ffb5af; }
.contact-summary { border-top: 1px solid var(--contact-line); margin-top: 1.5rem; padding-top: 1rem; }
.contact-summary h3 { font-size: 1.1rem; color: var(--contact-cyan); }
.contact-summary dl { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); gap: .6rem 1rem; }
.contact-summary dt { color: var(--contact-muted); }
.contact-summary dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.contact-direct { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; border-top: 1px solid var(--contact-line); margin-top: 3rem; padding-top: 2rem; }
.contact-direct h2 { grid-row: span 3; }
.contact-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 680px) {
  .contact-paths, .contact-grid, .contact-direct, .contact-summary dl { grid-template-columns: minmax(0, 1fr); }
  .contact-summary dd { margin-bottom: .6rem; }
  .contact-page .button { width: 100%; }
  .contact-path { padding: 1rem; }
}
