.vb-grid { display: grid; gap: 30px; }
.vb-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.vb-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.vb-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .vb-grid--cols-3, .vb-grid--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .vb-grid { grid-template-columns: 1fr !important; } }

.vb-card { background: #fff; border: 1px solid rgba(43, 38, 34, .15); display: flex; flex-direction: column; }
.vb-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.vb-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.vb-card__title { margin: 0; font-size: 21px; }
.vb-card__title a { text-decoration: none; color: #2B2622; }
.vb-card__desc { margin: 0; color: #6E655C; font-size: 15px; line-height: 1.7; }
.vb-card__meta { margin: 0; color: #8A8178; font-size: 13px; }
.vb-card__price { margin: 0; margin-top: auto; color: #2B2622; }
.vb-card__price s { color: #8A8178; margin-right: 8px; }
.vb-card__pernight { color: #8A8178; font-size: 13px; }

.vb-btn, a.vb-btn:link, a.vb-btn:visited { display: inline-block; background: #2B2622; color: #fff; border: 1px solid #2B2622;
    border-radius: 50px; padding: 14px 28px; font-size: 13px; letter-spacing: .3px;
    text-decoration: none; cursor: pointer; transition: all .3s ease; text-align: center; }
.vb-btn:hover, a.vb-btn:link:hover, a.vb-btn:visited:hover, a.vb-btn:focus { background: #A85643; border-color: #A85643; color: #fff; }
.vb-btn--submit { width: 100%; padding: 17px 28px; font-size: 14px; }
.vb-btn:disabled { opacity: .6; cursor: wait; }

.vb-form { background: #FCFAF6; border: 1px solid rgba(43, 38, 34, .15); padding: 28px; max-width: 560px; }
.vb-form__title { margin-top: 0; }
.vb-field { margin: 0 0 16px; }
.vb-field label { display: block; font-size: 13px; margin-bottom: 6px; color: #2B2622; }
.vb-field input, .vb-field select { width: 100%; border: 1px solid #2B2622; border-radius: 40px;
    padding: 12px 18px; font-size: 14px; background: #fff; color: #2B2622; }
.vb-field input:focus, .vb-field select:focus { outline: 2px solid #CC7A6B; outline-offset: 1px; }

.vb-quote { border-top: 1px solid rgba(43, 38, 34, .15); margin: 18px 0; padding-top: 14px; }
.vb-quote__row { display: flex; justify-content: space-between; font-size: 15px; padding: 4px 0; color: #2B2622; }
.vb-quote__row--total { font-weight: 600; border-top: 1px solid rgba(43, 38, 34, .15); margin-top: 6px; padding-top: 10px; }
.vb-quote__note { font-size: 12px; color: #8A8178; }
.vb-form__error { color: #A85643; font-size: 14px; }

.vb-invoice { max-width: 680px; margin: 0 auto; }
.vb-invoice__head { text-align: center; padding: 0 0 34px; }
.vb-invoice__title { margin: 0 0 14px; font-family: Marcellus, serif; font-weight: 400;
    font-size: 34px; line-height: 1.25; text-transform: uppercase; letter-spacing: 6px; color: #2B2622; }
.vb-invoice__lead { margin: 0 auto; max-width: 520px; font-size: 16px; line-height: 1.7; color: #6E655C; }

.vb-code { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
    margin: 24px 0 0; padding: 12px 20px; border: 1px solid rgba(43, 38, 34, .15); background: #FCFAF6; }
.vb-code__label { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: #8A8178; }
.vb-code__value { font-size: 20px; letter-spacing: 2px; color: #2B2622; }

.vb-badge { display: inline-block; margin: 18px 0 0; padding: 7px 18px; border-radius: 50px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }
.vb-badge--waiting { background: #D8B66C; color: #2B2622; }
.vb-badge--confirmed { background: #4A6345; color: #fff; }
.vb-badge--canceled { background: transparent; color: #8A8178; border: 1px solid rgba(43, 38, 34, .25); }

.vb-panel { border: 1px solid rgba(43, 38, 34, .15); background: #fff; padding: 26px 28px; margin: 0 0 22px; }
.vb-panel__title { margin: 0 0 16px; font-family: Marcellus, serif; font-weight: 400; font-size: 13px;
    text-transform: uppercase; letter-spacing: 3px; color: #8A8178; }
.vb-rows { margin: 0; }
.vb-rows__row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    padding: 11px 0; border-bottom: 1px solid rgba(43, 38, 34, .1); }
.vb-rows__row:last-child { border-bottom: 0; }
.vb-rows dt { margin: 0; font-size: 15px; color: #6E655C; }
.vb-rows dd { margin: 0; font-size: 15px; color: #2B2622; text-align: right; }

.vb-total { display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(43, 38, 34, .15); }
.vb-total__label { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: #2B2622; }
.vb-total__value { font-size: 26px; font-weight: 500; color: #2B2622; text-align: right; }
.vb-total__hint { margin: 10px 0 0; font-size: 13px; color: #8A8178; }

.vb-invoice__note { margin: 26px 0 0; font-size: 14px; line-height: 1.7; color: #8A8178; text-align: center; }
.vb-invoice__missing { color: #6E655C; text-align: center; }

@media (max-width: 600px) {
    .vb-invoice__title { font-size: 24px; letter-spacing: 3px; }
    .vb-panel { padding: 20px 18px; }
    .vb-rows__row { flex-direction: column; gap: 2px; }
    .vb-rows dd { text-align: left; }
    .vb-total { flex-direction: column; gap: 4px; }
    .vb-total__value { text-align: left; }
}

.flatpickr-calendar { box-shadow: none; border: 1px solid rgba(43, 38, 34, .15); border-radius: 0; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected:focus {
    background: #2B2622; border-color: #2B2622; color: #fff;
}
.flatpickr-day.inRange { background: #FCFAF6; border-color: #FCFAF6; box-shadow: none; }
.flatpickr-day:hover { background: #FCFAF6; border-color: #FCFAF6; }
.flatpickr-months .flatpickr-month, span.flatpickr-weekday { color: #2B2622; }

.vb-bank { border: 1px solid rgba(43, 38, 34, .15); background: #FCFAF6; padding: 26px 28px; margin: 0 0 22px; }
.vb-bank__title { margin: 0 0 4px; font-family: Marcellus, serif; font-weight: 400; font-size: 13px;
    text-transform: uppercase; letter-spacing: 3px; color: #2B2622; }
.vb-bank__sub { margin: 0 0 18px; font-size: 14px; color: #8A8178; }
.vb-bank__number { letter-spacing: 1px; font-size: 17px; }
.vb-bank .vb-rows__row:last-child { border-bottom: 0; }
.vb-copy { margin-left: 10px; padding: 4px 14px; font: 400 11px/1.6 inherit; text-transform: uppercase;
    letter-spacing: 1px; color: #6E655C; background: transparent;
    border: 1px solid rgba(43, 38, 34, .25); border-radius: 50px; cursor: pointer; transition: all .3s ease; }
.vb-copy:hover { background: #2B2622; border-color: #2B2622; color: #fff; }
.vb-bank__hint { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(43, 38, 34, .1);
    font-size: 14px; color: #6E655C; }

.vb-proof { border: 1px solid rgba(43, 38, 34, .15); background: #fff; padding: 26px 28px; margin: 0 0 22px; }
.vb-proof__title { margin: 0 0 10px; font-family: Marcellus, serif; font-weight: 400; font-size: 13px;
    text-transform: uppercase; letter-spacing: 3px; color: #2B2622; }
.vb-proof--done { background: #FCFAF6; text-align: center; }
.vb-proof--done p { margin: 0; color: #6E655C; font-size: 15px; line-height: 1.7; }
.vb-field--label-only { margin-bottom: 8px; }
.vb-proof__error { color: #A85643; font-size: 14px; }
@media (max-width: 600px) {
    .vb-bank, .vb-proof { padding: 20px 18px; }
}

.vb-drop { border: 1px dashed rgba(43, 38, 34, .35); background: #FCFAF6; padding: 30px 20px;
    text-align: center; cursor: pointer; margin: 0 0 18px; transition: all .2s ease; }
.vb-drop.is-over, .vb-drop:hover { border-color: #2B2622; background: #fff; }
.vb-drop.is-filled { border-style: solid; border-color: #6C8A66; }
.vb-drop:focus-visible { outline: 2px solid #CC7A6B; outline-offset: 2px; }
.vb-drop__main { margin: 0 0 6px; font-size: 15px; color: #2B2622; }
.vb-drop__hint { margin: 0 0 16px; font-size: 13px; color: #8A8178; }
.vb-drop__btn { display: inline-block; }
.vb-drop__or { margin: 14px 0 0; font-size: 13px; color: #8A8178; }
.vb-drop__file { margin: 12px 0 0; font-size: 14px; color: #4A6345; word-break: break-all; }
