/* Initially hide part of the text (showing only the first few characters) */
.hidden-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 1.2em;
    transition: height 0.3s ease;
}

/* Expanded text, smoothly transitions without layout shift */
.hidden-text.expanded {
    white-space: normal;
    height: auto;
}

/* Button styling for both "Näita VIN", "Näita reg. nr.", and "Transpordiamet" */
.reveal-btn, .transpordiamet-btn, .vin-reveal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    border: 1px solid var(--accent);
    background-color: #f1f1f1;
    font-size: 12px;
    font-weight: 400;
    border-radius: 5px;
    min-width: 111px;
    height: 25px;
    transition: background-color 0.2s;
    width: 111px; /* Set a fixed width to prevent layout shift */
}

/* Prevent layout shift on hover */
.reveal-btn:hover, .transpordiamet-btn:hover, .vin-reveal-btn:hover {
    background-color: #ddd;
    /* Ensure the width stays consistent */
    width: 111px; /* Maintain same width on hover */
}

/* Align items */
.item-attr, .item-property {
    display: inline-flex;
    align-items: center;
}

/* Align button images */
.transpordiamet-btn img, .vin-reveal-btn img {
    vertical-align: middle;
    height: 15px;
    margin-right: 5px;
}

.hidden-text.expanded.revealed-email {
    max-width: 166px;
    min-height: 24px;
    padding: 4px 6px;
    font-size: 12px;
    font-family: monospace;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 4px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    vertical-align: middle;

    /* ? Kill the ellipsis */
    text-overflow: clip;
}

/* Chrome, Safari, Edge scrollbar behavior */
.hidden-text.expanded.revealed-email::-webkit-scrollbar {
    height: 6px;
}

.hidden-text.expanded.revealed-email::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 4px;
}

/* Hide scrollbar if not needed (Chrome/Webkit) */
.hidden-text.expanded.revealed-email:not(:hover)::-webkit-scrollbar {
    background: transparent;
}

.interactive-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.interactive-link:hover {
    color: var(--accent-color, #007bff); /* Replace with your actual accent color */
    text-decoration: underline;
}