/* ===== Calendar ===== */
.sbl-cal { margin: 8px 0 18px; }
.sbl-cal__head { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.sbl-cal__title { font-size:22px; font-weight:700; }
.sbl-cal__nav { width:38px; height:38px; border-radius:8px; border:1px solid #d1d5db; background:#fff; cursor:pointer; }
.sbl-cal__legend { display:flex; gap:14px; justify-content:center; margin-bottom:10px; color:#374151; font-size:14px; }

/* 图例：蓝色“◯ 予約可”（不换行） */
.sbl-legend-free { color:#2563eb; }
.sbl-cal__legend span:first-child { font-size:0; }
.sbl-cal__legend span:first-child::before{ content:"◯ 予約可"; font-size:14px; color:#2563eb; }

.sbl-cal__grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.sbl-cal__cell { background:#fff; border:1px solid #e5e7eb; border-radius:10px; min-height:140px; padding:8px; }
.sbl-cal__dow { background:#f9fafb; font-weight:700; text-align:center; min-height:auto; }
.sbl-cal__empty { background:transparent; border:none; }

.sbl-cal__dayhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#111827; }
.sbl-daynum { font-weight:700; }
.sbl-dowbadge { display:none; font-size:12px; padding:2px 6px; border-radius:999px; background:#e5e7eb; color:#374151; }
.sbl-dow-0 { background:#fee2e2; color:#b91c1c; }
.sbl-dow-6 { background:#dbeafe; color:#1d4ed8; }

.sbl-cal__services { display:flex; flex-direction:column; gap:6px; }

/* 服务标签 */
.sbl-badge { display:block; padding:6px 10px; border-radius:8px; color:#fff;
  background: var(--badge-color, #111827); border:1px solid rgba(0,0,0,.06); text-align:left; cursor:pointer; }

/* Loading */
.sbl-cal__loading { grid-column:1 / -1; text-align:center; color:#6b7280; padding:20px 0; }

/* ===== Modal ===== */
.sbl-modal { position:fixed; inset:0; display:none; z-index:100000; }
.sbl-modal.is-open { display:block; }
.sbl-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.4); z-index:0; }
.sbl-modal__dialog {
  position:relative; z-index:1; max-width:820px;
  margin: var(--sbl-modal-offset, 96px) auto 6vh;
  background:#fff; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.sbl-modal__close { position:absolute; right:10px; top:8px; width:36px; height:36px; line-height:36px; text-align:center;
  border:none; background:transparent; font-size:20px; cursor:pointer; border-radius:8px; z-index:2; }
.sbl-modal__close:hover { background:#f3f4f6; }
.sbl-modal__title { font-size:18px; font-weight:700; padding:14px 16px 8px; margin:0; }
.sbl-modal__info { display:flex; gap:8px; padding:0 16px 8px; color:#374151; align-items:center; }
.sbl-modal__slots { padding:12px 16px 16px; max-height:60vh; overflow:auto; background:#fff; }
.sbl-modal__actions { display:flex; justify-content:flex-end; gap:10px; padding:12px 16px 16px; border-top:1px solid #f3f4f6; }

/* ===== Week grid (modal) ===== */
.sbl-week { border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.sbl-week__bar { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.sbl-week__month { font-weight:700; }
.sbl-week__nav { border:1px solid #d1d5db; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px; }
.sbl-week__grid { display:grid; grid-template-columns: 90px repeat(7, 1fr); }
.sbl-week__head .sbl-week__th,
.sbl-week__row  .sbl-week__td { border-bottom:1px solid #e5e7eb; }
.sbl-week__head .sbl-week__th { background:#fff; padding:10px 8px; text-align:center; font-weight:700; color:#111827; }
.sbl-week__th--time { text-align:left; padding-left:12px; }
.sbl-week__date { font-size:14px; }
.sbl-week__dow  { font-size:12px; color:#6b7280; }
.sbl-week__row { display:grid; grid-template-columns: 90px repeat(7, 1fr); }
.sbl-week__td  { padding:8px; display:flex; align-items:center; justify-content:center; min-height:38px; }
.sbl-week__td--time { justify-content:flex-start; padding-left:12px; font-weight:600; color:#111827; }

/* ===== Slot pills ===== */
.sbl-slot { width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.sbl-slot--sm { width:26px; height:26px; }

/* 可预约：纯蓝色空心圆 */
.sbl-slot--free { font-size:0; background:transparent; border:none; cursor:pointer; }
.sbl-slot--free::before { content:"◯"; font-size:18px; color:#2563eb; line-height:1; }
.sbl-slot--free:hover { outline:2px solid rgba(147,197,253,.7); outline-offset:2px; border-radius:999px; }
.sbl-slot--free.is-picked { outline:2px solid #60a5fa; outline-offset:2px; border-radius:999px; }

/* 已承认 / 待审核 */
.sbl-slot--approved { background:#fee2e2; border:1px solid #fecaca; color:#b91c1c; }
.sbl-slot--pending  { background:#fff7ed; border:1px solid #fed7aa; color:#b45309; }

/* ===== Form ===== */
.sbl-form { max-width:760px; padding:16px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.sbl-row { margin-bottom:14px; }
.sbl-row label { display:block; font-weight:600; margin-bottom:6px; }
.sbl-row input[type="text"], .sbl-row input[type="email"], .sbl-row input[type="tel"], .sbl-row textarea { width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; background:#fff; }
.sbl-btn { display:inline-block; background:#111827; color:#fff; padding:10px 16px; border-radius:8px; border:none; cursor:pointer; }
.sbl-btn:disabled { opacity:.6; cursor:wait; }
.sbl-req { color:#ef4444; }
.sbl-msg { margin-top:10px; font-size:14px; }
.sbl-msg.sbl-ok { color:#059669; }
.sbl-msg.sbl-error { color:#dc2626; }
.sbl-picked { background:#f3f4f6; border:1px dashed #d1d5db; border-radius:8px; padding:8px 10px; color:#111827; }
.sbl-hp { position:absolute; left:-9999px; height:0; width:0; opacity:0; }

/* ===== Responsive ===== */
@media (max-width:900px){
  .sbl-modal__dialog { max-width:95vw; }
}
@media (max-width:640px){
  .sbl-cal__grid { grid-template-columns: repeat(2, 1fr); }
  .sbl-cal__dow { display:none; }
  .sbl-dowbadge { display:inline-block; }
  .sbl-modal__dialog { margin: var(--sbl-modal-offset, 72px) 12px 8vh; }
  .sbl-week__grid, .sbl-week__row { grid-template-columns: 70px repeat(7, 1fr); }
  .sbl-week__td--time { padding-left:8px; }
}