/* ============================================================
   CONSULT-ED - booking embed treatment (cal.diy)
   The frame is ours; the engine inside is third-party and is
   only lightly themed: brand colour #2C6165, light theme.
   The markup below is a static representation of that embed.
   ============================================================ */
.cal{ display:grid; grid-template-columns:262px 1fr 200px; font-size:14px; background:#fff; }
.cal .col{ padding:22px; }
.cal .col + .col{ border-left:1px solid var(--line); }
.cal .org{ display:flex; align-items:center; gap:10px; }
.cal .org img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.cal .org .n{ font-weight:600; font-size:13.5px; }
.cal h4{ font-family:var(--f-display); font-weight:400; font-size:21px; line-height:1.2; margin:16px 0 12px; }
.cal .facts{ display:grid; gap:9px; color:var(--muted); font-size:13px; }
.cal .facts div{ display:flex; gap:9px; align-items:center; }
.cal .facts svg{ width:15px; height:15px; flex:none; color:var(--blue); }
.cal .note{ margin-top:16px; font-size:12.5px; color:var(--muted); line-height:1.55; }
.cal .mo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal .mo .m{ font-weight:600; }
.cal .mo .nav{ display:flex; gap:6px; }
.cal .mo button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.cal .mo button:hover{ border-color:var(--blue); color:var(--blue); }
.cal .mo svg{ width:13px; height:13px; }
.cal .dow, .cal .days{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal .dow span{ text-align:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-bottom:6px; }
.cal .days b{ aspect-ratio:1; display:grid; place-items:center; border-radius:10px; font-weight:500; font-size:13.5px; color:var(--muted); opacity:.4; }
.cal .days b.free{ opacity:1; color:var(--blue); background:color-mix(in srgb, var(--blue) 8%, #fff); cursor:pointer; }
.cal .days b.free:hover{ background:color-mix(in srgb, var(--blue) 16%, #fff); }
.cal .days b.on{ background:var(--blue); color:#fff; opacity:1; }
.cal .slots{ display:grid; gap:8px; align-content:start; }
.cal .slots .lb{ font-size:12.5px; color:var(--muted); margin-bottom:2px; }
.cal .slots a{ display:block; text-align:center; padding:11px 8px; border:1px solid color-mix(in srgb, var(--blue) 26%, var(--line)); border-radius:10px; font-weight:600; font-size:13.5px; color:var(--blue); }
.cal .slots a:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cal .tz{ margin-top:12px; font-size:12px; color:var(--muted); }
@media (max-width:900px){ .cal{ grid-template-columns:1fr; } .cal .col + .col{ border-left:none; border-top:1px solid var(--line); } .cal .slots{ grid-template-columns:repeat(3,1fr); } .cal .slots .lb{ grid-column:1 / -1; } }

/* Event-type chooser cards */
.evt{ display:grid; gap:10px; padding:26px; background:#fff; border:1px solid var(--line); border-radius:var(--leaf); transition:border-color .2s ease, box-shadow .2s ease; }
.evt:hover{ border-color:color-mix(in srgb, var(--blue) 30%, var(--line)); box-shadow:var(--shadow-card); }
.evt.sel{ border-color:var(--blue); box-shadow:var(--shadow-card); }
.evt h3{ font-family:var(--f-display); font-weight:400; font-size:22px; color:var(--ink); }
.evt p{ color:var(--muted); font-size:14.5px; line-height:1.6; }
.evt .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Quiet fallback when the third-party embed cannot load */
.fallback{ background:color-mix(in srgb, var(--yellow) 14%, var(--white)); border:1px solid var(--line); border-radius:var(--leaf); padding:28px; display:grid; gap:10px; justify-items:start; }
.fallback h3{ font-family:var(--f-display); font-weight:400; font-size:21px; }
.fallback p{ color:var(--muted); font-size:14.5px; max-width:52ch; }

/* Logistics table */
.sched{ display:grid; gap:0; }
.sched div{ display:grid; grid-template-columns:92px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.sched div:last-child{ border-bottom:none; }
.sched dt{ font-weight:600; color:var(--blue); }
.sched dd{ margin:0; color:var(--muted); }

/* Modal variant of the booking embed (landing pages) */
.modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(20,42,44,.42); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.modal.open{ display:flex; }
.modal .sheet{ width:min(1000px,100%); max-height:88vh; overflow:auto; background:var(--ivory); border-radius:var(--leaf); padding:18px; box-shadow:0 40px 90px -40px rgba(20,55,59,.7); }
.modal .bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 8px 14px; }
.modal .bar .t{ font-family:var(--f-display); font-size:20px; }
.modal .x{ width:40px; height:40px; border-radius:var(--leaf-sm); border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.modal .x svg{ width:16px; height:16px; }
@media (max-width:520px){ .modal{ padding:10px; } .modal .sheet{ padding:12px; max-height:92vh; } }

/* Live cal.diy embed (embed.js, auto-height + transparent) inside the designed frame (implementation wiring) */
.embed .inner{ background:#fff; }
.embed .inner .cal-host{ min-height:540px; padding:10px 6px 16px; }
.embed .inner iframe{ width:100%; border:0; display:block; }