/* ==========================================================================
   Astre Off Days — unified cosmic card (used in checkout notice + shortcode)
   ========================================================================== */

.astre-off-days-card {
	--astre-bg-1: #1a1430;
	--astre-bg-2: #2c1d4a;
	--astre-accent: #f5d4b5;
	--astre-accent-2: #e8a87c;
	--astre-text: #f7f0e6;
	--astre-text-muted: rgba(247, 240, 230, 0.72);

	container-type: inline-size;
	container-name: astre-off-card;

	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	color: var(--astre-text);
	background:
		radial-gradient(circle at 0% 0%, rgba(245, 212, 181, 0.15) 0%, transparent 45%),
		radial-gradient(circle at 100% 100%, rgba(232, 168, 124, 0.12) 0%, transparent 50%),
		linear-gradient(135deg, var(--astre-bg-1) 0%, var(--astre-bg-2) 100%);
	border-radius: 14px;
	box-shadow:
		0 6px 24px -10px rgba(26, 20, 48, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	font-size: 14px;
	line-height: 1.5;
	overflow: hidden;
}

/* Subtle starfield via layered radial-gradients */
.astre-off-days-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.5), transparent 50%),
		radial-gradient(1px 1px at 78% 18%, rgba(255, 255, 255, 0.35), transparent 50%),
		radial-gradient(1.4px 1.4px at 35% 78%, rgba(255, 255, 255, 0.45), transparent 50%),
		radial-gradient(1px 1px at 88% 65%, rgba(255, 255, 255, 0.3), transparent 50%),
		radial-gradient(1px 1px at 55% 35%, rgba(255, 255, 255, 0.28), transparent 50%);
	opacity: 0.85;
	pointer-events: none;
}

/* Faint moonlight ring on top edge */
.astre-off-days-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(245, 212, 181, 0.45) 50%, transparent 100%);
	pointer-events: none;
}

/* Decorative sparkles (only present in shortcode context) */
.astre-off-days-decor {
	position: absolute;
	color: var(--astre-accent);
	pointer-events: none;
	opacity: 0.5;
	animation: astreOffSparkle 4s ease-in-out infinite;
}

.astre-off-days-decor svg {
	width: 100%;
	height: 100%;
	display: block;
}

.astre-off-days-decor--1 { top: 10px;  right: 18px; width: 14px; height: 14px; animation-delay: 0s; }
.astre-off-days-decor--2 { bottom: 14px; right: 46px; width: 10px; height: 10px; opacity: 0.4; animation-delay: 1.2s; }
.astre-off-days-decor--3 { top: 50%;   right: 12px; width: 7px;  height: 7px;  opacity: 0.35; animation-delay: 2.4s; }

@keyframes astreOffSparkle {
	0%, 100% { opacity: 0.25; transform: scale(0.85); }
	50%      { opacity: 0.8;  transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.astre-off-days-decor { animation: none; }
}

/* Icon */
.astre-off-days-icon-wrap {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(245, 212, 181, 0.22) 0%, rgba(232, 168, 124, 0.16) 100%);
	color: var(--astre-accent);
	box-shadow:
		0 0 0 1px rgba(245, 212, 181, 0.3),
		0 0 16px rgba(245, 212, 181, 0.12);
}

/* Force SVG colors against aggressive theme/WooCommerce resets that turn
   stroke into none or fill into the page text color. */
.astre-off-days-icon {
	width: 20px;
	height: 20px;
	display: block;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--astre-accent);
	overflow: visible;
}

.astre-off-days-icon rect,
.astre-off-days-icon path {
	fill: none !important;
	stroke: currentColor !important;
}

/* The calendar icon has three filled "event dots" on the second row */
.astre-off-days-icon circle {
	fill: currentColor !important;
	stroke: none !important;
}

.astre-off-days-icon--moon {
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 0 4px rgba(245, 212, 181, 0.45));
}

/* Body */
.astre-off-days-body {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
}

.astre-off-days-message {
	color: var(--astre-text);
	font-weight: 400;
}

.astre-off-days-message > p {
	margin: 0;
	color: var(--astre-text);
}

.astre-off-days-message > p + p { margin-top: 6px; }

.astre-off-days-message a {
	color: var(--astre-accent);
	text-decoration: underline;
	text-decoration-color: rgba(245, 212, 181, 0.4);
	text-underline-offset: 3px;
}

/* Dates label + chips on a single row when possible to stay compact */
.astre-off-days-dates-row {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.astre-off-days-dates-label {
	color: var(--astre-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.astre-off-days-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.astre-off-days-list li.astre-off-days-chip {
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 12px 4px 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(245, 212, 181, 0.12);
	border: 1px solid rgba(245, 212, 181, 0.3);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--astre-text);
	white-space: nowrap;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.astre-off-days-list li.astre-off-days-chip::before { content: none !important; }

.astre-off-days-list li.astre-off-days-chip:hover {
	background: rgba(245, 212, 181, 0.2);
	border-color: rgba(245, 212, 181, 0.5);
	transform: translateY(-1px);
}

/* ==========================================================================
   Checkout notice integration — make WC notice transparent so our cosmic card
   stands alone, hide the default WC ::before icon, and constrain the card width
   so the rounded corners are visible (instead of stretching edge-to-edge).
   ========================================================================== */

.woocommerce-info:has(.astre-off-days-card),
.woocommerce-message:has(.astre-off-days-card),
.woocommerce-error:has(.astre-off-days-card) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: inherit !important;
	overflow: visible !important;
}

.woocommerce-info:has(.astre-off-days-card)::before,
.woocommerce-message:has(.astre-off-days-card)::before,
.woocommerce-error:has(.astre-off-days-card)::before {
	display: none !important;
	content: none !important;
}

/* The card itself: keep a sensible max-width on checkout too so the corners
   stay visible and the layout doesn't span the entire form width. */
.woocommerce-info > .astre-off-days-card,
.woocommerce-message > .astre-off-days-card,
.woocommerce-error > .astre-off-days-card {
	max-width: 720px;
	margin: 0 auto;
}

/* ==========================================================================
   Shortcode wrapper — just a width/spacing container around the card
   ========================================================================== */

.astre-off-days {
	margin: 1.5em auto;
	max-width: 720px;
}

/* ==========================================================================
   Container query — when the card itself is narrow (e.g. inside a sidebar
   column or a narrow Divi module), stack the icon ABOVE the message instead
   of beside it so the text doesn't wrap into a tall narrow column.
   ========================================================================== */

@container astre-off-card (max-width: 360px) {
	.astre-off-days-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 14px 16px;
	}

	.astre-off-days-icon-wrap {
		width: 34px;
		height: 34px;
	}

	.astre-off-days-body {
		width: 100%;
	}

	.astre-off-days-dates-row {
		margin-top: 6px;
	}
}

/* Fallback for browsers without container-query support: use viewport width.
   Container queries are supported in all evergreen browsers since 2023, but
   the fallback keeps the layout sane on very narrow viewports too. */
@supports not (container-type: inline-size) {
	@media (max-width: 380px) {
		.astre-off-days-card {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}
		.astre-off-days-body { width: 100%; }
	}
}

/* ==========================================================================
   Viewport-based responsive (icon/text sizing on small screens)
   ========================================================================== */

@media (max-width: 600px) {
	.astre-off-days-card {
		padding: 12px 14px;
		gap: 12px;
		border-radius: 12px;
	}
	.astre-off-days-icon-wrap {
		width: 34px;
		height: 34px;
	}
	.astre-off-days-icon { width: 18px; height: 18px; }
	.astre-off-days-icon--moon { width: 20px; height: 20px; }

	.astre-off-days-message { font-size: 14px; }

	.astre-off-days-dates-row {
		gap: 6px 10px;
	}

	.astre-off-days-decor--2,
	.astre-off-days-decor--3 { display: none; }
}