/* Travel Marketplace — Advertisement Manager: front-end ad-unit styling.
   Scoped entirely to .tmkt-ad-* classes so it can never bleed into existing site styles. */

.tmkt-ad-slot-wrapper { width: 100%; box-sizing: border-box; }
.tmkt-ad-slot-wrapper-top_banner { margin: 0 0 16px; }
.tmkt-ad-slot-wrapper-bottom_content { margin: 24px 0 0; }
.tmkt-ad-slot-wrapper-sidebar { margin: 0 0 20px; }

.tmkt-ad-unit {
	position: relative;
	max-width: 100%;
	overflow: hidden;
	border-radius: 10px;
	box-sizing: border-box;
}

.tmkt-ad-sponsored-label {
	position: absolute;
	top: 6px;
	left: 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #5B6472;
	background: rgba(255,255,255,0.85);
	padding: 2px 8px;
	border-radius: 999px;
	z-index: 2;
}

.tmkt-ad-img {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	border-radius: 10px;
	object-fit: cover;
}

.tmkt-ad-link { display: block; text-decoration: none; }

/* ---------------------------------------------------------
 * FULL-WIDTH HERO SLOTS: top banner, bottom-of-content, product-detail-between.
 * Capped to a consistent, professional hero-banner height instead of scaling to the
 * creative's full uncropped height — an uncapped 2560×635 image at full page width renders
 * 280px+ tall, which towers over the surrounding content. object-fit: cover crops gracefully
 * (centered) rather than distorting the image.
 * ------------------------------------------------------- */
.tmkt-ad-slot-wrapper-top_banner .tmkt-ad-img,
.tmkt-ad-slot-wrapper-bottom_content .tmkt-ad-img,
.tmkt-ad-slot-wrapper-product_detail_between .tmkt-ad-img {
	height: 240px;
	object-fit: cover;
}

@media (max-width: 768px) {
	.tmkt-ad-slot-wrapper-top_banner .tmkt-ad-img,
	.tmkt-ad-slot-wrapper-bottom_content .tmkt-ad-img,
	.tmkt-ad-slot-wrapper-product_detail_between .tmkt-ad-img {
		height: 160px;
	}
}

@media (max-width: 480px) {
	.tmkt-ad-slot-wrapper-top_banner .tmkt-ad-img,
	.tmkt-ad-slot-wrapper-bottom_content .tmkt-ad-img,
	.tmkt-ad-slot-wrapper-product_detail_between .tmkt-ad-img {
		height: 120px;
	}
}

/* Between-listings ad card: sized to sit naturally inside both CSS-grid card layouts
   (WooCommerce shop loop, job board, travel products) and simple flex/stacked lists
   (agent directory rows). grid-column spans the full row when inside a grid parent.
   NOTE: .tmkt-ad-slot-item and .tmkt-ad-agent-row are passed to render_unit() as
   $extra_classes, so they land on the SAME element as .tmkt-ad-unit — not a wrapper around
   it — while .tmkt-ad-slot-li IS an outer <li> wrapper around its own .tmkt-ad-unit. The
   selector lists below account for both shapes. */
.tmkt-ad-slot-item,
.tmkt-ad-slot-li {
	grid-column: 1 / -1;
	width: 100%;
	box-sizing: border-box;
}
.tmkt-ad-slot-li { list-style: none; }

/* Dashed placeholder box: text/HTML/AdSense creatives only (they have no intrinsic size of
   their own). Banner/supplier image creatives get their own clean, capped-height treatment
   below instead, so a wide photo doesn't render edge-to-edge with a "placeholder" dashed
   border around it. */
.tmkt-ad-unit.tmkt-ad-slot-item:not(.tmkt-ad-type-banner):not(.tmkt-ad-type-supplier),
.tmkt-ad-slot-li .tmkt-ad-unit:not(.tmkt-ad-type-banner):not(.tmkt-ad-type-supplier) {
	border: 1px dashed #C9D2E8;
	background: #F8F9FC;
	padding: 14px;
	text-align: center;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tmkt-ad-unit.tmkt-ad-agent-row { border-radius: 10px; }

/* Banner-image creatives inside a listing/agent row: full-bleed card, controlled height
   instead of the image's full uncropped height (which would tower over the compact
   product/agent cards around it at full grid-row width). */
.tmkt-ad-unit.tmkt-ad-slot-item.tmkt-ad-type-banner,
.tmkt-ad-slot-li .tmkt-ad-unit.tmkt-ad-type-banner,
.tmkt-ad-unit.tmkt-ad-agent-row.tmkt-ad-type-banner {
	border-radius: 10px;
	overflow: hidden;
}
.tmkt-ad-unit.tmkt-ad-slot-item.tmkt-ad-type-banner .tmkt-ad-img,
.tmkt-ad-slot-li .tmkt-ad-unit.tmkt-ad-type-banner .tmkt-ad-img,
.tmkt-ad-unit.tmkt-ad-agent-row.tmkt-ad-type-banner .tmkt-ad-img {
	height: 180px;
	object-fit: cover;
}

@media (max-width: 768px) {
	.tmkt-ad-unit.tmkt-ad-slot-item.tmkt-ad-type-banner .tmkt-ad-img,
	.tmkt-ad-slot-li .tmkt-ad-unit.tmkt-ad-type-banner .tmkt-ad-img,
	.tmkt-ad-unit.tmkt-ad-agent-row.tmkt-ad-type-banner .tmkt-ad-img {
		height: 130px;
	}
}

@media (max-width: 480px) {
	.tmkt-ad-unit.tmkt-ad-slot-item.tmkt-ad-type-banner .tmkt-ad-img,
	.tmkt-ad-slot-li .tmkt-ad-unit.tmkt-ad-type-banner .tmkt-ad-img,
	.tmkt-ad-unit.tmkt-ad-agent-row.tmkt-ad-type-banner .tmkt-ad-img {
		height: 100px;
	}
}

/* Supplier ad creative */
.tmkt-ad-supplier {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #E3E7F0;
	border-radius: 12px;
	padding: 16px;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.tmkt-ad-supplier:hover { box-shadow: 0 8px 20px rgba(15,27,46,0.08); border-color: #C9D2E8; }
.tmkt-ad-supplier-logo { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.tmkt-ad-supplier-body { display: flex; flex-direction: column; gap: 3px; }
.tmkt-ad-supplier-label { font-size: 11px; font-weight: 700; color: #2952E3; text-transform: uppercase; letter-spacing: .3px; }
.tmkt-ad-supplier-name { font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 15.5px; color: #0F1B2E; }
.tmkt-ad-supplier-cta { font-size: 12.5px; color: #5B6472; }

/* Mobile sticky bar */
.tmkt-ad-mobile-sticky-wrap {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	background: #fff;
	box-shadow: 0 -4px 16px rgba(15,27,46,0.12);
	padding: 8px 40px 8px 8px;
	box-sizing: border-box;
}
.tmkt-ad-mobile-sticky-wrap .tmkt-ad-unit { border-radius: 8px; max-height: 90px; }
.tmkt-ad-mobile-sticky-wrap .tmkt-ad-img { max-height: 74px; width: auto; margin: 0 auto; }
.tmkt-ad-sticky-close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: #F5F7FC;
	color: #0F1B2E;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 768px) {
	.tmkt-ad-mobile-sticky-wrap.tmkt-ad-sticky-visible { display: block; }
}

@media (max-width: 480px) {
	.tmkt-ad-supplier { flex-direction: column; text-align: center; }
}