/*!
 * Bookatable restyle — white + brand green, matching the approved app and
 * website mockups (Inter, pill controls, borderless image-led cards).
 * Loaded last, after the theme stylesheets, so it overrides them.
 * Nothing here changes markup: it is a presentation layer only.
 */

:root {
    --bt-green: #4EB711;
    --bt-green-dark: #3A9A0C;
    --bt-ink: #212121;
    --bt-muted: #6C6C6C;
    --bt-soft: #F5F5F5;
    --bt-mint: #F6FBF3;
    --bt-line: #F0F0F0;
    --bt-outline: #E6E6E6;
    --bt-radius-card: 24px;
    --bt-radius-pill: 999px;
}

/* ---------------------------------------------------------------- base */
body {
    background: #fff;
    color: var(--bt-ink);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--bt-green); }
a:hover { color: var(--bt-green-dark); }
h1, h2, h3, h4, h5, h6, .card-title, .common-title h4 {
    color: var(--bt-ink);
    letter-spacing: -0.02em;
}
p { color: var(--bt-muted); }
.text-green, .main-color { color: var(--bt-green) !important; }

/* -------------------------------------------------------------- header */
.header-card {
    background: #fff;
    box-shadow: none;
    border-bottom: 1px solid var(--bt-line);
    padding: 16px 0;
}
.header-logo img { height: 26px; width: auto; }
.header-navbar .nav-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--bt-ink);
    padding: 8px 0;
    margin: 0 18px;
}
.header-navbar .nav-link:hover,
.header-navbar .nav-link.active { color: var(--bt-green); }

/* ------------------------------------------------------------- buttons */
.common-btn,
.btn-login,
.btn-success,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    background: var(--bt-green);
    border: 1.5px solid var(--bt-green);
    border-radius: var(--bt-radius-pill);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}
.common-btn:hover,
.btn-login:hover,
.btn-success:hover,
.btn-primary:hover {
    background: var(--bt-green-dark);
    border-color: var(--bt-green-dark);
    color: #fff;
}
/* header: Login is the quiet one, Signup the solid one */
.header-rt-card .common-btn {
    min-height: 44px;
    padding: 0 22px;
    font-size: 15px;
}
.header-rt-card .common-btn[href*="login"] {
    background: #fff;
    color: var(--bt-ink);
    border-color: var(--bt-outline);
    font-weight: 700;
}
.header-rt-card .common-btn[href*="login"]:hover {
    border-color: var(--bt-ink);
    color: var(--bt-ink);
}
.menu-btn {
    background: #fff;
    border: 1.5px solid var(--bt-outline);
    border-radius: var(--bt-radius-pill);
    padding: 10px 18px;
    font-weight: 700;
    text-transform: none;
    color: var(--bt-ink);
}
/* quiet / outline actions */
.common-lt-btn,
.btn-modern.btn-outline,
.btn-outline-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    background: #fff;
    border: 1.5px solid var(--bt-outline);
    border-radius: var(--bt-radius-pill);
    color: var(--bt-ink) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.common-lt-btn:hover,
.btn-modern.btn-outline:hover,
.btn-outline-success:hover {
    border-color: var(--bt-green);
    color: var(--bt-green) !important;
    background: var(--bt-mint);
}

/* --------------------------------------------------------------- forms */
.form-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--bt-ink);
    margin-bottom: 8px;
}
.form-control,
.form-select,
.common-form .form-control {
    min-height: 52px;
    height: auto;
    padding: 12px 20px;
    background: var(--bt-soft);
    border: 1.5px solid var(--bt-soft);
    border-radius: 26px;
    font-size: 15px;
    color: var(--bt-ink);
    box-shadow: none;
}
.form-control::placeholder { color: var(--bt-muted); }
.form-control:focus,
.form-select:focus,
.common-form .form-control:focus {
    background: #fff;
    border-color: var(--bt-green);
    box-shadow: none;
}
textarea.form-control { border-radius: 20px; }
.input-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bt-muted);
}
.form-check-input:checked {
    background-color: var(--bt-green);
    border-color: var(--bt-green);
}
.form-check-input:focus { box-shadow: none; border-color: var(--bt-green); }

/* ---------------------------------------------------------------- hero */
section.banner-sec-new { padding: 56px 0 64px; }
.banner-inner-box {
    background: #fff;
    padding: 0;
    border-radius: 0;
}
.banner-dis h4 {
    font-size: 56px;
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bt-ink);
}
.banner-dis > p {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--bt-muted);
    max-width: 540px;
}
.banner-img img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------ sections */
.pd-100 { padding: 64px 0; }
.pd-100.pt-0 { padding-top: 0; }
.common-title h4 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.common-title p {
    font-size: 16px;
    color: var(--bt-muted);
    font-weight: 500;
}
.bg-grey { background: var(--bt-mint); }

/* -------------------------------------------------- restaurant cards */
.card.geo-location,
.feature-link .card {
    border: 0;
    border-radius: var(--bt-radius-card);
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}
.feature-img {
    border-radius: var(--bt-radius-card);
    overflow: hidden;
}
.main-slider .feature-img { height: 210px; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-link .card-body { padding: 14px 2px 4px; }
.feature-link .card-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.feature-link .card-body > div:first-child > p {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: var(--bt-soft);
    font-size: 13px;
    font-weight: 800;
    color: var(--bt-ink);
}
.feature-link .card-body .fa-star { color: var(--bt-green); }
.location,
.distance-time {
    font-size: 14px;
    font-weight: 500;
    color: var(--bt-muted) !important;
}
.location .fa-location-dot { color: var(--bt-green); margin-right: 4px; }
.feature-link:hover .card-title { color: var(--bt-green); }

/* ------------------------------------------------------- how it works */
.works-box {
    padding: 28px;
    border: 0;
    border-radius: var(--bt-radius-card);
    background: var(--bt-mint);
}
.works-box .icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.works-box .icon i { color: var(--bt-green); font-size: 20px; }
.works-box h4 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.works-box p { font-size: 15px; line-height: 1.5; color: var(--bt-muted); margin-bottom: 0; }

/* --------------------------------------------------------- highlights */
.smart-card,
.explore-img,
.news-img,
.resturent-benner .news-img {
    border-radius: var(--bt-radius-card);
    overflow: hidden;
}
.client-slide {
    padding: 24px;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-card);
    background: #fff;
}
.client-icon img { border-radius: 50%; }
.client-name h5 { font-weight: 800; font-size: 16px; margin-bottom: 0; }

/* ----------------------------------------------------------- accordion */
.accordion-item {
    border: 1px solid var(--bt-line);
    border-radius: 18px !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.accordion-button {
    font-size: 17px;
    font-weight: 700;
    color: var(--bt-ink);
    background: #fff;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    background: var(--bt-mint);
    color: var(--bt-green);
}
.accordion-body { color: var(--bt-muted); font-size: 15px; line-height: 1.6; }

/* ---------------------------------------------------------- swiper nav */
.swiper-button-next,
.swiper-button-prev {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--bt-outline);
    color: var(--bt-ink);
}
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 14px; font-weight: 800; }
.swiper-button-next:hover,
.swiper-button-prev:hover { border-color: var(--bt-green); color: var(--bt-green); }

/* -------------------------------------------------------------- footer */
.ftr-card {
    background: #fff;
    border-top: 1px solid var(--bt-line);
    padding-top: 48px;
    padding-bottom: 24px;
}
.ftr-card p,
.ftr-card .text-white,
.ftr-card .ftr-links a,
.ftr-card .copy-right-card,
.ftr-card .copy-right-card * {
    color: var(--bt-muted) !important;
}
.ftr-card h4.ftr-hd,
.ftr-card h4.ftr-hd.text-white {
    color: var(--bt-ink) !important;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 14px;
}
.ftr-card .ftr-links a:hover { color: var(--bt-green) !important; }
.ftr-logo {
    display: inline-block;
    width: 150px;
    height: 26px;
    background: url("../img/logo.png") left center / contain no-repeat;
    margin-bottom: 14px;
}
.ftr-logo img { visibility: hidden; height: 26px; }
.ftr-social .ftr-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bt-soft);
    color: var(--bt-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
}
.ftr-social .ftr-icon:hover { background: var(--bt-mint); color: var(--bt-green); }
.copy-right-card { border-top: 1px solid var(--bt-line); }

/* ----------------------------------------------------- cookie consent */
.bg-bottom {
    background: #fff !important;
    border: 1px solid var(--bt-line);
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(33, 33, 33, .08);
}
.bg-bottom .btn-success { min-height: 40px; font-size: 14px; }

/* ------------------------------------------------------- auth screens */
.login-inr { border-radius: 28px; overflow: hidden; }
.login-lft { border-radius: 28px; }
/* The theme puts a flat 50% black wash over the photo, which still leaves the
   white copy fighting the bright plates underneath. Weight it towards the
   bottom, where the heading and the paragraph sit. */
.login-lft::before {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.52) 42%,
        rgba(0, 0, 0, 0.82) 100%) !important;
    opacity: 1 !important;
}
.login-form .form-head h4 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 6px;
}
.login-form .form-control { min-height: 54px; border-radius: 27px; }
.btn-login { width: 100%; min-height: 54px; font-size: 16px; }
.forgot-btn { font-weight: 700; color: var(--bt-green); }
.already-text { color: var(--bt-muted); font-weight: 500; }
.social-login .border-top { border-color: var(--bt-line) !important; }
.social-login .btn,
#facebook-signin-button {
    min-height: 48px;
    border-radius: var(--bt-radius-pill) !important;
    border: 1.5px solid var(--bt-outline) !important;
    background: #fff;
    font-weight: 700;
    color: var(--bt-ink);
}
.social-login .btn:hover,
#facebook-signin-button:hover { border-color: var(--bt-ink) !important; }

/* ------------------------------------------------- restaurant details */
.page-title-area { background: var(--bt-mint); border-radius: 0; }
.single-item-action { border-radius: var(--bt-radius-card); }
.shop-details .card,
.menu_img_wrp,
.add-card {
    border: 1px solid var(--bt-line);
    border-radius: 18px;
    box-shadow: none;
}
.menu_img_wrp img { border-radius: 14px; }
.content-wrap .card-title { font-size: 17px; font-weight: 800; }
.content-wrap .price { color: var(--bt-green); font-weight: 800; }
.badge {
    border-radius: var(--bt-radius-pill) !important;
    font-weight: 700;
}
.common-bd-btn {
    border-radius: var(--bt-radius-pill);
    border: 1.5px solid var(--bt-outline);
    color: var(--bt-ink);
    font-weight: 700;
}
.common-bd-btn:hover { border-color: var(--bt-green); color: var(--bt-green); }
.category-link.active,
.category-link:hover { color: var(--bt-green); }
.progress-bar-success, .progress-bar { background-color: var(--bt-green); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 991.98px) {
    .banner-dis h4 { font-size: 38px; }
    .banner-dis > p { font-size: 16px; }
    .common-title h4 { font-size: 28px; }
    .pd-100 { padding: 40px 0; }
    .login-inr { border-radius: 20px; }
    .login-form .form-head h4 { font-size: 28px; }
}
@media (max-width: 575.98px) {
    .banner-dis h4 { font-size: 32px; }
    .main-slider .feature-img { height: 180px; }
}

/* ============================================================ refinements */

/* Section headings are ink, as in the mockups; green stays for links/accents */
.common-title h4.text-green,
.common-title h4 { color: var(--bt-ink) !important; }

/* How it works: white cards on the mint section */
.works-box { background: #fff; border: 1px solid var(--bt-line); }
.works-box .icon { width: 48px; height: 48px; }

/* Feature grid: unify the icon chips */
.smart-card { border-color: var(--bt-line) !important; }
.smart-card .ftr-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bt-mint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.smart-card .ftr-icon img { width: 22px; height: 22px; object-fit: contain; }
.smart-card h4 { font-size: 20px; font-weight: 800; }

/* Auth pages sit on a white canvas; the photo lives inside the card */
.login-signup {
    background: #fff !important;
    min-height: auto;
    padding: 40px 0 64px;
}
.login-signup::after { display: none !important; }
.login-inr {
    box-shadow: none;
    border: 1px solid var(--bt-line);
}
.login-lft .text-info .typing > *,
.login-lft .text-info .typing h1 { text-transform: none; }
.login-lft .text-info .typing h1 {
    /* the typing effect needs white-space: nowrap, so the heading cannot wrap
       and used to run past the photo panel on narrow screens. It scales with
       the viewport instead, down to a size that fits. */
    font-size: clamp(22px, 3.1vw, 40px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.06;
}
.login-lft .text-info,
.login-lft .text-info .typing { max-width: 100%; }
.login-lft .text-info p { font-size: 15px; line-height: 1.5; max-width: 100%; }

/* "or continue with" stays lowercase */
.social-login .text-uppercase { text-transform: none !important; }
.social-login .small { font-size: 13px; font-weight: 500; }

/* Page banners */
.page-title-area .title,
.page-title-area h1,
.page-title-area h2 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Signup role chooser reads as pills, in brand green */
.custom-radios .radio-label {
    height: 44px;
    padding: 0 22px;
    border-radius: var(--bt-radius-pill);
    border: 1.5px solid var(--bt-outline);
    background: #fff;
    color: var(--bt-ink);
    font-size: 14px;
    font-weight: 700;
}
.custom-radios .radio-input:checked + .radio-label {
    background: var(--bt-green);
    border-color: var(--bt-green);
    color: #fff;
}

/* Bootstrap's green never shows through: the brand green is the only accent */
.text-success { color: var(--bt-green) !important; }
.bg-success,
.badge.bg-success { background-color: var(--bt-green) !important; }
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active { color: var(--bt-green); }
.nav-pills .nav-link.active { background: var(--bt-mint); border-radius: var(--bt-radius-pill); }
.page-item.active .page-link {
    background: var(--bt-green);
    border-color: var(--bt-green);
}
.page-link { color: var(--bt-ink); border-radius: 8px; }

/* ==================================================== rebuilt home page  */
/* Hero, search card, chips, featured card and restaurant cards, rebuilt to
   match the approved mockup (the app's visual language on the web). */

.bt-hero { padding: 56px 0 24px; }
.bt-hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.bt-badge {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--bt-mint);
    color: var(--bt-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bt-hero-title {
    margin: 0;
    font-size: 58px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bt-ink);
}
.bt-hero-sub {
    margin: 0;
    max-width: 540px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--bt-muted);
}

/* search card */
.bt-search {
    width: 100%;
    max-width: 640px;
    padding: 20px;
    border-radius: var(--bt-radius-card);
    background: var(--bt-soft);
}
.bt-search .form-group,
.bt-search .mb-3 { margin-bottom: 0 !important; }
.bt-field { position: relative; }
.bt-field > i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bt-ink);
    font-size: 15px;
    z-index: 2;
    pointer-events: none;
}
/* Room for the leading icon -- but not in the guests stepper, whose number
   sits between two round buttons at the far end of the field and is only
   44px wide. 46px of left padding pushed it clean out of its own box, and
   the guest saw an empty gap that did not react to + or -. The widget sets
   padding: 0 on it, but that is specificity (0,2,0) against this rule's
   (0,2,1), so it lost. Excluded here rather than patched per page: the
   search bar and the checkout each carry their own override for exactly
   this, and the next form to use the widget would have needed a third. */
.bt-field:not(.bt-guests) > i ~ * .form-control,
.bt-field:not(.bt-guests) > i ~ .form-select,
.bt-field:not(.bt-guests) > i ~ * .form-select { padding-left: 46px; }
.bt-search .form-control,
.bt-search .form-select {
    min-height: 52px;
    border-radius: 26px;
    background: #fff;
    border: 1.5px solid #fff;
    font-size: 15px;
    font-weight: 500;
}
.bt-search .form-control:focus,
.bt-search .form-select:focus { border-color: var(--bt-green); }
.bt-guests {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* 54px so it lines up with the date and time fields beside it, and the
       left inset leaves room for the icon the other fields have */
    height: 54px;
    padding: 0 8px 0 46px;
    border-radius: 27px;
    background: #fff;
}
.bt-guests-label { font-size: 15px; font-weight: 700; color: var(--bt-ink); }
.bt-guests .guests-input-group { display: flex; align-items: center; gap: 6px; }
.bt-guests .guest-control {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bt-soft);
    color: var(--bt-ink);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bt-guests .guest-control.plus { background: var(--bt-green); color: #fff; }
.bt-guests .guest-control:disabled {
    background: var(--bt-soft);
    color: #C5C5C5;
    cursor: default;
}
.bt-guests .guest-control.plus:disabled { background: var(--bt-soft); color: #C5C5C5; }
.bt-guests .form-control {
    width: 44px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 800;
}
.bt-search-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
/* on a wide card the buttons sit beside the guests field rather than under it */
@media (min-width: 992px) {
    .bt-search-actions { margin-top: 0; height: 100%; }
}
.bt-clear {
    height: 52px;
    padding: 0 22px;
    border-radius: 26px;
    border: 0;
    background: #fff;
    color: var(--bt-ink);
    font-size: 15px;
    font-weight: 700;
}
.bt-clear:hover { background: #fff; color: var(--bt-green); }

/* the Bookatable logo stands in for the "Book a table" label */
.bt-logo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    border-radius: 26px;
    background: #fff;
    border: 2px solid var(--bt-green);
    font-size: 0;
    line-height: 1;
}
/* The logo file is 150x40, so it is 3.75 wide for every 1 tall, and these
   boxes are painted with `contain`: whichever side binds first decides the
   size and the rest of the box stays empty. Every one of them was declared at
   about 6:1, so the height bound, the width went to waste, and a 330px button
   carried a 75px wordmark that could not be read. The header logo paints at
   98x26 and reads perfectly well; nothing in a button should be smaller.
   Keep width >= height x 3.75 whenever these change. */
.bt-logo-btn::after {
    content: "";
    display: block;
    width: 105px;
    height: 28px;
    background: url("../img/logo.png") center / contain no-repeat;
}
.bt-logo-btn:hover { background: var(--bt-mint); border-color: var(--bt-green-dark); }

/* featured card, the app hero on the web */
.bt-hero-card {
    position: relative;
    display: block;
    height: 560px;
    border-radius: 28px;
    overflow: hidden;
    background: var(--bt-ink);
}
.bt-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78) 100%);
}
.bt-featured {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background: var(--bt-green);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}
.bt-hero-card-body {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bt-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bt-hero-name {
    font-size: 38px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.bt-hero-meta {
    display: flex;
    gap: 16px;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 600;
}

/* section head */
.bt-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.bt-section-title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bt-ink);
}
.bt-see-all { font-size: 15px; font-weight: 700; white-space: nowrap; }

/* restaurant cards */
.bt-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--bt-ink);
}
.bt-card-photo {
    position: relative;
    display: block;
    /* A flat 200px made the tile 2.5:1 on a wide card, and almost nothing is
       uploaded that shape: a plain 4:3 photo lost 46% of itself to the crop.
       3:2 follows the column width and is close enough to what restaurants
       actually upload that most photos now need no crop worth the name. */
    aspect-ratio: 3 / 2;
    min-height: 170px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bt-soft);
}
.bt-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-card-rating {
    position: absolute;
    top: 12px;
    left: 12px;
    height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    color: var(--bt-ink);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bt-card-rating .fa-star { color: var(--bt-green); font-size: 11px; }
.bt-card-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.bt-card-meta { font-size: 14px; color: var(--bt-muted); font-weight: 500; margin-top: -4px; }
.bt-card-meta:empty { display: none; }
.bt-card:hover .bt-card-name { color: var(--bt-green); }

@media (max-width: 991.98px) {
    /* the row below opens with pt-0, so the hero has to leave the gap:
       8px put "Most Popular" almost on the featured card */
    .bt-hero { padding: 32px 0 36px; }
    .bt-hero-title { font-size: 38px; }
    .bt-hero-sub { font-size: 16px; }
    .bt-hero-card { height: 380px; margin-top: 8px; }
    .bt-hero-name { font-size: 28px; }
    .bt-section-title { font-size: 26px; }
    .bt-search { max-width: none; }
}
@media (max-width: 575.98px) {
    .bt-hero-title { font-size: 32px; }
    .bt-search { padding: 14px; border-radius: 20px; }
    .bt-search-actions { justify-content: stretch; }
    .bt-search-actions .bt-logo-btn { flex: 1; }
}
/* The logo stands in for the button's label, so it has to carry the button.
   At 126x20 inside a 52px pill it read as a small badge on a phone. Raising
   the height to 26 helped and raising the width to 152 did nothing at all:
   at 152x26 the height still bound and the logo painted 97x26 in a box half
   empty. Both numbers have to move together. */
@media (max-width: 991.98px) {
    .bt-search-actions .bt-logo-btn,
    .bt-search-actions .bt-clear { height: 54px; }
    .bt-search-actions .bt-logo-btn::after { width: 113px; height: 30px; }
}

/* the mockup's card rows have no arrows: the row stays swipeable */
.bt-section .swiper-button-next,
.bt-section .swiper-button-prev { display: none; }
.bt-card-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cuisines and the full address both wrap rather than being cut off: a
   restaurant can serve several cuisines and the address carries the resort,
   the road, the village, the district and the country. */
.bt-card-cuisines,
.bt-card-address {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.bt-card-cuisines {
    -webkit-line-clamp: 2;
    color: var(--bt-ink);
    font-weight: 600;
}
.bt-card-address {
    -webkit-line-clamp: 3;
    margin-top: 2px;
    font-size: 13px;
}

/* Slides carry different amounts of text now, so let them all take the
   height of the tallest one instead of ending at ragged depths. */
.featureSwiper .swiper-wrapper { align-items: stretch; }
.featureSwiper .swiper-slide { height: auto; }

/* ------------------------------------------------- social sign-in buttons */
/* Both buttons are ours, so they are the same size and sit side by side at
   every width. Google's own button is laid over the left pill, invisible,
   because their library will not render below 200px wide. */
.bt-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}
.bt-social-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0 10px;
    border-radius: 24px;
    border: 1.5px solid var(--bt-outline) !important;
    background: #fff;
    color: var(--bt-ink);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    line-height: 1;
}
.bt-social-btn > svg { flex: none; }
.bt-social-btn > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-social-btn:hover { border-color: var(--bt-green) !important; background: var(--bt-mint); }

/* Google's button, stretched over the pill and hidden: the click still
   reaches it. Wider than the pill on a narrow screen, which is why the pill
   clips its overflow. */
.bt-social-gis {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.bt-social-gis > div { min-width: 100%; }

/* the older #facebook-signin-button rule wins on specificity, so the paired
   button's hover has to be restated to match Google's */
.bt-social-grid #facebook-signin-button:hover {
    border-color: var(--bt-green) !important;
    background: var(--bt-mint);
}

/* the fields sit directly on the soft search card, as in the mockup */
.bt-search .modern-booking-form {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.bt-search .modern-booking-form .form-select {
    height: 52px !important;
    min-height: 52px;
    border-radius: 26px;
    background-color: #fff;
    border: 1.5px solid #fff;
    padding: 10px 18px 10px 46px;
}
.bt-search .modern-booking-form .form-control { padding-left: 46px; }
.bt-search .modern-booking-form .bt-guests .form-control { padding-left: 0; }
.bt-search .modern-booking-form .form-group { margin-bottom: 0; }
.bt-search .modern-booking-form .guest-control { padding: 0; height: 32px; }
.bt-search .bt-field > .mb-3,
.bt-search .bt-field .form-group { margin-bottom: 0 !important; }
/* date and time have no leading icon */
.bt-search .col-6 .form-control,
.bt-search .col-lg-4 .form-control { padding-left: 18px; }

/* ------------------------------------------------ restaurant listing page */
.page-title-area.rest-title-area {
    background: var(--bt-mint) !important;
    padding: 32px 0;
}
.page-title-area.rest-title-area::before,
.page-title-area.rest-title-area::after { display: none; }
.restaurant-search-filter {
    background: #fff;
    border-radius: var(--bt-radius-card);
    padding: 18px;
    box-shadow: none;
    border: 1px solid var(--bt-line);
}
.restaurant-search-filter .form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-ink);
}
.restaurant-search-filter .form-control,
.restaurant-search-filter .form-select {
    min-height: 50px;
    border-radius: 25px;
    background: var(--bt-soft);
    border-color: var(--bt-soft);
}
.restaurant-search-filter .btn,
.restaurant-search-filter button[type="submit"] {
    min-height: 50px;
    border-radius: var(--bt-radius-pill);
    background: var(--bt-green);
    border-color: var(--bt-green);
    font-weight: 800;
}
/* filter rail + result cards */
.applied-filters,
.filter-sidebar,
.shop-sidebar {
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-card);
}
.form-check-input:checked { background-color: var(--bt-green); border-color: var(--bt-green); }

/* ================================================ home: rebuilt mid-page */
.bt-block { padding: 56px 0 0; }
.bt-block-text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--bt-muted);
    font-weight: 500;
    max-width: 480px;
}

/* how it works */
.bt-step {
    height: 100%;
    padding: 28px;
    border-radius: var(--bt-radius-card);
    background: var(--bt-mint);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bt-step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bt-step-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.bt-step-text { font-size: 15px; line-height: 1.5; color: var(--bt-muted); font-weight: 500; }

/* offer banner */
.bt-offer {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 44px 48px;
    border-radius: 28px;
    background: var(--bt-green);
    color: #fff;
}
.bt-offer-copy { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bt-offer-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: .85;
}
.bt-offer-title {
    margin: 0;
    font-size: 42px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.bt-offer-text { margin: 0; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.bt-offer-btn {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 0 28px;
    margin-top: 6px;
    border-radius: 26px;
    background: #fff;
    color: var(--bt-ink);
    font-size: 15px;
    font-weight: 800;
}
.bt-offer-btn:hover { background: var(--bt-mint); color: var(--bt-ink); }
.bt-offer-photo { height: 240px; border-radius: 20px; overflow: hidden; }
.bt-offer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* app download */
.bt-store-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.bt-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 24px;
    border: 1.5px solid var(--bt-outline);
    color: var(--bt-ink);
    font-size: 14px;
    font-weight: 700;
}
.bt-store-btn:hover { border-color: var(--bt-green); color: var(--bt-green); }
.bt-app-shot { max-width: 100%; height: auto; }

/* FAQ */
.faq-sec.bt-block { padding-bottom: 8px; }
.bt-ghost-btn {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 22px;
    border-radius: var(--bt-radius-pill);
    border: 1.5px solid var(--bt-outline);
    color: var(--bt-ink);
    font-size: 15px;
    font-weight: 700;
}
.bt-ghost-btn:hover { border-color: var(--bt-green); color: var(--bt-green); }

@media (max-width: 991.98px) {
    .bt-block { padding-top: 36px; }
    .bt-offer { grid-template-columns: 1fr; padding: 28px; }
    .bt-offer-title { font-size: 30px; }
    .bt-offer-photo { height: 180px; }
}

/* ============================================== restaurant detail page */
.bt-rest { padding: 24px 0 8px; }

/* gallery */
.bt-gallery {
    display: grid;
    /* Two columns for a short gallery, three once there are four thumbs to
       place. Declared here, above the responsive blocks, because a media
       query adds no specificity: further down the file these won, and a
       phone was getting a 2fr/1fr pair of mismatched thumbs. */
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 12px;
}
.bt-gallery.bt-gallery-wide { grid-template-columns: 2fr 1fr 1fr; }
.bt-gallery-main {
    grid-row: span 2;
    position: relative;
    border-radius: var(--bt-radius-card);
    overflow: hidden;
    background: var(--bt-ink);
}
.bt-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-gallery-thumb {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bt-soft);
}
.bt-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-gallery-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bt-open {
    position: absolute;
    top: 16px;
    left: 16px;
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background: var(--bt-green);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bt-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* layout */
.bt-rest-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    align-items: start;
    padding-top: 32px;
}
.bt-rest-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.bt-rest-head { display: flex; flex-direction: column; gap: 10px; }
.bt-rest-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bt-muted);
}
.bt-sep { width: 4px; height: 4px; border-radius: 50%; background: #C5C5C5; display: inline-block; }
.bt-rest-title {
    margin: 0;
    font-size: 46px;
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bt-ink);
}
.bt-rest-facts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 15px;
}
.bt-rest-rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; }
.bt-rest-rating .fa-star { color: var(--bt-green); }
.bt-rest-rating span { font-weight: 500; color: var(--bt-muted); }
.bt-rest-address { color: var(--bt-muted); font-weight: 500; }
.bt-rest-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bt-tag {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    border: 1.5px solid var(--bt-outline);
    font-size: 13px;
    font-weight: 600;
}

/* tabs as pills */
.bt-tabs {
    display: flex;
    gap: 8px;
    border: 0;
    flex-wrap: wrap;
}
.bt-tabs .nav-link {
    height: 40px;
    padding: 0 18px;
    border: 0 !important;
    border-radius: 20px;
    background: var(--bt-soft);
    color: var(--bt-ink);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.bt-tabs .nav-link.active {
    background: var(--bt-green) !important;
    color: #fff !important;
    font-weight: 700;
}

/* menu */
.bt-menu-filters { display: flex; gap: 10px; margin-bottom: 18px; }
.bt-menu-filters .form-select {
    min-height: 44px;
    border-radius: 22px;
    background-color: var(--bt-soft);
    border-color: var(--bt-soft);
    font-size: 14px;
    font-weight: 600;
}
/* A course the kitchen only cooks on some days, said under the chips. */
.bt-menu-daynote {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: -4px 0 14px;
	font-size: 13px;
	color: #6B7A72;
}

.bt-menu-daynote i { color: var(--bt-green); }

.bt-cat-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.bt-cat-chip {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    background: var(--bt-soft);
    color: var(--bt-ink);
    font-size: 13px;
    font-weight: 600;
}
.bt-cat-chip.active,
.bt-cat-chip:hover { background: var(--bt-green); color: #fff; font-weight: 700; }
.bt-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    /* Descriptions run to their full length now, and one dish on this menu is
       a 31-line brunch. Without this its neighbour stretches to match and
       becomes a mostly empty card. */
    align-items: start;
}
.bt-menu-item {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
    background: var(--bt-soft);
    /* Centred looked right when every dish was two lines; on a long one it
       stranded the photo halfway down the card, beside nothing. */
    align-items: flex-start;
}
.bt-menu-photo {
    width: 88px;
    height: 88px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}
.bt-menu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-menu-body { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.bt-menu-name { font-size: 16px; font-weight: 700; }
.bt-menu-desc {
    font-size: 13px;
    color: var(--bt-muted);
    font-weight: 500;
    /* The whole description, on every screen. It was clamped to two lines,
       which cut the end off 21 dishes and hid the second half of anything
       written as a list. pre-line keeps the line breaks the restaurant typed
       -- see Menu::descriptionText(). */
    white-space: pre-line;
}
.bt-menu-price { font-size: 15px; font-weight: 800; margin-top: 4px; }
.bt-menu-add .restaurant_edit,
.bt-menu-add .add-card { margin: 0 !important; }
.bt-menu-add .common-bd-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: var(--bt-green);
    border: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bt-menu-add .common-bd-btn i { margin: 0 !important; }
.bt-menu-add .common-bd-btn:hover { background: var(--bt-green-dark); color: #fff; }
.bt-menu-add .qty-box {
    height: 40px;
    padding: 0 6px;
    border-radius: 20px;
    background: #fff;
}
.bt-menu-add .qty-box .common-bd-btn {
    width: 30px;
    height: 30px;
    background: var(--bt-soft);
    color: var(--bt-ink);
}
.bt-menu-add .qty-box .common-bd-btn:last-child { background: var(--bt-green); color: #fff; }
.bt-empty { color: var(--bt-muted); padding: 24px 0; }
.bt-prose { font-size: 15px; line-height: 1.6; color: var(--bt-muted); }
.bt-prose p { color: var(--bt-muted); }
.bt-hours .badge { margin: 0 6px 6px 0; }

/* booking panel */
.bt-book-panel {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--bt-radius-card);
    background: #fff;
    border: 1.5px solid var(--bt-line);
}
.bt-book-actions { display: flex; gap: 8px; }
.bt-logo-btn-sm { flex: 1; height: 44px; padding: 0 12px; border-radius: 22px; }
/* Was 100x16, which painted the wordmark 60px wide -- the worst of them. */
.bt-logo-btn-sm::after { width: 98px; height: 26px; }
.bt-takeaway-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    border-radius: 22px;
    background: var(--bt-soft);
    color: var(--bt-ink);
    font-size: 14px;
    font-weight: 600;
}
.bt-takeaway-btn:hover { background: var(--bt-mint); color: var(--bt-green); }
.bt-book-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 15px;
}
.bt-book-label { font-weight: 800; }
.bt-book-value { color: var(--bt-muted); font-weight: 600; }
.bt-loyalty-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--bt-mint);
    font-size: 13px;
    font-weight: 500;
}
.bt-loyalty-note i { color: var(--bt-green); }
.bt-logo-btn-wide { width: 100%; height: 54px; border-radius: 27px; }
/* It had no size of its own, so the widest button on the page wore the same
   logo as the narrowest. There is room here for the largest of them. */
.bt-logo-btn-wide::after { width: 120px; height: 32px; }
.bt-book-foot { font-size: 12px; color: var(--bt-muted); text-align: center; font-weight: 500; }

@media (max-width: 1199.98px) {
    .bt-rest-body { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; }
}
@media (max-width: 991.98px) {
    /* The big photo takes the full width, and the thumbs sit under it in one
       row -- as many equal columns as there are thumbs, so two thumbs are not
       left at 2fr and 1fr. The first row is auto: the big tile's height comes
       from its own photo (set by bt-photos.js), so filling the tile edge to
       edge costs almost nothing. */
    .bt-gallery,
    .bt-gallery.bt-gallery-wide {
        grid-template-columns: repeat(var(--bt-thumbs, 3), minmax(0, 1fr));
        grid-template-rows: auto auto;
    }
    /* A fixed row height made a 190px-wide thumb 76px tall -- a 2.5:1 slot
       that took 70% off a portrait photo. Following the column width instead
       keeps the thumb close to the shape of what goes in it. */
    .bt-gallery-thumb { aspect-ratio: 3 / 2; }
    .bt-gallery-main {
        grid-column: 1 / -1;
        grid-row: auto;
        aspect-ratio: 4 / 3;        /* until the photo's own shape is known */
    }
    .bt-gallery-thumb:nth-child(n+5) { display: none; }   /* three fit the row */
    .bt-rest-body { grid-template-columns: minmax(0, 1fr); }
    .bt-rest-title { font-size: 32px; }
    .bt-menu-grid { grid-template-columns: minmax(0, 1fr); }
    .bt-book-panel { position: static; }
}

/* the Add control is a round green button, its label is for screen readers */
.bt-menu-add .common-bd-btn { font-size: 0; }
.bt-menu-add .common-bd-btn i { font-size: 15px; }
.bt-menu-add .qty-box .common-bd-btn { font-size: 15px; }
.bt-menu-add .qty-box .mx-3 { margin: 0 8px !important; font-size: 15px; }

/* ------------------------------------------- inner page headers */
/* the mockup has no photo banner: pages open with a heavy heading */
.page-title-area {
    height: auto !important;
    background-image: none !important;
    background: #fff !important;
    padding: 44px 0 4px;
    border-bottom: 0;
}
.page-title-area::before,
.page-title-area::after { display: none !important; }
.page-title-area .page-title-wrapper { text-align: left !important; }
.page-title-area .page-title {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--bt-ink) !important;
    margin-bottom: 8px;
}
.page-title-area .breadcrumb-menu,
.page-title-area .trail-items,
.page-title-area .trail-items span {
    color: var(--bt-muted);
    font-size: 14px;
    font-weight: 500;
}
.page-title-area .trail-items { display: flex; gap: 8px; list-style: none; padding: 0; justify-content: flex-start; }
.page-title-area .trail-items a { color: var(--bt-green); }
.page-title-area .trail-item + .trail-item::before { content: "›"; margin-right: 8px; color: #C5C5C5; }
/* the listing page keeps its mint band */
.page-title-area.rest-title-area {
    background: var(--bt-mint) !important;
    padding: 32px 0;
}

/* ------------------------------------------------------- member area */
.dashboard_menu,
.user-inr-menu {
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-card);
    padding: 10px;
    background: #fff;
}
.dashboard_menu ul { list-style: none; padding: 0; margin: 0; }
.dashboard_menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--bt-radius-pill);
    color: var(--bt-ink);
    font-size: 15px;
    font-weight: 600;
    background: transparent;
}
.dashboard_menu a:hover { background: var(--bt-soft); color: var(--bt-ink); }
.dashboard_menu a.active {
    background: var(--bt-mint) !important;
    color: var(--bt-green) !important;
    font-weight: 800;
}
.dashboard_menu a.active i,
.dashboard_menu a.active svg { color: var(--bt-green); }

/* member cards and tables */
.dashboard-card,
.user-card,
.card {
    border-radius: var(--bt-radius-card);
}
.table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 18px;
}
.table > :not(caption) > * > * { border-color: var(--bt-line); }
.table thead th,
.table > thead > tr > th {
    background: var(--bt-soft) !important;
    color: var(--bt-ink) !important;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    border-bottom: 0;
    padding: 14px 12px;
}
.table tbody td { font-size: 14px; padding: 14px 12px; color: var(--bt-ink); }
.table tbody tr:hover { background: var(--bt-mint); }
.grid-view { border: 0; }
.summary { color: var(--bt-muted); font-size: 14px; }

/* the member menu's active item is a mint pill, not a solid green bar */
.dashboard_menu ul li a,
.dashboard_menu ul li a span {
    background: transparent !important;
    color: var(--bt-ink) !important;
}
.dashboard_menu ul li a:hover,
.dashboard_menu ul li a:hover span {
    background: var(--bt-soft) !important;
    color: var(--bt-ink) !important;
}
.dashboard_menu ul li a.active,
.dashboard_menu ul li a.active span,
.dashboard_menu ul li a.active:hover,
.dashboard_menu ul li a.active:hover span {
    background: var(--bt-mint) !important;
    color: var(--bt-green) !important;
    font-weight: 800;
}
.dashboard_menu ul li a span {
    border-radius: 50%;
    padding: 0 !important;
    width: auto;
}

/* ======================================== restaurant listing: filters */
.product-list-section { padding: 32px 0 56px !important; }
.bt-results-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
}
.bt-results-count { font-size: 15px; color: var(--bt-muted); font-weight: 600; }

.right_sidebar_area {
    position: sticky;
    top: 20px;
    padding: 8px 20px 20px;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-radius-card);
    background: #fff;
}
.right_sidebar_area .close-filter { display: none; }
.right_sidebar_area .s_widget {
    padding: 18px 0;
    border-bottom: 1px solid var(--bt-line);
}
.right_sidebar_area .s_widget:last-of-type { border-bottom: 0; }
.right_sidebar_area .s_title { margin-bottom: 12px; }
.right_sidebar_area .s_title h3,
.right_sidebar_area .s_title h4 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--bt-ink);
}
.right_sidebar_area .filter-main-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.right_sidebar_area .filter-main-heading a {
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-green);
}

/* applied filters as removable chips */
.right_sidebar_area ul.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.right_sidebar_area ul.tags:empty { display: none; }
.right_sidebar_area ul.tags li a,
.right_sidebar_area ul.tags li.active a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background: var(--bt-mint);
    color: var(--bt-green);
    font-size: 13px;
    font-weight: 700;
}
.right_sidebar_area ul.tags li a svg { width: 13px; height: 13px; }

/* the long category list scrolls instead of running down the page */
.catgory-check-card {
    max-height: 232px;
    overflow-y: auto;
    padding-right: 6px;
}
.catgory-check-card::-webkit-scrollbar { width: 6px; }
.catgory-check-card::-webkit-scrollbar-thumb { background: var(--bt-outline); border-radius: 3px; }
.catgory-check-card .form-group,
.catgory-check-card .mb-3 { margin-bottom: 0 !important; }
.checkbox-list label,
.catgory-check-card label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    margin: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bt-ink);
    cursor: pointer;
}
.checkbox-list label:hover,
.catgory-check-card label:hover { background: var(--bt-soft); }
.catgory-check-card input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    border: 1.5px solid var(--bt-outline);
    border-radius: 6px;
    background: #fff;
    position: relative;
    cursor: pointer;
}
.catgory-check-card input[type="checkbox"]:checked {
    background: var(--bt-green);
    border-color: var(--bt-green);
}
.catgory-check-card input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.catgory-check-card .fa-star { color: var(--bt-green) !important; font-size: 13px; }

.filter-btn-card { padding: 16px 0 0 !important; }
.filter-btn-card .common-btn {
    width: 100%;
    min-height: 50px;
    border-radius: var(--bt-radius-pill);
}

/* The rail applies as you tick, so it dims while the results come back
   instead of looking as though the tick did nothing. */
.bt-filter-busy { opacity: .55; pointer-events: none; transition: opacity .12s; }

/* The drawer's own layout was broken and had been all along: Bootstrap makes
   .offcanvas a flex column and gives .offcanvas-body the scrolling, but that
   only works when the body is a direct child. Here a <form> wraps it, so the
   form became the flex item, the body sized to its content and never scrolled,
   and everything past the fold -- the price fields and the Apply button --
   hung below the drawer where no amount of scrolling could reach it. On a
   phone you could tick a category and then had no way to apply it.

   The form is made the flex column instead, so the body scrolls again. */
#filtersExample { overflow: hidden; }
#filtersExample > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#filtersExample .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0 !important;
}

/* The drawer keeps its button, sat on the bottom edge where it is always
   reachable rather than below everything you have to scroll through. */
#filtersExample .filter-btn-card {
    position: sticky;
    bottom: 0;
    /* clears the home indicator on a phone with no hardware button */
    padding: 12px 0 max(12px, env(safe-area-inset-bottom)) !important;
    margin-top: 8px;
    background: #fff;
    box-shadow: 0 -8px 16px -10px rgba(0, 0, 0, .18);
}

/* mobile filter drawer */
.filter-card h4 { font-size: 20px; font-weight: 800; }
.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--bt-outline);
    color: var(--bt-ink);
}
.offcanvas .right_sidebar_area { border: 0; padding: 0 12px 12px; position: static; }

/* listing cards */
.bt-card-listed { margin-bottom: 28px; }
.bt-card-listed .bt-card-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--bt-ink);
}
.bt-card-listed .bt-card-photo { display: block; }
.bt-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--bt-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
}
.bt-heart:hover { color: var(--bt-green); background: #fff; }
.bt-heart .fa-solid.fa-heart { color: var(--bt-green); }
.custom-pagination { margin-top: 8px; }

/* pagination pills, shared by the listing and the menu tab */
.custom-pagination .pagination,
.bt-pager .pagination {
    display: flex;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}
.bt-pager { display: flex; justify-content: center; margin-top: 20px; }
.custom-pagination .pagination .page-link,
.bt-pager .pagination .page-link,
.custom-pagination .pagination li > a,
.bt-pager .pagination li > a {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 20px;
    border: 1.5px solid var(--bt-outline);
    background: #fff;
    color: var(--bt-ink);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none;
}
.custom-pagination .pagination li > a:hover,
.bt-pager .pagination li > a:hover {
    border-color: var(--bt-green);
    color: var(--bt-green);
    background: var(--bt-mint);
}
.custom-pagination .pagination li.active > a,
.bt-pager .pagination li.active > a {
    background: var(--bt-green);
    border-color: var(--bt-green);
    color: #fff;
}
.custom-pagination .pagination li.disabled > a,
.bt-pager .pagination li.disabled > a {
    color: #C5C5C5;
    border-color: var(--bt-line);
    pointer-events: none;
}

/* ------------------------------------------------- price + sort controls */
.bt-price-range { display: flex; align-items: flex-end; gap: 8px; }
.bt-price-field { flex: 1; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bt-price-field > span { font-size: 12px; font-weight: 700; color: var(--bt-muted); }
.bt-price-field .form-control {
    min-height: 44px;
    border-radius: 22px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    background: var(--bt-soft);
    border-color: var(--bt-soft);
}
.bt-price-dash { padding-bottom: 12px; color: var(--bt-muted); font-weight: 700; }
.bt-price-hint { margin: 8px 0 0; font-size: 12px; color: var(--bt-muted); font-weight: 500; }

.bt-results-head { flex-wrap: wrap; }
.bt-sort {
    margin: 0 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bt-muted);
}
.bt-sort .form-select {
    min-height: 44px;
    width: auto;
    border-radius: 22px;
    background-color: var(--bt-soft);
    border-color: var(--bt-soft);
    font-size: 14px;
    font-weight: 700;
    color: var(--bt-ink);
    padding: 8px 40px 8px 16px;
}

/* ------------------------------------------------------------ footer */
.bt-footer {
    margin-top: 64px;
    padding: 48px 0 24px;
    border-top: 1px solid var(--bt-line);
    background: #fff;
}
.bt-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 32px;
}
.bt-footer-brand img { height: 26px; width: auto; margin-bottom: 14px; }
.bt-footer-brand p {
    margin: 0;
    max-width: 320px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bt-muted);
    font-weight: 500;
}
.bt-footer-col h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--bt-ink);
    margin: 0 0 14px;
}
.bt-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bt-footer-col a { font-size: 14px; font-weight: 500; color: var(--bt-muted); }
.bt-footer-col a:hover { color: var(--bt-green); }
.bt-footer-social { display: flex; gap: 8px; }
.bt-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bt-soft);
    color: var(--bt-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bt-footer-social a:hover { background: var(--bt-mint); color: var(--bt-green); }
.bt-footer-appshd { margin-top: 22px !important; }
.bt-footer-apps { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bt-footer-apps .bt-store-btn { height: 44px; font-size: 13px; }
.bt-footer-base {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--bt-line);
    text-align: center;
    font-size: 13px;
    color: var(--bt-muted);
    font-weight: 500;
}
@media (max-width: 991.98px) {
    .bt-footer { margin-top: 40px; padding-top: 36px; }
    .bt-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .bt-sort { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .bt-footer-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- mobile navigation drawer */
.bt-nav.offcanvas {
    width: min(340px, 88vw);
    border: 0;
    border-radius: 0 24px 24px 0;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.bt-nav .bt-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 12px;
}
.bt-nav-logo img { height: 26px; width: auto; display: block; }
.bt-nav-close {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: 1.5px solid var(--bt-outline);
    background: #fff;
    color: var(--bt-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.bt-nav-close:hover { border-color: var(--bt-green); color: var(--bt-green); }

.bt-nav .bt-nav-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 16px 24px;
    overflow-y: auto;
    flex: 1;
}
.bt-nav-links { display: flex; flex-direction: column; gap: 4px; }
.bt-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 12px;
    border-radius: 25px;
    color: var(--bt-ink);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.bt-nav-link:hover { background: var(--bt-soft); color: var(--bt-ink); }
.bt-nav-ico {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: var(--bt-mint);
    color: var(--bt-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.bt-nav-link.is-active { background: var(--bt-mint); color: var(--bt-green-dark); font-weight: 800; }
.bt-nav-link.is-active .bt-nav-ico { background: var(--bt-green); color: #fff; }

.bt-nav-actions { display: flex; flex-direction: column; gap: 10px; }
.bt-nav-btn {
    height: 50px;
    border-radius: 25px;
    border: 1.5px solid var(--bt-outline);
    background: #fff;
    color: var(--bt-ink);
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.bt-nav-btn:hover { border-color: var(--bt-green); color: var(--bt-green); background: var(--bt-mint); }
.bt-nav-btn-primary {
    background: var(--bt-green);
    border-color: var(--bt-green);
    color: #fff;
}
.bt-nav-btn-primary:hover { background: var(--bt-green-dark); border-color: var(--bt-green-dark); color: #fff; }

.bt-nav-foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--bt-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bt-nav-foot-title { font-size: 13px; font-weight: 700; color: var(--bt-muted); }
.bt-nav-apps { display: flex; flex-direction: column; gap: 8px; }
.bt-nav-apps .bt-store-btn { justify-content: center; }

/* On a phone a two-line section title left "See all restaurants" hanging
   beside it. Stack them instead, link under the title. */
@media (max-width: 575.98px) {
    .bt-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 16px;
    }
    .bt-section-title { font-size: 24px; }
    .bt-results-head .bt-section-title { font-size: 24px; }
}


/* The offer banner sits between two restaurant rows, and the row below it
   zeroes its own top padding, so the heading was landing right on the banner. */
.bt-block-offer { padding-bottom: 56px; }
@media (max-width: 991.98px) {
    .bt-block-offer { padding-bottom: 40px; }
}

/* ------------------------------------------------- time slot picker */
/* the date/time/guests columns zero the icon inset, but the time field has an
   icon now, so it has to claim the space back */
.bt-timefield .bt-time-input.form-control {
    padding-left: 46px;
    cursor: pointer;
    caret-color: transparent;
}
.bt-time-pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    width: min(340px, 86vw);
    max-height: 320px;
    overflow-y: auto;
    padding: 16px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--bt-line);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.16);
}
.bt-time-group + .bt-time-group { margin-top: 16px; }
.bt-time-group-name {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bt-muted);
}
.bt-time-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.bt-time-slot {
    height: 38px;
    padding: 0;
    border-radius: 19px;
    border: 1.5px solid var(--bt-outline);
    background: #fff;
    color: var(--bt-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.bt-time-slot:hover { border-color: var(--bt-green); color: var(--bt-green); background: var(--bt-mint); }
.bt-time-slot.is-selected {
    background: var(--bt-green);
    border-color: var(--bt-green);
    color: #fff;
}
@media (max-width: 575.98px) {
    .bt-time-pop { width: min(300px, 82vw); left: auto; right: 0; }
    .bt-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------- date picker */
.bt-datefield .bt-date-display.form-control {
    padding-left: 46px;
    cursor: pointer;
    caret-color: transparent;
}
.bt-date-pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    width: min(320px, 86vw);
    padding: 16px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--bt-line);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.16);
}
.bt-date-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.bt-date-month { font-size: 15px; font-weight: 800; }
.bt-date-nav {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 1.5px solid var(--bt-outline);
    background: #fff;
    color: var(--bt-ink);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.bt-date-nav:hover:not(:disabled) { border-color: var(--bt-green); color: var(--bt-green); }
.bt-date-nav:disabled { opacity: 0.35; cursor: default; }
.bt-date-week,
.bt-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.bt-date-week {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bt-muted);
    text-align: center;
}
.bt-date-day {
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: #fff;
    color: var(--bt-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.bt-date-day:hover:not(:disabled) { background: var(--bt-mint); color: var(--bt-green); }
.bt-date-day:disabled { color: #C5C5C5; cursor: default; }
.bt-date-day.is-today { border-color: var(--bt-outline); }
.bt-date-day.is-selected {
    background: var(--bt-green);
    border-color: var(--bt-green);
    color: #fff;
    font-weight: 800;
}
@media (max-width: 575.98px) {
    .bt-date-pop { width: min(300px, 82vw); }
}

/* ------------------------------------------------- cuisines: pick your cuisine */
/* No tile behind them: the photo is the control, the name sits under it. The
   row below opens with pt-0, so the gap to "Most Popular" comes from here. */
.bt-plates { padding: 12px 0 44px; }
.bt-plates-title {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.bt-plates-row {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bt-outline) transparent;
}
.bt-plates-row::-webkit-scrollbar { height: 6px; }
.bt-plates-row::-webkit-scrollbar-thumb {
    background: var(--bt-outline);
    border-radius: 3px;
}
.bt-plates-row::-webkit-scrollbar-track { background: transparent; }
.bt-plate {
    flex: 0 0 auto;
    width: 116px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--bt-ink);
    text-decoration: none;
}
.bt-plate-photo {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bt-soft);
    flex: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bt-plate-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-plate:hover .bt-plate-photo {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.bt-plate:hover .bt-plate-name { color: var(--bt-green); }
.bt-plate-name {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
}
@media (max-width: 575.98px) {
    .bt-plates { padding: 8px 0 32px; }
    .bt-plates-title { font-size: 20px; margin-bottom: 14px; }
    .bt-plates-row { gap: 16px; }
    .bt-plate { width: 92px; gap: 10px; }
    .bt-plate-photo { width: 88px; height: 88px; }
    .bt-plate-name { font-size: 13px; }
}

/* ================================================ standalone pages */
.bt-page-head { padding: 40px 0 28px; background: var(--bt-mint); }
.bt-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bt-muted);
    margin-bottom: 10px;
}
.bt-crumbs a { color: var(--bt-muted); }
.bt-crumbs a:hover { color: var(--bt-green); }
.bt-crumbs [aria-current] { color: var(--bt-ink); }
.bt-page-title {
    margin: 0;
    /* the theme sets Oswald on h1; these pages use the site's own face */
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.bt-page-lead {
    margin: 10px 0 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--bt-muted);
    font-weight: 500;
}
.bt-doc { padding: 40px 0 64px; }
.bt-doc-body { max-width: 780px; }

/* long-form copy out of the CMS */
.bt-prose { font-size: 16px; line-height: 1.65; color: var(--bt-ink); }
.bt-prose > *:first-child { margin-top: 0; }
.bt-prose p { margin: 0 0 16px; }
.bt-prose h1, .bt-prose h2, .bt-prose h3, .bt-prose h4 {
    margin: 30px 0 12px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.bt-prose h1 { font-size: 28px; }
.bt-prose h2 { font-size: 24px; }
.bt-prose h3 { font-size: 20px; }
.bt-prose h4 { font-size: 17px; }
.bt-prose ul, .bt-prose ol { margin: 0 0 16px; padding-left: 22px; }
.bt-prose li { margin-bottom: 8px; }
.bt-prose a { color: var(--bt-green); font-weight: 600; }
.bt-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.bt-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.bt-prose th, .bt-prose td { border: 1px solid var(--bt-line); padding: 10px 12px; text-align: left; }
.bt-prose blockquote {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-left: 3px solid var(--bt-green);
    background: var(--bt-mint);
    border-radius: 0 14px 14px 0;
}

/* the in-app header on the terms page */
.bt-app-bar { padding: 14px 0; border-bottom: 1px solid var(--bt-line); }
.bt-app-bar .container { display: flex; align-items: center; justify-content: space-between; }
.bt-app-bar img { height: 30px; width: auto; }
.bt-app-back { font-weight: 700; color: var(--bt-ink); }
.bt-app-back:hover { color: var(--bt-green); }
.bt-app-spacer { width: 60px; }

/* ---------------------------------------------------------- FAQ */
.bt-faq { columns: 2; column-gap: 24px; }
.bt-faq-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 12px;
    border: 1.5px solid var(--bt-outline);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}
.bt-faq-head { margin: 0; }
.bt-faq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 0;
    background: #fff;
    color: var(--bt-ink);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    line-height: 1.35;
}
.bt-faq-btn i { flex: none; font-size: 12px; color: var(--bt-muted); transition: transform 0.18s ease; }
.bt-faq-btn:not(.collapsed) { color: var(--bt-green); }
.bt-faq-btn:not(.collapsed) i { transform: rotate(180deg); color: var(--bt-green); }
.bt-faq-body { padding: 0 18px 18px; font-size: 15px; color: var(--bt-muted); }
.bt-faq-body p:last-child { margin-bottom: 0; }
.bt-faq-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    font-weight: 600;
    color: var(--bt-muted);
}

/* ------------------------------------------------------ contact */
.bt-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.bt-contact-form {
    padding: 28px;
    border-radius: var(--bt-radius-card);
    border: 1.5px solid var(--bt-outline);
    background: #fff;
}
.bt-contact-form .bt-section-title { font-size: 26px; }
.bt-contact-form .bt-block-text { margin-bottom: 20px; }
.bt-contact-fields .form-control,
.bt-contact-fields .form-select,
.bt-contact-fields textarea {
    min-height: 52px;
    border-radius: 26px;
    background: var(--bt-soft);
    border: 1.5px solid var(--bt-soft);
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 500;
}
.bt-contact-fields textarea { border-radius: 20px; min-height: 130px; }
.bt-contact-fields .form-control:focus,
.bt-contact-fields textarea:focus { border-color: var(--bt-green); background: #fff; }
.bt-contact-fields label { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.bt-contact-fields .btn,
.bt-contact-fields button[type="submit"] {
    min-height: 52px;
    padding: 0 28px;
    border-radius: 26px;
    background: var(--bt-green);
    border: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.bt-contact-fields .btn:hover,
.bt-contact-fields button[type="submit"]:hover { background: var(--bt-green-dark); color: #fff; }

.bt-contact-side { display: flex; flex-direction: column; gap: 14px; }
.bt-contact-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border-radius: 20px;
    background: var(--bt-soft);
}
.bt-contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background: var(--bt-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 4px;
}
.bt-contact-label { font-size: 14px; font-weight: 800; }
.bt-contact-value { font-size: 15px; color: var(--bt-muted); font-weight: 500; line-height: 1.5; }
.bt-contact-value a { color: var(--bt-green); font-weight: 700; }
.bt-contact-app { background: var(--bt-mint); }
.bt-contact-app .bt-nav-apps { margin-top: 10px; }

@media (max-width: 991.98px) {
    .bt-contact { grid-template-columns: 1fr; }
    .bt-faq { columns: 1; }
}
@media (max-width: 575.98px) {
    .bt-page-head { padding: 26px 0 20px; }
    .bt-page-title { font-size: 32px; }
    .bt-page-lead { font-size: 15px; }
    .bt-doc { padding: 26px 0 44px; }
    .bt-contact-form { padding: 20px; }
}

/* ---------------------------------------------------- about page */
.bt-about {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}
.bt-about-copy { max-width: 640px; }
.bt-about-photo img { width: 100%; height: auto; border-radius: var(--bt-radius-card); display: block; }

/* ------------------------------------------------- features page */
.bt-owner-head { padding: 48px 0 40px; }
.bt-owner-head .bt-badge { margin-bottom: 14px; }
.bt-owner-head .bt-page-title { max-width: 820px; }
.bt-owner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bt-owner-actions .bt-ghost-btn { background: #fff; }
.bt-steps-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.bt-numstep {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border-radius: var(--bt-radius-card);
    background: var(--bt-mint);
}
.bt-numstep-n {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: var(--bt-green);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

/* ----------------------------------------------------- blog page */
.bt-blog {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.bt-blog-side { display: flex; flex-direction: column; gap: 18px; }
.bt-blog-side .widget,
.bt-blog-side .sidebar-widget,
.bt-blog-side > div {
    border-radius: var(--bt-radius-card);
    background: var(--bt-soft);
    padding: 20px;
    border: 0;
}
.bt-blog-side h4, .bt-blog-side h5 { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.bt-blog-side ul { list-style: none; padding: 0; margin: 0; }
.bt-blog-side li { margin-bottom: 8px; }
.bt-blog-side a { color: var(--bt-ink); font-weight: 600; }
.bt-blog-side a:hover { color: var(--bt-green); }

@media (max-width: 991.98px) {
    .bt-about { grid-template-columns: 1fr; }
    .bt-blog { grid-template-columns: 1fr; }
    .bt-steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .bt-owner-head { padding: 30px 0 28px; }
    .bt-steps-row { grid-template-columns: 1fr; }
}

/* primary action outside the green banner, where bt-offer-btn reads as plain white */
.bt-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    border-radius: 26px;
    background: var(--bt-green);
    border: 1.5px solid var(--bt-green);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.bt-primary-btn:hover { background: var(--bt-green-dark); border-color: var(--bt-green-dark); color: #fff; }

/* the About photo is a tall phone mockup; keep it from swamping the copy */
.bt-about-photo img { max-height: 420px; width: auto; max-width: 100%; margin: 0 auto; }

/* the blog module brings its own card and heading styles */
.bt-blog .blog-post {
    padding: 0 0 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--bt-line);
}
.bt-blog .blog-post:last-child { border-bottom: 0; }
.bt-blog .blog-post .post-thumbnail img,
.bt-blog .blog-post img { width: 100%; height: 170px; object-fit: cover; border-radius: 16px; display: block; }
.bt-blog .blog-post h1, .bt-blog .blog-post h2,
.bt-blog .blog-post h3, .bt-blog .blog-post h4,
.bt-blog .blog-post h3 a,
.bt-blog .blog-post .entry-title,
.bt-blog .blog-post .entry-title a {
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--bt-ink);
    display: block;
    margin-bottom: 8px;
}
.bt-blog .blog-post h3 a { color: var(--bt-ink); }
.bt-blog .blog-post h3 a:hover { color: var(--bt-green); }
.bt-blog .blog-post p { font-size: 15px; color: var(--bt-muted); line-height: 1.55; }
.bt-blog .blog-post .btn,
.bt-blog .blog-post .common-btn {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    border-radius: 21px;
    background: var(--bt-green);
    border: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.bt-blog .blog-post .btn:hover { background: var(--bt-green-dark); color: #fff; }

.bt-blog-side .card { border: 0; background: transparent; margin: 0 !important; }
.bt-blog-side .card-header {
    background: transparent !important;
    color: var(--bt-ink) !important;
    border: 0;
    padding: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
}
.bt-blog-side .card-body { padding: 0; background: transparent; }
.bt-blog-side .list-group-item,
.bt-blog-side .card-body > a {
    border: 1.5px solid var(--bt-outline);
    border-radius: 22px;
    padding: 10px 16px;
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bt-ink);
    background: #fff;
}
.bt-blog-side .list-group-item:hover { border-color: var(--bt-green); color: var(--bt-green); }

@media (max-width: 575.98px) {
    .bt-blog .blog-post img { height: 190px; }
}

/* ------------------------------------------------ blog post page */
.bt-post-head { padding-bottom: 32px; }
.bt-post-cat {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--bt-green);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.bt-post-cat:hover { background: var(--bt-green-dark); color: #fff; }
.bt-post-title { max-width: 880px; font-size: 38px; }
.bt-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bt-muted);
}
.bt-post-meta i { margin-right: 6px; }
.bt-post-photo {
    margin-bottom: 26px;
    border-radius: var(--bt-radius-card);
    overflow: hidden;
    background: var(--bt-soft);
}
.bt-post-photo img { width: 100%; height: auto; display: block; }
.bt-post-body { max-width: 760px; }
.bt-post-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--bt-line);
}
.bt-post-share-label { font-size: 14px; font-weight: 700; color: var(--bt-muted); }
.bt-post-share { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* the share widget ships its own brand-coloured pills; make them the same
   neutral circles as the footer so the page keeps one palette */
.bt-post-share a,
.bt-post-share button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bt-soft) !important;
    color: var(--bt-ink) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}
.bt-post-share a:hover,
.bt-post-share button:hover { background: var(--bt-mint) !important; color: var(--bt-green) !important; }
.bt-post-share i, .bt-post-share svg { color: inherit; fill: currentColor; }
/* This build of Font Awesome predates fa-x-twitter, so that button rendered as
   an empty circle. Draw the glyph instead of relying on the icon font. */
.bt-post-share .fa-x-twitter::before { content: ""; display: none; }
.bt-post-share .fa-x-twitter::after {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--bt-x-glyph) center / contain no-repeat;
    mask: var(--bt-x-glyph) center / contain no-repeat;
}
:root {
    --bt-x-glyph: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>");
}
.bt-post-back { margin-top: 26px; }
.bt-post-back .bt-ghost-btn { gap: 8px; }

@media (max-width: 575.98px) {
    .bt-post-title { font-size: 27px; }
    .bt-post-meta { gap: 12px; font-size: 13px; }
}

/* the book button sits beside the restaurant name, so booking is the first
   thing offered rather than something found after scrolling the menu */
.bt-rest-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.bt-rest-titlerow .bt-rest-title { margin: 0; }
/* A word, not the logo: at this size the logo was unreadable, and on a phone a
   full-width button with a tiny mark in the middle said nothing. */
.bt-rest-book {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 24px;
    border-radius: 25px;
    background: var(--bt-green);
    border: 1.5px solid var(--bt-green);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}
.bt-rest-book:hover { background: var(--bt-green-dark); border-color: var(--bt-green-dark); color: #fff; }
.bt-rest-book i { font-size: 14px; }
@media (max-width: 575.98px) {
    .bt-rest-titlerow { gap: 12px; }
    .bt-rest-book { width: 100%; height: 52px; }
}

/* pre-order invitation after a table is booked */
.bt-preorder-pop .modal-dialog { max-width: 460px; }
.bt-preorder-pop .modal-content {
    border: 0;
    border-radius: var(--bt-radius-card);
    padding: 26px;
    text-align: center;
}
.bt-preorder-icon {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: var(--bt-mint);
    color: var(--bt-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px;
}
.bt-preorder-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.bt-preorder-text {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--bt-muted);
    font-weight: 500;
}
/* The perk, as a note rather than more body copy: it is a reason, not a
   continuation of the sentence above it. */
.bt-preorder-perk {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 20px;
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--bt-mint, #F6FBF3);
    text-align: left;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--bt-ink, #212121);
}
.bt-preorder-perk i {
    color: var(--bt-green, #4EB711);
    font-size: 14px;
    line-height: 1.4;
    flex: none;
}

.bt-preorder-actions { display: flex; flex-direction: column; gap: 10px; }
.bt-preorder-actions .bt-primary-btn,
.bt-preorder-actions .bt-ghost-btn { width: 100%; justify-content: center; }

/* ================================================= checkout page */
.bt-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.bt-checkout-card {
    padding: 26px;
    border-radius: var(--bt-radius-card);
    border: 1.5px solid var(--bt-outline);
    background: #fff;
}
.bt-checkout-heading {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.bt-checkout-sub {
    margin: 22px 0 10px;
    font-size: 15px;
    font-weight: 800;
}
/* Date and time share the row; guests goes underneath, because the stepper
   plus its label does not fit in a third of the card. */
.bt-checkout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bt-checkout-grid > *:nth-child(3) { grid-column: 1 / -1; }
/* the number sits between two round buttons, so it stays narrow here too */
.bt-checkout .bt-guests .form-control {
    width: 54px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 800;
}
.bt-checkout-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bt-checkout .form-control,
.bt-checkout .form-select,
.bt-checkout textarea {
    min-height: 52px;
    border-radius: 26px;
    background: var(--bt-soft);
    border: 1.5px solid var(--bt-soft);
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 500;
}
.bt-checkout textarea { border-radius: 20px; min-height: 96px; }
.bt-checkout .form-control:focus,
.bt-checkout textarea:focus { background: #fff; border-color: var(--bt-green); }
.bt-checkout label { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.bt-checkout .form-group { margin-bottom: 0; }
.bt-checkout .invalid-feedback,
.bt-checkout .help-block {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #D64545;
    margin: 6px 0 0 18px;
}
.bt-checkout-notes { margin-top: 4px; }

/* pick-up choice */
.bt-pickup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bt-pickup-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    border: 1.5px solid var(--bt-outline);
    cursor: pointer;
    margin: 0;
}
.bt-pickup-opt:has(input:checked) { border-color: var(--bt-green); background: var(--bt-mint); }
.bt-pickup-body { display: flex; flex-direction: column; gap: 2px; }
.bt-pickup-title { font-size: 15px; font-weight: 800; }
.bt-pickup-note { font-size: 13px; color: var(--bt-muted); font-weight: 500; }

/* summary */
.bt-sum-list, .bt-sum-total { list-style: none; padding: 0; margin: 0; }
.bt-sum-list li, .bt-sum-total li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--bt-line);
}
.bt-sum-list li span:first-child, .bt-sum-total li span:first-child { color: var(--bt-muted); font-weight: 600; }
.bt-sum-list li span:last-child, .bt-sum-total li span:last-child { font-weight: 700; text-align: right; }
.bt-sum-total { margin-top: 16px; }
.bt-sum-total .cart-total { border-bottom: 0; font-size: 17px; }
.bt-sum-total .cart-total span { font-weight: 800 !important; color: var(--bt-ink) !important; }
.bt-cart-list { display: flex; flex-direction: column; gap: 10px; }

/* coupons and loyalty */
.bt-coupon { margin-top: 16px; }
.bt-coupon-entry { display: flex; gap: 8px; }
.bt-coupon-entry .form-control { flex: 1; }
.bt-coupon-apply {
    flex: none;
    height: 52px;
    padding: 0 20px;
    border-radius: 26px;
    border: 1.5px solid var(--bt-green);
    background: #fff;
    color: var(--bt-green);
    font-size: 14px;
    font-weight: 800;
}
.bt-coupon-apply:hover { background: var(--bt-green); color: #fff; }
.bt-coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 20px;
    background: var(--bt-mint);
    font-size: 14px;
}
.bt-coupon-remove { border: 0; background: none; color: #D64545; font-weight: 800; font-size: 13px; }
.bt-offers { margin-top: 16px; }
.bt-offer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bt-line);
}
.bt-offer-row small { display: block; color: var(--bt-muted); font-size: 13px; }
.bt-offer-on { font-size: 13px; font-weight: 800; color: var(--bt-green); }
.bt-loyalty {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--bt-mint);
    font-weight: 500;
}
.bt-loyalty small { display: block; color: var(--bt-muted); font-size: 13px; }
.bt-loyalty .form-group { margin: 0; }

/* How much of the balance to spend. Hidden until the box is ticked, so the
   summary is not cluttered for the guest who has no points to spend. */
.bt-loyalty-amount {
    margin: 10px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bt-mint);
}
.bt-loyalty-amount > label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-ink);
    margin-bottom: 6px;
}
.bt-loyalty-input {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bt-loyalty-input > span {
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-muted);
}
.bt-loyalty-input input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid var(--bt-outline);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    color: var(--bt-ink);
}
.bt-loyalty-input input:focus {
    outline: none;
    border-color: var(--bt-green);
}
.bt-loyalty-max {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--bt-green);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.bt-loyalty-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--bt-muted);
}

/* the same chooser on the reservation page, where there is no cart */
.bt-loyalty-inline { margin: 0 0 14px; max-width: 420px; }
.bt-loyalty-inline .bt-loyalty-amount { margin: 0; }
/* the "when are you coming?" step, in front of the pre-order menu */
.bt-when-card {
    max-width: 720px;
    margin: 8px auto 40px;
    padding: 28px;
    border-radius: var(--bt-radius-card);
    background: #fff;
    border: 1px solid var(--bt-line);
}
.bt-when-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.bt-when-lead {
    margin: 0 0 22px;
    color: var(--bt-muted);
    font-size: 15px;
    line-height: 1.55;
}
.bt-when-form .bt-checkout-grid { margin-bottom: 20px; }
.bt-when-go { width: 100%; min-height: 52px; border-radius: var(--bt-radius-pill); }
.bt-when-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--bt-muted);
}
@media (max-width: 767.98px) {
    .bt-when-card { padding: 22px 18px; margin-bottom: 28px; }
    .bt-when-title { font-size: 21px; }
}

/* the sitting line carries a way back to the question */
.bt-service-note a {
    color: var(--bt-green-dark);
    font-weight: 800;
    text-decoration: underline;
}

/* which sitting a booked table is being shown, in place of the switch */
.bt-service-note {
    display: inline-flex;
    align-items: center;
    /* Spacing between the items, because an inline-flex row drops the
       whitespace between them -- keep the sentence itself in one child. */
    gap: 8px;
    margin: 0 0 16px;
    padding: 9px 16px;
    border-radius: var(--bt-radius-pill);
    background: var(--bt-mint);
    color: var(--bt-ink);
    font-size: 14px;
    font-weight: 500;
}
.bt-service-note strong { font-weight: 800; }
.bt-service-note i { color: var(--bt-green); }

.bt-loyalty-applied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 8px 14px;
    border-radius: var(--bt-radius-pill);
    background: var(--bt-mint);
    color: var(--bt-green-dark);
    font-size: 13px;
    font-weight: 700;
}

/* payment and terms */
.bt-pay-block { margin-top: 18px; }
.bt-pay-block .form-check,
.bt-pay-block label { font-weight: 600; }
.bt-terms { margin: 16px 0 18px; font-size: 13px; color: var(--bt-muted); }
.bt-terms p { margin: 0 0 10px; line-height: 1.5; }
.bt-terms-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; margin: 0; }
.bt-checkout-foot { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--bt-muted); font-weight: 500; }
.bt-modal-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.bt-modal-field > span { font-size: 13px; font-weight: 700; }

@media (max-width: 991.98px) {
    .bt-checkout { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .bt-checkout-card { padding: 18px; }
    .bt-checkout-grid { grid-template-columns: 1fr; }
    .bt-pickup { grid-template-columns: 1fr; }
}

/* ============================================ reservation details */
.reservation-area .inner_card {
    border: 1.5px solid var(--bt-outline);
    border-radius: var(--bt-radius-card);
    background: #fff;
    padding: 24px;
}
.bt-res-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bt-line);
}
.bt-res-head h4 {
    margin: 0;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.bt-res-sub {
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bt-muted);
}
.bt-res-state {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--bt-soft);
    color: var(--bt-ink);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bt-res-state-3 { background: var(--bt-mint); color: var(--bt-green-dark); }   /* accepted */
.bt-res-state-6 { background: var(--bt-mint); color: var(--bt-green-dark); }   /* completed */
.bt-res-state-4, .bt-res-state-5, .bt-res-state-7 { background: #FDECEC; color: #C0392B; }

.bt-res-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-res-actions .common-btn,
.bt-res-actions a.common-btn,
.bt-res-actions button.common-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 18px;
    border-radius: 21px;
    border: 1.5px solid var(--bt-outline);
    background: #fff;
    color: var(--bt-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.bt-res-actions .common-btn:hover { border-color: var(--bt-green); color: var(--bt-green); background: var(--bt-mint); }
.bt-res-actions .common-btn:first-child {
    background: var(--bt-green);
    border-color: var(--bt-green);
    color: #fff;
}
.bt-res-actions .common-btn:first-child:hover { background: var(--bt-green-dark); border-color: var(--bt-green-dark); color: #fff; }

.reservation-area .custom-card-body > h4 {
    margin: 22px 0 16px !important;
    font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: var(--bt-ink) !important;
}
.reservation-area .detail-card {
    height: 100%;
    padding: 18px;
    margin-bottom: 16px;
    border: 1.5px solid var(--bt-outline) !important;
    border-radius: 20px;
    background: #fff;
}
.reservation-area .detail-card-head {
    display: flex;
    align-items: center;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: var(--bt-ink);
}
.reservation-area .detail-card-head i { color: var(--bt-green) !important; }
.reservation-area .detail-card-body ul { margin: 0; padding: 0; list-style: none; }
.reservation-area .detail-card-body li {
    padding: 6px 0;
    font-size: 14px;
    color: var(--bt-muted);
    font-weight: 500;
}
.reservation-area .detail-card-body li strong { color: var(--bt-ink); font-weight: 700; }

/*
 * The payment card was a sliver on a phone -- "Total Amount: MUR" on one line
 * and "2,500.00" on the next, the loyalty hint wrapping every three words.
 *
 * .detail-card-body is a direct child of a Bootstrap .row with no col class,
 * so it was a bare flex item: sized to its content and free to shrink, with
 * the row's gutters showing either side of it. It gets the full width a
 * column would have had.
 */
.reservation-area .detail-card > .row > .detail-card-body {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* Label and figure on one line, the figure to the right where it is read. */
.reservation-area .detail-card-body li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
}

.reservation-area .detail-card-head {
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 575.98px) {
    .reservation-area .detail-card { padding: 16px 14px; }
    .reservation-area .detail-card > .row { --bs-gutter-x: 0; }
    .reservation-area .detail-card > .row > .detail-card-body {
        padding-left: 0;
        padding-right: 0;
    }
    /* The chooser fills the card rather than sitting in a 420px column. */
    .reservation-area .bt-loyalty-inline { max-width: none; }
}
.reservation-area .badge { border-radius: 12px; padding: 5px 10px; font-weight: 700; }

.bt-loyalty-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--bt-green-dark);
    text-decoration: underline;
}

/*
 * The reservation page had 108px of padding on each side of a phone, stacked
 * six deep -- .dashboard_content 16, .inner_card 16, .inner-card-body 30,
 * .custom-card-body 20, the column 12, the card 14 -- so a 412px screen showed
 * a 244px card. Every layer looked reasonable on its own; together they left
 * the content on 59% of the screen.
 *
 * One gutter is enough on a phone. The rest are dropped and the cards take the
 * width, which is what "the screen is very small" was really about.
 */
@media (max-width: 767.98px) {
    .reservation-area { padding-left: 12px !important; padding-right: 12px !important; }
    .reservation-area .inner_card,
    .reservation-area .inner-card-body,
    .reservation-area .custom-card,
    .reservation-area .custom-card-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .reservation-area .custom-card-body > .row {
        margin-left: 0;
        margin-right: 0;
    }
    .reservation-area .custom-card-body > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
    .reservation-area .detail-card { padding: 16px 14px; }
    .reservation-area .db_head { padding-left: 0; padding-right: 0; }
}

/*
 * Nothing on a reservation may be wider than the phone. One over-wide cell --
 * a long dish name, a tracking timeline -- and the whole page scrolls
 * sideways, which shrinks every card and reads as "the screen is very small".
 */
.user_dashboard .dashboard_content { overflow-x: hidden; }
.reservation-area .detail-card,
.reservation-area .detail-card-body { min-width: 0; }
.reservation-area .detail-card-body li > span,
.reservation-area .detail-card-body li > strong { min-width: 0; overflow-wrap: anywhere; }

/* order tracking */
.order-tracking-timeline { display: flex; flex-direction: column; gap: 0; }
.tracking-step { display: flex; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 18px; }
.tracking-step .step-icon {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 18px;
    background: var(--bt-soft);
    color: var(--bt-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
}
.tracking-step.completed .step-icon { background: var(--bt-mint); color: var(--bt-green); }
.tracking-step.current .step-icon { background: var(--bt-green); color: #fff; }
.tracking-step .step-content h6 { margin: 8px 0 4px; font-size: 15px; font-weight: 800; }
.tracking-step .step-connector {
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--bt-line);
}
.tracking-step .step-connector.completed { background: var(--bt-green); }

@media (max-width: 767.98px) {
    .reservation-area .inner_card { padding: 16px; }
    .bt-res-head { flex-direction: column; align-items: stretch; }
    .bt-res-actions .common-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Accept / reject landing page (from the restaurant's email) ─────────── */
.bt-decide-wrap {
	display: flex;
	justify-content: center;
	padding: 48px 16px 72px;
	background: var(--bt-soft);
	min-height: 60vh;
}

.bt-decide {
	width: 100%;
	max-width: 520px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
	padding: 36px 32px 30px;
	text-align: center;
}

.bt-decide-mark {
	width: 56px;
	height: 56px;
	line-height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	background: var(--bt-muted);
}

.bt-decide-mark--ok { background: var(--bt-green); }
.bt-decide-mark--warn { background: #D64545; }

.bt-decide h1 {
	margin: 0 0 10px;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--bt-ink);
}

.bt-decide p {
	margin: 0 0 8px;
	font-size: .95rem;
	line-height: 1.6;
	color: #444;
}

.bt-decide-sub {
	font-size: .85rem !important;
	color: var(--bt-muted) !important;
}

.bt-decide-card {
	margin: 20px 0 24px;
	padding: 4px 16px;
	border: 1px solid var(--bt-outline);
	border-radius: 16px;
	text-align: left;
}

.bt-decide-card > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--bt-line);
	font-size: .92rem;
}

.bt-decide-card > div:last-child { border-bottom: 0; }
.bt-decide-card span { color: var(--bt-muted); }
.bt-decide-card strong { color: var(--bt-ink); text-align: right; }

.bt-decide-btn {
	display: inline-block;
	width: 100%;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--bt-radius-pill);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.bt-decide-btn--ok { background: var(--bt-green); border-color: var(--bt-green); color: #fff; }
.bt-decide-btn--ok:hover { background: var(--bt-green-dark); border-color: var(--bt-green-dark); }
.bt-decide-btn--no { background: #fff; border-color: #E7B4B4; color: #D64545; }
.bt-decide-btn--no:hover { background: #FCF3F3; }

.bt-decide-link {
	display: inline-block;
	margin-top: 18px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--bt-green);
	text-decoration: none;
}

.bt-decide-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
	.bt-decide { padding: 28px 20px 24px; }
}

/* ── Account area (dashboard, bookings, favourites, profile) ───────────── */
.bt-acct-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 22px;
}

.bt-acct-head h1 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--bt-ink);
}

.bt-acct-head p {
	margin: 4px 0 0;
	font-size: .92rem;
	color: var(--bt-muted);
}

/* Sidebar ---------------------------------------------------------------- */
.bt-side {
	position: sticky;
	top: 96px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
	overflow: hidden;
}

.bt-side-me {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 26px 18px 20px;
	border-bottom: 1px solid var(--bt-line);
	background: var(--bt-mint);
	text-align: center;
}

.bt-side-me .profile-image-upload,
.bt-side-me img {
	border-radius: 50%;
}

.bt-side-me h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bt-ink);
}

.bt-side-me span {
	font-size: .82rem;
	color: var(--bt-muted);
	word-break: break-word;
}

.bt-side-links {
	list-style: none;
	margin: 0;
	padding: 10px;
}

.bt-side-links a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: .93rem;
	font-weight: 600;
	color: #444;
	text-decoration: none;
	white-space: nowrap;
}

.bt-side-links a i { width: 18px; text-align: center; color: var(--bt-muted); }
.bt-side-links a:hover { background: var(--bt-soft); color: var(--bt-ink); }
.bt-side-links a.active { background: var(--bt-green); color: #fff; }
.bt-side-links a.active i { color: #fff; }
.bt-side-links a.bt-side-out { color: #C0392B; }
.bt-side-links a.bt-side-out i { color: #C0392B; }

/* Below lg the sidebar used to disappear entirely, leaving no way round the
   account. It becomes a scrolling strip of tabs instead. */
@media (max-width: 991.98px) {
	.bt-side {
		position: static;
		border-radius: var(--bt-radius-card);
		margin-bottom: 18px;
	}

	.bt-side-me { display: none; }

	.bt-side-links {
		display: flex;
		gap: 8px;
		padding: 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.bt-side-links::-webkit-scrollbar { display: none; }

	.bt-side-links li { flex: 0 0 auto; }

	.bt-side-links a {
		border: 1px solid var(--bt-outline);
		border-radius: var(--bt-radius-pill);
		padding: 9px 16px;
		font-size: .88rem;
	}

	.bt-side-links a.active { border-color: var(--bt-green); }
}

/* Stat tiles ------------------------------------------------------------- */
.bt-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 22px;
}

.bt-stat {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
}

.bt-stat b {
	display: block;
	font-size: 1.9rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--bt-ink);
}

.bt-stat span {
	display: block;
	margin-top: 4px;
	font-size: .85rem;
	color: var(--bt-muted);
}

.bt-stat--green b { color: var(--bt-green); }

@media (max-width: 767.98px) {
	.bt-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.bt-stat { padding: 16px; }
	.bt-stat b { font-size: 1.5rem; }
}

/* Next booking ----------------------------------------------------------- */
.bt-next {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 22px 24px;
	margin-bottom: 22px;
	background: var(--bt-mint);
	border: 1px solid #DCEFD0;
	border-radius: var(--bt-radius-card);
}

.bt-next-when {
	flex: 0 0 auto;
	min-width: 92px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: 16px;
	text-align: center;
}

.bt-next-when b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--bt-green); line-height: 1.1; }
.bt-next-when span { display: block; font-size: .8rem; color: var(--bt-muted); text-transform: uppercase; letter-spacing: .5px; }

.bt-next-body { flex: 1 1 220px; }
.bt-next-body h3 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; color: var(--bt-ink); }
.bt-next-body p { margin: 0; font-size: .92rem; color: #444; }

/* Booking cards ---------------------------------------------------------- */
.bt-blist { display: grid; gap: 12px; }

.bt-bcard {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
}

.bt-bcard-when {
	flex: 0 0 auto;
	min-width: 78px;
	text-align: center;
}

.bt-bcard-when b { display: block; font-size: 1.25rem; font-weight: 700; color: var(--bt-ink); line-height: 1.15; }
.bt-bcard-when span { display: block; font-size: .78rem; color: var(--bt-muted); text-transform: uppercase; letter-spacing: .4px; }

.bt-bcard-main { flex: 1 1 200px; min-width: 0; }
.bt-bcard-main h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.bt-bcard-main h3 a { color: var(--bt-ink); text-decoration: none; }
.bt-bcard-main h3 a:hover { color: var(--bt-green); }

.bt-bcard-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: .86rem;
	color: var(--bt-muted);
}

.bt-bcard-side {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-left: auto;
}

.bt-bcard-ref { font-size: .78rem; color: #9A9A9A; }

@media (max-width: 575.98px) {
	.bt-bcard { gap: 12px; padding: 16px; }
	.bt-bcard-when { min-width: 64px; text-align: left; }
	.bt-bcard-side { margin-left: 0; width: 100%; }
}

/* Empty states ----------------------------------------------------------- */
.bt-empty {
	padding: 48px 24px;
	background: #fff;
	border: 1px dashed var(--bt-outline);
	border-radius: var(--bt-radius-card);
	text-align: center;
}

.bt-empty i { font-size: 1.9rem; color: var(--bt-green); }
.bt-empty h3 { margin: 14px 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--bt-ink); }
.bt-empty p { margin: 0 auto 18px; max-width: 380px; font-size: .92rem; color: var(--bt-muted); }

/* Profile ---------------------------------------------------------------- */
.bt-profile {
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
	overflow: hidden;
}

.bt-profile-rows { padding: 6px 24px 18px; }

.bt-profile-rows > div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--bt-line);
	font-size: .95rem;
}

.bt-profile-rows > div:last-child { border-bottom: 0; }
.bt-profile-rows dt { margin: 0; color: var(--bt-muted); font-weight: 400; }
.bt-profile-rows dd { margin: 0; color: var(--bt-ink); font-weight: 600; text-align: right; word-break: break-word; }

.bt-panel {
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
	padding: 22px 24px;
	margin-bottom: 22px;
}

.bt-panel h2 {
	margin: 0 0 16px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bt-ink);
}

@media (max-width: 575.98px) {
	.bt-panel, .bt-profile-rows { padding-left: 16px; padding-right: 16px; }
	.bt-profile-rows > div { flex-direction: column; gap: 4px; }
	.bt-profile-rows dd { text-align: left; }
}

/* Quiet companion to .common-btn, for the secondary action next to it. */
.common-btn-outline {
	display: inline-block;
	padding: 11px 22px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-pill);
	font-size: .93rem;
	font-weight: 600;
	color: var(--bt-ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.common-btn-outline:hover {
	border-color: var(--bt-green);
	color: var(--bt-green);
}

/* ── Account area: mobile spacing ──────────────────────────────────────────
   Below lg the page headings sat flush against the edge of the screen while
   the cards inside had their own padding, so nothing lined up. */
@media (max-width: 991.98px) {
	.user_dashboard .dashboard_content {
		padding-left: 16px;
		padding-right: 16px;
	}

	.user_dashboard .dashboard_area > .row > [class*="col-"] > .bt-side {
		margin-left: 16px;
		margin-right: 16px;
	}

	.bt-acct-head h1 { font-size: 1.3rem; }
	.bt-acct-head { margin-bottom: 18px; }
}

/* The strip scrolls, so the last tab is cut off. A fade says so, rather than
   leaving it looking like a word that failed to render. */
.bt-side-scroll { position: relative; }

@media (max-width: 991.98px) {
	.bt-side-scroll::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 28px;
		height: 100%;
		pointer-events: none;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 75%);
		border-radius: 0 var(--bt-radius-card) var(--bt-radius-card) 0;
	}
}

/* Long names are spelled out on the sidebar, shortened on the strip. */
.bt-side-short { display: none; }

@media (max-width: 991.98px) {
	.bt-side-full { display: none; }
	.bt-side-short { display: inline; }
}

/* ── Notifications ─────────────────────────────────────────────────────── */
.bt-notes { display: grid; gap: 10px; }

.bt-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
}

.bt-note--unread { border-color: #DCEFD0; background: var(--bt-mint); }

.bt-note-dot {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bt-soft);
	color: var(--bt-muted);
	font-size: .95rem;
}

.bt-note--unread .bt-note-dot { background: var(--bt-green); color: #fff; }

.bt-note-body { min-width: 0; }
.bt-note-body h3 { margin: 0 0 3px; font-size: .96rem; font-weight: 700; color: var(--bt-ink); }
.bt-note-body p { margin: 0 0 4px; font-size: .9rem; line-height: 1.55; color: #444; word-break: break-word; }
.bt-note-body time { font-size: .78rem; color: var(--bt-muted); }

/* ── Payment history ───────────────────────────────────────────────────── */
.bt-pay {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
}

.bt-pay-main { flex: 1 1 180px; min-width: 0; }
.bt-pay-main h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 700; color: var(--bt-ink); }
.bt-pay-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; color: var(--bt-muted); }

.bt-pay-amt {
	flex: 0 0 auto;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--bt-ink);
	white-space: nowrap;
}

.bt-pay-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

@media (max-width: 575.98px) {
	.bt-pay { gap: 12px; padding: 16px; }
	.bt-pay-side { margin-left: 0; width: 100%; }
}

/* ── Narrow forms (change password) ────────────────────────────────────── */
.bt-form-card {
	max-width: 520px;
	padding: 26px 26px 22px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
}

.bt-form-card .form-group { margin-bottom: 18px; }

@media (max-width: 575.98px) {
	.bt-form-card { padding: 20px 18px 18px; }
}

/* The fade at the right edge was sitting on top of the last tab, so Log out
   was half-covered once the strip was scrolled to the end. */
@media (max-width: 991.98px) {
	.bt-side-links { padding-right: 36px; }
}

/* On desktop the page heading started immediately where the sidebar ended,
   with nothing between the two columns. */
@media (min-width: 992px) {
	.user_dashboard .dashboard_content {
		padding-left: 30px;
		padding-right: 24px;
	}
}

/* The account pages began immediately under the header with nothing between,
   so the first heading sat against it. Scoped to the layout's own section so a
   view that still carries its own .user_dashboard wrapper is not padded twice. */
.main_wrapper > .user_dashboard {
	padding-top: 24px;
	padding-bottom: 44px;
}

@media (min-width: 992px) {
	.main_wrapper > .user_dashboard {
		padding-top: 32px;
		padding-bottom: 56px;
	}
}

/* Money owed, at the top of a booking. */
.bt-res-pay {
	background: var(--bt-green) !important;
	border-color: var(--bt-green) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(78, 183, 17, .28);
}

.bt-res-pay:hover {
	background: var(--bt-green-dark) !important;
	border-color: var(--bt-green-dark) !important;
}

/* ── Profile menu in the header ────────────────────────────────────────── */
.profile-drop .dropdown-menu {
	min-width: 260px;
	padding: 8px;
	border: 1px solid var(--bt-outline);
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .10);
}

.profile-drop .profile-card-drop {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 12px 14px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--bt-line);
}

.profile-drop .profile-card-drop img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

.profile-drop .profile-card-rt p { margin: 0; font-size: .78rem; color: var(--bt-muted); }
.profile-drop .profile-card-rt h4 { margin: 0; font-size: .98rem; font-weight: 700; color: var(--bt-ink); }

.profile-drop .dropdown-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: .92rem;
	font-weight: 600;
	color: #444;
}

/* restaurant.css sets flex-direction: row-reverse on
   `.profile-drop .dropdown-menu.show li a`, which puts the icon on the far
   right. The sidebar has it on the left and the two menus should not disagree,
   so this matches that selector's specificity to undo it. */
.profile-drop .dropdown-menu.show li a.dropdown-item {
	flex-direction: row;
	justify-content: flex-start;
}

.profile-drop .dropdown-item span { display: inline-flex; width: 18px; justify-content: center; color: var(--bt-muted); }
.profile-drop .dropdown-item:hover { background: var(--bt-soft); color: var(--bt-ink); }
.profile-drop .dropdown-item:hover span { color: var(--bt-green); }
.profile-drop .dropdown-item-out { color: #C0392B; }
.profile-drop .dropdown-item-out span { color: #C0392B; }
.profile-drop .dropdown-item-out:hover { background: #FCF3F3; color: #C0392B; }

/* ── Payment dialog ────────────────────────────────────────────────────── */
.bt-pay-modal .modal-content {
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
	overflow: hidden;
}

.bt-pay-modal .modal-header {
	align-items: flex-start;
	gap: 12px;
	padding: 20px 22px 16px;
	border-bottom: 1px solid var(--bt-line);
}

.bt-pay-modal .modal-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--bt-ink);
}

.bt-pay-sub {
	margin: 2px 0 0;
	font-size: .84rem;
	color: var(--bt-muted);
}

/*
 * The checkout renders its own panel in here and sizes itself.
 *
 * The body was 120px tall with .modal-content clipping anything that did not
 * fit, which is fine for the card form and wrong for the QR step: the code
 * came out cut in half, with the widget scrolling inside a box too short to
 * hold it. It gets room now, and the body scrolls rather than the code being
 * trimmed.
 */
.bt-pay-modal .modal-dialog { max-width: 470px; }

.bt-pay-modal .modal-body {
	padding: 18px 22px;
	min-height: 120px;
	max-height: min(78vh, 700px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * The checkout's own panel is height:100% of this div, and it divides that up
 * between its header, the step, and its footer -- so whatever we give here is
 * what the QR gets, minus about 135px. At 320 the code was left 150px and
 * came out cut in half inside its own scrollbar. 500 gives it room to be a
 * square, and the card form simply fills the same space.
 */
.bt-pay-modal .bt-pay-body { min-height: 500px; }
/*
 * The step itself is an iframe the checkout fixes at 150px, whatever room it
 * is given -- so a QR code, which is square and much taller than that, ended
 * up scrolling inside its own little window with the bottom half cut off.
 *
 * A floor, not a height: if the checkout ever asks for more than this it
 * still gets it. The card form is shorter and simply sits in the space.
 */
.bt-pay-modal .bt-pay-body iframe {
	width: 100% !important;
	max-width: 100%;
	min-height: 420px;
	border: 0;
	display: block;
}

/* The wrapper scrolled because the iframe overflowed it. With the iframe its
   real size there is nothing to scroll, and the scrollbar beside the code
   goes away. */
.bt-pay-modal .bt-pay-body .scroll-util { overflow: visible !important; }
.bt-pay-modal .bt-pay-body .min-h-xs { max-height: none !important; }

/* A QR code is square and must not be squeezed by a narrow dialog. */
.bt-pay-modal .bt-pay-body img,
.bt-pay-modal .bt-pay-body canvas,
.bt-pay-modal .bt-pay-body svg {
	max-width: 100%;
	height: auto;
}

@media (max-width: 575.98px) {
	.bt-pay-modal .modal-body { max-height: calc(100vh - 190px); padding: 14px 16px; }
	.bt-pay-modal .bt-pay-body { min-height: 440px; }
}

.bt-pay-note {
	margin: 0 0 10px;
	font-size: .9rem;
	color: var(--bt-muted);
}

.bt-pay-note:empty { display: none; }

.bt-pay-modal .modal-footer {
	justify-content: flex-start;
	padding: 14px 22px 18px;
	border-top: 1px solid var(--bt-line);
	background: var(--bt-mint);
}

.bt-pay-secure {
	font-size: .8rem;
	line-height: 1.5;
	color: var(--bt-muted);
}

.bt-pay-secure i { color: var(--bt-green); }

/* "Book your menu" sits beside the other header actions but is the one worth
   noticing, so it is filled in the brand green where they are outlined. */
.bt-res-menu {
	background: var(--bt-green) !important;
	border-color: var(--bt-green) !important;
	color: #fff !important;
}

.bt-res-menu:hover {
	background: var(--bt-green-dark) !important;
	border-color: var(--bt-green-dark) !important;
	color: #fff !important;
}

/* ── Pre-order menu ────────────────────────────────────────────────────── */
.bt-menu-sec {
	padding: 34px 0 120px; /* room for the basket bar */
	background: var(--bt-soft);
	min-height: 50vh;
}

/* Category strip ---------------------------------------------------------- */
.bt-cats-scroll { position: relative; margin-bottom: 24px; }

.bt-cats {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bt-cats::-webkit-scrollbar { display: none; }
.bt-cats li { flex: 0 0 auto; }

.bt-cats a {
	display: inline-block;
	padding: 10px 20px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-pill);
	font-size: .9rem;
	font-weight: 600;
	color: #444;
	text-decoration: none;
	white-space: nowrap;
}

.bt-cats a:hover { border-color: var(--bt-green); color: var(--bt-green); }

.bt-cats a.active {
	background: var(--bt-green);
	border-color: var(--bt-green);
	color: #fff;
}

/* Dishes ------------------------------------------------------------------ */
/* bt-dish-grid, not bt-menu-grid: the restaurant page already owns that name
   with a two-column layout, and this rule was overriding it into three or four
   cramped columns on a wide screen. */
.bt-dish-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	/* Cards size to their own content. Stretching them to match the tallest in
	   the row lines the buttons up, but a dish with a short name and no
	   description then sits above a large empty panel. */
	align-items: start;
}

.bt-dish {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
	overflow: hidden;
}

/* The image is taken out of the flow so its natural height cannot stretch the
   frame: aspect-ratio alone lost to the theme's img rules and dishes came out
   with wildly different picture heights. */
.bt-dish-img {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bt-line);
}

.bt-dish-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The body grows so every card's button sits on the same line, whatever the
   length of the name or description above it. */
.bt-dish-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 18px 18px;
}

.bt-dish-title {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bt-ink);
}

.bt-dish-text {
	margin: 0 0 14px;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--bt-muted);
	white-space: pre-line;      /* the whole thing, breaks and all */
}

.bt-dish-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
}

.bt-dish-price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--bt-green);
	white-space: nowrap;
}

.bt-dish .add-card { margin: 0 !important; }

/* Basket bar -------------------------------------------------------------- */
/* The points chooser is a row INSIDE the sticky basket bar.
   Outside it, it sat at the end of a long menu and scrolled away behind the
   bar -- on the page and never seen. It is one compact line so the bar stays
   a bar: a label, an amount, an Apply. */
.bt-basket-loyalty {
	border-bottom: 1px solid var(--bt-line);
	background: var(--bt-mint);
}
.bt-loyalty-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}
.bt-loyalty-row > label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--bt-ink);
}
.bt-loyalty-row > label i { color: var(--bt-green); }
.bt-loyalty-row .bt-loyalty-input { flex: 0 0 auto; }
.bt-loyalty-row .bt-loyalty-input input { width: 96px; height: 40px; }
.bt-loyalty-row .bt-loyalty-max { height: 40px; }
.bt-basket-loyalty .bt-loyalty-applied { margin: 10px 0; }

@media (max-width: 575.98px) {
	/* Two lines on a narrow phone rather than a squeezed single row. */
	.bt-loyalty-row { flex-wrap: wrap; gap: 8px; }
	.bt-loyalty-row > label { flex: 1 0 100%; }
	.bt-loyalty-row .bt-loyalty-input { flex: 1 1 auto; width: 100%; }
	.bt-loyalty-row .bt-loyalty-input input { flex: 1 1 auto; width: auto; }
}

.bt-basket {
	position: sticky;
	bottom: 0;
	z-index: 20;
	background: #fff;
	border-top: 1px solid var(--bt-outline);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .06);
}

.bt-basket-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.bt-basket-sum b {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--bt-ink);
}

.bt-basket-sum span {
	display: block;
	font-size: .85rem;
	color: var(--bt-muted);
}

.bt-basket.is-filled .bt-basket-sum span {
	font-size: 1rem;
	font-weight: 700;
	color: var(--bt-green);
}

.bt-basket-go { flex: 0 0 auto; }

@media (max-width: 575.98px) {
	.bt-menu-sec { padding-bottom: 140px; }
	.bt-dish-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
	.bt-dish-body { padding: 12px 14px 14px; }
	.bt-dish-foot { flex-direction: column; align-items: stretch; gap: 8px; }
	.bt-basket-inner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* The settled facts of a booking, restated where a page would otherwise ask
   for them again. */
.bt-booking-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 34px;
	margin-top: 20px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
}

.bt-booking-strip > div { min-width: 90px; }

.bt-booking-strip span {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--bt-muted);
}

.bt-booking-strip b {
	display: block;
	margin-top: 2px;
	font-size: .98rem;
	font-weight: 700;
	color: var(--bt-ink);
}

@media (max-width: 575.98px) {
	.bt-booking-strip { gap: 12px 24px; padding: 14px 16px; }
	.bt-booking-strip b { font-size: .92rem; }
}

/* ── Flash messages ────────────────────────────────────────────────────── */
/* These were full-width Bootstrap alerts that pushed the page down as they
   appeared. They read as a notice now, floated clear of the layout, in the
   site's own language. Styled here rather than in the widget so every flash
   across the site gets it. */
.main_wrapper .alert,
.dashboard_content .alert,
body > .alert {
	position: fixed;
	top: 88px;
	right: 20px;
	z-index: 1080;
	width: auto;
	max-width: 380px;
	margin: 0 0 10px;
	padding: 15px 44px 15px 18px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-left: 4px solid var(--bt-muted);
	border-radius: 14px;
	box-shadow: 0 14px 38px rgba(0, 0, 0, .12);
	font-family: inherit;
	font-size: .93rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--bt-ink);
	animation: btFlashIn .25s ease-out both;
}

@keyframes btFlashIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

.alert.alert-success { border-left-color: var(--bt-green); }
.alert.alert-danger { border-left-color: #D64545; }
.alert.alert-warning { border-left-color: #E0A106; }
.alert.alert-info { border-left-color: #3B82C4; }

/* The dismiss control was a bare "×" in the corner of the text. */
.main_wrapper .alert .close,
.dashboard_content .alert .close,
body > .alert .close {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--bt-soft);
	font-size: 16px;
	line-height: 1;
	color: var(--bt-muted);
	text-decoration: none;
	opacity: 1;
}

.main_wrapper .alert .close:hover,
.dashboard_content .alert .close:hover,
body > .alert .close:hover {
	background: var(--bt-line);
	color: var(--bt-ink);
}

/* A confirmation has been read by the time it fades; a problem stays put. */
.alert.alert-success {
	animation: btFlashIn .25s ease-out both, btFlashOut .4s ease-in 5s both;
}

@keyframes btFlashOut {
	to { opacity: 0; visibility: hidden; transform: translateY(-8px); }
}

@media (max-width: 575.98px) {
	.main_wrapper .alert,
	.dashboard_content .alert,
	body > .alert {
		top: auto;
		bottom: 92px;
		left: 12px;
		right: 12px;
		max-width: none;
	}
}

/* ── Restaurant page: menu on a phone ──────────────────────────────────── */
/* The single column below 992 is set with the rest of the restaurant page; this
   is only the tightening that helps once the cards are that narrow. */
@media (max-width: 639.98px) {
	/* Centring was fine when a phone card was two lines tall; with the whole
	   description showing it strands the photo halfway down. */
	.bt-menu-item { align-items: flex-start; }
	.bt-menu-photo img { width: 72px; height: 72px; }
	.bt-menu-name { font-size: .95rem; }
	.bt-menu-filters { flex-wrap: wrap; gap: 8px; }
	.bt-menu-filters .form-select { flex: 1 1 46%; width: auto !important; min-width: 0; }
}

/* ── Opening hours ─────────────────────────────────────────────────────── */
.bt-hours {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 460px;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
	overflow: hidden;
}

.bt-hours li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--bt-line);
	font-size: .95rem;
}

.bt-hours li:last-child { border-bottom: 0; }
.bt-hours li.is-today { background: var(--bt-mint); }

.bt-hours-day { color: #444; font-weight: 600; }

.bt-hours-day em {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: var(--bt-radius-pill);
	background: var(--bt-green);
	font-size: .68rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #fff;
}

.bt-hours-time { color: var(--bt-ink); font-weight: 700; white-space: nowrap; }
.bt-hours-time.is-closed { color: var(--bt-muted); font-weight: 600; }

/* ── About ─────────────────────────────────────────────────────────────── */
.bt-about-text { margin-bottom: 22px; }

.bt-facts {
	margin: 0;
	max-width: 620px;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
	overflow: hidden;
}

.bt-facts > div {
	display: flex;
	gap: 18px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--bt-line);
	font-size: .93rem;
}

.bt-facts > div:last-child { border-bottom: 0; }
.bt-facts dt { flex: 0 0 92px; margin: 0; color: var(--bt-muted); font-weight: 400; }
.bt-facts dd { margin: 0; color: var(--bt-ink); font-weight: 600; }

/* ── Reviews ───────────────────────────────────────────────────────────── */
.bt-reviews-head {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	padding: 20px 22px;
	margin-bottom: 22px;
	background: var(--bt-mint);
	border: 1px solid #DCEFD0;
	border-radius: var(--bt-radius-card);
}

.bt-reviews-score { text-align: center; }
.bt-reviews-score b { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--bt-ink); }
.bt-reviews-score span { display: block; margin: 6px 0 2px; color: var(--bt-outline); font-size: .85rem; }
.bt-reviews-score small { color: var(--bt-muted); font-size: .82rem; }

.bt-reviews-score .is-on,
.bt-review-stars .is-on { color: #F5A623; }

.bt-reviews-spread { flex: 1 1 220px; list-style: none; margin: 0; padding: 0; }

.bt-reviews-spread li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 5px;
	font-size: .82rem;
	color: var(--bt-muted);
}

.bt-spread-star { flex: 0 0 34px; white-space: nowrap; }
.bt-spread-star i { color: #F5A623; font-size: .7rem; }

.bt-spread-bar {
	flex: 1 1 auto;
	height: 7px;
	background: #fff;
	border-radius: var(--bt-radius-pill);
	overflow: hidden;
}

.bt-spread-bar i { display: block; height: 100%; background: var(--bt-green); }
.bt-spread-num { flex: 0 0 22px; text-align: right; }

.bt-review-add { margin-bottom: 22px; }

.bt-reviews { list-style: none; margin: 0; padding: 0; }

.bt-reviews li {
	padding: 16px 0;
	border-bottom: 1px solid var(--bt-line);
}

.bt-reviews li:last-child { border-bottom: 0; }

.bt-review-top {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.bt-review-top b { font-size: .95rem; color: var(--bt-ink); }
.bt-review-top .bt-review-stars { color: var(--bt-outline); font-size: .8rem; }
.bt-review-top time { font-size: .8rem; color: var(--bt-muted); }

.bt-reviews h4 { margin: 0 0 4px; font-size: .95rem; font-weight: 700; color: var(--bt-ink); }
.bt-reviews p { margin: 0; font-size: .92rem; line-height: 1.6; color: #444; }
.bt-reviews-none { color: var(--bt-muted); }

@media (max-width: 575.98px) {
	.bt-reviews-head { gap: 18px; padding: 16px 18px; }
	.bt-facts > div { flex-direction: column; gap: 2px; }
	.bt-facts dt { flex: none; }
}

/* What the restaurant opens, above the slots. */
.bt-time-note {
	margin: 0 0 10px;
	padding: 8px 10px;
	background: var(--bt-mint);
	border-radius: 10px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--bt-green-dark);
}

/* The pick-up pickers sit in a dialog, so their pop-ups must not be clipped
   by it and must sit above its own stacking context. */
#btPickupWhen { overflow: visible; }
#btPickupWhen .bt-date-pop,
#btPickupWhen .bt-time-pop { z-index: 1080; }
.bt-preorder-pop .modal-content { overflow: visible; }

.bt-modal-hours {
	grid-column: 1 / -1;
	font-size: .8rem;
	color: var(--bt-muted);
}

/* ── Menu tools: diet and price ────────────────────────────────────────── */
.bt-menu-tools {
	display: flex;
	align-items: center;
	gap: 12px 28px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-card);
}

.bt-tool { display: flex; align-items: center; gap: 12px; min-width: 0; }

.bt-tool-label {
	flex: 0 0 auto;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--bt-muted);
}

.bt-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.bt-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	background: #fff;
	border: 1px solid var(--bt-outline);
	border-radius: var(--bt-radius-pill);
	font-size: .87rem;
	font-weight: 600;
	line-height: 1.2;
	color: #444;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.bt-chip:hover { border-color: var(--bt-green); color: var(--bt-green); }

.bt-chip.is-on {
	background: var(--bt-green);
	border-color: var(--bt-green);
	color: #fff;
}

.bt-chip.is-on:hover { background: var(--bt-green-dark); border-color: var(--bt-green-dark); color: #fff; }
.bt-chip i.fa-solid { font-size: .78rem; }

/* The square-in-a-square mark used on menus for what a dish contains. */
.bt-dot {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	display: inline-block;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	position: relative;
}

.bt-dot::after {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: currentColor;
}

.bt-dot-veg { color: #2E9B36; }
.bt-dot-vegan { color: #157A3A; }
.bt-dot-nonveg { color: #C0392B; }
.bt-chip.is-on .bt-dot { color: #fff; }

@media (max-width: 767.98px) {
	.bt-menu-tools { gap: 12px; padding: 12px 14px; }
	.bt-tool { width: 100%; align-items: flex-start; flex-direction: column; gap: 8px; }
	.bt-chip { padding: 8px 13px; font-size: .84rem; }
}

/* A way on that is not open yet: an empty take-away cannot reach checkout. */
.bt-basket-go.is-off {
	background: var(--bt-line) !important;
	border-color: var(--bt-line) !important;
	color: var(--bt-muted) !important;
	cursor: not-allowed;
	box-shadow: none;
}

/* ── Service switch (Lunch / Dinner) ───────────────────────────────────── */
.bt-services {
	display: inline-flex;
	gap: 4px;
	margin: 0 0 14px;
	padding: 4px;
	background: var(--bt-soft);
	border-radius: var(--bt-radius-pill);
}

.bt-service {
	padding: 8px 20px;
	border-radius: var(--bt-radius-pill);
	font-size: .88rem;
	font-weight: 700;
	color: var(--bt-muted);
	text-decoration: none;
	white-space: nowrap;
}

.bt-service:hover { color: var(--bt-ink); }

.bt-service.active {
	background: #fff;
	color: var(--bt-ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}

/* ============================================ leaving a review */
/*
 * Stars first, writing second and optional. The rest of the form is hidden
 * until a star is picked -- but only when JavaScript is here to reveal it
 * again, so the no-JS form is whole and still submits.
 */
.bt-review-form {
    padding: 22px;
    border-radius: var(--bt-radius-card);
    background: var(--bt-mint);
}
.bt-review-q {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 800;
    color: var(--bt-ink);
    letter-spacing: -0.01em;
}

/* Reversed in the markup so ~ can light the stars to the left of the hover. */
.bt-stars-pick {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}
.bt-stars-pick input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.bt-stars-pick label {
    cursor: pointer;
    font-size: 34px;
    line-height: 1;
    color: #DFE7D8;
    transition: color .12s, transform .12s;
}
.bt-stars-pick label:hover,
.bt-stars-pick label:hover ~ label,
.bt-stars-pick input:checked ~ label {
    color: #F5A623;
}
.bt-stars-pick label:active { transform: scale(.92); }
/* A keyboard user must be able to see where they are. */
.bt-stars-pick input:focus-visible + label {
    outline: 2px solid var(--bt-green);
    outline-offset: 3px;
    border-radius: 4px;
}

.bt-review-word {
    min-height: 20px;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--bt-green-dark);
}

.bt-review-more { margin-top: 14px; }
.bt-review-more textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--bt-outline);
    border-radius: 14px;
    background: #fff;
    font-size: 15px;
    resize: vertical;
}
.bt-review-more textarea:focus { outline: none; border-color: var(--bt-green); }
.bt-review-send { min-height: 48px; border-radius: var(--bt-radius-pill); margin-top: 10px; }

/* With JS, everything after the stars waits for one to be picked. */
.bt-review-form.bt-js .bt-review-more { display: none; }
.bt-review-form.bt-js.has-rating .bt-review-more { display: block; }

@media (max-width: 575.98px) {
    .bt-review-form { padding: 18px 14px; }
    .bt-stars-pick label { font-size: 30px; }
    .bt-review-send { width: 100%; }
}

/* Landing on #review from the invitation email: clear of any sticky header,
   and lit for a moment so it is obvious what the link was for. */
#review { scroll-margin-top: 90px; }
#review:target .detail-card {
    border-color: var(--bt-green) !important;
    animation: bt-review-land 2.4s ease-out 1;
}
@keyframes bt-review-land {
    0%, 40% { box-shadow: 0 0 0 4px rgba(78, 183, 17, .18); }
    100% { box-shadow: 0 0 0 0 rgba(78, 183, 17, 0); }
}
@media (prefers-reduced-motion: reduce) {
    #review:target .detail-card { animation: none; }
}

/* ===================================================== photos: the viewer */
/* Tiles are buttons now: every photo opens the viewer. */
.bt-gallery-main,
.bt-gallery-thumb {
    padding: 0;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    appearance: none;
}
.bt-gallery-main:focus-visible,
.bt-gallery-thumb:focus-visible { outline: 3px solid var(--bt-green); outline-offset: 3px; }
.bt-gallery-main img,
.bt-gallery-thumb img { transition: transform .35s ease; }
.bt-gallery-main:hover > img,
.bt-gallery-thumb:hover > img { transform: scale(1.03); }

/* The badge used to be a statement with no way to act on it. */
.bt-gallery-more { cursor: pointer; }

/* These sit over the photo. */
.bt-gallery-main .bt-open,
.bt-gallery-more { z-index: 2; }

/* Airbnb's move, because "+3 photos" on one thumb is easy to miss. */
.bt-gallery-all {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    background: #fff;
    color: var(--bt-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
.bt-gallery-all:hover { background: var(--bt-soft); }
.bt-gallery-wrap { position: relative; }

/* ---- the viewer */
html.bt-viewer-open { overflow: hidden; }
.bt-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;               /* over the sticky basket bar and the header */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0d0c;            /* solid: a photo is easier to judge against nothing */
}
.bt-viewer[hidden] { display: none; }
.bt-viewer-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 64px 12px 108px;
    min-width: 0;
}
/* The whole photo, whatever shape it was uploaded in. */
.bt-viewer-stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}
.bt-viewer-close {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.bt-viewer-close:hover { background: rgba(255, 255, 255, .26); }
.bt-viewer-count {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}
.bt-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
.bt-viewer-nav:hover { background: rgba(255, 255, 255, .26); }
.bt-viewer-nav[hidden] { display: none; }
.bt-viewer-prev { left: 18px; }
.bt-viewer-next { right: 18px; }
.bt-viewer-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    overflow-x: auto;
    justify-content: center;
    scrollbar-width: none;
}
.bt-viewer-strip::-webkit-scrollbar { display: none; }
.bt-viewer-strip[hidden] { display: none; }
.bt-viewer-strip button {
    flex: 0 0 auto;
    width: 62px;
    height: 46px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .55;
}
.bt-viewer-strip button.is-on { border-color: #fff; opacity: 1; }
.bt-viewer-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Floating over the mosaic, it lands on the last thumb as soon as the thumbs
   sit in a row, so below a laptop it becomes an ordinary button underneath.
   It has to be stated here, after the rule above: a media query adds no
   specificity, and the earlier block lost to it. */
@media (max-width: 991.98px) {
    .bt-gallery-all {
        position: static;
        margin-top: 10px;
        box-shadow: none;
        border-color: rgba(0, 0, 0, .14);
    }
}

@media (max-width: 575.98px) {
    .bt-gallery,
    .bt-gallery.bt-gallery-wide { gap: 8px; }

    /* Thumbs on a phone would leave the photo a postage stamp; swipe instead. */
    .bt-viewer-strip { display: none; }
    .bt-viewer-stage { padding: 60px 8px 60px; }
    .bt-viewer-nav { width: 40px; height: 40px; }
    .bt-viewer-prev { left: 8px; }
    .bt-viewer-next { right: 8px; }
    .bt-gallery-all { height: 34px; padding: 0 13px; font-size: 12px; }
}

/* ========================================== a restaurant's own booking link */
/* Reached from the restaurant's website, so it carries no navigation: see
   themes/new/views/layouts/reserve.php. White page, one column, the form
   above the reading matter. */
.bt-reserve-page { background: #fff; }
.bt-reserve-main { min-height: calc(100vh - 84px); }

.bt-reserve { padding: 28px 18px 8px; }
/* The confirmation comes back as a flash on this page, so it has to read as
   the answer to what they just did rather than a stray notice. */
.bt-reserve-main .alert {
    max-width: 560px;
    margin: 18px auto -6px;
    border-radius: 16px;
    font-size: 14px;
}
.bt-reserve-inner { max-width: 560px; margin: 0 auto; }

.bt-reserve-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.bt-reserve-photo {
    flex: 0 0 auto;
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bt-soft);
}
.bt-reserve-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-reserve-id { min-width: 0; }
.bt-reserve-id h1 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--bt-ink);
}
.bt-reserve-meta {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bt-muted);
}
.bt-reserve-meta .fa-star { color: var(--bt-green); font-size: 12px; }
.bt-reserve-shut { color: #C2410C; }
.bt-reserve-dot { width: 3px; height: 3px; border-radius: 50%; background: #C9CFC9; }

/* the form, which is the reason the page exists */
.bt-reserve-form {
    padding: 20px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 24px;
    background: var(--bt-soft);
    margin-bottom: 26px;
}
.bt-reserve-formtitle { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: var(--bt-ink); }
.bt-reserve-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.bt-reserve-field:nth-child(3) { grid-column: 1 / -1; }
.bt-reserve-wide { grid-column: 1 / -1; }

/* what they chose, before they are asked for their name */
.bt-reserve-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bt-ink);
}
.bt-reserve-summary i { color: var(--bt-green); margin-right: 6px; }
.bt-reserve-change {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-green);
    text-decoration: underline;
}

.bt-reserve-notes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bt-green);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.bt-reserve-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--bt-muted);
}
.bt-reserve-terms input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }
.bt-reserve-terms a { color: var(--bt-green); text-decoration: underline; }
.bt-reserve-form .form-label { margin-bottom: 6px; }
.bt-reserve-form .form-control,
.bt-reserve-form .form-select { background: #fff; border-color: #fff; }
.bt-reserve-go {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 26px;
    background: var(--bt-green);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.bt-reserve-go:hover { background: var(--bt-green-dark); }
.bt-reserve-free { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--bt-muted); }

.bt-reserve-block { padding: 20px 0; border-top: 1px solid #EEF1EE; }
.bt-reserve-block h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--bt-ink); }
.bt-reserve-about { font-size: 14.5px; line-height: 1.65; color: #4A504A; }
.bt-reserve-about p:last-child { margin-bottom: 0; }
.bt-reserve-muted { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bt-muted); }
.bt-reserve-aside { margin-top: 12px; font-size: 13px; }

.bt-reserve-hours { list-style: none; margin: 0; padding: 0; }
.bt-reserve-hours li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-size: 14px;
    color: #4A504A;
    border-bottom: 1px solid #F4F6F4;
}
.bt-reserve-hours li:last-child { border-bottom: 0; }
.bt-reserve-hours li.is-today { font-weight: 700; color: var(--bt-ink); }

.bt-reserve-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bt-reserve-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 19px;
    background: #fff;
    color: var(--bt-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.bt-reserve-link:hover { background: var(--bt-mint); border-color: var(--bt-green); color: var(--bt-ink); }
.bt-reserve-link i { color: var(--bt-green); }

.bt-reserve-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 18px 30px;
    font-size: 12px;
    color: #9A9A9A;
}
.bt-reserve-foot img { display: block; opacity: .75; }
/* It is a link now, so it needs to behave like one. */
.bt-reserve-brand { display: inline-flex; align-items: center; line-height: 0; }
.bt-reserve-brand:hover img { opacity: 1; }
.bt-reserve-brand:focus-visible { outline: 2px solid var(--bt-green); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 480px) {
    .bt-reserve { padding: 20px 14px 4px; }
    .bt-reserve-id h1 { font-size: 22px; }
    .bt-reserve-photo { width: 64px; height: 64px; border-radius: 16px; }
    .bt-reserve-fields { grid-template-columns: 1fr; }
    .bt-reserve-field:nth-child(3) { grid-column: auto; }
}

/* ---- the end of a booking made through a restaurant's own link */
.bt-done { text-align: center; padding: 12px 0 22px; }
.bt-done-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--bt-mint);
    color: var(--bt-green);
    font-size: 22px;
}
.bt-done h1 { margin: 0 0 8px; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--bt-ink); }
.bt-done p { margin: 0 auto; max-width: 42ch; font-size: 14.5px; line-height: 1.6; color: var(--bt-muted); }

.bt-done-card {
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 22px;
    overflow: hidden;
}
.bt-done-ref {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    background: var(--bt-mint);
    font-size: 13px;
    color: var(--bt-ink);
}
.bt-done-ref strong { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.bt-done-rows { margin: 0; padding: 4px 18px 8px; }
.bt-done-rows > div {
    display: flex;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #F4F6F4;
}
.bt-done-rows > div:last-child { border-bottom: 0; }
.bt-done-rows dt { flex: 0 0 84px; font-size: 13px; font-weight: 600; color: var(--bt-muted); }
.bt-done-rows dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bt-ink);
    min-width: 0;
}
.bt-done-photo {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bt-soft);
}
.bt-done-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bt-done-links { margin-top: 16px; }

.bt-done-steps { margin: 0; padding-left: 20px; }
.bt-done-steps li { font-size: 14px; line-height: 1.6; color: #4A504A; margin-bottom: 5px; }
.bt-done-steps li:last-child { margin-bottom: 0; }

.bt-done-back { padding: 6px 0 4px; text-align: center; }
.bt-done-back a { font-size: 13.5px; font-weight: 700; color: var(--bt-green); text-decoration: underline; }

@media (max-width: 480px) {
    .bt-done h1 { font-size: 21px; }
    .bt-done-rows dt { flex-basis: 74px; }
}

/* ---- the code step */
.bt-reserve-hint { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--bt-muted); }

.bt-otp-input {
    height: 58px;
    margin-bottom: 16px;
    background: #fff !important;
    border-color: #fff !important;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .32em;
    text-indent: .32em;          /* the tracking is on the right of each digit */
}
.bt-otp-input::placeholder { color: #D6DAD6; font-weight: 700; }
.bt-otp-again {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0 4px;
}
.bt-otp-again form { margin: 0; }
.bt-otp-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bt-green);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.bt-otp-sep { color: #C9CFC9; }

/* ================================================= the restaurant console */
/* Run from a phone behind the pass or a tablet on the counter, so the
   navigation is a bottom bar where a thumb reaches and becomes a side rail
   once there is a desk's worth of width. */
/* The base theme makes <body> a flex container, which turned the console
   shell into a flex item that shrank to its content: on the tables page the
   whole layout came out 260px wide inside a 412px phone. */
.bt-console-page { background: var(--bt-soft); display: block; }
.bt-console-shell { width: 100%; }

.bt-console-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--bt-outline, #E4E8E4);
    padding-top: env(safe-area-inset-top);
}
.bt-console-bar-in {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
    padding: 11px 16px;
}
.bt-console-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.bt-console-who img { display: block; border-radius: 7px; }
.bt-console-who span { display: flex; flex-direction: column; min-width: 0; }
.bt-console-who strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--bt-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bt-console-who small { font-size: 12px; color: var(--bt-muted); }
.bt-console-out {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--bt-muted);
}
.bt-console-out:hover { background: var(--bt-soft); color: var(--bt-ink); }

.bt-console-shell { max-width: 760px; margin: 0 auto; }
.bt-console-main {
    padding: 16px 16px 96px;                 /* room for the bottom bar */
    min-height: calc(100vh - 200px);
}

/* the tabs: bottom bar on a phone */
.bt-console-rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--bt-outline, #E4E8E4);
    padding-bottom: env(safe-area-inset-bottom);
}
.bt-console-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--bt-muted);
    text-decoration: none;
    min-height: 56px;                        /* a thumb target */
}
.bt-console-tab i { font-size: 17px; }
.bt-console-tab.is-on { color: var(--bt-green); }
.bt-console-tab:hover { color: var(--bt-ink); }
.bt-console-tab.is-on:hover { color: var(--bt-green); }

/* blocks */
.bt-con-block {
    background: #fff;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
}
.bt-con-h1 { margin: 0 0 12px; font-size: 22px; font-weight: 800; color: var(--bt-ink); }
.bt-con-h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--bt-ink); }
.bt-con-lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--bt-muted); }
.bt-con-note { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--bt-muted); }
.bt-con-note a, .bt-con-more { color: var(--bt-green); font-weight: 700; text-decoration: underline; }
.bt-con-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--bt-muted); }
.bt-con-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bt-con-head .bt-con-h1, .bt-con-head .bt-con-h2 { margin: 0; }

/* today */
.bt-con-now {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: var(--bt-mint);
}
.bt-con-now.is-shut { background: #FDF0EA; }
.bt-con-now i { font-size: 18px; color: var(--bt-green); }
.bt-con-now.is-shut i { color: #C2410C; }
.bt-con-now div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bt-con-now strong { font-size: 14.5px; font-weight: 800; color: var(--bt-ink); }
.bt-con-now span { font-size: 12.5px; color: var(--bt-muted); }
.bt-con-now a { font-size: 13px; font-weight: 700; color: var(--bt-green); text-decoration: underline; }

.bt-con-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-con-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-muted);
    background: #fff;
}
.bt-con-chip.is-on { border-color: var(--bt-green); color: var(--bt-ink); background: var(--bt-mint); }
.bt-con-chip i { color: #C9CFC9; }
.bt-con-chip.is-on i { color: var(--bt-green); }
.bt-con-chip em { font-style: normal; font-weight: 600; color: #B0B6B0; }

/* lists */
.bt-con-list { list-style: none; margin: 0; padding: 0; }
.bt-con-list li + li { border-top: 1px solid #F1F4F1; }
.bt-con-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    color: var(--bt-ink);
    text-decoration: none;
}
.bt-con-list a:hover .bt-con-listbody strong { color: var(--bt-green); }
.bt-con-listbody { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bt-con-listbody strong { font-size: 14.5px; font-weight: 700; }
.bt-con-listbody small { font-size: 12.5px; color: var(--bt-muted); }
.bt-con-list .fa-chevron-right { color: #C9CFC9; font-size: 13px; }
.bt-con-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--bt-soft);
}
.bt-con-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-con-thumb-empty { display: flex; align-items: center; justify-content: center; color: #C9CFC9; }
.bt-con-more { display: inline-block; margin-top: 10px; font-size: 13px; }

/* empty states */
.bt-con-empty { text-align: center; padding: 22px 10px 8px; }
.bt-con-empty i { font-size: 26px; color: #C9CFC9; }
.bt-con-empty h3 { margin: 10px 0 6px; font-size: 16px; font-weight: 800; color: var(--bt-ink); }
.bt-con-empty p { margin: 0 auto 14px; max-width: 40ch; font-size: 13.5px; line-height: 1.6; color: var(--bt-muted); }

/* buttons */
.bt-con-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 25px;
    background: var(--bt-green);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.bt-con-btn:hover { background: var(--bt-green-dark); color: #fff; }
.bt-con-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background: var(--bt-mint);
    color: var(--bt-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.bt-con-add:hover { background: var(--bt-green); color: #fff; }
.bt-con-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bt-muted);
    text-decoration: none;
}
.bt-con-back:hover { color: var(--bt-ink); }
.bt-con-save {
    position: sticky;
    bottom: 72px;
    z-index: 3;
    /* Padded low enough that the gap between the button and the tab bar is
       covered too -- otherwise a field scrolling past showed as a sliver
       underneath it. */
    padding: 12px 0 16px;
    background: linear-gradient(to top, var(--bt-soft) 70%, rgba(244, 246, 244, 0));
}

/* the hours editor */
.bt-con-day {
    background: #fff;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px;
}
.bt-con-day.is-shut { background: #FAFBFA; }
.bt-con-day.is-shut .bt-con-windows { display: none; }
.bt-con-dayhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bt-con-dayhead h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--bt-ink); }
.bt-con-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--bt-muted); margin: 0; }
.bt-con-switch input { width: 17px; height: 17px; }
.bt-con-windows { margin-top: 12px; }
.bt-con-window { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bt-con-window .form-control {
    flex: 1;
    min-width: 0;
    height: 46px;                            /* comfortable on a phone */
    background: var(--bt-soft);
    border-color: var(--bt-soft);
    font-size: 15px;
    font-weight: 600;
}
.bt-con-to { flex: 0 0 auto; font-size: 13px; color: var(--bt-muted); }
.bt-con-drop {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #C0C6C0;
    cursor: pointer;
}
.bt-con-drop:hover { background: #FDF0EA; color: #C2410C; }
.bt-con-addwindow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bt-green);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* toggles and radios */
.bt-con-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid #F1F4F1;
}
.bt-con-toggle:last-of-type { border-bottom: 0; }
.bt-con-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.bt-con-toggle-box {
    flex: 0 0 auto;
    position: relative;
    width: 46px;
    height: 27px;
    border-radius: 14px;
    background: #DDE2DD;
    transition: background .18s ease;
    margin-top: 2px;
}
.bt-con-toggle-box::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}
.bt-con-toggle input:checked + .bt-con-toggle-box { background: var(--bt-green); }
.bt-con-toggle input:checked + .bt-con-toggle-box::after { transform: translateX(19px); }
.bt-con-toggle input:focus-visible + .bt-con-toggle-box { outline: 3px solid var(--bt-mint); outline-offset: 2px; }
.bt-con-toggle-text { display: flex; flex-direction: column; }
.bt-con-toggle-text strong { font-size: 14.5px; font-weight: 700; color: var(--bt-ink); }
.bt-con-toggle-text small { font-size: 12.5px; color: var(--bt-muted); }

.bt-con-notice { display: flex; flex-direction: column; gap: 8px; }
.bt-con-radio {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 13px;
    margin: 0;
    cursor: pointer;
}
.bt-con-radio input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--bt-green); }
.bt-con-radio span { display: flex; flex-direction: column; }
.bt-con-radio strong { font-size: 14px; font-weight: 700; color: var(--bt-ink); }
.bt-con-radio small { font-size: 12.5px; color: var(--bt-muted); }
.bt-con-radio:has(input:checked) { border-color: var(--bt-green); background: var(--bt-mint); }

/* forms */
.bt-con-form .form-label { font-size: 13px; font-weight: 700; color: var(--bt-ink); margin-bottom: 5px; }
.bt-con-form .form-control,
.bt-con-form textarea.form-control {
    background: var(--bt-soft);
    border-color: var(--bt-soft);
    min-height: 46px;
    font-size: 15px;
}
.bt-con-form .form-group,
.bt-con-field { margin-bottom: 14px; }
.bt-con-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bt-con-pic {
    height: 150px;
    border-radius: 13px;
    overflow: hidden;
    background: var(--bt-soft);
    margin-bottom: 9px;
}
.bt-con-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-con-danger { margin-top: 18px; text-align: center; }
.bt-con-danger button {
    border: 0;
    background: none;
    color: #C2410C;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.bt-console-main .alert { border-radius: 14px; font-size: 14px; }

/* a desk: the tabs move to the side */
@media (min-width: 768px) {
    .bt-console-shell { display: flex; gap: 24px; padding: 20px 16px 40px; }
    .bt-console-rail {
        position: sticky;
        top: 76px;
        bottom: auto;
        left: auto;
        right: auto;
        flex: 0 0 176px;
        flex-direction: column;
        align-self: flex-start;
        border: 1px solid var(--bt-outline, #E4E8E4);
        border-radius: 18px;
        padding: 8px;
        overflow: hidden;
    }
    .bt-console-tab {
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        gap: 11px;
        min-height: 44px;
        padding: 0 13px;
        border-radius: 11px;
        font-size: 14px;
    }
    .bt-console-tab.is-on { background: var(--bt-mint); }
    .bt-console-main { flex: 1; min-width: 0; padding: 0 0 40px; }
    .bt-con-save { position: static; }
}

/* ===================================================== what's on: events */
/* A brunch or a themed night, shown where a guest is choosing between
   restaurants rather than buried behind a tab. */
.bt-events { margin: 4px 0 22px; }
.bt-events-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--bt-ink);
}
.bt-events-title i { color: var(--bt-green); }
.bt-events-row { display: grid; gap: 12px; }
.bt-event {
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 18px;
    background: #fff;
}
.bt-event-photo {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bt-soft);
}
.bt-event-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-event-body { min-width: 0; display: flex; flex-direction: column; }
.bt-event-when {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 9px;
    margin-bottom: 6px;
    border-radius: 999px;
    background: var(--bt-mint);
    color: var(--bt-green-dark, #3d8c12);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .01em;
}
.bt-event-body h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 800; color: var(--bt-ink); }
.bt-event-body p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--bt-muted); }
.bt-event-price { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--bt-ink); }

@media (max-width: 575.98px) {
    .bt-event { flex-direction: column; gap: 11px; }
    .bt-event-photo { width: 100%; height: 150px; }
}

/* on a restaurant's own booking link */
.bt-reserve-event { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F4F6F4; }
.bt-reserve-event:last-child { border-bottom: 0; padding-bottom: 0; }
.bt-reserve-event > div { min-width: 0; display: flex; flex-direction: column; }
.bt-reserve-event-photo {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    border-radius: 13px;
    overflow: hidden;
    background: var(--bt-soft);
}
.bt-reserve-event-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-reserve-event-when {
    align-self: flex-start;
    padding: 2px 8px;
    margin-bottom: 5px;
    border-radius: 999px;
    background: var(--bt-mint);
    color: var(--bt-green-dark, #3d8c12);
    font-size: 11px;
    font-weight: 800;
}
.bt-reserve-event strong { font-size: 14.5px; font-weight: 800; color: var(--bt-ink); }
.bt-reserve-event p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--bt-muted); }
.bt-reserve-event-price { margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--bt-ink); }

/* a restaurant that is not taking bookings */
.bt-reserve-shut { text-align: center; }
.bt-reserve-shut .bt-reserve-formtitle { margin-bottom: 8px; }
.bt-reserve-shut .bt-reserve-muted { margin-bottom: 16px; }
.bt-reserve-go-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
}
.bt-reserve-go-link:hover { color: #fff; }

/* the card markers */
.bt-card-flag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: rgba(17, 19, 17, .82);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}
.bt-card-event {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding: 7px 10px;
    border-radius: 11px;
    background: var(--bt-mint);
}
.bt-card-event i { color: var(--bt-green); font-size: 12px; }
.bt-card-event > span { display: flex; flex-direction: column; min-width: 0; }
.bt-card-event strong {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--bt-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bt-card-event span span,
.bt-card-event > span { font-size: 11.5px; color: var(--bt-muted); }

/* the booking panel, when there is nothing to book */
.bt-book-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--bt-soft);
    margin-bottom: 14px;
}
.bt-book-note i { color: var(--bt-muted); font-size: 15px; margin-top: 2px; }
.bt-book-note span { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.5; color: var(--bt-muted); }
.bt-book-note strong { font-size: 13.5px; color: var(--bt-ink); }
.bt-takeaway-btn-wide { width: 100%; height: 54px; border-radius: 27px; justify-content: center; }

/* booking the event itself */
.bt-event-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.bt-event-foot .bt-event-price,
.bt-event-foot .bt-reserve-event-price { margin: 0; }
.bt-event-book {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 19px;
    background: var(--bt-green);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.bt-event-book:hover { background: var(--bt-green-dark); color: #fff; }

/* ---- the bookings list */
.bt-bk-waiting { border-color: var(--bt-green); }
.bt-bk-waiting .bt-con-h2 { display: flex; align-items: center; gap: 8px; }
.bt-bk-waiting .bt-con-h2 i { color: var(--bt-green); }
.bt-con-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--bt-green);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.bt-bk-tabs { display: flex; gap: 7px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.bt-bk-tabs::-webkit-scrollbar { display: none; }
.bt-bk-tabs a {
    flex: 0 0 auto;
    padding: 8px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--bt-outline, #E4E8E4);
    color: var(--bt-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.bt-bk-tabs a.is-on { background: var(--bt-green); border-color: var(--bt-green); color: #fff; }

.bt-bk { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #F1F4F1; }
.bt-bk:last-child { border-bottom: 0; padding-bottom: 0; }
.bt-bk-time {
    flex: 0 0 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px;
}
.bt-bk-time strong { font-size: 16px; font-weight: 800; color: var(--bt-ink); }
.bt-bk-time small { font-size: 11px; color: var(--bt-muted); }
.bt-bk-body { flex: 1; min-width: 0; }
.bt-bk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bt-bk-top strong {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bt-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bt-bk-state {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: var(--bt-soft);
    color: var(--bt-muted);
}
.bt-bk-state.is-green { background: var(--bt-mint); color: var(--bt-green-dark, #3d8c12); }
.bt-bk-state.is-red { background: #FDF0EA; color: #C2410C; }
.bt-bk-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 5px 0 0;
    font-size: 12.5px;
    color: var(--bt-muted);
}
.bt-bk-facts i { color: #C0C6C0; margin-right: 4px; }
.bt-bk-ref { font-variant-numeric: tabular-nums; }
.bt-bk-note {
    margin: 7px 0 0;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--bt-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: #4A504A;
}
.bt-bk-note i { color: #C0C6C0; margin-right: 5px; font-size: 10px; }
.bt-bk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.bt-bk-actions form { margin: 0; }
.bt-bk-do {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 18px;
    background: var(--bt-green);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.bt-bk-do.is-reject { background: #fff; border: 1px solid #E7B4B4; color: #C2410C; }
.bt-bk-do.is-preparing,
.bt-bk-do.is-ready { background: var(--bt-mint); color: var(--bt-ink); }
.bt-bk-call, .bt-bk-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 18px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    background: #fff;
    color: var(--bt-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.bt-bk-call { width: 36px; }
.bt-bk-open { padding: 0 14px; margin-left: auto; }
.bt-bk-call:hover, .bt-bk-open:hover { background: var(--bt-soft); color: var(--bt-ink); }

/* ---- the console dashboard, menu, tables */
.bt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.bt-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 16px;
    background: #fff;
    color: var(--bt-ink);
    text-decoration: none;
}
.bt-stat strong { font-size: 24px; font-weight: 800; line-height: 1.1; }
.bt-stat span { font-size: 12px; color: var(--bt-muted); }
.bt-stat.is-urgent { background: var(--bt-mint); border-color: var(--bt-green); }
.bt-stat.is-urgent strong { color: var(--bt-green-dark, #3d8c12); }
a.bt-stat:hover { border-color: var(--bt-green); }

.bt-con-sub { font-size: 13px; font-weight: 600; color: var(--bt-muted); }
.bt-con-when {
    flex: 0 0 46px;
    font-size: 14px;
    font-weight: 800;
    color: var(--bt-ink);
    font-variant-numeric: tabular-nums;
}
.bt-con-list li.is-off .bt-con-listbody strong { color: var(--bt-muted); }
.bt-con-list li.is-off em {
    display: block;                 /* not trailing the title into its wrap */
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #C2410C;
    margin-top: 2px;
}
.bt-con-list li { display: flex; align-items: center; gap: 8px; }
.bt-con-list li > a { flex: 1; min-width: 0; }
.bt-con-inline { margin: 0; flex: 0 0 auto; }
.bt-con-mini {
    width: 36px;
    height: 36px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 50%;
    background: #fff;
    color: var(--bt-muted);
    cursor: pointer;
}
.bt-con-mini:hover { background: var(--bt-soft); color: var(--bt-ink); }

.bt-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.bt-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 8px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 15px;
    background: #fff;
    color: var(--bt-ink);
    text-decoration: none;
    text-align: center;
}
.bt-table:hover { border-color: var(--bt-green); }
.bt-table-seats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bt-mint);
    color: var(--bt-green-dark, #3d8c12);
    font-size: 16px;
    font-weight: 800;
}
.bt-table-name {
    font-size: 13px;
    font-weight: 700;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bt-table-note { font-size: 11.5px; color: var(--bt-muted); }
.bt-table.is-blocked { background: #FAFBFA; }
.bt-table.is-blocked .bt-table-seats { background: var(--bt-soft); color: #B0B6B0; }
.bt-table.is-blocked .bt-table-note { color: #C2410C; }

@media (min-width: 600px) {
    .bt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ---- an event that comes back every week ---- */
/* Restaurants run the same Saturday night for months; the alternative was
   fifty-two records. "Just once" or "Every week", and then the days. */
.bt-con-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.bt-con-seg label { margin: 0; cursor: pointer; }
/* Hidden by clipping, not by opacity: an opacity:0 control is pruned from
   the accessibility tree, so the choice disappeared for anyone using a
   keyboard or a screen reader. Clipped, it stays focusable and announced. */
.bt-con-seg input,
.bt-con-days input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.bt-con-seg span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--bt-muted);
    text-align: center;
}
.bt-con-seg input:checked + span {
    border-color: var(--bt-green);
    background: var(--bt-mint);
    color: var(--bt-green);
}
.bt-con-seg input:focus-visible + span { outline: 2px solid var(--bt-green); outline-offset: 2px; }

.bt-con-days { display: flex; flex-wrap: wrap; gap: 7px; }
.bt-con-days label { margin: 0; cursor: pointer; }
.bt-con-days span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 42px;
    padding: 0 9px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 12px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bt-muted);
}
.bt-con-days input:checked + span {
    border-color: var(--bt-green);
    background: var(--bt-green);
    color: #fff;
}
.bt-con-days input:focus-visible + span { outline: 2px solid var(--bt-green); outline-offset: 2px; }
.bt-con-days .bt-con-err { flex: 1 0 100%; }

.bt-con-err { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: #C2410C; }
.bt-con-form .form-control.is-invalid { border-color: #C2410C; background: #FEF3EE; }

/* ---- one booking, in full ---- */
.bt-bkv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bt-bkv-when { display: flex; flex-direction: column; }
.bt-bkv-when strong { font-size: 26px; font-weight: 800; color: var(--bt-ink); line-height: 1.1; }
.bt-bkv-when span { font-size: 13.5px; color: var(--bt-muted); }

.bt-bkv-list { margin: 0; }
.bt-bkv-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bt-outline, #E4E8E4);
}
.bt-bkv-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bt-bkv-list dt { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--bt-muted); }
.bt-bkv-list dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bt-ink);
    text-align: right;
    word-break: break-word;
}
.bt-bkv-list dd a { color: var(--bt-green); }

.bt-bkv-order { list-style: none; margin: 0; padding: 0; }
.bt-bkv-order li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bt-outline, #E4E8E4);
}
.bt-bkv-order li:last-child { border-bottom: 0; padding-bottom: 0; }
.bt-bkv-qty { flex: 0 0 auto; font-size: 13.5px; font-weight: 800; color: var(--bt-green); }
.bt-bkv-dish { flex: 1; font-size: 14.5px; color: var(--bt-ink); }
.bt-bkv-money { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--bt-muted); }

.bt-bkv-total { display: flex; align-items: center; justify-content: space-between; }
.bt-bkv-total span { font-size: 14px; font-weight: 700; color: var(--bt-muted); }
.bt-bkv-total strong { font-size: 19px; font-weight: 800; color: var(--bt-ink); }

.bt-bkv-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.bt-bkv-actions form { flex: 1 1 130px; margin: 0; }
.bt-bkv-actions .bt-bk-do { width: 100%; min-height: 46px; }

/* A date input carries a wide intrinsic minimum, and a grid item defaults to
   min-width:auto -- so the "Last day" column and its hint ran off the right
   edge of the card on a phone. Let the columns shrink. */
.bt-con-row > * { min-width: 0; }
.bt-con-form .form-control,
.bt-con-form input[type="date"],
.bt-con-form input[type="time"] { width: 100%; max-width: 100%; min-width: 0; }

/* The flash in the console.
   On the public site the alert is fixed over the page, so fading it out costs
   nothing. In the console it is an ordinary block in the column, so the fade
   left its box behind -- 76px of empty grey above the heading, for good.
   Collapse the box on the same timing. */
.bt-console-main .alert { max-height: 400px; overflow: hidden; }
.bt-console-main .alert.alert-success {
    animation: btFlashIn .25s ease-out both, btConFlashOut .4s ease-in 5s both;
}
@keyframes btConFlashOut {
    to {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

/* ---- the console rail's second row ---- */
/* Courses, Tables and Staff only appear once there is a rail to put them in:
   the bottom bar holds what a thumb can reach across a phone, and a sixth
   entry makes all of them too narrow to read. They are on Today either way. */
.bt-rail-only { display: none; }
@media (min-width: 768px) {
    .bt-rail-only { display: flex; }
    /* A hairline above the shortcuts, so the five that are also on the phone
       still read as the main set. The layout marks which one it goes on. */
    .bt-console-rail .bt-rail-first {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--bt-outline, #E4E8E4);
        border-radius: 0 0 11px 11px;
    }
}

/* ---- the menu, by sitting and course ---- */
.bt-con-h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bt-muted);
}
.bt-con-course + .bt-con-course { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bt-outline, #E4E8E4); }
.bt-con-course .bt-con-hint { margin: 0 0 2px; }
.bt-con-h2 .fa-clock { color: var(--bt-green); margin-right: 4px; }

.bt-con-pill {
    display: inline-block;
    margin-right: 7px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bt-mint);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bt-green);
}

/* The diet chips carry a dot, so they need room the day chips do not -- and
   the dot is drawn in currentColor, so the day chips' green fill would turn
   veg and non-veg both white. Mint and a green outline instead: the chip
   still reads as chosen and the dot keeps the colour that means something. */
.bt-con-diet span { min-width: 0; gap: 7px; padding: 0 13px; }
.bt-con-diet .bt-dot { flex: 0 0 auto; }
.bt-con-diet input:checked + span {
    background: var(--bt-mint);
    border-color: var(--bt-green);
    color: var(--bt-ink);
}

.bt-con-list small .bt-dot { vertical-align: -1px; margin-right: 5px; }
.bt-con-suggest { background: var(--bt-mint); border-radius: 12px; padding: 11px 13px; color: var(--bt-ink); }

/* ===================================================== the floor plan */
/* The room, drawn to scale. Everything inside is positioned in room units --
   the room is 100 across and 145 down -- so the plan scales with the screen
   and nothing distorts. The aspect-ratio below is what makes a unit square. */
.bt-plan { position: relative; }

.bt-plan-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 12px;
}
.bt-plan-modes button {
    min-height: 40px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    background: #fff;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bt-muted);
    cursor: pointer;
}
.bt-plan-modes button[aria-pressed="true"] {
    border-color: var(--bt-green);
    background: var(--bt-mint);
    color: var(--bt-green);
}

.bt-plan-when { margin-bottom: 10px; }
.bt-plan-clock {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.bt-plan-clock b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bt-plan-clock span { font-size: 12.5px; color: var(--bt-muted); }
.bt-plan-when input[type="range"] { width: 100%; margin: 0; accent-color: var(--bt-green); }

/* a booking with nowhere to sit */
.bt-plan-waiting {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--bt-green);
    background: var(--bt-mint);
    border-radius: 14px;
}
.bt-plan-waiting p { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--bt-green); }
.bt-plan-waiting p b { display: block; font-size: 13.5px; color: var(--bt-ink); }
.bt-plan-waiting button {
    border: 0;
    border-radius: 10px;
    background: var(--bt-green);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 13px;
    cursor: pointer;
}
.bt-plan-waiting button[aria-pressed="true"] { background: var(--bt-green-dark, #3D9209); }

/* the room itself */
.bt-plan-room {
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 145;
    background: #fff;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 18px;
    overflow: hidden;
    touch-action: none;
    /* Dragging a table would otherwise start a text selection and drag the
       table numbers about instead of the tables. */
    user-select: none;
    -webkit-user-select: none;
    margin-bottom: 10px;
}
.bt-plan-room.is-edit {
    background:
        linear-gradient(var(--bt-outline, #E4E8E4) 1px, transparent 1px) 0 0 / 100% 6.9%,
        linear-gradient(90deg, var(--bt-outline, #E4E8E4) 1px, transparent 1px) 0 0 / 10% 100%,
        #fff;
}

/* which end of the room is which */
.bt-plan-edge {
    position: absolute;
    left: 12px;
    right: 12px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #9AA5A0;
    text-align: center;
    pointer-events: none;
}
.bt-plan-edge-far { top: 8px; }
.bt-plan-edge-door { bottom: 8px; }

/* a table */
.bt-tbl {
    position: absolute;
    transform: translate(-50%, -50%);
    border: 0;
    padding: 0;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.bt-tbl-top {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--bt-outline, #E4E8E4);
    background: #fff;
    border-radius: 7px;
}
.bt-tbl-round .bt-tbl-top { border-radius: 50%; }

.bt-tbl-chair {
    position: absolute;
    background: var(--bt-outline, #E4E8E4);
    border-radius: 3px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bt-tbl-label {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1px;
    text-align: center;
    line-height: 1.1;
    pointer-events: none;
}
.bt-tbl-label b { font-size: 13px; font-weight: 800; color: var(--bt-ink); font-variant-numeric: tabular-nums; }
.bt-tbl-label small {
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8.5px;
    font-weight: 700;
    color: var(--bt-muted);
}

.bt-tbl.is-booked .bt-tbl-top { background: var(--bt-mint); border-color: var(--bt-green); }
.bt-tbl.is-booked .bt-tbl-chair { background: #BCE39F; }
.bt-tbl.is-booked .bt-tbl-label small { color: var(--bt-green); }

.bt-tbl.is-blocked .bt-tbl-top {
    border-style: dashed;
    border-color: #9AA5A0;
    background: repeating-linear-gradient(45deg, #F2F4F2 0 4px, #E6EAE6 4px 8px);
}
.bt-tbl.is-blocked .bt-tbl-label b,
.bt-tbl.is-blocked .bt-tbl-label small { color: #9AA5A0; }

.bt-tbl.is-sel .bt-tbl-top { border-color: var(--bt-green); box-shadow: 0 0 0 3px rgba(78, 183, 17, .26); }
.bt-tbl.can-take .bt-tbl-top { border-color: var(--bt-green); border-style: dashed; }
.bt-tbl.cant-take { opacity: .45; }

.bt-plan-room.is-edit .bt-tbl { cursor: grab; }
.bt-plan-room.is-edit .bt-tbl:active { cursor: grabbing; }

/* legend */
.bt-plan-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 15px;
    margin-bottom: 12px;
    font-size: 11.5px;
    color: var(--bt-muted);
}
.bt-plan-key span { display: inline-flex; align-items: center; gap: 6px; }
.bt-plan-key i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px solid var(--bt-outline, #E4E8E4);
    background: #fff;
}
.bt-plan-key .is-booked i { background: var(--bt-mint); border-color: var(--bt-green); }
.bt-plan-key .is-blocked i {
    border-style: dashed;
    border-color: #9AA5A0;
    background: repeating-linear-gradient(45deg, #F2F4F2 0 3px, #E6EAE6 3px 6px);
}

/* what the selected table says */
.bt-plan-sheet-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.bt-plan-sheet-head b { font-size: 16px; font-weight: 800; }
.bt-plan-sheet-head span { font-size: 12.5px; color: var(--bt-muted); }
.bt-plan-sheet p { margin: 0 0 10px; font-size: 13.5px; color: var(--bt-muted); }
.bt-plan-sheet p:last-child { margin-bottom: 0; }
.bt-plan-sheet p em { font-style: normal; font-weight: 700; color: var(--bt-ink); }

.bt-plan-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-plan-act {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-ink);
    text-decoration: none;
    cursor: pointer;
}
.bt-plan-act.is-go { border-color: var(--bt-green); background: var(--bt-green); color: #fff; }

.bt-plan-rows { display: grid; gap: 10px; }
.bt-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bt-plan-row > span { font-size: 13.5px; font-weight: 700; }
.bt-plan-step { display: flex; align-items: center; gap: 5px; }
.bt-plan-step button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 10px;
    background: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    color: var(--bt-ink);
    cursor: pointer;
}
.bt-plan-step b { min-width: 28px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.bt-plan-seg { display: flex; gap: 6px; }
.bt-plan-seg button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 10px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bt-muted);
    cursor: pointer;
}
.bt-plan-seg button[aria-pressed="true"] {
    border-color: var(--bt-green);
    background: var(--bt-mint);
    color: var(--bt-green);
}

/* toast */
.bt-plan-toast {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 84px;
    z-index: 40;
    padding: 12px 15px;
    border-radius: 13px;
    background: var(--bt-ink);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.bt-plan-toast.is-on { opacity: 1; transform: none; }

@media (min-width: 768px) {
    .bt-plan-toast { left: auto; right: 24px; bottom: 24px; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
    .bt-plan-toast { transition: none; }
}

/* A way through to the plan from the tables list. */
.bt-con-jump {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--bt-green);
    background: var(--bt-mint);
    border-radius: 16px;
    text-decoration: none;
    color: var(--bt-ink);
}
.bt-con-jump > i:first-child { font-size: 17px; color: var(--bt-green); }
.bt-con-jump > i:last-child { color: var(--bt-green); font-size: 13px; }
.bt-con-jump span { flex: 1; display: grid; gap: 1px; }
.bt-con-jump strong { font-size: 14.5px; font-weight: 800; }
.bt-con-jump small { font-size: 12.5px; color: var(--bt-muted); }

/* On a desk the main column is wide, and a room 1.45 times as tall as it is
   wide would run off the bottom of any screen. Capped and centred: a plan is
   read whole, not scrolled through. */
@media (min-width: 768px) {
    .bt-plan-room { max-width: 460px; margin-left: auto; margin-right: auto; }
    .bt-plan-when,
    .bt-plan-waiting,
    .bt-plan-key,
    .bt-plan-sheet,
    .bt-plan-modes { max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* ---- the link a restaurant puts on its own website ---- */
.bt-con-link .bt-con-h2 i { color: var(--bt-green); margin-right: 5px; }
.bt-con-copy { display: flex; gap: 8px; margin-top: 10px; }
.bt-con-copy input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 12px;
    background: var(--bt-soft);
    font-size: 13px;
    font-weight: 600;
    color: var(--bt-ink);
}
.bt-con-copy button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--bt-green);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.bt-con-copy button.is-done { background: var(--bt-ink); }

/* Google's suggestion list has to sit above the card it drops out of. */
.bt-con-places { position: relative; }
.bt-con-places .pac-container { z-index: 60 !important; }

/* ---- the photo shelf ---- */
.bt-con-photos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 9px;
    margin: 0 0 16px;
    padding: 0;
}
.bt-con-photos li {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 13px;
    overflow: hidden;
    background: var(--bt-soft);
    border: 1px solid var(--bt-outline, #E4E8E4);
}
.bt-con-photos li.is-main { border-color: var(--bt-green); box-shadow: 0 0 0 2px var(--bt-mint); }
.bt-con-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bt-con-photo-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bt-green);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
}

.bt-con-photo-acts {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: flex;
    gap: 4px;
}
.bt-con-photo-acts button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    /* Over a photo, so it carries its own ground rather than relying on
       whatever happens to be behind it. */
    background: rgba(255, 255, 255, .93);
    color: var(--bt-ink);
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(20, 30, 22, .22);
}
.bt-con-photo-acts button.is-danger { color: #B4460F; }
.bt-con-photo-acts button:hover { background: #fff; }

.bt-con-hidden { display: none; }

/* Facility chips read as words rather than day abbreviations, so they size
   to their text instead of sitting on the day chips' fixed width. */
.bt-con-facilities span { min-width: 0; padding: 0 14px; }

/* ---- what a restaurant has ---- */
/* Wifi, beach side, fine dining. Collected for seventeen of the twenty-two
   restaurants and shown on no guest page until now. */
.bt-facilities {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 14px 0 0;
    padding: 0;
}
.bt-facilities li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--bt-outline, #E4E8E4);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bt-ink);
}
.bt-facilities i {
    font-size: 11px;
    color: var(--bt-green);
}

/* Facilities on a listing card: icons only, because the card is scanned
   rather than read. The name stays in the title and aria-label. */
.bt-card-facilities {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
    color: var(--bt-muted);
    font-size: 13px;
}
.bt-card-facilities i { color: var(--bt-green); }
.bt-card-facilities em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
}

/* ---- choosing what you have ---- */
/* A list rather than chips: each is a real choice with an icon beside it, and
   a row is an easier target on a phone than a wrapped pill. */
.bt-con-facility-list { list-style: none; margin: 0; padding: 0; }
.bt-con-facility-list li { border-bottom: 1px solid var(--bt-outline, #E4E8E4); }
.bt-con-facility-list li:last-child { border-bottom: 0; }
.bt-con-facility-list label {
    display: block;
    margin: 0;
    cursor: pointer;
}
.bt-con-facility-list input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.bt-con-facility {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 2px;
}
.bt-con-facility i:first-child {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--bt-soft);
    color: var(--bt-muted);
    font-size: 15px;
}
.bt-con-facility strong {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--bt-ink);
}
/* The tick sits at the end, drawn by the row rather than a checkbox. */
.bt-con-facility::after {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--bt-outline, #E4E8E4);
    border-radius: 50%;
}
.bt-con-facility-list input:checked + .bt-con-facility i:first-child {
    background: var(--bt-mint);
    color: var(--bt-green);
}
.bt-con-facility-list input:checked + .bt-con-facility::after {
    border-color: var(--bt-green);
    background: var(--bt-green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.bt-con-facility-list input:focus-visible + .bt-con-facility {
    outline: 2px solid var(--bt-green);
    outline-offset: 2px;
    border-radius: 12px;
}

/* ------------------------------------------------------------------ *
 * Put the console on a home screen
 *
 * Sits above the bottom bar on a phone, because that bar is fixed and
 * would otherwise cover it, and clear of the iPhone's home indicator.
 * ------------------------------------------------------------------ */
.bt-install {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    max-width: 480px;
    margin: 0 auto;
    padding: 14px 16px;
    background: var(--bt-paper, #fff);
    border: 1px solid var(--bt-line, #e7e9ee);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 20, 27, .16);
    animation: bt-install-in .22s ease-out both;
}

@keyframes bt-install-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bt-install { animation: none; }
}

.bt-install p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--bt-ink, #16181d);
}

.bt-install-do {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.bt-install-do button {
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.bt-install-yes {
    background: var(--bt-green, #4EB711);
    color: #fff;
}

.bt-install-yes:hover { filter: brightness(.95); }

.bt-install-no {
    background: transparent;
    border-color: var(--bt-line, #e7e9ee);
    color: var(--bt-muted, #6b7280);
}

.bt-install-no:hover { background: var(--bt-soft, #f6f7f9); }

/* On a desk the bottom bar becomes a side rail, so the card can sit lower. */
@media (min-width: 992px) {
    .bt-install {
        left: auto;
        right: 20px;
        bottom: 20px;
        margin: 0;
    }
}

/* ------------------------------------------------------------------ *
 * Stop sales
 * ------------------------------------------------------------------ */
.bt-stopsale-list { display: flex; flex-direction: column; gap: 8px; }

.bt-stopsale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--bt-line);
    border-radius: 12px;
    background: var(--bt-paper);
}

.bt-stopsale strong { display: block; font-size: 14.5px; font-weight: 700; }
.bt-stopsale small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--bt-muted); }

.bt-con-lift { margin: 0; flex: 0 0 auto; }

.bt-con-lift button {
    padding: 7px 14px;
    border: 1px solid var(--bt-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--bt-muted);
    cursor: pointer;
}

.bt-con-lift button:hover { background: var(--bt-soft); color: var(--bt-ink); }

.bt-con-optional { font-weight: 500; color: var(--bt-muted); }

/* ------------------------------------------------------------------ *
 * A date the restaurant has stopped selling
 *
 * Greyed, but not disabled: it is still clickable, because a date that
 * simply does not respond tells the reader nothing and the one thing
 * they want at that moment is why. The note below the grid says so.
 * ------------------------------------------------------------------ */
.bt-date-day.is-stopped {
    color: var(--bt-muted);
    opacity: .45;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.bt-date-day.is-stopped:hover {
    background: var(--bt-soft);
    opacity: .6;
}

.bt-date-note {
    margin: 8px 4px 0;
    padding-top: 8px;
    border-top: 1px solid var(--bt-line);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--bt-muted);
}


/* The dishes already on a booking, in the basket bar of the pre-order page.
   The bar counted them and never said which, so there was nothing to press
   to take one off. */
.bt-basket-items {
    border-bottom: 1px solid var(--bt-line);
    background: #fff;
    max-height: 30vh;
    overflow-y: auto;
}
.bt-basket-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
.bt-basket-item + .bt-basket-item { border-top: 1px solid var(--bt-line); }
.bt-basket-item-name {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--bt-ink);
}
.bt-basket-item-price {
    font-weight: 700;
    color: var(--bt-muted);
    font-variant-numeric: tabular-nums;
}
.bt-basket-item-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--bt-line);
    border-radius: 999px;
    padding: 4px 10px;
}
.bt-basket-item-qty a { color: var(--bt-green); line-height: 1; }
.bt-basket-item-qty a:hover { color: var(--bt-green-dark); }
.bt-basket-item-qty b { min-width: 1.2em; text-align: center; }

/* ================================================= town pages
   One page per town, which is the search most people actually make. Built
   from the same card as every other listing so a guest arriving from Google
   lands somewhere that looks like the rest of the site. */
.bt-town { padding: 40px 0 72px; }

.bt-town-head { max-width: 62ch; margin: 0 0 28px; }

.bt-town-head h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 5vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--bt-ink);
}

.bt-town-sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--bt-muted);
}

/* The cards bring their own Bootstrap columns; this only spaces the rows. */
.bt-town-grid { row-gap: 24px; }

.bt-town-pager { margin-top: 28px; }

.bt-town-empty { color: var(--bt-muted); margin: 0; }

.bt-town-others { margin-top: 56px; }

.bt-town-others h2 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--bt-ink);
}

.bt-town-others ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bt-town-others a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bt-mint, #F6FBF3);
    color: var(--bt-green-dark, #3A9A0C);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.bt-town-others a:hover,
.bt-town-others a:focus-visible {
    background: var(--bt-green, #4EB711);
    color: #fff;
}

/* The same row of towns on the home page, where it is how Google finds the
   town pages at all. */
.bt-home-towns { padding: 8px 0 48px; }
.bt-home-towns h2 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--bt-ink);
}
.bt-home-towns ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.bt-home-towns a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bt-mint, #F6FBF3);
    color: var(--bt-green-dark, #3A9A0C);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.bt-home-towns a:hover,
.bt-home-towns a:focus-visible {
    background: var(--bt-green, #4EB711);
    color: #fff;
}