/* ===================================================================
   What2Eat Ad Zones — Frontend Styles
   Palette matches usa_restaurants_theme:
     Primary #2D3142 | Secondary #4F5D75 | Accent #EF8354
   =================================================================== */

/* ── Hidden until JS moves staged top/bottom ads ─────────────────── */
.w2e-adzone--staged { display: none !important; }

/* ── Shared zone wrapper ─────────────────────────────────────────── */
.w2e-adzone {
	margin: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.w2e-adzone--top,
.w2e-adzone--bottom {
	background: #f7f8fa;
	border-top: 1px solid #e8e9ec;
	border-bottom: 1px solid #e8e9ec;
	padding: 20px 0;
}

.w2e-adzone--middle {
	margin: 28px 0;
}

/* ── Card inner wrapper ──────────────────────────────────────────── */
/*  Layout is always: thumbnail left | text right                     */
/*  max-width + block-align control where the card sits on the page   */
.w2e-adzone__inner {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid #e8e9ec;
	border-radius: 10px;
	padding: 22px 22px 36px; /* bottom space for FTC line */
	box-shadow: 0 2px 10px rgba(45,49,66,.06);
	transition: box-shadow 0.2s;
	width: 100%;
	box-sizing: border-box;
}
.w2e-adzone__inner:hover { box-shadow: 0 4px 18px rgba(45,49,66,.10); }

/* ── Block alignment — where the entire card sits on the page ─────── */
.w2e-adzone__inner.w2e-block-left   { margin-left: 0;    margin-right: auto; }
.w2e-adzone__inner.w2e-block-center { margin-left: auto; margin-right: auto; }
.w2e-adzone__inner.w2e-block-right  { margin-left: auto; margin-right: 0;    }

/* ── Content alignment — text inside the card body ───────────────── */
.w2e-adzone__body.w2e-content-left   { text-align: left; }
.w2e-adzone__body.w2e-content-center { text-align: center; }
.w2e-adzone__body.w2e-content-right  { text-align: right; }

/* Popup body alignment */
.w2e-popup__body.w2e-content-left   { text-align: left; }
.w2e-popup__body.w2e-content-center { text-align: center; }
.w2e-popup__body.w2e-content-right  { text-align: right; }

/* ── "Sponsored" label ───────────────────────────────────────────── */
.w2e-adzone__label {
	position: absolute;
	top: -11px;
	left: 16px;
	background: #4F5D75;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 2px 9px;
	border-radius: 4px;
	pointer-events: none;
}

/* ── Dismiss button ──────────────────────────────────────────────── */
.w2e-adzone__dismiss {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	color: #BFC0C0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	transition: color .15s;
}
.w2e-adzone__dismiss:hover { color: #2D3142; }

/* ── Product image (thumbnail) ───────────────────────────────────── */
/* Dimensions are set via inline style from per-zone settings.        */
/* These rules guarantee the image never escapes its container.       */
.w2e-adzone__image {
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #f0f1f3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.w2e-adzone__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* show full product — no cropping */
}

/* ── Body ────────────────────────────────────────────────────────── */
.w2e-adzone__body { flex: 1; min-width: 0; }

.w2e-adzone__badge {
	display: inline-block;
	background: #EF8354;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 11px;
	border-radius: 20px;
	margin-bottom: 8px;
	letter-spacing: .3px;
}

.w2e-adzone__title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #2D3142 !important;
	margin: 0 0 8px !important;
	line-height: 1.3 !important;
}

.w2e-adzone__desc {
	font-size: 14px !important;
	color: #4F5D75 !important;
	margin: 0 0 14px !important;
	line-height: 1.55 !important;
}

.w2e-adzone__cta {
	display: inline-block;
	background: #EF8354;
	color: #fff !important;
	padding: 10px 22px;
	border-radius: 6px;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 700;
	transition: background .18s, transform .12s;
	box-shadow: 0 3px 8px rgba(239,131,84,.35);
}
.w2e-adzone__cta:hover { background: #e06b38; transform: translateY(-1px); }

/* ── Description: zone-aware formatting ─────────────────────────── */
/* Popup shows full text; inline zones clamp to 2 lines              */
.w2e-adzone__desc--top,
.w2e-adzone__desc--middle,
.w2e-adzone__desc--bottom {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.w2e-adzone__desc--middle {
	font-size: 13px !important;
	-webkit-line-clamp: 2;
}
/* Popup: full text, slightly smaller */
.w2e-popup__desc {
	font-size: 14px !important;
}

/* ── FTC disclosure ──────────────────────────────────────────────── */
.w2e-adzone__ftc,
.w2e-popup__ftc {
	font-size: 9px;
	color: #c8c9ca;
	margin: 0;
	padding: 0;
	letter-spacing: 0.2px;
	line-height: 1.3;
}
/* Inline / carousel ads: tight gap below card */
.w2e-adzone__ftc {
	display: block;
	text-align: center;
	margin-top: 3px;
}
/* Popup: tight gap below CTA */
.w2e-popup__ftc {
	display: block;
	text-align: center;
	margin-top: 6px;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.w2e-adzone__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.w2e-adzone__image {
		/* On mobile the thumbnail fills the card width at a shorter height */
		width: 100% !important;
		height: 160px !important;
		flex: 0 0 auto !important;
	}
	.w2e-adzone__title { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Carousel
   ═══════════════════════════════════════════════════════════════════ */

/* Label & dismiss sit above the track */
.w2e-carousel__header {
	position: relative;
	height: 0; /* invisible spacer so label/dismiss don't push layout */
}

.w2e-carousel { position: relative; }

/* Remove inner border/shadow on slides – the outer zone handles it */
.w2e-carousel .w2e-adzone__inner {
	border: 1px solid #e8e9ec;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(45,49,66,.06);
}

.w2e-carousel__track { position: relative; }

.w2e-carousel__slide { display: none; }

.w2e-carousel__slide--active {
	display: block;
	animation: w2eSlideIn .35s ease;
}

@keyframes w2eSlideIn {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Controls row */
.w2e-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-top: 14px;
}

.w2e-carousel__prev,
.w2e-carousel__next {
	background: #4F5D75;
	color: #fff;
	border: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .15s;
}
.w2e-carousel__prev:hover,
.w2e-carousel__next:hover { background: #2D3142; }

.w2e-carousel__dots { display: flex; gap: 7px; align-items: center; }

.w2e-carousel__dot {
	width: 9px;
	height: 9px;
	background: #BFC0C0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: background .2s, transform .2s;
}
.w2e-carousel__dot--active { background: #EF8354; transform: scale(1.35); }

/* ═══════════════════════════════════════════════════════════════════
   Popup overlay
   ═══════════════════════════════════════════════════════════════════ */
.w2e-popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.65);
	z-index: 999999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.w2e-popup-overlay.w2e-popup--visible {
	display: flex;
	animation: w2eFadeIn .25s ease;
}

@keyframes w2eFadeIn { from { opacity: 0; } to { opacity: 1; } }

.w2e-popup__dialog {
	background: #fff;
	border-radius: 14px;
	max-width: 460px;
	width: 100%;
	position: relative;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0,0,0,.28);
	animation: w2eSlideUp .28s cubic-bezier(.34,1.56,.64,1);
}

@keyframes w2eSlideUp {
	from { transform: translateY(30px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.w2e-popup__close {
	position: absolute; top: 12px; right: 12px;
	background: rgba(0,0,0,.45);
	border: none; color: #fff;
	width: 32px; height: 32px;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	z-index: 10; line-height: 1;
	transition: background .15s;
}
.w2e-popup__close:hover { background: rgba(0,0,0,.7); }

.w2e-popup__image { width: 100%; height: 220px; overflow: hidden; background: #f0f1f3; }
.w2e-popup__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.w2e-popup__body {
	padding: 28px 28px 32px;
	text-align: center;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.w2e-popup__badge {
	display: inline-block; background: #EF8354; color: #fff;
	font-size: 11px; font-weight: 700; padding: 3px 13px;
	border-radius: 20px; margin-bottom: 12px; letter-spacing: .3px;
}

.w2e-popup__title {
	font-size: 22px !important; font-weight: 700 !important;
	color: #2D3142 !important; margin: 0 0 10px !important; line-height: 1.3 !important;
}

.w2e-popup__desc {
	font-size: 15px !important; color: #4F5D75 !important;
	margin: 0 0 22px !important; line-height: 1.6 !important;
}

.w2e-popup__cta {
	display: inline-block;
	background: #EF8354; color: #fff !important;
	padding: 14px 34px; border-radius: 8px;
	text-decoration: none !important;
	font-size: 16px; font-weight: 700;
	transition: background .18s, transform .12s;
	box-shadow: 0 4px 12px rgba(239,131,84,.4);
}
.w2e-popup__cta:hover { background: #e06b38; transform: translateY(-1px); }

@media (max-width: 480px) {
	.w2e-popup__body { padding: 20px 20px 26px; }
	.w2e-popup__title { font-size: 19px !important; }
	.w2e-popup__image { height: 170px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Text Ad Banners  — promotional bars with rotating slides
   ═══════════════════════════════════════════════════════════════════ */

/* Hidden until JS places them */
.w2e-textbanner--staged { display: none !important; }

/* ── Shared banner wrapper ──────────────────────────── */
.w2e-textbanner {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	width: 100%;
}

/* ── Zone colours ───────────────────────────────────── */
.w2e-textbanner--before-header {
	background: #2D3142;
}
.w2e-textbanner--under-hero {
	background: #f0f2f5;
	border-bottom: 1px solid #dfe1e6;
}
.w2e-textbanner--site-bottom {
	background: #f0f2f5;
	border-top: 1px solid #dfe1e6;
}

/* ── Sticky / fixed positioning ─────────────────────── */
.w2e-textbanner--sticky.w2e-textbanner--before-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 99999;
	box-shadow: 0 2px 8px rgba(0,0,0,.20);
}
.w2e-textbanner--sticky.w2e-textbanner--site-bottom {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 99999;
	box-shadow: 0 -2px 8px rgba(0,0,0,.20);
}

/* ── Slides container ───────────────────────────────── */
.w2e-textbanner__slides {
	overflow: hidden;
	position: relative;
}

/* ── Single slide ───────────────────────────────────── */
.w2e-textbanner__slide {
	display: none;
	padding: 8px 0;
}
.w2e-textbanner__slide--active {
	display: block;
}

/* ── Inner row (title · desc [CTA]) — centred ───────── */
.w2e-textad__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	text-align: center;
}

/* ── Title ──────────────────────────────────────────── */
.w2e-textad__title {
	font-weight: 700;
	font-size: 13px;
	color: #EF8354;
	text-decoration: none;
	white-space: nowrap;
}
.w2e-textad__title:hover { text-decoration: underline; }
.w2e-textbanner--before-header .w2e-textad__title { color: #fff; }

/* ── Separator ──────────────────────────────────────── */
.w2e-textad__sep { color: #BFC0C0; }
.w2e-textbanner--before-header .w2e-textad__sep { color: rgba(255,255,255,.35); }

/* ── Description ────────────────────────────────────── */
.w2e-textad__desc {
	font-size: 12px;
	color: #4F5D75;
}
.w2e-textbanner--before-header .w2e-textad__desc { color: rgba(255,255,255,.75); }

/* ── CTA — plain underline link, no background or border ── */
.w2e-textad__cta {
	display: inline;
	background: none;
	border: none;
	padding: 0;
	color: #EF8354 !important;
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}
.w2e-textad__cta:hover { color: #e06b38 !important; text-decoration: none; }
.w2e-textbanner--before-header .w2e-textad__cta { color: #fff !important; }

/* ── FTC disclosure — sits immediately below the slide ── */
.w2e-textbanner__ftc {
	text-align: center;
	font-size: 9px;
	color: rgba(0,0,0,.35);
	margin: 1px 0 0;
	padding: 0 0 3px;
	letter-spacing: .2px;
	line-height: 1.2;
}
.w2e-textbanner--before-header .w2e-textbanner__ftc { color: rgba(255,255,255,.30); }
.w2e-textbanner--under-hero    .w2e-textbanner__ftc,
.w2e-textbanner--site-bottom   .w2e-textbanner__ftc { color: #bbbdbe; }

/* ── Transition: Fade ───────────────────────────────── */
.w2e-textbanner--fade .w2e-textbanner__slide--active {
	animation: w2eTextFadeIn .55s ease;
}
@keyframes w2eTextFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Transition: Slide ──────────────────────────────── */
.w2e-textbanner--slide .w2e-textbanner__slide--active {
	animation: w2eTextSlideIn .4s cubic-bezier(.25,.8,.25,1);
}
@keyframes w2eTextSlideIn {
	from { opacity: 0; transform: translateX(60px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Transition: Scroll (ticker) ────────────────────── */
.w2e-textbanner--scroll .w2e-textbanner__slides {
	display: flex;
	overflow: hidden;
	white-space: nowrap;
	cursor: default;
}
.w2e-textbanner--scroll .w2e-textbanner__slide {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding-right: 80px; /* gap between repeated items */
	white-space: normal;
}
.w2e-textbanner--scroll .w2e-textbanner__slide--active {
	/* all slides visible in ticker mode */
}
/* The scroll animation is driven by JS requestAnimationFrame */
.w2e-textbanner--scroll .w2e-textbanner__track-wrap {
	display: flex;
	will-change: transform;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {
	.w2e-textad__inner  { gap: 5px 8px; }
	.w2e-textad__title  { white-space: normal; }
}