/* ============================================================
   CTA con orari d'ufficio — stili condivisi
   Il markup della modale lo inietta cta-orari.js, qui c'è solo la resa.
   Classi prefissate .co- per non collidere con il CSS inline delle pagine.
   ============================================================ */

/* pallino pulsante sul bottone, solo quando l'ufficio è aperto */
[data-cta-orari]{position:relative}
[data-cta-orari].is-live::after{
  content:"";position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  background:#0fa968;box-shadow:0 0 0 2px #fff;animation:co-pulse 1.9s ease-out infinite}
@keyframes co-pulse{
  0%{box-shadow:0 0 0 2px #fff,0 0 0 0 rgba(15,169,104,.55)}
  70%{box-shadow:0 0 0 2px #fff,0 0 0 9px rgba(15,169,104,0)}
  100%{box-shadow:0 0 0 2px #fff,0 0 0 0 rgba(15,169,104,0)}
}
@media(prefers-reduced-motion:reduce){[data-cta-orari].is-live::after{animation:none}}

/* ---- modale ---- */
.co-modal[hidden]{display:none}
.co-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}
.co-modal__backdrop{position:absolute;inset:0;background:rgba(29,38,60,.55);backdrop-filter:blur(3px)}
.co-modal__dialog{position:relative;width:100%;max-width:420px;background:#fff;border-radius:20px;
  box-shadow:0 24px 60px rgba(20,30,55,.28);padding:34px 30px 28px;text-align:center;
  animation:co-in .26s cubic-bezier(.2,.8,.3,1)}
@keyframes co-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.co-modal__dialog{animation:none}}

.co-modal__close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(44,44,56,.06);color:#2C2C38;display:grid;place-items:center;
  transition:background .2s ease}
.co-modal__close:hover{background:rgba(44,44,56,.12)}
.co-modal__close svg{width:16px;height:16px}

.co-modal__badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;
  background:rgba(15,169,104,.11);color:#0b8455;font-size:12.2px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase}
.co-modal__dot{width:8px;height:8px;border-radius:50%;background:#0fa968;animation:co-blink 1.6s ease-in-out infinite}
@keyframes co-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.co-modal__dot{animation:none}}

.co-modal__title{margin:15px 0 0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#2C2C38}
.co-modal__sub{margin:9px 0 0;font-size:14.6px;line-height:1.55;color:#5b6478}

.co-modal__num{display:inline-flex;align-items:center;justify-content:center;gap:11px;margin-top:20px;
  width:100%;padding:15px 18px;border-radius:14px;text-decoration:none;
  background:#EC5B26;color:#fff;font-size:21px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 8px 20px rgba(236,91,38,.28);transition:background .2s ease,transform .2s ease}
.co-modal__num:hover{background:#D44E1E;transform:translateY(-1px)}
.co-modal__num svg{width:21px;height:21px;flex:none}

.co-modal__hint{margin:11px 0 0;font-size:12.8px;color:#8a93a6}
.co-modal__alt{display:inline-block;margin-top:16px;font-size:13.8px;font-weight:700;color:#5E7CB8;
  text-decoration:none;border-bottom:1px solid rgba(94,124,184,.34);padding-bottom:2px}
.co-modal__alt:hover{color:#4b6393;border-color:#4b6393}

@media(max-width:480px){
  .co-modal__dialog{padding:30px 22px 24px}
  .co-modal__title{font-size:20px}
  .co-modal__num{font-size:19px}
}