/* ============================================================================= HAUNT ADVISOR — interaction component styles Extracted 2026-07-26 from the wp_add_inline_style heredocs in: class-ha-favorites.php · class-ha-lists.php · class-ha-reactions.php · class-ha-card.php · class-ha-trip.php plus the NEW variant="bar" action buttons and the [ha_listing_actions] rail/sticky wrapper. Values reference the canonical token layer (Tylers-Code/css/tsf-tokens.css); every var() carries the canonical value as fallback so HA renders correctly even if the token stylesheet is missing. Enqueued site-wide by HA_Card::enqueue() (handle: ha-styles) so it is on the page from the initial load — cards swapped in by a FacetWP AJAX refresh (which does not re-run wp_enqueue_scripts) stay styled. LOAD-BEARING RULES — do not "clean up": - Every :not(.ha-fav-icon) / :not(.ha-bucket-icon) / :not(.ha-act-btn) guard. The default pill rules use !important to beat the Elementor kit's ".elementor-kit-56038 button" (0,2,0) which loads after this stylesheet; !important beats ANY non-important rule regardless of specificity, so the forced properties must be withheld from the icon/bar variants, which are styled without !important further down (icons) or with their own !important set (bar). - The rotate/opacity flip exclusion on .ha-fav-icon — without it the card bookmarks render upside down whenever they are unsaved. ========================================================================== */ /* ── Favorites — default (pill) variant ─────────────────────────────────── */ .ha-fav-btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-weight:600; transition:all .25s; } .ha-fav-btn:not(.ha-fav-icon):not(.ha-act-btn) { padding:10px 18px; background:transparent !important; border:2px solid var(--ha-saved, #FF3B3B) !important; border-radius:20px !important; color:var(--ha-saved, #FF3B3B) !important; } .ha-fav-btn:not(.ha-fav-icon):not(.ha-act-btn):hover { background:rgba(255,59,59,.10) !important; } .ha-fav-btn:not(.ha-fav-icon):not(.ha-act-btn).is-saved { background:rgba(255,59,59,.16) !important; } .ha-fav-btn svg { width:22px; height:22px; transition:transform .25s, opacity .25s; } .ha-fav-btn:focus-visible { outline:3px solid var(--ha-focus, #FF0000); outline-offset:2px; } /* The rotate/opacity flip is the DEFAULT (skeleton ghost) pill animation only. The icon variant (loop cards) is a bookmark whose saved-state is shown by fill/color, never orientation; the bar variant swaps glyphs the same way. */ .ha-fav-btn.is-saved:not(.ha-fav-icon):not(.ha-act-btn) svg { transform:rotate(0deg); opacity:1; } .ha-fav-btn:not(.is-saved):not(.ha-fav-icon):not(.ha-act-btn) svg { transform:rotate(180deg); opacity:.65; } .ha-favorites-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; } .ha-fav-card { border:1px solid var(--tsf-line-soft, #2A2A2A); border-radius:8px; overflow:hidden; background:var(--tsf-surface-panel, #1A1A1A); } .ha-fav-card img { width:100%; height:160px; object-fit:cover; } .ha-fav-card-body { padding:12px; } .ha-fav-card-body h3 { margin:0 0 8px; font-size:1rem; } /* ── Visited / Bucket — default (pill) variants ─────────────────────────── */ .ha-list-btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-weight:600; transition:all .25s; } .ha-list-btn:not(.ha-bucket-icon):not(.ha-act-btn) { padding:9px 16px; background:transparent !important; border:2px solid; border-radius:20px !important; } .ha-visited-btn:not(.ha-bucket-icon):not(.ha-act-btn) { border-color:var(--ha-visited, #37D67A) !important; color:var(--ha-visited, #37D67A) !important; } .ha-visited-btn:not(.ha-bucket-icon):not(.ha-act-btn):hover { background:rgba(55,214,122,.10) !important; } .ha-visited-btn:not(.ha-bucket-icon):not(.ha-act-btn).is-active { background:rgba(55,214,122,.16) !important; } .ha-bucket-btn:not(.ha-bucket-icon):not(.ha-act-btn) { border-color:var(--ha-bucket, #FFB703) !important; color:var(--ha-bucket, #FFB703) !important; } .ha-bucket-btn:not(.ha-bucket-icon):not(.ha-act-btn):hover { background:rgba(255,183,3,.10) !important; } .ha-bucket-btn:not(.ha-bucket-icon):not(.ha-act-btn).is-active { background:rgba(255,183,3,.16) !important; } .ha-list-btn:focus-visible { outline:3px solid var(--ha-focus, #FF0000); outline-offset:2px; } .ha-list-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; } .ha-list-card { border:1px solid var(--tsf-line-soft, #2A2A2A); border-radius:8px; overflow:hidden; background:var(--tsf-surface-panel, #1A1A1A); } .ha-list-card img { width:100%; height:140px; object-fit:cover; } .ha-list-card-body { padding:10px; } /* ── Reactions — default (pill) variant ─────────────────────────────────── */ .ha-react-wrap { display:inline-flex; gap:10px; align-items:center; } .ha-react-btn { display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:.9rem; font-weight:600; transition:all .2s; } .ha-react-wrap:not(.ha-react-compact):not(.ha-react-bar) .ha-react-btn { padding:8px 14px; background:transparent !important; border:2px solid var(--tsf-line, #3F3F3F) !important; border-radius:20px !important; color:var(--tsf-text, #CBCBCB) !important; } .ha-react-wrap:not(.ha-react-compact):not(.ha-react-bar) .ha-react-btn:hover { border-color:var(--ha-line-hover, #666666) !important; color:var(--tsf-text-strong, #F2F2F2) !important; background:rgba(255,255,255,.04) !important; } .ha-react-wrap:not(.ha-react-compact):not(.ha-react-bar) .ha-react-btn.up.is-active { border-color:var(--ha-visited, #37D67A) !important; background:rgba(55,214,122,.16) !important; color:var(--ha-visited, #37D67A) !important; } .ha-react-wrap:not(.ha-react-compact):not(.ha-react-bar) .ha-react-btn.down.is-active { border-color:var(--ha-danger, #FF5A5A) !important; background:rgba(255,90,90,.16) !important; color:var(--ha-danger, #FF5A5A) !important; } .ha-react-btn:focus-visible { outline:3px solid var(--ha-focus, #FF0000); outline-offset:2px; } /* ── Loop card shell (.ha-card) ─────────────────────────────────────────── */ .ha-card { display:flex; flex-direction:column; height:100%; background:var(--ha-surface-card, #1A1A1A); border:1px solid var(--tsf-line-soft, #2A2A2A); border-radius:16px; overflow:hidden; transition:border-color .2s, box-shadow .2s; } .ha-card:hover { border-color:var(--tsf-red-ink, #5C0000); box-shadow:0 0 10px rgba(255,0,0,.18); } /* Media (logo) + corner actions */ .ha-card-media { position:relative; padding:14px 14px 0; } .ha-card-logo-link { display:block; border-radius:12px; overflow:hidden; background:var(--ha-surface-inset, #0C0C0C); } .ha-card-logo-link.is-empty { min-height:120px; } .ha-card-logo { display:block; width:100%; height:180px; object-fit:contain; padding:8px; box-sizing:border-box; } .ha-card-actions { position:absolute; top:22px; right:22px; display:flex; gap:8px; z-index:2; } .ha-card-actions .ha-fav-icon, .ha-card-actions .ha-bucket-icon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; margin:0; gap:0; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:var(--ha-chip, rgba(18,18,18,.6)); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); color:var(--tsf-text-strong, #F2F2F2); cursor:pointer; transition:color .2s, border-color .2s, background .2s, transform .1s; } .ha-card-actions .ha-fav-icon:hover, .ha-card-actions .ha-bucket-icon:hover { background:rgba(30,30,30,.85); transform:translateY(-1px); } .ha-card-actions .ha-fav-svg, .ha-card-actions .ha-bucket-svg { width:20px; height:20px; transform:none; opacity:1; fill:currentColor; } /* Outline when inactive, filled when active */ .ha-card-actions .ha-fav-icon:not(.is-saved) .ha-fav-svg, .ha-card-actions .ha-bucket-icon:not(.is-active) .ha-bucket-svg { fill:none; stroke:currentColor; stroke-width:1.6; } /* Active states keep the translucent chip (glyph fills/colors instead of the whole button) — background pinned here to beat the base .is-saved/.is-active fills, which sit at equal specificity and would otherwise win on source order. */ .ha-card-actions .ha-fav-icon.is-saved { color:var(--ha-saved, #FF3B3B); border-color:var(--ha-saved, #FF3B3B); background:var(--ha-chip, rgba(18,18,18,.6)); } .ha-card-actions .ha-bucket-icon.is-active { color:var(--ha-bucket, #FFB703); border-color:var(--ha-bucket, #FFB703); background:var(--ha-chip, rgba(18,18,18,.6)); } /* Body */ .ha-card-body { display:flex; flex-direction:column; gap:10px; padding:14px; flex:1 1 auto; } .ha-card-title { margin:0; font-size:1.15rem; line-height:1.2; } .ha-card-title a { color:var(--ha-accent, #FF0000); text-decoration:none; font-weight:800; } .ha-card-title a:hover { text-decoration:underline; } .ha-card-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--tsf-text, #CBCBCB); font-size:.9rem; } .ha-card-loc { display:inline-flex; align-items:center; gap:5px; font-style:italic; min-width:0; } .ha-card-loc > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ha-card-pin { width:14px; height:14px; flex:0 0 auto; fill:var(--ha-saved, #FF3B3B); } .ha-card-rating { white-space:nowrap; flex:0 0 auto; } .ha-card-rating .mini-guest-rating { font-size:.9rem; color:var(--tsf-text-strong, #F2F2F2); } .ha-card-notes { margin:0; color:var(--ha-notes, #FF8A3D); font-weight:600; font-size:.85rem; } .ha-card-review { margin:2px 0; } .ha-card-review img { display:block; max-width:220px; width:100%; height:auto; margin:0 auto; } /* Footer: subtype pill (left) + reactions (right) */ .ha-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; } .ha-card-subtype:empty { display:none; } .ha-card-subtype .listing-subtype-pill { display:inline-block; padding:.25em .6em; border:2px solid var(--tsf-orange, #FF6600); border-radius:var(--tsf-radius-xl, 31px); color:var(--tsf-text, #CBCBCB); background:var(--tsf-bg, #131313); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; } /* Compact reactions: grey line-art thumbs that fill on select */ .ha-card-reactions { flex:0 0 auto; } .ha-card-reactions .ha-react-compact { gap:2px; flex-wrap:nowrap; } .ha-react-compact .ha-react-btn { padding:4px 6px; font-size:.82rem; font-weight:700; border:none; background:transparent; color:var(--tsf-text, #CBCBCB); border-radius:6px; white-space:nowrap; } .ha-react-compact .ha-react-btn:hover { color:#fff; background:rgba(255,255,255,.06); } .ha-react-compact .ha-thumb-svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; transition:fill .15s ease; } .ha-react-compact .ha-react-btn.is-active .ha-thumb-svg { fill:currentColor; stroke:none; } .ha-react-compact .ha-react-btn.up.is-active { color:var(--ha-visited, #37D67A); background:transparent; } .ha-react-compact .ha-react-btn.down.is-active { color:var(--ha-danger, #FF5A5A); background:transparent; } /* sr-only (icon buttons keep a label for a11y + the JS relabel) */ .ha-sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ── Toast (Save / Bucket confirmation, anchored above the icon) ────────── */ .ha-toast { position:fixed; z-index:100000; pointer-events:none; display:inline-flex; align-items:center; gap:8px; background:var(--tsf-surface-raised, #151515); color:#fff; border:1px solid var(--tsf-line-soft, #2A2A2A); border-left:4px solid var(--accent, var(--ha-saved, #FF3B3B)); border-radius:10px; padding:9px 14px; font-weight:700; font-size:.85rem; line-height:1.2; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.5); opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; max-width:80vw; } .ha-toast.is-in { opacity:1; transform:translateY(0); } .ha-toast::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent, var(--ha-saved, #FF3B3B)); flex:0 0 auto; } /* little pointer aimed at the button the toast sits above (flips when below) */ .ha-toast::after { content:""; position:absolute; left:var(--tail,50%); bottom:-5px; width:9px; height:9px; background:var(--tsf-surface-raised, #151515); border-right:1px solid var(--tsf-line-soft, #2A2A2A); border-bottom:1px solid var(--tsf-line-soft, #2A2A2A); transform:translateX(-50%) rotate(45deg); } .ha-toast.is-below::after { top:-5px; bottom:auto; border:0; border-left:1px solid var(--tsf-line-soft, #2A2A2A); border-top:1px solid var(--tsf-line-soft, #2A2A2A); } .ha-toast--fixed-bottom { left:50% !important; bottom:28px; top:auto !important; transform:translateX(-50%) translateY(6px); } .ha-toast--fixed-bottom.is-in { transform:translateX(-50%) translateY(0); } .ha-toast--fixed-bottom::after { display:none; } @media (prefers-reduced-motion:reduce){ .ha-toast { transition:opacity .01s; } } /* ============================================================================= NEW — variant="bar" action buttons + [ha_listing_actions] rail Spec: design-system/components/hero-direction-b.html (band 4) and listing-single-actions.html. Same class + data contract as the pill/icon variants, so the existing delegated click handlers and AJAX endpoints drive these buttons with no JS changes. ========================================================================== */ /* Shared bar-button chrome. !important on the kit-contested properties for the same reason as the pills (the Elementor kit button rule loads after us). */ .ha-act-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 16px !important; border:1px solid var(--tsf-line-soft, #2A2A2A) !important; border-radius:var(--tsf-radius-xl, 31px) !important; background:transparent !important; color:var(--tsf-text-muted, #8A8A8A) !important; font-family:inherit; font-size:.79rem; line-height:1.2; font-weight:700; cursor:pointer; white-space:nowrap; transition:color .18s, border-color .18s, background .18s; } .ha-act-btn:hover { color:var(--tsf-text-strong, #F2F2F2) !important; border-color:var(--tsf-line, #3F3F3F) !important; background:rgba(255,255,255,.04) !important; } .ha-act-btn:focus-visible { outline:2px solid var(--ha-focus, #FF0000); outline-offset:2px; } .ha-act-btn svg { width:15px; height:15px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transform:none; opacity:1; transition:none; } .ha-act-btn.is-saved svg, .ha-act-btn.is-active svg { fill:currentColor; stroke:none; } /* Active states — semantic accent for border + text + a translucent wash. */ .ha-fav-btn.ha-act-btn.is-saved { color:var(--ha-saved, #FF3B3B) !important; border-color:rgba(255,59,59,.5) !important; background:rgba(255,59,59,.09) !important; } .ha-bucket-btn.ha-act-btn.is-active { color:var(--ha-bucket, #FFB703) !important; border-color:rgba(255,183,3,.5) !important; background:rgba(255,183,3,.09) !important; } .ha-visited-btn.ha-act-btn.is-active { color:var(--ha-visited, #37D67A) !important; border-color:rgba(55,214,122,.5) !important; background:rgba(55,214,122,.09) !important; } .ha-tripadd-btn.ha-act-btn.is-active { color:var(--tsf-orange, #FF6600) !important; border-color:rgba(255,102,0,.5) !important; background:rgba(255,102,0,.09) !important; } /* Bar reactions ride the same chrome via the wrap hook class. */ .ha-react-wrap.ha-react-bar { gap:8px; } .ha-react-bar .ha-react-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 14px !important; border:1px solid var(--tsf-line-soft, #2A2A2A) !important; border-radius:var(--tsf-radius-xl, 31px) !important; background:transparent !important; color:var(--tsf-text-muted, #8A8A8A) !important; font-size:.79rem; font-weight:700; } .ha-react-bar .ha-react-btn:hover { color:var(--tsf-text-strong, #F2F2F2) !important; border-color:var(--tsf-line, #3F3F3F) !important; background:rgba(255,255,255,.04) !important; } .ha-react-bar .ha-thumb-svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; } .ha-react-bar .ha-react-btn.is-active .ha-thumb-svg { fill:currentColor; stroke:none; } .ha-react-bar .ha-react-btn.up.is-active { color:var(--ha-visited, #37D67A) !important; border-color:rgba(55,214,122,.5) !important; background:rgba(55,214,122,.09) !important; } .ha-react-bar .ha-react-btn.down.is-active { color:var(--ha-danger, #FF5A5A) !important; border-color:rgba(255,90,90,.5) !important; background:rgba(255,90,90,.09) !important; } /* ── [ha_listing_actions] rail ──────────────────────────────────────────── */ .ha-actionbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; background:var(--tsf-surface-panel, #1A1A1A); padding:12px 16px; } .ha-actionbar-group { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .ha-actionbar-sep { width:1px; height:22px; background:var(--tsf-line-soft, #2A2A2A); } /* REMOVED 2026-07-27 — the .ha-actionbar--sticky condensed clone (position:fixed at top:0, z-index:90) and its .ha-actionbar-title. The rail is an "extra things you can do here" surface, not a persistent toolbar, and the fixed clone also competed with the site header for the top of the viewport. The :not(.ha-actionbar--sticky) guards that used to wrap the mobile rules below went with it — there is no longer a second variant to exclude. */ /* Mobile: WCAG target size + buttons stretch to fill the row (resolved-B). */ /* 767px = Elementor's mobile breakpoint. This rail renders INSIDE .tsf-hero, which reflows on container queries (css/listing-hero.css), so if this number is lower than the hero's the rail stays in desktop layout while the hero has already gone single-column -- that mismatch is what produced the 670-765px dead zone. Kept as a viewport query on purpose: the rail also renders where no container ancestor exists, and @container would silently never match. */ @media (max-width:767px){ .ha-actionbar .ha-actionbar-group { width:100%; } .ha-actionbar .ha-act-btn { flex:1 1 auto; min-width:88px; min-height:44px; } .ha-actionbar .ha-react-bar { flex:1 1 auto; } .ha-actionbar .ha-react-bar .ha-react-btn { flex:1 1 auto; min-height:44px; } } /* ============================================================================= Trip planner ([ha_trip_planner]) — extracted from class-ha-trip.php ========================================================================== */ .ha-trip { color:var(--tsf-text-strong, #F2F2F2); position:relative; } .ha-trip-guest { color:var(--tsf-text, #CBCBCB); } .ha-trip-origin { display:flex; align-items:center; gap:8px; background:var(--ha-surface-inset, #0C0C0C); border:1px solid var(--tsf-line-soft, #2A2A2A); border-radius:10px; padding:11px 14px; font-size:.92rem; } .ha-trip-origin-dot { color:var(--ha-saved, #FF3B3B); } .ha-trip-origin b { color:#fff; } .ha-trip-origin-warn { color:var(--ha-warn, #FFB37A); font-size:.86rem; } .ha-trip-origin-warn b { color:#ffd7b8; } /* Two columns: list on the left, live map on the right (stacks on mobile) */ .ha-trip-grid { display:grid; grid-template-columns:1fr; gap:18px; margin-top:14px; } @media (min-width:900px){ .ha-trip-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); } } .ha-trip-left, .ha-trip-right { min-width:0; } .ha-trip-map { width:100%; height:340px; min-height:340px; border-radius:12px; overflow:hidden; background:var(--ha-surface-inset, #0C0C0C); border:1px solid var(--tsf-line-soft, #2A2A2A); } @media (min-width:900px){ .ha-trip-map { position:sticky; top:20px; height:460px; } } .ha-trip-map-empty { display:flex; align-items:center; justify-content:center; height:100%; color:var(--ha-text-faint, #6F6F6F); font-size:.88rem; text-align:center; padding:24px; } /* Route dropzone + list */ .ha-trip-dropzone { border:1px dashed transparent; border-radius:12px; transition:border-color .15s, background .15s; } .ha-trip-route { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:stop; } .ha-trip-stop { display:flex; align-items:flex-start; gap:10px; background:var(--ha-surface-card, #1A1A1A); border:1px solid var(--tsf-line-soft, #2A2A2A); border-radius:10px; padding:10px 12px; counter-increment:stop; } .ha-trip-stop::before { content:counter(stop); flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--ha-accent, #FF0000); color:#fff; font-weight:800; font-size:.8rem; display:flex; align-items:center; justify-content:center; margin-top:2px; } .ha-trip-stop.no-coords { opacity:.7; } /* SortableJS grip — a real touch target so a row can be dragged on mobile without the page scrolling (touch-action:none), while the ↑/↓/✕ buttons and tap-to-add stay as the keyboard / quick fallback. */ .ha-trip-handle { color:var(--ha-text-faint, #6F6F6F); user-select:none; font-size:1.15rem; line-height:1; margin-top:1px; padding:5px 4px; border-radius:6px; cursor:grab; touch-action:none; } .ha-trip-handle:hover { color:var(--tsf-text, #CBCBCB); background:rgba(255,255,255,.05); } .ha-trip-handle:active { cursor:grabbing; } /* Drag ghost (gap left behind while dragging) + valid drop-target hints. */ .ha-trip-ghost { opacity:.35; } .ha-trip-stop.ha-trip-ghost { border-style:dashed; border-color:var(--ha-drag, #FF6600); background:rgba(255,102,0,.08); } .ha-trip-add.ha-trip-ghost { border-style:dashed; } .ha-trip.is-dragging-chip .ha-trip-dropzone { border-color:var(--ha-drag, #FF6600); background:rgba(255,102,0,.06); } .ha-trip.is-dragging-stop .ha-trip-pools { outline:2px dashed var(--ha-drag, #FF6600); outline-offset:4px; border-radius:10px; } .ha-trip-stop-body { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; gap:2px; } .ha-trip-stop-title { color:var(--ha-link, #FF6B6B); font-weight:700; font-size:.95rem; line-height:1.2; } .ha-trip-stop-meta { font-size:.78rem; line-height:1.4; } .ha-trip-stop-loc { color:var(--tsf-text-muted, #8A8A8A); font-style:italic; } .ha-trip-stop-leg { color:var(--tsf-text, #CBCBCB); } .ha-trip-stop-leg b { color:#fff; } .ha-trip-stop-nocoords { color:var(--ha-warn, #FFB37A); font-size:.72rem; } .ha-trip-stop-ctrls { display:flex; gap:4px; flex:0 0 auto; } .ha-trip-mini { width:28px; height:28px; border:1px solid var(--tsf-line, #3F3F3F); background:var(--ha-surface-control, #1B1B1B); color:var(--tsf-text, #CBCBCB); border-radius:6px; cursor:pointer; font-size:.72rem; line-height:1; } .ha-trip-mini:hover { border-color:var(--ha-line-hover, #666666); color:#fff; } .ha-trip-mini.remove:hover { border-color:var(--tsf-destructive, #C0392B); color:var(--ha-link, #FF6B6B); } .ha-trip-mini:disabled { opacity:.3; cursor:default; } /* Empty placeholder (drop target) */ .ha-trip-empty { display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; padding:26px 18px; border:1px dashed var(--tsf-line-strong, #333333); border-radius:12px; background:var(--ha-surface-inset, #0C0C0C); } .ha-trip-empty[hidden] { display:none; } .ha-trip-empty-h { color:#fff; font-weight:800; font-size:1rem; } .ha-trip-empty-sub { color:var(--tsf-text-muted, #8A8A8A); font-size:.85rem; max-width:360px; } /* Inline helper buttons in the empty dropzone */ /* Wrapper is the popover's ONLY positioning reference -- inline-block so it sits mid-sentence without breaking the surrounding text's flow, relative so the popover (position:absolute) anchors to this trigger and nothing wider. */ .ha-trip-infowrap { position:relative; display:inline-block; } /* Plain clickable text, not a button -- appearance/background/border/padding all need !important because the theme's global