/**
 * Sales-point opening-hours editor (sp-hours.js) + the localized week-table
 * preview (OpeningHours::render_week). Plugin-owned; loaded on the admin sales
 * point form and the account sales-points section.
 */

.gdv-cm-hours__days {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 640px;
}

.gdv-cm-hours__day {
	border: 1px solid var(--gdv-ui-border, #dcdcde);
	border-radius: 6px;
	padding: 10px 12px;
	background: var(--gdv-ui-surface, #fff);
}

.gdv-cm-hours__day-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.gdv-cm-hours__day-name {
	font-weight: 600;
}

.gdv-cm-hours__closed {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--gdv-ui-text-muted, #646970);
}

.gdv-cm-hours__slots {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}

.gdv-cm-hours__slot {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gdv-cm-hours__time {
	min-width: 7em;
}

.gdv-cm-hours__sep {
	color: var(--gdv-ui-text-muted, #646970);
}

.gdv-cm-hours__add {
	align-self: flex-start;
	margin-top: 2px;
}

/* Week-table preview (server-rendered via OpeningHours::render_week). */
.gdv-cm-hours-table {
	border-collapse: collapse;
	margin-top: 8px;
	max-width: 480px;
	width: 100%;
}

.gdv-cm-hours-table__caption {
	caption-side: top;
	text-align: left;
	color: var(--gdv-ui-text-muted, #646970);
	margin-bottom: 6px;
}

.gdv-cm-hours-table__day {
	text-align: left;
	font-weight: 600;
	padding: 4px 12px 4px 0;
	white-space: nowrap;
	vertical-align: top;
}

.gdv-cm-hours-table__slots {
	padding: 4px 0;
}

.gdv-cm-hours-table__closed {
	color: var(--gdv-ui-text-muted, #646970);
}