/* BMI Calculator - Self-contained WPBakery widget */

    .clinic-bmi-widget {
        --bmi-primary:#00AA9C;
        --bmi-primary-dark: #10545b;
        --bmi-text: #18363b;
        --bmi-muted: #667b7e;
        --bmi-border: #e1ebeb;
        direction: rtl;
        font-family: inherit;
        color: var(--bmi-text);
    }

    .clinic-bmi-widget *,
    .clinic-bmi-widget *::before,
    .clinic-bmi-widget *::after,
    .bmi-dialog *,
    .bmi-dialog *::before,
    .bmi-dialog *::after {
        box-sizing: border-box;
    }

    .clinic-bmi-widget .bmi-layout {
        max-width: 1180px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 26px;
        align-items: start;
        margin: auto;
    }

    .clinic-bmi-widget .bmi-card {
        padding: 30px;
        background: #fff;
        border: 1px solid var(--bmi-border);
        border-radius: 18px;
        box-shadow: 0 8px 30px rgba(0, 40, 45, 0.045);
        height: 100%;
    }

    .clinic-bmi-widget .bmi-eyebrow {
        display: block;
        margin-bottom: 9px;
        color: var(--bmi-primary);
        font-size: 13px;
        font-weight: 700;
    }

    .clinic-bmi-widget .bmi-heading {
        margin: 0 0 12px;
        color: var(--bmi-text);
        font-size: clamp(23px, 3vw, 28px);
        font-weight: 600;
        line-height: 1.5;
    }

    .clinic-bmi-widget .bmi-intro {
        margin: 0 0 25px;
        color: var(--bmi-muted);
        font-size: 15px;
        line-height: 1.9;
    }

    .clinic-bmi-widget .bmi-fields {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 23px;
    }

    .clinic-bmi-widget .bmi-field label {
        display: block;
        margin-bottom: 9px;
        font-size: 14px;
        font-weight: 700;
    }

    .clinic-bmi-widget .bmi-input-wrap {
        position: relative;
    }

    .clinic-bmi-widget .bmi-input {
        display: block;
        width: 100%;
        height: 55px;
        padding: 12px 17px 12px 65px;
        border: 1px solid #d6e1e2;
        border-radius: 11px;
        background: #fff;
        color: #18363b;
        font-family: inherit;
        font-size: 17px;
        font-weight: 600;
        direction: ltr;
        text-align: right;
        box-shadow: none;
    }

    .clinic-bmi-widget .bmi-input:focus {
        outline: 2px solid transparent;
        border-color: var(--bmi-primary);
        box-shadow: 0 0 0 3px rgba(23, 107, 115, 0.14);
    }

    .clinic-bmi-widget .bmi-unit {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--bmi-muted);
        pointer-events: none;
    }

    .clinic-bmi-widget .bmi-help {
        display: block;
        margin-top: 7px;
        font-size: 12px;
        color: var(--bmi-muted);
    }

    .clinic-bmi-widget .bmi-button,
    .bmi-dialog .bmi-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 51px;
        padding: 12px 22px;
        border: 1px solid transparent;
        border-radius: 11px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .clinic-bmi-widget .bmi-primary,
    .bmi-dialog .bmi-primary {
        background: #00AA9C;
        color: #fff;
    }

    .clinic-bmi-widget .bmi-primary:hover,
    .bmi-dialog .bmi-primary:hover {
        background: #10545b;
        color: #fff;
    }

    .clinic-bmi-widget .bmi-submit {
        width: 100%;
    }

    .clinic-bmi-widget .bmi-note {
        margin: 17px 0 0;
        font-size: 12px;
        line-height: 1.9;
        color: var(--bmi-muted);
    }

    .clinic-bmi-widget .bmi-table-title {
        margin: 0 0 8px;
        color: var(--bmi-text);
        font-size: 22px;
        font-weight: 800;
        line-height: 1.5;
    }

    .clinic-bmi-widget .bmi-table-intro {
        margin: 0 0 20px;
        color: var(--bmi-muted);
        font-size: 14px;
        line-height: 1.9;
    }

    .clinic-bmi-widget .bmi-table-scroll {
        width: 100%;
        overflow-x: auto;
    }

    .clinic-bmi-widget .bmi-table {
        width: 100%;
        border-collapse: collapse;
        text-align: right;
        font-size: 14px;
    }

    .clinic-bmi-widget .bmi-table th {
        padding: 15px 13px;
        background: #edf5f5;
        color: var(--bmi-text);
        font-weight: 800;
        border-bottom: 1px solid var(--bmi-border);
    }

    .clinic-bmi-widget .bmi-table td {
        padding: 8px;
        color: #40595d;
        border-bottom: 1px solid #edf1f1;
        vertical-align: middle;
    }

    .clinic-bmi-widget .bmi-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .clinic-bmi-widget .bmi-range {
        white-space: nowrap;
    }

    .clinic-bmi-widget .bmi-category-name {
        display: block;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .clinic-bmi-widget .bmi-color-bar {
        display: block;
        width: 100px;
        max-width: 100%;
        height: 4px;
        border-radius: 4px;
        background: var(--bar-color, #aaa);
    }

    .clinic-bmi-widget .bmi-table tr.is-current td {
        background: #e5f5f1;
        color: #10545b;
        font-weight: 800;
    }

    .clinic-bmi-widget .bmi-table tr.is-current td:first-child {
        box-shadow: inset -4px 0 0 #176b73;
    }
    
/* BMI modal positioning */
dialog.bmi-dialog {
    position: fixed !important;
    inset: 0 !important;

    width: min(470px, calc(100vw - 32px)) !important;
    max-width: 470px !important;

    max-height: calc(100dvh - 32px) !important;
    margin: auto !important;

    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;

    background: #fff !important;
    overflow-x: hidden;
    overflow-y: auto;

    z-index: 999999 !important;
}

dialog.bmi-dialog:not([open]) {
    display: none !important;
}

dialog.bmi-dialog[open] {
    display: block !important;
}

dialog.bmi-dialog::backdrop {
    background: rgba(8, 25, 30, 0.68);
    backdrop-filter: blur(3px);
}

/* Hide inactive modal sections */
dialog.bmi-dialog [hidden] {
    display: none !important;
}

/* Lock background scrolling */
html.bmi-modal-open,
body.bmi-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Modal buttons */
dialog.bmi-dialog .bmi-dialog-actions {
    display: flex;
    gap: 12px;
    margin-top: 26px;
}

dialog.bmi-dialog .bmi-dialog-actions .bmi-button {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    dialog.bmi-dialog .bmi-dialog-inner {
        padding: 42px 20px 24px;
    }

    dialog.bmi-dialog .bmi-dialog-actions {
        flex-direction: column;
    }
}


@media (max-width: 480px) {
    dialog.bmi-dialog .bmi-dialog-inner {
        padding: 42px 20px 24px;
    }

    dialog.bmi-dialog .bmi-dialog-actions {
        flex-direction: column;
    }
}
    .bmi-dialog:not([open]) {
        display: none !important;
    }

    .bmi-dialog[open] {
        display: block;
    }

    .bmi-dialog [hidden] {
        display: none !important;
    }

    .bmi-dialog::backdrop {
        background: rgba(8, 25, 30, 0.68);
        backdrop-filter: blur(3px);
    }

    .bmi-dialog .bmi-dialog-inner {
        position: relative;
        padding: 42px 30px 30px;
        text-align: center;
    }

    .bmi-dialog .bmi-icon-close {
        position: absolute;
        top: 13px;
        left: 13px;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #edf3f3;
        color: #53696c;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    .bmi-dialog .bmi-spinner {
        width: 64px;
        height: 64px;
        margin: 20px auto 25px;
        border: 5px solid #e2eeee;
        border-top-color: #176b73;
        border-radius: 50%;
        animation: clinic-bmi-spin 0.8s linear infinite;
    }

    @keyframes clinic-bmi-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .bmi-dialog .bmi-dialog-heading {
        margin: 0 0 12px;
        color: #18363b;
        font-size: 23px;
        font-weight: 800;
        line-height: 1.5;
    }

    .bmi-dialog .bmi-dialog-description {
        margin: 0;
        color: #667b7e;
        font-size: 14px;
        line-height: 1.9;
    }

    .bmi-dialog .bmi-result-badge {
        display: inline-block;
        margin-bottom: 17px;
        padding: 7px 15px;
        background: #e7f4f1;
        border-radius: 30px;
        color: #176b73;
        font-size: 13px;
        font-weight: 700;
    }

   .bmi-2-bmi-score{
        display: block;
        margin: 0 0 10px;
        color: #176b73;
        font-size: clamp(58px, 12vw, 36px);
        font-weight: 800;
        line-height: 1.2;
        direction: ltr;
        font-variant-numeric: tabular-nums;
    }

    .bmi-dialog .bmi-result-status {
        display: block;
        margin-bottom: 16px;
        font-size: 22px;
        font-weight: 800;
    }

    .bmi-dialog .bmi-result-description {
        margin: 0 0 24px;
        padding: 17px;
        background: #f4f9f9;
        border-radius: 12px;
        color: #53696c;
        font-size: 14px;
        line-height: 1.9;
    }

    .bmi-dialog .bmi-dialog-actions {
        display: flex;
        gap: 12px;
        margin-top: 26px;
    }

    .bmi-dialog .bmi-dialog-actions .bmi-button {
        flex: 1;
    }

    .bmi-dialog .bmi-secondary {
        background: #e7e7e7;
        border-color: #dce8e8;
        color: #18363b;
    }

    .bmi-dialog .bmi-secondary:hover {
        background: #e0ebeb;
    }

    .clinic-bmi-widget button:focus-visible,
    .clinic-bmi-widget input:focus-visible,
    .bmi-dialog button:focus-visible,
    .bmi-dialog a:focus-visible {
        outline: 3px solid #72bfc4;
        outline-offset: 3px;
    }

    @media (max-width: 767px) {
        .clinic-bmi-widget .bmi-layout {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .clinic-bmi-widget .bmi-card {
            padding: 22px 18px;
        }

        .clinic-bmi-widget .bmi-heading {
            font-size: 24px;
        }

        .clinic-bmi-widget .bmi-table td,
        .clinic-bmi-widget .bmi-table th {
            padding: 13px 9px;
            font-size: 13px;
        }

        .bmi-dialog .bmi-dialog-inner {
            padding: 40px 20px 25px;
        }

        .bmi-dialog .bmi-dialog-actions {
            flex-direction: column;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bmi-dialog .bmi-spinner {
            animation: none;
            border-top-color: #176b73;
            border-right-color: #176b73;
        }

        .clinic-bmi-widget .bmi-button,
        .bmi-dialog .bmi-button {
            transition: none;
        }
    }

.clinic-bmi-widget .bmi-layout { width: 100%; }


html.bmi-modal-open,
body.bmi-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}