.qbf-booking {
--qbf-color-surface: #ffffff;
--qbf-color-ink: #18211d;
--qbf-color-muted: #65716b;
--qbf-color-border: #d9dfd8;
--qbf-color-border-strong: #b9c4b8;
--qbf-color-accent: #17695f;
--qbf-color-accent-dark: #0f4c45;
--qbf-color-gold: #b8752d;
--qbf-color-error: #b42318;
--qbf-color-error-soft: #fff0ed;
--qbf-color-success: #176b3a;
--qbf-color-success-soft: #eaf7ef;
--qbf-color-loading: #315f7a;
--qbf-shadow-card: 0 24px 70px rgba(24, 33, 29, 0.12);
--qbf-radius: 8px;
width: min(860px, 100%);
margin: clamp(22px, 4vw, 44px) auto;
color: var(--qbf-color-ink);
font-family: inherit;
line-height: 1.5;
}
.qbf-booking *,
.qbf-booking *::before,
.qbf-booking *::after {
box-sizing: border-box;
}
.qbf-booking button,
.qbf-booking input,
.qbf-booking select,
.qbf-booking textarea {
font: inherit;
}
.qbf-booking button {
cursor: pointer;
}
.qbf-booking button:disabled {
cursor: not-allowed;
}
.qbf-booking__card {
border: 1px solid rgba(217, 223, 216, 0.92);
border-radius: var(--qbf-radius);
padding: clamp(22px, 4vw, 38px);
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--qbf-shadow-card);
}
.qbf-booking__header {
display: grid;
gap: 8px;
margin-bottom: 24px;
}
.qbf-booking__kicker,
.qbf-booking__title {
margin: 0;
letter-spacing: 0;
}
.qbf-booking__kicker {
color: var(--qbf-color-accent);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.qbf-booking__title {
color: var(--qbf-color-ink);
font-size: clamp(1.35rem, 2vw, 1.75rem);
font-weight: 800;
line-height: 1.15;
}
.qbf-form {
display: grid;
gap: 22px;
margin: 0;
}
.qbf-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.qbf-form__row {
display: grid;
gap: 18px;
}
.qbf-form__row--split {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qbf-form__wide {
grid-column: 1 / -1;
}
.qbf-field {
display: grid;
gap: 8px;
min-width: 0;
}
.qbf-field__label {
color: var(--qbf-color-ink);
font-size: 0.93rem;
font-weight: 750;
}
.qbf-field__control {
width: 100%;
min-height: 48px;
border: 1px solid var(--qbf-color-border);
border-radius: var(--qbf-radius);
padding: 12px 14px;
color: var(--qbf-color-ink);
background: #ffffff;
outline: none;
box-shadow: none;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background-color 160ms ease;
}
.qbf-field__control::placeholder {
color: #8a948e;
opacity: 1;
}
.qbf-field__control:hover {
border-color: var(--qbf-color-border-strong);
}
.qbf-field__control:focus {
border-color: var(--qbf-color-accent);
box-shadow: 0 0 0 4px rgba(23, 105, 95, 0.14);
}
.qbf-field__control--select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--qbf-color-muted) 50%),
linear-gradient(135deg, var(--qbf-color-muted) 50%, transparent 50%);
background-position:
calc(100% - 18px) 20px,
calc(100% - 12px) 20px;
background-size:
6px 6px,
6px 6px;
background-repeat: no-repeat;
padding-right: 42px;
}
.qbf-field__control--textarea {
min-height: 132px;
resize: vertical;
}
.qbf-field--error .qbf-field__control {
border-color: var(--qbf-color-error);
background: var(--qbf-color-error-soft);
box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1);
}
.qbf-field__message {
margin: 0;
color: var(--qbf-color-error);
font-size: 0.86rem;
font-weight: 650;
}
.qbf-notice {
border: 1px solid;
border-radius: var(--qbf-radius);
padding: 13px 14px;
margin-bottom: 18px;
font-size: 0.93rem;
font-weight: 650;
}
.qbf-notice--error {
border-color: rgba(180, 35, 24, 0.28);
color: var(--qbf-color-error);
background: var(--qbf-color-error-soft);
}
.qbf-notice--success {
border-color: rgba(23, 107, 58, 0.26);
color: var(--qbf-color-success);
background: var(--qbf-color-success-soft);
}
.qbf-captcha {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 86px;
border: 1px solid var(--qbf-color-border);
border-radius: var(--qbf-radius);
padding: 16px;
background:
linear-gradient(180deg, #ffffff, #f7f9f6);
}
.qbf-captcha--error {
border-color: var(--qbf-color-error);
background: var(--qbf-color-error-soft);
box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.1);
}
.qbf-captcha__content {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.qbf-captcha__title {
margin: 0;
color: var(--qbf-color-ink);
font-size: 0.98rem;
font-weight: 800;
line-height: 1.2;
}
.qbf-captcha__copy {
margin: 3px 0 0;
color: var(--qbf-color-muted);
font-size: 0.9rem;
}
.qbf-captcha__widget {
min-height: 65px;
}
.qbf-captcha__missing {
border: 1px solid rgba(180, 35, 24, 0.26);
border-radius: 6px;
padding: 10px 12px;
color: var(--qbf-color-error);
background: #ffffff;
font-size: 0.88rem;
font-weight: 650;
}
.qbf-captcha .qbf-field__message {
grid-column: 1 / -1;
}
.qbf-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50px;
width: fit-content;
max-width: 100%;
border: 0;
border-radius: var(--qbf-radius);
padding: 13px 20px;
font-weight: 800;
text-align: center;
text-decoration: none;
transition:
transform 160ms ease,
box-shadow 160ms ease,
background-color 160ms ease;
}
.qbf-button--primary {
color: #ffffff;
background: var(--qbf-color-accent);
box-shadow: 0 14px 28px rgba(23, 105, 95, 0.24);
}
.qbf-button--primary:hover:not(:disabled) {
background: var(--qbf-color-accent-dark);
transform: translateY(-1px);
}
.qbf-button--primary:focus-visible {
outline: 3px solid rgba(23, 105, 95, 0.28);
outline-offset: 3px;
}
.qbf-button--primary:disabled {
background: var(--qbf-color-loading);
box-shadow: none;
opacity: 0.84;
}
.qbf-form__submit {
justify-self: start;
min-width: 156px;
}
.qbf-button__spinner {
display: none;
width: 17px;
height: 17px;
border: 2px solid rgba(255, 255, 255, 0.42);
border-top-color: #ffffff;
border-radius: 50%;
color: transparent;
font-size: 0;
line-height: 0;
animation: qbf-spin 850ms linear infinite;
}
.qbf-button.is-loading .qbf-button__spinner {
display: inline-block;
}
.qbf-honeypot {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
@keyframes qbf-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 700px) {
.qbf-booking__card {
padding: 22px;
}
.qbf-form__grid,
.qbf-form__row--split {
grid-template-columns: 1fr;
}
.qbf-form__wide {
grid-column: auto;
}
.qbf-captcha {
grid-template-columns: 1fr;
align-items: flex-start;
}
.qbf-form__submit {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.qbf-booking *,
.qbf-booking *::before,
.qbf-booking *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}