/* «Prova con il tuo menu / hotel / flotta» (piani 19, 21, 22): the three optional forms of the trial,
   on their sector pages and on the home page where the sector is chosen (owner, 6/11). */
.call-own[hidden] { display: none; }

/* «Prova con il tuo menu» (piano 19): optional, inside the trial form. */
.visitor-menu { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); background: var(--surface); }
.visitor-menu summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; font-weight: 600; color: var(--text); list-style: none; }
.visitor-menu summary::-webkit-details-marker { display: none; }
.visitor-menu summary::after { content: "+"; margin-left: auto; color: var(--text-faint); }
.visitor-menu[open] summary::after { content: "−"; }
.visitor-menu[open] summary { margin-bottom: var(--s-2); }
.vm-badge { font-size: var(--fs-12); color: var(--on-text); background: var(--verm); border-radius: var(--r-pill); padding: 2px var(--s-2); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.vm-status:empty { display: none; }
.visitor-menu.is-reading .vm-status { animation: vm-pulse 1.4s ease-in-out infinite; }
@keyframes vm-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .visitor-menu.is-reading .vm-status { animation: none; } }
.vm-review, .vm-ready { margin-top: var(--s-3); }
.vm-count { margin-top: var(--s-3); }
.vm-dishes { list-style: none; margin: var(--s-2) 0 0; padding: 0; max-height: 18rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.vm-dishes li { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 2.25rem; grid-template-areas: "cat cat cat" "name price remove"; gap: 2px var(--s-2); padding: var(--s-2); border-bottom: 1px solid var(--line); align-items: center; }
.vm-dishes li:last-child { border-bottom: 0; }
.vm-dishes .vm-cat { grid-area: cat; font-size: var(--fs-12); color: var(--text-faint); }
.vm-dishes [data-vm-dish-name] { grid-area: name; min-width: 0; }
.vm-dishes [data-vm-dish-price] { grid-area: price; text-align: right; min-width: 0; }
.vm-remove { grid-area: remove; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-soft); border-radius: var(--r-pill); width: 2.25rem; height: 2.25rem; cursor: pointer; font-size: var(--fs-14); }
.vm-remove:hover, .vm-remove:focus-visible { color: var(--verm); border-color: var(--verm); }
@media (max-width: 520px) {
  .vm-dishes li { grid-template-areas: "cat price remove" "name name name"; }
}

/* «Prova con il tuo hotel» (piano 21, step 7): optional, inside the trial form. */
.visitor-hotel { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); background: var(--surface); container-type: inline-size; }
.visitor-hotel summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; font-weight: 600; color: var(--text); list-style: none; }
.visitor-hotel summary::-webkit-details-marker { display: none; }
.visitor-hotel summary::after { content: "+"; margin-left: auto; color: var(--text-faint); }
.visitor-hotel[open] summary::after { content: "\2212"; }
.visitor-hotel[open] summary { margin-bottom: var(--s-2); }
.vh-badge { font-size: var(--fs-12); color: var(--on-text); background: var(--verm); border-radius: var(--r-pill); padding: 2px var(--s-2); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.vh-status:empty { display: none; }
.vh-ready { margin-top: var(--s-2); }
.vh-types { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.vh-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) 2.25rem; gap: var(--s-2); align-items: end; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.vh-cell { display: grid; gap: 2px; min-width: 0; }
.vh-caption { font-size: var(--fs-12); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-cell .input { min-width: 0; width: 100%; }
.vh-remove { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-soft); border-radius: var(--r-pill); width: 2.25rem; height: 2.25rem; cursor: pointer; font-size: var(--fs-14); }
.vh-remove:hover, .vh-remove:focus-visible { color: var(--verm); border-color: var(--verm); }
@container (max-width: 560px) {
  .vh-row { grid-template-columns: repeat(4, minmax(0, 1fr)) 2.25rem; }
  .vh-name { grid-column: 1 / 5; }
  .vh-remove { grid-column: 5; grid-row: 1; align-self: end; }
}
@container (max-width: 440px) {
  .vh-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 2.25rem;
            grid-template-areas: "name name remove" "capacity rooms rooms" "weekday weekend weekend"; }
  .vh-name { grid-area: name; }
  .vh-capacity { grid-area: capacity; }
  .vh-rooms { grid-area: rooms; }
  .vh-weekday { grid-area: weekday; }
  .vh-weekend { grid-area: weekend; }
  .vh-remove { grid-area: remove; }
}

/* «Prova con la tua flotta» (piano 22): the same form as the hotel's, with the vehicles' columns. */
.visitor-fleet { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3); background: var(--surface); container-type: inline-size; }
.visitor-fleet summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; font-weight: 600; color: var(--text); list-style: none; }
.visitor-fleet summary::-webkit-details-marker { display: none; }
.visitor-fleet summary::after { content: "+"; margin-left: auto; color: var(--text-faint); }
.visitor-fleet[open] summary::after { content: "\2212"; }
.visitor-fleet[open] summary { margin-bottom: var(--s-2); }
.vf-badge { font-size: var(--fs-12); color: var(--on-text); background: var(--verm); border-radius: var(--r-pill); padding: 2px var(--s-2); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-2); }
.vf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.vf-status:empty { display: none; }
.vf-ready { margin-top: var(--s-2); }
.vf-types { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.vf-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) 2.25rem; gap: var(--s-2); align-items: end; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.vf-cell { display: grid; gap: 2px; min-width: 0; }
.vf-caption { font-size: var(--fs-12); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-cell .input { min-width: 0; width: 100%; }
.vf-remove { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-soft); border-radius: var(--r-pill); width: 2.25rem; height: 2.25rem; cursor: pointer; font-size: var(--fs-14); }
.vf-remove:hover, .vf-remove:focus-visible { color: var(--verm); border-color: var(--verm); }
@container (max-width: 560px) {
  .vf-row { grid-template-columns: repeat(4, minmax(0, 1fr)) 2.25rem; }
  .vf-name { grid-column: 1 / 5; }
  .vf-remove { grid-column: 5; grid-row: 1; align-self: end; }
}
@container (max-width: 440px) {
  .vf-head { grid-template-columns: minmax(0, 1fr); }
  .vf-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 2.25rem;
            grid-template-areas: "name name remove" "seats count count" "km minimum minimum"; }
  .vf-name { grid-area: name; }
  .vf-seats { grid-area: seats; }
  .vf-count { grid-area: count; }
  .vf-per-km { grid-area: km; }
  .vf-minimum { grid-area: minimum; }
  .vf-remove { grid-area: remove; }
}

/* While the menu is read (owner, 6/11: «la scritta... deve essere più visibile»; the call buttons greyed). */
.visitor-menu .vm-status { margin: var(--s-3) 0 0; font-size: var(--fs-14); }
.visitor-menu.is-reading .vm-status { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1.5px solid var(--verm); border-radius: var(--r-md); background: color-mix(in srgb, var(--verm) 10%, var(--surface)); color: var(--text); font-size: var(--fs-16); font-weight: 600; font-variant-numeric: tabular-nums; animation: none; }
.visitor-menu.is-reading .vm-status::before { content: ""; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--verm) 30%, transparent); border-top-color: var(--verm); animation: vm-spin .9s linear infinite; }
@keyframes vm-spin { to { transform: rotate(360deg); } }
.visitor-menu .vm-status.error-text { padding: var(--s-3) var(--s-4); border: 1.5px solid var(--danger); border-radius: var(--r-md); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .visitor-menu.is-reading .vm-status::before { animation-duration: 2.4s; } }
.call-form :is([type=submit], [data-browser-call]):disabled { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
