/*
 * Side by side on desktop (calendar | amounts/checkout), stacked on
 * tablet/phone. Only a Design with Event Booking on gets the wider shell —
 * .ggsd-shell's own 720px max-width (frontend.css) is sized for the
 * single-column case and left untouched for every other Design.
 */
.ggsd-shell[data-event-enabled="1"] {
	max-width: 980px;
}

.ggsd-event-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ggsd-main-content {
	min-width: 0;
}

@media (min-width: 860px) {
	/*
	 * .ggsd-card has overflow:hidden in frontend.css (clips rounded corners
	 * for things like floating carousel arrows) — but an ancestor with any
	 * overflow other than visible stops position:sticky from working for a
	 * descendant entirely, since it becomes the sticky element's reference
	 * box instead of the viewport. Scoped to event-enabled designs only, on
	 * this same desktop breakpoint where the sticky calendar applies — a
	 * design without Event Booking keeps the original clipping untouched.
	 */
	.ggsd-shell[data-event-enabled="1"] .ggsd-card {
		overflow: visible;
	}

	.ggsd-event-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.ggsd-event-calendar {
		flex: 0 0 320px;
		margin-bottom: 0;
		/*
		 * The form column (amounts, frequency, checkout) typically runs
		 * much taller than the calendar — without this, the calendar
		 * scrolls out of view near the top while there's still plenty of
		 * form left below. Sticky keeps it in view as the donor scrolls,
		 * naturally stopping once the bottom of .ggsd-event-layout (the
		 * shared flex container) is reached, so it never overlaps the
		 * sticky donation bar or page footer below the card.
		 *
		 * --ggsd-sticky-header-offset estimates the host theme's own fixed
		 * header height (confirmed live: aatmasanmmanfoundation.org's nav
		 * bar stays pinned on scroll too, and the calendar was tucking
		 * underneath it at a smaller offset) — a single variable here so
		 * it's a one-line tweak for a taller or shorter theme header
		 * instead of hunting through the stylesheet.
		 */
		--ggsd-sticky-header-offset: 140px;
		position: sticky;
		top: var(--ggsd-sticky-header-offset);
	}

	.ggsd-main-content {
		flex: 1 1 auto;
	}
}

.ggsd-event-calendar {
	margin: 0 0 16px;
}

.ggsd-event-calendar-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ggsd-primary, #d29a00);
	margin-bottom: 8px;
}

.ggsd-cal-card {
	background: #fff;
	border: 1.5px solid color-mix(in srgb, var(--ggsd-primary, #d29a00) 25%, transparent);
	border-radius: var(--ggsd-radius, 18px);
	padding: 16px;
	transition: box-shadow 0.2s ease;
}

.ggsd-cal-card.ggsd-cal-flash,
.ggsd-event-calendar.ggsd-cal-flash .ggsd-cal-card {
	animation: ggsd-cal-flash 0.7s ease;
}

@keyframes ggsd-cal-flash {
	0%, 100% { box-shadow: none; }
	50% { box-shadow: 0 0 0 3px var(--ggsd-primary, #d29a00); }
}

.ggsd-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.ggsd-cal-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ggsd-dark, #15213d);
}

.ggsd-cal-nav {
	all: unset;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--ggsd-primary, #d29a00) 25%, transparent) !important;
	background: #fff !important;
	color: var(--ggsd-dark, #15213d) !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.ggsd-cal-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--ggsd-primary, #d29a00) 12%, #fff) !important; }
.ggsd-cal-nav:active:not(:disabled) { transform: scale(0.94); }
.ggsd-cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.ggsd-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 4px;
}

.ggsd-cal-weekday {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: #8a8270;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 0;
}

.ggsd-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

/*
 * Host themes commonly style every <button> with their own background,
 * which previously made disabled/past days render as solid, inviting
 * buttons instead of the intended muted, unclickable look. `all: unset`
 * plus !important on everything a theme is likely to set keeps this
 * calendar looking the same everywhere it's dropped.
 */
.ggsd-cal-day {
	all: unset;
	box-sizing: border-box !important;
	aspect-ratio: 1 / 1;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 10px !important;
	background: transparent !important;
	background-image: none !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	line-height: 1 !important;
	color: var(--ggsd-dark, #15213d) !important;
	cursor: default;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
}

.ggsd-cal-day.is-available {
	background: color-mix(in srgb, #1f9d66 12%, #fff) !important;
	color: #1f9d66 !important;
	cursor: pointer;
	font-weight: 700 !important;
}

.ggsd-cal-day.is-available:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(31, 157, 102, 0.2) !important;
}

.ggsd-cal-day.is-selected {
	background: var(--ggsd-primary, #d29a00) !important;
	color: #fff !important;
	font-weight: 700 !important;
	cursor: pointer;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--ggsd-primary, #d29a00) 45%, transparent) !important;
}

.ggsd-cal-day.is-booked {
	background: color-mix(in srgb, #d9534f 10%, #fff) !important;
	color: #c0504d !important;
	text-decoration: line-through !important;
	opacity: 0.85;
}

.ggsd-cal-day.is-disabled,
.ggsd-cal-day:disabled {
	background: transparent !important;
	color: #c9c5ba !important;
	font-weight: 500 !important;
}

.ggsd-cal-day:disabled,
.ggsd-cal-day.is-disabled,
.ggsd-cal-day.is-booked {
	cursor: not-allowed;
}

.ggsd-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
	font-size: 11px;
	color: #8a8270;
}

.ggsd-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ggsd-cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ggsd-cal-dot--available { background: #1f9d66; }
.ggsd-cal-dot--selected { background: var(--ggsd-primary, #d29a00); }
.ggsd-cal-dot--booked { background: #c0504d; }

.ggsd-cal-status { min-height: 14px; font-size: 11px; color: #8a8270; margin: 10px 0 0; }
.ggsd-cal-status.is-error { color: #c0504d; }

/* The injected Event Date field inside the native GiveWP form (checkout modal). */
.ggsd-native-form .ggsd-event-date-field {
	background: color-mix(in srgb, var(--ggsd-primary, #d29a00) 10%, #fff) !important;
	color: var(--ggsd-dark, #15213d) !important;
	font-weight: 600;
	cursor: not-allowed;
}

@media (max-width: 520px) {
	.ggsd-cal-card { padding: 12px; border-radius: 14px; }
	.ggsd-cal-day { font-size: 12px; border-radius: 8px !important; }
	.ggsd-cal-legend { font-size: 10px; gap: 8px; }
}