/* Stayly UI. All values come from tokens.css (brand kit). */
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url(fonts/public-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url(fonts/public-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url(fonts/public-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url(fonts/public-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url(fonts/public-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url(fonts/public-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--stayly-color-bg); color: var(--stayly-color-primary);
  font-family: var(--stayly-font-family); font-size: var(--stayly-corpo-size); line-height: var(--stayly-corpo-line);
}
h1 { font-size: var(--stayly-h1-size); line-height: var(--stayly-h1-line); font-weight: var(--stayly-h1-weight); margin: 0; letter-spacing: -0.02em; }
h2 { font-size: var(--stayly-h3-size); line-height: var(--stayly-h3-line); font-weight: var(--stayly-h3-weight); margin: 0; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--stayly-color-primary); outline-offset: 2px; }
.muted, small { color: var(--stayly-color-muted); font-size: var(--stayly-didascalia-size); line-height: var(--stayly-didascalia-line); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 640px; margin: 0 auto; padding: var(--stayly-space-24) var(--stayly-space-16) var(--stayly-space-64); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--stayly-space-16); margin-bottom: var(--stayly-space-32); }
.topbar .logo { height: 30px; width: auto; display: block; }
.lang { display: flex; gap: var(--stayly-space-4); }
.btn {
  font: inherit; font-size: var(--stayly-comandi-size); line-height: var(--stayly-comandi-line); font-weight: var(--stayly-comandi-weight);
  border-radius: var(--stayly-radius-field); padding: var(--stayly-space-8) var(--stayly-space-16); cursor: pointer;
  border: 1px solid var(--stayly-color-primary); background: transparent; color: var(--stayly-color-primary); min-height: 40px;
}
.btn-primary { background: var(--stayly-color-primary); color: var(--stayly-color-on-primary); }
.btn[aria-pressed="true"] { background: var(--stayly-color-primary); color: var(--stayly-color-on-primary); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Hero: ink background, straw accents, optional property photo. */
.hero {
  position: relative; overflow: hidden; margin: 0 calc(-1 * var(--stayly-space-16)) var(--stayly-space-24);
  min-height: 260px; display: grid; align-content: end; padding: var(--stayly-space-24) var(--stayly-space-16);
  background: #192C43; color: #F8F5EC;
}
@media (min-width: 672px) { .hero { margin-left: 0; margin-right: 0; border-radius: var(--stayly-radius-dialog); } }
.hero::before { /* folded-corner motif from the brand mark */
  content: ""; position: absolute; top: 0; right: 0; width: 72px; height: 72px; background: #E9CD78;
  clip-path: polygon(0 0, 100% 0, 100% 100%); z-index: 2;
}
.hero img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(25 44 67 / 5%) 30%, rgb(25 44 67 / 88%)); }
.hero > .text { position: relative; z-index: 3; display: grid; gap: var(--stayly-space-8); }
.hero .eyebrow { font-size: var(--stayly-didascalia-size); font-weight: var(--stayly-weight-bold); letter-spacing: .14em; text-transform: uppercase; color: #E9CD78; }
.hero h1 { color: #F8F5EC; }
.hero .band { display: inline-block; justify-self: start; margin-top: var(--stayly-space-8); background: #E9CD78; color: #192C43; font-weight: var(--stayly-weight-semibold); font-size: var(--stayly-comandi-size); padding: var(--stayly-space-4) var(--stayly-space-12); border-radius: var(--stayly-radius-field); }
.hero .pattern { position: absolute; inset: 0; z-index: 0; opacity: .14; background-image: repeating-linear-gradient(135deg, #E9CD78 0 2px, transparent 2px 22px); }
.quick { display: flex; gap: var(--stayly-space-8); overflow-x: auto; margin-bottom: var(--stayly-space-24); padding-bottom: var(--stayly-space-4); }
.quick a { flex: none; display: inline-flex; align-items: center; gap: var(--stayly-space-8); text-decoration: none; background: var(--stayly-color-surface); border: 1px solid var(--stayly-color-line); border-radius: 999px; padding: var(--stayly-space-8) var(--stayly-space-12); font-size: var(--stayly-comandi-size); font-weight: var(--stayly-weight-semibold); }
.quick a svg { width: 18px; height: 18px; }

.cards { display: grid; gap: var(--stayly-space-12); }
.card {
  background: var(--stayly-color-surface); border-radius: var(--stayly-radius-card); box-shadow: var(--stayly-shadow-raised);
  padding: var(--stayly-space-16); display: grid; grid-template-columns: 24px 1fr; gap: var(--stayly-space-4) var(--stayly-space-12);
}
.card > svg { color: var(--stayly-color-on-accent); background: var(--stayly-color-accent); border-radius: 50%; padding: 6px; width: 32px; height: 32px; margin: -4px 0 0 -4px; }
.card { grid-template-columns: 32px 1fr; border-left: 3px solid var(--stayly-color-accent); }
.card h2 { font-size: var(--stayly-comandi-size); line-height: var(--stayly-comandi-line); font-weight: var(--stayly-weight-semibold); text-transform: uppercase; letter-spacing: .08em; color: var(--stayly-color-muted); }
.card .body { grid-column: 2; white-space: pre-line; }
.wifi-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stayly-space-8); }
.wifi-pass { font-weight: var(--stayly-weight-bold); background: var(--stayly-color-accent); color: var(--stayly-color-on-accent); padding: 0 var(--stayly-space-8); border-radius: var(--stayly-radius-field); }
details { border-top: 1px solid var(--stayly-color-line); padding: var(--stayly-space-8) 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-weight: var(--stayly-weight-semibold); }

.chat { margin-top: var(--stayly-space-32); background: var(--stayly-color-surface); border-radius: var(--stayly-radius-dialog); box-shadow: var(--stayly-shadow-raised); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: var(--stayly-space-12); padding: var(--stayly-space-16); background: var(--stayly-color-primary); color: var(--stayly-color-on-primary); }
.chat-head h2 { font-size: var(--stayly-corpo-size); }
.notice { display: flex; gap: var(--stayly-space-8); padding: var(--stayly-space-12) var(--stayly-space-16); border-bottom: 1px solid var(--stayly-color-line); color: var(--stayly-color-warning); font-size: var(--stayly-didascalia-size); line-height: var(--stayly-didascalia-line); }
.log { list-style: none; margin: 0; padding: var(--stayly-space-16); display: grid; gap: var(--stayly-space-12); max-height: 55vh; overflow-y: auto; }
.msg { max-width: 85%; padding: var(--stayly-space-8) var(--stayly-space-12); border-radius: var(--stayly-radius-card); white-space: pre-line; }
.msg.guest { justify-self: end; background: var(--stayly-color-primary); color: var(--stayly-color-on-primary); }
.msg.bot { justify-self: start; background: var(--stayly-color-bg); }
.msg.bot.handoff { border-left: 3px solid var(--stayly-color-accent); }
.msg.host { justify-self: start; background: var(--stayly-color-accent); color: var(--stayly-color-on-accent); }
.msg.host small { display: block; color: inherit; font-weight: var(--stayly-weight-bold); margin-bottom: 2px; }
.feedback { margin-top: var(--stayly-space-32); background: var(--stayly-color-surface); border-radius: var(--stayly-radius-card); box-shadow: var(--stayly-shadow-raised); padding: var(--stayly-space-16); display: grid; gap: var(--stayly-space-12); }
.feedback .stars { display: flex; gap: var(--stayly-space-4); }
.feedback .stars button { font: inherit; font-size: 28px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--stayly-color-line); padding: var(--stayly-space-4); }
.feedback .stars button[aria-pressed="true"] { color: var(--stayly-color-primary); }
.feedback textarea { font: inherit; min-height: 80px; padding: var(--stayly-space-8) var(--stayly-space-12); border: 1px solid var(--stayly-color-primary); border-radius: var(--stayly-radius-field); background: var(--stayly-color-surface); color: var(--stayly-color-primary); }
.btn-accent { background: var(--stayly-color-accent); color: var(--stayly-color-on-accent); border-color: var(--stayly-color-accent); }
.feedback-cta { display: flex; justify-content: center; margin-top: var(--stayly-space-32); }
.msg.error { justify-self: start; color: var(--stayly-color-error); background: transparent; padding-left: 0; }
.composer { display: flex; gap: var(--stayly-space-8); padding: var(--stayly-space-12) var(--stayly-space-16) var(--stayly-space-16); }
.composer textarea {
  flex: 1; font: inherit; resize: none; min-height: 44px; max-height: 140px; padding: var(--stayly-space-8) var(--stayly-space-12);
  border: 1px solid var(--stayly-color-primary); border-radius: var(--stayly-radius-field); background: var(--stayly-color-surface); color: var(--stayly-color-primary);
}
.footer { margin-top: var(--stayly-space-48); display: flex; justify-content: space-between; gap: var(--stayly-space-16); flex-wrap: wrap; }
.state { padding: var(--stayly-space-48) 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) { .msg { animation: in .18s ease-out; } @keyframes in { from { opacity: 0; transform: translateY(4px); } } }
.ask-row { display: flex; justify-content: flex-end; padding: 0 var(--stayly-space-16) var(--stayly-space-16); margin-top: calc(-1 * var(--stayly-space-8)); }
.ask-host { min-height: 36px; font-size: var(--stayly-didascalia-size); border-style: dashed; }
.extras { margin-top: var(--stayly-space-32); display: grid; gap: var(--stayly-space-12); }
.card.extra { grid-template-columns: 1fr; gap: var(--stayly-space-12); }
.extra-head { display: flex; justify-content: space-between; gap: var(--stayly-space-12); align-items: start; }
.extra .price { font-weight: var(--stayly-weight-bold); white-space: nowrap; background: var(--stayly-color-accent); color: var(--stayly-color-on-accent); padding: 0 var(--stayly-space-8); border-radius: var(--stayly-radius-field); }
.extra input[type=date], .extra textarea { font: inherit; padding: var(--stayly-space-8); border: 1px solid var(--stayly-color-primary); border-radius: var(--stayly-radius-field); background: var(--stayly-color-surface); color: var(--stayly-color-primary); }
.extra .field-label { display: grid; gap: var(--stayly-space-4); font-size: var(--stayly-comandi-size); font-weight: var(--stayly-weight-semibold); }
.extra-status { font-weight: var(--stayly-weight-semibold); }
.extra-status.accepted { color: var(--stayly-color-success); }
.extra-status.declined { color: var(--stayly-color-error); }
.extra-status.pending { color: var(--stayly-color-warning); }