/* convexa booking widget — lean vanilla CSS, no framework. */
:root {
  --cx-primary: #283583;
  --cx-secondary: #f39200;
  --cx-bg: #f6f7fb;
  --cx-card: #ffffff;
  --cx-text: #1e293b;
  --cx-muted: #64748b;
  --cx-border: #e2e8f0;
  --cx-chip: #eef1fb;
  --cx-radius: 10px;
  --cx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* The server pins data-cx-theme (light/dark/auto) on <html>; only "auto"
   follows the visitor's system. Forced light/dark make embedded widgets
   match their host website regardless of prefers-color-scheme. */
:root[data-cx-theme="dark"] {
  --cx-bg: #10131c;
  --cx-card: #1a1f2e;
  --cx-text: #e6e9f2;
  --cx-muted: #94a3b8;
  --cx-border: #2a3247;
  --cx-chip: #232b45;
}
@media (prefers-color-scheme: dark) {
  :root[data-cx-theme="auto"] {
    --cx-bg: #10131c;
    --cx-card: #1a1f2e;
    --cx-text: #e6e9f2;
    --cx-muted: #94a3b8;
    --cx-border: #2a3247;
    --cx-chip: #232b45;
  }
}
/* Author display rules (.cx-grid { display: grid } etc.) would beat the UA
   stylesheet's [hidden] { display: none } — without this override elements
   toggled via the hidden attribute (success view, consent row) stayed
   visible. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--cx-font); color: var(--cx-text);
  background: var(--cx-bg); line-height: 1.5;
}
.cx-app { max-width: 860px; margin: 0 auto; padding: 20px 16px 12px; }
body[data-embed="1"] .cx-app { padding: 8px 8px 4px; }

.cx-head { margin-bottom: 18px; }
.cx-logo { max-height: 40px; max-width: 180px; margin-bottom: 12px; }
.cx-owner { display: flex; align-items: center; gap: 12px; }
.cx-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cx-border); }
.cx-owner-name { margin: 0; font-size: 0.9rem; color: var(--cx-muted); }
.cx-title { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; }
.cx-desc { margin: 10px 0 0; color: var(--cx-muted); font-size: 0.95rem; white-space: pre-line; }
.cx-meta { margin: 8px 0 0; color: var(--cx-muted); font-size: 0.85rem; }

.cx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 680px) { .cx-grid { grid-template-columns: 1fr; } }

.cx-picker, .cx-form-card {
  background: var(--cx-card); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); padding: 16px;
}
.cx-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cx-nav {
  border: 1px solid var(--cx-border); background: transparent; color: var(--cx-text);
  border-radius: 8px; min-width: 38px; min-height: 34px; cursor: pointer; font-size: 1rem;
  transition: background 150ms ease, border-color 150ms ease;
}
.cx-nav:hover { background: var(--cx-chip); }
.cx-nav:focus-visible { outline: 2px solid var(--cx-primary); outline-offset: 2px; }
.cx-days { max-height: 430px; overflow-y: auto; }
.cx-day { margin-bottom: 14px; }
.cx-day-head { font-weight: 600; font-size: 0.88rem; margin: 0 0 6px; }
.cx-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-slot {
  border: 1px solid var(--cx-border); background: var(--cx-chip); color: var(--cx-text);
  border-radius: 999px; padding: 7px 14px; font-size: 0.88rem; cursor: pointer;
  font-family: inherit; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}
.cx-slot:hover { border-color: var(--cx-primary); transform: translateY(-1px); }
.cx-slot:focus-visible { outline: 2px solid var(--cx-primary); outline-offset: 2px; }
.cx-slot[aria-pressed="true"] { background: var(--cx-primary); border-color: var(--cx-primary); color: #fff; }
.cx-empty { color: var(--cx-muted); font-size: 0.9rem; padding: 8px 0; }
.cx-status { color: var(--cx-muted); font-size: 0.88rem; margin: 6px 0 0; min-height: 1.2em; }

.cx-shimmer { border-radius: 8px; height: 12px; margin: 10px 0; background: linear-gradient(90deg, var(--cx-chip) 25%, var(--cx-border) 50%, var(--cx-chip) 75%); background-size: 200% 100%; animation: cx-sh 1.2s infinite linear; }
@keyframes cx-sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.cx-form-title { margin: 0 0 12px; font-size: 1.05rem; }
.cx-field { display: block; margin-bottom: 12px; font-size: 0.88rem; }
.cx-field span { display: block; margin-bottom: 4px; color: var(--cx-muted); }
.cx-field input, .cx-field select, .cx-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--cx-border); border-radius: 8px;
  background: var(--cx-bg); color: var(--cx-text); font: inherit;
  transition: border-color 150ms ease;
}
.cx-field input:focus-visible, .cx-field select:focus-visible, .cx-field textarea:focus-visible {
  outline: 2px solid var(--cx-primary); outline-offset: 1px; border-color: var(--cx-primary);
}
.cx-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.cx-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 0.85rem; color: var(--cx-muted); }
.cx-check input { margin-top: 3px; accent-color: var(--cx-primary); }
.cx-check a { color: var(--cx-primary); }
.cx-error { color: #b91c1c; background: rgba(185, 28, 28, 0.08); border-radius: 8px; padding: 8px 12px; font-size: 0.88rem; }
.cx-submit {
  width: 100%; border: 0; border-radius: var(--cx-radius); background: var(--cx-primary); color: #fff;
  font: inherit; font-weight: 600; padding: 13px 18px; cursor: pointer;
  transition: filter 150ms ease, opacity 150ms ease;
}
.cx-submit:hover { filter: brightness(1.08); }
.cx-submit:focus-visible { outline: 2px solid var(--cx-secondary); outline-offset: 2px; }
.cx-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.cx-success { background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); padding: 22px; text-align: center; }
.cx-success-title { color: var(--cx-primary); margin: 0 0 14px; }
.cx-success-card {
  display: inline-block; text-align: left; background: var(--cx-chip); border-radius: 8px;
  padding: 12px 18px; margin-bottom: 12px; font-size: 0.95rem;
}
.cx-success-text { color: var(--cx-muted); }
.cx-ics {
  margin-top: 8px; border: 1px solid var(--cx-border); background: transparent; color: var(--cx-text);
  border-radius: 8px; padding: 9px 16px; font: inherit; cursor: pointer; transition: background 150ms ease;
}
.cx-ics:hover { background: var(--cx-chip); }
.cx-ics:focus-visible { outline: 2px solid var(--cx-primary); outline-offset: 2px; }

.cx-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 0.8rem; color: var(--cx-muted); }
.cx-foot a { color: var(--cx-muted); }
body[data-embed="1"][data-branding="0"] .cx-powered { display: none; }

.cx-greeting { margin: 12px 0 0; font-size: 1rem; color: var(--cx-text); }
.cx-blocked { margin: 8px 0 0; }
.cx-blocked-card {
  background: var(--cx-card); border: 1px solid var(--cx-border); border-radius: var(--cx-radius);
  padding: 26px 22px; text-align: center; color: var(--cx-text); font-size: 0.98rem;
}
.cx-blocked-card p { margin: 0 0 4px; }