/* Al Bait Al Shami – catering & reservation front-end */
.bsc, .bsc-res {
  --bsc-ink: #231A14;
  --bsc-ink-2: #4F4238;
  --bsc-muted: #6B5B4D;
  --bsc-cream: #F7F1E6;
  --bsc-sand: #EFE5D3;
  --bsc-line: #E4D8C4;
  --bsc-field: #FBF8F2;
  --bsc-border: #CDBFA9;
  --bsc-orange: #F05223;
  --bsc-orange-soft: #FFF4EE;
  --bsc-rust: #B5381A;
  --bsc-dark-2: #3A2D24;
  --bsc-green: #2F6B3A;
  color: var(--bsc-ink);
  font-size: 16px;
  line-height: 1.6;
}
.bsc *, .bsc-res * { box-sizing: border-box; }
.bsc button, .bsc input, .bsc select, .bsc textarea,
.bsc-res button, .bsc-res input, .bsc-res select, .bsc-res textarea { font-family: inherit; font-size: inherit; color: inherit; }
.bsc h2, .bsc h3 { margin: 0; line-height: 1.3; }

.bsc-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.bsc-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 24px; margin: 0; }
.bsc-summary {
  flex: 1 1 340px; min-width: 0; background: var(--bsc-ink); color: var(--bsc-cream);
  border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 1100px) { .bsc-summary { position: sticky; top: 24px; } }

.bsc-card { background: #fff; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 640px) { .bsc-card, .bsc-summary { padding: 22px; border-radius: 22px; } }

.bsc-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bsc-step-head h2 { font-family: var(--bs-display, Amiri, serif); font-size: 30px; flex: 1 1 auto; }
.bsc-step-head h2 small { font-family: var(--bs-body, inherit); font-size: 15px; color: var(--bsc-muted); font-weight: 500; }
.bsc-num { width: 40px; height: 40px; border-radius: 999px; background: var(--bsc-orange); color: var(--bsc-ink); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bsc-tag { background: var(--bsc-sand); border-radius: 999px; padding: 6px 16px; font-size: 15px; font-weight: 600; }
.bsc-sub { font-size: 20px; font-weight: 700; }
.bsc-hint { font-size: 13px; color: var(--bsc-muted); font-weight: 400; }
.bsc-strong { font-weight: 600; font-size: 14px; color: var(--bsc-green); }
.bsc-strong.is-fee { color: var(--bsc-rust); }
.bsc-note { margin: 0; font-size: 14px; color: var(--bsc-muted); }
.bsc-callout { margin: 0; background: var(--bsc-orange-soft); border-radius: 14px; padding: 14px 16px; font-size: 15px; }

/* fields */
.bsc-field, .bsc-res .bsc-field { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 15px; }
.bsc-field input, .bsc-field select, .bsc-field textarea {
  min-height: 52px; border: 1px solid var(--bsc-border); border-radius: 14px; padding: 0 16px; background: var(--bsc-field); font-weight: 400; width: 100%;
}
.bsc-field textarea { padding: 14px 16px; resize: vertical; }
.bsc-field input:focus, .bsc-field select:focus, .bsc-field textarea:focus { outline: 2px solid var(--bsc-orange); outline-offset: 1px; border-color: transparent; }
.bsc-field input[dir="ltr"] { text-align: start; }
.bsc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.bsc-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.bsc-wide { grid-column: 1 / -1; }
.bsc-hp { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* steppers */
.bsc-stepper { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.bsc-stepper output { min-width: 48px; text-align: center; font-size: 22px; font-weight: 700; }
.bsc-step { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--bsc-border); background: var(--bsc-field); font-size: 22px !important; cursor: pointer; line-height: 1; }
.bsc-step-wide { width: auto; padding: 0 10px; font-size: 15px !important; }
.bsc-step:hover { border-color: var(--bsc-ink); }

/* buttons */
.bsc-btn { border: 0; border-radius: 999px; padding: 14px 24px; font-weight: 700; cursor: pointer; min-height: 48px; }
.bsc-btn-dark { background: var(--bsc-ink); color: var(--bsc-cream) !important; }
.bsc-btn-accent { background: var(--bsc-orange); color: var(--bsc-ink) !important; }
.bsc-btn-outline { background: transparent; border: 1.5px solid var(--bsc-ink); }
.bsc-btn[disabled] { opacity: .6; cursor: wait; }

/* packages */
.bsc-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.bsc-pkg, .bsc-opt {
  position: relative; text-align: start; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px;
  border: 2px solid var(--bsc-line); background: #fff; cursor: pointer;
}
.bsc-pkg:hover, .bsc-opt:hover { border-color: var(--bsc-border); }
.bsc-pkg.is-on, .bsc-opt.is-on { border-color: var(--bsc-orange); background: var(--bsc-orange-soft); }
.bsc-pkg-name { font-family: var(--bs-display, Amiri, serif); font-size: 25px; font-weight: 700; line-height: 1.3; }
.bsc-pkg-price b { font-size: 30px; color: var(--bsc-rust); }
.bsc-pkg-meta { font-size: 14px; color: var(--bsc-muted); }
.bsc-badge { position: absolute; inset-inline-end: 14px; top: 14px; background: var(--bsc-orange); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }

/* dishes */
.bsc-sec { display: flex; flex-direction: column; gap: 14px; }
.bsc-sec + .bsc-sec { margin-top: 8px; }
.bsc-sec-head { display: flex; align-items: center; gap: 12px; }
.bsc-sec-head h3 { font-size: 20px; font-weight: 700; }
.bsc-sec-head span { flex: 1; height: 1px; background: var(--bsc-line); }
.bsc-sec-head small { color: var(--bsc-muted); font-size: 14px; }
.bsc-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bsc-dish {
  background: var(--bsc-field); border: 1px solid var(--bsc-line); border-radius: 18px; padding: 18px 16px; min-height: 76px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.bsc-dish-name { font-size: 17px; font-weight: 600; line-height: 1.4; }
.bsc-dish.is-choice { background: var(--bsc-orange-soft); border: 2px solid var(--bsc-orange); grid-column: span 2; justify-content: flex-start; transition: background .2s, border-color .2s; }
.bsc-dish.is-choice.is-done { background: #E9F5EA; border-color: #3E8E4A; }
.bsc-dish.is-done .bsc-dish-name { color: #1F5A2A; }
.bsc-dish.is-fixed { background: #E9F5EA; border: 2px solid #3E8E4A; }
.bsc-dish.is-fixed .bsc-dish-name { color: #1F5A2A; }
.bsc-tick { display: inline-flex; width: 22px; height: 22px; border-radius: 999px; background: #3E8E4A; color: #fff; font-style: normal; font-size: 13px; align-items: center; justify-content: center; margin-inline-end: 8px; vertical-align: 2px; }
.bsc-dish.is-flash { animation: bscFlash 1.2s ease; }
@keyframes bscFlash { 0%, 100% { box-shadow: none; } 30%, 70% { box-shadow: 0 0 0 5px rgba(240, 82, 35, .35); } }
.bsc-mini { display: flex; gap: 6px; flex-wrap: wrap; }
.bsc-mini button { flex: 0 1 auto; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid #BFB09B; background: #fff; cursor: pointer; font-size: 14px !important; }
.bsc-mini button.is-on { background: #3E8E4A; color: #fff; border-color: #3E8E4A; font-weight: 600; }
.bsc-mini button.is-taken { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.bsc-mini button small { font-size: 11px; text-decoration: none; }
.bsc-choose-note { margin: 0 0 4px; background: var(--bsc-orange-soft); border-radius: 12px; padding: 10px 14px; font-size: 15px; font-weight: 600; }
.bsc-choose-note.is-done { background: #E9F5EA; color: #1F5A2A; }
.bsc-opt .bsc-free { align-self: flex-start; }
.bsc-free { display: inline-block; background: #E9F5EA; color: #1F5A2A; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; vertical-align: middle; }

/* setup */
.bsc-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bsc-theme-img { height: 170px; border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 22px; background: var(--bsc-dark-2); }
.bsc-theme-img.has-img { padding: 0; }
.bsc-theme-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsc-theme-img i { display: block; width: 64px; height: 44px; border-radius: 40px 40px 6px 6px; background: #C9A04E; border: 2px solid #E9CF8F; }
.bsc-theme-img i:nth-child(2) { height: 54px; }
.bsc-theme-silver { background: #3A3B3E; }
.bsc-theme-silver i { background: #BFC3C8; border-color: #E6E8EB; }
.bsc-block { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--bsc-line); }
.bsc-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bsc-count { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.bsc-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--bsc-cream); border-radius: 14px; padding: 10px 16px; font-size: 14px; }
.bsc-suggest button { background: none; border: 0; color: var(--bsc-rust); font-weight: 700; cursor: pointer; min-height: 36px; padding: 0; }
.bsc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bsc-opt { padding: 12px; }
.bsc-opt-img { height: 120px; border-radius: 14px; overflow: hidden; background: #EADFCC; }
.bsc-opt-img.bsc-tall { height: 150px; }
.bsc-opt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsc-noimg { background-color: #EADFCC; background-image: radial-gradient(circle at 50% 50%, rgba(240,82,35,.18) 0 18px, transparent 19px); }
.bsc-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bsc-swatch { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; border: 2px solid var(--bsc-line); background: #fff; cursor: pointer; min-height: 48px; font-weight: 500; }
[dir="rtl"] .bsc-swatch { padding: 7px 8px 7px 16px; }
.bsc-swatch span { width: 30px; height: 30px; border-radius: 999px; border: 1px solid #BFB09B; }
.bsc-swatch.is-on { border-color: var(--bsc-orange); background: var(--bsc-orange-soft); font-weight: 700; }

/* location */
.bsc-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.bsc-pill { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid #BFB09B; background: #fff; cursor: pointer; font-weight: 500; }
.bsc-pill.is-on { background: var(--bsc-ink); color: var(--bsc-cream); border-color: var(--bsc-ink); font-weight: 600; }
.bsc-locate { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* waiters & pay */
.bsc-waiter { border: 1px solid var(--bsc-line); border-radius: 20px; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bsc-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bsc-payopt { min-height: 64px; border-radius: 18px; border: 2px solid var(--bsc-line); background: #fff; cursor: pointer; font-weight: 500; }
.bsc-payopt.is-on { border-color: var(--bsc-orange); background: var(--bsc-orange-soft); font-weight: 700; }

/* summary */
.bsc-summary h2 { font-family: var(--bs-display, Amiri, serif); font-size: 30px; }
.bsc-line { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.bsc-line span:first-child { color: #DCCFBE; }
.bsc-line span:last-child { text-align: end; }
.bsc-sumsec { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #4A3C31; padding-top: 14px; }
.bsc-sumsec b { color: var(--bsc-orange); font-size: 14px; }
.bsc-total { border-top: 1px solid #4A3C31; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; }
.bsc-total b { font-family: var(--bs-display, Amiri, serif); font-size: 38px; color: var(--bsc-orange); }
.bsc-light { color: #A39482; margin: 0; }
.bsc-center { text-align: center; }
.bsc-paynote { margin: 0; background: var(--bsc-dark-2); border-radius: 14px; padding: 12px 16px; font-size: 14px; color: #DCCFBE; }
.bsc-error { margin: 0; color: #FFB59C; font-weight: 600; font-size: 15px; }
.bsc-error:empty { display: none; }
.bsc-submit { min-height: 60px; font-size: 18px; }

/* mobile total bar */
.bsc-bar { display: none; }
@media (max-width: 979px) {
  .bsc-bar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--bsc-ink); color: var(--bsc-cream); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .bsc-bar small { display: block; color: #A39482; font-size: 12px; }
  .bsc-bar b { font-size: 20px; color: var(--bsc-orange); }
  .bsc { padding-bottom: 80px; }
}

/* done */
.bsc-done { max-width: 680px; margin: 0 auto; background: #fff; border-radius: 32px; padding: 44px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.bsc-done h2 { font-family: var(--bs-display, Amiri, serif); font-size: 40px; }
.bsc-done p { margin: 0; color: var(--bsc-ink-2); }
.bsc-done-icon { width: 84px; height: 84px; border-radius: 999px; background: var(--bsc-orange); color: var(--bsc-ink); display: flex; align-items: center; justify-content: center; }
.bsc-done-box { width: 100%; background: var(--bsc-cream); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; text-align: start; }
.bsc-done-box .bsc-line span:first-child { color: var(--bsc-muted); }
.bsc-empty { text-align: center; padding: 40px; }

/* reservation form */
.bsc-res { background: #fff; border-radius: 28px; padding: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
@media (max-width: 640px) { .bsc-res { grid-template-columns: 1fr; padding: 22px; } }
.bsc-res .bsc-stepper input { display: none; }
.bsc-msg { margin: 0; font-weight: 600; }
.bsc-msg:empty { display: none; }
.bsc-msg.is-ok { color: var(--bsc-green); background: #EAF4EC; padding: 12px 16px; border-radius: 14px; }
.bsc-msg.is-err { color: var(--bsc-rust); }
.bsc-res button[type="submit"] { min-height: 58px; font-size: 18px; }
.bsc-dish-wrap { display: flex; flex-direction: column; gap: 28px; }
.bsc-sec + .bsc-sec { margin-top: 0; }
@media (max-width: 640px) {
  .bsc-dish { padding: 14px 12px; min-height: 64px; }
  .bsc-dish-name { font-size: 15px; }
  .bsc-opt-img { height: 96px; }
  .bsc-opt-img.bsc-tall { height: 120px; }
  .bsc-theme-img { height: 120px; }
  .bsc-step-head h2 { font-size: 25px; }
}
/* Date/time fields render left-to-right (Chrome reverses Arabic placeholders otherwise) */
[dir="rtl"] .bsc-field input[type="date"], [dir="rtl"] .bsc-field input[type="time"],
.bsc-res[dir="rtl"] input[type="date"], .bsc-res input[type="date"], .bsc-res input[type="time"] { direction: ltr; text-align: right; }
/* availability */
.bsc-error { white-space: pre-line; }
#bsc-av-note { margin: 0; background: #FFF4EE; border: 1px dashed #F05223; }
#bsc-av-note.is-ready { background: #EAF4EC; border: 1px solid #BFDCC5; color: #2F6B3A; font-weight: 600; }
#bsc-av-note.is-flash { animation: bscFlash 1s ease 2; }
@keyframes bscFlash { 50% { background: #F05223; color: #fff; } }
.bsc-av { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; color: #2F6B3A; background: #EAF4EC; border-radius: 999px; padding: 2px 10px; }
.bsc-av.is-no { color: #B5381A; background: #FDE8E1; }
.bsc-opt.is-off, .bsc-swatch.is-off { opacity: .55; }
.bsc-opt.is-off.is-on { opacity: 1; border-color: #B5381A; background: #FDE8E1; }
.bsc-swatch small { font-size: 11px; color: #6B5B4D; font-weight: 600; }
.bsc-swatch.is-off small { color: #B5381A; }
.bsc-count.is-locked .bsc-step { opacity: .45; }
.bsc-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: #231A14; color: #F7F1E6; border-radius: 18px; padding: 16px 18px; }
.bsc-contact span { flex: 1 1 260px; font-weight: 600; }
.bsc-contact .bsc-btn-outline { border-color: #6B5B4D; color: #F7F1E6 !important; }
.bsc-btn-wa { background: #25D366; color: #fff !important; }
@media (prefers-reduced-motion: reduce) { #bsc-av-note.is-flash { animation: none; } }

.bsc-done-status { display: inline-block; background: #FFF4D6; color: #7A5300; border-radius: 999px; padding: 8px 18px; font-weight: 700; margin: 4px 0; }
.bsc-done .bsc-contact { justify-content: center; }

/* coupon */
.bsc-coupon { border-top: 1px solid rgba(247,241,230,.15); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bsc-coupon label { font-size: 14px; font-weight: 600; }
.bsc-coupon-row { display: flex; gap: 8px; }
.bsc-coupon-row input { flex: 1; min-width: 0; min-height: 46px; border-radius: 12px; border: 1px solid #6B5B4D; background: #3A2D24; color: var(--bsc-cream); padding: 0 12px; text-transform: uppercase; letter-spacing: .5px; }
.bsc-coupon-row .bsc-btn { min-height: 46px; padding: 0 18px; }
.bsc-btn-light { background: var(--bsc-cream); color: var(--bsc-ink) !important; }
.bsc-coupon.is-on .bsc-line span:last-child { color: #8FD19A; font-weight: 700; white-space: nowrap; }
.bsc-coupon-msg { margin: 0; font-size: 13px; color: #FFB199; }
.bsc-linkbtn { background: none; border: 0; padding: 0; color: #FFB199; text-decoration: underline; cursor: pointer; font-size: 13px !important; align-self: flex-start; }

/* reservation: section choice + notice */
.bsc-res .bsc-areas, .bsc-areas { border: 0; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.bsc-areas legend { width: 100%; margin-bottom: 6px; font-weight: 600; }
.bsc-area { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--bsc-border); border-radius: 14px; background: var(--bsc-field); cursor: pointer; font-weight: 500; }
.bsc-area input { accent-color: var(--bsc-orange); width: 18px; height: 18px; margin: 0; }
.bsc-area:has(input:checked) { border-color: var(--bsc-orange); background: var(--bsc-orange-soft); font-weight: 700; }
.bsc-res-note { margin: 0; background: #FFF4D6; color: #6B4A00; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.7; }

/* remember my details */
.bsc-remember { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 8px; }
.bsc-remember label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.bsc-remember input { width: 18px; height: 18px; accent-color: var(--bsc-orange); margin: 0; }
.bsc-remember .bsc-linkbtn { color: var(--bsc-rust); }
.bsc-remember [hidden] { display: none; }

.bsc-res .bsc-dining.is-need, .bsc-res .bsc-party.is-need { outline: 2px solid #d63638; outline-offset: 4px; border-radius: 12px; }
.bsc-res-grace { margin: 0; background: #231A14; color: #FFD27A; border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 15px; line-height: 1.6; }

.bsc-res-off { background: #FFF4D6; color: #6B4A00; border-radius: 14px; padding: 16px 18px; font-weight: 700; margin: 0; }
.bsc-res-occ { display: flex; flex-direction: column; gap: 10px; }
.bsc-occ-card { background: #231A14; color: #F7F1E6; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.bsc-occ-name { font-size: 18px; color: #FFD27A; }
.bsc-occ-price { align-self: flex-start; background: #F05223; color: #231A14; font-weight: 700; border-radius: 999px; padding: 3px 12px; }
.bsc-occ-card p { margin: 0; line-height: 1.7; }
.bsc-occ-menu { background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; }
.bsc-occ-menu b { color: #FFD27A; }
.bsc-occ-closed { margin: 0; background: #F3E3E3; color: #8E1F1F; border-radius: 12px; padding: 12px 14px; font-weight: 700; }
.bsc-res .bsc-area.is-full { opacity: .5; }
.bsc-res .bsc-left { display: block; font-size: 12px; color: #8E1F1F; font-weight: 600; margin-inline-start: auto; }

.bsc-occ-q { font-weight: 700; color: #FFD27A; margin-top: 6px; }
.bsc-sittings { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bsc-sit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; background: rgba(255,255,255,.08); color: #F7F1E6; border: 2px solid rgba(255,255,255,.2); border-radius: 14px; padding: 12px 14px; cursor: pointer; font: inherit; }
.bsc-sit b { font-size: 17px; } .bsc-sit small { font-size: 13px; opacity: .85; } .bsc-sit em { font-style: normal; font-weight: 700; color: #FFB199; font-size: 14px; }
.bsc-sit.is-on { background: #3E8E4A; border-color: #3E8E4A; color: #fff; } .bsc-sit.is-on em { color: #fff; }
.bsc-res .bsc-field[hidden], .bsc-res fieldset[hidden] { display: none; }

.bsc-occ-menu ul { list-style: none; margin: 6px 0 0; padding: 0; columns: 2; column-gap: 18px; }
.bsc-occ-menu li { padding: 2px 0; break-inside: avoid; }
.bsc-occ-menu li::before { content: '★ '; color: #F05223; }
@media (max-width: 520px) { .bsc-occ-menu ul { columns: 1; } }
.bsc-occ-note { margin: 0; color: #FFD27A; font-weight: 600; }
.bsc-occ-total { margin: 0; background: #F05223; color: #231A14; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.bsc-occ-total b { font-size: 17px; } .bsc-occ-total small { font-size: 13px; }
.bsc-res .bsc-area[hidden] { display: none; }

.bsc-res-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.bsc-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; background: #fff; border: 2px solid var(--bsc-border, #E4D8C4); border-radius: 16px; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; }
.bsc-mode b { font-size: 16px; } .bsc-mode small { font-size: 13px; opacity: .8; } .bsc-mode em { font-style: normal; font-weight: 700; color: #B5381A; font-size: 13px; }
.bsc-mode.is-event { background: #231A14; color: #F7F1E6; border-color: #231A14; } .bsc-mode.is-event em { color: #FFB199; }
.bsc-mode.is-on { border-color: #3E8E4A; box-shadow: 0 0 0 3px rgba(62,142,74,.25); }
.bsc-mode.is-event.is-on { background: #3E8E4A; border-color: #3E8E4A; } .bsc-mode.is-event.is-on em { color: #fff; }
.bsc-mode[disabled] { opacity: .5; cursor: not-allowed; }
.bsc-occ-when { color: #FFD27A !important; font-weight: 700; font-size: 16px; }
.bsc-res-modes[hidden] { display: none; }

/* reservation form: numbered sections */
.bsc-res { counter-reset: bscres; }
.bsc-res-sec { display: flex; flex-direction: column; gap: 14px; }
.bsc-res-sec[hidden], .bsc-res-h[hidden] { display: none; }
.bsc-res-h { counter-increment: bscres; display: flex; align-items: center; gap: 12px; margin: 10px 0 -4px; font-size: 20px; font-weight: 800; color: var(--bsc-ink); padding-bottom: 10px; border-bottom: 1px solid var(--bsc-line); }
.bsc-res > .bsc-res-h:first-child, .bsc-res-sec .bsc-res-h { margin-top: 0; }
.bsc-res-h::before { content: counter(bscres); width: 34px; height: 34px; border-radius: 999px; background: var(--bsc-orange); color: #fff; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bsc-res-info { display: flex; flex-direction: column; gap: 10px; }
.bsc-occ-pay { display: block; margin-top: -4px; font-size: 13px; opacity: .75; }
.bsc-res .bsc-msg.is-ok { font-size: 16px; padding: 16px; }
@media (max-width: 640px) { .bsc-res-h { font-size: 18px; } }

/* Ramadan / overlapping occasions */
.bsc-mode.is-season { background: #1F3A2C; color: #F7F1E6; border-color: #1F3A2C; }
.bsc-mode.is-season small { opacity: .85; }
.bsc-mode.is-season em, .bsc-mode.is-event[disabled] em { color: #FFD27A; }
.bsc-mode.is-season.is-on { background: #3E8E4A; border-color: #3E8E4A; }
.bsc-sit[disabled] { opacity: .55; cursor: not-allowed; }
.bsc-sit em { display: block; line-height: 1.5; }
.bsc-sit small { margin-bottom: 2px; }
.bsc-occ-mix { background: rgba(255, 210, 122, .14); border-radius: 10px; padding: 8px 12px; color: #FFD27A; font-weight: 600; }
.bsc-occ-card > .bsc-occ-pay { margin-top: 0; }
.bsc-occ-menu.is-long ul { columns: 3; }
@media (max-width: 760px) { .bsc-occ-menu.is-long ul { columns: 2; } }
@media (max-width: 420px) { .bsc-occ-menu.is-long ul, .bsc-occ-menu ul { columns: 1; } }
.bsc-occ-sit1 { margin: 0; font-size: 16px; }