/*
  EXAMPLE CALENDAR AND BOOKING BOX (22 Oct 2026)
  A still picture of one booking, in the platform's month-calendar look: made-up
  days, nothing to tap. Used on the home page and the role pages.
*/
.bdemo { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 50px -30px rgba(20,36,47,0.3); overflow: hidden; }
.bd-cal { padding: 24px; min-width: 0; }
.bd-box { padding: 24px; background: #F7FAFB; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.cd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cd-head strong { font-size: 15px; }
.cd-nav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); color: var(--deep-sea); display: grid; place-items: center; font-size: 20px; }
.cd-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.dow { font-size: 12px; font-weight: 600; text-align: center; color: var(--ink-light); }
.dow.wk { color: var(--ink); }
.cd-grid .d { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px 7px; min-height: 50px; border-radius: 8px; background: var(--mist); }
.cd-grid .d b { font-size: 13px; font-weight: 600; }
.cd-grid .d.none { color: var(--ink-light); }
.bars { display: flex; gap: 2px; width: 80%; }
.bars i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.bars i.on { background: #4E7D48; }
.cd-grid .d.sel { background: var(--deep-sea); color: var(--white); }
.cd-grid .d.sel .bars i { background: rgba(255,255,255,.35); }
.cd-grid .d.sel .bars i.on { background: var(--white); }
.cd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 14px; font-size: 12px; color: var(--ink-light); }
.cd-foot .k, .cd-ok { display: inline-flex; align-items: center; gap: 6px; }
.cd-foot .bars { width: 30px; }
.cd-ok { margin: 0 0 0 auto; color: #3A6535; font-weight: 600; }   /* sits on the right, even on its own line */
.cd-ok .ic { width: 16px; height: 16px; flex-shrink: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 3px; font-size: 13px; font-weight: 600; text-align: center; }
.seg span { padding: 8px 4px; border-radius: 8px; color: var(--ink-mid); }
.seg span.on { background: var(--deep-sea-soft); color: var(--deep-sea); }
.bd-label { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-light); }
.tchips { display: flex; gap: 6px; flex-wrap: wrap; }
.tchip { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.tchip.on { border-color: var(--deep-sea); background: var(--deep-sea); color: var(--white); }
.cd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cd-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cd-list li .t { color: var(--ink-mid); }
.cd-list li.empty { border: 0; color: var(--ink-light); }
.bd-rate, .bd-fee { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; font-size: 14px; color: var(--ink-mid); }
.bd-rate { margin-top: auto; padding-top: 18px; }
.bd-rate b, .bd-fee b { color: var(--ink); text-align: right; margin-left: auto; }
.bd-fee { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.bd-fee b { font-size: 17px; font-variant-numeric: tabular-nums; }
.bd-small { margin: 2px 0 0; font-size: 12px; color: var(--ink-light); }
.cd-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; text-align: center; background: var(--deep-sea); color: var(--white); border-radius: 10px; padding: 11px; font-weight: 600; font-size: 14px; }
.cd-btn .lock { width: 16px; height: 16px; flex-shrink: 0; }
/* ⓘ tips: the small print, on hover or tap */
.tip { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; border: 1px solid var(--ink-light); border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 700; color: var(--ink-light); vertical-align: 1px; cursor: help; }
.tip:hover::after, .tip:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: -60px; width: 190px; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; z-index: 5; }
.tip:focus { outline: none; box-shadow: 0 0 0 2px var(--deep-sea); }

/* Role pages: the steps on the left, the example on the right */
.how-split { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 48px; align-items: start; margin-top: 8px; }
.how-split .bdemo { max-width: none; margin: 24px 0 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

@media (max-width: 900px) {
  .how-split { grid-template-columns: 1fr; gap: 8px; }
  .how-split .bdemo { grid-template-columns: 1fr; }
  .bdemo { grid-template-columns: 1fr; }
  .bd-box { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .bd-cal, .bd-box { padding: 16px; }
  .cd-grid { gap: 3px; }
  .cd-grid .d { min-height: 44px; }
}
/* Phones (26 Oct 2026: too much to take in): a day is simply free (green) or
   not, without the morning/afternoon/evening bars, and the booking box drops the
   switch and time buttons - the booking list already says when. Same up to tablet
   width, where the box stacks into one long column too */
@media (max-width: 900px) {
  .cd-grid .d { min-height: 0; padding: 10px 2px; background: #E6F0E4; }
  .cd-grid .d.none { background: var(--mist); }
  .cd-grid .d.sel { background: var(--deep-sea); }
  .cd-grid .d .bars, .cd-foot .k, .bd-box .seg, .bd-box .tchips, .bd-label:has(+ .tchips) { display: none; }
  .bd-box .tchips + .bd-label, .bd-box .seg + .bd-label { margin-top: 0; }
}