/* ── Market Comparison Widget (v3 compact rebrand, issue #503) ──────── */
.market-comparison-widget {
    /* Horizontal padding mirrors the inner gutter the parent panel uses
       for its spec rows above (Manufacturer, Registration, Serial No,
       Location, Documentation). Without it the widget content goes
       edge-to-edge against the card border while everything above
       breathes - jarring layout break.
       Top and bottom padding match so the gap above MARKET POSITION
       equals the gap below the last data element (before the Free
       Valuation CTA), which the owner UI walkthrough flagged. */
    padding: 16px 18px 0;
    border-top: 1px solid rgba(90,138,167,.12);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #0E1A2B;
    /* The host (sd-share section on aircraft_details.php) inherits a
       text-transform: uppercase from its parent panel. Body copy and the
       editorial Libre Baskerville serif both read poorly in all-caps, so
       opt the widget out by default and let the few elements that DO want
       uppercase (eyebrow chip, trend chip, position badge) override
       explicitly. */
    text-transform: none;
}
.market-comparison-widget p,
.market-comparison-widget span,
.market-comparison-widget strong {
    text-transform: none;
}
/* Preserve uppercase on the three intentional chip / tag elements that
   the broader reset above would otherwise demote to mixed-case. */
.market-comparison-widget .mcw-eyebrow,
.market-comparison-widget .mcw-trend-label,
.market-comparison-widget .mcw-badge {
    text-transform: uppercase !important;
}

/* Row that pairs the eyebrow chip and the position badge side-by-side
   so they read as a single "Market position: 9.4%" unit instead of
   two stacked pills. */
.mcw-pill-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* Header uses the v3 chip pattern (dot + uppercase) instead of icon + heading */
.mcw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(40, 67, 167, 0.07);
    border: 1px solid rgba(40, 67, 167, 0.14);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2843A7;
}
.mcw-eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    background: #2843A7;
    border-radius: 50%;
}

/* Position badge: subtle v3 palette, no traffic-light colors. Compact by
   default — shows only the trend icon + percentage. The full
   "below / above / at market average" detail slides out on hover or
   keyboard focus so curious readers can confirm direction without the
   verbose tag dominating the sidebar. Full label still lives in
   aria-label so screen readers read it directly. */
.mcw-position-detail {
    font-size: 12px !important;
    line-height: 1.55;
    color: #3D5166 !important;
    margin: 0 0 14px !important;
    font-weight: 500;
}
.mcw-position-detail strong {
    color: #0E1A2B;
    font-weight: 700;
}

/* Position the badge so its hover tooltip anchors off the badge itself */
.mcw-badge {
    position: relative;
}
.mcw-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: default;
    outline: none;
    transition: box-shadow .2s ease;
}
.mcw-badge:focus-visible {
    box-shadow: 0 0 0 3px rgba(40, 67, 167, .15);
}
.mcw-badge-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
/* The detail label is rendered as an absolutely-positioned tooltip
   beneath the badge so its width does NOT push the badge out of the
   cursor's path on hover (which previously caused a hover -> resize ->
   un-hover -> collapse -> re-hover flicker loop). pointer-events: none
   keeps the tooltip from intercepting the cursor while it's visible.
   Background uses the v3 royal navy brand accent so the tooltip reads
   as part of the same design system as the rest of the widget. */
.mcw-badge-detail {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10;
    padding: 6px 11px;
    background: #2843A7;
    color: #ffffff;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 6px 16px rgba(40, 67, 167, .28);
}
.mcw-badge-detail::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: #2843A7;
    transform: rotate(45deg);
    border-radius: 1px;
}
.mcw-badge:hover .mcw-badge-detail,
.mcw-badge:focus .mcw-badge-detail {
    opacity: 1;
    transform: translateY(0);
}
.mcw-badge-below {
    background: rgba(22, 122, 88, .08);
    color: #166e51;
    border: 1px solid rgba(22, 122, 88, .18);
}
.mcw-badge-at {
    background: rgba(90, 138, 167, .10);
    color: #3D6B85;
    border: 1px solid rgba(90, 138, 167, .20);
}
.mcw-badge-above {
    background: rgba(176, 86, 30, .08);
    color: #b0561e;
    border: 1px solid rgba(176, 86, 30, .18);
}

/* Range bar: flat subtle royal tint, prominent markers carry the meaning */
.mcw-range { margin: 0 0 12px; }
.mcw-range-bar {
    position: relative;
    height: 6px;
    border-radius: 100px;
    background: linear-gradient(90deg, #EEF4F8 0%, #D8E3EF 50%, #EEF4F8 100%);
    margin-bottom: 8px;
}
.mcw-marker {
    position: absolute;
    transform: translateX(-50%);
}
.mcw-marker-median {
    top: -3px;
    width: 2px;
    height: 12px;
    background: #5A8AA7;
    border-radius: 2px;
    opacity: .6;
}
.mcw-marker-price {
    top: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2843A7;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(14, 26, 43, .25);
}
.mcw-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    color: #5F7F91;
    letter-spacing: .02em;
}
.mcw-range-labels strong {
    color: #0E1A2B;
    font-weight: 700;
}

/* Compact inline availability line (was big boxed callout) */
.mcw-availability {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    color: #3D5166;
    font-weight: 500;
}
.mcw-availability strong {
    color: #0E1A2B;
    font-weight: 700;
}
.mcw-availability::before {
    content: "";
    flex: 0 0 4px;
    height: 4px;
    background: #5A8AA7;
    border-radius: 50%;
    opacity: .7;
}

/* Trend section: chip-style label + tighter chart */
.mcw-trend { margin-top: 14px; }
.mcw-trend-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #5F7F91 !important;
    margin: 0 0 6px !important;
}
.mcw-trend-label::before {
    content: "";
    width: 4px;
    height: 4px;
    background: #5A8AA7;
    border-radius: 50%;
}
.mcw-trend canvas {
    display: block;
    width: 100%;
    height: 44px;
}

/* Limited data note - zero bottom margin so the gap above the Free
   Valuation row matches the gap above the eyebrow chip. */
.mcw-limited {
    font-size: 11px;
    font-style: italic;
    color: #5F7F91;
    margin: 0;
}