/**
 * MLS Genie — Open House sidebar widget.
 * Ships its own complete look using its own CSS variables — never a
 * theme's (Houzez's or any other's). High-specificity selectors so this
 * always wins over a host theme's generic sidebar/.widget styling,
 * whichever theme that is — the widget looks the same everywhere.
 */

/**
 * The outer <div class="widget ..."> wrapper is generated by the host
 * theme's own sidebar registration (before_widget/after_widget), so its
 * padding/margin varies theme to theme — Houzez's own wrapper happens to
 * add Bootstrap-style p-4/mb-4 utility classes, themselves !important.
 * A single-class selector with !important is a coin flip against another
 * single-class !important rule — whichever loads last on the page wins,
 * not whichever "should". Combining both classes on one selector
 * (.widget.widget_mlsg_open_house_widget) has higher specificity than
 * Houzez's single-class .p-4/.mb-4 rules, so it wins regardless of load
 * order — not by luck. `.widget_mlsg_open_house_widget` itself is NOT
 * Houzez-specific — WordPress core appends `widget_{id_base}` to that
 * wrapper for every widget, on every theme; only `.widget` (the generic
 * half of the combined selector) is a normal, near-universal WP theme
 * convention, not something specific to Houzez.
 */
.widget.widget_mlsg_open_house_widget {
	padding: 0 !important;
	margin: 0 0 20px !important;
}

.mlsg-oh-widget-wrap {
	--mlsg-oh-accent: #9a2f2f;
	--mlsg-oh-accent-text: #ffffff;
	--mlsg-oh-radius: 6px;
	--mlsg-oh-border: #e2e2e2;
	--mlsg-oh-text: #1f2328;
	--mlsg-oh-muted: #6b7280;

	display: block !important;
	background: #ffffff !important;
	border: 1px solid var(--mlsg-oh-border) !important;
	border-radius: var(--mlsg-oh-radius) !important;
	overflow: hidden;
	padding: 0 !important;
	margin: 0 0 20px !important;
	font-family: inherit;
}
.mlsg-oh-widget-wrap--square {
	--mlsg-oh-radius: 0px;
}

.mlsg-oh-widget-wrap .mlsg-oh-widget__header {
	display: flex !important;
	align-items: center !important;
	background: var(--mlsg-oh-accent) !important;
	color: var(--mlsg-oh-accent-text) !important;
	font-size: 1.05em !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	padding: 14px 18px !important;
	margin: 0 !important;
}

.mlsg-oh-widget-wrap .mlsg-oh-widget__body {
	padding: 16px 18px !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mlsg-oh-widget-wrap .mlsg-oh-widget__event {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mlsg-oh-border);
}
.mlsg-oh-widget-wrap .mlsg-oh-widget__event:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.mlsg-oh-widget-wrap .mlsg-oh-widget__link {
	display: block !important;
	font-weight: 600 !important;
	color: var(--mlsg-oh-text) !important;
	text-decoration: none !important;
	margin-bottom: 6px !important;
}
.mlsg-oh-widget-wrap .mlsg-oh-widget__link:hover {
	text-decoration: underline !important;
}

.mlsg-oh-widget-wrap .mlsg-oh-widget__row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px;
}

.mlsg-oh-widget-wrap .mlsg-oh-widget__when {
	font-size: 0.9em !important;
	color: var(--mlsg-oh-text) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

/* Date on its own line, time range on the next. */
.mlsg-oh-widget-wrap .mlsg-oh-widget__date,
.mlsg-oh-widget-wrap .mlsg-oh-widget__time {
	display: block !important;
}
.mlsg-oh-widget-wrap .mlsg-oh-widget__time {
	font-weight: 500 !important;
	color: var(--mlsg-oh-muted) !important;
}

.mlsg-oh-widget-wrap .mlsg-oh-widget__cal-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: #f3f4f6 !important;
	color: var(--mlsg-oh-accent) !important;
	text-decoration: none !important;
	font-size: 13px !important;
	border: 1px solid var(--mlsg-oh-border) !important;
	transition: background .15s, color .15s;
	flex-shrink: 0;
	margin-left: auto;
}
.mlsg-oh-widget-wrap .mlsg-oh-widget__cal-btn:hover {
	background: var(--mlsg-oh-accent) !important;
	color: var(--mlsg-oh-accent-text) !important;
}