/*
 * Операторы на связи? (js/operators.js, App\Support\Operators): точка у телефона в шапке (компьютер) и на кнопке
 * звонка (телефон), предупреждение в окне «Заказать звонок» — пока клиент заполняет заявку.
 */
.op-dot { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #9AA0A6; vertical-align: middle; }
.op-dot.is-on { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.op-dot.is-off { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .16); }

/* шапка на компьютере: точка перед номером */
.call .op-tel { display: inline-flex; align-items: center; gap: 9px; }
/* «ЖДЕМ ВАШЕГО ЗВОНКА» — в одну строку: на узком компьютере надпись переносилась, шапка становилась выше и
   панель товара при прокрутке «подпрыгивала» */
.call h4 { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1199px) {
    .call h4 { font-size: 10px; letter-spacing: -.01em; }
    .call a { font-size: 16px; }
}

/* телефон: точка в углу кнопки звонка */
.mhead-call { position: relative; }
.mhead-call .op-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; box-shadow: 0 0 0 2px #F0F2F4; }

/* окно «Заказать звонок» */
.op-note { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px;
    font-size: 14px; line-height: 20px; text-align: left; }
.op-note[hidden] { display: none; }
.op-note .op-dot { margin-top: 6px; }
.op-note.is-on { border-color: #C9F0D5; background: #EEFBF2; color: #14532D; }
.op-note.is-off { border-color: #FFD2CC; background: #FFF4F2; color: #8A1C0C; }
/* выбрали время — предупреждение коротко вспыхивает: заметно, что оно про выбранное время */
.op-note.is-flash { animation: op-flash .6s ease; }
@keyframes op-flash {
    0% { transform: scale(1); }
    40% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .op-note.is-flash { animation: none; }
}