ul.business-hours-inline-list {
  list-style: none;
  padding: 0;
}

.business-hours-status {
  --status-font: inherit;
  --status-bg: transparent;
  --status-text: var(--mr-color-text);
  --status-border: var(--mr-border-subtle);
  --status-radius: var(--mr-radius-pill);
  --status-pad-y: 0.45rem;
  --status-pad-x: 0.9rem;
  --status-gap: 0.6rem;
  --status-open: var(--mr-color-primary);
  --status-closed: var(--mr-color-medium);
  --status-soon: var(--mr-color-red);
  display: inline-flex;
  align-items: center;
  gap: var(--status-gap);
  font-family: var(--status-font);
  letter-spacing: 0.01em;
}

.business-hours-status .status-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.business-hours-status .status-message {
  font-weight: 600;
}

.business-hours-status .status-open {
  color: var(--status-open);
}

.business-hours-status .status-closed {
  color: var(--status-closed);
}

.business-hours-status .status-soon {
  color: var(--status-soon);
}

.business-hours-status .status-open::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border-radius: var(--mr-radius-pill);
  background: var(--status-open);
  vertical-align: middle;
}

:root {
  --business-hours-border: color-mix(in srgb, var(--mr-color-text) 10%, transparent);
  --business-hours-border-strong: color-mix(in srgb, var(--mr-color-text) 18%, transparent);
  --business-hours-shadow: none;
  --business-hours-shadow-soft: none;
  --business-hours-surface: transparent;
  --business-hours-surface-holiday: transparent;
  --business-hours-surface-today: color-mix(in srgb, var(--mr-color-primary) 6%, transparent);
}

.mr-hours-top {
  align-items: center;
}

.mr-hours-badge .business-hours-status {
  margin: 0;
}

.mr-hours-table {
  width: 100%;
  border-collapse: collapse;
}

.mr-hours-table th,
.mr-hours-table td {
  font-size: 0.88rem;
  padding: 0.18rem 0;
}

.mr-hours-table th {
  text-align: left;
  color: var(--mr-widget-muted-color);
}

.mr-hours-table td {
  text-align: right;
  color: var(--mr-widget-strong-text-color);
}

.mr-hours-table tr.is-closed td {
  color: var(--mr-widget-muted-color);
}

.business-hours-table {
  margin-top: 0.25rem;
}


.widget-business-hours > .builder-widget-heading + .business-hours-table {
  margin-top: 0;
}

.widget-business-hours[style*="padding:"] > .builder-widget-heading + .business-hours-table > .business-hours-weekly {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.business-hours-weekly {
  display: grid;
  gap: 0;
}

.business-hours-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem;
  border-bottom: 1px solid var(--business-hours-border);
}

.business-hours-item:last-child {
  border-bottom: 0;
}

.business-hours-row--today {
  background: var(--business-hours-surface-today);
}

.business-hours-row--holiday {
  /* background: var(--business-hours-surface-holiday); */
}

.business-hours-item-main {
  min-width: 0;
}

.business-hours-item-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.business-hours-item-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.business-hours-day-label {
  display: inline-block;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.05;
  color: var(--mr-widget-heading-color);
}

.business-hours-row-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.55rem;
  border-radius: var(--mr-radius-pill);
  background: transparent;
  border: 1px solid var(--mr-widget-highlight-border);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mr-widget-highlight-color);
  vertical-align: middle;
}

.business-hours-value {
  display: inline-block;
  align-items: center;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: right;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.business-hours-value--open {
  color: var(--mr-widget-heading-color);
}

.business-hours-row--holiday .business-hours-value--open {
  color: var(--mr-widget-heading-color);
}

.business-hours-value--closed {
  color: var(--mr-widget-muted-color);
}

.business-hours-value--unset {
  color: var(--mr-widget-highlight-color);
}

.business-hours-table .hours-empty {
  padding: 1rem 0.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mr-widget-subtle-color);
  font-weight: 600;
  text-align: left;
}

.builder-block.mr-tone-dark,
.builder-block .widget.mr-tone-dark {
  --business-hours-border: color-mix(in srgb, var(--mr-builder-text-color) 12%, transparent);
  --business-hours-border-strong: color-mix(in srgb, var(--mr-builder-link-color) 18%, transparent);
  --business-hours-shadow: 0 18px 44px color-mix(in srgb, var(--mr-builder-text-color) 12%, transparent);
  --business-hours-shadow-soft: 0 12px 28px color-mix(in srgb, var(--mr-builder-text-color) 9%, transparent);
  --business-hours-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 241, 229, 0.92));
  --business-hours-surface-holiday: linear-gradient(180deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--mr-builder-link-color) 10%, #fff));
}

.builder-block.mr-tone-light,
.builder-block .widget.mr-tone-light {
  --business-hours-border: rgba(255, 243, 226, 0.14);
  --business-hours-border-strong: rgba(255, 243, 226, 0.22);
  --business-hours-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  --business-hours-shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.18);
  --business-hours-surface: linear-gradient(180deg, rgba(39, 32, 26, 0.94), rgba(21, 18, 16, 0.9));
  --business-hours-surface-holiday: linear-gradient(180deg, rgba(39, 32, 26, 0.94), rgba(27, 23, 20, 0.92));
  --business-hours-surface-today: linear-gradient(180deg, rgba(46, 38, 31, 0.96), rgba(24, 20, 17, 0.92));
}

@media (max-width: 991px) {

  .business-hours-item-side {
    justify-content: flex-start;
  }

  .business-hours-value {
    justify-content: flex-start;
    width: auto;
  }
}

@media (max-width: 767px) {
  .mr-hours-top {
    align-items: flex-start;
    flex-direction: column;
  }
}