.tooltip {
    position: fixed;
    z-index: 10000;
    display: none;
    pointer-events: none;
}

.tooltip.is-visible {
    display: block;
}

.tooltip-container {
    position: relative;
    background: var(--color-container);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(30, 42, 78, 0.15);
    padding: 12px 16px;
    max-width: 400px;
    min-width: 150px;
    box-sizing: border-box;
    pointer-events: none;
}

.tooltip-label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-label);
    display: inline-block;
    min-width: 120px;
    flex-shrink: 0;
}

.tooltip-text {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-base);
    color: var(--color-text);
    line-height: 1.4;
    display: inline-block;
    flex: 1;
}

.tooltip-row {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
}

.tooltip-row:last-child {
    margin-bottom: 0;
}

/* Per categorie specifieke regels - makkelijk uit te schakelen */
.tooltip-row.tooltip-naam {display: flex;}
.tooltip-row.tooltip-email {display: flex;}
.tooltip-row.tooltip-telefoon {display: flex;}
.tooltip-row.tooltip-accommodatie {display: none;}
.tooltip-row.tooltip-incheck-datum {display: none;}
.tooltip-row.tooltip-incheck-tijd {display: flex;}
.tooltip-row.tooltip-uitcheck-datum {display: none;}
.tooltip-row.tooltip-uitcheck-tijd {display: flex;}
.tooltip-row.tooltip-status {display: none;}
.tooltip-row.tooltip-optie {display: flex;}
.tooltip-row.tooltip-betaling {display: flex;}
.tooltip-row.tooltip-opmerkingen {display: flex;}
.tooltip-row.tooltip-review {display: flex;}
.tooltip-row.tooltip-zichtbaarheid {display: flex;}

.tooltip-container::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.tooltip.tooltip-top .tooltip-container::before {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--border-color);
}

.tooltip.tooltip-top .tooltip-container::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--color-container);
}

.tooltip.tooltip-bottom .tooltip-container::before {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--border-color);
}

.tooltip.tooltip-bottom .tooltip-container::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--color-container);
}

.tooltip.tooltip-left .tooltip-container::before {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--border-color);
}

.tooltip.tooltip-left .tooltip-container::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--color-container);
}

.tooltip.tooltip-right .tooltip-container::before {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--border-color);
}

.tooltip.tooltip-right .tooltip-container::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--color-container);
}

.tooltip {
    will-change: transform;
}

@media screen and (max-width: 700px) {
    .tooltip-container {
        max-width: calc(100vw - 32px);
        min-width: 200px;
        padding: 10px 14px;
    }

    .tooltip-label {
        font-size: 11px;
    }

    .tooltip-text {
        font-size: 12px;
    }
}