/* ==========================================================================
   NUPLUS CORP — Custom UI components (nuplus-ui.css)
   --------------------------------------------------------------------------
   Styles for nuplus-select.js (custom dropdown) and nuplus-dialog.js
   (themed alert), written in the site's existing cyber/neon design language:
     - neon green  #22c55e  (dark) / #15803d (light)
     - neon purple #a855f7  (dark) / #7e22ce (light)
     - Orbitron for headings/labels, Rajdhani for body
     - glowing borders + 0 0 30px accent shadows on hover, like .holo-card

   Consumes the page's own custom properties (--accent-green, --accent-purple,
   --bg-card, …) which every page already defines, so light-mode switching
   works automatically. Fallback values are supplied for pages that do not
   declare the tokens (e.g. kiosk.html).
   ========================================================================== */

:root {
    --np-green: var(--accent-green, #22c55e);
    --np-purple: var(--accent-purple, #a855f7);
    --np-surface: var(--bg-secondary, #0a0a0a);
    --np-surface-raised: var(--bg-primary, #050505);
    --np-text: var(--text-primary, #e5e7eb);
    --np-text-dim: var(--text-secondary, #9ca3af);
    --np-line: var(--border-color, rgba(34, 197, 94, 0.2));

    /* Glow strengths — dialled down in light mode further below. */
    --np-glow-green: 0 0 30px rgba(34, 197, 94, 0.4);
    --np-glow-purple: 0 0 30px rgba(168, 85, 247, 0.4);
    --np-glow-soft: 0 0 16px rgba(34, 197, 94, 0.25);

    --np-ui-font: 'Rajdhani', sans-serif;
    --np-ui-display: 'Orbitron', sans-serif;
}

/* Neon on white reads as blur, not glow — soften and tighten in light mode. */
.light-mode {
    --np-glow-green: 0 4px 20px rgba(21, 128, 61, 0.25);
    --np-glow-purple: 0 4px 20px rgba(126, 34, 206, 0.25);
    --np-glow-soft: 0 2px 12px rgba(21, 128, 61, 0.18);
}

/* ==========================================================================
   CUSTOM SELECT
   The native <select> popup is painted by the OS: on Windows it renders as a
   gray system menu that ignores every token above (this is why the dropdowns
   looked off-theme on Windows but fine on macOS). Replaced entirely.
   ========================================================================== */

.np-select-wrap { position: relative; display: block; }

/* The real <select> stays in the DOM as the source of truth for all page JS
   and form submission; it is only visually hidden. Not display:none, which
   would remove it from some form/measurement paths. */
select.np-select-native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%; height: 100%;
    top: 0; left: 0;
    margin: 0; border: 0;
    z-index: -1;
}

.np-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    font-family: var(--np-ui-font);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    cursor: pointer;
    background: var(--np-surface);
    color: var(--np-text);
    border: 1px solid var(--np-line);
    border-radius: 8px;
    padding: 11px 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.np-select-trigger:hover:not(:disabled) {
    border-color: var(--np-green);
    box-shadow: var(--np-glow-soft);
}

.np-select-trigger:focus-visible,
.np-select-trigger-open {
    outline: none;
    border-color: var(--np-green);
    box-shadow: var(--np-glow-green);
}

.np-select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }

.np-select-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.np-select-placeholder { color: var(--np-text-dim); }

.np-select-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--np-green);
    transition: transform 0.3s ease;
}

.np-select-trigger-open .np-select-arrow { transform: rotate(180deg); }

/* ---- Portaled panel ----
   Fixed + body-level so it is never clipped by a scrolling `.modal-content`
   and never lands beneath a modal (which reach z-index 999999 here). */
.np-select-panel {
    position: fixed;
    z-index: 2147483000;
    background: var(--np-surface-raised);
    border: 1px solid var(--np-green);
    border-radius: 10px;
    box-shadow: var(--np-glow-green), 0 12px 40px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: npSelectIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top center;
}

.light-mode .np-select-panel {
    box-shadow: var(--np-glow-green), 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* Neon top edge, echoing .price-card::before */
.np-select-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--np-green), var(--np-purple));
    z-index: 1;
}

.np-select-panel-above { transform-origin: bottom center; animation-name: npSelectInUp; }

@keyframes npSelectIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes npSelectInUp {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .np-select-panel { animation: none; }
    .np-select-trigger, .np-select-arrow { transition: none; }
}

.np-select-list {
    overflow-y: auto;
    overscroll-behavior: contain;   /* never scroll-chain to the modal behind */
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--np-green) transparent;
}

.np-select-list::-webkit-scrollbar { width: 10px; }
.np-select-list::-webkit-scrollbar-track { background: transparent; }
.np-select-list::-webkit-scrollbar-thumb {
    background: var(--np-green);
    opacity: 0.5;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.np-select-option {
    position: relative;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--np-text);
    font-family: var(--np-ui-font);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
    word-break: break-word;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* Highlight is JS-driven (pointer + keyboard share one state) so the two can
   never both appear at once. */
.np-select-option-active {
    background: rgba(34, 197, 94, 0.14);
    color: var(--np-green);
    box-shadow: inset 2px 0 0 var(--np-green);
}
.light-mode .np-select-option-active { background: rgba(21, 128, 61, 0.10); }

.np-select-option-selected {
    color: var(--np-green);
    font-weight: 700;
}

.np-select-option-selected::after {
    content: '';
    margin-left: auto;
    flex: 0 0 auto;
    width: 15px; height: 15px;
    background: currentColor;
    -webkit-mask: var(--np-check) center / contain no-repeat;
    mask: var(--np-check) center / contain no-repeat;
}

:root {
    --np-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5L6.5 11.5L2.5 7.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.np-select-option-disabled {
    color: var(--np-text-dim);
    cursor: not-allowed;
    opacity: 0.5;
}
.np-select-option-disabled:hover { background: none; box-shadow: none; }

/* Optgroup label — purple, Orbitron, to match the site's section headings. */
.np-select-group {
    padding: 10px 12px 5px;
    font-family: var(--np-ui-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--np-purple);
}

.np-select-empty {
    padding: 14px 12px;
    color: var(--np-text-dim);
    font-family: var(--np-ui-font);
    font-size: 15px;
    text-align: center;
}

/* Touch targets for the kiosk iPad and phones. */
@media (max-width: 640px), (pointer: coarse) {
    .np-select-option { padding: 13px 14px; font-size: 16.5px; }
    .np-select-trigger { padding: 13px 14px; }
}

/* ==========================================================================
   THEMED DIALOGS
   Replaces the OS-painted alert() box (gray "<host> says…" on Windows).
   ========================================================================== */

.np-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: npDlgFade 0.18s ease;
}

.light-mode .np-dialog-overlay,
.np-dialog-overlay.light-mode { background: rgba(17, 24, 39, 0.55); }

@keyframes npDlgFade { from { opacity: 0; } to { opacity: 1; } }

.np-dialog {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--np-surface-raised);
    border: 1px solid var(--np-line);
    border-radius: 12px;
    padding: 26px 28px 22px;
    font-family: var(--np-ui-font);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    animation: npDlgIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Neon top rule, per-tone — same motif as .price-card::before */
.np-dialog::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: currentColor;
}

@keyframes npDlgIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.np-dialog-closing { animation: npDlgOut 0.14s ease forwards; }
@keyframes npDlgOut { to { opacity: 0; transform: scale(0.98); } }

@media (prefers-reduced-motion: reduce) {
    .np-dialog-overlay, .np-dialog, .np-dialog-closing { animation: none; }
}

/* Tones: green success, purple info (the brand's second accent),
   amber warning, red danger. `color` drives ::before and the icon. */
.np-dialog-success { color: var(--np-green);  border-color: rgba(34, 197, 94, 0.45);  box-shadow: var(--np-glow-green), 0 20px 60px rgba(0,0,0,0.5); }
.np-dialog-info    { color: var(--np-purple); border-color: rgba(168, 85, 247, 0.45); box-shadow: var(--np-glow-purple), 0 20px 60px rgba(0,0,0,0.5); }
.np-dialog-warning { color: #f59e0b;          border-color: rgba(245, 158, 11, 0.45); box-shadow: 0 0 30px rgba(245,158,11,0.3), 0 20px 60px rgba(0,0,0,0.5); }
.np-dialog-danger  { color: #ef4444;          border-color: rgba(239, 68, 68, 0.45);  box-shadow: 0 0 30px rgba(239,68,68,0.3), 0 20px 60px rgba(0,0,0,0.5); }

.light-mode .np-dialog-success,
.light-mode .np-dialog-info,
.light-mode .np-dialog-warning,
.light-mode .np-dialog-danger { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }

.np-dialog-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.np-dialog-icon { display: flex; flex: 0 0 auto; color: currentColor; }

.np-dialog-title {
    font-family: var(--np-ui-display);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: currentColor;
    line-height: 1.25;
}

.np-dialog-body {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--np-text-dim);
    margin-bottom: 20px;
    max-height: 50vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    word-break: break-word;
}

.np-dialog-input {
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid var(--np-line);
    background: var(--np-surface);
    color: var(--np-text);
    font-family: var(--np-ui-font);
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.np-dialog-input:focus {
    outline: none;
    border-color: var(--np-green);
    box-shadow: var(--np-glow-soft);
}

.np-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.np-dialog-btn {
    padding: 10px 22px;
    border-radius: 8px;
    font-family: var(--np-ui-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.3s ease;
}

.np-dialog-btn:active { transform: translateY(1px); }
.np-dialog-btn:focus-visible { outline: none; box-shadow: var(--np-glow-soft); }

.np-dialog-cancel {
    border-color: var(--np-line);
    color: var(--np-text-dim);
}
.np-dialog-cancel:hover {
    border-color: var(--np-text-dim);
    color: var(--np-text);
}

/* Primary action glows in the dialog's own tone. */
.np-dialog-ok {
    border-color: currentColor;
    color: currentColor;
    background: rgba(255, 255, 255, 0.04);
}
.np-dialog-ok:hover {
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 20px currentColor;
}
.light-mode .np-dialog-ok { background: rgba(0, 0, 0, 0.03); }
.light-mode .np-dialog-ok:hover { background: rgba(0, 0, 0, 0.06); box-shadow: none; }

@media (max-width: 480px) {
    .np-dialog { padding: 22px 18px 18px; }
    .np-dialog-actions .np-dialog-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   NATIVE CONTROL THEMING
   --------------------------------------------------------------------------
   Controls whose chrome is drawn by the browser/OS rather than by page CSS:
   date/time pickers, number spinners, checkboxes, radios, ranges, scrollbars
   and file buttons. On Windows these default to light gray + blue accents
   regardless of the page theme (the same root cause as the <select> popup,
   but unlike the popup these ARE reachable from CSS).

   `color-scheme` is the key: it tells the engine to paint built-in widgets,
   the calendar dropdown and scrollbars in dark or light chrome.
   ========================================================================== */

:root { color-scheme: dark; }
.light-mode { color-scheme: light; }

/* Checkboxes, radios and range sliders adopt the brand green instead of the
   OS default blue. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--np-green);
}

/* Date/time text and the calendar icon must follow the page text colour;
   WebKit renders both in near-black by default, invisible on the dark theme. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color: var(--np-text);
    font-family: var(--np-ui-font);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
    transition: background 0.2s ease, filter 0.2s ease;
}

/* Dark theme: invert the black icon to white, then tint it green on hover. */
:root:not(.light-mode) input[type="date"]::-webkit-calendar-picker-indicator,
:root:not(.light-mode) input[type="time"]::-webkit-calendar-picker-indicator,
:root:not(.light-mode) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root:not(.light-mode) input[type="month"]::-webkit-calendar-picker-indicator,
:root:not(.light-mode) input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.9);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    background: rgba(34, 197, 94, 0.22);
}

/* Sub-fields (mm/dd/yyyy) — keep placeholders dim, highlight the active one. */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
    color: var(--np-text);
}
input[type="date"]:invalid::-webkit-datetime-edit,
input[type="time"]:invalid::-webkit-datetime-edit { color: var(--np-text-dim); }

input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
    background: var(--np-green);
    color: #04220f;
    border-radius: 3px;
    outline: none;
}

/* Number spinners are tiny, unstyleable and easy to mis-click on touch.
   Hide them; the field stays fully usable by typing and by arrow keys. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* File inputs: the OS "Choose File" button is unstyleable gray chrome.
   ::file-selector-button IS styleable, so give it the neon treatment. */
input[type="file"] {
    color: var(--np-text-dim);
    font-family: var(--np-ui-font);
    font-size: 14px;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    font-family: var(--np-ui-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 16px;
    margin-right: 12px;
    border-radius: 6px;
    border: 1px solid var(--np-green);
    background: rgba(34, 197, 94, 0.12);
    color: var(--np-green);
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: rgba(34, 197, 94, 0.22);
    box-shadow: var(--np-glow-soft);
}

/* Scrollbars — default light gray on Windows even in dark mode. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 197, 94, 0.45) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(34, 197, 94, 0.65); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Autofill: Chrome forces a light-blue/yellow background that overrides the
   theme. The inset shadow trick is the only reliable way to repaint it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--np-text);
    -webkit-box-shadow: 0 0 0 1000px var(--np-surface) inset;
    caret-color: var(--np-text);
    transition: background-color 9999s ease-out 0s;
}

/* Text selection in brand colours rather than OS blue. */
::selection { background: rgba(34, 197, 94, 0.32); color: var(--np-text); }
.light-mode ::selection { background: rgba(21, 128, 61, 0.22); }