/* Goal conversions and world map visualization. */

/* Goal Conversions Styles */
.goal-conversion-row .report-item-icon {
    font-size: 1.5rem;
    line-height: 1;
    width: auto;
    height: auto;
}

.report-item-name-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.report-item-subtitle {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    font-weight: var(--font-weight-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goal-metrics {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.goal-metric-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.report-item-label {
    font-size: 0.6875rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* World Map Visualization Styles */
#locations-map-view {
    position: relative;
}

#world-map-container {
    position: relative;
    width: 100%;
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 0;
}

#world-map {
    width: 100%;
    height: clamp(360px, 42vw, 520px);
    overflow: hidden;
}

#world-map-svg {
    width: 100%;
    height: 100%;
}

#world-map-svg .country {
    pointer-events: all;
    transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

#world-map-svg .country:hover {
    filter: brightness(0.95);
}

.map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.map-legend > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#map-tooltip {
    display: none;
    position: absolute;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    z-index: 1000;
    font-size: 0.875rem;
}

#tooltip-country {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

#tooltip-visitors {
    color: var(--gray-500);
}

.world-map-container,
#world-map-container {
    position: relative;
    width: 100%;
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 0.35rem;
}

.world-map-frame,
#world-map {
    width: 100%;
    height: clamp(360px, 42vw, 520px);
    overflow: hidden;
}

.world-map-svg,
#world-map-svg {
    width: 100%;
    height: 100%;
}

.world-map-svg .country,
#world-map-svg .country {
    pointer-events: all;
    transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.world-map-svg .country:hover,
#world-map-svg .country:hover {
    filter: brightness(0.95);
}

.map-tooltip,
#map-tooltip {
    display: none;
    position: absolute;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    z-index: 1000;
    font-size: 0.875rem;
}

.map-tooltip-country,
#tooltip-country {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.map-tooltip-visitors,
#tooltip-visitors {
    color: var(--gray-500);
}

@media (max-width: 640px) {
    #world-map,
    .world-map-frame {
        height: 300px;
    }
}