.fe-booking {
--fe-blue: #006ba6;
--fe-blue-light: #0496ff;
--fe-yellow: #ffbc42;
--fe-ink: #383838;
--fe-muted: #5f5f5f;
--fe-line: #e3e7ea;
--fe-bg: #f9f9f9;
font-family: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--fe-ink);
max-width: 860px;
margin-inline: auto; padding-top: 40px;
}
@media (max-width: 782px) {
.fe-booking {
padding-top: 26px;
}
}
.fe-booking *,
.fe-booking *::before,
.fe-booking *::after {
box-sizing: border-box;
} .fe-notice {
margin: 0 0 24px;
padding: 16px 20px;
border-radius: 12px;
font-size: 16px;
line-height: 1.5;
border-inline-start: 4px solid;
}
.fe-notice--success {
background-color: #eaf6ef;
border-color: #1f9254;
color: #14532d;
}
.fe-notice--error {
background-color: #fdeced;
border-color: #b32d2e;
color: #7f1d1d;
}
.fe-empty {
background-color: var(--fe-bg);
border-radius: 12px;
padding: 20px;
color: var(--fe-muted);
line-height: 1.6;
} .fe-booking :focus-visible {
outline: 3px solid #0496ff;
outline-offset: 2px;
} .fe-steps {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0 0 22px;
padding: 0;
counter-reset: none;
}
.fe-steps__item {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 0;
min-width: 0;
color: #a7aeb4;
font-size: 15px;
font-weight: 500;
transition: color .3s;
}
.fe-steps__item + .fe-steps__item::before {
content: "";
flex: 1 1 auto;
height: 2px;
border-radius: 2px;
background-color: var(--fe-line);
transition: background-color .3s;
}
.fe-steps__num {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 auto;
border-radius: 50%;
background-color: #eef1f3;
color: #a7aeb4;
font-weight: 700;
font-size: 15px;
transition: background-color .3s, color .3s, box-shadow .3s;
}
.fe-steps__item.is-current {
color: var(--fe-ink);
}
.fe-steps__item.is-current .fe-steps__num {
background-color: var(--fe-blue);
color: #fff;
box-shadow: 0 0 0 5px rgba(0, 107, 166, .12);
}
.fe-steps__item.is-done {
color: var(--fe-blue);
}
.fe-steps__item.is-done .fe-steps__num {
background-color: #d8ecf7;
color: var(--fe-blue);
}
.fe-steps__item.is-done + .fe-steps__item::before,
.fe-steps__item.is-current + .fe-steps__item::before {
background-color: #b9dcef;
} .fe-step {
border: 0;
margin: 0 0 26px;
padding: 0;
transition: opacity .3s;
} .fe-step[hidden] {
display: none;
}
.fe-step--active {
animation: fe-fade .25s ease;
}
@keyframes fe-fade {
from { opacity: 0; transform: translateY(4px); }
to   { opacity: 1; transform: translateY(0); }
} .fe-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 18px;
}
.fe-meta__item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 16px 7px 12px;
border-radius: 20px;
background-color: #eef5fa;
color: #00527f;
font-size: 14px;
font-weight: 500;
}
.fe-meta__icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.fe-step__title {
font-family: "Epilogue", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.25;
color: var(--fe-ink);
padding: 0;
margin: 0 0 8px;
float: none;
width: auto;
}
.fe-step__lead {
margin: 0 0 16px;
max-width: 640px;
font-size: 15px;
line-height: 1.55;
color: var(--fe-muted);
} .fe-summary {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 22px;
padding: 12px 16px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(0, 107, 166, .08), rgba(4, 150, 255, .06));
border: 1px solid rgba(0, 107, 166, .2);
font-size: 16px;
animation: fe-pop .3s ease;
}
@keyframes fe-pop {
from { transform: translateY(6px); opacity: 0; }
to   { transform: translateY(0); opacity: 1; }
}
.fe-summary__check {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 auto;
border-radius: 50%;
background-color: #1f9254;
color: #fff;
font-size: 15px;
font-weight: 700;
}
.fe-summary__text {
flex: 1 1 auto;
font-weight: 500;
color: var(--fe-ink);
line-height: 1.4;
}
.fe-booking button.fe-summary__change {
flex: 0 0 auto;
min-height: 0;
padding: 6px 14px;
border: 0;
border-radius: 20px;
background-color: rgba(255, 255, 255, .8);
color: var(--fe-blue);
font-family: inherit;
font-size: 14px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
cursor: pointer;
transition: background-color .2s;
}
.fe-booking button.fe-summary__change:hover,
.fe-booking button.fe-summary__change:focus-visible {
background-color: var(--fe-blue);
color: #fff;
}
.fe-reassure {
margin: 16px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--fe-muted);
} .fe-picker {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
gap: 28px;
align-items: start;
background-color: #fff;
border: 1px solid #edf1f4;
border-radius: 20px;
padding: 24px 26px;
box-shadow: 0 18px 50px -20px rgba(0, 60, 95, .25), 0 2px 8px rgba(0, 0, 0, .03);
}
.fe-cal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.fe-cal__month {
font-family: "Epilogue", sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: -.01em;
}
.fe-booking button.fe-cal__nav {
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: transparent;
color: var(--fe-blue);
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: background-color .2s, color .2s;
}
.fe-booking button.fe-cal__nav:hover:not(:disabled),
.fe-booking button.fe-cal__nav:focus-visible:not(:disabled) {
background-color: var(--fe-blue);
color: #fff;
}
.fe-booking button.fe-cal__nav:disabled {
color: #c9ced2;
cursor: default;
}
.fe-cal__weekdays,
.fe-cal__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
}
.fe-cal__weekdays {
margin-bottom: 8px;
}
.fe-cal__weekdays span {
text-align: center;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #8d9aa3;
padding-bottom: 6px;
} .fe-booking .fe-cal__cell,
.fe-booking button.fe-cal__cell {
display: flex;
align-items: center;
justify-content: center; width: 38px;
height: 38px;
min-width: 0;
padding: 0;
margin-inline: auto;
border: 0;
border-radius: 50%;
background-color: transparent;
font-family: inherit;
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: #b4b9bd;
}
.fe-booking button.fe-cal__cell--free {
background-color: rgba(0, 107, 166, .08);
padding: 0;
min-width: 0;
color: var(--fe-blue);
font-weight: 700;
cursor: pointer;
transition: background-color .2s, color .2s, transform .15s;
}
.fe-booking button.fe-cal__cell--free:hover,
.fe-booking button.fe-cal__cell--free:focus-visible {
background-color: #00527f;
color: #fff;
transform: translateY(-1px);
}
.fe-booking button.fe-cal__cell--free:hover::after,
.fe-booking button.fe-cal__cell--free:focus-visible::after {
background-color: #fff;
}
.fe-booking button.fe-cal__cell--free.is-active {
background: linear-gradient(135deg, var(--fe-blue), #0288cc);
color: #fff;
box-shadow: 0 6px 16px -4px rgba(0, 107, 166, .6);
} .fe-booking button.fe-cal__cell--free {
position: relative;
}
.fe-booking button.fe-cal__cell--free::after {
content: "";
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--fe-yellow);
}
.fe-booking button.fe-cal__cell--free.is-active::after {
background-color: #fff;
} .fe-cal__grid--empty {
display: block;
}
.fe-cal__none {
margin: 0;
padding: 24px 8px;
text-align: center;
color: var(--fe-muted);
font-size: 15px;
line-height: 1.5;
}
.fe-cal__hint {
margin: 10px 0 0;
font-size: 12px;
color: var(--fe-muted);
} .fe-picker__times {
border-inline-start: 1px solid var(--fe-line);
padding-inline-start: 32px;
min-height: 240px;
min-width: 0;
} .fe-times__title {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
overflow-wrap: anywhere;
margin: 0 0 12px;
font-family: "Epilogue", sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--fe-ink);
}
.fe-times__day {
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.3;
} .fe-times__call {
font-family: "Archivo", sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
color: var(--fe-blue);
} .fe-times__list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 330px;
overflow-y: auto;
overflow-x: hidden;
padding-inline-end: 6px;
scrollbar-width: thin;
}
.fe-times__hint {
margin: 0;
color: var(--fe-muted);
font-size: 15px;
line-height: 1.5;
text-wrap: balance;
} .fe-times__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 200px;
padding: 20px 10px;
text-align: center;
color: #9aa7b0;
}
.fe-times__empty svg {
width: 40px;
height: 40px;
opacity: .55;
}
@media (max-width: 782px) {
.fe-times__empty {
min-height: 0;
padding: 8px 10px 4px;
}
.fe-times__empty svg {
width: 30px;
height: 30px;
}
}
.fe-booking button.fe-time {
display: flex;
letter-spacing: 0;
text-transform: none;
min-width: 0;
flex-direction: column;
gap: 2px;
width: 100%;
min-height: 0;
padding: 9px 14px;
border: 2px solid #d7e6f0;
border-radius: 14px;
background-color: #fff;
color: var(--fe-ink);
font-family: inherit;
text-align: start;
cursor: pointer;
transition: border-color .2s, background-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.fe-booking button.fe-time:hover,
.fe-booking button.fe-time:focus-visible {
border-color: var(--fe-blue);
background-color: #f2f9fd;
color: #002d47;
transform: translateY(-2px);
box-shadow: 0 10px 20px -12px rgba(0, 107, 166, .8);
}
.fe-booking button.fe-time:hover .fe-time__place,
.fe-booking button.fe-time:focus-visible .fe-time__place {
color: #00527f;
}
.fe-booking button.fe-time:hover .fe-time__address,
.fe-booking button.fe-time:focus-visible .fe-time__address {
color: #3b4a55;
}
.fe-booking button.fe-time.is-active {
background: linear-gradient(135deg, var(--fe-blue), #0288cc);
border-color: transparent;
color: #fff;
box-shadow: 0 10px 24px -12px rgba(0, 107, 166, .9);
}
.fe-booking button.fe-time.is-active .fe-time__place {
color: #fff;
}
.fe-time__hours {
font-size: 16px;
font-weight: 700;
}
.fe-time__place {
font-size: 13px;
font-weight: 500;
color: var(--fe-blue);
}
.fe-time__address {
font-size: 12px;
line-height: 1.4;
opacity: .85;
overflow-wrap: anywhere;
}
.fe-time__hours,
.fe-time__place {
overflow-wrap: anywhere;
}
.fe-booking button.fe-time:not(.is-active) .fe-time__address {
color: var(--fe-muted);
}
.fe-booking .fe-btn:disabled {
opacity: .45;
cursor: not-allowed;
} @media (min-width: 783px) and (max-width: 1000px) {
.fe-picker {
grid-template-columns: 1fr;
gap: 22px;
}
.fe-picker__times {
border-inline-start: 0;
border-top: 1px solid var(--fe-line);
padding-inline-start: 0;
padding-top: 18px;
min-height: 0;
}
.fe-times__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
max-height: none;
}
}
@media (max-width: 782px) {
.fe-picker {
grid-template-columns: 1fr;
gap: 24px;
padding: 18px;
}
.fe-picker__times {
border-inline-start: 0;
border-top: 1px solid var(--fe-line);
padding-inline-start: 0;
padding-top: 20px;
min-height: 0;
}
.fe-times__list {
max-height: none;
}
} @media (max-width: 782px) {
.fe-booking {
max-width: none;
} .fe-steps {
gap: 6px;
margin-bottom: 18px;
}
.fe-steps__label {
display: none;
}
.fe-steps__item {
flex: 1 1 auto;
gap: 6px;
}
.fe-steps__item.is-current .fe-steps__label {
display: inline;
font-size: 14px;
white-space: nowrap;
}
.fe-step__title {
font-size: 20px;
}
.fe-step__lead {
font-size: 15px;
} .fe-picker {
padding: 14px;
border-radius: 16px;
gap: 18px;
}
.fe-cal__weekdays,
.fe-cal__grid {
gap: 2px;
}
.fe-booking .fe-cal__cell,
.fe-booking button.fe-cal__cell {
width: 44px;
height: 44px;
font-size: 16px;
}
.fe-cal__month {
font-size: 17px;
}
.fe-booking button.fe-cal__nav {
width: 44px;
height: 44px;
} .fe-picker__times {
border-top: 2px solid var(--fe-line);
padding-top: 16px;
}
.fe-times__title {
font-size: 16px;
}
.fe-booking button.fe-time {
min-height: 56px;
padding: 12px 16px;
} .fe-summary {
flex-wrap: wrap;
gap: 10px;
}
.fe-summary__text {
flex: 1 1 100%;
order: 2;
}
.fe-booking button.fe-summary__change {
order: 3;
margin-inline-start: auto;
} .fe-grid {
grid-template-columns: 1fr;
}
.fe-booking .fe-field input:not([disabled]),
.fe-booking .fe-field textarea:not([disabled]) {
font-size: 16px; padding: 12px 14px;
}
.fe-booking .fe-btn,
.fe-booking .fe-btn--wide {
width: 100%;
min-width: 0;
}
.fe-consent {
font-size: 15px;
}
.fe-consent input {
width: 22px;
height: 22px;
} .fe-card {
padding: 20px;
}
.fe-reschedule {
padding: 14px 16px;
}
} @media (hover: none) {
.fe-booking button.fe-cal__cell--free:hover {
background-color: rgba(0, 107, 166, .08);
color: var(--fe-blue);
transform: none;
}
.fe-booking button.fe-time:hover {
transform: none;
box-shadow: none;
}
} .fe-day + .fe-day {
margin-top: 24px;
}
.fe-day__title {
margin: 0 0 12px;
font-family: "Epilogue", sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--fe-blue);
}
.fe-day__slots {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
} .fe-day__slots input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.fe-day__slots label {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 76px;
padding: 14px 16px;
border: 2px solid var(--fe-line);
border-radius: 12px;
background-color: #fff;
cursor: pointer;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.fe-day__slots label:hover {
border-color: var(--fe-blue);
}
.fe-day__slots input[type="radio"]:focus-visible + label {
outline: 3px solid var(--fe-blue-light);
outline-offset: 2px;
}
.fe-day__slots input[type="radio"]:checked + label {
border-color: var(--fe-blue);
background-color: rgba(0, 107, 166, .06);
box-shadow: inset 0 0 0 1px var(--fe-blue);
}
.fe-slot__time {
font-weight: 700;
font-size: 17px;
}
.fe-slot__place {
font-size: 14px;
font-weight: 500;
color: var(--fe-blue);
}
.fe-slot__place--online::before {
content: "● ";
color: #1f9254;
}
.fe-slot__place--harburg::before,
.fe-slot__place--barmbek::before {
content: "● ";
color: var(--fe-yellow);
}
.fe-slot__address {
font-size: 13px;
color: var(--fe-muted);
} .fe-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 20px;
}
.fe-field,
.fe-field--full {
margin: 0 0 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.fe-field--full {
grid-column: 1 / -1;
}
.fe-booking label {
font-size: 15px;
font-weight: 500;
} .fe-booking .fe-field input[type="text"]:not([disabled]),
.fe-booking .fe-field input[type="email"]:not([disabled]),
.fe-booking .fe-field input[type="tel"]:not([disabled]),
.fe-booking .fe-field textarea:not([disabled]) {
width: 100%;
padding: 10px 14px;
border: 2px solid var(--fe-line);
border-radius: 10px;
background-color: #fff;
font-family: inherit;
font-size: 16px;
line-height: 1.4;
color: var(--fe-ink);
transition: border-color .2s, box-shadow .2s;
}
.fe-booking .fe-field input:not([disabled]):focus,
.fe-booking .fe-field textarea:not([disabled]):focus {
outline: 0;
border-color: var(--fe-blue);
box-shadow: 0 0 0 3px rgba(0, 107, 166, .12);
}
.fe-booking .fe-field--error input:not([disabled]) {
border-color: #b32d2e;
}
.fe-field--error input {
border-color: #b32d2e;
}
.fe-field-error {
color: #b32d2e;
font-size: 14px;
}
.fe-consent {
margin: 6px 0 18px;
font-size: 15px;
line-height: 1.45;
}
.fe-consent label {
display: flex;
gap: 10px;
align-items: flex-start;
font-weight: 400;
}
.fe-consent input {
margin-top: 3px;
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.fe-consent--error {
color: #b32d2e;
} .fe-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .fe-booking .fe-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 30px;
border: 0;
border-radius: 30px;
font-family: inherit;
font-size: 15px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
cursor: pointer;
transition: background-color .2s, color .2s, box-shadow .2s;
}
.fe-booking .fe-btn--primary {
background: linear-gradient(135deg, var(--fe-blue), #0288cc);
color: #fff;
box-shadow: 0 12px 26px -14px rgba(0, 107, 166, .9);
}
.fe-booking .fe-btn--wide {
min-width: 280px;
}
.fe-booking .fe-btn--primary:hover:not(:disabled),
.fe-booking .fe-btn--primary:focus:not(:disabled) {
background: linear-gradient(135deg, #0288cc, var(--fe-blue-light));
color: #fff;
transform: translateY(-2px);
}
.fe-booking .fe-btn--ghost {
background-color: transparent;
color: #b32d2e;
box-shadow: inset 0 0 0 2px #e3b5b5;
}
.fe-booking .fe-btn--ghost:hover,
.fe-booking .fe-btn--ghost:focus {
background-color: #b32d2e;
color: #fff;
box-shadow: none;
} .fe-card {
background-color: #fff;
border: 2px solid var(--fe-blue);
border-radius: 16px;
padding: 28px;
margin-bottom: 24px;
}
.fe-card--cancelled {
border-color: var(--fe-line);
opacity: .75;
}
.fe-card__title {
margin: 0 0 12px;
font-family: "Epilogue", sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--fe-ink);
}
.fe-card__date {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.5;
}
.fe-card__place {
margin: 0;
color: var(--fe-muted);
}
.fe-card__note {
margin: 18px 0 0;
padding: 16px 18px;
background-color: var(--fe-bg);
border-radius: 10px;
border-inline-start: 3px solid var(--fe-blue);
font-size: 15px;
line-height: 1.6;
color: #4a545a;
}
.fe-card__note p {
margin: 0 0 12px;
}
.fe-card__note p:last-child {
margin-bottom: 0;
}
.fe-reschedule {
border: 2px solid var(--fe-line);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 20px;
}
.fe-reschedule summary {
cursor: pointer;
font-weight: 500;
font-size: 16px;
color: var(--fe-blue);
min-height: 32px;
display: flex;
align-items: center;
}
.fe-reschedule[open] summary {
margin-bottom: 20px;
}
.fe-reschedule .fe-btn {
margin-top: 20px;
}
.fe-cancel {
margin: 0;
} @media (max-width: 640px) {
.fe-grid {
grid-template-columns: 1fr;
}
.fe-day__slots {
grid-template-columns: 1fr;
}
.fe-booking .fe-btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.fe-booking * {
transition: none;
}
} .fe-booking fieldset.fe-field {
border: 0;
margin: 0 0 20px;
padding: 0;
}
.fe-booking fieldset.fe-field legend {
padding: 0;
margin-bottom: 10px;
font-size: 15px;
font-weight: 500;
color: var(--fe-ink);
}
.fe-services {
display: grid;
gap: 8px;
}
.fe-booking label.fe-service {
display: flex;
align-items: center;
gap: 12px;
min-height: 52px;
padding: 12px 16px;
border: 2px solid #dfe4e8;
border-radius: 12px;
background-color: #fff;
font-weight: 400;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
.fe-booking label.fe-service:hover {
border-color: var(--fe-blue);
}
.fe-service input[type="radio"] {
width: 20px;
height: 20px;
flex: 0 0 auto;
accent-color: var(--fe-blue);
margin: 0;
}
.fe-service:has(input:checked) {
border-color: var(--fe-blue);
background-color: rgba(0, 107, 166, .05);
}
.fe-field--error label.fe-service {
border-color: #e3b5b5;
} .fe-card__service {
margin: 0 0 6px;
font-weight: 600;
color: var(--fe-blue);
} .fe-booking button.fe-time,
.fe-booking .fe-time > span {
min-width: 0;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}