/* Trakbond Campaigns — front end. Everything is scoped under .tbc so the theme is untouched.
   Fonts inherit from the theme so campaigns look native to the site. */

.tbc[hidden] { display: none !important; }
.tbc, .tbc *, .tbc *::before, .tbc *::after { box-sizing: border-box; }
.tbc { font-family: inherit; line-height: 1.4; -webkit-font-smoothing: antialiased; }
html.tbc-lock, html.tbc-lock body { overflow: hidden !important; }

/* ---------- shared box ---------- */
.tbc__box { position: relative; overflow: hidden; }

/* ---------- top bar ---------- */
.tbc--bar-top {
	position: relative;
	z-index: var(--tbc-z, 99990);
	width: 100%;
	margin: var(--tbc-mt, 0) 0 var(--tbc-mb, 0);
	background: var(--tbc-bg, transparent);
}
.tbc--bar-top.tbc--sticky { position: sticky; top: 0; }
.admin-bar .tbc--bar-top.tbc--sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .tbc--bar-top.tbc--sticky { top: 46px; } }
.tbc--bar-top .tbc__box,
.tbc--bar-bottom .tbc__box {
	width: var(--tbc-w, 100%);
	max-width: var(--tbc-mw, none);
	margin: 0 auto;
	border-radius: var(--tbc-r, 0);
}

/* ---------- bottom bar ---------- */
.tbc--bar-bottom {
	position: fixed; left: 0; right: 0; bottom: 0;
	z-index: var(--tbc-z, 99990);
	background: var(--tbc-bg, transparent);
	padding-bottom: calc(var(--tbc-mb, 0px) + env(safe-area-inset-bottom, 0px));
}

/* ---------- popup ---------- */
.tbc--popup {
	position: fixed; inset: 0;
	z-index: var(--tbc-z, 99990);
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.tbc__overlay {
	position: absolute; inset: 0;
	background: var(--tbc-ov, rgba(15, 23, 42, .6));
	opacity: 0; transition: opacity .25s ease;
}
.tbc--popup.tbc--in .tbc__overlay { opacity: 1; }
.tbc--popup .tbc__box {
	width: min(var(--tbc-pw, 520px), 100%);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	border-radius: var(--tbc-r, 16px);
	background: #fff;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
	outline: none;
	overscroll-behavior: contain;
}

/* ---------- slide-in ---------- */
.tbc--slide-in {
	position: fixed;
	z-index: var(--tbc-z, 99990);
	width: min(var(--tbc-sw, 360px), calc(100vw - 2 * var(--tbc-off, 20px)));
}
.tbc--pos-bottom-right { right: var(--tbc-off, 20px); bottom: var(--tbc-off, 20px); }
.tbc--pos-bottom-left  { left: var(--tbc-off, 20px);  bottom: var(--tbc-off, 20px); }
.tbc--pos-top-right    { right: var(--tbc-off, 20px); top: var(--tbc-off, 20px); }
.tbc--pos-top-left     { left: var(--tbc-off, 20px);  top: var(--tbc-off, 20px); }
.tbc--slide-in .tbc__box {
	border-radius: var(--tbc-r, 16px);
	background: #fff;
	box-shadow: 0 16px 48px rgba(15, 23, 42, .22);
}

/* ---------- enter / leave animations ---------- */
.tbc--bar-top, .tbc--bar-bottom, .tbc--slide-in, .tbc--popup .tbc__box {
	transition: opacity .25s ease, transform .25s ease;
}
.tbc--anim-fade:not(.tbc--in) .tbc__box,
.tbc--anim-fade.tbc--bar-top:not(.tbc--in),
.tbc--anim-fade.tbc--bar-bottom:not(.tbc--in),
.tbc--anim-fade.tbc--slide-in:not(.tbc--in) { opacity: 0; }

.tbc--anim-slide.tbc--bar-top:not(.tbc--in)    { opacity: 0; transform: translateY(-12px); }
.tbc--anim-slide.tbc--bar-bottom:not(.tbc--in) { opacity: 0; transform: translateY(100%); }
.tbc--anim-slide.tbc--slide-in:not(.tbc--in)   { opacity: 0; transform: translateY(24px); }
.tbc--anim-slide.tbc--popup:not(.tbc--in) .tbc__box { opacity: 0; transform: translateY(28px); }

.tbc--anim-zoom:not(.tbc--in) .tbc__box,
.tbc--anim-zoom.tbc--slide-in:not(.tbc--in) { opacity: 0; transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
	.tbc, .tbc *, .tbc__overlay { transition: none !important; animation: none !important; }
}

/* ---------- built-in close button ---------- */
.tbc .tbc__x {
	position: absolute !important; top: 10px; right: 10px; left: auto; z-index: 5;
	width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important;
	padding: 0 !important; margin: 0 !important;
	display: inline-flex !important; align-items: center; justify-content: center;
	border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--tbc-xc, #64748b);
	box-shadow: 0 1px 4px rgba(15, 23, 42, .15);
	cursor: pointer; line-height: 1;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.tbc__x:hover { background: #fff; color: #0f172a; transform: scale(1.05); }
.tbc--bar-top .tbc__x, .tbc--bar-bottom .tbc__x { top: 50%; right: 10px; transform: translateY(-50%); width: 28px; height: 28px; }
.tbc--bar-top .tbc__x:hover, .tbc--bar-bottom .tbc__x:hover { transform: translateY(-50%) scale(1.05); }

/* ---------- image mode ---------- */
.tbc__media { position: relative; line-height: 0; width: 100%; }
.tbc__media--mobile { display: none; }
.tbc__media--mobile.tbc__media--only { display: block; }
.tbc__media picture, .tbc__picture { display: block !important; width: 100%; margin: 0; }
.tbc__media img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: contain !important;
	box-shadow: none !important;
}

/* Hotspots: invisible click areas drawn over the artwork.
   Themes (WoodMart included) style every <button>/<a> — position, display, min-height,
   padding — so the structural rules here are !important. Size/offset come inline. */
.tbc .tbc__hit {
	position: absolute !important; z-index: 2;
	display: block !important; padding: 0 !important; margin: 0 !important;
	border: 0 !important; border-radius: 10px;
	background: transparent !important; box-shadow: none !important;
	min-width: 0 !important; min-height: 0 !important; max-width: none !important;
	line-height: 0 !important; transform: none !important; opacity: 1 !important;
	cursor: pointer; font-size: 0 !important; color: transparent !important; text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .15s ease, box-shadow .15s ease;
}
.tbc .tbc__hit--whole { inset: 0; width: auto; height: auto; z-index: 1; border-radius: 0; }
.tbc .tbc__hit--primary:hover, .tbc .tbc__hit--secondary:hover { background: rgba(255, 255, 255, .14) !important; }
.tbc .tbc__hit:focus { outline: none; }
.tbc .tbc__hit:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0e9f6e !important; }
.tbc .tbc__hit--close { z-index: 3; border-radius: 999px; }
/* Grow tiny close targets to a comfortable tap size without moving them. */
.tbc .tbc__hit--close::after { content: ""; position: absolute; inset: -8px; }
.tbc .tbc__hit::before { display: none !important; }

/* ---------- template mode ---------- */
.tbc__tpl {
	--gap: 14px;
	display: flex; flex-direction: column;
	background: var(--tbc-tbg, #fff);
	color: var(--tbc-tfg, #1e293b);
}
.tbc__tpl--center { text-align: center; }
.tbc__tpl-media img { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
.tbc__tpl-body { display: flex; flex-direction: column; gap: var(--gap); padding: 28px 28px 26px; }
.tbc__tpl-text { display: flex; flex-direction: column; gap: 6px; }
.tbc__heading { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: inherit; margin: 0; }
.tbc__sub { font-size: 16px; font-weight: 600; opacity: .9; }
.tbc__body { font-size: 14.5px; opacity: .85; }
.tbc__body p { margin: 0 0 .6em; color: inherit; }
.tbc__body p:last-child { margin-bottom: 0; }
.tbc__tpl-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tbc__tpl--left .tbc__tpl-actions { align-items: flex-start; }

.tbc__btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 12px 28px;
	border: 0; border-radius: 999px;
	background: var(--tbc-acc, #e40035) !important;
	color: var(--tbc-bfg, #fff) !important;
	font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em;
	text-decoration: none !important; text-transform: none;
	cursor: pointer;
	box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
	transition: transform .15s ease, filter .15s ease;
}
.tbc__btn:hover { transform: translateY(-1px); filter: brightness(.95); }
.tbc__btn:focus-visible, .tbc__link:focus-visible, .tbc__coupon:focus-visible { outline: 2px solid #0e9f6e; outline-offset: 3px; }
.tbc__link {
	padding: 4px 6px; border: 0; background: none !important;
	color: inherit !important; opacity: .7;
	font: inherit; font-size: 13px; text-decoration: underline !important; cursor: pointer;
}
.tbc__link:hover { opacity: 1; }

.tbc__coupon {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 8px 8px 16px;
	border: 1.5px dashed var(--tbc-acc, #e40035); border-radius: 10px;
	background: rgba(255, 255, 255, .6); color: inherit;
	font: inherit; cursor: pointer;
}
.tbc__coupon-code { font-weight: 800; letter-spacing: .08em; font-size: 15px; }
.tbc__coupon-copy {
	padding: 4px 10px; border-radius: 6px;
	background: var(--tbc-acc, #e40035); color: var(--tbc-bfg, #fff);
	font-size: 12px; font-weight: 700;
}

.tbc__countdown { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-variant-numeric: tabular-nums; }
.tbc__cd-label { font-size: 12.5px; font-weight: 600; opacity: .8; margin-right: 2px; }
.tbc__cd-unit { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; padding: 6px 4px; border-radius: 8px; background: rgba(15, 23, 42, .06); }
.tbc__cd-unit b { font-size: 18px; font-weight: 800; line-height: 1; }
.tbc__cd-unit small { font-size: 10px; opacity: .7; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }

/* Image beside the text (popup / slide-in on wider screens). */
@media (min-width: 640px) {
	.tbc--popup .tbc__tpl--img-left, .tbc--popup .tbc__tpl--img-right { flex-direction: row; align-items: stretch; }
	.tbc--popup .tbc__tpl--img-right { flex-direction: row-reverse; }
	.tbc--popup .tbc__tpl--img-left .tbc__tpl-media, .tbc--popup .tbc__tpl--img-right .tbc__tpl-media { flex: 0 0 44%; }
	.tbc--popup .tbc__tpl--img-left .tbc__tpl-media img, .tbc--popup .tbc__tpl--img-right .tbc__tpl-media img { height: 100%; object-fit: cover; }
	.tbc--popup .tbc__tpl--img-left .tbc__tpl-body, .tbc--popup .tbc__tpl--img-right .tbc__tpl-body { justify-content: center; }
}

/* Bars: everything on one line, wraps on small screens. */
.tbc--bar-top .tbc__tpl, .tbc--bar-bottom .tbc__tpl { flex-direction: row; align-items: center; justify-content: center; }
.tbc--bar-top .tbc__tpl-media, .tbc--bar-bottom .tbc__tpl-media { display: none; }
.tbc--bar-top .tbc__tpl-body, .tbc--bar-bottom .tbc__tpl-body {
	flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 8px 18px; padding: 10px 52px 10px 16px; width: 100%;
}
.tbc--bar-top .tbc__tpl-text, .tbc--bar-bottom .tbc__tpl-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; }
.tbc--bar-top .tbc__heading, .tbc--bar-bottom .tbc__heading { font-size: 16px; }
.tbc--bar-top .tbc__sub, .tbc--bar-bottom .tbc__sub { font-size: 14px; font-weight: 500; }
.tbc--bar-top .tbc__body, .tbc--bar-bottom .tbc__body { font-size: 13px; }
.tbc--bar-top .tbc__tpl-actions, .tbc--bar-bottom .tbc__tpl-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.tbc--bar-top .tbc__btn, .tbc--bar-bottom .tbc__btn { min-height: 36px; padding: 7px 18px; font-size: 13.5px; box-shadow: none; }
.tbc--bar-top .tbc__cd-unit, .tbc--bar-bottom .tbc__cd-unit { min-width: 36px; padding: 4px 3px; }
.tbc--bar-top .tbc__cd-unit b, .tbc--bar-bottom .tbc__cd-unit b { font-size: 14px; }

/* ---------- custom HTML ---------- */
.tbc__html { background: inherit; }

/* ---------- toast ---------- */
.tbc-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 2147483000;
	transform: translate(-50%, 12px); opacity: 0;
	padding: 10px 18px; border-radius: 999px;
	background: #0f172a; color: #fff; font-size: 14px; font-weight: 600;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
	transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.tbc-toast--in { opacity: 1; transform: translate(-50%, 0); }

/* ---------- theme-proofing for template controls ----------
   Themes restyle <button> (uppercase, square corners, fixed heights). Re-assert ours. */
.tbc .tbc__btn, .tbc .tbc__link, .tbc .tbc__coupon {
	text-transform: none !important;
	letter-spacing: normal !important;
	height: auto !important;
	width: auto !important;
	line-height: 1.2 !important;
	font-family: inherit !important;
}
.tbc .tbc__btn { border-radius: 999px !important; min-height: 46px !important; padding: 12px 28px !important; font-size: 15px !important; font-weight: 700 !important; border: 0 !important; }
.tbc .tbc__link { border-radius: 4px !important; min-height: 0 !important; padding: 4px 6px !important; font-size: 13px !important; font-weight: 500 !important; border: 0 !important; box-shadow: none !important; }
.tbc .tbc__coupon { border-radius: 10px !important; min-height: 0 !important; padding: 8px 8px 8px 16px !important; box-shadow: none !important; }
.tbc--bar-top .tbc__btn, .tbc--bar-bottom .tbc__btn { min-height: 36px !important; padding: 7px 18px !important; font-size: 13.5px !important; }