/* Pagina di prenotazione (com_mappuntamenti). Caratteri e colori ereditati dal tema;
   l'arancione è quello dei pulsanti primari di YOOtheme del sito. */
.mapp {
  --mapp-primario: #ee8201;
  --mapp-primario-scuro: #d97600;
  --mapp-primario-chiaro: #fff3e5;
  --mapp-tenue: #696969;
  --mapp-bordo: #e9e9e9;
  --mapp-errore: #de3e3e;
  --mapp-successo: #2e9e52;
  --mapp-raggio: 6px;
  max-width: 960px;
  margin: 0 auto;
}
.mapp *, .mapp *::before, .mapp *::after { box-sizing: border-box; }
.mapp button { font: inherit; cursor: pointer; }
.mapp h2 { font-size: 1.25rem; margin: 0 0 .6em; }
.mapp h3 { font-size: 1rem; margin: 0 0 .6em; text-transform: capitalize; }

.mapp-layout { display: grid; gap: 16px; }
@media (min-width: 800px) {
  .mapp-layout { grid-template-columns: 1fr 280px; align-items: start; }
  .mapp-layout:has(> .mapp-dettagli[hidden]) { grid-template-columns: 1fr; }
}
.mapp-riquadro { background: #fff; border: 1px solid var(--mapp-bordo); border-radius: var(--mapp-raggio); padding: 20px; }
.mapp-riquadro[hidden] { display: none; }
@media (max-width: 799px) { .mapp-dettagli { order: -1; } }
.mapp-dettagli dl { margin: 0; }
.mapp-dettagli dt { color: var(--mapp-tenue); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 12px; }
.mapp-dettagli dd { margin: 2px 0 0; }
.mapp-nota { color: var(--mapp-tenue); font-size: .9rem; }
.mapp-indietro, .mapp-link { background: none; border: 0; color: var(--mapp-tenue); padding: 0; margin-bottom: 12px; }
.mapp-link { color: var(--mapp-primario); text-decoration: underline; margin: 0; }
.mapp-indietro:hover { color: inherit; }

/* Tipi */
.mapp-tipi { display: grid; gap: 12px; }
.mapp-tipo { text-align: left; background: #fff; color: inherit; border: 1px solid var(--mapp-bordo); border-radius: var(--mapp-raggio); padding: 16px; display: grid; gap: 4px; transition: border-color .15s; }
.mapp-tipo:hover, .mapp-tipo:focus-visible { border-color: var(--mapp-primario); outline: none; }
.mapp-tipo strong { font-size: 1.05rem; }
.mapp-durata { color: var(--mapp-primario); font-weight: 500; font-size: .9rem; }
.mapp-descrizione { color: var(--mapp-tenue); font-size: .9rem; }

/* Calendario */
.mapp-mese { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mapp-mese h2 { margin: 0; text-transform: capitalize; }
.mapp-freccia { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mapp-bordo); background: #fff; color: inherit; font-size: 1.1rem; padding: 0; }
.mapp-freccia:disabled { opacity: .3; cursor: default; }
.mapp-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.mapp-intestazione { font-size: .75rem; color: var(--mapp-tenue); padding: 4px 0; text-transform: uppercase; }
.mapp-giorno { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; color: #c4c4c4; font-size: .95rem; max-width: 48px; width: 100%; justify-self: center; padding: 0; }
.mapp-giorno.mapp-libero { background: var(--mapp-primario-chiaro); color: inherit; font-weight: 500; }
.mapp-giorno.mapp-libero:hover { background: #ffe2bf; }
.mapp-giorno.mapp-scelto { background: var(--mapp-primario); color: #fff; }
.mapp-giorno:disabled { cursor: default; }
.mapp-orari { margin-top: 20px; }
.mapp-lista-orari { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.mapp-orario { border: 1px solid var(--mapp-primario); color: var(--mapp-primario); background: #fff; border-radius: var(--mapp-raggio); padding: 10px 0; font-weight: 500; }
.mapp-orario:hover, .mapp-orario:focus-visible { background: var(--mapp-primario); color: #fff; }

/* Modulo */
.mapp-form { display: grid; gap: 14px; }
.mapp-form label { display: grid; gap: 4px; font-weight: 500; font-size: .95rem; }
.mapp-form input[type=text], .mapp-form input[type=email], .mapp-form input[type=tel] { font: inherit; padding: 10px 12px; border: 1px solid #ccc; border-radius: var(--mapp-raggio); width: 100%; }
.mapp-form input:focus { outline: 2px solid var(--mapp-primario); outline-offset: -1px; border-color: transparent; }
.mapp-consenso { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.mapp-consenso input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--mapp-primario); }
.mapp-errore { color: var(--mapp-errore); font-size: .85rem; font-weight: 400; display: block; }
.mapp-errore:empty { display: none; }
.mapp-trappola { position: absolute !important; left: -9999px; }
.mapp-scelta { background: var(--mapp-primario-chiaro); border-radius: var(--mapp-raggio); padding: 12px 16px; margin-bottom: 16px; }

/* Pulsanti e riepilogo */
.mapp-pulsante { background: var(--mapp-primario); color: #fff; border: 1px solid transparent; border-radius: var(--mapp-raggio); padding: 12px 20px; font-weight: 500; text-decoration: none; display: inline-block; text-align: center; }
.mapp-pulsante:hover { background: var(--mapp-primario-scuro); color: #fff; text-decoration: none; }
.mapp-pulsante:disabled { opacity: .6; }
.mapp-pulsante.mapp-secondario { background: #fff; color: inherit; border-color: #ccc; }
.mapp-pulsante.mapp-secondario:hover { border-color: var(--mapp-primario); }
.mapp-pulsante.mapp-pericolo { background: var(--mapp-errore); }
.mapp-ok { color: var(--mapp-successo); font-size: 2.5rem; line-height: 1; }
.mapp-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.mapp-riepilogo { width: 100%; border-collapse: collapse; margin: 16px 0; }
.mapp-riepilogo th { text-align: left; color: var(--mapp-tenue); font-weight: 400; padding: 6px 12px 6px 0; vertical-align: top; width: 35%; }
.mapp-riepilogo td { padding: 6px 0; }
.mapp-riepilogo tr + tr { border-top: 1px solid var(--mapp-bordo); }
.mapp-avviso { background: #fdeaea; color: var(--mapp-errore); border-radius: var(--mapp-raggio); padding: 12px 16px; margin-bottom: 16px; }
.mapp-successo { background: #e8f6ec; color: #1f6e3a; border-radius: var(--mapp-raggio); padding: 12px 16px; margin-bottom: 16px; }