/* "Book a session" beside the client's chat (Project/Client Booking Plan.md, K1).
   Three panels: Shared with Nicolas (left), chat (middle), Book a session (right). */
.atelier-chat-panel.with-booking{width:min(100%,1560px)}
.atelier-chat-panel.with-booking .chat-body > .atelier-sharing-side{flex:0 0 280px}
.atelier-booking-side{flex:0 0 480px;box-sizing:border-box;padding:14px;border:1px solid #dfd3c6;border-radius:18px;background:#fffdf9;overflow-y:auto;font-size:13px}
/* K2 (8 October): the It's Complicated steps with Life Atelier's colours. */
.bk-card{display:flex;flex-direction:column;background:#fffdf9;border-radius:20px;overflow:hidden;color:#3f3a37}
.bk-card.one{align-items:center;padding:22px 18px}
.bk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bk-who{text-align:center}
.bk-photo{display:block;width:84px;height:84px;border-radius:50%;object-fit:cover;margin:0 auto 10px;border:3px solid #fff;box-shadow:0 0 0 2px #d9b48a}
.bk-name{font:20px Georgia,serif}.bk-role{color:#8b867e;font-size:13px;margin-top:2px}
.bk-welcome{color:#655e57;font-size:13px;line-height:1.5;text-align:center;max-width:380px;margin:14px auto 18px}
.bk-svc{width:100%;display:flex;align-items:center;gap:12px;border:1px solid #ece3d8;border-left:5px solid var(--c);border-radius:12px;padding:12px 14px;margin:0 0 9px;background:#fff;text-align:left;color:inherit;font:inherit;cursor:pointer}
.bk-svc:hover{box-shadow:0 2px 10px rgba(80,60,40,.1)}
.bk-svc span{flex:1}.bk-svc b{font-weight:600;font-size:14.5px}.bk-svc small{display:block;color:#8b867e;font-size:12.5px;margin-top:4px}.bk-svc em{font-style:normal;color:#b0a89e;font-size:18px}
.bk-aside{background:#f6f1ea;padding:18px;box-sizing:border-box}
.bk-aside .bk-photo{width:64px;height:64px}
.bk-aside hr{border:0;border-top:1px solid #e3d8cb;margin:14px 0}
.bk-aside h5{margin:0 0 8px;font:600 15px sans-serif;display:flex;align-items:center;gap:8px}.bk-aside h5 i{width:10px;height:10px;border-radius:50%;flex:none}
.bk-aside p{margin:8px 0;font:15px/1.35 sans-serif;color:#4a443f;display:flex;align-items:flex-start;gap:10px}
.bk-aside p a{color:inherit;font-weight:600}
.bk-ic{width:20px;height:20px;flex:none;color:#d06f56}
.bk-tz .bk-ic{width:16px;height:16px;vertical-align:-3px}
.bk-state{margin:0 0 12px}.bk-state h3{margin:0 0 6px;font:20px/1.25 Georgia,serif}
.bk-main{flex:1;padding:18px 20px}
.bk-main h3{font:normal 19px Georgia,serif;margin:10px 0 12px}
.bk-main p{line-height:1.5}
.bk-back{border:0;background:none;padding:0;color:#8b5e3c;font-size:12.5px;cursor:pointer}
.bk-mon{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.bk-mon strong{font:normal 15px Georgia,serif}
.bk-mon button{border:0;background:none;font-size:18px;color:#8b867e;cursor:pointer;padding:0 6px}.bk-mon button:disabled{opacity:.3;cursor:default}
.bk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:13px}
.bk-dh{color:#8b867e;font-weight:600;font-size:11.5px;padding:4px 0}
.bk-d{padding:8px 0;border-radius:9px;color:#cfc6bb;border:0;background:none;font:inherit}
.bk-d.ok{color:var(--c);font-weight:600;background:color-mix(in srgb,var(--c) 12%,#fff);cursor:pointer}
.bk-d.sel{background:var(--c);color:#fff}
.bk-tz{font-size:12px;color:#655e57;background:#f3ece3;border-radius:8px;padding:6px 9px;margin:12px 0}
.bk-day{text-align:center;font:15px Georgia,serif;margin:6px 0 10px}
.bk-times{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bk-times button,.bk-fmt button{border:1.5px solid var(--c);color:var(--c);background:#fff;border-radius:10px;padding:8px 0;font-weight:600;font-size:13.5px;cursor:pointer}
.bk-times button:hover,.bk-fmt button[aria-pressed=true]{background:var(--c);color:#fff}
.bk-fmt{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.bk-q{display:block;font:16px Georgia,serif;margin:0 0 4px}.bk-hint{color:#8b867e;font-size:12.5px;margin:0 0 8px}
#bk-note{width:100%;height:96px;border:1px solid #ddd2c5;border-radius:10px;padding:9px;box-sizing:border-box;font:13px sans-serif;background:#fff;color:inherit;resize:vertical}
.bk-go{display:block;margin:16px auto 0;border:0;border-radius:999px;padding:11px 26px;background:var(--c,#d06f56);color:#fff;font-size:14px;cursor:pointer}
.bk-go.ghost{background:#fff;color:#3f3a37;border:1px solid #d9cfc3}
.bk-go:disabled{opacity:.6}
.bk-fine{text-align:center;color:#8b867e;font-size:12px;margin-top:8px}
.bk-error{color:#a03c2a;font-size:12.5px;text-align:center}
.bk-pill{display:inline-block;font-size:11.5px;border-radius:999px;padding:3px 10px;background:#f6e3c8;color:#7a4b12}.bk-pill.ok{background:#dcebe5;color:#2e5d50}
.bk-acts{display:flex;gap:10px;margin:14px 0}
.bk-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:10px 0;font-size:14px;border:1px solid #d9cfc3;background:#fff;color:#3f3a37;text-decoration:none;cursor:pointer}
.bk-btn.p{background:#d06f56;color:#fff;border-color:#d06f56}.bk-btn.off{color:#8b867e;cursor:default}
.bk-lbl{font-size:10.5px;letter-spacing:1.5px;color:#8b867e;margin:20px 0 4px;align-self:stretch}
.bk-mine{display:block;width:100%;text-align:left;border:1px solid #ece3d8;border-left:5px solid var(--cc);border-radius:12px;padding:9px 12px;margin-top:8px;background:#fff;font-size:13px;color:inherit;cursor:pointer}
.bk-mine i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
/* Narrow screens: chat first, then booking, then sharing. */
@media(max-width:1200px){
  .atelier-chat-panel.with-booking .chat-body{flex-direction:column}
  .atelier-chat-panel.with-booking .chat-body > *{flex:none}
  .atelier-chat-panel.with-booking .chat-body > .chat-box{order:0}
  .atelier-booking-side{order:1}
  .atelier-chat-panel.with-booking .chat-body > .atelier-sharing-side{order:2;flex:none}
}
html[data-theme="dark"] .atelier-booking-side{background:#1d2224;border-color:var(--line)}
/* Dark mode: the id outranks the app's general dark button rule (atelier-dark.css), which hid the
   chosen Online / In person and the session colours (Nicolas, 8 October). */
html[data-theme="dark"] #atelier-booking-panel .bk-card,html[data-theme="dark"] #atelier-booking-panel .bk-svc,html[data-theme="dark"] #atelier-booking-panel .bk-mine,html[data-theme="dark"] #atelier-booking-panel #bk-note,html[data-theme="dark"] #atelier-booking-panel .bk-btn,html[data-theme="dark"] #atelier-booking-panel .bk-go.ghost{background:#232a2c;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] #atelier-booking-panel .bk-svc{border-left-color:var(--c)}
html[data-theme="dark"] #atelier-booking-panel .bk-mine{border-left-color:var(--cc)}
html[data-theme="dark"] #atelier-booking-panel .bk-times button,html[data-theme="dark"] #atelier-booking-panel .bk-fmt button{background:#232a2c;color:var(--ink);border:1.5px solid color-mix(in srgb,var(--c) 75%,#fff)}
html[data-theme="dark"] #atelier-booking-panel .bk-times button:hover,html[data-theme="dark"] #atelier-booking-panel .bk-fmt button[aria-pressed=true],html[data-theme="dark"] #atelier-booking-panel .bk-d.sel{background:var(--c);color:#fff;border-color:color-mix(in srgb,var(--c) 75%,#fff)}
html[data-theme="dark"] #atelier-booking-panel .bk-fmt button[aria-pressed=true]{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 60%,#fff)}
html[data-theme="dark"] #atelier-booking-panel .bk-go:not(.ghost){background:var(--c,#d06f56);color:#fff;border:1px solid color-mix(in srgb,var(--c,#d06f56) 75%,#fff)}
html[data-theme="dark"] #atelier-booking-panel .bk-btn.p{background:#d06f56;color:#fff;border-color:#d06f56}
html[data-theme="dark"] #atelier-booking-panel .bk-back,html[data-theme="dark"] #atelier-booking-panel .bk-mon button,html[data-theme="dark"] #atelier-booking-panel .bk-d{background:none;border:0}
html[data-theme="dark"] #atelier-booking-panel .bk-back{color:#d9b48a}
html[data-theme="dark"] .bk-aside,html[data-theme="dark"] .bk-tz{background:#1b2022;color:var(--ink)}
html[data-theme="dark"] .bk-aside p,html[data-theme="dark"] .bk-ic,html[data-theme="dark"] .bk-welcome,html[data-theme="dark"] .bk-role,html[data-theme="dark"] .bk-hint{color:var(--muted)}
html[data-theme="dark"] #atelier-booking-panel .bk-d.ok:not(.sel){background:color-mix(in srgb,var(--c) 30%,#232a2c);color:#fff}
/* The booking link (lifeatelier.online/book, Nicolas 8 October): just the calendar, no chat or shared items. */
body.book-only .atelier-chat-panel .chat-box,body.book-only .atelier-chat-panel .chat-intro,body.book-only .atelier-chat-panel .chat-head,body.book-only .atelier-sharing-side{display:none!important}
body.book-only .atelier-chat-panel .chat-body{justify-content:center}
body.book-only .atelier-chat-panel.with-booking{width:min(100%,820px)}
body.book-only .atelier-booking-side{flex:1 1 auto;max-width:820px;font-size:14px;padding:0;border:0;background:transparent;overflow:visible}
body.book-only .bk-card{box-shadow:0 10px 40px rgba(80,60,40,.14);min-height:480px}
body.book-only .bk-card.one{max-width:600px;margin:0 auto;padding:34px 40px}
@media(min-width:720px){body.book-only .bk-card:not(.one){flex-direction:row}body.book-only .bk-aside{flex:0 0 250px;padding:28px 22px}body.book-only .bk-main{padding:26px 28px}}
/* The booked step (Nicolas's mock-up, 8 October): sessions on top, the hold beside "I've paid",
   a white payment box (QR on computers only), then the confirmation line. */
.bk-booked .bk-main > .bk-lbl:first-child{margin-top:4px}
.bk-lbl.bk-first{margin-top:16px;color:#b8553d;font-weight:600}
.bk-aside .bk-change{display:block;width:100%;margin-top:14px}
.bk-heldrow{display:flex;align-items:center;gap:14px;margin:22px 0 16px}
.bk-heldrow h3{flex:1;margin:0!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-heldrow h3 .bk-pill{font:600 15px sans-serif;padding:4px 10px}
.bk-heldrow .bk-btn{flex:0 0 42%}
.bk-booked h3 .bk-pill{vertical-align:middle;margin-left:6px}
.bk-paybox{display:flex;align-items:center;gap:20px;padding:14px;border-radius:14px;background:#fff;border:1px solid #ece3d8;color:#2b2724}
.bk-qr{flex:0 0 150px;width:150px;height:150px}.bk-qr svg{width:100%;height:100%;display:block}
.bk-payside{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bk-amount{font:600 34px/1.1 sans-serif}
.bk-payside .bk-btn{flex:none;width:min(100%,260px);padding:11px 0}
.bk-scan{margin:0;font-size:12.5px;color:#655e57}
.bk-confirm{text-align:center;color:#655e57;font-size:14px;margin:18px 0 4px}
@media(max-width:719px){.bk-qr,.bk-scan{display:none}.bk-heldrow{flex-wrap:wrap}.bk-heldrow .bk-btn{flex:1 1 100%}}
html[data-theme="dark"] #atelier-booking-panel .bk-paybox{background:#fff;color:#2b2724;border-color:#fff}
html[data-theme="dark"] .bk-confirm{color:var(--muted)}
/* Bank transfer (Nicolas, 9 October): a button as wide as Pay with Revolut opens the details below. */
.bk-bankbox{margin-top:12px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #ece3d8;color:#2b2724;display:flex;flex-direction:column;gap:10px}
.bk-bankbox p{margin:0;font-size:14px;line-height:1.45}
.bk-bank{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0;font-size:14px}
.bk-bank dt{color:#655e57}.bk-bank dd{margin:0;font-weight:600;overflow-wrap:anywhere;user-select:all}
.bk-bankbox .bk-btn{flex:none;width:min(100%,260px);padding:11px 0;align-self:center}
.bk-btn.ok{background:#3f7d58;color:#fff;border-color:#3f7d58;cursor:default}
.bk-bankdone{text-align:center;color:#3f7d58;font-weight:600}
.bk-thanks{text-align:center}.bk-thanks .bk-thanksname{font-size:16px;font-weight:600}.bk-thanks p{font-size:15px}.bk-thanks p b,.bk-thanks .bk-thanksname{color:#2b2724}
html[data-theme="dark"] #atelier-booking-panel .bk-bankbox{background:#fff;color:#2b2724;border-color:#fff}
html[data-theme="dark"] #atelier-booking-panel .bk-paybox .bk-btn:not(.p),html[data-theme="dark"] #atelier-booking-panel .bk-bankbox .bk-btn:not(.p):not(.ok){background:#fff;color:#3f3a37;border-color:#d9cfc3}
html[data-theme="dark"] #atelier-booking-panel .bk-btn.ok{background:#3f7d58;color:#fff;border-color:#3f7d58}
html[data-theme="dark"] #atelier-booking-panel .bk-bankbox .bk-btn.p{background:#d06f56;color:#fff;border-color:#d06f56}
html[data-theme="dark"] #atelier-booking-panel .bk-bankbox p:not(.bk-bankdone){color:#2b2724}
/* Pay box layout (Nicolas, 9 October): QR as tall as "Pay …" plus the three buttons; buttons narrower. */
.bk-paybox{align-items:flex-start}
.bk-qrcol{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.bk-qrcol .bk-qr{flex:none;width:200px;height:200px}
.bk-qrcol .bk-scan{margin:0;font-size:13px;font-weight:600;color:#3f3a37;text-align:center}
.bk-payside{min-width:0}
.bk-payside .bk-amount{line-height:44px;width:100%;max-width:260px;text-align:center}
.bk-payside .bk-btn{width:100%;max-width:260px;height:42px;padding:0 10px;box-sizing:border-box}
.bk-paybox + .bk-bankdone,.bk-bankbox + .bk-bankdone{margin-top:14px}
.bk-payside .bk-btn.on{border-color:#d06f56;box-shadow:inset 0 0 0 1px #d06f56}
.bk-payside .bk-btn:disabled,.bk-payside .bk-btn.p.off{opacity:.4;cursor:default}
/* The client's calendar link (9 October): one white box, three buttons */
.bk-calrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 4px}
.bk-calrow .bk-btn{flex:1 1 0;min-width:160px;max-width:240px;height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}
.bk-calrow.three .bk-btn{min-width:140px}
.bk-feed{margin-top:14px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #ece3d8;color:#2b2724;text-align:center}
.bk-feed p{margin:0;font-size:14px;line-height:1.45}
.bk-feed > .bk-btn{margin-top:10px;width:min(100%,260px);height:42px}
.bk-feednote{margin-top:8px!important;color:#655e57;font-size:13px!important}
.bk-link{background:none;border:0;padding:0;color:#d06f56;text-decoration:underline;cursor:pointer;font:inherit}
html[data-theme="dark"] #atelier-booking-panel .bk-feed{background:#fff;color:#2b2724;border-color:#fff}
html[data-theme="dark"] #atelier-booking-panel .bk-feed .bk-btn{background:#fff;color:#3f3a37;border-color:#d9cfc3}