/* Ninja pop-ups, cards and cart bar (27 Sep 2026). Design approved by Brad as "version A": one black card
   with a pink border, a pink badge, the tubs across the top, Orbitron headings, blue pill buttons with a
   black edge (the site's own button). Everything is prefixed njp- so nothing leaks into the theme. */

.njp-ov, .njp-ty, .njp-cart, .njp-tab, .njp-bar { --njp-ink:#171717; --njp-cream:#FFFCF8; --njp-pink:#FF4FA3; --njp-blue:#0978B4; --njp-sky:#3AB6F5; --njp-mute:#D9D5DE; }

/* ── Overlay and dialog ─────────────────────────────────────────────────── */
.njp-ov { position:fixed; inset:0; z-index:2147483647; background:rgba(10,8,16,.6); display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; transition:opacity .2s ease; font-family:Montserrat, "Segoe UI", Helvetica, Arial, sans-serif; }
.njp-ov.is-in { opacity:1; }
.njp-ov.is-out { opacity:0; }
.njp-d { position:relative; width:100%; max-width:430px; max-height:calc(100vh - 32px); overflow:auto; background:var(--njp-ink); color:var(--njp-cream); border:2px solid var(--njp-pink); border-radius:18px; padding:26px 26px 22px; text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.55); transform:translateY(12px) scale(.98); transition:transform .22s ease; outline:none; }
.njp-ov.is-in .njp-d { transform:none; }
.njp-ov.is-phone { align-items:flex-end; padding:0; }
.njp-ov.is-phone .njp-d { max-width:none; border-width:2px 0 0; border-radius:22px 22px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); max-height:88vh; transform:translateY(100%); }
.njp-ov.is-phone.is-in .njp-d { transform:none; }

.njp-x { position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; background:transparent; color:var(--njp-cream); opacity:.8; font-size:26px; line-height:1; cursor:pointer; border-radius:50%; padding:0; }
.njp-x:hover, .njp-x:focus-visible { opacity:1; background:rgba(255,255,255,.08); }
.njp-badge { display:inline-block; margin:0 0 12px; background:var(--njp-pink); color:var(--njp-ink); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:4px 12px; border-radius:30px; }
.njp-kick { margin:0 0 6px; color:var(--njp-pink); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.njp-h { margin:0 0 4px; font-family:Orbitron, "Eurostile", "Arial Black", sans-serif; font-weight:900; font-size:28px; line-height:1.1; color:var(--njp-cream); text-wrap:balance; }
.njp-h b { color:var(--njp-sky); font-weight:900; }
.njp-h.sm { font-size:22px; margin-bottom:10px; }
.njp-acc { margin:0 0 12px; font-family:Orbitron, "Eurostile", "Arial Black", sans-serif; font-weight:900; font-size:18px; text-transform:uppercase; color:var(--njp-pink); }
.njp-p { margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--njp-mute); }
.njp-p.lbl { margin:4px 0 8px; color:var(--njp-cream); font-weight:600; }
.njp-fine { margin:10px 0 0; font-size:11px; color:#8E889A; }
.njp-done { margin:6px 0 12px; font-weight:700; color:var(--njp-cream); }

.njp-tubs { display:flex; justify-content:center; align-items:flex-end; gap:8px; margin:0 0 14px; }
.njp-tubs img { width:74px; height:auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.njp-tubs img.mid { width:88px; }
.njp-tubs.deal img { width:96px; }
.njp-tubs .plus { font-family:Orbitron, sans-serif; font-weight:900; font-size:30px; color:var(--njp-sky); align-self:center; }
.njp-ov.is-phone .njp-tubs { margin-top:4px; }
.njp-ov.is-phone .njp-tubs img { width:64px; } .njp-ov.is-phone .njp-tubs img.mid { width:76px; }

.njp-goals { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 6px; }
.njp-goal, .njp-btn { display:block; width:100%; box-sizing:border-box; font-family:Montserrat, sans-serif; font-weight:700; font-size:15px; line-height:1.2; text-align:center; text-decoration:none; color:var(--njp-cream) !important; background:var(--njp-blue); border:2px solid #000; border-radius:30px; padding:12px 14px; cursor:pointer; }
.njp-goal:last-child { grid-column:1 / -1; background:var(--njp-pink); color:var(--njp-ink) !important; }
.njp-goal:hover, .njp-btn:hover { filter:brightness(1.12); }
.njp-goal:focus-visible, .njp-btn:focus-visible, .njp-no:focus-visible, .njp-in:focus-visible, .njp-tab:focus-visible { outline:3px solid var(--njp-sky); outline-offset:2px; }
.njp-btn[disabled] { opacity:.6; cursor:wait; }
.njp-no { display:inline-block; margin:10px 0 0; background:none; border:0; color:#BDB8C4; font-size:13px; text-decoration:underline; cursor:pointer; padding:6px; font-family:Montserrat, sans-serif; }

.njp-f { margin:0; }
.njp-in { display:block; width:100%; box-sizing:border-box; margin:0 0 10px; background:var(--njp-cream); color:#171717; border:0; border-radius:10px; padding:13px 14px; font-size:16px; font-family:Montserrat, sans-serif; }
select.njp-in { appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, #8A8590 50%), linear-gradient(135deg, #8A8590 50%, transparent 50%); background-position:calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size:6px 6px; background-repeat:no-repeat; padding-right:30px; }
.njp-row { display:grid; grid-template-columns:1.4fr 1fr; gap:8px; }
.njp-err, .njp-msg { min-height:1em; margin:8px 0 0; font-size:13px; color:#FF8FC4; }
.njp-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.njp-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── Teaser tab (after an early close) ─────────────────────────────────── */
.njp-tab { position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:2147482000; background:var(--njp-pink); color:var(--njp-ink); border:2px solid #000; border-radius:30px; padding:10px 16px; font:800 14px/1 Montserrat, sans-serif; letter-spacing:.02em; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.3); }

/* ── Deal bar across the top ────────────────────────────────────────────── */
.njp-bar { background:#171717; color:#FFFCF8; text-align:center; font:600 13px/1.4 Montserrat, sans-serif; padding:8px 14px; }
.njp-bar[hidden] { display:none !important; }
.njp-bar-a { color:#3AB6F5 !important; text-decoration:underline; margin-left:6px; white-space:nowrap; }

/* ── Thank-you page cards ───────────────────────────────────────────────── */
.njp-ty { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; margin:22px 0 28px; font-family:Montserrat, sans-serif; }
.njp-ty-card { position:relative; display:flex; flex-direction:column; gap:8px; background:var(--njp-ink); color:var(--njp-cream); border-radius:14px; padding:16px; }
.njp-ty-card.is-hot { border:2px solid var(--njp-pink); padding-right:96px; }
.njp-ty-card .njp-kick { font-size:11px; margin:0; }
.njp-ty-t { margin:0; font-family:Orbitron, sans-serif; font-weight:900; font-size:16px; line-height:1.2; color:var(--njp-cream); }
.njp-ty-p { margin:0; font-size:13px; line-height:1.45; color:var(--njp-mute); }
.njp-ty-img { position:absolute; right:12px; top:14px; width:68px; height:auto; }
.njp-ty .njp-in { margin:0 0 8px; font-size:15px; padding:10px 12px; }
.njp-ty .njp-btn { font-size:14px; padding:9px 12px; margin-top:auto; }
.njp-ty-form { margin-top:auto; }

/* ── Cart: free shipping and points ─────────────────────────────────────── */
.njp-cart { margin:0 0 18px; font-family:Montserrat, sans-serif; }
.njp-fs { background:#171717; color:#FFFCF8; border-radius:10px; padding:10px 12px; margin:0 0 10px; }
.njp-fs p { margin:0 0 8px; font-size:14px; }
.njp-fs b { color:#3AB6F5; }
.njp-fs-bar { height:8px; border-radius:8px; background:#3A3842; overflow:hidden; }
.njp-fs-bar i { display:block; height:100%; background:linear-gradient(90deg, #0978B4, #FF4FA3); }
.njp-pts { margin:0; font-size:14px; background:#EEF4F8; color:#171717; border-radius:8px; padding:8px 10px; }

/* Tablets are touch screens, so the script gives them the phone sheet; on a screen this size that stretched
   edge to edge. From 600px wide and tall they get the same bordered card as desktop (found in testing, 27 Sep 2026). */
@media (min-width: 600px) and (min-height: 600px) {
	.njp-ov.is-phone { align-items:center; padding:16px; }
	.njp-ov.is-phone .njp-d { max-width:430px; border-width:2px; border-radius:18px; padding:26px 26px 22px; max-height:calc(100vh - 32px); transform:translateY(12px) scale(.98); }
	.njp-ov.is-phone.is-in .njp-d { transform:none; }
	.njp-ov.is-phone .njp-tubs img { width:74px; } .njp-ov.is-phone .njp-tubs img.mid { width:88px; }
}
@media (max-width: 600px) { .njp-bar { font-size:12px; padding:6px 10px; } .njp-bar-k { display:none; } }
@media (max-width: 380px) { .njp-h { font-size:24px; } .njp-goal, .njp-btn { font-size:14px; } }
/* Short screens (the original iPhone SE, any phone held sideways): smaller tubs and headline so the whole
   Join card, "No thanks" included, fits without scrolling inside it (found in testing, 27 Sep 2026). */
@media (max-height: 640px) {
	.njp-badge { margin-bottom:8px; }
	.njp-tubs { margin-bottom:8px; } .njp-tubs img, .njp-ov.is-phone .njp-tubs img { width:50px; } .njp-tubs img.mid, .njp-ov.is-phone .njp-tubs img.mid { width:58px; }
	.njp-h { font-size:22px; } .njp-acc { font-size:15px; margin-bottom:8px; } .njp-p { margin-bottom:10px; }
	.njp-goal { padding:10px 12px; } .njp-no { margin-top:4px; }
	.njp-ov.is-phone .njp-d { padding-top:16px; max-height:94vh; }
}
/* Phones held sideways (about 375px tall): no tub picture, so the Join card needs little or no scrolling. */
@media (max-height: 430px) { .njp-tubs { display:none; } .njp-badge { margin-bottom:6px; } .njp-ov.is-phone .njp-d { max-height:96vh; } }
@media (prefers-reduced-motion: reduce) { .njp-ov, .njp-d { transition:none !important; } }
.njp-dash .njp-ty-card.is-hot { padding-right:16px; } .njp-dash { grid-template-columns:1fr; max-width:560px; }

/* The theme's reset.css paints EVERY button raspberry (#c36, white text) on hover and focus, and its
   [type=button]:hover selector outranks our plain class rules, so tapping or hovering any pop-up button
   turned it off-brand (found in the 27 Sep 2026 audit). Every one of our buttons keeps its own colours in
   every state. The hover lift stays the brightness filter above. */
:is(.njp-ov, .njp-ty, .njp-cart) :is(.njp-btn, .njp-goal):is(:hover, :focus, :active) { background-color:var(--njp-blue) !important; color:var(--njp-cream) !important; }
.njp-ov .njp-goal:last-child:is(:hover, :focus, :active) { background-color:var(--njp-pink) !important; color:var(--njp-ink) !important; }
:is(.njp-ov, .njp-ty) .njp-x:is(:hover, :focus, :active) { background-color:transparent !important; color:var(--njp-cream) !important; opacity:1; }
:is(.njp-ov, .njp-ty) .njp-no:is(:hover, :focus, :active) { background-color:transparent !important; color:var(--njp-cream) !important; }
.njp-tab:is(:hover, :focus, :active) { background-color:var(--njp-pink) !important; color:var(--njp-ink) !important; }