:root { --pri:#ba4a2f; --bg:#f7f8f7; --card:#fff; --muted:#6b7280; --text:#111827; --br:14px; }
*{box-sizing:border-box} body{margin:0;color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}
.container{max-width:980px;margin:0 auto;padding:24px}
.site-header{padding:12px 24px;background:#fff;border-bottom:1px solid #eee}
.brand strong{font-weight:700} .brand span{color:var(--muted);margin-left:6px}
.hero{text-align:center;margin:24px 0 12px}
.circle{width:48px;height:48px;border-radius:999px;background:#e8efe8;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;color:#4b5563;font-weight:700}
.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:12px 0 24px}
.room-card{background:var(--card);border:1px solid #ebedf0;border-radius:var(--br);padding:16px}
.room-card h3{margin:0 0 6px 0}
.room-card p{margin:0;color:var(--muted)}
.card{background:var(--card);border:1px solid #ebedf0;border-radius:var(--br);padding:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-2 .full{grid-column:1/-1}
label{display:block;margin:2px 0 4px 0;color:#111; font-weight:600}
input,select,textarea{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:10px;background:#fff}
.btn{background:var(--pri);color:#fff;border:0;border-radius:999px;padding:10px 16px;cursor:pointer}
.result{margin-top:10px;color:var(--muted)}
@media (max-width:800px){.rooms-grid{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr}}

/* ——— Modal conferma ——— */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(17,24,39,.45);z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal.show{opacity:1;pointer-events:auto}
.modal-dialog{background:#fff;width:min(92vw,420px);border-radius:16px;padding:22px 22px 18px;box-shadow:0 20px 40px rgba(0,0,0,.18);transform:translateY(12px) scale(.98);transition:transform .22s ease}
.modal.show .modal-dialog{transform:translateY(0) scale(1)}
.modal-title{font-family: "TT Modernoir", Sans-serif;margin:10px 0 6px;font-size:20px;line-height:1.25;text-align:center}
.modal-sub{margin:0 0 14px;color:#6b7280;text-align:center}
.modal-actions{display:flex;gap:10px;justify-content:center}
.btn{background:var(--pri);color:#fff;border:0;border-radius:999px;padding:10px 16px;cursor:pointer}
.btn-ghost{background:#f4f5f4;color:#111827;border-radius:999px;padding:10px 14px;text-decoration:none;display:inline-block}

/* animazione piccola */
.anim{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:4px}
.anim .dot{width:12px;height:12px;border-radius:999px;background:var(--pri);animation:dotPulse 1.2s infinite ease-in-out}
.anim .ring{width:12px;height:12px;border-radius:999px;border:2px solid var(--pri);opacity:.6;animation:ringPulse 1.2s infinite ease-in-out .15s}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes ringPulse{0%{transform:scale(1);opacity:.6}50%{transform:scale(1.35);opacity:.35}100%{transform:scale(1);opacity:.6}}
.hidden{display:none}
/* Check animato (no loading) */
.check{display:flex;justify-content:center;align-items:center;margin-top:4px;margin-bottom:6px}
.check-svg{width:64px;height:64px}
.check-circle,.check-mark{
  stroke: var(--pri);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.check-circle{
  stroke-dasharray: 151;          /* ~2πr con r=24 */
  stroke-dashoffset: 151;
  animation: drawCircle .5s ease-out forwards, pop .25s ease-out .5s both;
  opacity: .9;
}
.check-mark{
  stroke-dasharray: 48;           /* adatto al path del segno di spunta */
  stroke-dashoffset: 48;
  animation: drawCheck .35s ease-out .45s forwards;
}
@keyframes drawCircle{to{stroke-dashoffset:0}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(.9)}to{transform:scale(1)}}


:root {
  --bg: #f7f2eb;
  --card: #ffffff;
  --pri: #c97152;        /* terracotta Momenteeria */
  --pri-soft: #f0ddd4;
  --text: #2f3436;
  --muted: #6b6f73;
  --br: 16px;
  --shadow-sm: 0 10px 30px rgba(201, 113, 82, 0.10);
  --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  color: var(--text);
  font-family: "Houschka Pro", Sans-serif;
}

.site-header {
  background: rgba(247, 242, 235, 0.65);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(201, 113, 82, 0.05);
}

.card,
.room-card {
  background: var(--card);
  border: 1px solid rgba(201, 113, 82, 0.06);
  border-radius: var(--br);
  box-shadow: var(--shadow-sm);
}

.btn {
  background: #7e9074;
  color: #fff;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201, 113, 82, 0.28);
}
.btn-ghost {
  background: rgba(247, 242, 235, 0.5);
  color: var(--text);
  border: 1px solid rgba(201, 113, 82, 0.2);
}

.rooms-grid .room-card h3 {
  font-weight: 600;
}

#booking-modal .modal-dialog {
  border: 1px solid rgba(201, 113, 82, 0.05);
  background: #fffdfb;
}

.check-circle,
.check-mark {
  stroke: var(--pri);
}
/* Tipografia Momenteeria */
:root {
  --heading-font: "TT Modernoir", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--body-font);
}

h1, h2, h3, .modal-title, .brand strong {
  font-family: var(--heading-font);
  letter-spacing: 0.01em;
}

/* eventuale hero title */
.hero h1 {
  font-family: var(--heading-font);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
}