/*
 * Webtend Business Hours — Frontend Styles v1.0.4
 *
 * ── 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;
}

/*
 * Utility: add class="wbh-center" via the shortcode/block/widget "class"
 * option to center the status bar (badge + next-change text) horizontally,
 * e.g. [webtend_business_hours show_table="false" class="wbh-center"].
 */
.wbh-center .wbh-widget__status-bar,
.wbh-center.wbh-widget {
	justify-content: center;
	text-align: center;
}

/*
 * Utility: add class="wbh-right" to align the status bar to the right,
 * e.g. [webtend_business_hours show_table="false" class="wbh-right"].
 */
.wbh-right .wbh-widget__status-bar {
	justify-content: flex-end;
	text-align: right;
}

.wbh-right.wbh-widget {
	text-align: right;
}

.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;
}