/* ============================================================
   Quick Reserve — structural styles.
   Every colour comes from a variable so each template re-skins it:
   --vb-pop-bg  --vb-pop-fg  --vb-pop-muted  --vb-pop-line
   --vb-accent  --vb-accent-fg  --vb-radius  --vb-pop-shadow
   ============================================================ */
.vb-field { position: relative; }

.vb-pop {
  position: absolute; z-index: 90; top: calc(100% + 10px); left: 0;
  min-width: 320px;
  background: var(--vb-pop-bg, #fff);
  color: var(--vb-pop-fg, #16181d);
  border: 1px solid var(--vb-pop-line, rgba(0,0,0,.10));
  border-radius: var(--vb-radius, 10px);
  box-shadow: var(--vb-pop-shadow, 0 24px 60px -12px rgba(10,15,30,.28));
  padding: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  text-align: left;
}
.vb-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.vb-pop--right { left: auto; right: 0; }

/* ---- calendar ---- */
.vbc-nav { display: flex; justify-content: space-between; margin-bottom: 6px; }
.vbc-arrow {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--vb-pop-line, rgba(0,0,0,.12));
  background: transparent; color: inherit; font-size: 14px; line-height: 1;
  transition: background .15s, border-color .15s;
}
.vbc-arrow:hover:not(:disabled) { background: var(--vb-accent, #b0872f); color: var(--vb-accent-fg, #fff); border-color: transparent; }
.vbc-arrow:disabled { opacity: .25; cursor: default; }

.vbc-months { display: flex; gap: 26px; }
.vbc-month { width: 224px; }
.vbc-mhead { text-align: center; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.vbc-dow, .vbc-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.vbc-dow span { text-align: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vb-pop-muted, #8a8f99); padding-bottom: 6px; }
.vbc-grid { gap: 1px; }
.vbc-pad { height: 32px; }
.vbc-day {
  height: 32px; border: 0; background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-size: 13px; border-radius: 6px; position: relative;
  transition: background .12s, color .12s;
}
.vbc-day:hover:not(:disabled):not(.is-start):not(.is-end) { background: color-mix(in srgb, var(--vb-accent, #b0872f) 16%, transparent); }
.vbc-day.is-off, .vbc-day:disabled { color: var(--vb-pop-muted, #b6bac2); opacity: .45; cursor: default; }
.vbc-day.is-mid { background: color-mix(in srgb, var(--vb-accent, #b0872f) 13%, transparent); border-radius: 0; }
.vbc-day.is-start, .vbc-day.is-end { background: var(--vb-accent, #b0872f); color: var(--vb-accent-fg, #fff); font-weight: 600; }
.vbc-day.is-start { border-radius: 6px 0 0 6px; }
.vbc-day.is-end   { border-radius: 0 6px 6px 0; }

.vbc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vb-pop-line, rgba(0,0,0,.08)); }
.vbc-hint { font-size: 12px; color: var(--vb-pop-muted, #8a8f99); }
.vbc-clear { border: 0; background: none; color: var(--vb-accent, #b0872f); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---- occupancy ---- */
.vbo-list { display: flex; flex-direction: column; gap: 6px; }
.vbo-room { padding: 12px 0; border-bottom: 1px solid var(--vb-pop-line, rgba(0,0,0,.08)); }
.vbo-room:last-child { border-bottom: 0; }
.vbo-rhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--vb-pop-muted, #8a8f99); }
.vbo-remove { border: 0; background: none; color: var(--vb-accent, #b0872f); font: inherit; font-size: 11px; letter-spacing: .04em; cursor: pointer; text-transform: none; }
.vbo-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; }
.vbo-lab strong { display: block; font-size: 14px; font-weight: 500; }
.vbo-lab em { font-style: normal; font-size: 11.5px; color: var(--vb-pop-muted, #8a8f99); }
.vbo-step { display: flex; align-items: center; gap: 10px; }
.vbo-step button {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
  border: 1px solid var(--vb-pop-line, rgba(0,0,0,.16)); background: transparent; color: inherit;
  transition: background .14s, border-color .14s, color .14s;
}
.vbo-step button:hover:not(:disabled) { background: var(--vb-accent, #b0872f); color: var(--vb-accent-fg, #fff); border-color: transparent; }
.vbo-step button:disabled { opacity: .28; cursor: default; }
.vbo-step output { min-width: 18px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.vbo-ages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.vbo-age { display: flex; flex-direction: column; gap: 3px; }
.vbo-age span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vb-pop-muted, #8a8f99); }
.vbo-age select {
  font: inherit; font-size: 13px; padding: 6px 8px; color: inherit;
  border: 1px solid var(--vb-pop-line, rgba(0,0,0,.16)); border-radius: 6px; background: transparent;
}
.vbo-add { width: 100%; margin-top: 12px; padding: 10px; cursor: pointer; font: inherit; font-size: 13px;
  border: 1px dashed var(--vb-pop-line, rgba(0,0,0,.2)); border-radius: 8px; background: transparent; color: var(--vb-accent, #b0872f); }
.vbo-add:hover { border-style: solid; }
.vbo-note { margin: 12px 0 0; font-size: 11.5px; color: var(--vb-pop-muted, #8a8f99); }

@media (max-width: 720px) {
  .vb-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 78vh; overflow-y: auto; }
  .vbc-months { flex-direction: column; gap: 20px; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════
   STANDALONE SKIN
   Everything above is structure. Everything below is the default
   look, and every colour is a variable — override these five on
   .vb-widget (or :root) to match the host site and you are done.
   ══════════════════════════════════════════════════════════════ */
.vb-widget{
  --vb-brand:#2f5fcc;        /* buttons + active state           */
  --vb-brand-hi:#3f72e8;     /* hover                            */
  --vb-fg:#0c1626;           /* primary text                     */
  --vb-muted:#626f84;        /* labels + helper text             */
  --vb-line:#dde4ec;         /* borders                          */
  --vb-field:#f4f6fa;        /* field background                 */
  --vb-surface:#ffffff;      /* widget background                */
  --vb-radius-outer:14px;
  --vb-radius-inner:10px;

  /* feed the shared popover tokens from the five above */
  --vb-pop-bg:var(--vb-surface); --vb-pop-fg:var(--vb-fg);
  --vb-pop-muted:var(--vb-muted); --vb-pop-line:var(--vb-line);
  --vb-accent:var(--vb-brand); --vb-accent-fg:#fff;
  --vb-radius:var(--vb-radius-inner);
  --vb-pop-shadow:0 24px 56px -20px rgba(12,22,38,.28);

  background:var(--vb-surface);
  color:var(--vb-fg);
  border:1px solid var(--vb-line);
  border-radius:var(--vb-radius-outer);
  padding:22px;
  font-family:inherit;
  font-size:16px;
  line-height:1.5;
  box-sizing:border-box;
}
.vb-widget *,.vb-widget *::before,.vb-widget *::after{box-sizing:border-box}

.vb-widget form{display:grid;gap:16px;grid-template-columns:1fr;margin:0}
@media(min-width:860px){
  .vb-widget form{grid-template-columns:1.45fr 1.25fr auto;align-items:end}
}
.vb-widget .vb-label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--vb-muted);margin:0 0 6px}
.vb-widget .vb-trigger{
  width:100%;text-align:left;font:inherit;font-size:16px;color:var(--vb-muted);
  background:var(--vb-field);border:1.5px solid transparent;
  border-radius:var(--vb-radius-inner);padding:14px 15px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s}
.vb-widget .vb-trigger:hover{background:#e9eef7}
.vb-widget .vb-trigger.is-set{color:var(--vb-fg)}
.vb-widget .vb-field:has(.vb-pop.is-open) .vb-trigger{
  border-color:var(--vb-brand);background:var(--vb-surface)}
.vb-widget .vb-trigger:focus-visible,
.vb-widget .vb-submit:focus-visible,
.vb-widget .vb-promo-toggle:focus-visible{outline:2px solid var(--vb-brand);outline-offset:2px}

.vb-widget .vb-submit{
  font:inherit;font-size:16px;font-weight:600;color:#fff;background:var(--vb-brand);
  border:0;border-radius:var(--vb-radius-inner);padding:15px 30px;cursor:pointer;
  white-space:nowrap;transition:background .16s}
.vb-widget .vb-submit:hover{background:var(--vb-brand-hi)}

.vb-widget .vb-extra{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;margin-top:2px}
.vb-widget .vb-promo-toggle{
  background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:500;
  color:var(--vb-brand);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.vb-widget .vb-promo-toggle .chev{font-size:11px;transition:transform .2s}
.vb-widget [data-vb-promo-wrap].is-open .chev{transform:rotate(180deg)}
.vb-widget [data-vb-promo-wrap] input{
  display:none;font:inherit;font-size:15px;background:var(--vb-field);
  border:1.5px solid transparent;border-radius:var(--vb-radius-inner);
  padding:10px 12px;width:100%;margin-top:8px;color:var(--vb-fg)}
.vb-widget [data-vb-promo-wrap].is-open input{display:block}
.vb-widget [data-vb-promo-wrap] input:focus{outline:0;border-color:var(--vb-brand)}
.vb-widget .vb-note{font-size:13px;color:var(--vb-muted);margin:0}

/* dark host pages: add class="vb-widget vb-dark" */
.vb-widget.vb-dark{
  --vb-fg:#f2f5f9; --vb-muted:#9fadbe; --vb-line:rgba(255,255,255,.16);
  --vb-field:rgba(255,255,255,.06); --vb-surface:#111a28;
}
.vb-widget.vb-dark .vb-trigger:hover{background:rgba(255,255,255,.10)}