/**
 * In-Article Callout & Notice Widget Styles.
 *
 * Responsive, modern, clean editorial callout boxes for classic articles
 * featuring 5 distinct states: success, warning, danger, info, quote.
 *
 * @package RayTheme
 */

.ray-callout-widget {
	width: 100%;
	margin: 26px 0;
	box-sizing: border-box;
	clear: both;
	direction: rtl;
	text-align: right;
}

.ray-callout-card {
	display: flex;
	align-items: stretch;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 14px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}

/* Icon Column (Right in RTL) */
.ray-callout-icon-col {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 26px;
}

.ray-callout-icon-svg {
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* Vertical Divider Line */
.ray-callout-divider {
	width: 2.5px;
	border-radius: 3px;
	align-self: stretch;
	flex-shrink: 0;
}

/* Content Area (Left of Divider in RTL) */
.ray-callout-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
}

.ray-callout-title {
	display: block;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.6;
	margin-bottom: 4px;
}

.ray-callout-text {
	font-size: 14px;
	line-height: 1.85 !important;
	color: #1e293b;
	word-break: break-word;
}

.ray-callout-text p {
	margin: 0 0 6px 0;
	line-height: inherit;
}

.ray-callout-text p:last-child {
	margin-bottom: 0;
}

.ray-callout-text a {
	color: #0650d7;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
	transition: color 0.15s ease;
}

.ray-callout-text a:hover {
	color: #043cb0;
}

.ray-callout-text strong,
.ray-callout-text b {
	font-weight: 700;
	color: #0f172a;
}

/* ==========================================================================
   State 1: Success (Safe / Updates / Broker Releases)
   ========================================================================== */
.ray-callout-widget--success .ray-callout-card {
	background: #f7fef9;
	border: 1.5px solid #bbf7d0;
	box-shadow: 0 2px 10px rgba(16, 185, 129, 0.04);
}

.ray-callout-widget--success .ray-callout-divider {
	background-color: #10b981;
}

.ray-callout-widget--success .ray-callout-title {
	color: #065f46;
}

/* ==========================================================================
   State 2: Warning (Caution / Important Notes)
   ========================================================================== */
.ray-callout-widget--warning .ray-callout-card {
	background: #fffdf5;
	border: 1.5px solid #fde68a;
	box-shadow: 0 2px 10px rgba(245, 158, 11, 0.04);
}

.ray-callout-widget--warning .ray-callout-divider {
	background-color: #f59e0b;
}

.ray-callout-widget--warning .ray-callout-title {
	color: #92400e;
}

/* ==========================================================================
   State 3: Danger (High Risk / Critical Alert)
   ========================================================================== */
.ray-callout-widget--danger .ray-callout-card {
	background: #fdf5f5;
	border: 1.5px solid #fecaca;
	box-shadow: 0 2px 10px rgba(239, 68, 68, 0.04);
}

.ray-callout-widget--danger .ray-callout-divider {
	background-color: #ef4444;
}

.ray-callout-widget--danger .ray-callout-title {
	color: #991b1b;
}

/* ==========================================================================
   State 4: Info (Neutral / Informational Notice)
   ========================================================================== */
.ray-callout-widget--info .ray-callout-card {
	background: #f4f8fd;
	border: 1.5px solid #bfdbfe;
	box-shadow: 0 2px 10px rgba(37, 99, 235, 0.04);
}

.ray-callout-widget--info .ray-callout-divider {
	background-color: #2563eb;
}

.ray-callout-widget--info .ray-callout-title {
	color: #1e40af;
}

/* ==========================================================================
   State 5: Quote (Citation / Highlighted Excerpt)
   ========================================================================== */
.ray-callout-widget--quote .ray-callout-card {
	background: #f8fafc;
	border: 1.5px solid #e2e8f0;
	box-shadow: 0 2px 10px rgba(2, 132, 199, 0.04);
}

.ray-callout-widget--quote .ray-callout-divider {
	background-color: #0284c7;
}

.ray-callout-widget--quote .ray-callout-title {
	color: #0369a1;
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */
@media (max-width: 600px) {
	.ray-callout-card {
		padding: 12px 14px;
		gap: 10px;
	}

	.ray-callout-icon-svg {
		width: 20px;
		height: 20px;
	}

	.ray-callout-title {
		font-size: 13.5px;
	}

	.ray-callout-text {
		font-size: 13px;
		line-height: 1.75 !important;
	}
}