.raoa-info-box {
	--raoa-info-accent: #e6a32a;
	--raoa-info-line-width: 44px;
	--raoa-info-icon-overlap: 48px;
	--raoa-info-media-width: 46%;
	--raoa-info-media-overlay: transparent;
	--raoa-info-media-badge-x: 22px;
	--raoa-info-media-badge-y: 22px;
	--raoa-info-corner-accent: #0f3159;
	--raoa-info-corner-line: 3px;
	--raoa-info-corner-offset: 20px;
	--raoa-info-corner-length: 68%;
	--raoa-info-corner-vertical-length: 52%;
	--raoa-info-corner-icon-x: 20px;
	--raoa-info-corner-icon-y: 20px;
	--raoa-info-glass-blur: 18px;
	--raoa-info-glass-width: 82%;
	--raoa-info-glass-panel-margin: 42px;
	--raoa-info-glass-icon-x: -42px;
	--raoa-info-glass-icon-y: 10px;
	--raoa-info-glass-button-x: 54px;
	--raoa-info-glass-button-y: 24px;
	--raoa-info-glass-button-angle: 28px;
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
	border: 1px solid rgba(15, 49, 89, 0.12);
	border-radius: 14px;
	background-color: #ffffff;
	color: #14213d;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
	isolation: isolate;
	transition-property: transform, box-shadow, border-color, background-color;
	transition-timing-function: ease;
}

.raoa-info-box-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	padding: 40px;
}

.raoa-info-box-icon {
	position: relative;
	z-index: 4;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border: 2px solid #0f3159;
	border-radius: 50%;
	background-color: #ffffff;
	color: #0f3159;
	font-size: 38px;
	line-height: 1;
	transition-property: color, background-color, border-color, box-shadow, transform;
	transition-timing-function: ease;
}

.raoa-info-box-icon svg,
.raoa-info-box-button-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.raoa-info-box-media {
	position: relative;
	z-index: 1;
	flex: 0 0 var(--raoa-info-media-width);
	min-width: 0;
	overflow: hidden;
}

.raoa-info-box-media::after {
	position: absolute;
	inset: 0;
	background-color: var(--raoa-info-media-overlay);
	content: "";
	pointer-events: none;
}

.raoa-info-box-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition-property: transform, filter;
	transition-timing-function: ease;
}

.raoa-info-box-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background-color: #2d67d7;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
}

.raoa-info-box-title {
	margin: 0 0 16px;
	color: #10284a;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.12;
}

.raoa-info-box-accent {
	display: block;
	width: var(--raoa-info-line-width);
	height: 3px;
	margin-bottom: 22px;
	border-radius: 999px;
	background-color: var(--raoa-info-accent);
}

.raoa-info-box-description {
	margin: 0 0 28px;
	color: #3c4858;
	font-size: 17px;
	line-height: 1.6;
}

.raoa-info-box-description > :first-child {
	margin-top: 0;
}

.raoa-info-box-description > :last-child {
	margin-bottom: 0;
}

.raoa-info-box-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 5px;
	background-color: #174db6;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.raoa-info-box-button:hover,
.raoa-info-box-button:focus-visible {
	background-color: #0f3159;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-2px);
}

.raoa-info-box-button:focus {
	outline: none;
}

.raoa-info-box-button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.45);
	outline-offset: 3px;
}

.raoa-info-box-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	line-height: 1;
	transition: transform 250ms ease;
}

.raoa-info-box-button:hover .raoa-info-box-button-icon {
	transform: translateX(4px);
}

/* Icon Top Classic */
.raoa-info-box-style-classic {
	overflow: visible;
	max-width: 430px;
	margin-inline: auto;
	margin-top: var(--raoa-info-icon-overlap);
	text-align: center;
}

.raoa-info-box-style-classic .raoa-info-box-icon {
	position: absolute;
	top: calc(-1 * var(--raoa-info-icon-overlap));
	left: 50%;
	transform: translateX(-50%);
}

.raoa-info-box-style-classic .raoa-info-box-content {
	align-items: center;
	padding-top: calc(44px + var(--raoa-info-icon-overlap));
	text-align: center;
}

.raoa-info-box-style-classic .raoa-info-box-button {
	padding-inline: 0;
	background: transparent;
	color: #174db6;
}

.raoa-info-box-style-classic .raoa-info-box-button:hover {
	background: transparent;
	color: #0f3159;
	box-shadow: none;
}

/* Side Media Feature */
.raoa-info-box-style-media {
	min-height: 320px;
}

.raoa-info-box-style-media .raoa-info-box-icon {
	display: none;
}

.raoa-info-box-style-media.raoa-info-box-media-right {
	flex-direction: row-reverse;
}

.raoa-info-box-style-media .raoa-info-box-badge {
	position: absolute;
	top: var(--raoa-info-media-badge-y);
	left: var(--raoa-info-media-badge-x);
	z-index: 3;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 5px;
	background-color: rgba(8, 30, 73, 0.42);
}

.raoa-info-box-style-media.raoa-info-box-media-right .raoa-info-box-badge {
	right: var(--raoa-info-media-badge-x);
	left: auto;
}

.raoa-info-box-style-media .raoa-info-box-content {
	padding: clamp(30px, 5vw, 64px);
}

/* Corner Accent Card */
.raoa-info-box-style-corner {
	max-width: 520px;
	margin-inline: auto;
	overflow: visible;
}

.raoa-info-box-style-corner::before,
.raoa-info-box-style-corner::after {
	position: absolute;
	z-index: 1;
	background-color: var(--raoa-info-corner-accent);
	content: "";
	pointer-events: none;
}

.raoa-info-box-style-corner::before {
	top: calc(var(--raoa-info-corner-offset) + 31px);
	right: var(--raoa-info-corner-offset);
	width: var(--raoa-info-corner-length);
	height: var(--raoa-info-corner-line);
}

.raoa-info-box-style-corner::after {
	right: var(--raoa-info-corner-offset);
	bottom: var(--raoa-info-corner-offset);
	width: var(--raoa-info-corner-length);
	height: var(--raoa-info-corner-vertical-length);
	border-right: var(--raoa-info-corner-line) solid var(--raoa-info-corner-accent);
	border-bottom: var(--raoa-info-corner-line) solid var(--raoa-info-corner-accent);
	background: transparent;
}

.raoa-info-box-style-corner .raoa-info-box-icon {
	position: absolute;
	top: var(--raoa-info-corner-icon-y);
	left: var(--raoa-info-corner-icon-x);
	width: 78px;
	height: 78px;
	border: 0;
	border-radius: 8px;
	background-color: var(--raoa-info-corner-accent);
	color: #ffffff;
}

.raoa-info-box-style-corner .raoa-info-box-content {
	padding: 132px 36px 42px;
}

.raoa-info-box-style-corner .raoa-info-box-accent {
	display: none;
}

.raoa-info-box-style-corner .raoa-info-box-button {
	padding-inline: 0;
	background: transparent;
	color: var(--raoa-info-corner-accent);
}

.raoa-info-box-style-corner .raoa-info-box-button:hover {
	background: transparent;
	color: #174db6;
	box-shadow: none;
}

/* Glass Overlay Action */
.raoa-info-box-style-glass {
	align-items: center;
	justify-content: center;
	min-height: 420px;
	overflow: hidden;
	border: 0;
	background:
		radial-gradient(circle at 92% 4%, rgba(255, 119, 103, 0.82), transparent 32%),
		radial-gradient(circle at 4% 100%, rgba(18, 103, 233, 0.46), transparent 38%),
		linear-gradient(135deg, #020d27 0%, #14264d 55%, #31233d 100%);
}

.raoa-info-box-style-glass::before {
	position: absolute;
	z-index: 0;
	right: -8%;
	bottom: -44%;
	left: -8%;
	height: 72%;
	background:
		repeating-radial-gradient(
			ellipse at 18% 110%,
			transparent 0,
			transparent 11px,
			rgba(30, 112, 239, 0.2) 12px,
			rgba(30, 112, 239, 0.2) 13px,
			transparent 14px,
			transparent 20px
		);
	content: "";
	opacity: 0.8;
	pointer-events: none;
}

.raoa-info-box-style-glass .raoa-info-box-content {
	z-index: 2;
	flex: 0 1 var(--raoa-info-glass-width);
	margin-block: var(--raoa-info-glass-panel-margin);
	padding: 72px 72px 62px 96px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 20px 48px rgba(2, 10, 28, 0.24);
	-webkit-backdrop-filter: blur(var(--raoa-info-glass-blur));
	backdrop-filter: blur(var(--raoa-info-glass-blur));
}

.raoa-info-box-style-glass .raoa-info-box-icon {
	position: absolute;
	z-index: 4;
	top: var(--raoa-info-glass-icon-y);
	left: calc((100% - var(--raoa-info-glass-width)) / 2 + var(--raoa-info-glass-icon-x));
	width: 112px;
	height: 112px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 16px;
	background-image: linear-gradient(135deg, #1b70f0 0%, #ff6f61 100%);
	color: #ffffff;
	font-size: 48px;
	box-shadow: 0 14px 30px rgba(2, 10, 28, 0.28);
}

.raoa-info-box-style-glass .raoa-info-box-badge {
	margin-bottom: 12px;
	padding: 6px 16px;
	background-color: #2f67d8;
	font-size: 13px;
}

.raoa-info-box-style-glass .raoa-info-box-title,
.raoa-info-box-style-glass .raoa-info-box-description {
	color: #ffffff;
}

.raoa-info-box-style-glass .raoa-info-box-title {
	margin-bottom: 16px;
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1.08;
}

.raoa-info-box-style-glass .raoa-info-box-accent {
	width: 54px;
	height: 3px;
	margin-bottom: 24px;
	background-color: #f2c356;
}

.raoa-info-box-style-glass .raoa-info-box-description {
	max-width: 390px;
	margin-bottom: 26px;
	font-size: 18px;
	line-height: 1.55;
}

.raoa-info-box-style-glass .raoa-info-box-button {
	align-self: flex-end;
	min-width: 250px;
	margin-right: calc(-1 * var(--raoa-info-glass-button-x));
	margin-bottom: calc(-1 * var(--raoa-info-glass-button-y));
	padding: 18px 36px 18px 50px;
	border-radius: 8px;
	background-image: linear-gradient(135deg, #3278ef 0%, #1657ca 100%);
	box-shadow: 0 10px 24px rgba(2, 10, 28, 0.26);
	clip-path: polygon(var(--raoa-info-glass-button-angle) 0, 100% 0, 100% 100%, var(--raoa-info-glass-button-angle) 100%, 0 50%);
}

.raoa-info-box-style-glass .raoa-info-box-button:hover {
	background-image: linear-gradient(135deg, #4388ff 0%, #174fb5 100%);
}

@media (max-width: 767px) {
	.raoa-info-box-style-media,
	.raoa-info-box-style-media.raoa-info-box-media-right {
		flex-direction: column;
	}

	.raoa-info-box-style-media .raoa-info-box-media {
		flex-basis: auto;
		width: 100%;
		min-height: 240px;
	}

	.raoa-info-box-style-media.raoa-info-box-media-right .raoa-info-box-badge {
		right: auto;
		left: var(--raoa-info-media-badge-x);
	}

	.raoa-info-box-style-glass {
		padding: 70px 20px 30px;
	}

	.raoa-info-box-style-glass .raoa-info-box-content {
		flex-basis: 100%;
		width: 100%;
		margin: 0;
		padding: 70px 26px 34px;
	}

	.raoa-info-box-style-glass .raoa-info-box-icon {
		top: 24px;
		left: 50%;
		transform: translateX(-50%);
	}

	.raoa-info-box-style-glass .raoa-info-box-button {
		align-self: flex-start;
		margin: 0;
		min-width: 0;
		padding-inline: 38px;
	}

	.raoa-info-box-style-corner .raoa-info-box-content {
		padding-inline: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.raoa-info-box-button,
	.raoa-info-box-button-icon {
		transition-duration: 0.01ms !important;
	}
}
