@import url("../fonts/poppins.css");
:root{color-scheme:dark;font-family:Poppins,Arial,Helvetica,sans-serif;--booking-red:#e32636;--cal-bg:#010101;--cal-fg:#e8e8e8;--cal-muted:#9aa4b5;--cal-border:rgba(255,255,255,.14);--cal-border-soft:rgba(255,255,255,.10);--cal-surface:rgba(255,255,255,.035);--cal-surface-soft:rgba(255,255,255,.025);--cal-grid:var(--cal-surface);--cal-button:rgba(255,255,255,.08);--cal-button-active:rgba(255,255,255,.16);--cal-option-bg:#111}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;padding:0;background:var(--cal-bg);color:var(--cal-fg)}
button,input,textarea,select{font:inherit}
button{color:inherit}
[data-booking-root]{width:100%;height:100%}
.calendar-shell{width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:12px}
.period-bar{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.mode-rail{display:flex;align-items:center;gap:8px}
.mode-button{height:30px;padding:0 10px;border:1px solid var(--cal-border);border-radius:8px;background:var(--cal-button);color:var(--cal-muted);font-weight:800;cursor:pointer}
.mode-button.is-active{background:var(--cal-button-active);color:var(--cal-fg)}
.period-nav{min-width:280px;display:grid;grid-template-columns:36px minmax(180px,1fr) 36px;align-items:center;gap:8px}
.period-button{width:36px;height:30px;padding:0;border:1px solid var(--cal-border);border-radius:8px;background:var(--cal-button);color:var(--cal-fg);font-weight:900;cursor:pointer}
.period-label{min-width:0;color:var(--cal-fg);font-size:16px;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.period-spacer{min-width:0}
.calendar-content{position:relative;width:100%;height:calc(100vh - 176px);min-height:420px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;overflow:hidden}
.calendar-content.with-day{grid-template-columns:max-content minmax(0,1fr);justify-content:center;gap:0;padding:0 6px}
.month-pane{width:100%;height:100%;min-width:0;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:8px;transition:transform 220ms ease,width 220ms ease}
.month-pane.shifted{width:auto;justify-content:flex-start}
.month-overview{width:auto;height:100%;max-width:100%;aspect-ratio:1/1;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center}
.month-frame{width:100%;max-width:100%;height:100%;min-height:0;display:flex;flex-direction:column;background:var(--cal-surface);border:1px solid var(--cal-border);border-radius:8px;overflow:hidden}
.weekday-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--cal-surface-soft);border-bottom:1px solid var(--cal-border)}
.weekday{min-width:0;padding:12px 10px;border-left:1px solid var(--cal-border);color:var(--cal-fg);font-size:15px;font-weight:800;text-align:center}
.weekday:first-child{border-left:0}
.month-grid{height:calc(100% - 44px);min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}
.month-day{position:relative;min-width:0;padding:12px;border:0;border-left:1px solid var(--cal-border-soft);border-top:1px solid var(--cal-border-soft);background:transparent;color:var(--cal-fg);text-align:left;cursor:pointer;overflow:hidden}
.month-day:nth-child(7n+1){border-left:0}
.month-day:nth-child(-n+7){border-top:0}
.month-day.is-outside{background:var(--cal-surface-soft);color:var(--cal-muted)}
.month-day.is-past{opacity:.42;cursor:not-allowed}
.month-day.is-selected,.month-day.is-today{background:var(--cal-button)}
.month-day.is-today{box-shadow:inset 0 0 0 2px var(--booking-red)}
.month-day.is-unavailable{cursor:default}
.month-day.is-hidden-day .day-number{visibility:hidden}
.month-day.is-hidden-day .booking-count{display:none}
.day-number{font-size:24px;font-weight:900;white-space:nowrap}
.month-day.is-selected .day-number{text-shadow:0 0 10px rgba(255,255,255,.72)}
.month-day.is-today .day-number{color:var(--booking-red);text-shadow:none}
.day-marker{position:absolute;right:10px;bottom:8px;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#141820;font-size:12px;font-weight:900;line-height:1;box-shadow:0 0 8px currentColor}
.booking-count{position:absolute;right:10px;bottom:8px;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--booking-red);color:#fff;font-size:12px;font-weight:900;line-height:1;box-shadow:none}
.day-pane{width:100%;height:100%;min-width:0;min-height:0;padding:8px 18px;background:transparent;color:var(--cal-fg);animation:day-in 220ms ease}
.day-pane-inner,.week-pane{width:100%;height:100%;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.week-pane{padding:8px}
.mobile-day-below{display:none}
@keyframes day-in{from{transform:translateX(26px);opacity:0}to{transform:translateX(0);opacity:1}}
.week-frame{width:100%;height:100%;max-width:100%;max-height:100%;overflow:auto;border:1px solid var(--cal-border);border-radius:8px;background:var(--cal-grid);background-clip:padding-box;scrollbar-width:none}
.week-frame::-webkit-scrollbar{display:none}
.week-header{position:sticky;top:0;z-index:8;min-width:0;width:100%;display:grid;background:var(--cal-grid);border-bottom:1px solid var(--cal-border)}
.week-head{min-width:0;padding:12px 10px;border-left:1px solid var(--cal-border);background:transparent}
.week-head:first-child{border-left:0}
.week-headline{display:flex;justify-content:space-between;align-items:center;gap:8px}
.week-head-label{color:var(--cal-fg);font-size:13px;font-weight:800}
.week-head-number{color:var(--cal-muted);font-size:20px;font-weight:900}
.week-head.is-selected{background:var(--cal-button)}
.week-head.is-selected .week-head-number{color:var(--cal-fg)}
.week-count{color:var(--cal-muted);font-size:11px;font-weight:600}
.time-label{padding:12px 10px;color:var(--cal-muted);font-size:12px;font-weight:700}
.week-body{min-width:0;width:100%;display:grid;min-height:0}
.week-row{min-width:0;min-height:54px;width:100%;display:grid;border-bottom:1px solid var(--cal-border-soft)}
.week-time{display:flex;align-items:center;padding:0 12px;border-right:1px solid var(--cal-border);color:var(--cal-muted);font-size:12px;font-weight:800}
.week-cell{min-width:0;height:54px;min-height:0;padding:7px 8px;border:0;border-right:1px solid var(--cal-border-soft);background:transparent;color:var(--cal-fg);overflow:hidden;cursor:pointer}
.week-cell:hover{background:var(--cal-button)}
.week-cell.is-selected{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cal-fg) 42%,transparent)}
.week-cell.is-busy{background:rgba(227,38,54,.12);color:var(--booking-red);cursor:not-allowed}
.cell-state{display:block;font-size:11px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.booking-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:var(--cal-bg)}
.booking-card{width:min(720px,100%);min-height:0;margin:0 auto;padding:28px;border:1px solid var(--cal-border);border-radius:8px;background:var(--cal-bg);color:var(--cal-fg);box-shadow:none;animation:booking-fade 220ms ease both}
.booking-card h2{margin:0 0 6px;text-align:center;font-size:22px;font-weight:800}
.booking-card p{margin:0 0 22px;color:var(--cal-muted);text-align:center}
.booking-form{display:grid;grid-template-columns:1fr;gap:12px}
.booking-field{display:grid;gap:7px;margin:0}
.booking-time-range{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.booking-field span{color:var(--cal-muted);font-size:12px;font-weight:800}
.booking-field input,.booking-field textarea,.booking-field select{width:100%;padding:12px;border:1px solid var(--cal-border);border-radius:8px;background-color:var(--cal-option-bg);color:var(--cal-fg);outline:none;color-scheme:inherit}
.booking-field select option{background:var(--cal-option-bg);color:var(--cal-fg)}
.booking-kind{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.booking-kind legend{margin:0 0 7px;color:var(--cal-muted);font-size:12px;font-weight:800}
.booking-kind label{position:relative;display:flex;min-height:44px;align-items:center;justify-content:center;padding:10px;border:1px solid var(--cal-border);border-radius:8px;background:var(--cal-surface);cursor:pointer}
.booking-kind input{position:absolute;opacity:0;pointer-events:none}
.booking-kind label:has(input:checked){border-color:var(--booking-red);background:var(--cal-surface);box-shadow:none}
.booking-kind span{color:var(--cal-fg);font-size:13px;font-weight:800;text-align:center}
.booking-field input[readonly]{color:var(--cal-muted);cursor:default}
.booking-field input:focus,.booking-field textarea:focus,.booking-field select:focus{border-color:color-mix(in srgb,var(--cal-fg) 34%,transparent);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--cal-fg) 8%,transparent)}
.booking-field input::placeholder,.booking-field textarea::placeholder{color:var(--cal-muted)}
.booking-field textarea{min-height:112px;resize:vertical}
.booking-submit,.booking-back{width:100%;min-height:42px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:800}
.booking-submit{border:1px solid var(--booking-red);background:var(--booking-red);color:#fff}
.booking-submit:disabled{opacity:.65;cursor:wait}
.booking-back{border:1px solid var(--cal-border);background:var(--cal-surface);color:var(--cal-fg)}
.booking-message{color:var(--cal-muted);font-size:13px}
.booking-success{text-align:center}
.booking-success-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border:1px solid rgba(78,211,141,.48);border-radius:50%;background:rgba(78,211,141,.12);color:#67dfa0;font-size:30px;font-weight:900}
.booking-success .booking-submit{margin-top:4px}
@keyframes booking-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .period-bar{grid-template-columns:1fr}
  .mode-rail,.period-spacer{display:none}
  .period-nav{width:100%;min-width:0;grid-template-columns:38px minmax(0,1fr) 38px}
  .period-button{width:38px;height:34px}
  .calendar-content{height:calc(100vh - 142px);min-height:420px;display:flex;flex-direction:column}
  .calendar-content.with-day{display:flex;gap:12px}
  .month-pane{height:100%;padding:0}
  .month-overview{width:100%;height:100%;max-width:100%;aspect-ratio:auto}
  .month-frame{width:100%;height:100%}
  .month-pane.mobile-collapsed{display:none}
  .day-pane{display:none}
  .mobile-day-below{width:100%;height:100%;min-width:0;min-height:0;display:flex;flex-direction:column}
  .week-pane{height:calc(100vh - 190px);padding:0}
  .booking-card{padding:14px}
  .booking-kind{grid-template-columns:1fr}
}

/* Standalone website page */
:root{color-scheme:inherit;--cal-bg:transparent;--cal-fg:#171719;--cal-muted:#666971;--cal-border:rgba(17,17,19,.18);--cal-border-soft:rgba(17,17,19,.10);--cal-surface:#f1f1f3;--cal-surface-soft:#e7e7ea;--cal-grid:#f1f1f3;--cal-button:rgba(17,17,19,.07);--cal-button-active:rgba(17,17,19,.13);--cal-option-bg:#fff}
html,body{height:auto;min-height:100%;background:var(--background);color:var(--foreground)}
.booking-page{min-height:calc(100dvh - 4.5625rem);display:grid;place-items:center;padding:clamp(1.5rem,4vw,4rem)}
.booking-page-inlay{width:min(74rem,100%)}
.booking-page [data-booking-root]{width:100%;height:auto}
.booking-page .calendar-shell{width:100%;min-height:0;justify-content:initial;gap:1rem}
.booking-page .period-button{border-color:color-mix(in srgb,var(--foreground) 22%,transparent);background:color-mix(in srgb,var(--foreground) 7%,transparent);color:var(--foreground)}
.booking-page .period-label{color:var(--foreground)}
.booking-page .calendar-content{height:min(42rem,calc(100dvh - 13rem));min-height:34rem;gap:1rem;overflow:visible}
.booking-page .calendar-content.with-day{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;padding:0}
.booking-page .month-pane,.booking-page .day-pane{padding:0}
.booking-page .month-pane.shifted{width:100%}
.booking-page .month-frame,.booking-page .week-frame{background:#f1f1f3;border:1px solid rgba(17,17,19,.2);border-radius:.75rem;box-shadow:0 .75rem 2rem rgba(0,0,0,.08)}
.booking-page .week-header{background:#e7e7ea}
.booking-page .booking-modal{position:static;width:100%;min-height:0;padding:0;background:transparent;overflow:visible}
.booking-page .booking-card{width:min(46rem,100%);background:#f1f1f3;border:1px solid rgba(17,17,19,.2);border-radius:.75rem;box-shadow:0 .75rem 2rem rgba(0,0,0,.08)}
@media(max-width:760px){
  .booking-page{width:100%;height:calc(100dvh - 64px - 68px);min-height:0;padding:.75rem 1rem}
  .booking-page-inlay,.booking-page [data-booking-root]{height:100%;min-height:0}
  .booking-page .calendar-shell{height:100%;min-height:0}
  .booking-page .calendar-content{height:auto;min-height:0;flex:1;overflow:hidden}
  .booking-page:has(.calendar-content.with-day){height:auto;min-height:calc(100dvh - 64px - 68px)}
  .booking-page:has(.booking-modal){height:auto;min-height:calc(100dvh - 64px - 68px)}
  .booking-page .calendar-content.with-day{height:auto;min-height:0;flex:none;gap:0;overflow:visible}
  .booking-page .calendar-content.with-day .mobile-day-below,
  .booking-page .calendar-content.with-day .day-pane-inner,
  .booking-page .calendar-content.with-day .week-frame{height:auto;max-height:none;overflow:visible}
  .booking-page .booking-modal{display:block}
  .booking-page .booking-card{width:100%;padding:1.125rem}
}