/**
 * Live hours widget — open/closed badge, today's hours and weekly schedule.
 *
 * Reuses the shared --mytheme-* design tokens (defined in responsive.css) with
 * safe fallbacks so the component looks right even if loaded standalone.
 *
 * @package my-theme
 */

.live-hours {
	background: var(--mytheme-surface, #ffffff);
	border: 1px solid var(--mytheme-border, #e3e8ef);
	border-radius: var(--mytheme-radius, 12px);
	box-shadow: var(--mytheme-shadow, 0 6px 20px rgba(16, 32, 44, 0.08));
	padding: 1.25rem;
	color: var(--mytheme-ink, #16202c);
	font-family: inherit;
	line-height: 1.5;
}

.live-hours__status {
	text-align: center;
}

/* ---- Open / Closed badge ----------------------------------------- */
.live-hours__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	min-height: var(--mytheme-touch, 44px);
	border-radius: var(--mytheme-radius-full, 999px);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff;
	box-sizing: border-box;
}

.live-hours__badge--open {
	background: #1f9d55;
	box-shadow: 0 4px 14px rgba(31, 157, 85, 0.35);
}

.live-hours__badge--closed {
	background: #c0392b;
	box-shadow: 0 4px 14px rgba(192, 57, 43, 0.32);
}

.live-hours__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.6);
}

.live-hours__badge--open .live-hours__dot {
	animation: live-hours-pulse 2s infinite;
}

@keyframes live-hours-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
	}
	70% {
		box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

/* ---- Today's hours / next open ----------------------------------- */
.live-hours__today {
	margin: 0.85rem 0 0;
	font-size: 1rem;
}

.live-hours__today-day {
	font-weight: 700;
}

.live-hours__today-time {
	color: var(--mytheme-ink, #16202c);
}

.live-hours__today--closed {
	color: var(--mytheme-muted, #5a6675);
	font-weight: 600;
}

.live-hours__next {
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
	color: var(--mytheme-accent, #c8281e);
	font-weight: 600;
}

/* ---- Weekly schedule --------------------------------------------- */
.live-hours__schedule {
	margin-top: 1.1rem;
	border-top: 1px solid var(--mytheme-border, #e3e8ef);
	padding-top: 0.85rem;
}

.live-hours__schedule-title {
	cursor: pointer;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mytheme-muted, #5a6675);
	list-style: none;
	padding: 0.35rem 0;
	transition: color var(--mytheme-duration, 220ms) var(--mytheme-ease, ease);
}

.live-hours__schedule-title::-webkit-details-marker {
	display: none;
}

.live-hours__schedule-title::after {
	content: "\25BE";
	margin-left: 0.4rem;
	font-size: 0.7em;
	transition: transform var(--mytheme-duration, 220ms) var(--mytheme-ease, ease);
	display: inline-block;
}

.live-hours__schedule[open] .live-hours__schedule-title::after {
	transform: rotate(180deg);
}

.live-hours__schedule-title:hover,
.live-hours__schedule-title:focus-visible {
	color: var(--mytheme-ink, #16202c);
}

.live-hours__list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.live-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0.5rem;
	border-radius: var(--mytheme-radius-sm, 8px);
	font-size: 0.95rem;
}

.live-hours__row + .live-hours__row {
	border-top: 1px solid var(--mytheme-border, #e3e8ef);
}

.live-hours__row--today {
	background: rgba(200, 40, 30, 0.06);
	font-weight: 700;
}

.live-hours__row--closed .live-hours__row-time {
	color: var(--mytheme-muted, #5a6675);
}

.live-hours__row-day {
	text-align: left;
}

.live-hours__row-time {
	text-align: right;
	white-space: nowrap;
}

/* ---- Dark mode --------------------------------------------------- */
[data-theme="dark"] .live-hours {
	background: var(--mytheme-surface, #1b2430);
	border-color: var(--mytheme-border, #2c3644);
	color: var(--mytheme-ink, #e7ecf2);
}

@media (prefers-reduced-motion: reduce) {
	.live-hours__badge--open .live-hours__dot {
		animation: none;
	}

	.live-hours__schedule-title,
	.live-hours__schedule-title::after {
		transition: none;
	}
}