/* ════════════════════════════════════════════════════════════════════════
   Theme token bridge — PSB semantic colors resolve through a chain,
   first defined wins:
     1. --psb-theme-*            generic hook — ANY theme can define these
                                 (e.g. :root { --psb-theme-primary: #fff })
     2. --jt-*                   Jetting theme tokens (jetting.ba)
     3. --e-global-color-*       Elementor global colors (megasystems.ba …)
     4. built-in default         every other site stays unchanged
   Selector is :root, body — Elementor defines --e-global-color-* on the
   body-scoped .elementor-kit-* selector, so the chain must also resolve
   at body scope to pick up Elementor global colors.
   The whole surface system follows the theme too (text, page bg, cards,
   inputs, borders, hover), so on dark themes the entire UI adapts.
   ════════════════════════════════════════════════════════════════════════ */
:root, body {
	--psb-primary:        var(--psb-theme-primary,        var(--jt-gold, var(--e-global-color-primary,   #2E6DA4)));
	--psb-accent:         var(--psb-theme-accent,         var(--jt-cyan, var(--e-global-color-accent,    #f39c12)));
	--psb-secondary:      var(--psb-theme-secondary,      var(--jt-muted, var(--e-global-color-secondary, #6b7280)));
	--psb-text:           var(--psb-theme-text,           var(--jt-text, var(--e-global-color-text, #1f2937)));
	--psb-on-primary:     var(--psb-theme-on-primary,     var(--jt-on-gold, #ffffff));
	--psb-on-accent:      var(--psb-theme-on-accent,      var(--jt-on-cyan, #ffffff));
	--psb-inverse:        var(--psb-theme-inverse,        var(--jt-border-strong, #1f2937));
	--psb-on-inverse:     var(--psb-theme-on-inverse,     var(--jt-text, #ffffff));
	--psb-bg:             var(--psb-theme-bg,             var(--jt-bg, #ffffff));
	--psb-surface:        var(--psb-theme-surface,        var(--jt-card, #ffffff));
	--psb-surface-alt:    var(--psb-theme-surface-alt,    var(--jt-bg, #f5f6f7));
	--psb-input:          var(--psb-theme-input,          var(--jt-input-bg, #ffffff));
	--psb-hover:          var(--psb-theme-hover,          var(--jt-hover, #f0f4ff));
	--psb-border:         var(--psb-theme-border,         var(--jt-border, #e5e7eb));
	--psb-border-strong:  var(--psb-theme-border-strong,  var(--jt-border-strong, #cbd5e0));
}

/* ── Cross-site ads — shared ──────────────────────────────────────────────── */
.psb-cross-ad {
	--psb-ad-accent: var(--psb-primary);
}

/* ────────────────────────────────────────────────────────────────────────────
   Placement A — Mid-page "sister brand" content card
   ──────────────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────────────
   Placement B & C — Banner with background image
   Both render inside the .psb-pd boxed container, so they stay within the
   same width as the rest of the page content.
   ──────────────────────────────────────────────────────────────────────────── */

.psb-cross-ad--banner {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--psb-ad-accent);
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Bottom strip (product detail) — contained inside .psb-pd. */
.psb-cross-ad--bottom_strip,
.psb-cross-ad--tax_footer {
	width: 100%;
	border-radius: 10px;
	margin-top: 32px;
	margin-bottom: 32px;
}

/* Dark overlay so text remains readable on top of any background image. */
.psb-cross-ad__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 48px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		135deg,
		rgba(0, 0, 0, 0.65) 0%,
		rgba(0, 0, 0, 0.35) 100%
	);
}

/* Subtle colour wash on top of the gradient so even light logos are readable. */
.psb-cross-ad--banner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.5) 100%
	);
	pointer-events: none;
}

.psb-cross-ad__banner-inner {
	text-align: center;
	color: #ffffff;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.psb-cross-ad__banner-logo {
	max-height: 52px;
	max-width: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

.psb-cross-ad__banner-heading {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
}

.psb-cross-ad__banner-tagline {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	max-width: 520px;
}

.psb-cross-ad__banner-cta {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 28px;
	background: #ffffff;
	color: #1a1a1a !important;
	font-size: 15px;
	font-weight: 700;
	border-radius: 30px;
	text-decoration: none !important;
	border: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.psb-cross-ad__banner-cta:hover,
.psb-cross-ad__banner-cta:focus {
	transform: translateY(-1px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
	color: #1a1a1a !important;
}


/* ────────────────────────────────────────────────────────────────────────────
   Responsive
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.psb-cross-ad--banner {
		min-height: 240px;
		margin-top: 28px;
	}

	.psb-cross-ad__overlay {
		padding: 36px 20px;
	}

	.psb-cross-ad__banner-logo {
		max-height: 40px;
		max-width: 160px;
	}

	.psb-cross-ad__banner-heading {
		font-size: 1.25rem;
	}

	.psb-cross-ad__banner-tagline {
		font-size: 0.95rem;
	}
}