:root {
  --detbc-navy: #12304a;
  --detbc-blue: #146b8c;
  --detbc-teal: #19a7a0;
  --detbc-pale: #eaf7f6;
  --detbc-line: #d8e2e8;
  --detbc-ink: #21313c;
  --detbc-muted: #63717a;
  --detbc-danger: #b42318;
  --detbc-success: #16734c;
}

.detbc-app, .detbc-app * { box-sizing: border-box; }
.detbc-app { max-width: 1120px; margin: 28px auto; color: var(--detbc-ink); font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.detbc-toolbar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; }
.detbc-toolbar h2 { min-width: 240px; margin: 0; color: var(--detbc-navy); text-align: center; font-size: clamp(22px, 4vw, 32px); }
.detbc-nav { width: 42px; height: 42px; border: 1px solid var(--detbc-line); border-radius: 50%; background: white; color: var(--detbc-blue); font-size: 20px; cursor: pointer; }
.detbc-nav:hover, .detbc-nav:focus-visible { border-color: var(--detbc-teal); box-shadow: 0 0 0 3px rgba(25, 167, 160, .17); }
.detbc-weekdays, .detbc-calendar { display: grid; grid-template-columns: repeat(7, 1fr); }
.detbc-weekdays { overflow: hidden; border-radius: 12px 12px 0 0; background: var(--detbc-navy); color: white; }
.detbc-weekdays span { padding: 10px 6px; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.detbc-calendar { border-left: 1px solid var(--detbc-line); border-top: 1px solid var(--detbc-line); }
.detbc-day { min-height: 104px; padding: 8px; border-right: 1px solid var(--detbc-line); border-bottom: 1px solid var(--detbc-line); background: #fff; }
.detbc-day-muted { background: #f7f9fa; color: #9ba6ad; }
.detbc-day-number { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; font-weight: 700; }
.detbc-today .detbc-day-number { background: var(--detbc-teal); color: white; }
.detbc-calendar-event { display: block; width: 100%; margin-top: 5px; padding: 5px 6px; overflow: hidden; border: 0; border-radius: 5px; background: var(--detbc-pale); color: var(--detbc-navy); text-align: left; font-size: 11px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.detbc-calendar-event:hover { background: #d3f1ee; }
.detbc-calendar-event:disabled { opacity: .55; cursor: not-allowed; }
.detbc-status-message { min-height: 24px; margin: 12px 0; color: var(--detbc-muted); }
.detbc-event-list { display: grid; gap: 14px; margin-top: 20px; }
.detbc-event-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; border: 1px solid var(--detbc-line); border-radius: 14px; background: white; box-shadow: 0 8px 26px rgba(18, 48, 74, .06); }
.detbc-date-tile { display: grid; place-items: center; align-content: center; width: 58px; height: 64px; border-radius: 10px; background: var(--detbc-navy); color: white; }
.detbc-date-tile strong { font-size: 25px; line-height: 1; }
.detbc-date-tile span { font-size: 11px; font-weight: 800; text-transform: uppercase; }
.detbc-event-copy h3 { margin: 0 0 4px; color: var(--detbc-navy); font-size: 19px; }
.detbc-event-copy p { margin: 3px 0; }
.detbc-event-meta { color: var(--detbc-blue); font-weight: 700; }
.detbc-book-event, .detbc-primary, .detbc-shortcode-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--detbc-blue); color: #fff !important; font: 700 15px/1.2 system-ui, sans-serif; text-decoration: none !important; cursor: pointer; }
.detbc-book-event:hover, .detbc-primary:hover, .detbc-shortcode-button:hover { background: var(--detbc-navy); }
.detbc-book-event:disabled, .detbc-primary:disabled { opacity: .55; cursor: not-allowed; }
.detbc-empty { padding: 24px; border: 1px dashed var(--detbc-line); border-radius: 12px; text-align: center; color: var(--detbc-muted); }
.detbc-modal[hidden] { display: none; }
.detbc-modal { position: fixed; z-index: 999999; inset: 0; display: grid; place-items: center; padding: 20px; }
.detbc-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 31, 46, .72); }
.detbc-modal-card { position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border-radius: 16px; background: white; box-shadow: 0 24px 80px rgba(0, 0, 0, .28); }
.detbc-modal-card h3 { margin: 0 38px 8px 0; color: var(--detbc-navy); font-size: 24px; }
.detbc-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eff3f5; color: var(--detbc-navy); font-size: 25px; cursor: pointer; }
.detbc-modal-when { color: var(--detbc-blue); font-weight: 700; }
.detbc-modal-card label { display: grid; gap: 5px; margin: 14px 0; color: var(--detbc-navy); font-weight: 700; }
.detbc-modal-card input, .detbc-modal-card textarea { width: 100%; padding: 11px 12px; border: 1px solid #bfcbd2; border-radius: 7px; background: #fff; color: var(--detbc-ink); font: inherit; }
.detbc-modal-card input:focus, .detbc-modal-card textarea:focus { border-color: var(--detbc-teal); outline: 3px solid rgba(25, 167, 160, .16); }
.detbc-form-message { margin-top: 12px; font-weight: 650; }
.detbc-error { color: var(--detbc-danger); }
.detbc-success { color: var(--detbc-success); }
.detbc-modal-open { overflow: hidden; }
.detbc-floating-button { position: fixed; z-index: 99990; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 18px; border-radius: 999px; background: var(--detbc-blue); color: #fff !important; box-shadow: 0 10px 30px rgba(18, 48, 74, .28); font: 750 15px/1.2 system-ui, sans-serif; text-decoration: none !important; }
.detbc-floating-button:hover, .detbc-floating-button:focus-visible { background: var(--detbc-navy); transform: translateY(-1px); }

@media (max-width: 720px) {
  .detbc-weekdays { display: none; }
  .detbc-calendar { display: none; }
  .detbc-event-card { grid-template-columns: 54px 1fr; align-items: start; }
  .detbc-date-tile { width: 50px; height: 58px; }
  .detbc-book-event { grid-column: 1 / -1; width: 100%; }
  .detbc-modal-card { padding: 22px; }
  .detbc-floating-button { right: 14px; bottom: 14px; }
}