/**
 * Scoped style isolation for HCVC tools.
 * Loaded after theme and page-builder CSS so admin/plugin settings win.
 */

.hcvc-plugin-root,
.hcvc-plugin-root *,
.hcvc-plugin-root *::before,
.hcvc-plugin-root *::after {
    box-sizing: border-box;
}

.hcvc-plugin-root {
    isolation: isolate;
    position: relative;
    z-index: 1;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Typography – block theme / Elementor global styles */
.hcvc-plugin-root,
.hcvc-plugin-root p,
.hcvc-plugin-root label,
.hcvc-plugin-root span,
.hcvc-plugin-root div,
.hcvc-plugin-root button,
.hcvc-plugin-root input,
.hcvc-plugin-root select {
    font-family: var(--hcvc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
}

.hcvc-plugin-root h1,
.hcvc-plugin-root h2,
.hcvc-plugin-root h3,
.hcvc-plugin-root h4 {
    font-family: inherit !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* Keep Dashicons glyph font from being replaced by global font overrides */
.hcvc-plugin-root .dashicons,
.hcvc-plugin-root [class^="dashicons"],
.hcvc-plugin-root [class*=" dashicons"] {
    font-family: dashicons !important;
    font-style: normal !important;
    font-weight: normal !important;
    speak: none;
}

.hcvc-plugin-root a {
    text-decoration: none;
}

/* Buttons – Astra / Elementor often set min-height, padding, and gradients */
.hcvc-plugin-root button {
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none;
    min-height: unset !important;
    max-width: none !important;
    width: auto;
    height: auto;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
}

.hcvc-plugin-root button:focus,
.hcvc-plugin-root button:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

/* Form controls */
.hcvc-plugin-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.hcvc-plugin-root select,
.hcvc-plugin-root textarea {
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    min-height: unset !important;
    max-width: 100% !important;
    width: auto;
    height: auto;
    margin: 0;
    box-shadow: none;
}

.hcvc-plugin-root input[type="range"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    min-height: unset !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.hcvc-plugin-root input[type="color"] {
    padding: 0 !important;
    border: none !important;
    min-height: unset !important;
    width: auto !important;
    height: auto !important;
}

/* Layout shells – re-assert flex after theme overrides */
#hcvc-container.hcvc-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}

#hcvc-container .hcvc-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

#hcvc-container .hcvc-sidebar {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
}

#hcvc-container .hcvc-chart-viewport {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
}

#hcvc-container .hcvc-chart-container {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    width: auto !important;
    max-width: none !important;
}

#hcvc-container .hcvc-people-layer {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

#hcvc-container .hcvc-toolbar,
#hcvc-container .hcvc-toolbar-left,
#hcvc-container .hcvc-toolbar-right,
#hcvc-container .hcvc-zoom-control {
    display: flex !important;
    flex-wrap: nowrap !important;
}

#hcvc-container .hcvc-tab-content.active {
    display: flex !important;
    flex-direction: column !important;
}

@media (max-width: 900px) {
    #hcvc-container.hcvc-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #hcvc-container.hcvc-container .hcvc-sidebar,
    #hcvc-container.hcvc-container .hcvc-main {
        width: 100% !important;
        max-width: 100% !important;
    }

    #hcvc-container.hcvc-container .hcvc-main {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        height: var(--hcvc-mobile-height, 700px) !important;
        min-height: var(--hcvc-mobile-height, 700px) !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: hidden !important;
    }

    #hcvc-container.hcvc-container .hcvc-chart-viewport {
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 320px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

#hcvc-container .hcvc-avatar-grid {
    display: grid !important;
}

#hcvc-container .hcvc-gender-toggle,
#hcvc-container .hcvc-unit-toggle {
    display: flex !important;
}

/* Avatars / SVG – common theme rules break height scaling */
#hcvc-container .hcvc-person {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    position: relative !important;
}

#hcvc-container .hcvc-person-figure {
    display: block !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
}

#hcvc-container .hcvc-person-figure svg {
    display: block !important;
    flex: none !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

#hcvc-container img,
#hcvc-container svg {
    vertical-align: middle;
}

/* Elementor widget wrapper sometimes constrains children */
.elementor-widget .hcvc-plugin-root,
.elementor-element .hcvc-plugin-root {
    width: 100% !important;
    max-width: 100% !important;
}

.elementor-widget .hcvc-plugin-root .hcvc-person,
.elementor-element .hcvc-plugin-root .hcvc-person {
    width: auto !important;
}

/* Predictor / parent predictor / converter roots */
#hcvc-predictor-container.hcvc-plugin-root,
#hcvc-parent-predictor-container.hcvc-plugin-root,
#hcvc-height-converter-container.hcvc-plugin-root {
    width: 100% !important;
    max-width: 100% !important;
}

#hcvc-predictor-container .hcvc-people-layer,
#hcvc-parent-predictor-container .hcvc-people-layer {
    display: flex !important;
    align-items: flex-end !important;
}

#hcvc-predictor-container .hcvc-person,
#hcvc-parent-predictor-container .hcvc-person {
    flex: 0 0 auto !important;
    max-width: none !important;
}

#hcvc-predictor-container .hcvc-person-figure svg,
#hcvc-parent-predictor-container .hcvc-person-figure svg {
    max-width: none !important;
    height: 100% !important;
    width: 100% !important;
}