/*
 * Palette: white / black / #F6EBEB / #a0001a / #ffc94a / #4442ad.
 * The open/closing-soon/closed status dot stays green/yellow/red since
 * that's a universal traffic-light convention, not brand chrome - let me
 * know if you'd rather fold that into the palette above instead.
 */
.ssw-widget {
	--ssw-pink: #F6EBEB;
	--ssw-red: #a0001a;
	--ssw-yellow: #ffc94a;
	--ssw-blue: #4442ad;
	--ssw-gray: #d8d8d8;
	--ssw-gray-light: #ececec;

	/* This is the ONLY element whose size ever changes the surrounding
	   page layout, and it only ever sizes to .ssw-badge (see below) -
	   .ssw-details is always position:absolute so it never affects this
	   box's dimensions, which is what keeps open/close from shifting
	   surrounding text. */
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.ssw-box {
	position: relative;
	display: inline-block;
}

/* The status line is plain inline text - not a native <button>, so no
   theme button styling (background/border/padding/brand color) can
   collide with it; it should look exactly like the surrounding text.
   Its size never changes between open/closed states. */
.ssw-badge {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.ssw-badge:hover .ssw-badge-text {
	text-decoration: underline;
}

.ssw-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #999999;
	flex: none;
	display: inline-block;
}

/* Status colors are semantic (green/yellow/red) and stay fixed regardless
   of brand palette, so the meaning is instantly recognizable. */
.ssw-widget.is-open .ssw-dot {
	background: #2e9e44;
}

.ssw-widget.is-closing-soon .ssw-dot {
	background: var(--ssw-yellow);
}

.ssw-widget.is-closed .ssw-dot {
	background: var(--ssw-red);
}

/* Keep display rules keyed off [hidden] explicitly so this stays closed
   by default; a class rule setting `display: block` unconditionally would
   silently override the hidden attribute. Positioned absolutely and
   anchored flush under the badge (zero gap) so it reads as one continuous
   piece without ever changing the badge's own box size - that's what
   keeps the surrounding page from shifting when it opens/closes. */
.ssw-details[hidden] {
	display: none;
}

.ssw-details:not([hidden]) {
	display: block;
}

.ssw-details {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	background: #ffffff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	padding: 8px 12px 6px;
	width: 300px;
	max-width: calc(100vw - 24px);
	max-height: 80vh;
	overflow-y: auto;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	color: #000000;
}

/* In-flow (not absolutely positioned) so its height is accounted for
   predictably - an absolutely positioned close button here was leaving an
   awkward gap above the disclaimer since nothing reserved space for it.
   Negative margin pulls it snugly into the top-right corner instead. */
.ssw-close {
	display: block;
	width: fit-content;
	margin: -4px -6px 4px auto;
	padding: 4px 6px;
	font-size: 24px;
	line-height: 1;
	color: #000000;
	cursor: pointer;
}

.ssw-close:hover {
	color: var(--ssw-red);
}

.ssw-clarify {
	display: block;
	background: var(--ssw-pink);
	padding: 8px 10px;
	font-size: 13px;
	color: #000000;
	margin: 0 0 12px 0;
}

.ssw-locations {
	display: block;
}

.ssw-location {
	margin: 0 0 10px 0;
}

.ssw-location:last-child {
	margin-bottom: 0;
}

.ssw-location-divider {
	height: 1px;
	background: var(--ssw-gray);
	margin: 12px 0;
}

.ssw-location-name {
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 3px 0;
	display: flex;
	align-items: center;
	gap: 7px;
	color: #000000;
}

.ssw-location-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #999;
	flex: none;
	display: inline-block;
}

.ssw-location.is-open .ssw-location-dot {
	background: #2e9e44;
}

.ssw-location.is-closing-soon .ssw-location-dot {
	background: var(--ssw-yellow);
}

.ssw-location.is-closed .ssw-location-dot {
	background: var(--ssw-red);
}

.ssw-location-today {
	color: #000000;
	font-size: 15px;
	margin: 0 0 6px 0;
}

.ssw-location-address,
.ssw-location-phone {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px 0;
	font-size: 14px;
}

.ssw-location-phone {
	margin-bottom: 8px;
}

.ssw-icon {
	display: inline-flex;
	color: #000000;
	flex: none;
}

.ssw-location-address a,
.ssw-location-phone a {
	color: var(--ssw-blue);
	text-decoration: none;
}

.ssw-location-address a:hover,
.ssw-location-phone a:hover {
	color: var(--ssw-red);
	text-decoration: underline;
}

/* Collapsible "Show/Hide Hours" bar - a light gray block, not a link, with
   a stemless chevron that flips when open. Once open, the details below
   share the same light gray background so it reads as one connected
   piece rather than the bar and its content looking separate. */
.ssw-hours-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--ssw-gray-light);
	padding: 7px 10px;
	font-size: 14px;
	font-weight: 600;
	color: #000000;
	cursor: pointer;
}

.ssw-hours-toggle:hover {
	background: var(--ssw-gray);
}

.ssw-hours-chevron {
	display: inline-flex;
	flex: none;
	transition: transform 0.15s ease;
}

.ssw-hours-toggle.is-open .ssw-hours-chevron {
	transform: rotate(180deg);
}

.ssw-hours-details {
	background: var(--ssw-gray-light);
	padding: 6px 10px 8px;
}

.ssw-schedule-heading {
	font-weight: 700;
	font-size: 13px;
	color: var(--ssw-red);
	margin: 8px 0 3px 0;
}

.ssw-schedule {
	list-style: none;
	margin: 4px 0 0 0;
	padding: 0;
}

.ssw-schedule-row {
	padding: 2px 0;
	font-size: 14px;
	color: #000000;
}

.ssw-day-label {
	font-weight: 700;
}

.ssw-schedule-row.is-today {
	font-weight: 700;
	color: var(--ssw-blue);
}

/* If the widget sits near the right edge (e.g. in a right-aligned header
   slot), add the "ssw-align-right" class via a wrapper to flip the card
   so it opens to the left instead of running off-screen. Usage:
   <div class="ssw-align-right">[store_status_widget]</div> */
.ssw-align-right .ssw-details {
	left: auto;
	right: 0;
}