/* Store notice — site-wide banner + optional one-time modal. Brand-tinted per type. */

/* ── Banner ─────────────────────────────────────────────────────────────── */
.hs-notice {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base-cream);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.hs-notice__inner {
	max-width: calc(var(--wp--style--global--content-size, 1100px) + 80px);
	margin: 0 auto;
	padding: 10px 40px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hs-notice__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.hs-notice__text {
	line-height: 1.4;
}

.hs-notice__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.hs-notice__close {
	margin-left: auto;
	flex-shrink: 0;
	background: none;
	border: 0;
	padding: 0 4px;
	font-size: 22px;
	line-height: 1;
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.15s;
}

.hs-notice__close:hover {
	opacity: 1;
}

/* Type accents */
.hs-notice--vakantie {
	background: var(--wp--preset--color--primary-pale);
}
.hs-notice--vakantie .hs-notice__icon {
	color: var(--wp--preset--color--primary);
}
.hs-notice--winter,
.hs-notice--bezorging {
	background: var(--wp--preset--color--secondary-pale);
}
.hs-notice--winter .hs-notice__icon,
.hs-notice--bezorging .hs-notice__icon {
	color: var(--wp--preset--color--secondary);
}
.hs-notice--mededeling {
	background: var(--wp--preset--color--base-cream);
}
.hs-notice--mededeling .hs-notice__icon {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 800px) {
	.hs-notice__inner {
		padding: 8px 16px;
		font-size: 13px;
	}
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.hs-notice-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hs-notice-modal[hidden] {
	display: none;
}

.hs-notice-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.hs-notice-modal__dialog {
	position: relative;
	width: calc(100% - 40px);
	max-width: 440px;
	padding: 34px 28px 30px;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--border-radius, 10px);
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
	text-align: center;
	animation: hs-notice-pop 0.28s ease;
}

@keyframes hs-notice-pop {
	from { transform: scale(0.94); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.hs-notice-modal__dialog {
		animation: none;
	}
}

.hs-notice-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: 0;
	padding: 4px;
	font-size: 26px;
	line-height: 1;
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	transition: color 0.15s;
}

.hs-notice-modal__close:hover {
	color: var(--wp--preset--color--primary);
}

.hs-notice-modal__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

.hs-notice-modal__body .hs-notice__icon {
	width: 42px;
	height: 42px;
}

.hs-notice-modal--vakantie .hs-notice__icon {
	color: var(--wp--preset--color--primary);
}
.hs-notice-modal--winter .hs-notice__icon,
.hs-notice-modal--bezorging .hs-notice__icon {
	color: var(--wp--preset--color--secondary);
}
.hs-notice-modal--mededeling .hs-notice__icon {
	color: var(--wp--preset--color--primary);
}

.hs-notice-modal__body .hs-notice__link {
	color: var(--wp--preset--color--secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}