/* Identomat booking calendar. Served by the Webflow Cloud app. Cal.com-style layout, Identomat styling. */
.zb {
  --zb-accent: #591EFF;
  --zb-accent-hover: #4A12E6;
  --zb-accent-soft: #F3F0FF;
  --zb-accent-soft-2: #E7E0FF;
  --zb-text: #181D27;
  --zb-muted: #667085;
  --zb-faint: #C4C8D4;
  --zb-border: #E9EAF2;
  --zb-bg: #FFFFFF;
  font-family: inherit; color: var(--zb-text); background: var(--zb-bg);
  border: 1px solid var(--zb-border); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -8px rgba(40, 20, 120, .14);
  box-sizing: border-box; width: 100%; overflow: hidden;
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
}
.zb *, .zb *::before, .zb *::after { box-sizing: border-box; }
.zb button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.zb button:focus-visible { outline: 2px solid var(--zb-accent); outline-offset: 2px; }
.zb [hidden] { display: none !important; }
.zb svg { flex: none; }

/* ---- Header (event info) ---- */
.zb-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--zb-border); position: relative; }
.zb-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zb-accent); margin-bottom: 6px; }
.zb-title { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.zb-facts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.zb-facts li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--zb-muted); font-weight: 500; }

/* ---- Body: calendar + times (stacked; side by side when wide) ---- */
.zb-body { display: grid; grid-template-columns: 1fr; }
@container (min-width: 700px) {
  .zb-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .zb-times { border-top: 0 !important; border-left: 1px solid var(--zb-border); }
  .zb-list { max-height: 352px; }
}

.zb-cal { padding: 18px 24px 16px; }
.zb-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.zb-month { font-weight: 600; font-size: 16px; }
.zb-month span { color: var(--zb-muted); font-weight: 500; }
.zb-arrows { display: flex; gap: 4px; }
.zb-arrow { width: 34px; height: 34px; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--zb-text) !important; }
.zb-arrow:hover:not(:disabled) { background: var(--zb-accent-soft) !important; color: var(--zb-accent) !important; }
.zb-arrow:disabled { color: var(--zb-faint) !important; cursor: default; }

.zb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; justify-items: center; }
.zb-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--zb-muted); padding: 6px 0 4px; text-transform: uppercase; letter-spacing: .06em; }
.zb-day { width: 100%; max-width: 40px; aspect-ratio: 1 / 1; height: auto; justify-self: center; border-radius: 50% !important; font-size: 14px; font-weight: 500; position: relative; color: var(--zb-faint) !important; display: flex !important; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.zb-day:disabled { cursor: default; }
.zb-day.is-open { background: var(--zb-accent-soft) !important; color: var(--zb-accent) !important; font-weight: 600; }
.zb-day.is-open:hover { background: var(--zb-accent-soft-2) !important; }
.zb-day.is-selected, .zb-day.is-selected:hover { background: var(--zb-accent) !important; color: #fff !important; }
.zb-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }

/* ---- Times ---- */
.zb-times { padding: 16px 24px 20px; border-top: 1px solid var(--zb-border); }
.zb-times-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zb-times-title { font-weight: 600; font-size: 15px; }
.zb-times-title span { color: var(--zb-muted); font-weight: 500; }
.zb-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: #F2F3F7; }
.zb-toggle button { font-size: 12px; font-weight: 600; padding: 4px 10px !important; border-radius: 999px !important; color: var(--zb-muted) !important; }
.zb-toggle button.is-on { background: #fff !important; color: var(--zb-text) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }

.zb-scroll { position: relative; }
.zb-scroll::before, .zb-scroll::after { content: ""; position: absolute; left: 0; right: 10px; height: 28px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
.zb-scroll::before { top: 0; background: linear-gradient(#fff, rgba(255,255,255,0)); }
.zb-scroll::after { bottom: 0; background: linear-gradient(rgba(255,255,255,0), #fff); }
.zb-scroll.has-top::before, .zb-scroll.has-bottom::after { opacity: 1; }
.zb-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px 10px 2px 2px; margin: -2px -10px -2px -2px; scrollbar-gutter: stable; }
@supports not selector(::-webkit-scrollbar) { .zb-list { scrollbar-width: thin; scrollbar-color: #CFD2E0 transparent; } }
.zb-list::-webkit-scrollbar { width: 6px; }
.zb-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.zb-list::-webkit-scrollbar-track { background: #F2F3F7; border-radius: 999px; }
.zb-list::-webkit-scrollbar-thumb { background: #CFD2E0; border-radius: 999px; }
.zb-list::-webkit-scrollbar-thumb:hover { background: #B4B8CC; }
.zb-slot { height: 44px; border: 1px solid var(--zb-border) !important; border-radius: 999px !important; font-size: 14px; font-weight: 600; color: var(--zb-text) !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; transition: border-color .12s, background .12s; }
.zb-slot:hover { border-color: var(--zb-accent) !important; }
.zb-slot .zb-dot { width: 6px; height: 6px; border-radius: 50%; background: #12B76A; }
.zb-slot.is-selected { background: var(--zb-accent-soft) !important; border-color: var(--zb-accent-soft) !important; color: var(--zb-accent) !important; }

.zb-empty { color: var(--zb-muted); font-size: 14px; margin: 4px 0 0; }
.zb-link { color: var(--zb-accent) !important; font-weight: 600; text-decoration: underline; }
.zb-msg { font-size: 13px; color: #B42318; margin: 10px 0 0; }
.zb-msg:empty { display: none; }
.zb-skel { height: 44px; border-radius: 999px; background: linear-gradient(90deg, #F2F3F7 25%, #E9EBF2 37%, #F2F3F7 63%); background-size: 400% 100%; animation: zb-shimmer 1.2s ease infinite; }
@keyframes zb-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Footer: Back (left) · Book meeting (right) ---- */
.zb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--zb-border); background: #fff; }
.zb-back { height: 44px; padding: 0 16px 0 10px !important; border-radius: 999px !important; font-size: 14px; font-weight: 600; color: var(--zb-text) !important; display: inline-flex !important; align-items: center; gap: 4px; border: 1px solid var(--zb-border) !important; }
.zb-back:hover { border-color: var(--zb-accent) !important; color: var(--zb-accent) !important; }
.zb-book { height: 44px; padding: 0 24px !important; border-radius: 999px !important; background: var(--zb-accent) !important; color: #fff !important; font-size: 15px; font-weight: 600; display: inline-flex !important; align-items: center; gap: 8px; transition: background .12s, opacity .12s; }
.zb-book:hover:not(:disabled) { background: var(--zb-accent-hover) !important; }
.zb-book:disabled { background: #E4E2F2 !important; color: #9A97B4 !important; cursor: not-allowed; }
.zb-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: zb-spin .7s linear infinite; }
@keyframes zb-spin { to { transform: rotate(360deg); } }
.zb > .zb-msg { margin: 0; padding: 0 20px 10px; }

/* ---- Fill mode: the widget takes 100% of its container's height; the time list scrolls ---- */
.zb--fill { height: 100%; display: flex; flex-direction: column; }
.zb--fill .zb-head { flex: none; }
.zb--fill .zb-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.zb--fill .zb-cal { flex: none; }
.zb--fill .zb-times { flex: 1 1 auto; min-height: 140px; display: flex; flex-direction: column; padding-bottom: 0; }
.zb--fill .zb-times-head { flex: none; margin-bottom: 0; padding-bottom: 6px; }
.zb--fill .zb-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.zb--fill .zb-list { flex: 1 1 auto; min-height: 0; max-height: none; align-content: start; margin: 0 -10px 0 -2px; padding: 8px 10px 16px 2px; }
.zb--fill .zb-list::-webkit-scrollbar-track { margin: 8px 0; }
.zb--fill .zb-foot { flex: none; margin-top: auto; }
@container (min-width: 700px) {
  .zb--fill .zb-body { display: grid; grid-template-rows: minmax(0, 1fr); }
  .zb--fill .zb-list { max-height: none; }
}
.zb--fill .zb-done { flex: 1; overflow-y: auto; }

/* ---- Details fallback (only when no form was filled) ---- */
.zb-confirm { padding: 16px 24px 20px; border-top: 1px solid var(--zb-border); display: grid; gap: 10px; }
.zb-confirm input { width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--zb-border); border-radius: 12px; font: inherit; font-size: 14px; }

/* ---- Done ---- */
.zb-done { padding: 32px 24px 28px; text-align: center; }
.zb-done-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #ECFDF3; color: #12B76A; display: flex; align-items: center; justify-content: center; }
.zb-done h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.zb-done > p { margin: 0 auto 20px; color: var(--zb-muted); font-size: 14px; max-width: 340px; line-height: 1.5; }
.zb-rows { text-align: left; border-top: 1px solid var(--zb-border); padding-top: 16px; display: grid; grid-template-columns: 72px 1fr; gap: 12px 12px; font-size: 14px; }
.zb-rows dt { font-weight: 600; margin: 0; }
.zb-rows dd { margin: 0; color: var(--zb-muted); }
.zb-rows dd strong { color: var(--zb-text); font-weight: 600; }

.zb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.zb-ts { margin-top: 12px; }
.zb-fallback iframe { width: 100%; height: 760px; border: 0; display: block; }