/**
 * AST Affiliate Engine — frontend styles.
 * Previously emitted inline on every page by the banner engine and smart boxes.
 * Served as a file so it can be cached and minified.
 */

/* ---------- Banners ---------- */

.ast-master-affiliate-banner { margin: 35px auto 45px auto; clear: both; }

.ast-master-affiliate-inner {
	max-width: 1456px;
	margin: 0 auto;
	text-align: center;
	overflow: visible;
	box-sizing: border-box;
}

.ast-master-affiliate-inner img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
}

.ast-master-affiliate-inner picture { display: block; }

.ast-master-banner-responsive { max-width: 100%; height: auto; }

/**
 * Reserve space before the creative loads.
 *
 * The <img> carries the desktop width/height attributes, which the browser uses
 * to reserve the correct box. On mobile the <source> swaps in a different
 * creative with a different ratio, so those attributes would reserve the wrong
 * height — the custom properties below override it with the mobile ratio.
 * Both are emitted by the banner engine only when the dimensions are known.
 */
@media ( max-width: 768px ) {
	.ast-master-banner-responsive[style*="--ae-mw"] {
		width: 100%;
		height: auto;
		aspect-ratio: var(--ae-mw) / var(--ae-mh);
	}
}

.ast-ae-script-banner .ast-master-affiliate-inner { max-width: 1160px; }
.ast-ae-gyg-city-banner .ast-master-affiliate-inner { max-width: 1160px; }
.ast-ae-script-banner .eg-affiliate-banners { margin-left: auto; margin-right: auto; }
.ast-ae-script-target:empty { min-height: 1px; }

.ast-master-affiliate-divider {
	width: 140px;
	height: 4px;
	background: #e3e3e3;
	border-radius: 999px;
	margin: 28px auto 0 auto;
}

.ast-simoptions-banner-box .ast-master-affiliate-inner,
.ast-airasia-banner-box .ast-master-affiliate-inner { max-width: 728px; }
.ast-cruisedirect-banner-box .ast-master-affiliate-inner { max-width: 600px; }
.ast-seatsaero-banner-box .ast-master-affiliate-inner { max-width: 1160px; }

@media ( max-width: 768px ) {
	.ast-master-affiliate-banner { margin: 28px auto 38px auto; }
	.ast-master-affiliate-inner { max-width: 600px; }
	.ast-simoptions-banner-box .ast-master-affiliate-inner { max-width: 300px; }
	.ast-master-affiliate-divider { width: 110px; margin-top: 24px; }
}

/* ---------- Smart boxes ---------- */

.ast-ae-smart-box { margin: 35px auto 45px; clear: both; }
.ast-ae-smart-inner { max-width: 1100px; margin: 0 auto; }

.ast-ae-smart-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
}

.ast-ae-smart-card {
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 20px;
	background: #eef6ff;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .06 );
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ast-ae-smart-card:nth-child( 2 ) { background: #fff6e8; }

.ast-ae-smart-provider {
	font-size: 13px;
	font-weight: 700;
	color: #666;
	margin-bottom: 7px;
}

.ast-ae-smart-title {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 9px;
}

.ast-ae-smart-card p { margin: 0 0 16px; line-height: 1.55; flex: 1; }

.ast-ae-smart-button {
	display: inline-block;
	text-align: center;
	text-decoration: none !important;
	font-weight: 700;
	border: 2px solid currentColor;
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: auto;
}

.ast-ae-smart-box .ast-master-affiliate-divider {
	width: 140px;
	height: 4px;
	background: #e3e3e3;
	border-radius: 999px;
	margin: 28px auto 0;
}

@media ( max-width: 768px ) {
	.ast-ae-smart-grid { grid-template-columns: 1fr; }
	.ast-ae-smart-box { margin: 28px auto 38px; }
	.ast-ae-smart-card { padding: 18px; }
	.ast-ae-smart-box .ast-master-affiliate-divider { width: 110px; margin-top: 24px; }
}