/* ============================================================================
   COMUNE.DIGITAL — STYLE BASE
   Palette ufficiale + Titillium Web + componenti riusabili (pulsanti, card,
   form, badge). Da includere in tutte le pagine PRIMA di booking.css.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. IMPORT FONT — Titillium Web (300, 400, 600, 700)
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');

/* ----------------------------------------------------------------------------
   2. VARIABILI CSS — palette estesa Comune.Digital
   ---------------------------------------------------------------------------- */
:root {
  /* === BLU PRINCIPALE — identità Comune.Digital === */
  --cd-blue-700: #145284;
  --cd-blue-500: #2E6DA8;
  --cd-blue-300: #7BA7CE;
  --cd-blue-100: #D1E2F2;

  /* === VERDE SECONDARIO === */
  --cd-green-700: #3CA434;
  --cd-green-500: #59C64D;
  --cd-green-300: #A4E89A;
  --cd-green-100: #E2F8DE;

  /* === GRIGI === */
  --cd-gray-700: #4A4A4A;
  --cd-gray-500: #9B9B9B;
  --cd-gray-300: #D9D9D9;
  --cd-gray-100: #F5F5F5;

  /* === STATO === */
  --cd-warning: #FFCC00;
  --cd-error:   #D32F2F;
  --cd-info:    #0288D1;

  /* === BIANCO === */
  --cd-white: #FFFFFF;

  /* === TENANT (sovrascrivibili dal JSON tenant per branding personalizzato) === */
  --tenant-primary:   var(--cd-blue-700);
  --tenant-secondary: var(--cd-green-700);

  /* === SPAZIATURE === */
  --cd-space-xs: 4px;
  --cd-space-sm: 8px;
  --cd-space-md: 16px;
  --cd-space-lg: 24px;
  --cd-space-xl: 32px;

  /* === RAGGIO BORDI === */
  --cd-radius-sm: 6px;
  --cd-radius-md: 8px;
  --cd-radius-lg: 12px;
  --cd-radius-xl: 16px;

  /* === OMBRE === */
  --cd-shadow-sm: 0 2px 6px rgba(20, 82, 132, 0.05);
  --cd-shadow-md: 0 4px 12px rgba(20, 82, 132, 0.10);
  --cd-shadow-lg: 0 8px 24px rgba(20, 82, 132, 0.15);
}

/* ----------------------------------------------------------------------------
   3. RESET LEGGERO + BASE
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--cd-gray-100);
}

body {
  font-family: 'Titillium Web', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cd-gray-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--cd-blue-700);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--cd-blue-500); }

/* ----------------------------------------------------------------------------
   4. TIPOGRAFIA
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  color: var(--cd-blue-700);
  margin: 0 0 var(--cd-space-md) 0;
  line-height: 1.25;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--cd-space-md) 0; }

.cd-text-muted { color: var(--cd-gray-500); }
.cd-text-small { font-size: 0.85rem; }
.cd-text-bold  { font-weight: 700; }

/* ----------------------------------------------------------------------------
   5. CONTAINER MOBILE-FIRST
   ---------------------------------------------------------------------------- */
.cd-container {
  width: 100%;
  padding: var(--cd-space-md);
  margin: 0 auto;
}

@media (min-width: 600px) {
  .cd-container {
    padding: var(--cd-space-lg);
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .cd-container {
    max-width: 960px;
    padding: var(--cd-space-xl);
  }
}

/* ----------------------------------------------------------------------------
   6. TOPBAR (header)
   ---------------------------------------------------------------------------- */
.cd-topbar {
  background-color: var(--cd-white);
  border-bottom: 1px solid var(--cd-gray-300);
  padding: var(--cd-space-md);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--cd-shadow-sm);
}

.cd-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-space-md);
  max-width: 960px;
  margin: 0 auto;
}

.cd-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--cd-space-sm);
  font-weight: 700;
  color: var(--tenant-primary);
  font-size: 1.05rem;
}

.cd-topbar-brand img {
  height: 36px;
  width: auto;
}

.cd-topbar-actions { display: flex; gap: var(--cd-space-sm); align-items: center; }

/* Modalità embed (dentro app GoodBarber): nasconde la topbar nostra */
.embed-mode .cd-topbar { display: none; }
.embed-mode { padding-top: 0; }

/* ----------------------------------------------------------------------------
   7. PULSANTI
   ---------------------------------------------------------------------------- */
.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cd-space-sm);
  font-family: 'Titillium Web', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: var(--cd-radius-md);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  min-height: 44px;
  text-decoration: none;
  line-height: 1.2;
}
.cd-btn:active:not(:disabled) { transform: scale(0.98); }
.cd-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cd-btn-block { width: 100%; }

.cd-btn-primary {
  background-color: var(--tenant-primary);
  color: var(--cd-white);
}
.cd-btn-primary:hover:not(:disabled) { background-color: var(--cd-blue-500); color: var(--cd-white); }

.cd-btn-success {
  background-color: var(--cd-green-700);
  color: var(--cd-white);
}
.cd-btn-success:hover:not(:disabled) { background-color: var(--cd-green-500); color: var(--cd-white); }

.cd-btn-outline {
  background-color: transparent;
  color: var(--tenant-primary);
  border: 2px solid var(--tenant-primary);
  padding: 10px 18px;
}
.cd-btn-outline:hover:not(:disabled) { background-color: var(--cd-blue-100); }

.cd-btn-danger {
  background-color: var(--cd-error);
  color: var(--cd-white);
}
.cd-btn-danger:hover:not(:disabled) { background-color: #B71C1C; color: var(--cd-white); }

.cd-btn-ghost {
  background-color: transparent;
  color: var(--cd-gray-700);
  padding: 10px 12px;
  min-height: 40px;
}
.cd-btn-ghost:hover:not(:disabled) { background-color: var(--cd-gray-100); }

.cd-btn-sm { padding: 8px 14px; font-size: 0.9rem; min-height: 36px; }

/* ----------------------------------------------------------------------------
   8. CARD
   ---------------------------------------------------------------------------- */
.cd-card {
  background-color: var(--cd-white);
  border: 1px solid var(--cd-gray-300);
  border-radius: var(--cd-radius-lg);
  padding: var(--cd-space-md);
  box-shadow: var(--cd-shadow-sm);
}

.cd-card-clickable {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cd-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--cd-shadow-md);
}

.cd-card-success { background-color: var(--cd-green-100); border-left: 4px solid var(--cd-green-700); }
.cd-card-info    { background-color: var(--cd-blue-100);  border-left: 4px solid var(--cd-blue-700); }
.cd-card-warning { background-color: #FFF8E0;             border-left: 4px solid var(--cd-warning); }
.cd-card-danger  { background-color: #FDECEC;             border-left: 4px solid var(--cd-error); }

/* ----------------------------------------------------------------------------
   9. FORM
   ---------------------------------------------------------------------------- */
.cd-form-group { margin-bottom: var(--cd-space-md); }

.cd-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cd-gray-700);
}
.cd-form-group label.required::after {
  content: " *";
  color: var(--cd-error);
}

.cd-form-help {
  font-size: 0.85rem;
  color: var(--cd-gray-500);
  margin-top: 4px;
}

.cd-form-error {
  font-size: 0.85rem;
  color: var(--cd-error);
  margin-top: 4px;
  display: none;
}
.cd-form-error.is-visible { display: block; }

input.cd-input,
select.cd-select,
textarea.cd-textarea {
  width: 100%;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1rem;
  padding: 12px;
  border-radius: var(--cd-radius-md);
  border: 1.5px solid var(--cd-gray-300);
  background-color: var(--cd-white);
  color: var(--cd-gray-700);
  min-height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input.cd-input:focus,
select.cd-select:focus,
textarea.cd-textarea:focus {
  outline: none;
  border-color: var(--tenant-primary);
  box-shadow: 0 0 0 3px var(--cd-blue-100);
}
input.cd-input.invalid,
select.cd-select.invalid,
textarea.cd-textarea.invalid { border-color: var(--cd-error); }

textarea.cd-textarea { min-height: 96px; resize: vertical; }

/* ----------------------------------------------------------------------------
   10. BADGE / PILL (stato)
   ---------------------------------------------------------------------------- */
.cd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--cd-gray-100);
  color: var(--cd-gray-700);
  white-space: nowrap;
}
.cd-badge-success { background-color: var(--cd-green-100); color: var(--cd-green-700); }
.cd-badge-info    { background-color: var(--cd-blue-100);  color: var(--cd-blue-700); }
.cd-badge-warning { background-color: #FFF8E0;             color: #8C6A00; }
.cd-badge-danger  { background-color: #FDECEC;             color: var(--cd-error); }

/* ----------------------------------------------------------------------------
   11. ALERT (banner di pagina)
   ---------------------------------------------------------------------------- */
.cd-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--cd-space-sm);
  padding: var(--cd-space-md);
  border-radius: var(--cd-radius-md);
  margin-bottom: var(--cd-space-md);
  font-size: 0.95rem;
}
.cd-alert i { font-size: 1.1rem; margin-top: 2px; }
.cd-alert-info    { background-color: var(--cd-blue-100);  color: var(--cd-blue-700);  border-left: 4px solid var(--cd-blue-700); }
.cd-alert-success { background-color: var(--cd-green-100); color: var(--cd-green-700); border-left: 4px solid var(--cd-green-700); }
.cd-alert-warning { background-color: #FFF8E0;             color: #8C6A00;             border-left: 4px solid var(--cd-warning); }
.cd-alert-danger  { background-color: #FDECEC;             color: var(--cd-error);     border-left: 4px solid var(--cd-error); }

/* ----------------------------------------------------------------------------
   12. SKELETON LOADER
   ---------------------------------------------------------------------------- */
.cd-skeleton {
  background: linear-gradient(90deg, var(--cd-gray-100) 25%, var(--cd-gray-300) 50%, var(--cd-gray-100) 75%);
  background-size: 200% 100%;
  animation: cd-skeleton-shimmer 1.4s infinite;
  border-radius: var(--cd-radius-sm);
}
@keyframes cd-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
   13. UTILITY (poche e utili)
   ---------------------------------------------------------------------------- */
.cd-mt-0  { margin-top: 0 !important; }
.cd-mt-sm { margin-top: var(--cd-space-sm); }
.cd-mt-md { margin-top: var(--cd-space-md); }
.cd-mt-lg { margin-top: var(--cd-space-lg); }
.cd-mb-0  { margin-bottom: 0 !important; }
.cd-mb-sm { margin-bottom: var(--cd-space-sm); }
.cd-mb-md { margin-bottom: var(--cd-space-md); }
.cd-mb-lg { margin-bottom: var(--cd-space-lg); }

.cd-text-center { text-align: center; }
.cd-text-right  { text-align: right; }

.cd-flex          { display: flex; }
.cd-flex-col      { flex-direction: column; }
.cd-flex-wrap     { flex-wrap: wrap; }
.cd-flex-between  { display: flex; justify-content: space-between; align-items: center; }
.cd-gap-sm        { gap: var(--cd-space-sm); }
.cd-gap-md        { gap: var(--cd-space-md); }

.cd-hidden { display: none !important; }

/* ----------------------------------------------------------------------------
   13.1 ELEMENTI VISIBILI SOLO IN SVILUPPO (banner DEMO, hint OTP, credenziali)
   ----------------------------------------------------------------------------
   Default: nascosti.
   Diventano visibili solo se <body> ha classe is-dev (impostata da config.js
   quando rileva localhost / 127.0.0.1 / file:// / ?dev=1).
*/
.cd-dev-only { display: none !important; }
body.is-dev .cd-dev-only { display: revert !important; }
body.is-dev .cd-dev-only.cd-dev-flex   { display: flex !important; }
body.is-dev .cd-dev-only.cd-dev-block  { display: block !important; }
body.is-dev .cd-dev-only.cd-dev-inline { display: inline-block !important; }

.cd-divider {
  height: 1px;
  background-color: var(--cd-gray-300);
  margin: var(--cd-space-lg) 0;
}

/* ----------------------------------------------------------------------------
   14. MODALITÀ "VERDE" — sezioni a tema ambiente / iniziative
   ---------------------------------------------------------------------------- */
.cd-section-green {
  background-color: var(--cd-green-300);
  color: var(--cd-blue-700);
  padding: var(--cd-space-lg);
  border-radius: var(--cd-radius-lg);
}
.cd-section-green .cd-btn-primary {
  background-color: var(--cd-green-700);
}
.cd-section-green .cd-btn-primary:hover {
  background-color: var(--cd-green-500);
}

/* ----------------------------------------------------------------------------
   15. FOOTER MINIMALE
   ---------------------------------------------------------------------------- */
.cd-footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--cd-gray-500);
  padding: var(--cd-space-lg);
  margin-top: var(--cd-space-xl);
  border-top: 1px solid var(--cd-gray-300);
}
.cd-footer a { color: var(--cd-gray-700); }