/* ---- Front-end calendar ---- */
.rbm-app, .rbm-app *, .rbm-app *::before, .rbm-app *::after,
.rbm-modal, .rbm-modal *, .rbm-modal *::before, .rbm-modal *::after { box-sizing: border-box; }
.rbm-app {
    /* Fills the page's own column, so it lines up with the text above and below it.
       (Before 1.31.1 it stretched to the full screen width, which was wider than the page and
       could add a little sideways scroll.) */
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: inherit;
}


.rbm-view-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rbm-view-btn { background: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
.rbm-view-btn.rbm-view-active { background: #2271b1; color: #fff; border-color: #2271b1; }

.rbm-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.rbm-calendar-header h3 { margin: 0; font-size: 16px; text-align: center; flex: 1; }
.rbm-calendar-header .rbm-period-label { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; text-align: center; flex: 1; }
.rbm-nav { background: none; border: 1px solid #ccc; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 16px; flex-shrink: 0; }

.rbm-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.rbm-legend-item { display: flex; align-items: center; gap: 6px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 20px; padding: 4px 12px 4px 8px; cursor: pointer; color: #777; font-size: 12px; opacity: .6; font-family: inherit; }
.rbm-legend-item.rbm-legend-active { background: #fff; border-color: #999; color: #222; opacity: 1; font-weight: 600; }
.rbm-legend-all.rbm-legend-active { background: #2271b1; border-color: #2271b1; color: #fff; }
.rbm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #2271b1; flex-shrink: 0; }

.rbm-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; }
.rbm-day-name { text-align: center; font-weight: 600; font-size: 12px; padding: 4px 0; color: #666; }
.rbm-day { min-height: 90px; min-width: 0; border: 1px solid #e2e2e2; border-radius: 6px; padding: 4px 5px; font-size: 12px; cursor: pointer; background: #fff; position: relative; overflow: hidden; }
.rbm-day.rbm-empty { background: transparent; border: none; cursor: default; }
.rbm-day.rbm-past { color: #bbb; cursor: default; background: #fafafa; }
.rbm-day.rbm-closed { color: #bbb; cursor: default; background: #fafafa; text-decoration: line-through; }
.rbm-day.rbm-available:hover { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.rbm-day-number { font-weight: 600; }
.rbm-day-tag { display: block; font-size: 10px; margin-top: 4px; }

.rbm-day-blocks { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rbm-day-block { color: #fff; font-size: 10px; line-height: 1.3; padding: 1px 4px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rbm-day-block-more { font-size: 10px; color: #666; padding: 1px 4px; }

/* Week view: horizontally scrollable below its natural width so day columns
   never get squeezed unreadably narrow - they stay at a legible minimum and
   the view scrolls sideways instead, same pattern most calendar apps use. */
.rbm-week-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rbm-week-inner { display: grid; grid-template-columns: 40px repeat(7, minmax(72px, 1fr)); gap: 2px; min-width: 620px; }
.rbm-week-axis { position: relative; }
.rbm-week-axis-header { height: 44px; }
.rbm-week-axis-body { position: relative; height: 480px; }
.rbm-week-hour-label { position: absolute; right: 4px; transform: translateY(-50%); font-size: 10px; color: #888; white-space: nowrap; }
.rbm-week-day-col { border: 1px solid #e2e2e2; border-radius: 4px; background: #fff; cursor: pointer; min-width: 0; }
.rbm-week-day-col.rbm-past, .rbm-week-day-col.rbm-closed { background: #fafafa; cursor: default; color: #bbb; }
.rbm-week-day-header { height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border-bottom: 1px solid #eee; text-align: center; line-height: 1.2; }
.rbm-week-day-header.rbm-week-today { color: #2271b1; }
.rbm-week-day-body { position: relative; height: 480px; }
.rbm-week-block { position: absolute; left: 2px; right: 2px; color: #fff; font-size: 10px; line-height: 1.2; padding: 2px 4px; border-radius: 3px; overflow: hidden; }
.rbm-week-closed-label { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-size: 11px; color: #bbb; }

.rbm-booking-options { margin-top: 16px; padding: 14px 16px; background: #f6f7f7; border: 1px solid #e2e2e2; border-radius: 6px; font-size: 14px; }
.rbm-booking-options p { margin: 0 0 6px; }
.rbm-booking-options-lead { font-weight: 600; }
.rbm-booking-options-or { color: #555; font-size: 13px; }
.rbm-booking-options-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rbm-option-btn { background: #fff; color: #2271b1; border: 1px solid #2271b1; border-radius: 4px; padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; }
.rbm-option-btn:hover { background: #2271b1; color: #fff; }

/* Day view: same lane-grid machinery as Week, but one wide column. */
.rbm-day-inner { grid-template-columns: 40px minmax(0, 1fr) !important; min-width: 0 !important; }
.rbm-day-view-body { cursor: pointer; }

/* List view */
.rbm-list-view { border: 1px solid #e2e2e2; border-radius: 6px; overflow: hidden; }
.rbm-list-day { display: flex; border-bottom: 1px solid #eee; }
.rbm-list-day:last-child { border-bottom: none; }
.rbm-list-date { flex: 0 0 130px; padding: 10px 12px; background: #f8f8f8; font-weight: 600; font-size: 13px; cursor: pointer; }
.rbm-list-date:hover { background: #eef4fa; color: #2271b1; }
.rbm-list-items { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.rbm-list-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* The popup is moved to <body> by the script, so it sits above the theme's
   header, footer and the WordPress admin bar (z-index 99999). The dark
   overlay itself scrolls, so the mouse wheel or a finger works anywhere on
   screen, and the page behind is locked while it's open. */
.rbm-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; z-index: 100000; padding: 32px 16px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; font-family: inherit; }
.rbm-modal-inner { background: #fff; border-radius: 8px; padding: 24px; max-width: 520px; width: 100%; margin: auto; position: relative; color: #1d2327; }
.rbm-modal-inner h3 { margin-top: 0; padding-right: 36px; }
.rbm-modal-inner #rbm-modal-title { margin: 0 0 26px; padding-right: 36px; font-size: var(--wp--preset--font-size--x-large, 1.5rem); font-weight: 800; }
.rbm-modal-close { position: absolute; top: 10px; right: 12px; background: #f0f0f0; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 20px; cursor: pointer; line-height: 32px; text-align: center; padding: 0; }
.rbm-modal-close:hover { background: #ddd; }
html.rbm-modal-open, html.rbm-modal-open body { overflow: hidden; }

.rbm-room-block { border: 1px solid #e2e2e2; border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.rbm-room-block h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.rbm-booked-list { list-style: none; margin: 0 0 10px; padding: 0; font-size: 12px; color: #8a1c1c; }
.rbm-booked-list li { padding: 2px 0; }
.rbm-no-bookings { font-size: 12px; color: #4caf50; margin: 0 0 10px; }
.rbm-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rbm-slot-btn { border: 1px solid #ccc; background: #f7f7f7; border-radius: 4px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.rbm-slot-btn.rbm-selected { background: #2271b1; color: #fff; border-color: #2271b1; }
.rbm-slot-btn.rbm-busy { background: #f1c9c9; color: #888; cursor: not-allowed; text-decoration: line-through; }

.rbm-form-note { font-size: 12px; color: #555; background: #f6f7f7; border-radius: 4px; padding: 8px 10px; margin: 8px 0 14px; }
.rbm-cost-box { margin: 10px 0; }
.rbm-cost-estimate { font-size: 14px; margin: 0 0 2px; }
.rbm-cost-note { font-size: 13px; color: #555; margin: 0; font-style: italic; }
.rbm-field-hint { font-size: 11px; color: #777; margin: 0 0 4px; }
.rbm-form-row { margin-bottom: 10px; }
/* Spam trap: kept off screen rather than display:none, which some bots know to skip. */
.rbm-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.rbm-form-row label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.rbm-form-row input[type=text], .rbm-form-row input[type=email], .rbm-form-row textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.rbm-checkbox-row label { display: flex; align-items: flex-start; gap: 8px; font-weight: normal; font-size: 13px; }
.rbm-checkbox-row input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
.rbm-submit-btn { background: #2271b1; color: #fff; border: none; border-radius: 4px; padding: 10px 18px; cursor: pointer; font-size: 14px; }
.rbm-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
.rbm-privacy-note { font-size: 11px; color: #777; margin-top: 8px; }
.rbm-msg { padding: 10px; border-radius: 4px; margin-top: 10px; font-size: 13px; }
.rbm-msg-success { background: #e7f6e7; border: 1px solid #4caf50; }
.rbm-msg-error { background: #fbeaea; border: 1px solid #b32d2e; }

/* ---- Slot picking ---- */
.rbm-pick-instructions { font-size: 13px; background: #eef4fa; border-radius: 4px; padding: 8px 10px; margin: 0 0 12px; }
.rbm-selection-label { font-size: 13px; color: #333; margin: 6px 0 0; }
.rbm-selection-warning { color: #b32d2e; font-size: 12px; }

/* ---- Bold "what you're booking" card ---- */
.rbm-summary-card { border: 2px solid #1d2327; border-left-width: 8px; border-radius: 8px; background: #fff; padding: 14px 16px; margin: 16px 0; }
.rbm-summary-heading { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #666; font-weight: 700; margin-bottom: 4px; }
.rbm-summary-room { font-size: 22px; font-weight: 800; line-height: 1.2; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rbm-summary-room .rbm-dot { width: 14px; height: 14px; }
.rbm-summary-when { font-size: 16px; font-weight: 700; }
.rbm-summary-time { font-size: 20px; font-weight: 800; margin-top: 2px; }
.rbm-summary-cost { display: flex; flex-direction: column; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e2e2e2; }
.rbm-summary-cost-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #666; font-weight: 700; }
.rbm-summary-cost-value { font-size: 28px; font-weight: 800; line-height: 1.15; }
.rbm-summary-cost-tbc { font-size: 18px; }
.rbm-summary-cost-rate { font-size: 13px; color: #555; }
.rbm-summary-note { font-size: 12px; color: #555; margin: 8px 0 0; }

/* ---- Charity fields ---- */
.rbm-charity-toggle label { font-weight: 600; }
.rbm-charity-fields { border-left: 3px solid #2271b1; padding: 8px 0 2px 12px; margin: -4px 0 12px; }
.rbm-form-row select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font-family: inherit; font-size: 14px; }

/* ---- Submit buttons ---- */
.rbm-submit-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rbm-quote-btn { background: #fff; color: #2271b1; border: 1px solid #2271b1; border-radius: 4px; padding: 10px 18px; cursor: pointer; font-size: 14px; font-family: inherit; }
.rbm-quote-btn:hover { background: #eef4fa; }
.rbm-quote-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---- Unconfirmed (requested / quoted) bookings: striped ---- */
.rbm-status-key { font-size: 12px; color: #555; margin: 2px 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rbm-key-swatch { display: inline-block; width: 26px; height: 12px; border-radius: 3px; background-color: #2271b1; vertical-align: middle; }
.rbm-pending { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
.rbm-day-block.rbm-pending, .rbm-week-block.rbm-pending { outline: 1px dashed rgba(0,0,0,.45); outline-offset: -1px; color: #1d2327; text-shadow: 0 0 3px #fff, 0 0 3px #fff; font-weight: 600; }
.rbm-dot.rbm-pending, .rbm-mc-dot.rbm-pending { box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.rbm-slot-btn.rbm-busy-pending { background: repeating-linear-gradient(135deg, #f7e3b0 0 4px, #fff 4px 8px); color: #8a6100; }
.rbm-pending-text { color: #8a6100; font-style: italic; }

/* ---- Overnight popup ---- */
.rbm-ov-step { border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.rbm-ov-step-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rbm-ov-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #2271b1; color: #fff; font-size: 12px; }
.rbm-ov-room { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; cursor: pointer; }
.rbm-ov-whole { border-bottom: 1px solid #eee; margin-bottom: 4px; padding-bottom: 8px; }
.rbm-ov-rooms { padding-left: 4px; }
.rbm-ov-disabled { font-size: 13px; color: #999; margin: 0; font-style: italic; }
.rbm-ov-datebtn { width: 100%; text-align: left; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 10px 12px; font-size: 15px; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.rbm-ov-datebtn-set { border-color: #2271b1; font-weight: 700; }
.rbm-ov-caret { margin-left: auto; font-size: 11px; color: #666; }
.rbm-ov-cal:empty, .rbm-ov-times:empty { display: none; }
.rbm-ov-cal { border: 1px solid #ddd; border-radius: 6px; padding: 10px; margin-top: 6px; background: #fafafa; }
.rbm-ov-times { margin-top: 10px; }
.rbm-ov-times-label { font-weight: 600; font-size: 13px; margin: 8px 0 6px; }
.rbm-ov-booked { font-size: 13px; background: #fff8e5; border-radius: 4px; padding: 8px 10px; }
.rbm-ov-booked ul { margin: 4px 0 0; padding: 0; list-style: none; }
.rbm-ov-booked li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }

.rbm-mc-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 6px; }
.rbm-mc-nav { background: #fff; border: 1px solid #ccc; border-radius: 4px; width: 32px; height: 28px; cursor: pointer; font-size: 18px; line-height: 1; }
.rbm-mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.rbm-mc-dow { text-align: center; font-size: 11px; color: #777; font-weight: 600; padding: 2px 0; }
.rbm-mc-day { background: #fff; border: 1px solid #e2e2e2; border-radius: 4px; min-height: 40px; padding: 3px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; font-family: inherit; font-size: 13px; }
.rbm-mc-day:hover:not([disabled]) { border-color: #2271b1; }
.rbm-mc-day[disabled] { background: #f0f0f0; color: #bbb; cursor: not-allowed; }
.rbm-mc-busy { background: #fffaf0; }
.rbm-mc-selected { background: #2271b1 !important; color: #fff; border-color: #2271b1; font-weight: 700; }
.rbm-mc-arrival { box-shadow: inset 0 0 0 2px #2271b1; }
.rbm-mc-between { background: #e3eefa; }
.rbm-mc-dots { display: flex; gap: 2px; margin-top: 3px; min-height: 7px; }
.rbm-mc-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rbm-mc-key { font-size: 11px; color: #666; margin: 8px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.rbm-ov-people { background: #f6f7f7; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.rbm-ov-people-lead { font-size: 13px; margin: 0 0 8px; }
.rbm-ov-people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rbm-ov-people-grid .rbm-form-row { margin-bottom: 0; }
.rbm-form-row input[type=number] { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
.rbm-summary-room-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.rbm-summary-room-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; background: #f0f0f0; border-radius: 12px; padding: 2px 10px 2px 6px; }
.rbm-summary-when-label { display: inline-block; min-width: 52px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #666; }

/* ---- Long Term popup ---- */
.rbm-rg-weeknav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rbm-rg-weeklabel { font-weight: 700; font-size: 14px; text-align: center; flex: 1; }
.rbm-rg-weeknav .rbm-mc-nav[disabled] { opacity: .35; cursor: not-allowed; }
.rbm-rg-thisweek-wrap { text-align: center; margin: 0 0 6px; }
.rbm-rg-thisweek { background: none; border: none; color: #2271b1; text-decoration: underline; cursor: pointer; font-size: 13px; font-family: inherit; }
.rbm-rg-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 6px 0 10px; }
.rbm-rg-day { background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 6px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: inherit; }
.rbm-rg-day:hover:not([disabled]) { border-color: #2271b1; }
.rbm-rg-day[disabled] { background: #f0f0f0; color: #bbb; cursor: not-allowed; }
.rbm-rg-day-on { background: #2271b1; border-color: #2271b1; color: #fff; }
.rbm-rg-dow { font-size: 11px; font-weight: 600; }
.rbm-rg-dnum { font-size: 16px; font-weight: 800; }
.rbm-rg-daypanel { border: 1px solid #e2e2e2; border-left: 4px solid #2271b1; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.rbm-rg-daypanel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rbm-rg-remove { background: none; border: none; color: #b32d2e; cursor: pointer; font-size: 12px; text-decoration: underline; font-family: inherit; }
.rbm-rg-daypanel .rbm-ov-booked { margin-bottom: 8px; }
.rbm-summary-cost-per { font-size: 14px; font-weight: 600; color: #555; }
.rbm-summary-cost-total { font-size: 14px; margin-top: 4px; }

/* ---- Insurance reminder ---- */
.rbm-insurance-note { font-size: 13px; background: #fff8e5; border-left: 3px solid #dba617; border-radius: 4px; padding: 8px 10px; margin: 4px 0 12px; }

/* ---- Back-to-back warning (inside the summary card) ---- */
.rbm-b2b-warning { margin-top: 10px; background: #fff8e5; border-left: 4px solid #dba617; border-radius: 4px; padding: 8px 10px; font-size: 13px; }
.rbm-b2b-warning strong { display: block; margin-bottom: 2px; }

/* ---- "Until" mini calendar ---- */
.rbm-mc-session { background: #e3eefa; color: #135e96; font-weight: 700; }
.rbm-until-foot { margin-top: 8px; text-align: center; }
.rbm-until-ongoing { background: #fff; border: 1px solid #2271b1; color: #2271b1; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-family: inherit; }
.rbm-until-ongoing:hover { background: #eef4fa; }

/* ---- Whole-period availability check (regular card) ---- */
.rbm-clash-check { margin-top: 10px; font-size: 13px; color: #555; font-style: italic; }
.rbm-clash-ok { margin-top: 10px; font-size: 13px; color: #1e6b1e; background: #e7f6e7; border-radius: 4px; padding: 6px 10px; }
.rbm-clash-warning { margin-top: 10px; background: #fcf0f1; border-left: 4px solid #b32d2e; border-radius: 4px; padding: 8px 10px; font-size: 13px; }
.rbm-clash-warning strong { display: block; color: #8a1c1c; margin-bottom: 4px; }
.rbm-clash-warning ul { margin: 0 0 6px; padding-left: 18px; }
.rbm-clash-warning li { margin: 1px 0; }
.rbm-clash-warning p { margin: 4px 0 0; }
.rbm-clash-more { font-style: italic; }

/* ================= Admin: Add Booking availability ================= */
.rbm-ab-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rbm-ab-side { position: sticky; top: 40px; }
.rbm-ab-calpanel { background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; padding: 12px 14px; }
.rbm-ab-calpanel h2 { margin: 0 0 4px; }
.rbm-adm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0; }
.rbm-adm-head strong { font-size: 14px; min-width: 130px; text-align: center; flex: 1 1 auto; }
.rbm-adm-today { margin-left: auto !important; }
.rbm-adm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.rbm-adm-dow { text-align: center; font-size: 11px; font-weight: 600; color: #646970; padding: 2px 0; }
.rbm-adm-day { min-height: 78px; min-width: 0; text-align: left; background: #fff; border: 1px solid #dcdcde; border-radius: 3px; padding: 3px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; font-family: inherit; }
.rbm-adm-day:hover { border-color: #2271b1; }
.rbm-adm-past { background: #f6f7f7; }
.rbm-adm-today-cell .rbm-adm-num { color: #2271b1; }
.rbm-adm-chosen { box-shadow: inset 0 0 0 2px #2271b1; background: #f0f6fc; }
.rbm-adm-range { background: #e3eefa; }
.rbm-adm-until { box-shadow: inset 0 0 0 2px #00a32a; }
.rbm-adm-open { outline: 2px solid #dba617; outline-offset: -2px; }
.rbm-adm-num { font-weight: 700; font-size: 12px; }
.rbm-adm-entry { display: block; font-size: 10px; line-height: 1.3; color: #fff; border-radius: 2px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbm-adm-entry.rbm-pending, .rbm-adm-3d-block.rbm-pending { color: #1d2327; text-shadow: 0 0 2px #fff, 0 0 2px #fff; font-style: italic; outline: 1px dashed rgba(0,0,0,.45); outline-offset: -1px; }
.rbm-adm-more { font-size: 10px; color: #646970; }
.rbm-adm-key { font-size: 12px; color: #646970; margin: 8px 0 0; }
.rbm-adm-swatch { display: inline-block; width: 22px; height: 10px; background-color: #8c8f94; border-radius: 2px; vertical-align: middle; }
.rbm-adm-daypanel { margin-top: 12px; border-top: 1px solid #dcdcde; padding-top: 8px; }
.rbm-adm-daypanel h3 { margin: 4px 0 8px; }
.rbm-adm-daytable td { vertical-align: top; }
.rbm-adm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.rbm-adm-use { margin-top: 10px; }
.rbm-ab-check { margin: 12px 0 0; }
.rbm-ab-check:empty { display: none; }
.rbm-ab-check-ok { background: #edfaef; border-left: 4px solid #00a32a; padding: 4px 12px; }
.rbm-ab-check-warn { background: #fcf9e8; border-left: 4px solid #dba617; padding: 4px 12px; }
.rbm-ab-check ul { margin: 4px 0 4px 18px; list-style: disc; }
@media (max-width: 1280px) {
    .rbm-ab-layout { grid-template-columns: minmax(0, 1fr); }
    .rbm-ab-side { position: static; }
}

/* Admin calendar: header, view switch, room key */
.rbm-adm-panelhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rbm-adm-viewswitch .button { border-radius: 0; }
.rbm-adm-viewswitch .button:first-child { border-radius: 3px 0 0 3px; }
.rbm-adm-viewswitch .button:last-child { border-radius: 0 3px 3px 0; margin-left: -1px; }
.rbm-adm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin: 6px 0 2px; }
.rbm-adm-legend-item { display: inline-flex; align-items: center; gap: 4px; }

/* Admin calendar: 3-day view with a lane per room */
.rbm-adm-3d { display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); gap: 0 4px; }
.rbm-adm-3d-date { font-family: inherit; font-weight: 700; font-size: 12px; padding: 6px 2px; background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 3px 3px 0 0; cursor: pointer; }
.rbm-adm-3d-date:hover { border-color: #2271b1; }
.rbm-adm-3d-centre { background: #f0f6fc; }
.rbm-adm-3d-lanes { display: flex; height: 5px; }
.rbm-adm-3d-lanes span { flex: 1; }
.rbm-adm-3d-axis { position: relative; height: var(--rbm-3d-h); }
.rbm-adm-3d-axis span { position: absolute; right: 4px; transform: translateY(-50%); font-size: 10px; color: #646970; }
.rbm-adm-3d-col { position: relative; height: var(--rbm-3d-h); border: 1px solid #dcdcde; border-top: none; background: repeating-linear-gradient(to bottom, transparent 0 44px, #f0f0f1 44px 45px); }
.rbm-adm-3d-col.rbm-adm-past { background-color: #f6f7f7; }
.rbm-adm-3d-lanebg { position: absolute; top: 0; bottom: 0; border-right: 1px dotted #dcdcde; }
.rbm-adm-3d-block { position: absolute; color: #fff; font-size: 10px; line-height: 1.25; padding: 2px 3px; border-radius: 3px; overflow: hidden; word-break: break-word; }
.rbm-adm-3d-block strong { display: block; }
.rbm-adm-3d-mine { position: absolute; border: 2px dashed #1d2327; background: rgba(255,255,255,.55); border-radius: 3px; font-size: 10px; font-weight: 700; text-align: center; color: #1d2327; }

/* Admin: slot-button time picker */
.rbm-adm-slot-label { font-weight: 600; margin: 8px 0 4px; }
.rbm-adm-slots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 640px; }
.rbm-adm-slot { font-family: inherit; font-size: 12px; min-width: 52px; padding: 4px 6px; border: 1px solid #c3c4c7; background: #fff; border-radius: 3px; cursor: pointer; }
.rbm-adm-slot:hover:not([disabled]) { border-color: #2271b1; }
.rbm-adm-slot-on { background: #2271b1; border-color: #2271b1; color: #fff; }
.rbm-adm-slot-busy { background: #f0f0f1; color: #a7aaad; text-decoration: line-through; cursor: not-allowed; }
.rbm-adm-slot-pending { background: repeating-linear-gradient(135deg, #f7e3b0 0 4px, #fff 4px 8px); color: #8a6100; }
.rbm-adm-slot-status { margin: 6px 0 0; }
#rbm-ab-manual { margin: 6px 0; }

/* ================= Admin: Long Term hirer filter ================= */
.rbm-hirer-filter { background: #fff; border: 1px solid #c3c4c7; border-left: 4px solid #2271b1; padding: 10px 12px; margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rbm-hirer-filter select { min-width: 320px; max-width: 100%; }
.rbm-hirer-summary { background: #f0f6fc; border: 1px solid #c5d9ed; padding: 8px 12px; margin: 0 0 12px; line-height: 1.7; }

/* ================= Admin: Requests page ================= */
.rbm-requests h2 { margin-top: 26px; }
.rbm-req-count { display: inline-block; min-width: 20px; padding: 0 7px; border-radius: 10px; background: #dcdcde; font-size: 12px; text-align: center; vertical-align: middle; }
.rbm-req-empty { color: #646970; font-style: italic; }
.rbm-req-card { background: #fff; border: 1px solid #c3c4c7; border-left: 5px solid #2271b1; border-radius: 4px; margin: 10px 0; }
.rbm-req-card.rbm-req-ov { border-left-color: #6f42c1; }
.rbm-req-card.rbm-req-lt { border-left-color: #00a32a; }
.rbm-req-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f0f0f1; }
.rbm-req-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #f0f0f1; border-radius: 3px; padding: 2px 6px; }
.rbm-req-flag { font-size: 11px; background: #fcf9e8; border: 1px solid #dba617; border-radius: 3px; padding: 1px 6px; }
.rbm-req-age { margin-left: auto; color: #646970; font-size: 12px; }
.rbm-req-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; padding: 10px 14px; }
.rbm-req-details p { margin: 6px 0; }
.rbm-req-parts { margin: 0 0 6px 16px; list-style: disc; }
.rbm-req-pattern { background: #f6f7f7; border-radius: 3px; padding: 6px 8px; font-size: 12px; }
.rbm-req-price { font-size: 14px; }
.rbm-req-actions { display: flex; flex-direction: column; gap: 10px; }
.rbm-req-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: #f6f7f7; border-radius: 4px; padding: 8px 10px; margin: 0; }
.rbm-req-form strong { width: 100%; }
@media (max-width: 1100px) { .rbm-req-body { grid-template-columns: minmax(0, 1fr); } }

.rbm-req-card { scroll-margin-top: 60px; }
.rbm-req-card:target { box-shadow: 0 0 0 3px #dba617; }

/* ================= Admin: "View on calendar" pop-out ================= */
.rbm-viewcal.button-link { font-size: 12px; margin-top: 4px; }
.rbm-vc-row > td { background: #f6f7f7 !important; padding: 0 !important; }
.rbm-vc-panel { position: relative; background: #fff; border: 1px solid #c3c4c7; border-left: 4px solid #2271b1; border-radius: 4px; padding: 10px 44px 10px 12px; margin: 8px; }
.rbm-req-card .rbm-vc-panel { margin: 0 14px 12px; }
.rbm-vc-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 1px solid #c3c4c7; background: #fff; border-radius: 50%; font-size: 18px; line-height: 24px; cursor: pointer; padding: 0; }
.rbm-vc-close:hover { background: #f0f0f1; }
.rbm-vc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.rbm-vc-nav .rbm-adm-legend { margin: 0 0 0 auto; }
.rbm-vc-date { cursor: default; }
.rbm-adm-3d-block.rbm-vc-this { box-shadow: 0 0 0 3px #1d2327, 0 0 0 5px #fff; z-index: 2; }
.rbm-vc-tag { display: block; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: .04em; }

/* ---- Responsive breakpoints ---- */
@media (max-width: 600px) {
    .rbm-day { min-height: 62px; padding: 3px 4px; font-size: 11px; }
    .rbm-day-block, .rbm-day-block-more { font-size: 9px; }
    .rbm-day-name { font-size: 10px; padding: 3px 0; }
    .rbm-calendar-header h3 { font-size: 14px; }
    .rbm-calendar-header .rbm-period-label { font-size: 14px; }
    .rbm-nav { padding: 4px 10px; font-size: 14px; }
    .rbm-legend { font-size: 12px; gap: 8px 10px; margin-bottom: 10px; }
    .rbm-view-btn { padding: 5px 10px; font-size: 12px; }
    .rbm-modal { padding: 12px 8px; }
    .rbm-modal-inner { padding: 16px; }
    .rbm-week-inner { min-width: 560px; grid-template-columns: 34px repeat(7, minmax(64px, 1fr)); }
    .rbm-week-axis-body, .rbm-week-day-body { height: 400px; }
    .rbm-week-day-header { font-size: 10px; }
    .rbm-week-hour-label { font-size: 9px; }
    .rbm-week-block { font-size: 9px; padding: 1px 3px; }
    .rbm-legend-item { padding: 3px 10px 3px 6px; font-size: 11px; }
    .rbm-list-date { flex-basis: 90px; font-size: 12px; padding: 8px; }
    .rbm-list-items { padding: 8px; }
    .rbm-list-item { font-size: 12px; }
    .rbm-summary-room { font-size: 19px; }
    .rbm-summary-time { font-size: 18px; }
    .rbm-summary-cost-value { font-size: 24px; }
    .rbm-submit-row button { flex: 1 1 100%; }
    .rbm-rg-dnum { font-size: 14px; }
    .rbm-rg-dow { font-size: 10px; }
}

@media (max-width: 380px) {
    .rbm-day { min-height: 50px; }
    .rbm-day-number { font-size: 11px; }
    .rbm-day-blocks { gap: 1px; }
}

/* ---- Admin ---- */
.rbm-status { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.rbm-status-pending { background: #fff4dd; color: #8a6100; }
.rbm-status-confirmed { background: #e3f1fb; color: #084b7a; }
.rbm-status-paid { background: #e7f6e7; color: #1e6b1e; }
.rbm-status-blocked { background: #e7f6e7; color: #1e6b1e; }
.rbm-status-rejected, .rbm-status-cancelled { background: #fbeaea; color: #8a1c1c; }
.rbm-req-convert { background: #edfaef; border: 1px solid #b8e6bf; }
.rbm-req-pricing { flex-direction: column; align-items: flex-start; }
.rbm-req-pricing > button { margin-right: 6px; }

/* Long Term: dates picked on the calendar */
.rbm-ab-picked-list { display: flex; flex-wrap: wrap; gap: 4px; max-width: 640px; }
.rbm-ab-chip { display: inline-flex; align-items: center; gap: 2px; background: #f0f6fc; border: 1px solid #2271b1; border-radius: 12px; padding: 1px 4px 1px 9px; font-size: 12px; }
.rbm-ab-chip-x { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: #b32d2e; padding: 0 4px; }
.rbm-adm-picked { background: #2271b1 !important; }
.rbm-adm-picked .rbm-adm-num { color: #fff; }
/* Quick edit: date/time check */
.rbm-qe-when { margin: 0 0 6px; }
.rbm-qe-when input[type=date], .rbm-qe-when input[type=time] { font-size: 12px; margin: 2px 0; }
.rbm-qe-check { font-size: 12px; margin-top: 2px; }
.rbm-qe-ok { color: #1e6b1e; }
.rbm-qe-bad { color: #b32d2e; }

/* (The old date boxes are replaced by the date picker: see "Calendar look" at the end of this file.) */
/* Add Booking: highlighted missing fields */
#rbm-ab-problems ul { list-style: disc; margin: 0 0 8px 20px; }
.rbm-ab-missing { background: #fcf0f1 !important; box-shadow: inset 3px 0 0 #d63638; }
td.rbm-ab-missing, div.rbm-ab-missing, p.rbm-ab-missing { border-radius: 3px; }
/* Invoicing: One Off invoice panel */
.rbm-oo-invoice summary { list-style: none; cursor: pointer; }
.rbm-oo-invoice[open] summary { margin-bottom: 8px; }
.rbm-oo-form { background: #f6f7f7; padding: 8px 10px; border-radius: 4px; min-width: 420px; }

/* Admin: a Long Term hirer's private links */
.rbm-hirer-links { background: #fff; border: 1px solid #c5d9ed; border-left: 4px solid #2271b1; padding: 8px 12px; margin: -4px 0 12px; }
.rbm-hirer-links p { margin: 6px 0; }
.rbm-hirer-links .large-text { max-width: 720px; font-size: 12px; }

/* ================= Hall closures and school holidays ================= */
/* Closed days: grey with a subtle hatch, and the message in the middle. */
.rbm-day.rbm-hall-closed, .rbm-week-day-col.rbm-hall-closed .rbm-week-day-body,
.rbm-adm-day.rbm-adm-closed, .rbm-adm-3d-col.rbm-adm-closed {
    background-color: #ececec !important;
    background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.045) 0 6px, transparent 6px 12px) !important;
    color: #6b6b6b;
}
.rbm-day.rbm-hall-closed { cursor: not-allowed; }
.rbm-closed-tag { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #555; line-height: 1.25; }
.rbm-week-day-col.rbm-hall-closed .rbm-week-closed-label { font-weight: 700; color: #555; }
.rbm-closed-banner, .rbm-adm-closedbanner { background: #ececec; border-left: 4px solid #8c8f94; border-radius: 4px; padding: 10px 12px; margin: 6px 0; }
.rbm-mc-day.rbm-mc-closed, .rbm-rg-day.rbm-rg-closed { background-color: #ececec !important; background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 4px, transparent 4px 8px); color: #999; text-decoration: line-through; }
.rbm-adm-closedtag { display: block; font-size: 10px; font-weight: 700; color: #555; margin-top: 2px; line-height: 1.2; }
.rbm-adm-3d-closed { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; font-size: 12px; font-weight: 700; color: #555; z-index: 1; }

/* School holidays: a soft amber band along the top, with the name. */
.rbm-day.rbm-holiday, .rbm-adm-day.rbm-adm-holiday { box-shadow: inset 0 3px 0 #f0b849; background-color: #fffbea; }
.rbm-week-day-col.rbm-holiday .rbm-week-day-header, .rbm-adm-3d-date.rbm-adm-holiday { box-shadow: inset 0 3px 0 #f0b849; background-color: #fffbea; }
.rbm-day.rbm-hall-closed.rbm-holiday, .rbm-adm-day.rbm-adm-closed.rbm-adm-holiday { box-shadow: inset 0 3px 0 #f0b849; }
.rbm-holiday-tag, .rbm-adm-holtag { display: block; font-size: 10px; line-height: 1.2; color: #8a6100; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbm-week-day-header .rbm-holiday-tag { margin-top: 2px; }
.rbm-holiday-note, .rbm-adm-holnote { display: inline-block; background: #fffbea; border: 1px solid #f0d58a; color: #8a6100; border-radius: 12px; padding: 2px 10px; font-size: 12px; margin: 0 0 8px; }
.rbm-mc-day.rbm-mc-holiday, .rbm-rg-day.rbm-mc-holiday { box-shadow: inset 0 2px 0 #f0b849; }

/* Invoicing: the invoice preview */
.rbm-inv-preview-wrap { margin-top: 8px; }
.rbm-inv-preview-wrap > summary { list-style: none; cursor: pointer; display: inline-block; }
.rbm-inv-preview { background: #fff; border: 1px solid #c3c4c7; border-left: 4px solid #2271b1; border-radius: 4px; padding: 10px 14px; margin-top: 8px; max-width: 720px; }
.rbm-inv-preview p { margin: 6px 0; }
.rbm-inv-preview-head { color: #1d2327; }
.rbm-inv-preview-table { margin: 6px 0; }
.rbm-inv-preview-table .rbm-num { text-align: right; white-space: nowrap; }
.rbm-inv-preview-table td, .rbm-inv-preview-table th { vertical-align: top; }

/* Long Term list: bookings grouped under the booking name */
.widefat tr.rbm-group-head td { background: #e8f1fa !important; border-top: 2px solid #2271b1; padding: 8px 10px; }
.widefat tr.rbm-group-head input[type=checkbox] { margin-right: 6px; vertical-align: middle; }
/* All Bookings: the Upcoming and Past sections (1.50.0) */
.widefat tr.rbm-section-head td { background: #04213f !important; color: #fff; padding: 10px; font-size: 14px; }
.widefat tr.rbm-section-head .description { color: #d3dce7; }
.widefat tr.rbm-section-head .button { margin-right: 8px; }
.widefat tbody.rbm-section + tbody.rbm-section tr.rbm-section-head td { border-top: 12px solid #fff; }
.widefat tbody.rbm-collapsed > tr:not(.rbm-section-head) { display: none !important; }

/* After a change, the list scrolls to the booking you were on and highlights it. */
.widefat tr:target td { background: #fff8c5 !important; transition: background 1.5s; }


/* =====================================================================================================================
   Calendar look. A larger, calmer month; a month heading that opens a small calendar to choose a date from; and the same
   date picker for the booking calendar, the team's Hall Calendar and the Admin Area's calendar panel.
   ===================================================================================================================== */

.rbm-app {
    --cal-accent: var(--wp--preset--color--blue, #2271b1);
    --cal-ink: #1b2430;
    --cal-mute: #5b6b7d;
    --cal-line: #dde3ec;
    --cal-soft: #f3f6fa;
    --cal-red: #b3261e;
}

/* The view buttons (a switch) and Today */
.rbm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.rbm-view-toggle { display: inline-flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px; background: var(--cal-soft); border: 1px solid var(--cal-line); border-radius: 12px; }
.rbm-view-btn { background: transparent; border: 0; border-radius: 9px; padding: 8px 16px; min-height: 38px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--cal-mute); cursor: pointer; }
.rbm-view-btn:hover { color: var(--cal-ink); background: rgba(255, 255, 255, .6); }
.rbm-view-btn.rbm-view-active { background: #fff; color: var(--cal-accent); box-shadow: 0 1px 3px rgba(16, 24, 40, .16), 0 0 0 1px var(--cal-line); }
.rbm-today-btn { background: #fff; color: var(--cal-ink); border: 1px solid var(--cal-line); border-radius: 999px; padding: 8px 18px; min-height: 38px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rbm-today-btn:hover { border-color: var(--cal-accent); color: var(--cal-accent); }

/* The heading: previous, "October 2026 v" (opens the date picker), next */
.rbm-calendar-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; }
.rbm-nav { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--cal-line); background: #fff; color: var(--cal-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.rbm-nav:hover { border-color: var(--cal-accent); color: var(--cal-accent); background: #f4f9ff; }
.rbm-period-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 6px 14px 6px 20px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--cal-ink); font-family: inherit; cursor: pointer; flex: 0 1 auto; min-width: 0; }
.rbm-period-btn:hover, .rbm-period-btn[aria-expanded="true"] { background: var(--cal-soft); border-color: var(--cal-line); }
.rbm-calendar-header .rbm-period-label { flex: none; margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-align: center; color: var(--cal-ink); }
.rbm-period-chev { flex: none; color: var(--cal-accent); transition: transform .15s ease; }
.rbm-period-btn[aria-expanded="true"] .rbm-period-chev { transform: rotate(180deg); }
.rbm-nav:focus-visible, .rbm-period-btn:focus-visible, .rbm-view-btn:focus-visible, .rbm-today-btn:focus-visible, .rbm-day:focus-visible { outline: 3px solid var(--cal-accent); outline-offset: 2px; }

/* The room chips and keys */
.rbm-legend { gap: 8px; margin: 0 0 6px; }
.rbm-legend-item { padding: 7px 14px 7px 10px; border: 1px solid var(--cal-line); background: #fff; color: var(--cal-ink); font-size: 13px; font-weight: 700; opacity: .5; }
.rbm-legend-item:hover { opacity: .85; }
.rbm-legend-item.rbm-legend-active { opacity: 1; border-color: #9aa8b8; background: #fff; box-shadow: inset 0 0 0 1px #9aa8b8; }
.rbm-legend-all.rbm-legend-active { background: var(--cal-accent); border-color: var(--cal-accent); color: #fff; box-shadow: none; }
.rbm-dot { width: 11px; height: 11px; }
.rbm-app > .rbm-field-hint { margin: 6px 0 10px; font-size: 13px; color: var(--cal-mute); }
.rbm-status-key { font-size: 13px; color: var(--cal-mute); margin: 0 0 14px; gap: 8px; }
.rbm-key-swatch { width: 28px; height: 12px; border-radius: 4px; }

/* The month */
.rbm-calendar-grid { gap: 6px; }
.rbm-day-name { font-size: 13px; font-weight: 700; color: var(--cal-mute); padding: 6px 0 4px; }
.rbm-day { min-height: 112px; padding: 8px; border: 1px solid var(--cal-line); border-radius: 12px; background: #fff; color: var(--cal-ink); font-size: 13px; }
.rbm-day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; margin: -2px 0 2px -4px; padding: 0 4px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1; }
.rbm-day.rbm-today { border-color: var(--cal-accent); box-shadow: inset 0 0 0 1px var(--cal-accent); }
.rbm-day.rbm-today .rbm-day-number { background: var(--cal-accent); color: #fff; }
.rbm-day.rbm-weekend { background: #fbfcfe; }
.rbm-day.rbm-past { background: #f8f9fb; color: #98a2b3; border-color: #edf0f4; }
.rbm-day.rbm-past .rbm-day-blocks { opacity: .55; }
.rbm-day.rbm-closed { background: repeating-linear-gradient(135deg, #f6f7f9 0 8px, #f1f3f6 8px 16px); color: #98a2b3; border-color: #e9edf2; text-decoration: none; }
.rbm-day.rbm-available:hover { border-color: var(--cal-accent); box-shadow: 0 0 0 3px rgba(34, 113, 177, .16); }
.rbm-day.rbm-holiday { background-color: #fffaf0; }
.rbm-day-tag { font-size: 12px; font-weight: 600; margin-top: 4px; color: #98a2b3; }
.rbm-holiday-tag { font-size: 11px; font-weight: 700; }
.rbm-closed-tag { font-size: 12px; }
.rbm-full-tag { position: absolute; top: 9px; right: 8px; padding: 2px 8px; border-radius: 999px; background: #fdecea; color: var(--cal-red); font-size: 11px; font-weight: 700; line-height: 1.4; }
.rbm-day-blocks { gap: 4px; margin-top: 6px; }
.rbm-day-block { padding: 3px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 1px rgba(0, 0, 0, .22); }
.rbm-day-block.rbm-pending { text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.rbm-day-block-more { padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--cal-mute); }

/* Week and Day, to match */
.rbm-week-day-col { border-color: var(--cal-line); border-radius: 10px; }
.rbm-week-day-header { font-size: 12px; }
.rbm-week-day-header.rbm-week-today { color: var(--cal-accent); }
.rbm-week-block { border-radius: 6px; font-size: 11px; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, .22); }
.rbm-week-block.rbm-pending { text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.rbm-list-view { border-color: var(--cal-line); border-radius: 12px; }

/* The "request a booking" panel under the calendar */
.rbm-booking-options { margin-top: 18px; padding: 16px 18px; background: var(--cal-soft); border: 1px solid var(--cal-line); border-radius: 14px; }
.rbm-option-btn { border: 1.5px solid var(--cal-accent); color: var(--cal-accent); border-radius: 10px; padding: 10px 16px; }
.rbm-option-btn:hover { background: var(--cal-accent); color: #fff; }

/* A phone: a month cell is only about 48px wide, so a booking is a coloured bar (the times are on the day's own screen). */
@media (max-width: 640px) {
    .rbm-toolbar { gap: 8px; }
    .rbm-view-btn { padding: 8px 11px; font-size: 13px; }
    .rbm-today-btn { padding: 8px 14px; }
    .rbm-calendar-header { gap: 6px; }
    .rbm-nav { width: 40px; height: 40px; }
    .rbm-period-btn { padding: 6px 10px 6px 14px; gap: 6px; }
    .rbm-calendar-header .rbm-period-label { font-size: 21px; }
    .rbm-calendar-grid { gap: 3px; }
    .rbm-day-name { font-size: 11px; }
    .rbm-day { min-height: 64px; padding: 4px 3px; border-radius: 8px; }
    .rbm-day-number { min-width: 24px; height: 24px; margin: 0 0 3px -1px; font-size: 13px; }
    .rbm-day-blocks { gap: 2px; margin-top: 2px; }
    .rbm-day-block { height: 7px; padding: 0; border-radius: 4px; font-size: 0; line-height: 0; text-shadow: none; }
    .rbm-day-block-more { padding: 0; font-size: 10px; line-height: 1; }
    .rbm-holiday-tag { display: none; }
    .rbm-day-tag, .rbm-closed-tag { font-size: 0; margin-top: 2px; }
    .rbm-day-tag::after { content: "Closed"; font-size: 10px; }
    .rbm-full-tag { top: 5px; right: 4px; width: 8px; height: 8px; padding: 0; font-size: 0; background: var(--cal-red); }
}

/* The Add Booking calendar's heading: a button that opens the date picker */
.rbm-adm-titlebtn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.rbm-adm-titlebtn:hover, .rbm-adm-titlebtn[aria-expanded="true"] { background: #f3f6fa; border-color: #dde3ec; }
.rbm-adm-titlebtn svg { flex: none; color: var(--wp--preset--color--blue, #2271b1); transition: transform .15s ease; }
.rbm-adm-titlebtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.rbm-adm-titlebtn:focus-visible { outline: 3px solid var(--wp--preset--color--blue, #2271b1); outline-offset: 2px; }

/* The Admin Area calendar panel: its date range is a button that opens the date picker */
.rbm-vc-titlebtn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.rbm-vc-titlebtn:hover, .rbm-vc-titlebtn[aria-expanded="true"] { background: #f3f6fa; border-color: #dde3ec; }
.rbm-vc-titlebtn svg { flex: none; color: var(--wp--preset--color--blue, #2271b1); transition: transform .15s ease; }
.rbm-vc-titlebtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.rbm-vc-titlebtn:focus-visible { outline: 3px solid var(--wp--preset--color--blue, #2271b1); outline-offset: 2px; }

/* ----- The date picker (rbm-datepick.js): shared by all three calendars ----- */
.rbm-datepop { --dp-accent: var(--wp--preset--color--blue, #2271b1); position: fixed; z-index: 100000; top: 0; left: 0; width: 320px; max-width: calc(100vw - 24px); padding: 12px; background: #fff; border: 1px solid #d5dce6; border-radius: 16px; box-shadow: 0 18px 40px rgba(16, 24, 40, .2), 0 2px 6px rgba(16, 24, 40, .08); color: #1b2430; font-family: inherit; text-align: left; box-sizing: border-box; }
.rbm-datepop *, .rbm-datepop *::before, .rbm-datepop *::after { box-sizing: border-box; }
.rbm-datepop[hidden] { display: none; }
.rbm-dp-head { display: flex; align-items: center; gap: 2px; margin: 0 0 6px; }
.rbm-dp-title { flex: 1; text-align: center; font-size: 15px; font-weight: 800; }
.rbm-dp-nav { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #1b2430; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.rbm-dp-nav:hover { background: #eef2f8; color: var(--dp-accent); }
.rbm-dp-dows { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 0 2px; text-align: center; font-size: 12px; font-weight: 700; color: #5b6b7d; }
.rbm-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rbm-dp-day { height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #1b2430; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rbm-dp-day:hover { background: #eef2f8; }
.rbm-dp-out { color: #a3aebd; font-weight: 500; }
.rbm-dp-today-cell { box-shadow: inset 0 0 0 2px var(--dp-accent); color: var(--dp-accent); }
.rbm-dp-sel, .rbm-dp-sel:hover { background: var(--dp-accent); color: #fff; box-shadow: none; }
.rbm-dp-day:focus-visible, .rbm-dp-nav:focus-visible, .rbm-dp-today:focus-visible { outline: 3px solid var(--dp-accent); outline-offset: 1px; }
.rbm-dp-foot { display: flex; justify-content: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e8edf4; }
.rbm-dp-today { padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--dp-accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rbm-dp-today:hover { background: #eef2f8; }
@media (prefers-reduced-motion: reduce) { .rbm-period-chev { transition: none; } }

/* =====================================================================================================================
   Rooms booked together. A booking of several rooms (the Whole Hall is three) is ONE booking on the calendars: an outlined box in
   a month cell, one outline round the rooms in the Week and Day lanes, and one line in the List.
   ===================================================================================================================== */

/* Month: the name, the time, and a bar in each room's colour, inside one outline */
.rbm-day-group { display: block; min-width: 0; padding: 3px 6px 5px; border: 2px solid var(--cal-ink, #1b2430); border-radius: 9px; background: #fff; color: var(--cal-ink, #1b2430); }
.rbm-day-group.rbm-pending-group { border-style: dashed; }
.rbm-dg-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.rbm-dg-time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--cal-mute, #5b6b7d); }
.rbm-dg-bars { display: flex; gap: 2px; margin-top: 4px; height: 6px; }
.rbm-dg-bars i { flex: 1; border-radius: 3px; }
.rbm-day.rbm-past .rbm-day-group { border-color: #98a2b3; }

/* Week and Day: one outline round the rooms booked together, with the name inside at the foot */
.rbm-join { position: absolute; z-index: 3; box-sizing: border-box; border: 2px solid #0c2340; border-radius: 9px; pointer-events: none; }
.rbm-join.rbm-join-pending { border-style: dashed; }
.rbm-join-tag { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); max-width: calc(100% - 8px); padding: 1px 9px; border-radius: 999px; background: #0c2340; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none; }
.rbm-join.rbm-join-short .rbm-join-tag { display: none; }
.rbm-join-gap { position: absolute; z-index: 3; height: 0; border-top: 2px dashed #0c2340; pointer-events: none; }

/* Add Booking's month: one outlined entry for the rooms booked together */
.rbm-adm-entry.rbm-adm-joined { background: #fff; color: #1d2327; border: 2px solid #0c2340; border-radius: 6px; padding: 1px 3px 3px; text-shadow: none; }
.rbm-adm-entry.rbm-adm-joined.rbm-pending-group { border-style: dashed; }
.rbm-adm-joined strong { display: block; }
.rbm-adm-bars { display: flex; gap: 2px; margin-top: 2px; height: 4px; }
.rbm-adm-bars i { flex: 1; border-radius: 2px; }

/* The Admin Area panel: the booking you are looking at gets a heavier outline */
.rbm-join.rbm-join-mine { border-width: 3px; box-shadow: 0 0 0 2px #fff; }

/* List */
.rbm-dots { display: inline-flex; gap: 3px; vertical-align: middle; padding: 2px 5px; border: 2px solid var(--cal-ink, #1b2430); border-radius: 999px; }
.rbm-list-joined .rbm-list-rooms { color: var(--cal-mute, #5b6b7d); font-size: .92em; }

/* A phone: the group is just the outlined bars (the name and times are on the day's own screen) */
@media (max-width: 640px) {
    .rbm-day-group { padding: 2px 3px; border-width: 2px; border-radius: 6px; }
    .rbm-dg-name, .rbm-dg-time { display: none; }
    .rbm-dg-bars { margin-top: 0; height: 5px; }
    .rbm-join-tag { font-size: 10px; padding: 0 6px; }
}


/* =====================================================================
   Collapsing FAQs on the booking page (the Details block). Scoped to page content so the admin screens are untouched.
   ===================================================================== */
.wp-block-post-content .wp-block-details { border: 1px solid var(--inbs-line, #d0d5dc); border-radius: 10px; background: #fff; margin: 0 0 10px; }
.wp-block-post-content .wp-block-details summary { cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 700; color: var(--wp--preset--color--navy, #04213F); list-style: none; position: relative; }
.wp-block-post-content .wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-post-content .wp-block-details summary::after { content: ''; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.wp-block-post-content .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.wp-block-post-content .wp-block-details summary:hover, .wp-block-post-content .wp-block-details summary:focus-visible { color: var(--wp--preset--color--blue, #006EE0); }
.wp-block-post-content .wp-block-details[open] summary { border-bottom: 1px solid var(--inbs-line, #e1e5ea); }
.wp-block-post-content .wp-block-details > :not(summary) { padding-inline: 16px; }
.wp-block-post-content .wp-block-details > p:last-child { padding-bottom: 14px; }