/* Cantaleone / HotelDruid availability form — v1, 2026-10-01.
   Load through HotelDruid's CSS URL for framed mode.
   No changes to booking logic, field names or visibility of functional controls.
   Font names match Hotelica; local fallback avoids third-party font requests.
*/
:root {
  --ct-accent: #e64a19;
  --ct-accent-hover: #c63b12;
  --ct-text: #2c2c2c;
  --ct-muted: #616161;
  --ct-border: #d9dedf;
  --ct-surface: #faf6f5;
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0 !important; padding: 20px !important;
  background: #fff !important; color: var(--ct-text) !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 16px; line-height: 1.6;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--ct-accent); text-underline-offset: 3px; }
a:hover { color: var(--ct-accent-hover); }
big, h1, h2, h3 { font-family: Raleway, Arial, sans-serif; color: var(--ct-text); }
big { font-size: 1.25em; }
/* Legacy generated HTML uses inline table wrappers rather than named cards. */
body > div { max-width: 960px; margin-inline: auto !important; }
body > div[style*="border-bottom"] {
  width: 100% !important; padding: 8px 0 16px !important;
  border-bottom: 1px solid var(--ct-border) !important;
  background: #fff !important; text-align: left;
}
body > div[style*="border-bottom"] a { color: var(--ct-muted) !important; }
body > div > table[border="1"], table.formframe {
  width: 100%; max-width: 760px; background: #fff !important;
  border: 1px solid var(--ct-border) !important; border-radius: 12px !important;
  box-shadow: 0 6px 24px rgba(44,44,44,.06); border-spacing: 0;
}
body > div > table[border="1"] > tbody > tr > td,
table.formframe > tbody > tr > td { padding: 24px !important; }
form { margin: 0; text-align: left; }
form table { max-width: 100%; }
.ftxt { font: inherit; }
.check_avail_line { line-height: 2.4; }
select, textarea, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  font: inherit; color: var(--ct-text);
}
select, textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="password"] {
  max-width: 100%; min-height: 46px; padding: 9px 12px;
  border: 1px solid var(--ct-border); border-radius: 7px; background: #fff;
  vertical-align: middle;
}
select { margin: 5px 4px 5px 0; }
textarea { width: 100%; min-height: 112px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ct-accent); }
input[type="submit"], input[type="button"], button {
  min-height: 44px; padding: 10px 16px; margin: 5px 0;
  border: 1px solid var(--ct-border); border-radius: 7px;
  background: #f7f8f8; color: var(--ct-text); cursor: pointer;
  font: inherit; font-weight: 500; white-space: normal;
}
.avail_button { display: block; margin-top: 16px; }
.avail_button input, input[name="contr_disp"], .book_button input, .book_button button {
  background: var(--ct-accent); border-color: var(--ct-accent); color: #fff;
  padding: 12px 22px; font-weight: 600; min-height: 48px;
}
.avail_button input:hover, input[name="contr_disp"]:hover,
.book_button input:hover, .book_button button:hover {
  background: var(--ct-accent-hover); border-color: var(--ct-accent-hover);
}
input[name="aggiungi_nuova_tipologia"] { background: #fff; color: var(--ct-muted); }
:where(input, select, textarea, button, a):focus-visible {
  outline: 3px solid #1d4578; outline-offset: 3px;
}
input:disabled, button:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
/* Keep HotelDruid's visibility and absolute position: JS controls the popup. */
.datepick {
  z-index: 1000 !important; padding: 12px !important;
  background: #fff !important; color: var(--ct-text) !important;
  border: 1px solid var(--ct-border) !important; border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.15) !important;
  font: 14px/1.5 Roboto, Arial, sans-serif !important;
  max-width: calc(100vw - 24px);
}
.caltitle { display: inline-block; font-weight: 700; padding-bottom: 6px; }
.caltable { width: auto; border-collapse: separate !important; border-spacing: 2px !important; font-size: 14px !important; }
.caltable td, .caltable th { min-width: 30px; height: 32px; text-align: center; border-radius: 4px; }
.caltable td[onclick] { cursor: pointer; }
.caltable td[onclick]:hover { outline: 2px solid var(--ct-accent); outline-offset: -2px; }
.calbutton {
  min-width: 34px !important; min-height: 34px !important;
  padding: 5px 8px !important; font-size: 14px !important;
  border: 1px solid var(--ct-border) !important; border-radius: 5px !important;
  background: #f7f8f8 !important; color: var(--ct-text) !important;
}
.dbutton {
  min-width: 44px !important; min-height: 46px !important;
  padding: 8px !important; border-radius: 7px !important;
  background: var(--ct-surface) !important;
}
/* Results and request-step base styling; confirm with a live availability test. */
.t_book, .tab_disp { border-collapse: separate; border-spacing: 0; max-width: 100%; }
.t_book td, .tab_disp td, .tab_disp th { padding: 10px; }
.tab_disp td, .tab_disp th { border-color: var(--ct-border); }
.bar_av { padding: 12px; background: var(--ct-surface); color: var(--ct-muted); border-radius: 7px; }
@media (max-width: 600px) {
  body { padding: 12px !important; }
  body > div > table[border="1"] > tbody > tr > td,
  table.formframe > tbody > tr > td { padding: 14px !important; }
  .check_avail_line { line-height: 1.8; }
  select[name^="numero_tariffa"] { display: block; width: 100%; }
  .avail_button input, input[name="contr_disp"] { width: 100%; }
  input[name="aggiungi_nuova_tipologia"] { max-width: 100%; }
  form td { overflow-wrap: anywhere; }
}

:root {
  --ct-accent: #95613b;
  --ct-accent-hover: #784b2d;
}

.avail_button input,
input[name="contr_disp"],
.book_button input,
.book_button button {
  background: rgba(149, 97, 59, 0.88);
  border-color: rgba(149, 97, 59, 0.35);
  color: #fff;
}

/* Datum und Kalender am Handy gemeinsam unter der Beschriftung */
@media (max-width: 600px) {
  .cl-date-control {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 4px 0 12px;
  }

  .cl-date-control select {
    flex: 1;
    min-width: 0;
    width: auto !important;
    max-width: 260px;
    margin: 0 !important;
  }

  .cl-date-control input[id^="bcal"] {
    flex: 0 0 36px;
    width: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
  }
}