/* ── HOTSPOT DIAGRAM — FRONTEND STYLES ── */

/* Wrapper */
.hsdiag-wrap {
    max-width: 900px;
    margin: 0 auto;
    font-family: inherit;
    box-sizing: border-box;
}
.hsdiag-wrap *, .hsdiag-wrap *::before, .hsdiag-wrap *::after {
    box-sizing: border-box;
}

/* ── TAB SWITCHER ── */
.hsdiag-switcher {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.hsdiag-tab-btn {
    padding: 10px 26px;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    background: transparent;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
}
.hsdiag-tab-btn:focus { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── BADGE (hidden) ── */
.hsdiag-badge-wrap { display: none; }

/* ── PANELS ── */
.hsdiag-panel { display: none; }
.hsdiag-panel.active { display: block; }

/* ── IMAGE WRAP ── */
.hsdiag-img-wrap {
    position: relative;
    display: block;
    -webkit-user-select: none;
}
.hsdiag-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* No image — admin only */
.hsdiag-no-image {
    padding: 36px 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 2px dashed #ddd;
}
.hsdiag-no-image a { color: #537741; }

/* ── HOTSPOTS ──
   --hs-color       = the tab's main colour (green / red etc)
   --hs-color-light = a light tint for the products background
   --hs-color-dark  = a darker shade for text inside the products box
   All three are output as inline style on .hsdiag-img-wrap by the PHP shortcode.
── */
.hsdiag-hotspot {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hs-color, #537741);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translate(-50%, -50%);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.28);
    transition: transform 0.18s;
    z-index: 10;
    min-width: 32px;
    min-height: 32px;
}
.hsdiag-hotspot:hover,
.hsdiag-hotspot:focus {
    transform: translate(-50%, -50%) scale(1.18);
    outline: none;
    z-index: 20;
}
.hsdiag-hotspot:hover .hsdiag-tooltip,
.hsdiag-hotspot:focus .hsdiag-tooltip,
.hsdiag-hotspot.is-open .hsdiag-tooltip {
    opacity: 1;
    pointer-events: auto;
}

/* ── TOOLTIP ── */
.hsdiag-tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px 16px;
    width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s;
    text-align: left;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    color: #333;
    white-space: normal;
}

/* Arrow pointing down (tooltip above pin) */
.hsdiag-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #ddd;
}
.hsdiag-tooltip::before {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
    z-index: 1;
    margin-top: -1px;
}

/* Flip tooltip below when pin is near top edge */
.hsdiag-hotspot.tip-below .hsdiag-tooltip {
    bottom: auto;
    top: calc(100% + 14px);
}
.hsdiag-hotspot.tip-below .hsdiag-tooltip::after {
    top: auto; bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #ddd;
}
.hsdiag-hotspot.tip-below .hsdiag-tooltip::before {
    top: auto; bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #fff;
    margin-top: 0; margin-bottom: -1px;
}

/* Nudge tooltip away from left/right edges */
.hsdiag-hotspot.tip-left .hsdiag-tooltip  { left: 0; transform: none; }
.hsdiag-hotspot.tip-right .hsdiag-tooltip { left: auto; right: 0; transform: none; }

/* ── TOOLTIP CONTENT ── */
.hsdiag-tooltip h4 {
    font-size: 13px;
    font-weight: 700;
    /* Inherits the tab colour: red for BAL FZ, green for others */
    color: var(--hs-color, #537741);
    margin: 0 0 7px;
    line-height: 1.3;
}
.hsdiag-tooltip > p {
    color: #555;
    font-size: 12px;
    margin: 0;
    line-height: 1.6;
}

/* ── PRODUCTS / UPGRADE OPTIONS BOX ──
   Uses CSS variables so the colours match whatever tab is active.
   --hs-color-light : light tint for the background  (e.g. pale red for BAL FZ)
   --hs-color-dark  : dark shade for the text        (e.g. dark red for BAL FZ)
── */
.hsdiag-products {
    margin-top: 9px;
    font-size: 11px;
    background: var(--hs-color-light, #eef3ea);
    color: var(--hs-color-dark, #3d5930);
    padding: 7px 10px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.75;
}
/* The <p><strong>Upgrade options:</strong></p> heading inside products */
.hsdiag-products p {
    color: var(--hs-color-dark, #3d5930);
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.4;
}
.hsdiag-products strong {
    color: var(--hs-color-dark, #3d5930);
}
.hsdiag-products a {
    color: var(--hs-color-dark, #3d5930);
    text-decoration: underline;
}
.hsdiag-products ul,
.hsdiag-products ol {
    margin: 4px 0 0 16px;
    padding: 0;
}
.hsdiag-products li { margin-bottom: 2px; }

/* ── LEGEND ── */
.hsdiag-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-top: 16px;
    font-size: 12px;
    color: #888;
    flex-wrap: wrap;
}
.hsdiag-legend-dot {
    width: 13px; height: 13px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

/* ════════════════════════════════════════
   MOBILE
════════════════════════════════════════ */
@media (max-width: 767px) {
    .hsdiag-tab-btn { padding: 9px 18px; font-size: 13px; }
    .hsdiag-hotspot { width: 28px; height: 28px; font-size: 11px; min-width: 32px; min-height: 32px; }
    .hsdiag-tooltip { width: 190px; font-size: 12px; padding: 10px 12px; }
}
@media (max-width: 480px) {
    .hsdiag-switcher { gap: 6px; }
    .hsdiag-tab-btn { padding: 8px 14px; font-size: 12px; }
    .hsdiag-tooltip { width: 160px; }
}