.of-hours-google{
  display:flex;
  flex-direction:column;
  gap: 14px;
  line-height: 1.1;
}

.of-hours-google__line{
  margin: 0;
}

.of-hours-google__hint{
  margin: 6px 0 0;
  display:flex;
  align-items:center;
  gap: 10px;
  opacity: .95;
}

.of-hours-google__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
}

/* Colori stato */
.of-hours-google__hint.is-open .of-hours-google__dot{ background:#16a34a; }
.of-hours-google__hint.is-closing .of-hours-google__dot{ background:#f59e0b; }
.of-hours-google__hint.is-closed .of-hours-google__dot{ background:#dc2626; }

.of-hours-google__hint.is-open b{ color:#16a34a; }
.of-hours-google__hint.is-closing b{ color:#f59e0b; }
.of-hours-google__hint.is-closed b{ color:#dc2626; }
/* Store Hours – Frontend helpers to mimic Google-like status */
.of-hours-google__hint{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
.of-hours-google__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.of-hours-google__dot.is-open{ background: #1e8e3e; }
.of-hours-google__dot.is-closing{ background: #f29900; }
.of-hours-google__dot.is-closed{ background: #d93025; }

.of-hours-google__hint.is-open{ color: #1e8e3e; }
.of-hours-google__hint.is-closing{ color: #b06000; }
.of-hours-google__hint.is-closed{ color: #b3261e; }



/* New compact shortcode */
.of-hours-shortcode .of-hours-tag{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  margin-bottom: 10px;
}
.of-hours-shortcode .of-hours-tag--open{ color: #1e8e3e; }
.of-hours-shortcode .of-hours-tag--closing{ color: #b06000; }
.of-hours-shortcode .of-hours-tag--closed{ color: #d93025; }

.of-hours-shortcode .of-hours-lines{
  font-size: 16px;
  line-height: 1.6;
}


/* Inline status next to today's hours */
/* Niente margine a sinistra: lo stacco dall'orario del giorno lo da' gia' il
   gap del contenitore, e sommando i due si arrivava a 24px invece di 12. */
.of-hours-inline-status{
  display: inline-flex;
  align-items: baseline;
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
}
/* Il pallino e' disegnato dal CSS come cerchio, non e' il carattere "•".
   Ingrandito a 1,8em quel glifo cade fuori asse rispetto al testo, e nei
   caratteri che non lo hanno diventa un quadratino. Il glifo resta nel
   markup per chi legge senza CSS e viene spinto fuori dalla vista.
   Il colore lo porta currentColor, che le tre classi di stato cambiano. */
.of-hours-inline-status .of-dot{
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: currentColor;
  /* Sta in un contenitore flex: vertical-align non ha effetto sugli elementi
     flex, e' align-self a centrarlo sulla riga di testo. */
  align-self: center;
  overflow: hidden;
  text-indent: -160px;
  margin-inline-end: 4px;
}
.of-hours-inline-status .of-status-main{ font-weight: 700; }
.of-hours-inline-status .of-status-suffix{
  color: #8a8a8a;
  font-weight: 400;
}

.of-hours-inline-status.is-open .of-dot,
.of-hours-inline-status.is-open .of-status-main{ color: #1e8e3e; }
.of-hours-inline-status.is-closing .of-dot,
.of-hours-inline-status.is-closing .of-status-main{ color: #b06000; }
.of-hours-inline-status.is-closed .of-dot,
.of-hours-inline-status.is-closed .of-status-main{ color: #d93025; }

/* Rows */
.of-hours-shortcode .of-hours-days{ margin: 0; }
.of-hours-shortcode .of-hours-hours{ margin: 0 0 10px 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.of-hours-shortcode .of-hours-hours b{ display: inline; }