/* ==========================================================================
   Advanced Alert (.sentio-al)
   ==========================================================================
   Extracted from frontend.css during the Batch 8 mechanical extraction
   (2026-04-18). Behavior-preserving.
   ========================================================================== */

   ========================================================================== */

/* ─── Base ─── */
.elementor-widget-sentio-alert {
	height: auto !important;
	width: 100%;
}
.sentio-al {
	position: relative;
	overflow: hidden;
	padding: 20px;
	border-radius: 6px;
	--sentio-al-accent-color: transparent;
	--sentio-al-accent-width: 4px;
}

/* ─── Layout: Icon Left (default) ─── */
.sentio-al--layout-icon-left .sentio-al__body {
	display: flex;
	align-items: center;
	gap: 16px;
}
.sentio-al--layout-icon-left .sentio-al__content {
	flex: 1;
	min-width: 0;
}
.sentio-al--layout-icon-left .sentio-al__cta-wrap {
	flex-shrink: 0;
}

/* ─── Layout: Icon Top ─── */
.sentio-al--layout-icon-top .sentio-al__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ─── Accent Borders ─── */
.sentio-al--accent-start {
	border-inline-start: var(--sentio-al-accent-width) solid var(--sentio-al-accent-color);
}
.sentio-al--accent-end {
	border-inline-end: var(--sentio-al-accent-width) solid var(--sentio-al-accent-color);
}
.sentio-al--accent-top {
	border-top: var(--sentio-al-accent-width) solid var(--sentio-al-accent-color);
}
.sentio-al--accent-bottom {
	border-bottom: var(--sentio-al-accent-width) solid var(--sentio-al-accent-color);
}

/* ─── Icon Badge ─── */
.sentio-al__icon-wrap {
	flex-shrink: 0;
	line-height: 1;
}
.sentio-al__icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sentio-al__icon-badge--circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}
.sentio-al__icon-badge--rounded-square {
	width: 48px;
	height: 48px;
	border-radius: 8px;
}
.sentio-al__icon-badge--none {
	/* No background or sizing — icon only */
}
.sentio-al__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
}
.sentio-al__icon i {
	display: block;
}
.sentio-al__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ─── Content ─── */
.sentio-al__content {
	flex: 1;
	min-width: 0;
}
.sentio-al__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}
.sentio-al__title:last-child {
	margin-bottom: 0;
}
.sentio-al__description {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

/* ─── CTA Button ─── */
.sentio-al__cta-wrap {
	flex-shrink: 0;
}
.sentio-al__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sentio-al__cta-icon {
	display: inline-flex;
	font-size: 0.9em;
}

/* ─── Close / Dismiss Button (inherits .sentio-btn-reset) ─── */
.sentio-al__close {
	--sentio-al-close-offset: 10px;
	position: absolute;
	width: 14px;
	height: 14px;
	color: inherit;
	opacity: 1;
	transition: opacity 0.2s ease, color 0.2s ease;
	z-index: 2;
}
.sentio-al__close svg {
	width: 100%;
	height: 100%;
}
/* Position: Top End (default) */
.sentio-al__close--top-end {
	top: var(--sentio-al-close-offset);
	inset-inline-end: var(--sentio-al-close-offset);
}
/* Position: Top Start */
.sentio-al__close--top-start {
	top: var(--sentio-al-close-offset);
	inset-inline-start: var(--sentio-al-close-offset);
}
/* Position: Center End */
.sentio-al__close--center-end {
	top: 50%;
	transform: translateY(-50%);
	inset-inline-end: var(--sentio-al-close-offset);
}

/* ─── Ribbon ─── */
.sentio-al__ribbon {
	position: absolute;
	z-index: 2;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
	/* P1 polish 2026-04-21 — offset controls.
	 * JS-side ribbon_offset_x/_y write to these custom properties; the
	 * transform composes with the corner anchor, so users can nudge the
	 * ribbon inward/outward + up/down without fighting the position rule.
	 * Direction is mirrored for top-right vs top-left so "positive X =
	 * inward" behaves symmetrically.
	 */
	transform: translate(var(--al-ribbon-x, 0px), var(--al-ribbon-y, 0px));
}

.sentio-al__ribbon--top-right {
	top: 0;
	inset-inline-end: 12px;
	border-radius: 0 0 4px 4px;
	/* top-right: "positive X" means move LEFT (toward center). */
	transform: translate(calc(var(--al-ribbon-x, 0px) * -1), var(--al-ribbon-y, 0px));
}

.sentio-al__ribbon--top-left {
	top: 0;
	inset-inline-start: 12px;
	border-radius: 0 0 4px 4px;
	/* top-left: positive X moves RIGHT (toward center). */
	transform: translate(var(--al-ribbon-x, 0px), var(--al-ribbon-y, 0px));
}

/* ─── Preset: Info ─── */
.sentio-al--info {
	background-color: #e8f4fd;
	color: #1a3a5c;
	--sentio-al-accent-color: #2196F3;
}
.sentio-al--info .sentio-al__icon-badge--circle,
.sentio-al--info .sentio-al__icon-badge--rounded-square {
	background-color: rgba(33, 150, 243, 0.15);
}
.sentio-al--info .sentio-al__icon { color: #2196F3; }
.sentio-al--info .sentio-al__title { color: #0d47a1; }
.sentio-al--info .sentio-al__cta { background-color: #2196F3; color: #fff; }
.sentio-al--info .sentio-al__cta:hover { background-color: #1976D2; color: #fff; }
.sentio-al--info .sentio-al__ribbon { background-color: #2196F3; color: #fff; }

/* ─── Preset: Success ─── */
.sentio-al--success {
	background-color: #e8f5e9;
	color: #1b5e20;
	--sentio-al-accent-color: #4CAF50;
}
.sentio-al--success .sentio-al__icon-badge--circle,
.sentio-al--success .sentio-al__icon-badge--rounded-square {
	background-color: rgba(76, 175, 80, 0.15);
}
.sentio-al--success .sentio-al__icon { color: #4CAF50; }
.sentio-al--success .sentio-al__title { color: #1b5e20; }
.sentio-al--success .sentio-al__cta { background-color: #4CAF50; color: #fff; }
.sentio-al--success .sentio-al__cta:hover { background-color: #388E3C; color: #fff; }
.sentio-al--success .sentio-al__ribbon { background-color: #4CAF50; color: #fff; }

/* ─── Preset: Warning ─── */
.sentio-al--warning {
	background-color: #fff8e1;
	color: #5d4037;
	--sentio-al-accent-color: #FF9800;
}
.sentio-al--warning .sentio-al__icon-badge--circle,
.sentio-al--warning .sentio-al__icon-badge--rounded-square {
	background-color: rgba(255, 152, 0, 0.15);
}
.sentio-al--warning .sentio-al__icon { color: #FF9800; }
.sentio-al--warning .sentio-al__title { color: #e65100; }
.sentio-al--warning .sentio-al__cta { background-color: #FF9800; color: #fff; }
.sentio-al--warning .sentio-al__cta:hover { background-color: #F57C00; color: #fff; }
.sentio-al--warning .sentio-al__ribbon { background-color: #FF9800; color: #fff; }

/* ─── Preset: Danger ─── */
.sentio-al--danger {
	background-color: #ffebee;
	color: #5d1a1a;
	--sentio-al-accent-color: #F44336;
}
.sentio-al--danger .sentio-al__icon-badge--circle,
.sentio-al--danger .sentio-al__icon-badge--rounded-square {
	background-color: rgba(244, 67, 54, 0.15);
}
.sentio-al--danger .sentio-al__icon { color: #F44336; }
.sentio-al--danger .sentio-al__title { color: #b71c1c; }
.sentio-al--danger .sentio-al__cta { background-color: #F44336; color: #fff; }
.sentio-al--danger .sentio-al__cta:hover { background-color: #D32F2F; color: #fff; }
.sentio-al--danger .sentio-al__ribbon { background-color: #F44336; color: #fff; }

/* ─── Preset: Sale ─── */
.sentio-al--sale {
	background-color: #fce4ec;
	color: #4a0e2e;
	--sentio-al-accent-color: #E91E63;
}
.sentio-al--sale .sentio-al__icon-badge--circle,
.sentio-al--sale .sentio-al__icon-badge--rounded-square {
	background-color: rgba(233, 30, 99, 0.15);
}
.sentio-al--sale .sentio-al__icon { color: #E91E63; }
.sentio-al--sale .sentio-al__title { color: #880E4F; }
.sentio-al--sale .sentio-al__cta { background-color: #E91E63; color: #fff; }
.sentio-al--sale .sentio-al__cta:hover { background-color: #C2185B; color: #fff; }
.sentio-al--sale .sentio-al__ribbon { background-color: #E91E63; color: #fff; }

/* ─── Preset: Business Hours ─── */
.sentio-al--business {
	background-color: #e0f2f1;
	color: #1a3c34;
	--sentio-al-accent-color: #009688;
}
.sentio-al--business .sentio-al__icon-badge--circle,
.sentio-al--business .sentio-al__icon-badge--rounded-square {
	background-color: rgba(0, 150, 136, 0.15);
}
.sentio-al--business .sentio-al__icon { color: #009688; }
.sentio-al--business .sentio-al__title { color: #004D40; }
.sentio-al--business .sentio-al__cta { background-color: #009688; color: #fff; }
.sentio-al--business .sentio-al__cta:hover { background-color: #00796B; color: #fff; }
.sentio-al--business .sentio-al__ribbon { background-color: #009688; color: #fff; }

/* ─── Preset: Announcement ─── */
.sentio-al--announcement {
	background-color: #ede7f6;
	color: #311b60;
	--sentio-al-accent-color: #673AB7;
}
.sentio-al--announcement .sentio-al__icon-badge--circle,
.sentio-al--announcement .sentio-al__icon-badge--rounded-square {
	background-color: rgba(103, 58, 183, 0.15);
}
.sentio-al--announcement .sentio-al__icon { color: #673AB7; }
.sentio-al--announcement .sentio-al__title { color: #311B92; }
.sentio-al--announcement .sentio-al__cta { background-color: #673AB7; color: #fff; }
.sentio-al--announcement .sentio-al__cta:hover { background-color: #512DA8; color: #fff; }
.sentio-al--announcement .sentio-al__ribbon { background-color: #673AB7; color: #fff; }

/* ─── Preset: Custom ─── */
.sentio-al--custom {
	background-color: #f5f5f5;
	color: #333333;
	--sentio-al-accent-color: #333333;
}
.sentio-al--custom .sentio-al__icon-badge--circle,
.sentio-al--custom .sentio-al__icon-badge--rounded-square {
	background-color: rgba(0, 0, 0, 0.08);
}
.sentio-al--custom .sentio-al__icon { color: #333333; }
.sentio-al--custom .sentio-al__cta { background-color: #333333; color: #fff; }
.sentio-al--custom .sentio-al__cta:hover { background-color: #111111; color: #fff; }

/* ─── Entrance Animations ─── */
.sentio-al--hidden {
	opacity: 0;
	visibility: hidden;
}
.sentio-al--anim-slow   { animation-duration: 1s; }
.sentio-al--anim-normal { animation-duration: 0.6s; }
.sentio-al--anim-fast   { animation-duration: 0.3s; }

@keyframes sentioAlFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes sentioAlSlideInLeft {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes sentioAlSlideInRight {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes sentioAlSlideInUp {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes sentioAlSlideInDown {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes sentioAlBounceIn {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { opacity: 1; transform: scale(1.05); }
	70%  { transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}

.sentio-al--animate-fadeIn       { animation-name: sentioAlFadeIn;       animation-fill-mode: forwards; }
.sentio-al--animate-slideInLeft  { animation-name: sentioAlSlideInLeft;  animation-fill-mode: forwards; }
.sentio-al--animate-slideInRight { animation-name: sentioAlSlideInRight; animation-fill-mode: forwards; }
.sentio-al--animate-slideInUp    { animation-name: sentioAlSlideInUp;    animation-fill-mode: forwards; }
.sentio-al--animate-slideInDown  { animation-name: sentioAlSlideInDown;  animation-fill-mode: forwards; }
.sentio-al--animate-bounceIn     { animation-name: sentioAlBounceIn;     animation-fill-mode: forwards; }

/* ─── Dismiss Fade-Out ─── */
.sentio-al--dismissing {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ─── Responsive ─── */
@media (max-width: 767px) {
	.sentio-al--layout-icon-left .sentio-al__body {
		flex-wrap: wrap;
	}
	.sentio-al--layout-icon-left .sentio-al__cta-wrap {
		width: 100%;
		margin-top: 12px;
	}
}