/* =========================================================
   WE WERE HERE — Neon UI layer
   Goal: readable neon, grouped panels, consistent buttons/inputs
   ========================================================= */

:root{
  --bg0:#05060a;
  --bg1:#070a12;
  --panel: rgba(10,14,24,.72);
  --panel2: rgba(8,10,16,.82);
  --border: rgba(120,255,230,.18);

  --txt:#EAF2FF;
  --muted: rgba(234,242,255,.72);

  --neon:#38FFD1;
  --neon2:#7B5CFF;
  --hot:#FF2EDC;
  --warn:#FFB020;
  --bad:#FF3B3B;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --glow: 0 0 14px rgba(56,255,209,.20), 0 0 34px rgba(123,92,255,.12);
  --glowHot: 0 0 14px rgba(255,46,220,.18), 0 0 34px rgba(255,46,220,.10);

  --r: 18px;
  --r2: 22px;
}

/* Page base */
html, body{
  background: radial-gradient(1200px 800px at 30% 10%, rgba(123,92,255,.18), transparent 55%),
              radial-gradient(900px 600px at 70% 25%, rgba(56,255,209,.14), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--txt);
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Make generic text readable */
.panel-muted, .muted, small{
  color: var(--muted) !important;
}

/* Side panel / selection card */
#selection-section, .selection-section, .side-panel, #side-panel, .panel, .card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

#selection-section *{
  box-sizing: border-box;
}

/* Headings: neon */
.panel-heading, h2, h3{
  color: var(--neon);
  letter-spacing: .3px;
  text-shadow: 0 0 10px rgba(56,255,209,.22), 0 0 24px rgba(123,92,255,.18);
}

/* Labels / values */
.hover-label{
  color: rgba(234,242,255,.78);
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-top: 10px;
}

.hover-value{
  color: var(--txt);
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,255,230,.12);
  box-shadow: inset 0 0 0 1px rgba(123,92,255,.06);
}

/* Inputs */
.wwh-input, input[type="text"], input[type="number"], input[type="email"], textarea, select{
  background: rgba(4,6,12,.65) !important;
  color: var(--txt) !important;
  border: 1px solid rgba(120,255,230,.20) !important;
  border-radius: 14px !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(123,92,255,.08), 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}

.wwh-input::placeholder,
input::placeholder,
textarea::placeholder{
  color: rgba(234,242,255,.45) !important;
}

.wwh-input:focus,
input:focus,
textarea:focus,
select:focus{
  border-color: rgba(56,255,209,.55) !important;
  box-shadow: 0 0 0 3px rgba(56,255,209,.14), 0 0 0 1px rgba(123,92,255,.12) inset;
}

/* Buttons */
.btn, button.btn, 
#selection-info button, 
.side-panel button,
.wwh-modal button,
.wwh-sheet button{
  background: linear-gradient(135deg, rgba(56,255,209,.15), rgba(123,92,255,.18)) !important;
  color: var(--txt) !important;
  border: 1px solid rgba(120,255,230,.22) !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
  cursor: pointer;
  box-shadow: var(--glow), var(--shadow);
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}

.btn:hover, button:hover{
  filter: brightness(1.06);
  border-color: rgba(56,255,209,.45) !important;
  box-shadow: 0 0 18px rgba(56,255,209,.22), 0 0 40px rgba(123,92,255,.18), var(--shadow);
}

.btn:active, button:active{
  transform: translateY(1px);
}

/* Nudge buttons cluster (arrows) — keep them visible and consistent */
#intent-up, #intent-down, #intent-left, #intent-right, #intent-center{
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* “Place selection” should feel primary */
#sel-intent-confirm{
  border-color: rgba(56,255,209,.55) !important;
  box-shadow: 0 0 16px rgba(56,255,209,.24), 0 0 36px rgba(123,92,255,.18), var(--shadow);
}

/* Reserve button: slightly “hot” but still neon */
#sel-reserve-btn{
  border-color: rgba(255,46,220,.38) !important;
  box-shadow: var(--glowHot), var(--shadow);
}

/* Payment claim section container (if visible) */
#pay-claim{
  background: rgba(8,10,16,.55);
  border: 1px solid rgba(123,92,255,.20);
  border-radius: var(--r);
  padding: 12px 12px 10px;
  box-shadow: inset 0 0 0 1px rgba(56,255,209,.06);
}

/* Status / error banners (claimed / conflict) — readable, not “distorted” */

/* === WWH: Banner base (non-reserve) === */
.wwh-banner, .toast, .notice, .error, .warning, #pay-status{
  border-radius: 16px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .2px;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,255,230,.14);
  color: var(--txt);
}

/* Conflict / claimed */
.wwh-banner--conflict, .error, .warning{
  background: rgba(255,59,59,.10);
  border: 1px solid rgba(255,59,59,.35);
  color: #FFD6D6;
  box-shadow: 0 0 16px rgba(255,59,59,.10);
}


/* === WWH: Reserve/Status banner (single source of truth) ===
   Default: hidden. JS should add .wwh-show and optionally data-state="ok|conflict|warn".
*/
#sel-reserve-status{
  display:none;
  width:100%;
  margin-top:10px;
  padding: 12px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .15px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;

  /* Neutral banner look */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,255,230,.16);
  color: var(--txt);
  box-shadow: inset 0 0 0 1px rgba(123,92,255,.08);
}

#sel-reserve-status.wwh-show{ display:block; }

#sel-reserve-status[data-state="ok"]{
  background: rgba(56,255,209,.10);
  border-color: rgba(56,255,209,.30);
  color: #D9FFF4;
  box-shadow: 0 0 16px rgba(56,255,209,.10);
}

#sel-reserve-status[data-state="warn"]{
  background: rgba(255,176,32,.10);
  border-color: rgba(255,176,32,.30);
  color: rgba(255,240,210,.98);
  box-shadow: 0 0 16px rgba(255,176,32,.10);
}

#sel-reserve-status[data-state="conflict"]{
  background: rgba(255,59,59,.10);
  border-color: rgba(255,59,59,.35);
  color: #FFD6D6;
  box-shadow: 0 0 16px rgba(255,59,59,.10);
}

/* Kill any inner alert framing if status HTML contains spans */
#sel-reserve-status .wwh-flash-warn,
#sel-reserve-status .wwh-flash-error{
  display:block;
  margin:0;
  padding:0;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}


/* Success */
.wwh-banner--ok,
#sel-reserve-status[data-state="ok"],
#pay-status[data-state="ok"]{
  background: rgba(56,255,209,.10);
  border: 1px solid rgba(56,255,209,.30);
  color: #D9FFF4;
  box-shadow: 0 0 16px rgba(56,255,209,.12);
}

/* Subtle help text */
#sel-mode-hint{
  color: rgba(234,242,255,.70) !important;
}

/* Date picker icon visibility (you complained about dark buttons) */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.1);
  opacity: .85;
}

/* Mobile spacing */
@media (max-width: 768px){
  #selection-section, .selection-section, .side-panel, #side-panel{
    border-radius: 18px;
  }
  .btn{ padding: 11px 12px !important; }
}

/* =========================================================
   Patch: reserve/conflict message readability
   ========================================================= */

/* Always make the status area a real “banner” */

/* If your JS sets it as conflict/warn, this makes it readable even without data-attrs */

/* If you later add data-state="conflict" or "ok", these will win cleanly */


/* Optional: slightly emphasize key sentences */

/* ===== Reserve status should NOT show unless it has text ===== */

/* When JS writes text, it becomes visible */

/* Conflict look */

/* OK look */

/* ===== Reserve status should NOT show unless it has text ===== */

/* When JS writes text, it becomes visible */

/* Conflict look */

/* OK look */

/* Payment section must be modal-only (never shown in the side panel) */

/* Payment UI rules */
.wwh-modal #pay-claim{ display:block !important; }       /* only in modal */


/* --- Payment claim placement rules (authoritative) --- */
.side-panel #pay-claim{ display:none !important; }     /* never show in panel */
.wwh-modal #pay-claim{ display:block !important; }     /* show inside modal */

/* =========================
   WWH Modal (Payment Claim)
   ========================= */

/* Backdrop hidden by default */
.wwh-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 9998;
}

/* Modal hidden by default */
.wwh-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(.98);
  width: min(560px, 92vw);
  height: min(92dvh, 760px);
  height: min(92vh, 760px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;

  border-radius: 18px;
  border: 1px solid rgba(56,255,209,.25);
  background: rgba(8,12,18,.92);
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 24px rgba(56,255,209,.12);

  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;

  z-index: 9999;
}

/* Visible state toggled by aria-hidden in JS */
.wwh-modal-backdrop[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
}

.wwh-modal[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%,-50%) scale(1);
}

/* Prevent background scroll */
body.wwh-modal-open{
  overflow: hidden;
}

/* Header */
.wwh-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}

.wwh-modal__title{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(56,255,209,.95);
  text-shadow: 0 0 14px rgba(56,255,209,.20);
}

.wwh-modal__close{
  appearance:none;
  border:1px solid rgba(56,255,209,.25);
  background: rgba(56,255,209,.08);
  color: rgba(235,255,250,.95);
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
}

.wwh-modal__close:hover{
  background: rgba(56,255,209,.12);
}

/* Body */
.wwh-modal__body{
  padding: 14px 16px 18px;
}

/* Ensure the pay section looks good inside modal */
.wwh-modal #pay-claim{
  margin-top: 0 !important;
}

/* === WWH: hide empty reserve status/countdown boxes (prevents phantom outlines) === */
#sel-reserve-countdown:empty { display: none !important; }


/* === WWH: reserve/status only visible when explicitly shown === */
#sel-reserve-status:not(.wwh-show),
#sel-reserve-countdown:empty{
  display:none !important;
}

/* If something sneaks in (whitespace), still avoid phantom pill */


/* === WWH: Reserve status should be ONE box only (container border only) === */

/* Default: fully hidden unless explicitly shown */

/* When JS shows it */

/* The container is the only bordered box */

/* Kill any inner “badge/alert” framing */
#sel-reserve-status .wwh-flash-warn,

/* Optional: make conflict state the container border color (single outline) */

/* Optional: ok state */


/* === WWH: spacing for confirm under MOVE arrows === */
#sel-intent-confirm{
  margin-top: 14px !important;
}


/* === WWH_HOVER_POINTER_EVENTS_V1 ===
   Allow the hover/details card to be interactive (links, text selection)
   even if global neon overlays use pointer-events:none.
*/
#hover-empty,
#hover-details,
#hover-title,
#hover-url,
#hover-text,
#hover-coords,
#hover-size{
  pointer-events: auto !important;
}

/* === WWH_SIDE_PANEL_INTERACTIVE_V1 ===
   Ensure the info panel is interactive (links, text selection).
   If an ancestor had pointer-events:none, this restores interactivity.
*/
.side-panel,
.side-panel *{
  pointer-events: auto !important;
}

/* Keep the canvas interactive even if side-panel rules get broad */
#grid-canvas{
  pointer-events: auto !important;
}

/* === WWH_SIDE_PANEL_ZFIX_V1 ===
   Ensure the side panel (Inspect/Selection) is above decorative overlays.
   If something is covering links, this fixes it.
*/
.side-panel{
  position: relative;
  z-index: 10050 !important;
}

/* === WWH_INSPECT_MODE_V1 ===
   When a claimed rect is pinned (Inspect mode), hide BUY-only controls.
   (We keep the grid interactive; side-panel interactivity already forced earlier.)
*/
.side-panel.wwh-mode-inspect #sel-w,
.side-panel.wwh-mode-inspect #sel-h,
.side-panel.wwh-mode-inspect #sel-mode-hint,
.side-panel.wwh-mode-inspect #sel-nudge,
.side-panel.wwh-mode-inspect #selection-empty,
.side-panel.wwh-mode-inspect #selection-details,
.side-panel.wwh-mode-inspect #pay-claim{
  display: none !important;
}

/* === WWH_INSPECT_MODE_DUAL_TARGET_V1 ===
   Support inspect-mode rules when the class lands on #selection-info.
*/
#selection-info.wwh-mode-inspect #sel-w,
#selection-info.wwh-mode-inspect #sel-h,
#selection-info.wwh-mode-inspect #sel-mode-hint,
#selection-info.wwh-mode-inspect #sel-nudge,
#selection-info.wwh-mode-inspect #selection-empty,
#selection-info.wwh-mode-inspect #selection-details,
#selection-info.wwh-mode-inspect #pay-claim{
  display: none !important;
}

/* === WWH_INSPECT_MODE_DATAATTR_V1 ===
   Bulletproof hide: driven by data attribute on #selection-info.
*/
#selection-info[data-wwh-mode="inspect"] #sel-w,
#selection-info[data-wwh-mode="inspect"] #sel-h,
#selection-info[data-wwh-mode="inspect"] #sel-mode-hint,
#selection-info[data-wwh-mode="inspect"] #sel-nudge,
#selection-info[data-wwh-mode="inspect"] #selection-empty,
#selection-info[data-wwh-mode="inspect"] #selection-details,
#selection-info[data-wwh-mode="inspect"] #pay-claim{
  display: none !important;
}

/* === WWH_INSPECT_MODE_SPACING_V1 ===
   Give Inspect mode a little breathing room when BUY blocks are hidden.
*/
#selection-info[data-wwh-mode="inspect"] #hover-section{
  margin-bottom: 10px !important;
}
#selection-info[data-wwh-mode="inspect"] #pay-claim{
  margin-top: 14px !important;
}

/* =========================
   WWH: Hide visible scrollbars (keep scrolling)
   Requirement: no scroll bars should exist
   ========================= */

/* Firefox / legacy */
body, .side-panel, .wwh-modal, .wwh-sheet {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge/IE */
}

/* WebKit (Chrome/Safari) */
body::-webkit-scrollbar,
.side-panel::-webkit-scrollbar,
.wwh-modal::-webkit-scrollbar,
.wwh-sheet::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}


/* === WWH_CTA_YELLOW_FORCE_V1 ===
   Make primary CTAs unmistakably "buy" buttons.
   This intentionally overrides any generic .btn styling.
*/
#selection-section .btn.wwh-btn--yellow,
#selection-section button.btn.wwh-btn--yellow,
#selection-section .panel .btn.wwh-btn--yellow,
#selection-section .panel button.btn.wwh-btn--yellow,
#selection-info .btn.wwh-btn--yellow,
#selection-info button.btn.wwh-btn--yellow {
  background: rgba(255, 204, 0, .18) !important;
  border: 1px solid rgba(255, 204, 0, .92) !important;
  color: rgba(255, 245, 210, .98) !important;
  box-shadow:
    0 0 18px rgba(255, 204, 0, .22),
    0 0 40px rgba(255, 204, 0, .14),
    inset 0 0 14px rgba(255, 204, 0, .10) !important;
  text-shadow: 0 0 10px rgba(255, 204, 0, .22) !important;
}

#selection-section .btn.wwh-btn--yellow:hover,
#selection-section button.btn.wwh-btn--yellow:hover {
  background: rgba(255, 204, 0, .24) !important;
  box-shadow:
    0 0 22px rgba(255, 204, 0, .28),
    0 0 48px rgba(255, 204, 0, .18),
    inset 0 0 16px rgba(255, 204, 0, .12) !important;
}

#selection-section .btn.wwh-btn--yellow:active,
#selection-section button.btn.wwh-btn--yellow:active {
  transform: translateY(1px);
}

/* === WWH_CONFIRM_STYLES_V1 (moved from JS injection) ===
   Goal: keep confirm dialog buttons styled WITHOUT runtime <style> injection.
   Scoped to .wwh-confirm so it cannot darken unrelated buttons.
*/
.wwh-confirm{display:flex;flex-direction:column;gap:12px}
.wwh-confirm__title{margin:0;font:700 16px/1.2 system-ui;color:var(--txt) !important}
.wwh-confirm__msg{margin:0;opacity:.92;font:14px/1.4 system-ui;color:var(--txt2, rgba(234,242,255,.82)) !important}
.wwh-confirm__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

.wwh-confirm .wwh-btn{
  padding:10px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(120,255,230,.22) !important;
  background: linear-gradient(135deg, rgba(56,255,209,.15), rgba(123,92,255,.18)) !important;
  color: var(--txt) !important;
  cursor:pointer;
  box-shadow: var(--glow), var(--shadow);
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
.wwh-confirm .wwh-btn:hover{
  filter: brightness(1.06);
  border-color: rgba(56,255,209,.45) !important;
  box-shadow: 0 0 18px rgba(56,255,209,.22), 0 0 40px rgba(123,92,255,.18), var(--shadow);
}
.wwh-confirm .wwh-btn:active{transform: translateY(1px)}

.wwh-confirm .wwh-btn--ghost{
  background: transparent !important;
  border-color: rgba(120,255,230,.18) !important;
}
.wwh-confirm .wwh-btn--danger{
  background: rgba(255,0,80,.22) !important;
  border-color: rgba(255,0,80,.35) !important;
  box-shadow: 0 0 18px rgba(255,0,80,.18), 0 0 40px rgba(255,0,80,.12), var(--shadow);
}

/* === WWH_CTA_YELLOW_FORCE_V2 ===
   Fix: some builds render the selection UI inside #selection-info (not #selection-section).
   This block is intentionally last-in-file to override generic .btn rules.
*/
#selection-info .btn.wwh-btn--yellow,
#selection-info button.btn.wwh-btn--yellow,
#selection-info button.wwh-btn--yellow,
.side-panel .btn.wwh-btn--yellow,
.side-panel button.btn.wwh-btn--yellow,
.side-panel button.wwh-btn--yellow{
  background: rgba(255, 204, 0, .18) !important;
  border: 1px solid rgba(255, 204, 0, .92) !important;
  color: rgba(255, 245, 210, .98) !important;
  box-shadow:
    0 0 18px rgba(255, 204, 0, .22),
    0 0 40px rgba(255, 204, 0, .14),
    inset 0 0 14px rgba(255, 204, 0, .10) !important;
  text-shadow: 0 0 10px rgba(255, 204, 0, .22) !important;
  font-weight: 800 !important;
}

#selection-info .btn.wwh-btn--yellow:hover,
#selection-info button.btn.wwh-btn--yellow:hover,
#selection-info button.wwh-btn--yellow:hover,
.side-panel .btn.wwh-btn--yellow:hover,
.side-panel button.btn.wwh-btn--yellow:hover,
.side-panel button.wwh-btn--yellow:hover{
  background: rgba(255, 204, 0, .24) !important;
  box-shadow:
    0 0 22px rgba(255, 204, 0, .28),
    0 0 48px rgba(255, 204, 0, .18),
    inset 0 0 16px rgba(255, 204, 0, .12) !important;
}

#selection-info .btn.wwh-btn--yellow:active,
#selection-info button.btn.wwh-btn--yellow:active,
#selection-info button.wwh-btn--yellow:active,
.side-panel .btn.wwh-btn--yellow:active,
.side-panel button.btn.wwh-btn--yellow:active,
.side-panel button.wwh-btn--yellow:active{
  transform: translateY(1px);
}

/* =========================================================
   WWH_PANEL_HIERARCHY_V1
   Goal: semantic hierarchy in side panel (Tools / Info / Money / Action)
   - Tools (W/H + arrows): quieter
   - Info (summary): readable
   - Money (price): high salience
   - Action (confirm): dominant
   ========================================================= */

:root{
  --wwh-tool-bg: rgba(8,10,16,.35);
  --wwh-tool-br: rgba(120,255,230,.14);
  --wwh-info-bg: rgba(255,255,255,.03);
  --wwh-info-br: rgba(120,255,230,.12);
  --wwh-money-bg: rgba(255, 208, 72, .14);
  --wwh-money-br: rgba(255, 208, 72, .55);
  --wwh-money-glow: 0 0 16px rgba(255, 208, 72, .14), 0 0 36px rgba(255, 208, 72, .10);
}

/* Panel section rhythm */
#selection-info .panel-heading{
  letter-spacing: .6px;
  text-transform: none;
}

#selection-info .panel-section{
  margin-top: 14px;
}

/* --- TOOLS: Choose size + Move --- */
#choose-size-section,
#sel-nudge{
  background: var(--wwh-tool-bg);
  border: 1px solid var(--wwh-tool-br);
  border-radius: 18px;
  padding: 12px 12px 10px;
  box-shadow: inset 0 0 0 1px rgba(123,92,255,.06);
}

#choose-size-section .hover-label,
#sel-nudge .hover-label{
  opacity: .92;
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

/* Inputs: tool feel (not CTA) */
#selection-info .wwh-input#sel-w,
#selection-info .wwh-input#sel-h{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(120,255,230,.16);
  box-shadow: none;
}

/* Nudge buttons: visually “utility”, not competing with Confirm */
#intent-up, #intent-down, #intent-left, #intent-right, #intent-center{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(120,255,230,.18) !important;
  box-shadow: none !important;
  filter: none !important;
}

#intent-up:hover, #intent-down:hover, #intent-left:hover, #intent-right:hover, #intent-center:hover{
  border-color: rgba(56,255,209,.40) !important;
  box-shadow: 0 0 14px rgba(56,255,209,.10) !important;
}

/* --- INFO: Summary block --- */
#selection-details{
  background: var(--wwh-info-bg);
  border: 1px solid var(--wwh-info-br);
  border-radius: 18px;
  padding: 12px 12px 12px;
}

#selection-details .hover-label{
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .78;
  margin-top: 10px;
}

#selection-details .hover-label:first-child{
  margin-top: 0;
}

#selection-details .hover-value{
  font-size: 13px;
  letter-spacing: .1px;
}

/* --- MONEY: Price must pop --- */
#sel-price{
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--wwh-money-bg);
  border: 1px solid var(--wwh-money-br);
  box-shadow: var(--wwh-money-glow);
  font-weight: 700;
}

/* Optional: make the price label also feel important */
#selection-details .hover-label:has(+ #sel-price){
  color: rgba(255, 230, 160, .95);
  opacity: .95;
}

/* --- ACTION: Confirm must dominate --- */
#sel-intent-confirm.btn.wwh-btn--yellow{
  font-weight: 800 !important;
  letter-spacing: .3px;
  border-width: 2px !important;
  box-shadow: 0 0 22px rgba(255, 208, 72, .22), 0 0 44px rgba(255, 208, 72, .14), var(--shadow) !important;
}

/* Keep dangerous action clearly “danger” and not neon-cute */
#sel-cancel.btn{
  box-shadow: none !important;
}

/* Inspect mode: do NOT accidentally show tools */
.side-panel.wwh-mode-inspect #choose-size-section,
.side-panel.wwh-mode-inspect #sel-nudge{
  display: none !important;
}


/* =========================================================
   WWH_PRICE_CONFIRM_BLOCK_V1
   Goal: premium acquisition moment (price anchors, confirm completes)
   ========================================================= */

/* Create a shared visual rhythm for price + confirm */
#selection-details{
  position: relative;
}

/* Price becomes the anchor */
#sel-price{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 220, 120, .18),
    rgba(255, 208, 72, .12)
  );
  border: 1px solid rgba(255, 208, 72, .65);
  box-shadow:
    0 0 0 1px rgba(255, 208, 72, .18),
    0 0 22px rgba(255, 208, 72, .14);
}

/* Confirm becomes an acceptance action, not a hype button */
#sel-intent-confirm.btn.wwh-btn--yellow{
  margin-top: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 208, 72, .22),
    rgba(255, 208, 72, .16)
  ) !important;
  border-color: rgba(255, 208, 72, .85) !important;
  box-shadow:
    0 0 0 1px rgba(255, 208, 72, .22),
    0 0 18px rgba(255, 208, 72, .18) !important;
}

/* Remove “salesy” hover aggression */
#sel-intent-confirm:hover{
  filter: none !important;
  transform: none !important;
}

/* De-emphasize explanatory copy under confirm */
#selection-after-confirm,
#selection-info .panel-muted{
  font-size: 11px;
  opacity: .7;
  line-height: 1.4;
}

/* Keep cancel clearly secondary */
#sel-cancel{
  opacity: .75;
}


/* =========================================================
   WWH_PANEL_TITLES_V1
   - Remove redundant "Selection" heading inside the side panel
   - Downgrade "Inspect" to a subtle mode hint (premium, not noisy)
   ========================================================= */

/* Hide the inner panel "Selection" heading (Presence already covers it) */
#selection-info > .panel-heading{
  display: none !important;
}

/* Make "Inspect" heading feel like a mode hint, not a section title */
#selection-info #hover-section > .panel-heading{
  font-size: 11px !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  opacity: .72 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Tighten the top spacing now that the redundant heading is gone */
#selection-info{
  padding-top: 6px;
}


/* =========================================================
   WWH_NUDGE_COMPACT_V1
   Goal: reclaim vertical space in the side panel on desktop.
   - Desktop: nudge buttons compact (36px)
   - Mobile: keep touch-friendly sizing (44px)
   ========================================================= */

@media (min-width: 861px){
  /* tighter grid so it doesn't consume panel height */
  .wwh-move-grid{
    grid-template-columns: 40px 40px 40px !important;
    gap: 5px !important;
    margin-top: 8px !important;
  }

  #intent-up, #intent-down, #intent-left, #intent-right, #intent-center{
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }
}

/* Mobile / small screens: keep comfortable touch targets */
@media (max-width: 860px){
  #intent-up, #intent-down, #intent-left, #intent-right, #intent-center{
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }
}

/* =========================================================
   WWH_MOVE_GRID_SIZE_V1
   Desktop: make move arrows smaller to save vertical space.
   Scoped ONLY to the move grid buttons.
   ========================================================= */
@media (min-width: 861px){
  .wwh-move-grid{
    gap: 5px !important;
    margin-top: 8px !important;
  }
  .wwh-move-grid .btn{
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
}

/* === WWH_INSPECT_UNPIN_HINT_V1 === */
.inspect-hint{
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  opacity: .65;
  color: rgba(180, 220, 255, .75);
  letter-spacing: .2px;
  display: none;
}

/* Only visible in Inspect mode */
#selection-info[data-wwh-mode="inspect"] .inspect-hint{
  display: block;
}


/* __WWH_EXPLORE_CARD_STYLE_V1__ */
/* Premium “museum plaque” card for EXPLORE mode only */
#selection-info[data-wwh-tab="explore"] #hover-details{
  display: block;
  margin-top: 10px !important;
  padding: 14px 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,255,230,.20) !important;
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(56,255,209,.10), transparent 60%),
    radial-gradient(900px 450px at 90% 30%, rgba(123,92,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(4,6,12,.72), rgba(4,6,12,.52)) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(123,92,255,.10) inset,
    0 0 38px rgba(56,255,209,.10);
  position: relative;
  overflow: hidden;
}

/* Top glow line */
#selection-info[data-wwh-tab="explore"] #hover-details::before{
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: 10px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(56,255,209,.0), rgba(56,255,209,.55), rgba(123,92,255,.45), rgba(56,255,209,.0));
  opacity: .9;
}

/* Labels become subtle; values become content */
#selection-info[data-wwh-tab="explore"] #hover-details .hover-label{
  margin-top: 12px !important;
  font-size: 11px !important;
  letter-spacing: 1.1px !important;
  opacity: .75 !important;
}

/* Base value styling in Explore */
#selection-info[data-wwh-tab="explore"] #hover-details .hover-value{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(120,255,230,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(123,92,255,.08) !important;
}

/* Title = hero */
#selection-info[data-wwh-tab="explore"] #hover-title.hover-value{
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  line-height: 1.25 !important;
  padding: 12px 12px !important;
  color: rgba(236,252,255,.98) !important;
  text-shadow:
    0 0 12px rgba(56,255,209,.18),
    0 0 26px rgba(123,92,255,.16) !important;
  border-color: rgba(56,255,209,.22) !important;
}

/* URL = neon chip and obviously clickable if it contains a link */
#selection-info[data-wwh-tab="explore"] #hover-url.hover-value{
  word-break: break-all;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  border-color: rgba(123,92,255,.22) !important;
  background: linear-gradient(135deg, rgba(56,255,209,.06), rgba(123,92,255,.08)) !important;
}

/* If JS renders <a> inside, style it */
#selection-info[data-wwh-tab="explore"] #hover-url a{
  color: rgba(140,255,240,.95) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}
#selection-info[data-wwh-tab="explore"] #hover-url a:hover{
  text-decoration: underline !important;
}

/* Text = readable excerpt */
#selection-info[data-wwh-tab="explore"] #hover-text.hover-value{
  padding: 12px 12px !important;
  line-height: 1.5 !important;
  color: rgba(236,252,255,.92) !important;
  border-color: rgba(120,255,230,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)) !important;
}

/* Coords + Size = metadata pills */
#selection-info[data-wwh-tab="explore"] #hover-coords.hover-value,
#selection-info[data-wwh-tab="explore"] #hover-size.hover-value{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  border-color: rgba(56,255,209,.16) !important;
  background: rgba(0,0,0,.18) !important;
}

/* Keep pills on one line if possible */
#selection-info[data-wwh-tab="explore"] #hover-details{
  display: grid;
  grid-template-columns: 1fr;
}
#selection-info[data-wwh-tab="explore"] #hover-details .hover-label{
  grid-column: 1 / -1;
}
#selection-info[data-wwh-tab="explore"] #hover-coords{
  margin-top: 6px !important;
}
#selection-info[data-wwh-tab="explore"] #hover-size{
  margin-top: 8px !important;
}

/* Hint: keyboard nav visible only in Explore */
#selection-info[data-wwh-tab="explore"] .inspect-hint{
  display: block !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(120,255,230,.14) !important;
  background: rgba(56,255,209,.05) !important;
  box-shadow: 0 0 18px rgba(56,255,209,.08) !important;
  opacity: .85 !important;
}


/* === WWH_BUY_EXPLORE_TABS_CSS_V1 === */
/* BUY tab shows selection/reserve/pay UI and hides inspect UI */
#selection-info[data-wwh-tab="buy"] #hover-section{ display:none !important; }

/* EXPLORE tab shows inspect UI and hides buy UI */
#selection-info[data-wwh-tab="explore"] #choose-size-section,
#selection-info[data-wwh-tab="explore"] #sel-nudge,
#selection-info[data-wwh-tab="explore"] #selection-empty,
#selection-info[data-wwh-tab="explore"] #selection-details,
#selection-info[data-wwh-tab="explore"] #pay-claim,
#selection-info[data-wwh-tab="explore"] #sel-reserve-btn,
#selection-info[data-wwh-tab="explore"] #pay-reopen{
  display:none !important;
}

/* In Explore, keep the Inspect section tight and readable */
#selection-info[data-wwh-tab="explore"] #hover-section{
  margin-top: 0 !important;
}

/* Optional: reduce arrow button size a bit (safe, reversible) */
.wwh-move-grid .btn{
  min-width: 44px;
  padding: 10px 0;
}

/* === WWH_HIDE_WH_IN_EXPLORE_V1 === */
/* In EXPLORE mode, W/H is irrelevant and confusing. Keep navigation + inspect only. */
#selection-info[data-wwh-mode="explore"] #choose-size-section{
  display:none !important;
}

/* === WWH_TAB_UI_GATING_V1 === */
/* The JS sets: #selection-info[data-wwh-tab="buy"|"explore"] */

/* EXPLORE = museum wandering: hide buy-only controls */
#selection-info[data-wwh-tab="explore"] #choose-size-section,
#selection-info[data-wwh-tab="explore"] #selection-empty,
#selection-info[data-wwh-tab="explore"] #selection-details,
#selection-info[data-wwh-tab="explore"] #sel-intent-confirm,
#selection-info[data-wwh-tab="explore"] #selection-after-confirm,
#selection-info[data-wwh-tab="explore"] #sel-reserve-status,
#selection-info[data-wwh-tab="explore"] #sel-reserve-countdown,
#selection-info[data-wwh-tab="explore"] #pay-reopen,
#selection-info[data-wwh-tab="explore"] #pay-claim,
#selection-info[data-wwh-tab="explore"] #sel-reserve-btn{
  display: none !important;
}

/* BUY = conversion: hide inspect browsing block */
#selection-info[data-wwh-tab="buy"] #hover-section{
  display: none !important;
}

/* === WWH_PANEL_TAB_GATE_V1 === */
/* Default: show both (safe fallback if JS attrs/classes fail) */
#selection-info #panel-explore,
#selection-info #panel-buy{
  display: block;
}

/* When tab is BUY: hide Explore block */
.side-panel.wwh-mode-buy #selection-info #panel-explore,
#selection-info[data-wwh-tab="buy"] #panel-explore{
  display: none !important;
}

/* When tab is EXPLORE: hide Buy block */
.side-panel.wwh-mode-explore #selection-info #panel-buy,
#selection-info[data-wwh-tab="explore"] #panel-buy{
  display: none !important;
}