/*
 * bloc-widget.css  v2.0.0
 * Bloc Scheduling Widget — Styles
 *
 * This file is the single source of truth for all widget visual design.
 * Designers can edit this file independently of bloc-widget.js logic.
 *
 * Embed order (load BEFORE bloc-widget.js):
 *   <link rel="stylesheet" href="css/bloc-widget.css">
 *   <script src="bloc-config.js"></script>
 *   <script src="bloc-widget.js"></script>
 *
 * Theme tokens (--bloc-*) can be overridden per-embed in BlocConfig.theme.
 * See bloc-config.js for available custom properties and examples.
 */

/* ════════════════════════════════════════════════════════════════════════════
   1. ROOT & RESET
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-widget {
  /* ─── Design Tokens — dark mode defaults ──────────────────────────── */
  --bloc-navy:         #0C1929;
  --bloc-surface:      rgba(255, 255, 255, 0.045);
  --bloc-surface-hi:   rgba(255, 255, 255, 0.075);
  --bloc-border:       rgba(255, 255, 255, 0.09);
  --bloc-border-hi:    rgba(255, 255, 255, 0.17);
  --bloc-teal:         #00C2A8;
  --bloc-teal-hi:      #2FE0C7;
  --bloc-teal-dim:     rgba(0, 194, 168, 0.11);
  --bloc-teal-border:  rgba(0, 194, 168, 0.28);
  --bloc-teal-glow:    rgba(0, 194, 168, 0.22);
  --bloc-text:         #ffffff;
  --bloc-text-muted:   rgba(255, 255, 255, 0.52);
  --bloc-text-faint:   rgba(255, 255, 255, 0.26);
  --bloc-danger:       rgba(239, 68, 68, 0.85);
  --bloc-radius:       20px;
  --bloc-radius-sm:    11px;
  --bloc-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --bloc-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  background:             var(--bloc-navy);
  border-radius:          var(--bloc-radius);
  padding:                28px;
  color:                  var(--bloc-text);
  font-family:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position:               relative;
  overflow:               hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:  "tnum";
}

/* Ambient glow — two overlapping radial layers */
.bloc-widget::before {
  content:        "";
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        0;
  background:
    radial-gradient(ellipse 70% 55% at 88%  8%, rgba(0, 194, 168, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 10% 85%, rgba(0, 115, 200, 0.05) 0%, transparent 60%);
}

.bloc-widget *                       { box-sizing: border-box; }
.bloc-widget button                  { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
.bloc-widget input,
.bloc-widget textarea,
.bloc-widget select                  { font-family: inherit; }


/* ════════════════════════════════════════════════════════════════════════════
   2. HEADER
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  margin-bottom:   22px;
  position:        relative;
  z-index:         1;
}

.bloc-header-text { flex: 1; min-width: 0; }

.bloc-header-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  color:          var(--bloc-teal);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin:         0 0 7px;
}

.bloc-eyebrow-dot {
  width:         5px;
  height:        5px;
  background:    var(--bloc-teal);
  border-radius: 50%;
  flex-shrink:   0;
  box-shadow:    0 0 6px rgba(0, 194, 168, 0.70);
  animation:     bloc-pulse-dot 2.4s ease infinite;
}

@keyframes bloc-pulse-dot {
  0%,  100% { opacity: 1;    transform: scale(1);   }
  50%       { opacity: 0.45; transform: scale(0.7); }
}

.bloc-header-title {
  color:          var(--bloc-text);
  font-size:      21px;
  font-weight:    800;
  margin:         0;
  letter-spacing: -0.03em;
  line-height:    1.20;
}

/* Header right — toggle + badge */
.bloc-header-right {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  flex-shrink: 0;
  margin-left: 16px;
}
.bloc-header-right .bloc-duration-badge { margin-left: 0; }

/* Duration badge */
.bloc-duration-badge {
  background:    var(--bloc-teal-dim);
  border:        1px solid var(--bloc-teal-border);
  border-radius: var(--bloc-radius-sm);
  padding:       9px 13px;
  text-align:    center;
  flex-shrink:   0;
  box-shadow:    0 2px 8px rgba(0, 194, 168, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bloc-duration-icon { color: var(--bloc-teal); display: block; margin-bottom: 3px; }

.bloc-duration-text {
  color:          var(--bloc-text);
  font-size:      12px;
  font-weight:    800;
  margin:         0;
  letter-spacing: -0.01em;
}

/* Mode toggle — 3-button segmented group (Dark | System | Light) */
.bloc-mode-seg {
  display:       inline-flex;
  align-items:   center;
  background:    var(--bloc-surface);
  border:        1px solid var(--bloc-border);
  border-radius: 20px;
  padding:       3px;
  gap:           1px;
  flex-shrink:   0;
  transition:    border-color 0.18s var(--bloc-ease);
}

.bloc-mode-seg-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          22px;
  background:      transparent;
  border:          1px solid transparent;
  border-radius:   14px;
  cursor:          pointer;
  color:           var(--bloc-text-faint);
  padding:         0;
  transition:      background 0.18s var(--bloc-ease), color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.bloc-mode-seg-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

.bloc-mode-seg-btn:hover {
  background:   var(--bloc-teal-dim);
  border-color: var(--bloc-teal-border);
  color:        var(--bloc-text-muted);
}
.bloc-mode-seg-btn:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.35);
}
.bloc-mode-seg-btn.active {
  background:   var(--bloc-teal-dim);
  border-color: var(--bloc-teal-border);
  color:        var(--bloc-teal);
  box-shadow:   0 1px 4px rgba(0, 194, 168, 0.18);
}


/* ════════════════════════════════════════════════════════════════════════════
   3. BODY LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-body {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
  position:              relative;
  z-index:               1;
  align-items:           stretch;
}

@media (max-width: 600px) {
  .bloc-body        { grid-template-columns: 1fr; }
  .bloc-widget      { padding: 18px; }
  .bloc-right-panel { min-height: 180px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   4. NEXT AVAILABLE CHIP
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-next-avail {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  background:      linear-gradient(135deg, rgba(0, 194, 168, 0.10) 0%, rgba(0, 194, 168, 0.05) 100%);
  border:          1px solid var(--bloc-teal-border);
  border-radius:   10px;
  padding:         9px 11px 9px 12px;
  margin-bottom:   12px;
  cursor:          pointer;
  text-align:      left;
  transition:      background 0.20s var(--bloc-ease), box-shadow 0.20s, transform 0.16s var(--bloc-ease);
}
.bloc-next-avail:hover {
  background: linear-gradient(135deg, rgba(0, 194, 168, 0.17) 0%, rgba(0, 194, 168, 0.09) 100%);
  box-shadow: 0 2px 12px rgba(0, 194, 168, 0.18);
  transform:  translateY(-1px);
}
.bloc-next-avail:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.35); }
.bloc-next-avail:active        { transform: translateY(0); transition: transform 0.08s; }

.bloc-next-avail-inner  { display: flex; flex-direction: column; gap: 2px; }
.bloc-next-avail-kicker {
  color:          var(--bloc-text-faint);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.bloc-next-avail-label { color: var(--bloc-teal); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; }
.bloc-next-avail-arrow {
  color:       var(--bloc-teal);
  flex-shrink: 0;
  opacity:     0.70;
  transition:  opacity 0.15s, transform 0.20s var(--bloc-ease);
}
.bloc-next-avail:hover .bloc-next-avail-arrow { opacity: 1; transform: translateX(3px); }


/* ════════════════════════════════════════════════════════════════════════════
   5. CALENDAR COLUMN
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-cal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   11px;
}

.bloc-cal-title {
  font-size:      13px;
  font-weight:    800;
  color:          var(--bloc-text);
  letter-spacing: -0.02em;
}

.bloc-cal-mode-tag {
  color:          var(--bloc-text-faint);
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:     var(--bloc-surface);
  border:         1px solid var(--bloc-border);
  border-radius:  5px;
  padding:        3px 6px;
}

/* Flex row wrapping mode-tag + nav buttons in month view */
.bloc-cal-header-controls {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.bloc-cal-nav { display: flex; gap: 4px; }

.bloc-nav-btn {
  width:           27px;
  height:          27px;
  background:      var(--bloc-surface);
  border:          1px solid var(--bloc-border);
  border-radius:   7px;
  color:           var(--bloc-text-muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  line-height:     1;
  transition:      background 0.15s var(--bloc-ease), color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.bloc-nav-btn:hover {
  background:   var(--bloc-teal-dim);
  color:        var(--bloc-teal);
  border-color: var(--bloc-teal-border);
  box-shadow:   0 2px 8px rgba(0, 194, 168, 0.15);
  transform:    translateY(-1px);
}
.bloc-nav-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.35); }
.bloc-nav-btn:active        { transform: translateY(0); box-shadow: none; transition: transform 0.07s; }

.bloc-day-hdr-row        { display: grid; gap: 4px; margin-bottom: 5px; }
.bloc-day-hdr            { text-align: center; font-size: 8px; color: var(--bloc-text-faint); font-weight: 700; padding: 3px 0; letter-spacing: 0.07em; text-transform: uppercase; }
.bloc-day-hdr-row.cols5  { grid-template-columns: repeat(5, 1fr); }
.bloc-day-hdr-row.cols7  { grid-template-columns: repeat(7, 1fr); }

.bloc-day-grid           { display: grid; gap: 5px; }
.bloc-day-grid.cols5     { grid-template-columns: repeat(5, 1fr); }
.bloc-day-grid.cols7     { grid-template-columns: repeat(7, 1fr); }


/* ════════════════════════════════════════════════════════════════════════════
   6. DAY BUTTON — 2-WEEK STRIP
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-day-btn {
  width:           100%;
  height:          60px;
  border:          1px solid rgba(255, 255, 255, 0.28);
  border-radius:   var(--bloc-radius-sm);
  background:      linear-gradient(160deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.09) 100%);
  color:           rgba(255, 255, 255, 0.90);
  font-size:       12px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1px;
  position:        relative;
  box-shadow:
    0  1px  2px rgba(0, 0, 0, 0.35),
    0  4px 10px rgba(0, 0, 0, 0.24),
    0  8px 22px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    background   0.20s var(--bloc-ease),
    border-color 0.20s,
    color        0.20s,
    transform    0.18s var(--bloc-ease),
    box-shadow   0.20s;
}
/* Exclude .sel from hover so selected state needs no !important */
.bloc-day-btn:not([disabled]):not(.sel):hover {
  background:  linear-gradient(160deg, rgba(0, 194, 168, 0.18) 0%, rgba(0, 194, 168, 0.09) 100%);
  border-color: rgba(0, 194, 168, 0.50);
  color:        #fff;
  transform:    translateY(-3px);
  box-shadow:
    0  2px  4px rgba(0, 0, 0, 0.30),
    0  6px 14px rgba(0, 194, 168, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.bloc-day-btn:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 2px rgba(0, 194, 168, 0.55), 0 0 0 4px rgba(0, 194, 168, 0.15);
}
.bloc-day-btn:active:not([disabled]) {
  transform:  translateY(0) scale(0.96);
  box-shadow: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
.bloc-day-btn.sel {
  background:  linear-gradient(160deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 60%, rgba(0, 175, 150, 0.95) 100%);
  border-color: var(--bloc-teal);
  color:        var(--bloc-navy);
  font-weight: 700;
  transform:   translateY(-2px);
  box-shadow:
    0  0  0  1px rgba(0, 194, 168, 0.38),
    0  4px 14px rgba(0, 194, 168, 0.32),
    0 10px 28px rgba(0, 194, 168, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.bloc-day-btn[disabled]           { opacity: 0.16; cursor: default; pointer-events: none; }
.bloc-day-btn.today:not(.sel)     { border-color: rgba(0, 194, 168, 0.55); box-shadow: 0 0 0 1px rgba(0, 194, 168, 0.20); }

.bloc-day-num { font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.bloc-day-mo  { font-size: 8px; line-height: 1; opacity: 0.55; letter-spacing: 0.03em; text-transform: uppercase; }
.bloc-day-count                   { font-size: 8px; font-weight: 700; color: var(--bloc-teal); line-height: 1; margin-top: 1px; letter-spacing: 0.02em; }
.bloc-day-btn.sel .bloc-day-count { color: rgba(4, 16, 42, 0.60); }
.bloc-day-btn[disabled] .bloc-day-count { display: none; }


/* ════════════════════════════════════════════════════════════════════════════
   7. MONTH DAY BUTTON
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-month-btn {
  width:           100%;
  height:          40px;
  border:          1px solid rgba(255, 255, 255, 0.12);
  border-radius:   7px;
  background:      linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  color:           rgba(255, 255, 255, 0.75);
  font-size:       12px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  position:        relative;
  box-shadow:      0 1px 2px rgba(0, 0, 0, 0.28), 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition:      background 0.15s var(--bloc-ease), border-color 0.15s, color 0.15s, transform 0.14s, box-shadow 0.15s;
}
/* Exclude .sel from hover so selected state needs no !important */
.bloc-month-btn:not([disabled]):not(.empty):not(.sel):hover {
  background:  linear-gradient(160deg, rgba(0, 194, 168, 0.15) 0%, rgba(0, 194, 168, 0.07) 100%);
  border-color: rgba(0, 194, 168, 0.45);
  color:        #fff;
  transform:    translateY(-2px);
  box-shadow:   0 2px 6px rgba(0, 0, 0, 0.22), 0 6px 16px rgba(0, 194, 168, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.bloc-month-btn:focus-visible             { outline: none; box-shadow: 0 0 0 2px rgba(0, 194, 168, 0.50); }
.bloc-month-btn:active:not([disabled]):not(.empty) { transform: translateY(0) scale(0.96); transition: transform 0.07s; }
.bloc-month-btn.sel {
  background:  linear-gradient(160deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 100%);
  border-color: var(--bloc-teal);
  color:        var(--bloc-navy);
  font-weight: 700;
  box-shadow:  0 2px 10px rgba(0, 194, 168, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.bloc-month-btn[disabled]         { opacity: 0.15; cursor: default; pointer-events: none; }
.bloc-month-btn.today:not(.sel)   { border-color: rgba(0, 194, 168, 0.50); }
.bloc-month-btn.empty             { border-color: transparent; background: transparent; pointer-events: none; }

/* Availability dot */
.bloc-avail-dot {
  width:         4px;
  height:        4px;
  background:    var(--bloc-teal);
  border-radius: 50%;
  position:      absolute;
  bottom:        4px;
  left:          50%;
  transform:     translateX(-50%);
}
.bloc-month-btn.sel .bloc-avail-dot { background: var(--bloc-navy); }


/* ════════════════════════════════════════════════════════════════════════════
   8. RIGHT PANEL
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-right-panel {
  background:      linear-gradient(160deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.028) 100%);
  border:          1px solid var(--bloc-border);
  border-radius:   14px;
  padding:         18px;
  min-height:      260px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0  1px  3px rgba(0, 0, 0, 0.22),
    0  4px 14px rgba(0, 0, 0, 0.16),
    0 12px 32px rgba(0, 0, 0, 0.10);
  transition: min-height 0.3s var(--bloc-ease);
}
.bloc-right-panel.filled { align-items: flex-start; justify-content: flex-start; flex-direction: column; }

/* Empty state */
.bloc-empty      { text-align: center; }
.bloc-empty-icon { color: rgba(255, 255, 255, 0.13); display: block; margin: 0 auto 11px; }
.bloc-empty-text { color: var(--bloc-text-faint); font-size: 11px; line-height: 1.75; }


/* ════════════════════════════════════════════════════════════════════════════
   9. TIMEZONE BADGE
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-tz-bar {
  display:       flex;
  align-items:   center;
  gap:           6px;
  margin-bottom: 10px;
  background:    rgba(0, 194, 168, 0.07);
  border:        1px solid rgba(0, 194, 168, 0.17);
  border-radius: 7px;
  padding:       6px 10px;
  width:         100%;
}
.bloc-tz-icon              { color: var(--bloc-teal); flex-shrink: 0; }
.bloc-tz-label             { color: var(--bloc-text-faint); font-size: 10px; line-height: 1; }
.bloc-tz-label strong      { color: var(--bloc-teal); font-weight: 700; }


/* ════════════════════════════════════════════════════════════════════════════
   10. SLOTS
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-slots-heading  { margin-bottom: 18px; width: 100%; }
.bloc-slots-eyebrow  { color: var(--bloc-teal); font-size: 9px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; margin: 0 0 3px; }
.bloc-slots-date     { color: var(--bloc-text); font-size: 14px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }

.bloc-slots-grid           { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; align-content: start; }
.bloc-slots-grid.empty     { grid-template-columns: 1fr; }

/* No slots available on selected day */
.bloc-slots-empty-msg {
  color:       var(--bloc-text-faint);
  font-size:   12px;
  margin:      0;
  line-height: 1.70;
}

/* No availability at all in the next N days (two-week strip) */
.bloc-no-avail-msg {
  color:       var(--bloc-text-faint);
  font-size:   11px;
  line-height: 1.7;
  margin:      0;
}

/* Slot button */
.bloc-slot-btn {
  padding:         32px 16px;
  border:          1px solid rgba(255, 255, 255, 0.24);
  border-radius:   12px;
  background:      linear-gradient(160deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.11) 100%);
  color:           #fff;
  font-size:       14px;
  font-weight:     700;
  text-align:      center;
  line-height:     1.35;
  box-shadow:
    0  1px  2px rgba(0, 0, 0, 0.40),
    0  4px 12px rgba(0, 0, 0, 0.28),
    0 10px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    background   0.18s var(--bloc-ease),
    border-color 0.18s,
    color        0.18s,
    transform    0.14s var(--bloc-ease),
    box-shadow   0.18s;
}
/* Exclude .sel from hover so selected state needs no !important */
.bloc-slot-btn:not([disabled]):not(.sel):hover {
  background:  linear-gradient(160deg, rgba(0, 194, 168, 0.30) 0%, rgba(0, 194, 168, 0.15) 100%);
  border-color: rgba(0, 194, 168, 0.60);
  color:        #fff;
  transform:    translateY(-3px);
  box-shadow:
    0  2px  4px rgba(0, 0, 0, 0.32),
    0  6px 16px rgba(0, 194, 168, 0.24),
    0 14px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.bloc-slot-btn:focus-visible        { outline: none; box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.35); }
.bloc-slot-btn:active:not([disabled]) {
  transform:  translateY(0) scale(0.97);
  box-shadow: none;
  transition: transform 0.08s;
}
.bloc-slot-btn.sel {
  background:  linear-gradient(160deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 100%);
  border-color: var(--bloc-teal);
  color:        var(--bloc-navy);
  font-weight: 800;
  box-shadow:
    0  2px  6px rgba(0, 194, 168, 0.40),
    0  6px 18px rgba(0, 194, 168, 0.28),
    0 12px 32px rgba(0, 194, 168, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.bloc-slot-btn[disabled]              { opacity: 0.18; cursor: default; pointer-events: none; text-decoration: line-through; }
.bloc-slot-host                       { display: block; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; }
.bloc-slot-visitor                    { display: block; font-size: 10px; opacity: 0.60; margin-top: 2px; }

/* Host assignment badge (multi-host mode) */
.bloc-slot-host-name {
  display:        block;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--bloc-teal);
  margin-top:     3px;
  opacity:        0.80;
}
.bloc-slot-btn.sel .bloc-slot-host-name { color: var(--bloc-navy); }


/* ════════════════════════════════════════════════════════════════════════════
   11. BOOKING FORM
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-booking-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   13px;
  padding-bottom:  11px;
  border-bottom:   1px solid rgba(255, 255, 255, 0.07);
  width:           100%;
}

.bloc-booking-pill {
  background:    var(--bloc-teal-dim);
  border:        1px solid var(--bloc-teal-border);
  border-radius: 8px;
  padding:       6px 10px;
  box-shadow:    0 2px 8px rgba(0, 194, 168, 0.10);
}
.bloc-pill-date { color: var(--bloc-teal); font-size: 9px; font-weight: 700; margin: 0; letter-spacing: 0.07em; text-transform: uppercase; }
.bloc-pill-time { color: var(--bloc-text); font-size: 12px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }

.bloc-change-btn {
  background:     var(--bloc-teal-dim);
  border:         1px solid var(--bloc-teal-border);
  border-radius:  8px;
  color:          var(--bloc-teal);
  font-size:      12px;
  font-weight:    700;
  padding:        7px 13px;
  letter-spacing: 0.01em;
  transition:     color 0.15s var(--bloc-ease), border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.bloc-change-btn:hover {
  background:   rgba(0, 194, 168, 0.18);
  border-color: rgba(0, 194, 168, 0.50);
  color:        var(--bloc-teal-hi);
  box-shadow:   0 2px 10px rgba(0, 194, 168, 0.18);
  transform:    translateY(-1px);
}
.bloc-change-btn:active        { transform: translateY(0); transition: transform 0.08s; }
.bloc-change-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.35); }

.bloc-form-wrap { width: 100%; }
.bloc-field     { margin-bottom: 8px; }

.bloc-label {
  display:        flex;
  align-items:    center;
  gap:            4px;
  font-size:      9px;
  font-weight:    700;
  color:          rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom:  4px;
  transition:     color 0.15s;
}
.bloc-field:focus-within .bloc-label { color: rgba(0, 194, 168, 0.75); }

.bloc-input {
  width:              100%;
  background:         rgba(255, 255, 255, 0.055);
  border:             1px solid var(--bloc-border);
  border-radius:      8px;
  color:              var(--bloc-text);
  padding:            9px 11px;
  font-size:          13px;
  outline:            none;
  transition:         border-color 0.18s, background 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
}
.bloc-input:focus {
  border-color: var(--bloc-teal);
  background:   rgba(255, 255, 255, 0.08);
  box-shadow:   0 0 0 3px rgba(0, 194, 168, 0.16);
}
.bloc-input::placeholder { color: rgba(255, 255, 255, 0.20); }
.bloc-input.error {
  border-color: rgba(239, 68, 68, 0.65);
  box-shadow:   0 0 0 3px rgba(239, 68, 68, 0.12);
}

select.bloc-input {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right:       28px;
}

.bloc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 420px) { .bloc-form-row { grid-template-columns: 1fr; } }

/* Required field asterisk */
.bloc-required-star { color: var(--bloc-teal); font-size: 10px; }

/* Textarea modifier — stacks on top of .bloc-input */
.bloc-input.bloc-textarea { resize: none; padding-top: 9px; }


/* ════════════════════════════════════════════════════════════════════════════
   12. SUBMIT BUTTON
   ════════════════════════════════════════════════════════════════════════════ */

@keyframes bloc-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 194, 168, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px  8px rgba(0, 194, 168, 0.28), 0 6px 20px rgba(0, 194, 168, 0.18); }
  55%  { box-shadow: 0 0 0 9px rgba(0, 194, 168, 0),    inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 16px rgba(0, 194, 168, 0.45), 0 8px 28px rgba(0, 194, 168, 0.28); }
  100% { box-shadow: 0 0 0 0   rgba(0, 194, 168, 0),    inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px  8px rgba(0, 194, 168, 0.28), 0 6px 20px rgba(0, 194, 168, 0.18); }
}

.bloc-submit-btn {
  width:           100%;
  padding:         13px 16px;
  background:      linear-gradient(135deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 55%, rgba(0, 178, 154, 0.96) 100%);
  border:          none;
  border-radius:   10px;
  color:           #ffffff;
  font-weight:     800;
  font-size:       14px;
  letter-spacing:  0.01em;
  margin-top:      8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0  2px  8px rgba(0, 194, 168, 0.28),
    0  6px 20px rgba(0, 194, 168, 0.18);
  transition: background 0.18s var(--bloc-ease), transform 0.14s var(--bloc-ease), box-shadow 0.18s, filter 0.15s;
}
.bloc-submit-btn.ready:not([disabled]) {
  animation: bloc-pulse 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.bloc-submit-btn:not([disabled]):hover {
  background: linear-gradient(135deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 100%);
  filter:     brightness(1.06);
  transform:  translateY(-1px);
  animation:  none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0  4px 14px rgba(0, 194, 168, 0.38),
    0 10px 28px rgba(0, 194, 168, 0.22);
}
.bloc-submit-btn:active:not([disabled]) {
  transform:  scale(0.98) translateY(0);
  filter:     brightness(0.97);
  animation:  none;
  box-shadow: 0 1px 4px rgba(0, 194, 168, 0.25);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.08s;
}
.bloc-submit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.45); }
.bloc-submit-btn[disabled]     { opacity: 0.65; cursor: default; }

/* Error message */
.bloc-error-msg {
  background:    rgba(239, 68, 68, 0.09);
  border:        1px solid rgba(239, 68, 68, 0.26);
  border-radius: 8px;
  color:         #FCA5A5;
  font-size:     11px;
  padding:       9px 12px;
  margin-top:    8px;
  line-height:   1.6;
}


/* ════════════════════════════════════════════════════════════════════════════
   13. SPINNER
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-spinner {
  width:            15px;
  height:           15px;
  border:           2px solid rgba(4, 16, 42, 0.25);
  border-top-color: var(--bloc-navy);
  border-radius:    50%;
  animation:        bloc-spin 0.65s linear infinite;
  flex-shrink:      0;
}
@keyframes bloc-spin { to { transform: rotate(360deg); } }

.bloc-gcal-loading {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         24px 20px;
  color:           rgba(255, 255, 255, 0.50);
  font-size:       0.85rem;
  letter-spacing:  0.01em;
}

.bloc-gcal-spinner {
  width:            16px;
  height:           16px;
  border:           2px solid rgba(255, 255, 255, 0.20);
  border-top-color: var(--bloc-teal);
  border-radius:    50%;
  animation:        bloc-spin 0.65s linear infinite;
  flex-shrink:      0;
}

.bloc-light .bloc-gcal-loading  { color: rgba(13, 31, 60, 0.45); }
.bloc-light .bloc-gcal-spinner  { border-color: rgba(13, 31, 60, 0.15); border-top-color: var(--bloc-teal); }


/* ════════════════════════════════════════════════════════════════════════════
   14. CONFIRMATION
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-confirm { text-align: center; padding: 12px 8px; width: 100%; }

.bloc-confirm-check {
  width:           52px;
  height:          52px;
  background:      linear-gradient(135deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 100%);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 15px;
  box-shadow:      0 4px 16px rgba(0, 194, 168, 0.40), 0 8px 32px rgba(0, 194, 168, 0.22);
  animation:       bloc-pop-in 0.42s var(--bloc-spring) 0.05s both;
}
@keyframes bloc-pop-in {
  from { transform: scale(0.30); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.bloc-confirm-checkmark {
  stroke-dasharray:  29;
  stroke-dashoffset: 29;
  stroke:            var(--bloc-navy);
  stroke-width:      2.5;
  stroke-linecap:    round;
  stroke-linejoin:   round;
  fill:              none;
  animation:         bloc-draw-check 0.50s var(--bloc-ease) 0.38s forwards;
}
@keyframes bloc-draw-check { to { stroke-dashoffset: 0; } }

.bloc-confirm-title {
  color:          var(--bloc-text);
  font-size:      17px;
  font-weight:    800;
  margin:         0 0 5px;
  letter-spacing: -0.03em;
}
.bloc-confirm-sub { color: var(--bloc-text-muted); font-size: 12px; margin: 0 0 15px; line-height: 1.70; }

.bloc-confirm-card {
  background:    var(--bloc-teal-dim);
  border:        1px solid var(--bloc-teal-border);
  border-radius: 10px;
  padding:       12px 18px;
  display:       inline-block;
  box-shadow:    0 2px 10px rgba(0, 194, 168, 0.12);
}
.bloc-confirm-card-date { color: var(--bloc-teal); font-size: 10px; font-weight: 700; margin: 0 0 3px; text-transform: uppercase; letter-spacing: 0.07em; }
.bloc-confirm-card-time { color: var(--bloc-text); font-size: 13px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }

/* iCal button */
.bloc-ical-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  background:     transparent;
  border:         1px solid var(--bloc-border);
  border-radius:  9px;
  color:          var(--bloc-text-muted);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.02em;
  padding:        9px 16px;
  margin-top:     12px;
  transition:     background 0.18s var(--bloc-ease), border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.14s;
}
.bloc-ical-btn:hover {
  background:   var(--bloc-surface-hi);
  border-color: var(--bloc-border-hi);
  color:        var(--bloc-text);
  box-shadow:   0 2px 10px rgba(0, 0, 0, 0.18);
  transform:    translateY(-1px);
}
.bloc-ical-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 194, 168, 0.30); }
.bloc-ical-btn:active        { transform: translateY(0); transition: transform 0.07s; }


/* ════════════════════════════════════════════════════════════════════════════
   15. ANIMATIONS
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-fade { animation: bloc-fadein 0.26s var(--bloc-ease) both; }
@keyframes bloc-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   16. LIGHT MODE OVERRIDES
   ════════════════════════════════════════════════════════════════════════════ */

.bloc-widget.bloc-light {
  background:         #EEF2F7;
  --bloc-teal:        #009E88;
  --bloc-teal-hi:     #00B49A;
  --bloc-teal-dim:    rgba(0, 158, 136, 0.08);
  --bloc-teal-border: rgba(0, 158, 136, 0.22);
  --bloc-teal-glow:   rgba(0, 158, 136, 0.18);
  --bloc-surface:     rgba(4, 16, 42, 0.04);
  --bloc-surface-hi:  rgba(4, 16, 42, 0.07);
  --bloc-border:      rgba(4, 16, 42, 0.09);
  --bloc-border-hi:   rgba(4, 16, 42, 0.18);
  --bloc-text:        #04102A;
  --bloc-text-muted:  rgba(4, 16, 42, 0.55);
  --bloc-text-faint:  rgba(4, 16, 42, 0.30);
  --bloc-danger:      rgba(185, 28, 28, 0.90);
}
.bloc-widget.bloc-light::before {
  top: auto; right: auto; bottom: -80px; left: -60px;
  background: radial-gradient(circle, rgba(0, 158, 136, 0.07) 0%, transparent 65%);
}

/* Light — day buttons */
.bloc-light .bloc-day-btn {
  background:  #fff;
  color:       rgba(4, 16, 42, 0.82);
  border-color: rgba(4, 16, 42, 0.11);
  box-shadow:
    0  1px  2px rgba(4, 16, 42, 0.08),
    0  4px 10px rgba(4, 16, 42, 0.07),
    0  8px 20px rgba(4, 16, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.bloc-light .bloc-day-btn:not([disabled]):not(.sel):hover {
  background:  linear-gradient(160deg, #EAF7F5 0%, #F2FAF8 100%);
  border-color: rgba(0, 158, 136, 0.50);
  color:        #04102A;
  box-shadow:
    0  2px  4px rgba(4, 16, 42, 0.10),
    0  6px 14px rgba(0, 158, 136, 0.14),
    0 12px 28px rgba(4, 16, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.bloc-light .bloc-day-btn.sel {
  background:  linear-gradient(160deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 60%, rgba(0, 175, 150, 0.95) 100%);
  border-color: var(--bloc-teal);
  color: #fff;
  box-shadow:
    0  0  0  1px rgba(0, 158, 136, 0.35),
    0  4px 14px rgba(0, 158, 136, 0.28),
    0 10px 28px rgba(0, 158, 136, 0.16);
}

/* Light — month buttons */
.bloc-light .bloc-month-btn {
  background:  #fff;
  color:       rgba(4, 16, 42, 0.78);
  border-color: rgba(4, 16, 42, 0.10);
  box-shadow:  0 1px 2px rgba(4, 16, 42, 0.07), 0 3px 8px rgba(4, 16, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.bloc-light .bloc-month-btn:not([disabled]):not(.empty):not(.sel):hover {
  background:  #EAF7F5;
  border-color: rgba(0, 158, 136, 0.45);
  color:        #04102A;
  box-shadow:  0 2px 4px rgba(4, 16, 42, 0.09), 0 6px 14px rgba(0, 158, 136, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.90);
}
.bloc-light .bloc-month-btn.sel {
  background:  linear-gradient(160deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 100%);
  border-color: var(--bloc-teal);
  color: #fff;
  box-shadow:
    0  0  0  1px rgba(0, 158, 136, 0.35),
    0  4px 12px rgba(0, 158, 136, 0.28),
    0  8px 24px rgba(0, 158, 136, 0.14);
}
.bloc-light .bloc-month-btn.sel .bloc-avail-dot { background: #fff; }

/* Light — right panel */
.bloc-light .bloc-right-panel {
  background:  #fff;
  border-color: rgba(4, 16, 42, 0.08);
  box-shadow:
    0  1px  3px rgba(4, 16, 42, 0.06),
    0  4px 16px rgba(4, 16, 42, 0.07),
    0 12px 32px rgba(4, 16, 42, 0.05);
}
.bloc-light .bloc-empty-icon { color: rgba(4, 16, 42, 0.12); }
.bloc-light .bloc-tz-bar     { background: rgba(0, 158, 136, 0.06); border-color: rgba(0, 158, 136, 0.18); }

/* Light — slot buttons */
.bloc-light .bloc-slot-btn {
  background:  #fff;
  border-color: rgba(4, 16, 42, 0.14);
  color:        rgba(4, 16, 42, 0.90);
  font-size:   14px;
  font-weight: 700;
  box-shadow:
    0  1px  3px rgba(4, 16, 42, 0.10),
    0  4px 12px rgba(4, 16, 42, 0.09),
    0 10px 24px rgba(4, 16, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.bloc-light .bloc-slot-btn:not([disabled]):not(.sel):hover {
  background:  linear-gradient(160deg, #EAF7F5 0%, #F2FAF8 100%);
  border-color: rgba(0, 158, 136, 0.55);
  color:        #04102A;
  box-shadow:
    0  2px  6px rgba(4, 16, 42, 0.12),
    0  6px 16px rgba(0, 158, 136, 0.18),
    0 14px 32px rgba(4, 16, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.bloc-light .bloc-slot-btn.sel {
  background:  linear-gradient(160deg, var(--bloc-teal-hi) 0%, var(--bloc-teal) 100%);
  border-color: var(--bloc-teal);
  color: #fff;
}

/* Light — form */
.bloc-light .bloc-booking-bar                    { border-bottom-color: rgba(4, 16, 42, 0.08); }
.bloc-light .bloc-label                          { color: rgba(4, 16, 42, 0.38); }
.bloc-light .bloc-field:focus-within .bloc-label { color: rgba(0, 158, 136, 0.75); }
.bloc-light .bloc-input                          { background: #F5F8FC; border-color: rgba(4, 16, 42, 0.12); color: #04102A; }
.bloc-light .bloc-input:focus                    { background: #fff; border-color: var(--bloc-teal); box-shadow: 0 0 0 3px rgba(0, 158, 136, 0.14); }
.bloc-light .bloc-input::placeholder             { color: rgba(4, 16, 42, 0.26); }
.bloc-light .bloc-input.error                    { border-color: rgba(185, 28, 28, 0.55); box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.08); }
.bloc-light select.bloc-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(4,16,42,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.bloc-light .bloc-change-btn       { background: rgba(0, 158, 136, 0.08); border-color: rgba(0, 158, 136, 0.28); color: rgba(0, 130, 112, 1); }
.bloc-light .bloc-change-btn:hover { background: rgba(0, 158, 136, 0.15); border-color: rgba(0, 158, 136, 0.50); color: rgba(0, 130, 112, 1); box-shadow: 0 2px 10px rgba(0, 158, 136, 0.16); }
.bloc-light .bloc-submit-btn       { color: var(--bloc-navy); }
.bloc-light .bloc-spinner          { border-color: rgba(255, 255, 255, 0.30); border-top-color: #fff; }
.bloc-light .bloc-error-msg        { background: rgba(185, 28, 28, 0.07); border-color: rgba(185, 28, 28, 0.22); color: #9B1C1C; }
.bloc-light .bloc-confirm-checkmark { stroke: #fff; }
.bloc-light .bloc-ical-btn          { border-color: rgba(4, 16, 42, 0.12); color: rgba(4, 16, 42, 0.50); }
.bloc-light .bloc-ical-btn:hover    { background: rgba(4, 16, 42, 0.04); border-color: rgba(4, 16, 42, 0.22); color: rgba(4, 16, 42, 0.80); }
.bloc-light .bloc-next-avail        { background: linear-gradient(135deg, rgba(0, 158, 136, 0.09) 0%, rgba(0, 158, 136, 0.04) 100%); border-color: rgba(0, 158, 136, 0.25); }
.bloc-light .bloc-next-avail:hover  { background: linear-gradient(135deg, rgba(0, 158, 136, 0.14) 0%, rgba(0, 158, 136, 0.08) 100%); }
.bloc-light .bloc-cal-mode-tag      { background: rgba(4, 16, 42, 0.05); border-color: rgba(4, 16, 42, 0.09); }
.bloc-light .bloc-day-count         { color: var(--bloc-teal); }
.bloc-light .bloc-slot-host-name    { color: var(--bloc-teal); }
.bloc-light .bloc-slot-btn.sel .bloc-slot-host-name { color: #fff; }