/* smart-tooltip.css - global tooltip portal */
.st-tip {
    position: absolute;
    z-index: 99999;
    display: none;
    max-width: 520px;
    pointer-events: none; /* becomes clickable via inner */
}

    .st-tip.is-open {
        display: block;
    }

.st-tip-inner {
    pointer-events: auto;
    background: var(--rd-surface, #fff);
    border: 1px solid var(--rd-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15,23,42,.10), 0 4px 10px rgba(15,23,42,.08);
    padding: .75rem .85rem;
}

.st-tip-content {
    color: #334155;
    font-size: .875rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ✅ UPDATED: Compact 2-line list mode (no borders, tighter spacing) */
.st-tip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem; /* Tight gap between lines */
}

.st-tip-line {
    padding: 0; /* Remove padding */
    border-bottom: none; /* Remove all borders */
    margin: 0;
}

    /* ✅ Line 1: Bold, larger, darker - the ingredient name */
    .st-tip-line:first-child {
        font-weight: 450;
        font-size: 0.9375rem; /* 15px */
        color: #1e293b;
        line-height: 1.3;
        
    }

    /* ✅ Line 2: Regular weight, smaller, gray - the details */
    .st-tip-line:nth-child(2) {
        font-weight: 400;
        font-size: .85rem; /* 13px */
        color: #64748b;
        line-height: 1.4;
    }

    /* ✅ Hide any additional lines beyond 2 (just in case) */
    .st-tip-line:nth-child(n+3) {
        display: none;
    }

/* Arrow */
.st-tip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: var(--rd-surface, #fff);
    border-left: 1px solid var(--rd-border, #e5e7eb);
    border-top: 1px solid var(--rd-border, #e5e7eb);
}
/* When below trigger, arrow on top */
.st-tip.is-below .st-tip-arrow {
    top: -6px;
}
/* When above trigger, arrow on bottom (flip borders) */
.st-tip.is-above .st-tip-arrow {
    bottom: -6px;
    border-left: none;
    border-top: none;
    border-right: 1px solid var(--rd-border, #e5e7eb);
    border-bottom: 1px solid var(--rd-border, #e5e7eb);
}
/* Add to smart-tooltip.css */
.st-tip {
    position: absolute;
    z-index: 99999;
    display: none;
    max-width: 520px;
    pointer-events: none;
    left: 60px!important; /* ✅ Force minimum left position */
}

/* ✅ Ensure tooltip stays within viewport on small screens */
@media (max-width: 768px) {
    .st-tip {
        max-width: calc(100vw - 32px);
        left: 16px !important;
        right: 16px;
        margin: 0 auto;
    }
}