/**
 * Yoeweb Business Hours
 * Frontend styles
 */

.yoeweb-business-hours {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: 1.4;
}

.yoeweb-business-hours__title {
  display: inline-block;
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

.yoeweb-business-hours__schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}

.yoeweb-business-hours__row {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/**
 * Separa cada grupo de días.
 *
 * Ejemplo:
 * Mon to Fri • 7AM - 4PM | Sat & Sun • Closed
 */
.yoeweb-business-hours__row + .yoeweb-business-hours__row::before {
  content: "|";
  display: inline-block;
  margin: 0 10px;
  font-weight: 400;
}

/**
 * Separa los días de sus horas.
 *
 * Ejemplo:
 * Mon to Fri • 7AM - 4PM
 */
.yoeweb-business-hours__day-time-separator {
  display: inline-block;
  margin: 0 6px;
}

/**
 * Evita márgenes heredados del tema.
 */
.yoeweb-business-hours__days,
.yoeweb-business-hours__time {
  margin: 0;
}

/**
 * Ajuste para pantallas pequeñas.
 *
 * Los grupos pueden pasar a otra línea,
 * pero cada grupo individual permanece unido.
 */
@media (max-width: 767px) {
  .yoeweb-business-hours {
    gap: 4px 6px;
  }

  .yoeweb-business-hours__row + .yoeweb-business-hours__row::before {
    margin: 0 7px;
  }

  .yoeweb-business-hours__day-time-separator {
    margin: 0 5px;
  }
}