/*
 * Webtend Business Hours — Frontend Styles v1.0.3
 *
 * ── CSS Custom Properties (Theming API) ────────────────────────────────
 *
 * All visual tokens are exposed as --wbh-* custom properties on .wbh-widget.
 * Override any of these in your theme stylesheet to restyle the widget
 * without specificity wars or !important hacks:
 *
 *   .wbh-widget {
 *     --wbh-open:          #16a34a;   Open status colour
 *     --wbh-open-bg:       #dcfce7;   Open badge background
 *     --wbh-closed:        #dc2626;   Closed status colour
 *     --wbh-closed-bg:     #fee2e2;   Closed badge background
 *     --wbh-accent:        #4f46e5;   Accent / today highlight
 *     --wbh-today-bg:      #eef2ff;   Today row background
 *     --wbh-today-color:   inherit;   Today row text colour
 *     --wbh-text:          inherit;   Primary text colour
 *     --wbh-text-muted:    #64748b;   Secondary / muted text
 *     --wbh-border:        #e2e8f0;   Table row border colour
 *     --wbh-font:          inherit;   Font family
 *     --wbh-font-size:     0.9rem;    Base font size
 *     --wbh-radius:        6px;       Badge border-radius
 *     --wbh-row-padding:   8px 0;     Table row padding
 *     --wbh-badge-radius:  999px;     Status badge border-radius
 *   }
 *
 * ───────────────────────────────────────────────────────────────────────
 */

.wbh-widget {
	/* Status colours */
	--wbh-open:         #16a34a;
	--wbh-open-bg:      #dcfce7;
	--wbh-closed:       #dc2626;
	--wbh-closed-bg:    #fee2e2;

	/* Accent & highlights */
	--wbh-accent:       #4f46e5;
	--wbh-today-bg:     #eef2ff;
	--wbh-today-color:  inherit;

	/* Typography */
	--wbh-text:         inherit;
	--wbh-text-muted:   #64748b;
	--wbh-font:         inherit;
	--wbh-font-size:    0.9rem;

	/* Layout */
	--wbh-border:       #e2e8f0;
	--wbh-row-padding:  8px 0;
	--wbh-radius:       6px;
	--wbh-badge-radius: 999px;

	font-family: var(--wbh-font);
	font-size:   var(--wbh-font-size);
}

/* =========================================================
   Status Bar
   ========================================================= */
.wbh-widget__status-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.wbh-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--wbh-badge-radius);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
}

.wbh-status-badge--open {
	background: var(--wbh-open-bg);
	color: var(--wbh-open);
}

.wbh-status-badge--closed {
	background: var(--wbh-closed-bg);
	color: var(--wbh-closed);
}

.wbh-status-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.wbh-status-badge--open .wbh-status-badge__dot {
	animation: wbh-pulse-fe 2s infinite;
}

@keyframes wbh-pulse-fe {
	0%, 100% { opacity: 1; }
	50%       { opacity: .35; }
}

.wbh-widget__next-change,
.wbh-widget__holiday-label {
	font-size: 0.8125rem;
	color: var(--wbh-text-muted);
}

/* =========================================================
   Hours Table
   ========================================================= */
.wbh-hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.wbh-hours-row td,
.wbh-hours-row th {
	padding: var(--wbh-row-padding);
	padding-left: 10px;
	padding-right: 10px;
	border-bottom: 1px solid var(--wbh-border);
	vertical-align: middle;
}

.wbh-hours-row:last-child td,
.wbh-hours-row:last-child th {
	border-bottom: none;
}

.wbh-hours-row__day {
	font-weight: 500;
	color: var(--wbh-text);
	width: 34%;
	position: relative;
	padding-left: 14px;
}

.wbh-hours-row__hours {
	color: var(--wbh-text-muted);
	text-align: right;
}

.wbh-hours-row--closed .wbh-hours-row__hours {
	color: #94a3b8;
	font-style: italic;
}

/* Today highlight */
.wbh-hours-row--today {
	background:    var(--wbh-today-bg);
	border-radius: var(--wbh-radius);
	color:         var(--wbh-today-color);
}

.wbh-hours-row--today .wbh-hours-row__day {
	color:       var(--wbh-accent);
	font-weight: 700;
}

.wbh-today-marker {
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--wbh-accent);
	border-radius: 50%;
	margin-left: 6px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}


/* ==========================================================================
   v1.0.3 — Compact layouts and the closed-notice bar
   ========================================================================== */

/* "Today only" layout. */
.wbh-widget__today {
	margin: 6px 0 0;
	font-size: var(--wbh-font-size);
	color: var(--wbh-text);
}

.wbh-widget__today-label {
	font-weight: 700;
	margin-right: 6px;
}

.wbh-widget__today-label::after {
	content: ':';
}

.wbh-widget__today-hours {
	color: var(--wbh-text-muted);
}

/* Closed-notice bar. Override the colours from your theme stylesheet:
   .wbh-notice-bar { --wbh-notice-bg: #7c2d12; --wbh-notice-text: #fff; } */
.wbh-notice-bar {
	--wbh-notice-bg:   #1e1b4b;
	--wbh-notice-text: #ffffff;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 16px;
	background: var(--wbh-notice-bg);
	color: var(--wbh-notice-text);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

.wbh-notice-bar[hidden] {
	display: none;
}

.wbh-notice-bar--fixed {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
}

.wbh-notice-bar__text {
	margin: 0;
}

.wbh-notice-bar__next {
	margin-left: 6px;
	opacity: .9;
}

.wbh-notice-bar__close {
	flex: none;
	padding: 0 6px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: .8;
}

.wbh-notice-bar__close:hover,
.wbh-notice-bar__close:focus-visible {
	opacity: 1;
}

.wbh-notice-bar__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}