.vb-app { max-width: 780px; margin: 0 auto; font-family: inherit; }
.vb-lang-switch { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 10px; }
.vb-lang-btn { border: 1px solid #ccc; background: #fff; border-radius: 4px; padding: 3px 8px; font-size: 0.78em; font-weight: 700; cursor: pointer; color: #555; }
.vb-lang-btn.active { background: #2c5f2d; color: #fff; border-color: #2c5f2d; }
.vb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2em; }
.vb-tab { padding: 10px 18px; border: 1px solid #ccc; border-radius: 6px; background: #f7f7f7; cursor: pointer; font-weight: 600; }
.vb-tab.active { background: #2c5f2d; color: #fff; border-color: #2c5f2d; }
.vb-villa-desc { color: #555; margin-bottom: 1em; }

.vb-calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vb-calendar-nav button { background: none; border: 1px solid #ccc; border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.vb-rules-banner { font-size: 0.85em; color: #8a5a00; background: #fff6e5; border: 1px solid #f0dca0; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; }
.vb-rules-banner:empty { display: none; }
.vb-calendar-msg { color: #a33; font-size: 0.9em; margin-top: 8px; min-height: 1.2em; }
.vb-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.vb-month table { width: 100%; border-collapse: collapse; }
.vb-month caption { font-weight: 700; margin-bottom: 6px; text-align: left; }
.vb-month th { font-size: 0.75em; color: #888; font-weight: 500; padding: 4px 0; }
.vb-month td { text-align: center; padding: 0; }
.vb-day { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; min-height: 38px; margin: 2px; border-radius: 5px; font-size: 0.85em; line-height: 1.15; padding: 3px 0; cursor: pointer; }
.vb-day.vb-empty { cursor: default; }
.vb-day.vb-past { color: #ccc; cursor: not-allowed; }
.vb-day.vb-free:hover { background: #dcefe0; }
.vb-day.vb-occupied { background: #f4d4d4; color: #a33; cursor: not-allowed; text-decoration: line-through; }
.vb-day.vb-selected { background: #2c5f2d; color: #fff; }
.vb-day.vb-in-range { background: #cfe8d2; }
.vb-day-price { font-size: 0.62em; font-weight: 700; color: #2c5f2d; margin-top: 1px; line-height: 1; }
.vb-day.vb-selected .vb-day-price { color: #fff; }

/* 1.42.26: same-day turnover ("half bezette dag"). vb-checkin-only is the
   arrival night of an existing stay - still clickable, but only as a
   checkout for a different booking. vb-checkout-boundary is the (already
   free/clickable) departure day of a stay, half-colored purely so visitors
   understand guests may still be leaving that morning. Both use a diagonal
   split so the day never looks fully free or fully occupied. Three-class
   overrides below keep selected/in-range states visually consistent
   regardless of stylesheet order (higher specificity always wins). */
.vb-day.vb-checkin-only { background: linear-gradient(135deg, #fff 50%, #f4d4d4 50%); color: #333; cursor: pointer; }
.vb-day.vb-checkin-only:hover { background: linear-gradient(135deg, #dcefe0 50%, #f4d4d4 50%); }
.vb-day.vb-checkout-boundary { background: linear-gradient(135deg, #f4d4d4 50%, #fff 50%); }
.vb-day.vb-checkout-boundary:hover { background: linear-gradient(135deg, #f4d4d4 50%, #dcefe0 50%); }
.vb-day.vb-selected.vb-checkin-only,
.vb-day.vb-selected.vb-checkout-boundary { background: #2c5f2d; color: #fff; }
.vb-day.vb-in-range.vb-checkout-boundary { background: #cfe8d2; }

.vb-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 20px; font-size: 0.85em; color: #555; }
.vb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vb-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.vb-legend .free i { background: #fff; border: 1px solid #ccc; }
.vb-legend .occupied i { background: #f4d4d4; }
.vb-legend .halfday i { background: linear-gradient(135deg, #fff 50%, #f4d4d4 50%); border: 1px solid #ccc; }
.vb-legend .selected i { background: #2c5f2d; }

.vb-panel { border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px 20px; margin-top: 16px; background: #fafafa; }
.vb-panel label { display: block; margin: 10px 0 4px; font-weight: 600; }
.vb-panel input[type="text"], .vb-panel input[type="email"], .vb-panel input[type="tel"], .vb-panel textarea, .vb-panel select {
	width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background: #fff; font-family: inherit; font-size: inherit;
}
.vb-field-row { display: flex; gap: 12px; }
.vb-field-row > div { flex: 1; min-width: 0; }
/* 160px (was 110px) - 110 was too narrow for "House number"/"Country code"
   to fit on one line, which wrapped the label and pushed the input down,
   throwing off the row's alignment; the phone-country <select> also needs
   room to show e.g. "Belgium (+32)" without clipping. The field next to it
   (flex: 1, above) shrinks to make room automatically - still plenty of
   space for Street name / Phone number even on a fairly narrow screen. */
.vb-field-row > .vb-field-narrow { flex: 0 0 160px; }
@media (max-width: 480px) {
	/* Same cramped-narrow-column problem, worse on small screens - stack
	   instead of forcing both columns to share limited width. */
	.vb-field-row { flex-direction: column; gap: 0; }
	.vb-field-row > .vb-field-narrow { flex-basis: auto; }
}
.vb-consent-label { display: flex; align-items: flex-start; gap: 8px; font-weight: normal; font-size: 0.9em; margin-top: 12px; }
.vb-consent-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.vb-price-line { display: flex; justify-content: space-between; padding: 4px 0; }
.vb-price-total { display: flex; justify-content: space-between; padding: 8px 0; font-weight: 700; border-top: 1px solid #ccc; margin-top: 6px; }
.vb-btn { background: #2c5f2d; color: #fff; border: none; padding: 12px 20px; border-radius: 6px; font-weight: 700; cursor: pointer; margin-top: 12px; }
.vb-btn:disabled { background: #aaa; cursor: not-allowed; }
.vb-error { color: #a33; margin-top: 8px; }
.vb-success { color: #256029; background: #e5f5e8; padding: 12px; border-radius: 6px; margin-top: 10px; }
.vb-loading { color: #888; }

.vb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 20px; }
.vb-modal { background: #fff; border-radius: 10px; padding: 28px 26px; max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.25); text-align: center; }
.vb-modal h3 { margin: 0 0 12px; color: #2c5f2d; }
.vb-modal p { margin: 0 0 18px; color: #444; line-height: 1.5; }
.vb-modal .vb-btn { margin-top: 0; }