/* Group Variations
--------------------------------------------- */

.is-style-background-blur {
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	position: relative;
}


/* Improvements for row group */
@media (max-width: 781px) {
	.row-stack {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.row-stack > * {
		flex-basis: 100% !important;
	}

	.flex-start {
		align-items: flex-start !important;
	}

	.justify-start {
		justify-content: flex-start !important;
	}
}

.row-stack > .wp-block-buttons,
.no-shrink {
	flex-shrink: 0;
}

.wp-block-group.sticky-top {
	top: calc(20px + var(--wp-admin--admin-bar--position-offset, 0px))
}


/********** Alert Styles **********/

/* Success Alert */
.wp-block-group.is-style-success-alert {
    padding: 1rem;
    border: 1px solid #c3e6cb;
    background-color: #d4edda;
    color: #155724;
    border-radius: 4px;
    display: flex;
    align-items: flex-start; /* Aligns icon with the top of the text */
}

/* Info Alert */
.wp-block-group.is-style-info-alert {
    padding: 1rem;
    border: 1px solid #b8daff;
    background-color: #cce5ff;
    color: #004085;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
}

/* Danger Alert */
.wp-block-group.is-style-danger-alert {
    padding: 1rem;
    border: 1px solid #f5c6cb;
    background-color: #f8d7da;
    color: #721c24;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
}

/* Icon Styling - Fixed Size */
.wp-block-group.is-style-success-alert::before,
.wp-block-group.is-style-info-alert::before,
.wp-block-group.is-style-danger-alert::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    margin-top: 2px; /* Adjust for better vertical alignment */
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-repeat: no-repeat;
    flex-shrink: 0; /* Prevent icon shrinking */
}

/* Specific Icons */
.wp-block-group.is-style-success-alert::before {
    -webkit-mask-image: url('../icons/check-circle.svg');
    mask-image: url('../icons/check-circle.svg');
}

.wp-block-group.is-style-info-alert::before {
    -webkit-mask-image: url('../icons/info-circle.svg');
    mask-image: url('../icons/info-circle.svg');
}

.wp-block-group.is-style-danger-alert::before {
    -webkit-mask-image: url('../icons/exclamation-triangle.svg');
    mask-image: url('../icons/exclamation-triangle.svg');
}




/********** Pill Styles for Group Block **********/


/* Success Pill */
.wp-block-group.is-style-success-pill {
    background-color: #d4edda; /* Match Success Alert background */
    border: 1px solid #c3e6cb; /* Match Success Alert border */
    color: #155724; /* Match Success Alert text color */
    border-radius: 50px;
    padding: 3px 12px 1px 12px; /* 3px top, 1px bottom, 12px horizontal */
    display: inline-flex;
    align-items: center; /* Vertically center content */
    justify-content: center;
    font-size: 12px; /* Updated font size */
    line-height: 1.2; /* Tighter line height */
    text-align: center;
    font-weight: bold;
}

/* Info Pill */
.wp-block-group.is-style-info-pill {
    background-color: #b8daff; /* Match Info Alert background */
    border: 1px solid #bee5eb; /* Match Info Alert border */
    color: #004085; /* Match Info Alert text color */
    border-radius: 50px;
    padding: 3px 12px 1px 12px; /* 3px top, 1px bottom, 12px horizontal */
    display: inline-flex;
    align-items: center; /* Vertically center content */
    justify-content: center;
    font-size: 12px; /* Updated font size */
    line-height: 1.2; /* Tighter line height */
    text-align: center;
    font-weight: bold;
}

/* Danger Pill */
.wp-block-group.is-style-danger-pill {
    background-color: #f8d7da; /* Match Danger Alert background */
    border: 1px solid #f5c6cb; /* Match Danger Alert border */
    color: #721c24; /* Match Danger Alert text color */
    border-radius: 50px;
    padding: 3px 12px 1px 12px; /* 3px top, 1px bottom, 12px horizontal */
    display: inline-flex;
    align-items: center; /* Vertically center content */
    justify-content: center;
    font-size: 12px; /* Updated font size */
    line-height: 1.2; /* Tighter line height */
    text-align: center;
    font-weight: bold;
}