/* Shared "Accogliente" invitation. Keep the page grid outside this card. */
.visibility-panel {
  box-sizing: border-box;
  container-type: inline-size;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 34px 30px;
  border: 1px solid #d5e5f2;
  border-radius: 20px;
  background: #f0f7fd;
  box-shadow: 0 10px 30px rgba(0, 50, 90, .07);
  color: #003c70;
  font-family: 'Poppins', sans-serif;
  text-align: center;
}

.visibility-panel *, .visibility-panel *::before, .visibility-panel *::after {
  box-sizing: border-box;
}

.visibility-panel .visibility-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #dceefb;
  color: #003c70;
}

.visibility-panel .visibility-panel-icon .fa { font-size: 26px; line-height: 1; }

.visibility-panel .visibility-panel-title {
  margin: 0;
  padding: 0;
  color: #003c70;
  font-family: inherit;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.6px;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Override the legacy #page h2 margins without changing responsive type sizes. */
#page .visibility-panel .visibility-panel-title { margin: 0; }

.visibility-panel .visibility-panel-description {
  max-width: 410px;
  margin: 11px auto 0;
  padding: 0;
  color: #485c6d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.visibility-panel .visibility-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.visibility-panel .visibility-panel-primary,
.visibility-panel .visibility-panel-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  max-width: 100%;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid #d5e5f2;
  border-radius: 11px;
  background: #fff;
  color: #003c70;
  font: 500 14px/1.5 'Poppins', sans-serif;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .15s;
}

.visibility-panel .visibility-panel-primary {
  border-color: #0759a3;
  background: #0759a3;
  color: #fff;
}

.visibility-panel .visibility-panel-primary span { min-width: 0; }
.visibility-panel .visibility-panel-actions .fa { flex-shrink: 0; font-size: 16px; line-height: 1; }
.visibility-panel .visibility-panel-primary:hover { border-color: #064b89; background: #064b89; color: #fff; text-decoration: none; }
.visibility-panel .visibility-panel-secondary:hover { background: #dceefb; color: #003c70; }
.visibility-panel .visibility-panel-primary:focus-visible,
.visibility-panel .visibility-panel-secondary:focus-visible { outline: 3px solid #287ab9; outline-offset: 3px; }

/* A card can be narrow even on a wide screen when it sits beside a map. */
@container (max-width: 370px) {
  .visibility-panel .visibility-panel-title { font-size: 24px; }
  .visibility-panel .visibility-panel-actions { flex-direction: column; }
  .visibility-panel .visibility-panel-actions > * { width: 100%; }
}

@media (max-width: 599px) {
  .visibility-panel { padding: 28px 20px; }
  .visibility-panel .visibility-panel-title { font-size: 24px; }
  .visibility-panel .visibility-panel-actions { flex-direction: column; }
  .visibility-panel .visibility-panel-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .visibility-panel .visibility-panel-primary,
  .visibility-panel .visibility-panel-secondary { transition: none; }
}