html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: Arial, sans-serif; background-color: #f4f2f7; color: #333; display: flex; flex-direction: column; }
h1 { color: #4a0d33; margin: 10px 0; text-align: center; flex-shrink: 0; }
#main-content-wrapper { flex-grow: 1; display: flex; flex-direction: column; margin-right: 10px; overflow: hidden; position: relative; }
#mynetwork { flex-grow: 1; height: 100%; border: 1px solid #ccc; background-color: #fff; background-image: linear-gradient(to top, #CCCCCC, #b9daeb); box-shadow: 0 0 10px rgba(0,0,0,0.1); position: relative; border-radius: 6px; }
#network-legend {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.75);
    border:0px solid #ddd;
    border-radius: 5px;
    font-size: 0.85em;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Bar Chart Infographic Styles */
#infographic-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 229px; 
    max-height: 60%;
    background-color: rgba(255, 255, 255, 0.80);
    border: 0px solid #ccc;
    border-radius: 6px;
    z-index: 1000;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow-y: auto;
    font-size: 0.70em; 
}
.pie-chart-section h4 { margin-top: 0; margin-bottom: 8px; font-size: 1.1em; color: #4a0d33; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.pie-chart-section:last-of-type { margin-top: 15px; }
.bar-chart-container { display: flex; flex-direction: column; gap: 5px; }
.bar-item { display: flex; align-items: center; gap: 6px; height: 16px; }
.bar-label {
    width: 100px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95em;
    flex-shrink: 0;
}
.bar-container {
    flex-grow: 1;
    background-color: #e9e9e9;
    border-radius: 3px;
    height: 100%;
}
.bar-fill {
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    font-size: 0.85em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    padding-left: 5px;
    box-sizing: border-box;
    min-width: 22px; /* So the percentage is visible even for small values */
}
#infographic-price-filter-display {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
    font-weight: bold;
    color: #4a0d33;
    text-align: center;
    font-size: 1.1em;
}
.price-filter-subtitle {
    font-size: 0.9em;
    font-style: italic;
    color: #6c757d;
    text-align: center;
    margin-top: 2px;
}
/* End Infographic Styles */
.legend-item { display: flex; align-items: center; margin-bottom: 4px; }
.legend-item:last-child { margin-bottom: 0; }
.legend-line { border-radius: 2px; margin-right: 8px; }
.color-dot { margin-right: 8px; }
#legend-bottle-img { margin-right: 8px; } 
#main-container { display: flex; flex-direction: row; width: 100vw; flex-grow: 1; padding: 10px; box-sizing: border-box; overflow: hidden; }
#info-panel-wrapper { flex-grow: 0; flex-shrink: 0; width: 275px; height: 100%; display: flex; flex-direction: column; overflow-y: hidden; }
#wine-selector-container, #similarity-filter-container, .overlay-container { 
    margin-bottom: 3px; 
    padding: 6px; 
    background-color: #f9f9f9; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
}

#wine-selector-container > label,
#similarity-filter-container > label,
.overlay-container > label {
    font-size: 0.9em;
}
#wine-dropdown { width: 100%; padding: 2px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; background-color: #fff; }
#info-panel { width: 100%; flex-grow: 1; padding: 15px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0,0,0,0.05); overflow-y: auto; font-size: 0.9em; box-sizing: border-box; border-radius: 6px; }
#info-panel h2 { margin-top: 0; font-size: 1.4em; color: #0000FF; }
#info-panel h2 a { text-decoration: none; color: inherit; }
#info-panel h2 a:hover { text-decoration: underline; }
#info-panel h3 { margin-top: 15px; margin-bottom: 5px; font-size: 1.1em; color: #2980b9; border-bottom: 1px solid #eee; padding-bottom: 3px;}
#info-panel .sub-heading { font-size: 1.05em; color: #333; font-weight: bold; margin-top:12px; margin-bottom:4px;}
#info-panel p, #info-panel ul { margin: 5px 0; }
#info-panel ul { padding-left: 20px; list-style-type: '— '; }
#info-panel em { color: #555; font-style: italic;}
#info-panel a { color: #2980b9; text-decoration: none; }
#info-panel a:hover { text-decoration: underline; }
.subtitle { text-align: center; margin-top: -8px; color: #555; }
#zoom-fit-text { position: absolute; bottom: 10px; right: 10px; z-index: 500; padding: 3px 6px; background-color: rgba(255,255,255,0.8); border: 1px solid #ddd; border-radius: 3px; font-size:0.8em; color: #555; pointer-events: none; }
.radio-group { display: flex; justify-content: flex-start; align-items: center; font-size: 0.70em; flex-wrap: wrap; }
.radio-group label { margin-right: 4px; }
.overlay-container label { display:block; margin-bottom:5px; font-weight:bold; }

/* --- NEW: CSS FOR HOVER CARD --- */
#hover-card {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #aaa;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 10px;
    width: 180px;
    font-size: 0.75em;
    pointer-events: none; /* This is crucial so the card doesn't interfere with other mouse events */
    transition: opacity 0.1s ease-in-out;
}
#hover-card h4 {
    margin: 0 0 8px 0;
    font-size: 1.0em;
    color: #4a0d33;
    border-bottom: 1px solid #eee;
    padding-bottom: 1px;
}
#hover-card p {
    margin: 0 0 3px 0;
}
#hover-card .profile-title {
    font-weight: bold;
    margin-top: 8px;
    color: #333;
}
#hover-card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 7px;
    background-color: #f0f0f0; /* Placeholder color while image loads */
}
/* --- NEW: CSS FOR PRICE SLIDER --- */
.slider-container {
    position: relative;
    height: 20px;
    width: 95%;
    margin: 10px auto;
}
.slider-track, .slider-progress {
    position: absolute;
    border-radius: 3px;
    height: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.slider-track {
    background-color: #ddd;
    z-index: 1;
}
.slider-progress {
    /* --- FIX: REPLACED SOLID COLOR WITH GRADIENT --- */
    background-image: linear-gradient(to right, rgb(0, 60, 255), rgb(255, 60, 0));
    z-index: 2;
}
.price-slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    width: 100%;
    height: 5px;
    background: transparent;
    pointer-events: none;
    z-index: 3;
    margin: 0;
}
/* This makes the entire top slider invisible to clicks, so you can grab the one below */
#max-price-slider {
    pointer-events: none;
}
.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 2px solid #2980b9;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto; /* This makes ONLY the thumb clickable */
    margin-top: -5px; /* Vertically center the thumb */
}
.price-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background-color: #fff;
    border: 2px solid #2980b9;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}
/* --- NEW: CSS FOR ZOOM CONTROLS --- */
#zoom-controls {
    position: absolute;
    bottom: 40px;
    right: 10px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}
.zoom-btn {
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.2s;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}
.zoom-btn:hover {
    background-color: #fff;
}