/* =============================================
   Business Opening Hours — Frontend Styles v1.7.21
   ============================================= */

.boh-wrap {
  container-type: inline-size;
  container-name: boh;
  max-width: var(--boh-max-width, 100%);
  background: var(--boh-bg, #fff);
  color: var(--boh-text, #0f172a);
  border: 1px solid var(--boh-border, #e2e8f0);
  border-radius: var(--boh-radius, 18px);
  /* NO horizontal padding here — applied per-element below
     so the today row can be naturally full width */
  padding-top: var(--boh-card-padding, 24px);
  padding-bottom: var(--boh-card-padding, 24px);
  padding-left: 0;
  padding-right: 0;
  box-shadow: var(--boh-shadow, none);
  font-size: var(--boh-font-size, 16px);
  isolation: isolate;
  overflow: hidden; /* clips card border-radius cleanly */
}
.boh-wrap, .boh-wrap * { box-sizing: border-box; }

/* Horizontal padding applied to everything EXCEPT .boh-list rows */
.boh-wrap .boh-title,
.boh-wrap .boh-status-wrap,
.boh-wrap .boh-note,
.boh-wrap .boh-today-panel {
  padding-left: var(--boh-card-padding, 24px);
  padding-right: var(--boh-card-padding, 24px);
}

/* ---- Title ---- */
.boh-wrap .boh-title {
  margin: 0 0 14px;
  font-size: clamp(1.05rem, 4cqi, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--boh-text, #0f172a);
}

/* ---- Status pill ---- */
.boh-wrap .boh-status-wrap { display: flex; width: 100%; margin-bottom: 0; }
.boh-wrap .boh-status-align-start  { justify-content: flex-start; }
.boh-wrap .boh-status-align-center { justify-content: center; }
.boh-wrap .boh-status-align-end    { justify-content: flex-end; }
.boh-wrap .boh-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: clamp(0.75rem, 3cqi, 0.95rem);
  font-weight: 600;
  width: fit-content;
  word-break: break-word;
}
.boh-wrap .boh-status-pos-below_title,
.boh-wrap .boh-status-pos-above_list { margin-bottom: 16px; }
.boh-wrap .boh-status-pos-below_list { margin-top: 16px; }
.boh-wrap .boh-status-open   { background: var(--boh-open-bg,   #ecfdf3); color: var(--boh-open-text,   #027a48); }
.boh-wrap .boh-status-closed { background: var(--boh-closed-bg, #fef2f2); color: var(--boh-closed-text, #b42318); }

/* ---- Special note ---- */
.boh-wrap .boh-note {
  margin-bottom: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: calc(var(--boh-radius, 18px) - 6px);
  background: var(--boh-note-bg, #f8fafc);
  color: var(--boh-text, #0f172a);
}

/* ---- Rows ---- */
.boh-wrap .boh-list { width: 100%; }

.boh-wrap .boh-row {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 0 12px !important;
  /* Horizontal padding on each row — today row overrides this */
  padding: var(--boh-row-padding-y, 14px) var(--boh-card-padding, 24px);
  position: relative;
  width: 100% !important;
}
.boh-wrap.boh-dividers-line   .boh-row + .boh-row { border-top: 1px solid var(--boh-border, #e2e8f0); }
.boh-wrap.boh-dividers-dashed .boh-row + .boh-row { border-top: 1px dashed var(--boh-border, #e2e8f0); }
.boh-wrap.boh-dividers-none   .boh-row + .boh-row { border-top: 0; }

/* Day cell */
.boh-wrap .boh-day {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;
}
.boh-wrap .boh-day-label {
  font-weight: 600;
  color: var(--boh-text, #0f172a);
  white-space: nowrap;
  font-size: clamp(0.8rem, 3.5cqi, 1rem);
}
.boh-wrap .boh-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--boh-badge-bg, #e7efff);
  color: var(--boh-badge-text, #1d4ed8);
  font-size: clamp(0.62rem, 2.2cqi, 0.75rem);
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

/* Hours cell */
.boh-wrap .boh-hours {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  text-align: right !important;
  color: var(--boh-text, #0f172a);
  font-weight: 500;
  white-space: nowrap;
  overflow: visible !important;
  font-size: clamp(0.75rem, 3.5cqi, 1rem);
  width: auto !important;
  max-width: 100% !important;
}
.boh-wrap .boh-hours.is-closed { color: var(--boh-muted, #64748b); }

/* ---- Soft style: today row is naturally full width
   because .boh-wrap has no horizontal padding.
   Just apply background, border-left, and radius directly. ---- */
.boh-wrap.boh-style-soft .boh-row.is-today {
  background: var(--boh-today-bg, #f8fbff);
  border-left: 3px solid var(--boh-accent, #2563eb) !important;
  border-radius: calc(var(--boh-radius, 18px) - 8px);
  box-shadow: inset 0 0 0 1px var(--boh-today-border, #dbe7ff);
  /* Shift text right slightly to account for the 3px border */
  padding-left: calc(var(--boh-card-padding, 24px) - 3px);
}
.boh-wrap.boh-style-soft.boh-dividers-line   .boh-row.is-today + .boh-row,
.boh-wrap.boh-style-soft.boh-dividers-dashed .boh-row.is-today + .boh-row,
.boh-wrap.boh-style-soft.boh-dividers-none   .boh-row.is-today + .boh-row { border-top-color: transparent; }

/* ---- Minimal style ---- */
.boh-wrap.boh-style-minimal .boh-row.is-today {
  border-left: 3px solid var(--boh-accent, #2563eb);
  padding-left: calc(var(--boh-card-padding, 24px) - 3px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--boh-today-bg, #f8fbff) 80%, transparent), transparent 90%);
}

/* ---- Boxed style ---- */
.boh-wrap.boh-style-boxed .boh-row {
  border: 1px solid var(--boh-border, #e2e8f0) !important;
  border-radius: calc(var(--boh-radius, 18px) - 8px) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin: 8px var(--boh-card-padding, 24px);
}
.boh-wrap.boh-style-boxed.boh-dividers-line   .boh-row + .boh-row,
.boh-wrap.boh-style-boxed.boh-dividers-dashed .boh-row + .boh-row,
.boh-wrap.boh-style-boxed.boh-dividers-none   .boh-row + .boh-row { border-top: 1px solid var(--boh-border, #e2e8f0) !important; }
.boh-wrap.boh-style-boxed .boh-row.is-today {
  background: var(--boh-today-bg, #f8fbff);
  border-color: var(--boh-today-border, #dbe7ff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--boh-today-border, #dbe7ff) 40%, transparent);
}

/* ---- Today-only panel ---- */
.boh-wrap .boh-today-panel {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  border: 1px solid var(--boh-today-border, #dbe7ff);
  background: var(--boh-today-bg, #f8fbff);
  border-radius: calc(var(--boh-radius, 18px) - 6px);
}
.boh-wrap .boh-today-heading { font-weight: 700; flex-shrink: 0; }
.boh-wrap .boh-today-hours   { font-weight: 600; flex-shrink: 0; text-align: right; }

/* ---- Responsive width helper ----
   [business_opening_hours class="boh-responsive"]
   --------------------------------- */
.boh-responsive { width: 100% !important; }
@media (min-width: 768px) { .boh-responsive { width: 50% !important; } }