.avidly-alerts-container {
	/* This container now behaves as a standard block element */
	display: block;
}

.avidly-alert {
	display: none; /* JS will set to 'block' */
	position: relative;
	overflow: hidden;
	/* Explicitly define the transition to avoid conflicts with theme's global transitions (e.g., transition-all) */
	transition-property: max-height;
	transition-timing-function: ease-in-out;
	/* Duration is now set inline via PHP */
	/* Add a hint for browsers to optimize the animation */
	will-change: max-height;
	/* All styling is now handled by the editor content. */
	/* This container is now essentially a transparent wrapper. */
}

.avidly-alert-content {
	/* Reverting to a simple block container. The grid system is no longer needed. */
	display: block;
}

/* This rule can still be helpful for full-width blocks */
.avidly-alert-content > .alignfull {
	width: 100%;
}

/*
 * Force Gutenberg's justification classes to work inside the alert context.
 * These are needed because the alert container is outside the theme's main content area.
*/
.avidly-alert-content .is-content-justification-center {
	justify-content: center !important;
}
.avidly-alert-content .is-content-justification-right {
	justify-content: flex-end !important;
}
.avidly-alert-content .is-content-justification-left {
	justify-content: flex-start !important;
}
.avidly-alert-close{
    cursor: pointer;
}

.avidly-alert-close-default {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 10; /* To stay above content */
	font-size: 1.5rem;
	line-height: 1;
	color: #FFF;
	opacity: 0.5;
	transform: translateY(-50%);
}

.avidly-alert-close-default:hover {
	opacity: 0.75;
}

/* Editor styles for Gutenberg */
.editor-styles-wrapper .avidly-alert {
	display: block !important;
	max-height: none !important;
	position: relative;
	overflow: visible;
	margin: 1rem 0;
	padding: 1rem;
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.editor-styles-wrapper .avidly-alert-content {
	position: relative;
	padding-right: 2rem; /* Space for close button */
}

.editor-styles-wrapper .avidly-alert-close {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 10;
	font-size: 1.5rem;
	line-height: 1;
	color: #666;
	opacity: 0.5;
	transform: translateY(-50%);
}

.editor-styles-wrapper .avidly-alert-close:hover {
	opacity: 0.75;
}

/* Ensure Gutenberg blocks work properly in editor */
.editor-styles-wrapper .avidly-alert-content .wp-block {
	margin-top: 0;
	margin-bottom: 0;
}

.editor-styles-wrapper .avidly-alert-content .wp-block:first-child {
	margin-top: 0;
}

.editor-styles-wrapper .avidly-alert-content .wp-block:last-child {
	margin-bottom: 0;
}

/* Support for Gutenberg's width controls */
.editor-styles-wrapper .avidly-alert-content .wp-block[data-align="wide"] {
	max-width: 1200px;
}

.editor-styles-wrapper .avidly-alert-content .wp-block[data-align="full"] {
	max-width: none;
	width: 100%;
}

/* Support for Gutenberg's alignment classes */
.editor-styles-wrapper .avidly-alert-content .has-text-align-center {
	text-align: center;
}

.editor-styles-wrapper .avidly-alert-content .has-text-align-left {
	text-align: left;
}

.editor-styles-wrapper .avidly-alert-content .has-text-align-right {
	text-align: right;
}

/* Frontend styles for Gutenberg blocks */
.avidly-alert-content .wp-block-group {
	display: flex;
	flex-wrap: wrap;
}

.avidly-alert-content .wp-block-group.has-background {
	padding: 1.25em 2.375em;
}

.avidly-alert-content .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
}

/* Override WordPress default gap for alert content */
.avidly-alert-content :where(.is-layout-flex) {
	gap: 0 !important;
}

/* But respect editor settings when they are explicitly set */
.avidly-alert-content .wp-block-group[style*="gap"] :where(.is-layout-flex) {
	gap: unset !important;
}

.avidly-alert-content .wp-block-group[class*="gap-"] :where(.is-layout-flex) {
	gap: unset !important;
}

/* Support for flex direction */
.avidly-alert-content .wp-block-group.is-vertical .wp-block-group__inner-container {
	flex-direction: column;
}

.avidly-alert-content .wp-block-group.is-horizontal .wp-block-group__inner-container {
	flex-direction: row;
}

/* Support for flex alignment */
.avidly-alert-content .wp-block-group.items-start .wp-block-group__inner-container {
	align-items: flex-start;
}

.avidly-alert-content .wp-block-group.items-center .wp-block-group__inner-container {
	align-items: center;
}

.avidly-alert-content .wp-block-group.items-end .wp-block-group__inner-container {
	align-items: flex-end;
}

.avidly-alert-content .wp-block-group.items-stretch .wp-block-group__inner-container {
	align-items: stretch;
}

.avidly-alert-content .wp-block-group.justify-start .wp-block-group__inner-container {
	justify-content: flex-start;
}

.avidly-alert-content .wp-block-group.justify-center .wp-block-group__inner-container {
	justify-content: center;
}

.avidly-alert-content .wp-block-group.justify-end .wp-block-group__inner-container {
	justify-content: flex-end;
}

.avidly-alert-content .wp-block-group.justify-between .wp-block-group__inner-container {
	justify-content: space-between;
}

.avidly-alert-content .wp-block-group.justify-around .wp-block-group__inner-container {
	justify-content: space-around;
}

.avidly-alert-content .wp-block-group.justify-evenly .wp-block-group__inner-container {
	justify-content: space-evenly;
}

/* Support for flex wrap */
.avidly-alert-content .wp-block-group.wrap .wp-block-group__inner-container {
	flex-wrap: wrap;
}

.avidly-alert-content .wp-block-group.nowrap .wp-block-group__inner-container {
	flex-wrap: nowrap;
}

/* Support for individual block spacing */
.avidly-alert-content .wp-block-group .wp-block {
	margin: 0;
}

.avidly-alert-content .wp-block-group .wp-block:not(:last-child) {
	margin-bottom: 0;
}

.avidly-alert-content .wp-block-group .wp-block:not(:first-child) {
	margin-top: 0;
}

/* Support for CSS Grid blocks */
.avidly-alert-content .wp-block-group.is-layout-grid {
	display: grid;
}

.avidly-alert-content .wp-block-group.is-layout-grid .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
}

/* Support for Columns block */
.avidly-alert-content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

.avidly-alert-content .wp-block-columns.has-background {
	padding: 1.25em 2.375em;
}

.avidly-alert-content .wp-block-columns .wp-block-column {
	flex: 1;
	min-width: 0;
}

/* Support for Buttons block */
.avidly-alert-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.avidly-alert-content .wp-block-buttons.is-vertical {
	flex-direction: column;
}

.avidly-alert-content .wp-block-buttons.is-horizontal {
	flex-direction: row;
}

.avidly-alert-content .wp-block-buttons .wp-block-button {
	margin: 0;
}

/* Support for Media & Text block */
.avidly-alert-content .wp-block-media-text {
	display: grid;
	grid-template-columns: 50% 1fr;
	grid-template-areas: "media-text-media media-text-content";
	gap: 1em;
	align-items: center;
}

.avidly-alert-content .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: 1fr 50%;
	grid-template-areas: "media-text-content media-text-media";
}

.avidly-alert-content .wp-block-media-text .wp-block-media-text__media {
	grid-area: media-text-media;
}

.avidly-alert-content .wp-block-media-text .wp-block-media-text__content {
	grid-area: media-text-content;
	padding: 0 1em;
}

/* Support for Cover block */
.avidly-alert-content .wp-block-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	min-height: 430px;
}

.avidly-alert-content .wp-block-cover .wp-block-cover__inner-container {
	width: 100%;
	z-index: 1;
}

/* Support for Gallery block */
.avidly-alert-content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

.avidly-alert-content .wp-block-gallery .wp-block-image {
	margin: 0;
}

/* Support for Spacer block */
.avidly-alert-content .wp-block-spacer {
	clear: both;
}

/* Support for Separator block */
.avidly-alert-content .wp-block-separator {
	border: none;
	border-top: 2px solid currentColor;
	margin: 2em auto;
	max-width: 100px;
}

/* Support for Quote block */
.avidly-alert-content .wp-block-quote {
	border-left: 4px solid currentColor;
	margin: 0 0 1em;
	padding-left: 1em;
}

.avidly-alert-content .wp-block-quote cite {
	font-style: normal;
}

/* Support for Pullquote block */
.avidly-alert-content .wp-block-pullquote {
	border-top: 4px solid currentColor;
	border-bottom: 4px solid currentColor;
	text-align: center;
	margin: 0 0 1em;
	padding: 1em 0;
}

/* Support for Table block */
.avidly-alert-content .wp-block-table {
	overflow-x: auto;
}

.avidly-alert-content .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.avidly-alert-content .wp-block-table td,
.avidly-alert-content .wp-block-table th {
	border: 1px solid currentColor;
	padding: 0.5em;
}

.avidly-alert-content .wp-block-table th {
	background-color: rgba(0, 0, 0, 0.05);
}

/* Support for List block */
.avidly-alert-content .wp-block-list {
	margin: 0 0 1em;
	padding-left: 2em;
}

.avidly-alert-content .wp-block-list li {
	margin-bottom: 0.5em;
}

/* Support for Code block */
.avidly-alert-content .wp-block-code {
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	font-family: monospace;
	overflow: auto;
	padding: 1em;
}

/* Support for Preformatted block */
.avidly-alert-content .wp-block-preformatted {
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	font-family: monospace;
	overflow: auto;
	padding: 1em;
	white-space: pre-wrap;
}