/* ==========================================================================
   Business hours: status badge + popup (shared by stations and centers)
   ========================================================================== */
:root {
	--clt-green: #0f7d56;
	--clt-green-bg: #e3f5ec;
	--clt-amber: #a15c07;
	--clt-amber-bg: #fff1dc;
	--clt-red: #c02a2a;
	--clt-red-bg: #fdeaea;
	--clt-grey: #56606c;
	--clt-grey-bg: #eceef1;
	--clt-blue: #1f5fd6;
	--clt-blue-bg: #e7efff;
}
html.clt-no-scroll { overflow: hidden; }

.clt-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 12px; }
.clt-hbadge {
	display: inline-flex; align-items: center; gap: 7px;
	height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
	font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
	transition: filter .15s, transform .15s;
}
.clt-hbadge:hover { filter: brightness(.96); transform: translateY(-1px); }
.clt-hbadge .bi-chevron-down { font-size: 10px; opacity: .7; }
.clt-hbadge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.clt-hbadge.is-open { background: var(--clt-green-bg); color: var(--clt-green); }
.clt-hbadge.is-open .clt-hbadge-dot { animation: clt-live 2s infinite; }
.clt-hbadge.is-closing { background: var(--clt-amber-bg); color: var(--clt-amber); }
.clt-hbadge.is-closing .clt-hbadge-dot { animation: clt-blink 1s steps(2, start) infinite; }
.clt-hbadge.is-closed { background: var(--clt-red-bg); color: var(--clt-red); }
.clt-hbadge.is-maint, .clt-hbadge.is-unknown { background: var(--clt-grey-bg); color: var(--clt-grey); }
.clt-hbadge.is-soon { background: var(--clt-blue-bg); color: var(--clt-blue); }
.clt-status-text { font-size: 13.5px; color: #626a75; font-weight: 500; }
@keyframes clt-live {
	0% { box-shadow: 0 0 0 0 rgba(15, 125, 86, .45); }
	70% { box-shadow: 0 0 0 8px rgba(15, 125, 86, 0); }
	100% { box-shadow: 0 0 0 0 rgba(15, 125, 86, 0); }
}
@keyframes clt-blink { to { visibility: hidden; } }

.clt-live-dot, .clt-chip-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.clt-live-dot { animation: clt-live 2s infinite; }

/* ---------- Popup ---------- */
.clt-hm-overlay {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center; padding: 20px;
	background: rgba(15, 18, 22, .55); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .18s;
}
.clt-hm-overlay.is-in { opacity: 1; }
.clt-hm-box {
	position: relative; width: 100%; max-width: 420px; max-height: 90vh;
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
	transform: translateY(12px) scale(.98); transition: transform .22s cubic-bezier(.2, .8, .3, 1);
	color: #1b1f24;
}
.clt-hm-overlay.is-in .clt-hm-box { transform: none; }
.clt-hm-close {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 34px; height: 34px; border-radius: 50%; border: 0;
	background: rgba(255, 255, 255, .22); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.clt-hm-close:hover { background: rgba(255, 255, 255, .38); }
.clt-hm-banner { padding: 22px 60px 20px 24px; color: #fff; transition: background .3s; }
.clt-hm-banner.is-open { background: var(--clt-green); }
.clt-hm-banner.is-closing { background: #b45309; }
.clt-hm-banner.is-closed { background: var(--clt-red); }
.clt-hm-banner.is-maint, .clt-hm-banner.is-unknown { background: #4b5563; }
.clt-hm-banner.is-soon { background: var(--clt-blue); }
.clt-hm-name { font-size: 13px; opacity: .92; margin-bottom: 4px; }
.clt-hm-word { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.clt-hm-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.clt-hm-banner.is-open .clt-hm-dot { animation: clt-live-w 2s infinite; }
@keyframes clt-live-w { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.clt-hm-sub { margin-top: 6px; font-size: 13.5px; opacity: .95; font-variant-numeric: tabular-nums; }
.clt-hm-body { padding: 16px 14px 18px; overflow-y: auto; }
.clt-hm-heading { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; font-size: 15px; font-weight: 700; }
.clt-hm-row {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding: 11px 10px; border-bottom: 1px solid #e4e6ea; font-size: 14px;
}
.clt-hm-row:last-child { border-bottom: 0; }
.clt-hm-row.is-today { background: #f3f4f6; border-radius: 10px; border-bottom-color: transparent; }
.clt-hm-day { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.clt-hm-today { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #1b1f24; color: #fff; }
.clt-hm-on { color: var(--clt-green); font-weight: 700; }
.clt-hm-off { color: var(--clt-red); font-weight: 700; }
.clt-hm-empty { padding: 6px 10px; color: #626a75; }
.clt-hm-note { margin: 10px 10px 0; padding: 8px 10px; border-radius: 8px; background: #fff7e6; color: #7c4a03; font-size: 13px; }
.clt-hm-tz { margin: 10px 10px 0; font-size: 12px; color: #6b7280; }
.clt-hm-actions { display: flex; gap: 8px; margin: 14px 10px 0; }
.clt-hm-btn {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 42px; border-radius: 12px; border: 1px solid #e4e6ea;
	font-weight: 700; font-size: 14px; color: #1b1f24; text-decoration: none; transition: all .15s;
}
.clt-hm-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.clt-hm-btn.is-primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.clt-hm-btn.is-primary:hover { filter: brightness(.95); color: #fff; }

@media (max-width: 480px) {
	.clt-hm-overlay { align-items: flex-end; padding: 0; }
	.clt-hm-box { max-width: none; border-radius: 20px 20px 0 0; transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) {
	.clt-hbadge-dot, .clt-live-dot, .clt-hm-dot { animation: none !important; }
	.clt-hm-overlay, .clt-hm-box { transition: none; }
}