/* =========================
   RAI CLOCK WIDGET
   Correzione reale
   ========================= */

.rai-clock-widget{
  width:100%;
  max-width:220px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  user-select:none;
  box-sizing:border-box;
}

.rai-date{
  box-sizing:border-box;
  width:100%;
  max-width:160px;
  font-family:"Courier New", Courier, monospace;
  font-size:14px;
  font-weight: bold;
  line-height:1;
  letter-spacing:.08em;
  color:rgb(0, 0, 0);
  background:rgb(224, 218, 0);;
  border:3px solid rgba(255,255,255,.92);
  padding:6px 10px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,.18);
}

.rai-clock-face{
  width:100%;
  max-width:220px;
}

.rai-clock-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.22));
}

.rai-tick{
  stroke:#000000;
  stroke-linecap:round;
}

.rai-tick.minor{
  stroke-width:2;
  opacity:.95;
}

.rai-tick.major{
  stroke-width:4;
}

.rai-tick.quarter{
  stroke-width:5;
}

.rai-ring{
  fill:rgb(224, 218, 0);;
  stroke:#000000;
  stroke-width:2.5;
  opacity:.98;
}

.rai-hand{
  stroke:#000000;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

.rai-hour{
  stroke-width:6;
}

.rai-minute{
  stroke-width:4.5;
}

.rai-second{
  stroke-width:2.5;
  opacity:.98;
}

.rai-cap{
  fill:#000000;
  stroke:rgb(224, 218, 0);;
  stroke-width:2;
}

.rai-clock-label{
  font-family:"Courier New", Courier, monospace;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.08em;
  color:rgb(224, 218, 0);
  text-align:center;
  opacity:.9;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

@media (max-width:420px){
  .rai-clock-widget{
    max-width:180px;
    display:none !important;
  }

  .rai-clock-face{
    max-width:180px;
  }

  .rai-date{
    font-size:13px;
    max-width:140px;
  }

  .rai-clock-label{
    font-size:12px;
  }
}