/* Componenti fissi. Colori e font si adattano al sito con le variabili. */
:root {
  --k-testo: inherit;
  --k-sfondo: #fff;
  --k-accento: #8a2b1d;
  --k-su-accento: #fff;
  --k-bordo: rgba(0, 0, 0, .15);
  --k-raggio: 6px;
}

.k-barra {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--k-sfondo); gap: 2px;
  padding-bottom: env(safe-area-inset-bottom);
}
.k-barra a {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 52px; color: var(--k-testo); text-decoration: none; font-weight: 600;
}
.k-barra svg { width: 1.15em; height: 1.15em; flex: none; }
@media (max-width: 760px) {
  .k-barra { display: grid; }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

.k-orari { border-collapse: collapse; width: 100%; max-width: 26rem; }
.k-orari th, .k-orari td { text-align: left; padding: .45em 0; font-weight: 400; }
.k-orari th { padding-right: 1.5em; }
.k-orari tr.k-oggi { font-weight: 700; }
.k-chiusure { margin-top: .75em; }

.k-modulo { display: grid; gap: .9rem; max-width: 34rem; }
.k-modulo label { display: grid; gap: .3rem; }
.k-modulo input, .k-modulo textarea {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--k-bordo); border-radius: var(--k-raggio); padding: .7em .8em; min-height: 44px;
}
.k-modulo textarea { min-height: 8em; resize: vertical; }
.k-modulo .k-spunta { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.k-modulo .k-spunta input { min-height: 0; width: 1.3rem; height: 1.3rem; accent-color: var(--k-accento); }
.k-modulo textarea:not([required]) { min-height: 5em; }
.k-modulo :focus-visible, .k-barra a:focus-visible, .k-piede a:focus-visible { outline: 2px solid var(--k-accento); outline-offset: 2px; }
.k-modulo button {
  font: inherit; font-weight: 600; justify-self: start; cursor: pointer;
  background: var(--k-accento); color: var(--k-su-accento); border: 0; border-radius: var(--k-raggio);
  padding: .8em 1.4em; min-height: 44px;
}
.k-modulo .k-privacy { font-size: .875em; }

.k-mappa { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--k-raggio); }

.k-piede { font-size: .875em; line-height: 1.6; }
.k-piede a { color: inherit; }

.k-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* campo compilato male: si segnala solo dopo che la persona ci ha provato */
.k-modulo :is(input, textarea):user-invalid { border-color: #c0392b; border-width: 2px; }
.k-modulo :is(input, textarea):user-invalid:focus-visible { outline-color: #c0392b; }