/* ============================================================
   NCT Marketing — Hello Bar + Popup (multiple designs).
   Self-contained palette so it never depends on load order.
   ============================================================ */
:root{
	--nctm-navy:#0f1d3d; --nctm-blue:#1a56db; --nctm-blue-d:#1440ab;
	--nctm-gold:#e8a33d; --nctm-ink:#233149; --nctm-line:#dbe3f0;
	--nctm-bar-h:0px;
}

/* ---------------- HELLO BAR ---------------- */
.nct-bar{
	position:fixed; left:0; right:0; z-index:99998;
	display:flex; align-items:center; justify-content:center;
	min-height:46px; padding:.55rem 3rem .55rem 1rem;
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:.92rem; line-height:1.35; text-align:center;
	box-shadow:0 2px 14px rgba(15,29,61,.14);
}
.nct-bar--top{ top:0 } .nct-bar--bottom{ bottom:0; box-shadow:0 -2px 14px rgba(15,29,61,.14) }
/* clear the WordPress admin bar for logged-in users (public visitors never see it) */
.admin-bar .nct-bar--top{ top:32px }
@media screen and (max-width:782px){ .admin-bar .nct-bar--top{ top:46px } }
.nct-bar--solid{ background:var(--nctm-navy); color:#fff }
.nct-bar--gradient{ background:linear-gradient(90deg,#1a56db,#0f2f8f 60%,#0f1d3d); color:#fff }
.nct-bar--outline{ background:#eef3fa; color:var(--nctm-navy); border-bottom:1px solid var(--nctm-line) }
.nct-bar--outline.nct-bar--bottom{ border-bottom:0; border-top:1px solid var(--nctm-line) }
.nct-bar-in{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; justify-content:center; max-width:1100px }
.nct-bar-tx{ font-weight:500 }
.nct-bar-btn{
	display:inline-block; white-space:nowrap; text-decoration:none;
	background:#fff; color:var(--nctm-navy); font-weight:700; font-size:.84rem;
	padding:.42em 1.1em; border-radius:999px; transition:transform .15s, box-shadow .15s;
}
.nct-bar--outline .nct-bar-btn{ background:var(--nctm-blue); color:#fff }
.nct-bar-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.18) }
.nct-bar-x{
	position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
	background:transparent; border:0; color:inherit; opacity:.7;
	font-size:1.5rem; line-height:1; cursor:pointer; padding:.1em .35em;
}
.nct-bar-x:hover{ opacity:1 }
/* push the fixed header down when a TOP bar is active (beats the theme's .hdr{top:0}) */
html.nct-bar-top #hdr,html.nct-bar-top header#hdr,html.nct-bar-top .hdr{ top:var(--nctm-bar-h) !important }

/* ---------------- POPUP ---------------- */
/* CRITICAL: our display:flex/display rules beat the UA [hidden] rule (author > UA),
   so without this an un-opened / closed overlay stays as an invisible full-screen
   click-blocker. Force real hiding when the hidden attribute is present. */
.nct-pop-overlay[hidden],.nct-bar[hidden]{ display:none !important }

.nct-pop-overlay{
	position:fixed; inset:0; z-index:100001;
	display:flex; align-items:center; justify-content:center;
	padding:20px; background:rgba(9,17,34,.62); backdrop-filter:blur(3px);
	opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.nct-pop-overlay.nct-open{ opacity:1; pointer-events:auto }
.nct-pop{
	position:relative; background:#fff; border-radius:18px; overflow:hidden;
	width:100%; box-shadow:0 30px 80px rgba(9,17,34,.4);
	transform:translateY(14px) scale(.98); transition:transform .3s cubic-bezier(.2,.7,.2,1);
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--nctm-ink);
}
.nct-open .nct-pop{ transform:none }
.nct-pop-x{
	position:absolute; top:.5rem; right:.6rem; z-index:3;
	width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
	background:rgba(255,255,255,.85); color:var(--nctm-navy); font-size:1.4rem; line-height:1;
	display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.nct-pop-x:hover{ background:#fff }
.nct-pop-media img{ display:block; width:100%; height:100%; object-fit:cover }
.nct-pop-body{ padding:1.7rem 1.7rem 1.9rem }
.nct-pop-h{ margin:.1rem 0 .5rem; font-size:1.5rem; line-height:1.2; font-weight:750; color:var(--nctm-navy); letter-spacing:-.01em }
.nct-pop-tx{ margin:0 0 1.2rem; font-size:1rem; line-height:1.6; color:var(--nctm-ink) }
.nct-pop-btn{
	display:inline-block; text-decoration:none; background:var(--nctm-blue); color:#fff;
	font-weight:700; font-size:.95rem; padding:.75em 1.6em; border-radius:999px;
	transition:background .15s, transform .15s, box-shadow .15s;
}
.nct-pop-btn:hover{ background:var(--nctm-blue-d); transform:translateY(-1px); box-shadow:0 10px 24px rgba(26,86,219,.32) }
.nct-pop-btns{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center }
.nct-pop-btn2{ background:transparent; color:var(--nctm-blue); box-shadow:inset 0 0 0 2px var(--nctm-blue) }
.nct-pop-btn2:hover{ background:var(--nctm-blue); color:#fff; box-shadow:inset 0 0 0 2px var(--nctm-blue); transform:translateY(-1px) }

/* -- Design: CARD (image top, centered) -- */
.nct-pop--card{ max-width:430px; text-align:center }
.nct-pop--card .nct-pop-media{ height:190px }

/* -- Design: SPLIT (image left, text right) -- */
.nct-pop--split{ max-width:760px; display:grid; grid-template-columns:1fr 1fr }
.nct-pop--split .nct-pop-media{ height:100% }
.nct-pop--split .nct-pop-body{ align-self:center; text-align:left; padding:2rem }
.nct-pop--split .nct-pop-btns{ justify-content:flex-start }

/* -- Design: MINIMAL (text + button only) -- */
.nct-pop--minimal{ max-width:400px; text-align:center }
.nct-pop--minimal .nct-pop-body{ padding:2.4rem 2rem }

/* -- Design: BANNER (image background, text over) -- */
.nct-pop--banner{ max-width:640px; text-align:center }
.nct-pop--banner .nct-pop-media{ position:absolute; inset:0; height:100% }
.nct-pop--banner .nct-pop-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,17,34,.35),rgba(9,17,34,.8)) }
.nct-pop--banner .nct-pop-body{ position:relative; z-index:2; padding:3.4rem 2rem; min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center }
.nct-pop--banner .nct-pop-h,.nct-pop--banner .nct-pop-tx{ color:#fff }
.nct-pop--banner .nct-pop-btn2{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.75) }
.nct-pop--banner .nct-pop-btn2:hover{ background:#fff; color:var(--nctm-navy); box-shadow:inset 0 0 0 2px #fff }
.nct-pop--banner .nct-pop-x{ background:rgba(0,0,0,.35); color:#fff }

/* -- Corner popup: small card, bottom-left, above the WhatsApp float, no overlay -- */
.nct-pop-overlay.nct-pop-corner{align-items:flex-end;justify-content:flex-start;background:transparent;backdrop-filter:none;pointer-events:none;padding:0}
.nct-pop-corner .nct-pop{pointer-events:auto;width:340px;max-width:calc(100vw - 36px);margin:0 0 92px 18px;box-shadow:0 18px 50px rgba(9,17,34,.34);transform:translateY(24px)}
.nct-pop-corner.nct-open .nct-pop{transform:none}
.nct-pop-corner .nct-pop--card,.nct-pop-corner .nct-pop--minimal,.nct-pop-corner .nct-pop--split,.nct-pop-corner .nct-pop--banner{max-width:none;display:block}
.nct-pop-corner .nct-pop--split .nct-pop-media,.nct-pop-corner .nct-pop-media{height:132px}
.nct-pop-corner .nct-pop-body{padding:1.3rem 1.4rem 1.5rem;text-align:center}
.nct-pop-corner .nct-pop-h{font-size:1.25rem}
.nct-pop-corner .nct-pop-tx{font-size:.94rem;margin-bottom:1rem}
.nct-pop-corner .nct-pop-btns{justify-content:center}
@media (max-width:560px){.nct-pop-corner .nct-pop{margin:0 0 88px 12px;width:calc(100vw - 24px)}}

/* ---------------- Responsive ---------------- */
@media (max-width:560px){
	.nct-pop--split{ grid-template-columns:1fr; max-width:420px }
	.nct-pop--split .nct-pop-media{ height:170px }
	.nct-pop--split .nct-pop-body{ text-align:center; padding:1.6rem }
	.nct-pop-h{ font-size:1.3rem }
	.nct-bar{ font-size:.85rem; padding:.5rem 2.4rem .5rem .8rem }
	.nct-bar-in{ gap:.55rem }
}
@media (prefers-reduced-motion:reduce){
	.nct-pop-overlay,.nct-pop,.nct-pop-btn,.nct-bar-btn{ transition:none }
}