/* General reset for box-sizing */

/* Highlight Rectangle (Outer container) */
.highlight_rectangle {
    background: transparent;
    display: flex; /* Enable Flexbox */
    align-items: center; /* Center vertically */
    justify-content: space-between; /* Distribute items evenly */
    border-radius: 16px;
    padding: 8px;
    overflow: hidden;
}

/* Circle Buttons */
.circle_button {
    width: 15px; /* Fixed size for the buttons */
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    border: none; /* Remove the border */
    outline: none; /* Remove the outline */
    background: transparent; /* Remove background color if not needed */
    cursor: pointer; /* Ensures it still behaves like a button */
}

.circle_button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* Darker shadow */
}

.circle_button.selected {
    transform: scale(1.5); /* Increase size for the selected button */
    z-index: 1; /* Bring to the front */
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.3); /* Highlight shadow for emphasis */
}

/* Chevron Styling */
.fa-trash {
    font-size: 18px; /* Adjust font size to match the buttons */
    justify-content: center; /* Center horizontally */
    width: 18px; /* Width for the chevron icon container */
    height: 18px; /* Height for the chevron icon container */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition effects */
    border: none; /* Remove the border */
    outline: none; /* Remove the outline */
    background: transparent; /* Remove background color if not needed */
}

.ki-add-item {
    cursor: pointer; /* Pointer cursor for interactivity */
    display: flex;
    font-size: 25px;
    border: none; /* Remove the border */
    outline: none; /* Remove the outline */
    background: transparent; /* Remove background color if not needed */
}

/* Mobile Highlight Menu */
.mobile-highlight-menu {
    position: fixed;
    z-index: 10000;
    background: white;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: none;
    flex-direction: row;
    gap: 8px;
    border: 1px solid #e0e0e0;
}

.mobile-highlight-menu button {
    transition: transform 0.2s ease;
}

.mobile-highlight-menu button:hover,
.mobile-highlight-menu button:focus {
    transform: scale(1.1);
}

/* Highlighted text styling */
.highlighted-text {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.highlighted-text:hover {
    opacity: 0.8;
}

/* Context menu for desktop */
.highlight-context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.highlight-context-menu button {
    border: none;
    background: none;
    padding: 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.highlight-context-menu button:hover {
    background-color: #f0f0f0;
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
    .circle_button {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
    }
    
    .mobile-highlight-menu {
        padding: 12px;
        gap: 10px;
    }
    
    .mobile-highlight-menu button {
        min-width: 35px;
        min-height: 35px;
        touch-action: manipulation;
    }
    
    .highlighted-text {
        /* Ensure highlighted text is easily tappable on mobile */
        min-height: 20px;
        display: inline-block;
    }
}

/* High DPI display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .circle_button,
    .mobile-highlight-menu button {
        border-width: 0.5px;
    }
}

/* Error message styling */
.highlight-error {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ff4444;
    color: white;
    padding: 12px;
    border-radius: 4px;
    z-index: 10001;
    font-size: 14px;
    max-width: 300px;
}