/* Ninja birthday picker (Ninja, 27 Sep 2026): the site's own month and day lists, dropped down under the
   month and day boxes so no phone wheel or browser list ever opens. See picker.js. Small, simple and
   sweet (Brad, 1:46 PM): the boxes keep their arrows, the list is the box's width, no headings, no grid.
   Brad, 5:08 PM: no panel. The open list is the box itself opening: cream like the box, joined to it
   under one pink outline, small rows, four and a half showing.
   The colours are the pop-up family's: ink #171717, cream #FFFCF8, pink #FF4FA3, blue #0978B4,
   sky #3AB6F5. The !important rules are there because the theme styles every <button> and would
   otherwise win (its reset.css paints them raspberry on hover and focus). */

.njbd-w { position:relative; display:block; min-width:0; }
.njbd-w > select { width:100%; pointer-events:none; }
.njbd-w.is-open > select { box-shadow:0 0 0 2px #FF4FA3 !important; }

.njbd-w > button.njbd-t { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; cursor:pointer; -webkit-tap-highlight-color:transparent; font-size:0 !important; color:transparent !important; }
.njbd-w > button.njbd-t:focus-visible { outline:3px solid #3AB6F5 !important; outline-offset:2px; }

.njbd-w.is-open.dn > select { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
.njbd-w.is-open.up > select { border-top-left-radius:0 !important; border-top-right-radius:0 !important; }

.njbd-m { position:fixed; z-index:2147483647; box-sizing:border-box; margin:0; padding:2px 0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; background:#FFFCF8; border:2px solid #FF4FA3; box-shadow:0 10px 22px rgba(0,0,0,.28); text-align:left; font-family:Montserrat, "Segoe UI", Helvetica, Arial, sans-serif; }
.njbd-m.dn { border-top:0; box-shadow:inset 0 1px 0 #E6E0EA, 0 10px 22px rgba(0,0,0,.28); }
.njbd-m.up { border-bottom:0; box-shadow:inset 0 -1px 0 #E6E0EA, 0 -10px 22px rgba(0,0,0,.28); }
.njbd-m[hidden] { display:none !important; }
.njbd-m button.njbd-o { display:block !important; box-sizing:border-box !important; width:100% !important; min-width:0 !important; height:34px !important; min-height:0 !important; margin:0 !important; padding:0 14px !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:#171717 !important; font:500 15px/34px Montserrat, "Segoe UI", Helvetica, Arial, sans-serif !important; letter-spacing:0 !important; text-transform:none !important; text-align:left !important; text-decoration:none !important; box-shadow:none !important; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.njbd-m button.njbd-o:focus { background:transparent !important; color:#171717 !important; }
.njbd-m button.njbd-o:active { background:#0978B4 !important; color:#FFFCF8 !important; }
.njbd-m button.njbd-o.is-on, .njbd-m button.njbd-o.is-on:focus { background:#FF4FA3 !important; color:#171717 !important; }
.njbd-m button.njbd-o:focus-visible { outline:2px solid #3AB6F5 !important; outline-offset:-2px; }
@media (hover: hover) {
	.njbd-m button.njbd-o:hover { background:#0978B4 !important; color:#FFFCF8 !important; }
	.njbd-m button.njbd-o.is-on:hover { background:#FF4FA3 !important; color:#171717 !important; }
}

/* Every birthday box carries the pop-ups' solid triangle arrow (Brad, 27 Sep 2026, 4:50 PM ET: "make them
   match"). The pop-up and thank-you boxes already had it from popups.css (select.njp-in); this gives the
   Register and account-details boxes the same one in place of the browser's thin chevron. */
select[data-njbd] { -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; background-image:linear-gradient(45deg, transparent 50%, #8A8590 50%), linear-gradient(135deg, #8A8590 50%, transparent 50%) !important; background-position:calc(100% - 18px) 55%, calc(100% - 12px) 55% !important; background-size:6px 6px !important; background-repeat:no-repeat !important; padding-right:30px !important; }