/* Prediction SPA — every paintable surface routes through these variables.
   Elementor Style controls override them via {{WRAPPER}} .fpfx-prediction-spa. */
.fpfx-prediction-spa {
    --pm-primary: #2962ff;
    --pm-yes: #16a34a;
    --pm-no: #dc2626;
    --pm-bg: #ffffff;
    --pm-surface: #f9fafb;
    --pm-text: #111827;
    --pm-text-secondary: #6b7280;
    --pm-border: #e5e7eb;

    background: var(--pm-bg);
    color: var(--pm-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
}
.fpfx-prediction-spa *, .fpfx-prediction-spa *::before, .fpfx-prediction-spa *::after { box-sizing: border-box; }

/* Bootstrap state shown until JS swaps in the shell. */
.pm-spa-bootstrap { display: flex; justify-content: center; padding: 48px 0; }
.pm-spa-bootstrap-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--pm-border); border-top-color: var(--pm-primary);
    border-radius: 50%; animation: pm-spin 0.7s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* Categories + tags strips use Tailwind utilities for layout. Color/border/text
   surfaces are routed through their own CSS variables (defined below) so each
   region can be themed independently from the global --pm-* palette. */
.pm-spa-header { padding: 8px 0; }
.pm-spa-tags-wrap { padding-bottom: 8px; }

/* Toolbar layout — money lines on the left, Active Positions on the right.
   flex-wrap lets the right column drop to its own row when narrow viewports
   can't fit both side-by-side (otherwise the button visually overlaps the
   Equity card on mobile). */
.pm-spa-toolbar {
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px;
}
.pm-spa-toolbar-left,
.pm-spa-toolbar-right { display: flex; align-items: center; gap: 8px; }
.pm-spa-toolbar-right { margin-left: auto; }
.pm-spa-toolbar-left { flex-wrap: wrap; } /* Balance/Equity stack vertically on very narrow screens */

/* Mobile: when the toolbar wraps, the button lands on its own line — keep it
   flush right and give it the full row so Balance/Equity stay legible.
   Balance + Equity each take the full row width and stack vertically. */
@media (max-width: 640px) {
    .pm-spa-toolbar-right {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
    .pm-spa-toolbar-left { width: 100%; }
    .pm-spa-money-lines  { width: 100%; flex-direction: column; }
    .pm-spa-money-card   { width: 50%; min-width: 0; }
}

/* Active Positions toggle in the top toolbar — themed via its own variables so
   the Elementor "Active Positions Button" Style section can drive each surface. */
.fpfx-prediction-spa {
    --pm-active-positions-btn-bg:                 transparent;
    --pm-active-positions-btn-bg-hover:           var(--pm-surface);
    --pm-active-positions-btn-text:               var(--pm-text-secondary);
    --pm-active-positions-btn-text-hover:         var(--pm-text);
    --pm-active-positions-btn-border-color:       var(--pm-border);
    --pm-active-positions-btn-border-color-hover: var(--pm-primary);
    --pm-active-positions-btn-border-width:       1px;
    --pm-active-positions-btn-border-radius:      6px;

    /* Balance & Equity money-lines cards — fall back to event-card styling so
       they match the rest of the SPA out of the box. */
    --pm-money-card-bg:               var(--pm-card-bg);
    --pm-money-card-border-color:     var(--pm-card-border-color);
    --pm-money-card-border-width:     var(--pm-card-border-width);
    --pm-money-card-border-radius:    var(--pm-card-border-radius);
    --pm-money-label-color:           var(--pm-text-secondary);
    --pm-money-value-color:           var(--pm-text);
}

/* Balance + Equity cards (left side of the toolbar) */
.pm-spa-money-card {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 12px; min-width: 110px;
    background: var(--pm-money-card-bg);
    border: var(--pm-money-card-border-width) solid var(--pm-money-card-border-color);
    border-radius: var(--pm-money-card-border-radius);
}
.pm-spa-money-label {
    font-size: 11px; line-height: 1.2;
    color: var(--pm-money-label-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pm-spa-money-value {
    font-size: 16px; font-weight: 600; line-height: 1.4;
    color: var(--pm-money-value-color);
    white-space: nowrap;
}
.pm-spa-active-positions-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 12px;
    background: var(--pm-active-positions-btn-bg);
    color: var(--pm-active-positions-btn-text);
    border: var(--pm-active-positions-btn-border-width) solid var(--pm-active-positions-btn-border-color);
    border-radius: var(--pm-active-positions-btn-border-radius);
    cursor: pointer; font-size: 13px; font-weight: 500;
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pm-spa-active-positions-btn:hover {
    background: var(--pm-active-positions-btn-bg-hover);
    color: var(--pm-active-positions-btn-text-hover);
    border-color: var(--pm-active-positions-btn-border-color-hover);
}

/* Close-position confirmation modal (shown only when not iframed; the iframe
   path posts to the parent, which renders the modal in its own viewport). */
.pm-spa-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: flex-start; justify-content: center;
    z-index: 9999; overflow-y: auto; padding: 32px 16px;
}
.pm-spa-modal-backdrop.is-open { display: flex; }
.pm-spa-modal {
    background: var(--pm-bg);
    color: var(--pm-text);
    border: 1px solid var(--pm-border);
    border-radius: 8px;
    width: 100%; max-width: 420px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: pm-toast-in 180ms ease-out;
}
.pm-spa-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    font-weight: 600; font-size: 16px;
    border-bottom: 1px solid var(--pm-border);
}
.pm-spa-modal-close {
    background: transparent; border: 0; cursor: pointer;
    color: var(--pm-text-secondary); font-size: 16px; line-height: 1;
}
.pm-spa-modal-close:hover { color: var(--pm-text); }
.pm-spa-modal-body { padding: 20px; }
.pm-spa-modal-text { text-align: center; margin: 0 0 18px; }
.pm-spa-modal-details {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    background: var(--pm-surface-2, rgba(0,0,0,0.03));
    font-size: 13px;
    line-height: 1.5;
}
.pm-spa-modal-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.pm-spa-modal-detail-row:not(:last-child) {
    border-bottom: 1px dashed var(--pm-border);
}
.pm-spa-modal-detail-row dt { color: var(--pm-text-secondary, #666); margin: 0; font-weight: 500; }
.pm-spa-modal-detail-row dd { color: var(--pm-text, inherit); margin: 0; font-weight: 600; }
.pm-spa-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
}
.pm-spa-modal-btn {
    padding: 8px 16px; border-radius: 6px;
    border: 1px solid transparent;
    font-weight: 500; font-size: 13px; cursor: pointer;
    transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}
.pm-spa-modal-btn-cancel {
    background: transparent;
    color: var(--pm-text-secondary);
    border-color: var(--pm-border);
}
.pm-spa-modal-btn-cancel:hover { color: var(--pm-text); }
.pm-spa-modal-btn-danger {
    background: var(--pm-no);
    color: #ffffff;
}
.pm-spa-modal-btn-danger:hover:not(:disabled) { opacity: 0.9; }
.pm-spa-modal-btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }
.pm-spa-modal-btn-primary {
    background: var(--pm-yes);
    color: #ffffff;
}
.pm-spa-modal-btn-primary:hover:not(:disabled) { opacity: 0.9; }

/* Active Positions panel */
.pm-spa-positions {
    margin-top: 12px;
    background: var(--pm-card-bg, var(--pm-surface));
    border: var(--pm-card-border-width, 1px) solid var(--pm-card-border-color, var(--pm-border));
    border-radius: var(--pm-card-border-radius, 8px);
    padding: 16px;
    color: var(--pm-text);
}
.pm-spa-positions-table { width: 100%; }
.pm-spa-positions-reason { color: var(--pm-text-secondary); }

/* ---------------------------------------------------------------------------
 | Section-scoped CSS variables. Each falls back to the global --pm-* default
 | so existing styling is preserved until the Elementor control overrides it.
 * -------------------------------------------------------------------------- */
.fpfx-prediction-spa {
    /* Categories strip (top nav bottom border) */
    --pm-categories-border-color: var(--pm-border);
    --pm-categories-border-width: 1px;
    --pm-categories-border-style: solid;
    --pm-categories-margin-bottom: 12px;

    /* Search input */
    --pm-search-bg: var(--pm-bg);
    --pm-search-text: var(--pm-text);
    --pm-search-placeholder: var(--pm-text-secondary);
    --pm-search-border-color: var(--pm-border);
    --pm-search-border-radius: 6px;
    --pm-search-focus-border-color: var(--pm-primary);
    --pm-search-icon-color: var(--pm-text-secondary);

    /* Tags strip (sub-tags pills + scroll arrows) */
    --pm-tags-text: var(--pm-text-secondary);
    --pm-tags-text-hover: var(--pm-text);
    --pm-tags-active-text: var(--pm-text);
    --pm-tags-active-bg: var(--pm-surface);
    --pm-tags-active-border-color: var(--pm-border);
    --pm-tags-pill-radius: 6px;
    --pm-tags-arrow-color: var(--pm-text-secondary);
    --pm-tags-arrow-hover-color: var(--pm-text);

    /* Load-more / Show more markets button */
    --pm-loadmore-text: var(--pm-text-secondary);
    --pm-loadmore-text-hover: var(--pm-text);
    --pm-loadmore-bg: transparent;
    --pm-loadmore-bg-hover: transparent;
    --pm-loadmore-border-color: transparent;
    --pm-loadmore-border-color-hover: transparent;
    --pm-loadmore-radius: 6px;
    --pm-loadmore-padding-y: 6px;
    --pm-loadmore-padding-x: 12px;

    /* Event card */
    --pm-card-bg: var(--pm-surface);
    --pm-card-border-color: var(--pm-border);
    --pm-card-border-width: 1px;
    --pm-card-border-radius: 6px;
    --pm-card-hover-border-color: var(--pm-card-border-color);
    --pm-card-title-color: var(--pm-text);
    --pm-card-content-color: var(--pm-text-secondary);
}

/* Categories strip border */
.pm-spa-categories {
    border-top: 0; border-left: 0; border-right: 0;
    border-bottom-color: var(--pm-categories-border-color);
    border-bottom-width: var(--pm-categories-border-width);
    border-bottom-style: var(--pm-categories-border-style);
    margin-bottom: var(--pm-categories-margin-bottom);
}

/* Search input */
.pm-spa-search-input {
    width: 100%;
    padding: 8px 32px 8px 32px;
    font-size: 13px;
    background: var(--pm-search-bg);
    color: var(--pm-search-text);
    border: 1px solid var(--pm-search-border-color);
    border-radius: var(--pm-search-border-radius);
    outline: none;
    transition: border-color 150ms ease;
}
.pm-spa-search-input:focus { border-color: var(--pm-search-focus-border-color); }
.pm-spa-search-input::placeholder { color: var(--pm-search-placeholder); opacity: 1; }
.pm-spa-search-icon, .pm-spa-search-clear { color: var(--pm-search-icon-color); }
.pm-spa-search-clear:hover { color: var(--pm-search-text); }
/* Suppress the native Chrome/Safari search-cancel button (we render our own
   .pm-spa-search-clear ✕ icon, the native one duplicates it on hover). */
.pm-spa-search-input::-webkit-search-cancel-button,
.pm-spa-search-input::-webkit-search-decoration,
.pm-spa-search-input::-webkit-search-results-button,
.pm-spa-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
/* Edge / Internet Explorer counterpart. */
.pm-spa-search-input::-ms-clear,
.pm-spa-search-input::-ms-reveal {
    display: none;
    width: 0; height: 0;
}

/* Tags strip */
.pm-spa-tag-pill {
    color: var(--pm-tags-text);
    border: 1px solid transparent;
    border-radius: var(--pm-tags-pill-radius);
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.pm-spa-tag-pill:hover { color: var(--pm-tags-text-hover); }
.pm-spa-tag-pill.is-active {
    color: var(--pm-tags-active-text);
    background: var(--pm-tags-active-bg);
    border-color: var(--pm-tags-active-border-color);
    font-weight: 700;
}
.pm-spa-tags-arrow { color: var(--pm-tags-arrow-color); transition: color 150ms ease; }
.pm-spa-tags-arrow:hover { color: var(--pm-tags-arrow-hover-color); }

/* Load more button */
.pm-spa-loadmore {
    color: var(--pm-loadmore-text);
    background: var(--pm-loadmore-bg);
    border: 1px solid var(--pm-loadmore-border-color);
    border-radius: var(--pm-loadmore-radius);
    padding: var(--pm-loadmore-padding-y) var(--pm-loadmore-padding-x);
    font-size: 13px; cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.pm-spa-loadmore:hover {
    color: var(--pm-loadmore-text-hover);
    background: var(--pm-loadmore-bg-hover);
    border-color: var(--pm-loadmore-border-color-hover);
}

/* Event card */
.pm-spa-card {
    background: var(--pm-card-bg);
    border: var(--pm-card-border-width) solid var(--pm-card-border-color);
    border-radius: var(--pm-card-border-radius);
    transition: border-color 150ms ease, transform 150ms ease;
}
.pm-spa-card:hover { border-color: var(--pm-card-hover-border-color); }
.pm-spa-card-title { color: var(--pm-card-title-color); }
.pm-spa-card-content { color: var(--pm-card-content-color); }

/* ---------------------------------------------------------------------------
 | Filter button + dropdown panels
 * -------------------------------------------------------------------------- */
.fpfx-prediction-spa {
    /* Sliders icon button */
    --pm-filter-btn-bg:               transparent;
    --pm-filter-btn-bg-hover:         var(--pm-surface);
    --pm-filter-btn-text:             var(--pm-text-secondary);
    --pm-filter-btn-text-hover:       var(--pm-primary);
    --pm-filter-btn-border-color:     var(--pm-border);
    --pm-filter-btn-border-color-hover: var(--pm-primary);
    --pm-filter-btn-radius:           6px;

    /* Dropdown buttons (sort + frequency) */
    --pm-dropdown-btn-bg:               transparent;
    --pm-dropdown-btn-bg-hover:         var(--pm-surface);
    --pm-dropdown-btn-text:             var(--pm-primary);
    --pm-dropdown-btn-text-hover:       var(--pm-primary);
    --pm-dropdown-btn-border-color:     var(--pm-primary);
    --pm-dropdown-btn-radius:           9999px;

    /* Dropdown list */
    --pm-dropdown-list-bg:           var(--pm-bg);
    --pm-dropdown-list-border-color: var(--pm-border);
    --pm-dropdown-list-radius:       6px;
    --pm-dropdown-item-text:         var(--pm-text);
    --pm-dropdown-item-text-hover:   var(--pm-primary);
    --pm-dropdown-item-bg-hover:     var(--pm-surface);
    --pm-dropdown-active-dot:        var(--pm-primary);
}

/* Filter (sliders) button */
.pm-spa-filter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; min-width: 38px; padding: 0 10px;
    background: var(--pm-filter-btn-bg);
    color: var(--pm-filter-btn-text);
    border: 1px solid var(--pm-filter-btn-border-color);
    border-radius: var(--pm-filter-btn-radius);
    cursor: pointer; font-size: 14px;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pm-spa-filter-btn:hover {
    background: var(--pm-filter-btn-bg-hover);
    color: var(--pm-filter-btn-text-hover);
    border-color: var(--pm-filter-btn-border-color-hover);
}
.pm-spa-filter-icon { transition: transform 300ms ease; display: inline-block; }
.pm-spa-filter-btn.is-open .pm-spa-filter-icon { transform: scaleX(-1); }

/* Dropdown wrapper */
.pm-spa-dropdown { position: relative; display: inline-block; }
.pm-spa-dropdown-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 13px; font-weight: 500;
    background: var(--pm-dropdown-btn-bg);
    color: var(--pm-dropdown-btn-text);
    border: 1px solid var(--pm-dropdown-btn-border-color);
    border-radius: var(--pm-dropdown-btn-radius);
    cursor: pointer; white-space: nowrap;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pm-spa-dropdown-toggle:hover {
    background: var(--pm-dropdown-btn-bg-hover);
    color: var(--pm-dropdown-btn-text-hover);
}
.pm-spa-dropdown-caret { transition: transform 200ms ease; font-size: 12px; }
.pm-spa-dropdown-toggle[aria-expanded="true"] .pm-spa-dropdown-caret,
.pm-spa-dropdown:has([data-pm-dropdown-list]) .pm-spa-dropdown-caret { transform: rotate(180deg); }

/* Dropdown list */
.pm-spa-dropdown-list {
    position: absolute; top: calc(100% + 4px); left: 0;
    background: var(--pm-dropdown-list-bg);
    border: 1px solid var(--pm-dropdown-list-border-color);
    border-radius: var(--pm-dropdown-list-radius);
    list-style: none; padding: 4px 0; margin: 0;
    min-width: 180px; z-index: 50;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    white-space: nowrap;
}
.pm-spa-dropdown-list li { list-style: none; margin: 0; }
.pm-spa-dropdown-list li a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; font-size: 13px; text-decoration: none;
    color: var(--pm-dropdown-item-text);
    transition: background 150ms ease, color 150ms ease;
}
.pm-spa-dropdown-list li a:hover {
    background: var(--pm-dropdown-item-bg-hover);
    color: var(--pm-dropdown-item-text-hover);
}
.pm-spa-dropdown-item-label { flex: 1; }
.pm-spa-dropdown-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--pm-dropdown-active-dot);
    margin-left: 4px;
}

/* Events grid + cards are pure Tailwind utilities (see _eventCardHtml). The
   card background, border and text colors flow through CSS variables so the
   Elementor color controls keep working. */
.pm-prediction-event-list { padding: 8px 0; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Buttons */
.pm-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; border: 1px solid transparent; background: transparent; color: var(--pm-text); transition: background 120ms ease; }
.pm-btn-yes { background: color-mix(in srgb, var(--pm-yes) 15%, transparent); color: var(--pm-yes); }
.pm-btn-yes:hover, .pm-btn-yes.is-active { background: var(--pm-yes); color: #fff; }
.pm-btn-no  { background: color-mix(in srgb, var(--pm-no) 15%, transparent); color: var(--pm-no); }
.pm-btn-no:hover, .pm-btn-no.is-active { background: var(--pm-no); color: #fff; }
.pm-btn-primary { background: var(--pm-primary); color: #fff; padding: 10px 18px; }
.pm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.pm-btn-ghost { color: var(--pm-text-secondary); }

/* Event detail */
.pm-spa-back { background: none; border: 0; cursor: pointer; color: var(--pm-text-secondary); padding: 8px 0; font-size: 13px; }
.pm-spa-back:hover { color: var(--pm-text); }
.pm-spa-detail { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 12px 0; }
@media (min-width: 1024px) { .pm-spa-detail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.pm-spa-detail-main { min-width: 0; }
.pm-spa-detail-side { min-width: 280px; }
.pm-spa-event-title { font-size: 18px; font-weight: 700; margin: 0 0 4px 0; }
.pm-spa-event-meta { font-size: 12px; color: var(--pm-text-secondary); margin-bottom: 12px; }

/* Chart card — wraps the event header, the chart itself, and the meta footer
   in one panel that uses the same theming variables as the event cards. */
.pm-spa-chart-card {
    background: var(--pm-card-bg);
    border: var(--pm-card-border-width) solid var(--pm-card-border-color);
    border-radius: var(--pm-card-border-radius);
    padding: 16px 20px;
}
.pm-spa-chart {
    min-height: 240px;
    margin: 8px 0;
    background: transparent;
    padding: 0;
    border: 0;
}
.pm-spa-event-meta { color: var(--pm-card-content-color); }

/* Markets list */
.fpfx-prediction-spa {
    --pm-market-row-bg:                 var(--pm-surface);
    --pm-market-row-bg-hover:           var(--pm-surface);
    --pm-market-row-border-color:       var(--pm-border);
    --pm-market-row-border-color-hover: var(--pm-primary);
    --pm-market-row-border-width:       1px;
    --pm-market-row-border-radius:      8px;
}
.pm-spa-markets { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pm-spa-market-row {
    background: var(--pm-market-row-bg);
    border: var(--pm-market-row-border-width) solid var(--pm-market-row-border-color);
    border-radius: var(--pm-market-row-border-radius);
    transition: background 150ms ease, border-color 150ms ease;
}
.pm-spa-market-row:hover,
.pm-spa-market-row.is-active {
    background: var(--pm-market-row-bg-hover);
    border-color: var(--pm-market-row-border-color-hover);
}
.pm-spa-market-summary { cursor: pointer; }
/* Resolved markets — non-interactive variant of a market row. Greyed out so
   it's clearly visually distinct from live tradeable rows above. */
.pm-spa-market-row-resolved { opacity: 0.7; }
.pm-spa-market-row-resolved:hover { background: var(--pm-market-row-bg); border-color: var(--pm-market-row-border-color); }
.pm-spa-market-row-resolved .pm-spa-market-summary { cursor: default; }
.pm-spa-resolved-section { margin-top: 16px; }
.pm-spa-resolved-section .pm-spa-resolved-markets {
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.pm-spa-resolved-section.is-collapsed .pm-spa-resolved-markets { display: none; }
.pm-spa-resolved-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; padding: 6px 0;
    color: var(--pm-text-secondary);
    font-size: 13px; font-weight: 500; cursor: pointer;
}
.pm-spa-resolved-toggle:hover { color: var(--pm-text); }
.pm-spa-resolved-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pm-spa-resolved-badge-yes { background-color: rgba(34, 197, 94, 0.15); color: rgb(22 163 74); }
.pm-spa-resolved-badge-no  { background-color: rgba(239, 68, 68, 0.15); color: rgb(220 38 38); }

/* Rules / Market Context — wrapped in the same card chrome as the chart card
   and order panel so the detail screen looks like a stack of consistent
   cards. Tabs reuse .pm-spa-market-tab styling for visual consistency with
   the per-market Order Book / Graph tabs. Body uses pre-line so literal
   "\n" newlines in the upstream description render as line breaks. */
.pm-spa-event-info {
    margin-top: 24px;
    background: var(--pm-card-bg);
    border: var(--pm-card-border-width) solid var(--pm-card-border-color);
    border-radius: var(--pm-card-border-radius);
    padding: 16px 20px;
}
.pm-spa-event-info-tabs { margin-top: 0; }
.pm-spa-event-info-body {
    padding: 16px 0 0;
    color: var(--pm-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}
/* Collapse is closed by default. The .is-expanded class is toggled per-row when
   the user clicks the summary; .is-active only colors the row (drives the
   order panel + outcome highlight). They're independent on purpose so the first
   market can render highlighted but with the book/graph closed. */
.pm-spa-market-collapse { display: none; padding: 0 12px 12px; }
.pm-spa-market-row.is-expanded .pm-spa-market-collapse { display: block; }

/* Selected YES/NO state on the market-list buttons. Stays painted in the solid
   color even when the cursor isn't over them, so the row stays in sync with
   the order panel's outcome selection. */
.pm-spa-market-row .pm-yes-btn.is-active,
.pm-spa-market-row .pm-yes-btn.is-active:hover {
    background-color: rgb(22 163 74); /* green-600 */
    color: #ffffff;
}
.pm-spa-market-row .pm-no-btn.is-active,
.pm-spa-market-row .pm-no-btn.is-active:hover {
    background-color: rgb(220 38 38); /* red-600 */
    color: #ffffff;
}

/* Market expansion: tabs */
.pm-spa-market-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--pm-border); margin-top: 8px; height: 34px; }
.pm-spa-market-tab {
    position: relative;
    padding: 12px 20px; font-size: 14px; font-weight: 500;
    color: var(--pm-text-secondary);
    text-decoration: none; cursor: pointer;
    transition: color 200ms ease;
}
.pm-spa-market-tab:hover { color: var(--pm-text); }
.pm-spa-market-tab.is-active { color: var(--pm-primary); }
.pm-spa-market-tab.is-active::after {
    content: ''; position: absolute;
    bottom: -1px; left: 0; right: 0; height: 2px;
    background: var(--pm-primary);
}

/* Order book column header inside the market expansion */
.pm-spa-book-header {
    display: grid; grid-template-columns: 40% 20% 20% 20%;
    align-items: center;
    border-bottom: 1px solid var(--pm-border);
    height: 32px; font-size: 11px; text-transform: uppercase;
    color: var(--pm-text-secondary);
}
.pm-spa-book-header > div { padding: 0 4px; }
.pm-spa-book-header-trade { justify-self: start; }
.pm-spa-book-header-c { display: flex; justify-content: center; }

/* Chart loader — animated pulse + faint baseline so the area doesn't read blank */
.pm-spa-chart-loading {
    position: relative; min-height: 240px; padding: 12px 0;
    overflow: hidden;
}
.pm-spa-chart-loading::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--pm-surface) 0%, color-mix(in srgb, var(--pm-surface) 60%, var(--pm-border)) 50%, var(--pm-surface) 100%);
    background-size: 200% 100%;
    animation: pm-shimmer 1.4s linear infinite;
    border-radius: 6px; opacity: 0.5;
}
.pm-spa-chart-loading-line {
    position: absolute; left: 0; right: 0;
    height: 1px; background: var(--pm-border);
    border-top: 1px dashed var(--pm-border);
}
.pm-spa-chart-loading-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--pm-text-secondary); font-size: 12px;
    z-index: 2;
}

/* Order book ladder (rendered by jQuery innerHTML — no Alpine reactivity) */
.pm-spa-book { display: grid; grid-template-rows: 128px auto 128px; border-radius: 6px; overflow: hidden; }
.pm-spa-book-asks, .pm-spa-book-bids { overflow-y: auto; }
.pm-spa-book-asks::-webkit-scrollbar, .pm-spa-book-bids::-webkit-scrollbar { width: 0; }
.pm-spa-book-row { display: grid; grid-template-columns: 40% 20% 20% 20%; align-items: center; height: 32px; position: relative; font-size: 12px; }
.pm-spa-book-bar { height: 100%; opacity: 0.15; }
.pm-spa-book-bar-ask { background: var(--pm-no); }
.pm-spa-book-bar-bid { background: var(--pm-yes); }
.pm-spa-book-cell { display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.pm-spa-book-cell-ask { color: var(--pm-no); font-weight: 600; }
.pm-spa-book-cell-bid { color: var(--pm-yes); font-weight: 600; }
.pm-spa-book-middle { display: grid; grid-template-columns: 40% 20% 20% 20%; align-items: center; height: 32px; padding: 4px 12px; border-top: 1px solid var(--pm-border); border-bottom: 1px solid var(--pm-border); color: var(--pm-text-secondary); font-size: 12px; }

/* Order panel */
/* Order panel — themed via its own variables. */
.fpfx-prediction-spa {
    --pm-order-bg:                 var(--pm-surface);
    --pm-order-border-color:       var(--pm-border);
    --pm-order-border-width:       1px;
    --pm-order-border-radius:      8px;
    --pm-order-price-color:        var(--pm-yes);
    --pm-trade-btn-bg:             #c19a6b;
    --pm-trade-btn-bg-hover:       #a8835a;
    --pm-trade-btn-text:           #ffffff;
    --pm-trade-btn-radius:         6px;
}
.pm-spa-order {
    background: var(--pm-order-bg);
    border: var(--pm-order-border-width) solid var(--pm-order-border-color);
    border-radius: var(--pm-order-border-radius);
    padding: 16px;
    position: sticky;
    top: 12px;
}

.pm-spa-order-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--pm-border); height: 45px; }
.pm-spa-order-tab {
    padding: 10px 12px; text-align: center; font-weight: 600; cursor: pointer;
    color: var(--pm-text-secondary);
    background: transparent; border: 0; border-bottom: 1px solid transparent;
    transition: color 200ms ease, border-color 200ms ease;
}
.pm-spa-order-tab:hover { color: var(--pm-text); }
.pm-spa-order-tab.is-active { color: var(--pm-primary); border-bottom-color: var(--pm-primary); }

.pm-spa-order-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-spa-order-outcomes .pm-btn { height: 48px; font-weight: 700; }

/* Amount / Shares input — borderless, big, right-aligned. */
.pm-spa-order-amount {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: 0;
    color: var(--pm-card-title-color, var(--pm-text));
    text-align: right; font-size: 28px; font-weight: 300;
    padding: 4px 0;
}
.pm-spa-order-amount::placeholder { color: var(--pm-text-secondary); opacity: 0.6; }

/* Quick increment / percentage pills under the amount. */
.pm-spa-order-pill {
    padding: 6px 14px; border-radius: 9999px;
    background: transparent; color: var(--pm-text-secondary);
    border: 1px solid var(--pm-border); font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pm-spa-order-pill:hover {
    background: var(--pm-surface);
    color: var(--pm-text);
    border-color: var(--pm-primary);
}

/* "To win" / "You'll receive" payout block. The big amount uses --pm-order-price-color. */
.pm-spa-order-payout-value {
    color: var(--pm-order-price-color);
    font-size: 30px; font-weight: 300;
}

/* Mobile full-screen order panel: when the user clicks YES/NO from the market
   list (or arrives via a YES/NO card click), the controller flips
   data-pm-mobile-order-open="1" on the SPA root. Below the lg breakpoint we
   hide the detail-main column so the order panel takes over the viewport, and
   reveal the close icon in the order header so the user can return to the
   list. Above lg the layout stays side-by-side as before. */
.pm-spa-order-mobile-close {
    display: none; /* hidden until the swap is active on mobile */
    background: transparent; border: 0; cursor: pointer;
    color: var(--pm-text-secondary);
    padding: 4px 6px;
    line-height: 1;
}
.pm-spa-order-mobile-close:hover { color: var(--pm-text); }

@media (max-width: 1023px) {
    .fpfx-prediction-spa[data-pm-mobile-order-open="1"] .pm-spa-detail-main {
        display: none;
    }
    .fpfx-prediction-spa[data-pm-mobile-order-open="1"] .pm-spa-order-mobile-close {
        display: inline-flex;
    }
    /* Reset the order panel's sticky offset while swapped — the panel is the
       only thing visible, no need to keep it pinned. */
    .fpfx-prediction-spa[data-pm-mobile-order-open="1"] .pm-spa-order {
        position: static;
    }
}

/* Trade button. */
.pm-spa-trade-btn {
    display: block; width: 100%; margin-top: 16px;
    padding: 14px; border: 0; cursor: pointer;
    background: var(--pm-trade-btn-bg);
    color: var(--pm-trade-btn-text);
    border-radius: var(--pm-trade-btn-radius);
    font-weight: 600; font-size: 18px;
    transition: background 150ms ease, opacity 150ms ease;
}
.pm-spa-trade-btn:hover:not(:disabled) { background: var(--pm-trade-btn-bg-hover); }
.pm-spa-trade-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Order-panel toasts (success / error) — auto-dismissed by timers in JS, also
   manually dismissable via the close icon. */
.pm-spa-toast {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-radius: 6px;
    margin-top: 10px; font-size: 13px; line-height: 1.4;
    animation: pm-toast-in 200ms ease-out;
}
.pm-spa-toast-text { flex: 1; }
.pm-spa-toast-close {
    background: transparent; border: 0; cursor: pointer;
    padding: 0 4px; opacity: 0.85; line-height: 1;
    color: inherit;
}
.pm-spa-toast-close:hover { opacity: 1; }
.pm-spa-toast-success {
    color: #d0d0d0; /* green-700 */
    background-color: rgba(34, 197, 94, 0.12); /* green-500/12 */
}
.pm-spa-toast-error {
    color: #d0d0d0; /* red-700 */
    background-color: rgba(239, 68, 68, 0.12); /* red-500/12 */
}
@keyframes pm-toast-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Modal (parent-side delegated when iframed) */
.pm-spa-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.pm-spa-modal { background: var(--pm-bg); border-radius: 8px; padding: 20px; min-width: 280px; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.pm-spa-modal-title { font-weight: 700; margin-bottom: 8px; }
.pm-spa-modal-body { color: var(--pm-text-secondary); margin-bottom: 16px; }
.pm-spa-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Loading rows */
.pm-spa-skeleton { background: linear-gradient(90deg, var(--pm-surface) 0%, color-mix(in srgb, var(--pm-surface) 60%, var(--pm-border)) 50%, var(--pm-surface) 100%); background-size: 200% 100%; animation: pm-shimmer 1.4s linear infinite; border-radius: 4px; }
@keyframes pm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty / error */
.pm-spa-empty { text-align: center; color: var(--pm-text-secondary); padding: 32px; }