/**
 * QES Banner Ads — front-end zone styles.
 *
 * Each zone centers its banner and caps its width to the zone's desktop
 * size. Desktop/mobile creatives are swapped by viewport. The placeholder
 * is rendered in navy with white text, sized to match its zone.
 */

.qes-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	/* No vertical margin: the widget hugs its placement exactly (the host
	   section/widget controls any spacing). Horizontal auto keeps it centred.
	   The In-Article variant below keeps its own spacing for in-body ads. */
	margin: 0 auto;
	max-width: 100%;
}

.qes-banner-link {
	display: inline-block;
	line-height: 0;
}

.qes-banner-img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Zone max-widths (desktop creative sizes). */
.qes-banner--leaderboard { max-width: 728px; }
.qes-banner--homepage    { max-width: 970px; }
.qes-banner--in-article  { max-width: 600px; }
.qes-banner--sidebar     { max-width: 300px; }

/* Auto-injected In-Article wrapper: breathing room inside the article body. */
.qes-in-article-ad { margin: 28px auto; clear: both; }

/* Responsive creative swap. Mobile creative is hidden until a small
   viewport AND the banner declares it has one (.qes-banner--has-mobile). */
.qes-banner-img--mobile { display: none; }

@media (max-width: 600px) {
	.qes-banner--has-mobile .qes-banner-img--desktop { display: none; }
	.qes-banner--has-mobile .qes-banner-img--mobile { display: block; }
}

/* ----- Placeholder ----- */
.qes-banner-placeholder {
	flex-direction: column;
	text-align: center;
	background: var(--pro-navy, #0d2952);
	color: #ffffff;
	border-radius: 8px;
	padding: 14px 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	width: 100%;
}

.qes-banner-placeholder__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.qes-banner-placeholder__sub {
	font-size: 13px;
	font-weight: 400;
	opacity: 0.85;
	margin-top: 4px;
}

/* Placeholder min-heights so empty zones hold their shape. */
.qes-banner-placeholder--leaderboard { min-height: 90px; }
.qes-banner-placeholder--homepage    { min-height: 90px; }
.qes-banner-placeholder--in-article  { min-height: 120px; }
.qes-banner-placeholder--sidebar     { min-height: 250px; }

@media (max-width: 600px) {
	.qes-banner-placeholder--leaderboard,
	.qes-banner-placeholder--homepage { min-height: 60px; }
	.qes-banner-placeholder__title { font-size: 13px; }
	.qes-banner-placeholder__sub { font-size: 12px; }
}

/* ----- Vendor dashboard ([qes_my_banners]) ----- */
.qes-ba-dashboard .qes-ba-allowance {
	font-size: 15px;
	margin-bottom: 16px;
}

.qes-ba-dashboard .qes-ba-field {
	margin-bottom: 16px;
}

.qes-ba-dashboard .qes-ba-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.qes-ba-dashboard .qes-ba-field input[type="text"],
.qes-ba-dashboard .qes-ba-field input[type="url"],
.qes-ba-dashboard .qes-ba-field select {
	width: 100%;
	max-width: 480px;
}

.qes-ba-dashboard .qes-ba-success {
	background: #eafaf0;
	border: 1px solid #b7e4c7;
	color: #1b7a43;
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
}

.qes-ba-dashboard .qes-ba-error {
	background: #fdecec;
	border: 1px solid #f5c2c2;
	color: #a82323;
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
}

/* Required-size hint shown next to the Desktop/Mobile image labels. */
.qes-ba-dashboard .qes-ba-dims {
	font-weight: 400;
	font-size: 13px;
	color: var(--pro-muted, #5B6B7B);
	margin-left: 4px;
}

/* Helper line under the optional mobile-image field. */
.qes-ba-dashboard .qes-ba-help {
	font-size: 13px;
	color: var(--pro-muted, #5B6B7B);
	margin: 6px 0 0;
}

/* Instant validation message under the banner upload field. */
.qes-ba-livecheck.is-error {
	margin: 8px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #b32d2e;
	font-size: 14px;
	font-weight: 600;
}
#qes_ba_submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}