.btw_tb {
--btw-tb-accent: #0d5bd7;
--btw-tb-accent-dark: #0a49ac;
--btw-tb-accent-soft: #eaf1fd;
--btw-tb-accent-softer: #f4f8ff;
--btw-tb-ink: #16324f;
--btw-tb-text: #1d2327;
--btw-tb-muted: #6b7684;
--btw-tb-line: #e3e8ef;
--btw-tb-bg: #ffffff;
--btw-tb-bg-soft: #f7f9fc;
--btw-tb-error: #b32d2e;
--btw-tb-success: #1a7f37;
--btw-tb-radius: 14px;
--btw-tb-radius-sm: 8px;
--btw-tb-shadow: 0 1px 2px rgba(22, 50, 79, 0.06), 0 8px 28px rgba(22, 50, 79, 0.08);
--btw-tb-day: 34px;
--btw-tb-icon: 1rem;
container-type: inline-size;
container-name: btw-tb;
box-sizing: border-box;
color: var(--btw-tb-text);
font-size: 16px;
line-height: 1.5;
max-width: 100%;
}
.btw_tb *,
.btw_tb *::before,
.btw_tb *::after {
box-sizing: inherit;
} .btw_tb svg {
display: inline-block;
flex: 0 0 auto;
width: var(--btw-tb-icon);
height: var(--btw-tb-icon);
max-width: 100%;
vertical-align: middle;
fill: none;
} .btw_tb button {
font-family: inherit;
text-transform: none;
letter-spacing: normal;
min-width: 0;
box-shadow: none;
text-decoration: none;
} .btw_tb .btw_tb_slot,
.btw_tb .btw_tb_host,
.btw_tb .btw_tb_type,
.btw_tb .btw_tb_btn {
height: auto;
min-height: 0;
} .btw_tb .btw_tb_day {
width: 100%;
max-width: var(--btw-tb-day);
height: auto;
aspect-ratio: 1;
min-height: 0;
}
.btw_tb .btw_tb_nav {
width: 2.25rem;
height: 2.25rem;
min-height: 0;
}
.btw_tb .btw_tb_remove {
width: 2rem;
height: 2rem;
min-height: 0;
}
.btw_tb ul,
.btw_tb ol {
list-style: none;
}
.btw_tb dd {
margin-left: 0;
}
.btw_tb_nav svg {
--btw-tb-icon: 1.125rem;
}
.btw_tb_success_icon svg {
--btw-tb-icon: 1.625rem;
}
.btw_tb_title {
margin: 0 0 1.25rem;
font-size: 1.5rem;
}
.btw_tb_step_title {
margin: 0 0 1.25rem;
font-size: 1.125rem;
font-weight: 700;
color: var(--btw-tb-ink);
} .btw_tb_progress {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.25rem;
margin: 0 0 1.25rem;
padding: 0;
list-style: none;
font-size: 0.8125rem;
color: var(--btw-tb-muted);
counter-reset: btw-tb-step;
}
.btw_tb_progress li {
display: flex;
align-items: center;
gap: 0.4rem;
counter-increment: btw-tb-step;
margin: 0;
}
.btw_tb_progress li::before {
content: counter(btw-tb-step);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.375rem;
height: 1.375rem;
border: 1px solid var(--btw-tb-line);
border-radius: 50%;
font-size: 0.75rem;
flex: 0 0 auto;
}
.btw_tb_progress li.is-active {
color: var(--btw-tb-ink);
font-weight: 600;
}
.btw_tb_progress li.is-active::before {
border-color: var(--btw-tb-accent);
background: var(--btw-tb-accent);
color: #fff;
}
.btw_tb_progress li.is-done::before {
content: "\2713";
border-color: var(--btw-tb-success);
background: var(--btw-tb-success);
color: #fff;
} .btw_tb_card {
padding: 1.5rem;
border: 1px solid var(--btw-tb-line);
border-radius: var(--btw-tb-radius);
background: var(--btw-tb-bg);
box-shadow: var(--btw-tb-shadow);
}
.btw_tb_card--booking {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 0;
overflow: hidden;
}
.btw_tb_card--booking > * {
padding: 1.5rem;
min-width: 0;
}
.btw_tb_side {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
border-bottom: 1px solid var(--btw-tb-line);
background: var(--btw-tb-bg-soft);
}
.btw_tb_side_name {
font-size: 1.0625rem;
font-weight: 700;
color: var(--btw-tb-ink);
}
.btw_tb_side_role {
font-size: 0.875rem;
color: var(--btw-tb-muted);
}
.btw_tb_side_meta {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0.6rem 0 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--btw-tb-ink);
}
.btw_tb_side_meta svg {
flex: 0 0 auto;
color: var(--btw-tb-muted);
}
.btw_tb_slots {
border-top: 1px solid var(--btw-tb-line);
} @container btw-tb (min-width: 640px) {
.btw_tb_card--booking {
grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
}
.btw_tb_card--booking.has-slots {
grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
}
.btw_tb_card--booking.has-slots .btw_tb_slots {
grid-column: 1 / -1;
}
.btw_tb_side {
border-bottom: 0;
border-right: 1px solid var(--btw-tb-line);
}
} @container btw-tb (min-width: 960px) {
.btw_tb_card--booking.has-slots {
grid-template-columns: minmax(180px, 230px) minmax(320px, 1fr) minmax(190px, 224px);
}
.btw_tb_card--booking.has-slots .btw_tb_slots {
grid-column: auto;
border-top: 0;
border-left: 1px solid var(--btw-tb-line);
}
} .btw_tb_avatar {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex: 0 0 56px;
margin-bottom: 0.6rem;
overflow: hidden;
border-radius: 50%;
background: var(--btw-tb-accent-soft);
color: var(--btw-tb-accent);
}
.btw_tb_avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.btw_tb_avatar_initials {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: 0.02em;
} .btw_tb_hosts {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
@container btw-tb (min-width: 620px) {
.btw_tb_hosts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container btw-tb (min-width: 980px) {
.btw_tb_hosts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.btw_tb_hosts li {
margin: 0;
}
.btw_tb_host {
display: flex;
align-items: center;
gap: 0.875rem;
width: 100%;
padding: 0.875rem 1rem;
border: 1px solid var(--btw-tb-line);
border-radius: var(--btw-tb-radius-sm);
background: var(--btw-tb-bg);
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btw_tb_host:hover,
.btw_tb_host:focus-visible {
border-color: var(--btw-tb-accent);
background: var(--btw-tb-accent-softer);
box-shadow: 0 0 0 1px var(--btw-tb-accent);
outline: none;
}
.btw_tb_host .btw_tb_avatar {
width: 48px;
height: 48px;
flex-basis: 48px;
margin-bottom: 0;
}
.btw_tb_host_body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.btw_tb_host_name {
font-weight: 700;
color: var(--btw-tb-ink);
}
.btw_tb_host_role,
.btw_tb_host_meta {
font-size: 0.8125rem;
color: var(--btw-tb-muted);
}
.btw_tb_host_arrow {
flex: 0 0 auto;
font-size: 1.375rem;
line-height: 1;
color: var(--btw-tb-accent);
} .btw_tb_cal_head {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.btw_tb_cal_title {
margin: 0; flex: 0 1 9.5rem;
min-width: 0;
font-size: 1rem;
font-weight: 700;
color: var(--btw-tb-ink);
text-align: center;
}
.btw_tb_nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 2.25rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--btw-tb-accent);
cursor: pointer;
}
.btw_tb_nav:disabled {
color: #c4ccd6;
cursor: not-allowed;
}
.btw_tb_nav:hover:not(:disabled),
.btw_tb_nav:focus-visible {
background: var(--btw-tb-accent-soft);
outline: none;
}
.btw_tb_cal_grid {
max-width: 24rem;
margin: 0 auto;
}
.btw_tb_cal_row {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.btw_tb_cal_dow {
padding: 0.5rem 0;
text-align: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--btw-tb-muted);
}
.btw_tb_cal_cell {
display: flex;
align-items: center;
justify-content: center;
padding: 3px 0;
min-width: 0;
}
.btw_tb_day {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: var(--btw-tb-day);
aspect-ratio: 1;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #a8b1bd;
font: inherit;
font-size: 0.9375rem;
cursor: default;
transition: background-color 0.12s ease, color 0.12s ease;
}
.btw_tb_day.is-free {
background: var(--btw-tb-accent-soft);
color: var(--btw-tb-accent);
font-weight: 700;
cursor: pointer;
}
.btw_tb_day.is-free:hover,
.btw_tb_day.is-free:focus-visible {
background: #d7e5fb;
outline: none;
}
.btw_tb_day.is-free:focus-visible {
box-shadow: 0 0 0 2px var(--btw-tb-accent);
}
.btw_tb_day.is-selected,
.btw_tb_day.is-selected:hover {
background: var(--btw-tb-accent);
color: #fff;
}
.btw_tb_day.is-today::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
width: 4px;
height: 4px;
margin-left: -2px;
border-radius: 50%;
background: currentColor;
}
.btw_tb_tz {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin: 1rem 0 0;
font-size: 0.8125rem;
color: var(--btw-tb-muted);
}
.btw_tb_tz svg {
flex: 0 0 auto;
} .btw_tb_slots_title {
margin: 0 0 0.875rem;
font-size: 0.9375rem;
font-weight: 700;
color: var(--btw-tb-ink);
} .btw_tb_slots_list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
gap: 0.5rem;
} @container btw-tb (min-width: 960px) {
.btw_tb_card--booking.has-slots .btw_tb_slots {
display: flex;
flex-direction: column;
min-height: 0;
max-height: 34rem;
}
.btw_tb_card--booking.has-slots .btw_tb_slots_list {
grid-template-columns: minmax(0, 1fr);
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
}
}
.btw_tb_slot {
display: flex; align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.6875rem 0.5rem;
line-height: 1.2;
border: 1px solid var(--btw-tb-accent);
border-radius: var(--btw-tb-radius-sm);
background: var(--btw-tb-bg);
color: var(--btw-tb-accent);
font: inherit;
font-size: 0.9375rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.12s ease, color 0.12s ease;
}
.btw_tb_slot_end {
font-weight: 400;
font-size: 0.8125rem;
opacity: 0.75;
}
.btw_tb_slot_end::before {
content: "\2013\00a0";
}
.btw_tb_slot:hover,
.btw_tb_slot:focus-visible {
background: var(--btw-tb-accent);
color: #fff;
outline: none;
} .btw_tb_formwrap {
min-width: 0;
}
.btw_tb_form {
max-width: 40rem;
}
.btw_tb_chosen {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 1.25rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--btw-tb-line);
font-size: 0.9375rem;
}
.btw_tb_chosen svg {
flex: 0 0 auto;
margin-top: 0.15rem;
color: var(--btw-tb-muted);
}
.btw_tb_chosen_text {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.btw_tb_chosen_tz {
font-size: 0.8125rem;
color: var(--btw-tb-muted);
}
.btw_tb_field {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin: 0 0 1rem;
}
.btw_tb_field label {
font-size: 0.875rem;
font-weight: 600;
color: var(--btw-tb-ink);
}
.btw_tb_field input,
.btw_tb_field textarea {
width: 100%;
max-width: 100%;
padding: 0.625rem 0.75rem;
border: 1px solid var(--btw-tb-line);
border-radius: var(--btw-tb-radius-sm);
font: inherit;
font-size: 1rem;
background: var(--btw-tb-bg);
color: var(--btw-tb-text);
}
.btw_tb_field input:focus,
.btw_tb_field textarea:focus {
border-color: var(--btw-tb-accent);
box-shadow: 0 0 0 3px var(--btw-tb-accent-soft);
outline: none;
}
.btw_tb_field input[aria-invalid="true"] {
border-color: var(--btw-tb-error);
}
.btw_tb_field--guest {
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.btw_tb_fieldset {
margin: 0 0 1rem;
padding: 0;
border: 0;
}
.btw_tb_fieldset legend {
padding: 0;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--btw-tb-ink);
}
.btw_tb_radios {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.btw_tb_radio {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.875rem;
border: 1px solid var(--btw-tb-line);
border-radius: 999px;
cursor: pointer;
font-size: 0.9375rem;
}
.btw_tb_radio:has(input:checked) {
border-color: var(--btw-tb-accent);
background: var(--btw-tb-accent-soft);
color: var(--btw-tb-accent);
font-weight: 600;
}
.btw_tb_radio:focus-within {
box-shadow: 0 0 0 3px var(--btw-tb-accent-soft);
}
.btw_tb_check {
display: block;
margin: 0 0 1rem;
font-size: 0.9375rem;
}
.btw_tb_check label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
}
.btw_tb_check input {
margin-top: 0.25rem;
flex: 0 0 auto;
}
.btw_tb_guests {
margin: 0 0 1rem;
padding: 0.875rem 1rem;
border: 1px solid var(--btw-tb-line);
border-radius: var(--btw-tb-radius-sm);
background: var(--btw-tb-bg-soft);
}
.btw_tb_guests .btw_tb_check {
margin-bottom: 0;
}
.btw_tb_guests_fields {
margin-top: 0.75rem;
}
.btw_tb_hint {
margin: 0 0 0.5rem;
font-size: 0.8125rem;
color: var(--btw-tb-muted);
}
.btw_tb_remove {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
border: 1px solid var(--btw-tb-line);
border-radius: var(--btw-tb-radius-sm);
background: var(--btw-tb-bg);
color: var(--btw-tb-muted);
font-size: 1.125rem;
line-height: 1;
cursor: pointer;
}
.btw_tb_remove:hover,
.btw_tb_remove:focus-visible {
border-color: var(--btw-tb-error);
color: var(--btw-tb-error);
outline: none;
}
.btw_tb_hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.btw_tb_sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.btw_tb_actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
margin: 1.5rem 0 0;
}
.btw_tb_btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border: 1px solid var(--btw-tb-accent);
border-radius: 999px;
background: var(--btw-tb-accent);
color: #fff;
font: inherit;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
}
.btw_tb_btn:hover:not(:disabled),
.btw_tb_btn:focus-visible {
background: var(--btw-tb-accent-dark);
border-color: var(--btw-tb-accent-dark);
outline: none;
}
.btw_tb_btn:disabled {
opacity: 0.6;
cursor: progress;
}
.btw_tb_btn--danger {
background: var(--btw-tb-error);
border-color: var(--btw-tb-error);
}
.btw_tb_btn--danger:hover:not(:disabled),
.btw_tb_btn--danger:focus-visible {
background: #8f2324;
border-color: #8f2324;
} .btw_tb_link,
.btw_tb_link:link,
.btw_tb_link:visited,
.btw_tb_link:hover,
.btw_tb_link:focus,
.btw_tb_link:active {
padding: 0;
border: 0;
background: none;
color: var(--btw-tb-accent);
font: inherit;
font-size: 0.9375rem;
text-decoration: underline;
cursor: pointer;
}
.btw_tb_link:hover,
.btw_tb_link:focus-visible {
color: var(--btw-tb-accent-dark);
}
.btw_tb a,
.btw_tb a:link,
.btw_tb a:visited,
.btw_tb a:hover,
.btw_tb a:focus,
.btw_tb a:active {
color: var(--btw-tb-accent);
}
.btw_tb_back {
margin: 1rem 0 0;
} .btw_tb_error,
.btw_tb_field_error {
color: var(--btw-tb-error);
font-size: 0.875rem;
}
.btw_tb_error {
margin: 0 0 1rem;
padding: 0.75rem 1rem;
border: 1px solid #f0b8ba;
border-left-width: 3px;
border-radius: var(--btw-tb-radius-sm);
background: #fcf0f1;
}
.btw_tb_field_error:empty {
display: none;
}
.btw_tb_status {
margin: 0.75rem 0 0;
font-size: 0.9375rem;
color: var(--btw-tb-muted);
}
.btw_tb_status.is-success {
color: var(--btw-tb-success);
font-weight: 600;
}
.btw_tb_status.is-error {
color: var(--btw-tb-error);
}
.btw_tb_loading,
.btw_tb_empty {
margin: 0;
padding: 0.75rem 0;
color: var(--btw-tb-muted);
font-size: 0.9375rem;
}
.btw_tb_notice {
padding: 0.75rem 1rem;
border-left: 3px solid var(--btw-tb-accent);
background: var(--btw-tb-bg-soft);
font-size: 0.9375rem;
} .btw_tb_card--success {
border-color: #bfe3c8;
}
.btw_tb_success_icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 0.875rem;
border-radius: 50%;
background: #e8f6ec;
color: var(--btw-tb-success);
}
.btw_tb_success_text {
margin: 0;
color: var(--btw-tb-muted);
}
.btw_tb_card:focus-visible {
outline: 2px solid var(--btw-tb-accent);
outline-offset: 2px;
}
.btw_tb_summary {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0 1.25rem;
margin: 0 0 1rem;
font-size: 0.9375rem;
}
@container btw-tb (min-width: 360px) {
.btw_tb_summary {
grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
}
}
.btw_tb_summary dt {
color: var(--btw-tb-muted);
}
.btw_tb_summary dd {
margin: 0 0 0.5rem;
font-weight: 600;
color: var(--btw-tb-ink);
}
.btw_tb--cancel .btw_tb_headline {
margin: 0 0 1rem;
font-size: 1.125rem;
color: var(--btw-tb-ink);
}
.btw_tb_panel {
padding: 1.5rem;
border: 1px solid var(--btw-tb-line);
border-radius: var(--btw-tb-radius);
background: var(--btw-tb-bg);
box-shadow: var(--btw-tb-shadow);
}  @container btw-tb (max-width: 480px) {
.btw_tb_card,
.btw_tb_card--booking > *,
.btw_tb_panel {
padding: 1.125rem;
}
}
@container btw-tb (max-width: 400px) {
.btw_tb_cal_title {
font-size: 0.9375rem;
}
}
@container btw-tb (max-width: 360px) {
.btw_tb_card,
.btw_tb_panel {
font-size: 15px; --btw-tb-day: 24px;
}
.btw_tb_card,
.btw_tb_card--booking > *,
.btw_tb_panel {
padding: 0.875rem;
}
.btw_tb_day {
font-size: 0.8125rem;
}
.btw_tb_btn {
width: 100%;
text-align: center;
}
}
@container btw-tb (min-width: 560px) {
.btw_tb_card,
.btw_tb_panel {
--btw-tb-day: 44px;
}
} .btw_tb_types {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
@container btw-tb (min-width: 620px) {
.btw_tb_types {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.btw_tb_types li {
margin: 0;
}
.btw_tb_type {
display: flex;
align-items: center;
gap: 0.875rem;
width: 100%;
height: 100%;
padding: 1rem;
border: 1px solid var(--btw-tb-line);
border-radius: var(--btw-tb-radius-sm);
background: var(--btw-tb-bg);
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btw_tb_type:hover,
.btw_tb_type:focus-visible {
border-color: var(--btw-tb-accent);
background: var(--btw-tb-accent-softer);
box-shadow: 0 0 0 1px var(--btw-tb-accent);
outline: none;
}
.btw_tb_type_body {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
flex: 1 1 auto;
}
.btw_tb_type_name {
font-weight: 700;
color: var(--btw-tb-ink);
}
.btw_tb_type_meta {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8125rem;
color: var(--btw-tb-muted);
}
.btw_tb_type_note {
font-size: 0.875rem;
color: var(--btw-tb-muted);
}
.btw_tb_side_type {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0.6rem 0 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--btw-tb-ink);
}
.btw_tb_side_type svg,
.btw_tb_type_meta svg {
color: var(--btw-tb-muted);
}
.btw_tb_side_meta {
margin-top: 0.2rem;
font-weight: 400;
color: var(--btw-tb-muted);
} .btw_tb_waitlist {
margin: 1rem 0 0;
padding: 0.875rem 1rem;
border-radius: var(--btw-tb-radius-sm);
background: var(--btw-tb-bg-soft);
text-align: center;
}
.btw_tb_waitlist .btw_tb_empty {
padding: 0;
font-weight: 600;
color: var(--btw-tb-ink);
}
.btw_tb_waitlist_text {
margin: 0.35rem 0 0;
font-size: 0.875rem;
color: var(--btw-tb-muted);
} .btw_tb_summary s {
color: var(--btw-tb-muted);
font-weight: 400;
} .btw_tb_slot_seats {
flex: 0 0 auto;
margin-left: 0.25rem;
padding: 0.05rem 0.35rem;
border-radius: 999px;
background: var(--btw-tb-accent-soft);
color: var(--btw-tb-accent);
font-size: 0.6875rem;
font-weight: 600;
}
.btw_tb_slot:hover .btw_tb_slot_seats,
.btw_tb_slot:focus-visible .btw_tb_slot_seats {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}  @supports not (container-type: inline-size) {
@media (min-width: 375px) {
.btw_tb_summary {
grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
}
}
@media (max-width: 575px) {
.btw_tb_card,
.btw_tb_card--booking > *,
.btw_tb_panel {
padding: 1.125rem;
}
}
@media (max-width: 359px) {
.btw_tb_card,
.btw_tb_panel {
font-size: 15px;
--btw-tb-day: 24px;
}
.btw_tb_card,
.btw_tb_card--booking > *,
.btw_tb_panel {
padding: 0.875rem;
}
.btw_tb_day {
font-size: 0.8125rem;
}
.btw_tb_cal_title {
font-size: 0.9375rem;
}
.btw_tb_btn {
width: 100%;
text-align: center;
}
}
@media (min-width: 576px) {
.btw_tb_card,
.btw_tb_panel {
--btw-tb-day: 44px;
}
}
@media (min-width: 768px) {
.btw_tb_hosts,
.btw_tb_types {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.btw_tb_card--booking {
grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
}
.btw_tb_card--booking.has-slots {
grid-template-columns: minmax(180px, 230px) minmax(320px, 1fr) minmax(190px, 224px);
}
.btw_tb_side {
border-bottom: 0;
border-right: 1px solid var(--btw-tb-line);
}
.btw_tb_card--booking.has-slots .btw_tb_slots {
border-top: 0;
border-left: 1px solid var(--btw-tb-line);
display: flex;
flex-direction: column;
min-height: 0;
max-height: 34rem;
}
.btw_tb_card--booking.has-slots .btw_tb_slots_list {
grid-template-columns: minmax(0, 1fr);
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
}
}
@media (min-width: 1200px) {
.btw_tb_hosts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}