/* ============================================================
   CLOCK CSS — Vadalo Ventures
   ============================================================ */

.clock-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem;
  min-width: 130px;
  line-height: 1;
}

.clock-box__time {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--clr-gold);
  font-variant-numeric: tabular-nums;
}

.clock-box__time #clock-ampm {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-left: 0.25rem;
  opacity: 0.85;
}

.clock-box__date {
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.5);
  margin-top: 0.2rem;
}

.clock-box__zone {
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.5);
  margin-top: 0.15rem;
}